@typed/template 0.1.0

package/src/internal/server.ts

@@ -0,0 +1,293 @@
+import * as Effect from "effect/Effect"
+import type { HtmlChunk, PartChunk, SparsePartChunk } from "../HtmlChunk"
+import type {
+  AttributePart,
+  ClassNamePart,
+  CommentPart,
+  Part,
+  SparseAttributePart,
+  SparseClassNamePart,
+  SparseCommentPart,
+  SparsePart,
+  StaticText
+} from "../Part"
+import type { Renderable } from "../Renderable"
+import type { PartNode, SparseAttrNode, SparseClassNameNode, SparseCommentNode, SparsePartNode } from "../Template"
+import {
+  AttributePartImpl,
+  BooleanPartImpl,
+  ClassNamePartImpl,
+  CommentPartImpl,
+  DataPartImpl,
+  NodePartImpl,
+  PropertyPartImpl,
+  SparseAttributePartImpl,
+  SparseClassNamePartImpl,
+  SparseCommentPartImpl,
+  StaticTextImpl,
+  TextPartImpl
+} from "./parts"
+
+export type RenderChunk<R, E> =
+  | TextRenderChunk
+  | PartRenderChunk<R, E>
+  | SparsePartRenderChunk<R, E>
+
+export class TextRenderChunk {
+  readonly type = "text"
+
+  constructor(
+    readonly index: number,
+    readonly value: string
+  ) {}
+}
+
+export class PartRenderChunk<R, E> {
+  readonly type = "part"
+
+  constructor(
+    readonly index: number,
+    readonly chunk: PartChunk,
+    readonly part: Part,
+    readonly renderable: Renderable<R, E>
+  ) {}
+}
+
+export class SparsePartRenderChunk<R, E> {
+  readonly type = "sparse-part"
+
+  constructor(
+    readonly index: number,
+    readonly chunk: SparsePartChunk,
+    readonly part: SparsePart,
+    readonly renderables: Array<Renderable<R, E>>
+  ) {}
+}
+
+type RenderChunkMap = {
+  readonly [K in HtmlChunk["_tag"]]: <R, E>(
+    chunk: Extract<HtmlChunk, { _tag: K }>,
+    index: number,
+    values: ReadonlyArray<Renderable<any, any>>,
+    onChunk: (index: number, value: string) => Effect.Effect<never, never, void>
+  ) => RenderChunk<R, E>
+}
+
+const renderChunkMap: RenderChunkMap = {
+  text: (chunk, index) => new TextRenderChunk(index, chunk.value),
+  part: (chunk, index, values, onChunk) =>
+    // @ts-expect-error
+    new PartRenderChunk(
+      index,
+      chunk,
+      partNodeToPart(chunk.node, (v) => onChunk(index, chunk.render(v))),
+      values[chunk.node.index]
+    ),
+  "sparse-part": (chunk, index, values, onChunk) =>
+    // @ts-expect-error
+    new SparsePartRenderChunk(
+      index,
+      chunk,
+      sparsePartNodeToPart(chunk.node, (v) => onChunk(index, chunk.render(v))),
+      // @ts-expect-error
+      chunk.node.nodes.map((n) => (n._tag === "text" ? n.value : values[n.index]))
+    )
+}
+
+export function htmlChunksToRenderChunks<R, E>(
+  chunks: ReadonlyArray<HtmlChunk>,
+  values: ReadonlyArray<Renderable<R, E>>,
+  onChunk: (index: number, value: string) => Effect.Effect<never, never, void>
+) {
+  const output: Array<RenderChunk<R, E>> = Array(chunks.length)
+
+  for (let i = 0; i < chunks.length; i++) {
+    // @ts-expect-error
+    output[i] = renderChunkMap[chunks[i]._tag](chunks[i] as any, i, values, onChunk)
+  }
+
+  return output
+}
+
+type PartNodeMap = {
+  readonly [K in PartNode["_tag"]]: (
+    node: Extract<PartNode, { _tag: K }>,
+    onChunk: (value: unknown) => Effect.Effect<never, never, void>
+  ) => Part
+}
+
+const partNodeMap: PartNodeMap = {
+  attr: (node, onChunk) => new AttributePartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
+  "boolean-part": (node, onChunk) => new BooleanPartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
+  "className-part": (node, onChunk) => new ClassNamePartImpl(node.index, ({ value }) => onChunk(value), null),
+  "comment-part": (node, onChunk) => new CommentPartImpl(node.index, ({ value }) => onChunk(value), null),
+  "data": (node, onChunk) => new DataPartImpl(node.index, ({ value }) => onChunk(value), null),
+  "event": () => {
+    throw new Error("Events are not utilized on the server")
+  },
+  "node": (node, onChunk) => new NodePartImpl(node.index, ({ value }) => onChunk(value), null),
+  "property": (node, onChunk) => new PropertyPartImpl(node.name, node.index, ({ value }) => onChunk(value), null),
+  "ref": () => {
+    throw new Error("Refs are not utilized on the server")
+  },
+  "text-part": (node, onChunk) => new TextPartImpl(node.index, ({ value }) => onChunk(value), null)
+}
+
+export function partNodeToPart(
+  node: PartNode,
+  onChunk: (value: unknown) => Effect.Effect<never, never, void>
+): Part {
+  return partNodeMap[node._tag](node as any, onChunk)
+}
+
+function sparsePartNodeToPart(
+  node: SparsePartNode,
+  onChunk: (value: string | null) => Effect.Effect<never, never, void>
+) {
+  if (node._tag === "sparse-attr") {
+    return renderSparseAttr(node, onChunk)
+  } else if (node._tag === "sparse-class-name") {
+    return renderSparseClassName(node, onChunk)
+  } else {
+    return renderSparseComment(node, onChunk)
+  }
+}
+
+function renderSparseAttr(
+  attrNode: SparseAttrNode,
+  setAttribute: (value: string | null) => Effect.Effect<never, never, void>
+): SparseAttributePart {
+  const { nodes } = attrNode
+  const values: Map<number, string | null> = new Map()
+
+  function getValue() {
+    return (part.value = Array.from({ length: nodes.length }, (_, i) => values.get(i) || ""))
+  }
+
+  function setValue(value: string | null, index: number) {
+    return Effect.suspend(() => {
+      values.set(index, value)
+
+      if (values.size === nodes.length) return setAttribute(getValue().join(""))
+
+      return Effect.unit
+    })
+  }
+
+  const parts: Array<StaticText | AttributePart> = []
+
+  let partIndex = 0
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+
+    if (node._tag === "text") {
+      values.set(i, node.value)
+      parts.push(new StaticTextImpl(node.value))
+    } else {
+      parts.push(
+        new AttributePartImpl(
+          node.name,
+          partIndex++,
+          ({ value }) => setValue(value || "", i),
+          null
+        )
+      )
+    }
+  }
+
+  const part = new SparseAttributePartImpl(attrNode.name, parts, ({ value }) => setAttribute(value.join("")))
+
+  return part
+}
+
+function renderSparseClassName(
+  classNameNode: SparseClassNameNode,
+  setClassName: (value: string | null) => Effect.Effect<never, never, void>
+): SparseClassNamePart {
+  const { nodes } = classNameNode
+  const values: Map<number, string | null> = new Map()
+
+  function getValue() {
+    return (part.value = Array.from({ length: nodes.length }, (_, i) => values.get(i) || ""))
+  }
+
+  function setValue(value: string | null, index: number) {
+    return Effect.suspend(() => {
+      values.set(index, value)
+
+      if (values.size === nodes.length) return setClassName(getValue().join(""))
+
+      return Effect.unit
+    })
+  }
+
+  const parts: Array<StaticText | ClassNamePart> = []
+
+  let partIndex = 0
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+
+    if (node._tag === "text") {
+      values.set(i, node.value)
+      parts.push(new StaticTextImpl(node.value))
+    } else {
+      parts.push(
+        new ClassNamePartImpl(
+          partIndex++,
+          ({ value }) => setValue(value?.join(" ") || null, i),
+          null
+        )
+      )
+    }
+  }
+
+  const part = new SparseClassNamePartImpl(parts, ({ value }) => setClassName(value.join("")), [])
+
+  return part
+}
+
+function renderSparseComment(
+  commentNode: SparseCommentNode,
+  setComment: (value: string | null) => Effect.Effect<never, never, void>
+): SparseCommentPart {
+  const { nodes } = commentNode
+  const values: Map<number, string | null | undefined> = new Map()
+
+  function getValue(): ReadonlyArray<string> {
+    return (part.value = Array.from({ length: nodes.length }, (_, i) => values.get(i) || ""))
+  }
+
+  function setValue(value: string | null | undefined, index: number) {
+    return Effect.suspend(() => {
+      values.set(index, value)
+
+      if (values.size === nodes.length) return setComment(getValue().join(""))
+
+      return Effect.unit
+    })
+  }
+
+  const parts: Array<StaticText | CommentPart> = []
+
+  let partIndex = 0
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+
+    if (node._tag === "text") {
+      values.set(i, node.value)
+      parts.push(new StaticTextImpl(node.value))
+    } else {
+      parts.push(
+        new CommentPartImpl(
+          partIndex++,
+          ({ value }) => setValue(value, i),
+          null
+        )
+      )
+    }
+  }
+
+  const part = new SparseCommentPartImpl(parts, ({ value }) => setComment(value.join("")), [])
+
+  return part
+}

package/src/internal/tokenizer.ts

@@ -0,0 +1,338 @@
+import * as Token from "../Token"
+import {
+  getAllTextUntilElementClose,
+  getAttributeWithoutQuotes,
+  getAttributeWithQuotes,
+  getBooleanAttribute,
+  getClosingTag,
+  getComment,
+  getOpeningTag,
+  getOpeningTagEnd,
+  getPart,
+  getSelfClosingTagEnd,
+  getTextUntilCloseBrace,
+  getTextUntilPart,
+  getWhitespace,
+  PART_REGEX,
+  PART_STRING
+} from "./chunks"
+import type { TextChunk } from "./chunks"
+
+export function tokenize(template: ReadonlyArray<string>): Iterable<Token.Token> {
+  return new Tokenizer(template)
+}
+
+function templateWithParts(template: ReadonlyArray<string>): string {
+  const length = template.length
+  const lastIndex = length - 1
+
+  let output = ""
+
+  for (let i = 0; i < length; i++) {
+    const str = template[i]
+
+    if (i === lastIndex) {
+      output += str
+    } else {
+      output += str + PART_STRING(i)
+    }
+  }
+
+  return output
+}
+
+class Tokenizer implements Iterable<Token.Token> {
+  protected input: string = ""
+  protected pos: number = 0
+  protected context: "text" | "element" | "self-closing" | "text-only" = "text"
+  protected currentTag: Stack<string> | null = null
+
+  constructor(private readonly template: ReadonlyArray<string>) {}
+
+  *[Symbol.iterator](): Generator<Token.Token> {
+    this.init()
+
+    // eslint-disable-next-line no-constant-condition
+    while (this.pos < this.input.length) {
+      switch (this.context) {
+        case "element":
+          yield* this.nextElementToken()
+          break
+        case "self-closing":
+          yield* this.nextSelfClosingToken()
+          break
+        case "text-only":
+          yield* this.nextTextOnlyToken()
+          break
+        default:
+          yield* this.nextTextToken()
+      }
+    }
+  }
+
+  private init(): void {
+    // Convert our template into a string for easier tokenization
+    // Remove any whitespace at the beginning or end of the template since we don't care about it.
+    this.input = this.template.length === 1 ? this.template[0] : templateWithParts(this.template)
+  }
+
+  private *nextTextToken(): Generator<Token.Token> {
+    const char = this.nextChar()
+    const isOpenBracket = char === "<"
+
+    let next: TextChunk | undefined
+
+    if (isOpenBracket && (next = this.chunk(getOpeningTag))) {
+      const name = next.match[2]
+
+      this.pushTag(name)
+      this.context = Token.SELF_CLOSING_TAGS.has(name)
+        ? "self-closing"
+        : Token.TEXT_ONLY_NODES_REGEX.has(name)
+        ? "text-only"
+        : "element"
+
+      yield new Token.OpeningTagToken(name)
+    } else if (isOpenBracket && (next = this.chunk(getClosingTag))) {
+      yield new Token.ClosingTagToken(next.match[3])
+      this.popTag()
+    } else if (isOpenBracket && (next = this.chunk(getComment))) {
+      yield* this.parseComment(next.match[2])
+    } else if ((next = this.chunk(getPart))) {
+      yield new Token.PartToken(parseInt(next.match[2], 10))
+    } else if ((next = this.chunk(getWhitespace))) {
+      yield new Token.TextToken(next.match[1])
+    } else if ((next = this.chunk(getTextUntilCloseBrace))) {
+      yield* parseTextAndParts(next.match[1])
+    } else {
+      yield new Token.TextToken(this.takeNextChar())
+    }
+  }
+
+  private *nextElementToken(): Generator<Token.Token> {
+    let next: TextChunk | undefined
+
+    if ((next = this.chunk(getAttributeWithQuotes))) {
+      yield* this.parseAttribute(next.match[2], next.match[4])
+    } else if ((next = this.chunk(getAttributeWithoutQuotes))) {
+      yield* this.parseAttribute(next.match[2], next.match[4])
+    } else if ((next = this.chunk(getOpeningTagEnd))) {
+      this.context = "text"
+
+      yield new Token.OpeningTagEndToken(this.currentTag!.value)
+    } else if ((next = this.chunk(getSelfClosingTagEnd))) {
+      yield new Token.OpeningTagEndToken(this.currentTag!.value, false)
+      yield new Token.ClosingTagToken(this.currentTag!.value)
+      this.popTag()
+      this.context = "text"
+    } else if ((next = this.chunk(getBooleanAttribute))) {
+      yield new Token.BooleanAttributeToken(next.match[2])
+    } else if ((next = this.chunk(getWhitespace))) {
+      // Continue
+    } else {
+      this.invalidTemplate()
+    }
+  }
+
+  private *nextSelfClosingToken(): Generator<Token.Token> {
+    let next: TextChunk | undefined
+
+    if ((next = this.chunk(getAttributeWithQuotes))) {
+      yield* this.parseAttribute(next.match[2], next.match[4])
+    } else if ((next = this.chunk(getAttributeWithoutQuotes))) {
+      yield* this.parseAttribute(next.match[2], next.match[4])
+    } else if ((next = this.chunk(getSelfClosingTagEnd))) {
+      yield new Token.OpeningTagEndToken(this.currentTag!.value, true)
+      this.popTag()
+      this.context = "text"
+    } else if ((next = this.chunk(getBooleanAttribute))) {
+      yield new Token.BooleanAttributeToken(next.match[2])
+    } else {
+      this.invalidTemplate()
+    }
+  }
+
+  private *nextTextOnlyToken(): Generator<Token.Token> {
+    let next: TextChunk | undefined
+
+    if ((next = this.chunk(getAttributeWithQuotes))) {
+      yield* this.parseAttribute(next.match[2], next.match[4])
+    } else if ((next = this.chunk(getAttributeWithoutQuotes))) {
+      yield* this.parseAttribute(next.match[2], next.match[4])
+    } else if ((next = this.chunk(getOpeningTagEnd))) {
+      yield new Token.OpeningTagEndToken(this.currentTag!.value)
+    } else if ((next = this.chunk(getClosingTag))) {
+      yield new Token.ClosingTagToken(next.match[3])
+      this.context = "text"
+    } else if ((next = this.chunk(getAllTextUntilElementClose(this.currentTag!.value)))) {
+      const text = next.match[1]
+
+      if (PART_REGEX.test(text)) {
+        yield* parseTextAndParts(text)
+      } else {
+        yield new Token.TextToken(text)
+      }
+      this.context = "text"
+    } else {
+      this.invalidTemplate()
+    }
+  }
+
+  private *parseComment(comment: string): Generator<Token.Token> {
+    const parts = Array.from(parseTextAndParts(comment))
+
+    if (parts.length === 1 && parts[0]._tag === "text") {
+      yield new Token.CommentToken(parts[0].value)
+      return
+    }
+
+    yield new Token.CommentStartToken("<!--")
+
+    for (const part of parts) {
+      yield part
+    }
+
+    yield new Token.CommentEndToken("-->")
+  }
+
+  private *parseAttribute(name: string, value: string) {
+    const parts = Array.from(parseTextAndParts(value))
+
+    if (value === "") {
+      yield new Token.BooleanAttributeToken(name)
+      return
+    }
+
+    if (parts.length === 1 && parts[0]._tag === "text") {
+      yield getAttributeToken(name, value)
+      return
+    }
+
+    yield getAttributeTokenPartial(name, "start")
+
+    for (const part of parts) {
+      yield part
+    }
+
+    yield getAttributeTokenPartial(name, "end")
+  }
+
+  private nextChar(): string {
+    return this.input.charAt(this.pos)
+  }
+
+  private takeNextChar(): string {
+    const text = this.input.substring(this.pos, this.pos + 1)
+    this.pos += 1
+
+    return text
+  }
+
+  private chunk(f: (str: string, pos: number) => TextChunk | undefined): TextChunk | undefined {
+    const chunk = f(this.input, this.pos)
+
+    if (chunk) {
+      this.pos += chunk.length
+    }
+
+    return chunk
+  }
+
+  private pushTag(name: string): void {
+    this.currentTag = new Stack(name, this.currentTag)
+  }
+
+  private popTag(): void {
+    if (this.currentTag) {
+      this.currentTag = this.currentTag.previous
+    }
+  }
+
+  protected invalidTemplate() {
+    let message = `Invalid template ${this.input}`
+    message += "\n\nFrom:\n\n"
+    message += this.input.substring(this.pos)
+
+    throw new SyntaxError(message)
+  }
+}
+
+class Stack<A> {
+  constructor(
+    readonly value: A,
+    readonly previous: Stack<A> | null
+  ) {}
+}
+
+function* parseTextAndParts(s: string): Generator<Token.TextToken | Token.PartToken> {
+  let next: TextChunk | undefined
+  let pos: number = 0
+
+  while (pos < s.length) {
+    if ((next = getPart(s, pos))) {
+      yield new Token.PartToken(parseInt(next.match[2], 10))
+      pos += next.length
+    } else if ((next = getTextUntilPart(s, pos))) {
+      yield new Token.TextToken(next.match[1])
+
+      pos += next.length
+    } else {
+      yield new Token.TextToken(s.substring(pos))
+
+      break
+    }
+  }
+}
+
+function getAttributeTokenPartial(name: string, ctx: "start" | "end") {
+  switch (name[0]) {
+    case "?":
+      return ctx === "start"
+        ? new Token.BooleanAttributeStartToken(name.substring(1))
+        : new Token.BooleanAttributeEndToken(name.substring(1))
+    case ".": {
+      const propertyName = name.substring(1)
+
+      switch (propertyName) {
+        case "data":
+          return ctx === "start"
+            ? new Token.DataAttributeStartToken()
+            : new Token.DataAttributeEndToken()
+        default:
+          return ctx === "start"
+            ? new Token.PropertyAttributeStartToken(propertyName)
+            : new Token.PropertyAttributeEndToken(propertyName)
+      }
+    }
+    case "@":
+      return ctx === "start"
+        ? new Token.EventAttributeStartToken(name.substring(1))
+        : new Token.EventAttributeEndToken(name.substring(1))
+    case "o":
+      if (name[1] === "n") {
+        return ctx === "start"
+          ? new Token.EventAttributeStartToken(name.substring(2))
+          : new Token.EventAttributeEndToken(name.substring(2))
+      }
+  }
+
+  switch (name.toLowerCase()) {
+    case "class":
+    case "classname":
+      return ctx === "start"
+        ? new Token.ClassNameAttributeStartToken()
+        : new Token.ClassNameAttributeEndToken()
+    case "ref":
+      return ctx === "start" ? new Token.RefAttributeStartToken() : new Token.RefAttributeEndToken()
+  }
+
+  return ctx === "start" ? new Token.AttributeStartToken(name) : new Token.AttributeEndToken(name)
+}
+
+function getAttributeToken(name: string, value: string) {
+  if (name[0] === "?") {
+    return new Token.BooleanAttributeToken(name.substring(1))
+  }
+
+  return new Token.AttributeToken(name, value)
+}

package/src/internal/utils.ts

@@ -0,0 +1,73 @@
+import { getOption } from "@typed/context"
+import * as Chunk from "effect/Chunk"
+import type * as Duration from "effect/Duration"
+import * as Effect from "effect/Effect"
+import { isSome } from "effect/Option"
+import { TestClock } from "effect/TestClock"
+import { TEXT_START, TYPED_START } from "../Meta"
+
+export function isComment(node: Node): node is Comment {
+  return node.nodeType === node.COMMENT_NODE
+}
+
+export function isCommentWithValue(node: Node, value: string): node is Comment {
+  return isComment(node) && node.nodeValue === value
+}
+
+export function isHtmlElement(node: Node): node is HTMLElement {
+  return node.nodeType === node.ELEMENT_NODE
+}
+
+export function findHoleComment(parent: Element, index: number) {
+  const childNodes = parent.childNodes
+
+  for (let i = 0; i < childNodes.length; ++i) {
+    const node = childNodes[i]
+
+    if (node.nodeType === 8 && node.nodeValue === `hole${index}`) {
+      return node as Comment
+    }
+  }
+
+  throw new Error(`Unable to find hole comment for index ${index}`)
+}
+
+const previousComments = new Set([TEXT_START, TYPED_START])
+
+export function getPreviousNodes(comment: Node, index: number) {
+  const nodes: Array<Node> = []
+  let node = comment.previousSibling
+  const previousHole = `hole${index - 1}`
+
+  previousComments.add(previousHole)
+
+  while (node && !previousComments.has(String(node.nodeValue))) {
+    nodes.unshift(node)
+    node = node.previousSibling
+  }
+
+  previousComments.delete(previousHole)
+
+  return nodes
+}
+
+export const findPath = (node: ParentChildNodes, path: Chunk.Chunk<number>): Node =>
+  Chunk.reduce(path, node, ({ childNodes }, index) => childNodes[index]) as Node
+
+export interface ParentChildNodes {
+  readonly parentNode: Node | null
+  readonly childNodes: ArrayLike<Node>
+}
+
+export function adjustTime(input?: Duration.DurationInput) {
+  return Effect.gen(function*(_) {
+    const ctx = yield* _(Effect.context<never>())
+    const testClock = getOption(ctx, TestClock)
+
+    if (isSome(testClock)) {
+      yield* _(testClock.value.adjust(input ?? 1))
+    } else if (input) {
+      yield* _(Effect.sleep(input))
+    }
+  })
+}