{"version":3,"file":"when.cjs","names":[],"sources":["../../src/directives/when.ts"],"sourcesContent":["import { computed, isReactive, type Readable, effect as rawEffect, untrack } from '@vielzeug/ripple';\n\nimport { invariant } from '../errors';\nimport { createDirectiveResult, type DirectiveResult, type HTMLResult, isHtmlResult } from '../template/result';\nimport { createReplaceableSlot, removeNodes } from '../utils/dom';\n\ntype MaybeReactive<T> = T | (() => T) | Readable<T>;\n\ntype WhenRenderable = HTMLResult | null | undefined | false;\n\nconst NO_PARENT_MSG = 'when() anchor comment has no parent node';\n\n/**\n * Conditionally renders one of two branches as a `DirectiveResult`.\n *\n * The condition may be a boolean, signal, or getter function.\n * When the condition changes, the current branch is cleaned up and\n * the new branch is mounted in its place.\n *\n * @example\n * ```ts\n * html`${when(isLoggedIn, () => html`<p>Welcome</p>`, () => html`<p>Log in</p>`)}`\n * ```\n */\nexport function when(\n  condition: MaybeReactive<boolean>,\n  truthy: () => WhenRenderable,\n  falsy?: () => WhenRenderable,\n): DirectiveResult {\n  if (typeof condition !== 'function' && !isReactive(condition)) {\n    return createDirectiveResult((anchor, registerCleanup) => {\n      const branch = condition ? truthy() : falsy ? falsy() : null;\n\n      if (!branch || !isHtmlResult(branch)) return;\n\n      const parent = anchor.parentNode;\n\n      invariant(parent, NO_PARENT_MSG);\n\n      const nodes = branch.mount(parent, anchor, registerCleanup);\n\n      registerCleanup(() => removeNodes(nodes));\n    });\n  }\n\n  return createDirectiveResult((anchor, registerCleanup) => {\n    const ownedComputed = typeof condition === 'function' ? computed(condition as () => boolean) : null;\n    const conditionSignal = ownedComputed ?? (condition as Readable<boolean>);\n\n    const parent = anchor.parentNode;\n\n    invariant(parent, NO_PARENT_MSG);\n\n    const endMarker = document.createComment('when/end');\n\n    parent.insertBefore(endMarker, anchor.nextSibling);\n\n    const slot = createReplaceableSlot();\n\n    const sub = rawEffect(() => {\n      const next = conditionSignal.value;\n\n      slot.clear();\n\n      const branch = next ? truthy() : falsy ? falsy() : null;\n\n      if (!branch || !isHtmlResult(branch)) return;\n\n      slot.setNodes(untrack(() => branch.mount(parent, endMarker, slot.registerCleanup)));\n    });\n\n    registerCleanup(() => sub.dispose());\n    registerCleanup(() => {\n      slot.clear();\n      endMarker.remove();\n    });\n  });\n}\n"],"mappings":"qIAUA,IAAM,EAAgB,2CActB,SAAgB,EACd,EACA,EACA,EACiB,CAiBjB,OAhBI,OAAO,GAAc,YAAc,EAAA,EAAC,EAAA,WAAA,CAAW,CAAS,EACnD,EAAA,uBAAuB,EAAQ,IAAoB,CACxD,IAAM,EAAS,EAAY,EAAO,EAAI,EAAQ,EAAM,EAAI,KAExD,GAAI,CAAC,GAAU,CAAC,EAAA,aAAa,CAAM,EAAG,OAEtC,IAAM,EAAS,EAAO,WAEtB,EAAA,UAAU,EAAQ,CAAa,EAE/B,IAAM,EAAQ,EAAO,MAAM,EAAQ,EAAQ,CAAe,EAE1D,MAAsB,EAAA,YAAY,CAAK,CAAC,CAC1C,CAAC,EAGI,EAAA,uBAAuB,EAAQ,IAAoB,CAExD,IAAM,GADgB,OAAO,GAAc,YAAA,EAAa,EAAA,SAAA,CAAS,CAA0B,EAAI,OACrD,EAEpC,EAAS,EAAO,WAEtB,EAAA,UAAU,EAAQ,CAAa,EAE/B,IAAM,EAAY,SAAS,cAAc,UAAU,EAEnD,EAAO,aAAa,EAAW,EAAO,WAAW,EAEjD,IAAM,EAAO,EAAA,sBAAsB,EAE7B,GAAA,EAAM,EAAA,OAAA,KAAgB,CAC1B,IAAM,EAAO,EAAgB,MAE7B,EAAK,MAAM,EAEX,IAAM,EAAS,EAAO,EAAO,EAAI,EAAQ,EAAM,EAAI,KAE/C,CAAC,GAAU,CAAC,EAAA,aAAa,CAAM,GAEnC,EAAK,UAAA,EAAS,EAAA,QAAA,KAAc,EAAO,MAAM,EAAQ,EAAW,EAAK,eAAe,CAAC,CAAC,CACpF,CAAC,EAED,MAAsB,EAAI,QAAQ,CAAC,EACnC,MAAsB,CACpB,EAAK,MAAM,EACX,EAAU,OAAO,CACnB,CAAC,CACH,CAAC,CACH"}