All files / for / mod.ts

// Imports
import { type Arg, type Cache, type Context, type Directive, type Nullable, Phase, type Renderer } from "@mizu/internal/engine"
import { Expression } from "./parse.ts"
export type * from "@mizu/internal/engine"

/** `*for` directive. */
export const _for = {
  name: "*for",
  phase: Phase.EXPAND,
  init(renderer) {
    renderer.cache<Cache<typeof _for>>(this.name, new WeakMap())
  },
  setup(renderer, element, { cache, state }) {
    const original = (renderer.isComment(element) ? renderer.cache("*").get(element) : null) ?? element
    if ((cache.get(original) === null) && (!state[renderer.internal("iterating")])) {
      return false
    }
  },
  async execute(renderer, element, { cache, context, state, attributes: [attribute] }) {
    // Compute iterations using the expression parser
    const iterations = [] as Record<PropertyKey, unknown>[]
    try {
      const loop = `()=>{for(${attribute.value}){${renderer.internal("iterations")}.push({${Expression.parse(attribute.value).join(",")}})}}`
      await renderer.evaluate(null, loop, { context, state: { ...state, [renderer.internal("iterations")]: iterations }, args: [] })
    } catch (error) {
      if (!(error instanceof SyntaxError)) {
        renderer.warn(`[${this.name}] error while evaluating expression: ${error}`, element)
        return { final: true }
      }
      // Fallback to iterable values
      try {
        const value = await renderer.evaluate(null, attribute.value, { context, state })
        if (typeof value === "number") {
          iterations.push(...Array.from({ length: value }, () => ({})))
        } else {
          iterations.push(...Object.entries(value as Arg<typeof Object.entries>).map(([$key, $value]) => ({ $key, $value })))
        }
      } catch {
        renderer.warn(`[${this.name}] syntax error in expression: ${attribute.value}`, element)
        return { final: true }
      }
    }

    // Comment out templated element
    let comment = element as unknown as Comment
    if (!renderer.isComment(element)) {
      comment = renderer.comment(element, { directive: this.name as string, expression: attribute.value })
      cache.set(comment, { element, items: new Map(), contexts: new Map(), iteration: null })
    }
    const cached = cache.get(comment)!
    element = cached.element
    const identifiable = renderer.getAttributes(element, _id.name, { first: true })?.value
    // Templates carrying other directives are iterated as elements
    const expandable = (element.tagName === "TEMPLATE") && (!renderer.directives.some((directive) => (![this.name, _id.name].includes(directive.name)) && (renderer.getAttributes(element, directive.name, { first: true }))))

    // Generate items
    let position = comment as Node
    const generated = new Set<string>()
    const pending = []
    for (let i = 0; i < iterations.length; i++) {
      const meta = { $i: i, $I: i + 1, $iterations: iterations.length, $first: i === 0, $last: i === iterations.length - 1 }
      let id = `${i}`
      if (identifiable) {
        cached.iteration ??= context.with({ ...iterations[i] })
        Object.assign(cached.iteration.target, iterations[i])
        id = `${await renderer.evaluate(null, identifiable, { context: cached.iteration, state: { ...state, ...meta } })}`
      }
      generated.add(id)
      let iteration = cached.contexts.get(id)
      if (!iteration) {
        iteration = context.with(iterations[i])
        cached.contexts.set(id, iteration)
      } else {
        Object.assign(iteration.target, iterations[i])
      }
      // Create item if non-existent
      if (!cached.items.has(id)) {
        let nodes = [] as Node[]
        let end = null as Nullable<Comment>
        if (expandable) {
          nodes = Array.from((element as HTMLTemplateElement).content.cloneNode(true).childNodes)
          end = renderer.document.createComment(`[/${this.name}]`)
        } else {
          const item = element.cloneNode(true) as HTMLElement
          item.removeAttributeNode(renderer.getAttributes(item, this.name, { first: true })!)
          if (identifiable) {
            renderer.setAttribute(item, _id.name, id)
          }
          nodes = [item]
        }
        nodes.forEach((node) => renderer.isHtmlElement(node as HTMLElement) && cache.set(node as HTMLElement, null))
        cached.items.set(id, { nodes, end })
      }
      // Insert item
      const item = cached.items.get(id)!
      for (const node of range(renderer, item)) {
        comment.parentNode?.insertBefore(node, position.nextSibling)
        position = node
      }
      for (const node of item.nodes) {
        const current = renderer.getComment(node as HTMLElement) ?? node
        if (current.nodeType !== renderer.window.Node.TEXT_NODE) {
          pending.push(await renderer.render(current as HTMLElement, { context: iteration, state: { ...state, [renderer.internal("iterating")]: true, ...meta, $id: id } }))
        }
      }
    }
    await Promise.allSettled(pending)

    // Remove outdated items
    for (const [id, item] of cached.items) {
      if (!generated.has(id)) {
        cached.items.delete(id)
        cached.contexts.delete(id)
        range(renderer, item).forEach((node) => (node as ChildNode).remove())
      }
    }
    return { final: true }
  },
} as const satisfies Directive<{
  Cache: WeakMap<HTMLElement | Comment, Nullable<{ element: HTMLElement; items: Map<string, { nodes: Node[]; end: Nullable<Comment> }>; contexts: Map<string, Context>; iteration: Nullable<Context> }>>
}>

/** Resolve the nodes currently occupied by an item (from its first node up to its closing comment, if any). */
function range(renderer: Renderer, { nodes, end }: { nodes: Node[]; end: Nullable<Comment> }) {
  const current = nodes.map((node) => renderer.getComment(node as HTMLElement) ?? node)
  if (!end) {
    return current
  }
  if (!end.parentNode) {
    return [...current, end]
  }
  const occupied = [] as Node[]
  for (let node = (current[0] ?? end) as Nullable<ChildNode>; node; node = node.nextSibling) {
    occupied.push(node)
    if (node === end) {
      break
    }
  }
  return occupied
}

/** `*id` directive. */
export const _id = {
  name: "*id",
  phase: Phase.META,
} as Directive & { name: string }

/** Default exports. */
export default [_for, _id]