All files / if / mod.ts

// Imports
import { type Directive, type Nullable, Phase } from "@mizu/internal/engine"
export type * from "@mizu/internal/engine"

/** `*if` cache. */
export type Cache = { templates: WeakMap<Comment, { nodes: Node[]; end: Comment }>; generated: WeakMap<Node, Comment> }

/**
 * `*if` directive.
 *
 * @internal `_directive.value` Force the directive to use specified value rather than the attribute value.
 * @internal `_directive.expression` Set the original expression for the directive if element is commented out.
 * @internal `_directive.directive` Set the original directive name for the directive if element is commented out.
 */
export const _if = {
  name: "*if",
  phase: Phase.TOGGLE,
  init(renderer) {
    renderer.cache<Cache>(this.name, { templates: new WeakMap(), generated: new WeakMap() })
  },
  setup(renderer, element, { cache, state }) {
    const original = (renderer.isComment(element) ? renderer.cache("*").get(element) : null) ?? element
    if ((cache.generated.has(original)) && (!state[renderer.internal("templated")])) {
      return false
    }
  },
  async execute(renderer, element, { attributes: [attribute], context, state }) {
    const result = Boolean(await renderer.evaluate(element, arguments[2]._directive?.value ?? attribute.value, { context, state }))
    // Templates are kept commented out and their content is inserted after the comment when truthy (unless they carry other directives)
    const template = (renderer.isComment(element) ? renderer.cache("*").get(element) : element) as Nullable<HTMLElement>
    const names = [_if.name, arguments[2]._directive?.directive]
    if ((template?.tagName === "TEMPLATE") && (!renderer.directives.some((directive) => (!names.includes(directive.name)) && (renderer.getAttributes(template, directive.name, { first: true }))))) {
      const cache = renderer.cache<Cache>("*if") ?? renderer.cache<Cache>("*if", { templates: new WeakMap(), generated: new WeakMap() })
      let comment = element as Comment
      if (!renderer.isComment(element)) {
        comment = renderer.comment(element, { expression: attribute.value, directive: _if.name, ...arguments[2]._directive })
      }
      if (!cache.templates.has(comment)) {
        const nodes = Array.from((template as HTMLTemplateElement).content.cloneNode(true).childNodes)
        const end = renderer.document.createComment(`[/${arguments[2]._directive?.directive ?? _if.name}]`)
        ;[...nodes, end].forEach((node) => cache.generated.set(node, comment))
        cache.templates.set(comment, { nodes, end })
      }
      const cached = cache.templates.get(comment)!
      const attached = Boolean(cached.end.parentNode)
      if (result) {
        if (!attached) {
          let position = comment as Node
          for (const node of [...cached.nodes, cached.end]) {
            const current = renderer.getComment(node as HTMLElement) ?? node
            comment.parentNode?.insertBefore(current, position.nextSibling)
            position = current
          }
        }
        for (const node of cached.nodes) {
          const current = renderer.getComment(node as HTMLElement) ?? node
          if (current.nodeType !== renderer.window.Node.TEXT_NODE) {
            await renderer.render(current as HTMLElement, { context, state: { ...state, [renderer.internal("templated")]: true } })
          }
        }
      } // Remove content up to the end comment (including content generated by nested directives)
      else if (attached) {
        while ((comment.nextSibling) && (comment.nextSibling !== cached.end)) {
          comment.nextSibling.remove()
        }
        cached.end.remove()
      }
      return (comment !== element) ? { element: comment, final: true } : { final: true }
    }
    switch (true) {
      // Switch comment to element if truthy
      case result && (renderer.isComment(element)) && (renderer.cache("*").has(element)): {
        const original = renderer.uncomment(element)
        return { element: original }
      }
      // Switch element to comment if falsy
      case (!result) && (renderer.isHtmlElement(element)): {
        const comment = renderer.comment(element, { expression: attribute.value, directive: _if.name, ...arguments[2]._directive })
        return { element: comment, final: true }
      }
    }
  },
} as const satisfies Directive<{
  Cache: Cache
}>

/** Default exports. */
export default _if