@typed/template 0.1.0

package/src/Token.ts

@@ -0,0 +1,269 @@
+/**
+ * @since 1.0.0
+ */
+
+/**
+ * @since 1.0.0
+ */
+export type Token =
+  | OpeningTagToken
+  | OpeningTagEndToken
+  | ClosingTagToken
+  | AttributeToken
+  | AttributeStartToken
+  | AttributeEndToken
+  | BooleanAttributeToken
+  | BooleanAttributeStartToken
+  | BooleanAttributeEndToken
+  | ClassNameAttributeStartToken
+  | ClassNameAttributeEndToken
+  | DataAttributeStartToken
+  | DataAttributeEndToken
+  | EventAttributeStartToken
+  | EventAttributeEndToken
+  | PropertyAttributeStartToken
+  | PropertyAttributeEndToken
+  | RefAttributeStartToken
+  | RefAttributeEndToken
+  | CommentToken
+  | CommentStartToken
+  | CommentEndToken
+  | TextToken
+  | PartToken
+
+/**
+ * @since 1.0.0
+ */
+export class OpeningTagToken {
+  readonly _tag = "opening-tag"
+
+  constructor(
+    readonly name: string,
+    readonly isSelfClosing: boolean = SELF_CLOSING_TAGS.has(name),
+    readonly textOnly: boolean = TEXT_ONLY_NODES_REGEX.has(name)
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class AttributeStartToken {
+  readonly _tag = "attribute-start"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class AttributeEndToken {
+  readonly _tag = "attribute-end"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class BooleanAttributeStartToken {
+  readonly _tag = "boolean-attribute-start"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class BooleanAttributeEndToken {
+  readonly _tag = "boolean-attribute-end"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class ClassNameAttributeStartToken {
+  readonly _tag = "className-attribute-start"
+}
+
+/**
+ * @since 1.0.0
+ */
+export class ClassNameAttributeEndToken {
+  readonly _tag = "className-attribute-end"
+}
+
+/**
+ * @since 1.0.0
+ */
+export class DataAttributeStartToken {
+  readonly _tag = "data-attribute-start"
+}
+
+/**
+ * @since 1.0.0
+ */
+export class DataAttributeEndToken {
+  readonly _tag = "data-attribute-end"
+}
+
+/**
+ * @since 1.0.0
+ */
+export class EventAttributeStartToken {
+  readonly _tag = "event-attribute-start"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class EventAttributeEndToken {
+  readonly _tag = "event-attribute-end"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class PropertyAttributeStartToken {
+  readonly _tag = "property-attribute-start"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class PropertyAttributeEndToken {
+  readonly _tag = "property-attribute-end"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class RefAttributeStartToken {
+  readonly _tag = "ref-attribute-start"
+}
+
+/**
+ * @since 1.0.0
+ */
+export class RefAttributeEndToken {
+  readonly _tag = "ref-attribute-end"
+}
+
+/**
+ * @since 1.0.0
+ */
+export class AttributeToken {
+  readonly _tag = "attribute"
+  constructor(
+    readonly name: string,
+    readonly value: string
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class BooleanAttributeToken {
+  readonly _tag = "boolean-attribute"
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class OpeningTagEndToken {
+  readonly _tag = "opening-tag-end"
+
+  constructor(
+    readonly name: string,
+    readonly selfClosing: boolean = SELF_CLOSING_TAGS.has(name),
+    readonly textOnly: boolean = TEXT_ONLY_NODES_REGEX.has(name)
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class ClosingTagToken {
+  readonly _tag = "closing-tag"
+
+  constructor(
+    readonly name: string,
+    readonly textOnly: boolean = TEXT_ONLY_NODES_REGEX.has(name)
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class CommentToken {
+  readonly _tag = "comment"
+  constructor(readonly value: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class CommentStartToken {
+  readonly _tag = "comment-start"
+  constructor(readonly value: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class CommentEndToken {
+  readonly _tag = "comment-end"
+  constructor(readonly value: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class TextToken {
+  readonly _tag = "text"
+  constructor(readonly value: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class PartToken {
+  readonly _tag = "part-token"
+  constructor(readonly index: number) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export const TEXT_ONLY_NODES_REGEX = new Set([
+  "textarea",
+  "script",
+  "style",
+  "title",
+  "plaintext",
+  "xmp"
+])
+
+/**
+ * @since 1.0.0
+ */
+export const SELF_CLOSING_TAGS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "command",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+])

package/src/Tokenizer.ts

@@ -0,0 +1,10 @@
+/**
+ * @since 1.0.0
+ */
+import * as tokenizer from "./internal/tokenizer"
+import type { Token } from "./Token"
+
+/**
+ * @since 1.0.0
+ */
+export const tokenize: (template: ReadonlyArray<string>) => Iterable<Token> = tokenizer.tokenize

package/src/Vitest.ts

@@ -0,0 +1,61 @@
+/**
+ * @since 1.0.0
+ */
+import * as Effect from "effect/Effect"
+import type { Scope } from "effect/Scope"
+import * as TestClock from "effect/TestClock"
+import * as TestContext from "effect/TestContext"
+import type * as TestServices from "effect/TestServices"
+import * as vitest from "vitest"
+
+export {
+  /**
+   * @since 1.0.0
+   */
+  describe,
+  /**
+   * @since 1.0.0
+   */
+  expect
+} from "vitest"
+
+/**
+ * @since 1.0.0
+ */
+export function it<E, A>(
+  name: string,
+  test: () => Effect.Effect<Scope, E, A>,
+  options?: vitest.TestOptions
+) {
+  return vitest.it(
+    name,
+    () =>
+      test().pipe(
+        Effect.scoped,
+        Effect.runPromise
+      ),
+    options
+  )
+}
+
+/**
+ * @since 1.0.0
+ */
+export function test<E, A>(
+  name: string,
+  test: (options: {
+    readonly clock: TestClock.TestClock
+  }) => Effect.Effect<Scope | TestServices.TestServices, E, A>,
+  options?: vitest.TestOptions
+) {
+  return vitest.it(
+    name,
+    () =>
+      TestClock.testClockWith((clock) => test({ clock })).pipe(
+        Effect.provide(TestContext.TestContext),
+        Effect.scoped,
+        Effect.runPromise
+      ),
+    options
+  )
+}

package/src/index.ts

@@ -0,0 +1,66 @@
+/**
+ * @since 1.0.0
+ */
+
+import "./internal/module-augmentation"
+
+/**
+ * @since 1.0.0
+ */
+export * as Directive from "./Directive"
+/**
+ * @since 1.0.0
+ */
+export * as ElementRef from "./ElementRef"
+/**
+ * @since 1.0.0
+ */
+export * as ElementSource from "./ElementSource"
+/**
+ * @since 1.0.0
+ */
+export * as EventHandler from "./EventHandler"
+/**
+ * @since 1.0.0
+ */
+export * from "./Html"
+/**
+ * @since 1.0.0
+ */
+export * from "./Hydrate"
+/**
+ * @since 1.0.0
+ */
+export * from "./Many"
+/**
+ * @since 1.0.0
+ */
+export * from "./Part"
+/**
+ * @since 1.0.0
+ */
+export * from "./Placeholder"
+/**
+ * @since 1.0.0
+ */
+export * from "./Render"
+/**
+ * @since 1.0.0
+ */
+export * from "./Renderable"
+/**
+ * @since 1.0.0
+ */
+export * as RenderContext from "./RenderContext"
+/**
+ * @since 1.0.0
+ */
+export * from "./RenderEvent"
+/**
+ * @since 1.0.0
+ */
+export * from "./RenderTemplate"
+/**
+ * @since 1.0.0
+ */
+export * from "./TemplateInstance"

package/src/internal/HydrateContext.ts

@@ -0,0 +1,23 @@
+import { Tagged } from "@typed/context"
+import type { Template } from "../Template"
+import type { ParentChildNodes } from "./utils"
+
+/**
+ * Used Internally to pass context down to components for hydration
+ * @internal
+ */
+export type HydrateContext = {
+  readonly where: ParentChildNodes
+  readonly rootIndex: number
+  readonly parentTemplate: Template | null
+  readonly childIndex?: number
+
+  /**@internal */
+  hydrate: boolean
+}
+
+/**
+ * Used Internally to pass context down to components for hydration
+ * @internal
+ */
+export const HydrateContext = Tagged<HydrateContext>("@typed/html/HydrateContext")

package/src/internal/browser.ts

@@ -0,0 +1,132 @@
+import { diffable, isComment } from "@typed/wire"
+import udomdiff from "udomdiff"
+import type { RenderContext } from "../RenderContext"
+import type { RenderEvent } from "../RenderEvent"
+import { isRenderEvent } from "../RenderEvent"
+import { NodePartImpl } from "./parts"
+import { findHoleComment, isCommentWithValue } from "./utils"
+
+export function makeRenderNodePart(
+  index: number,
+  parent: HTMLElement | SVGElement,
+  ctx: RenderContext,
+  document: Document,
+  isHydrating: boolean
+) {
+  const comment = findHoleComment(parent, index)
+  let text: Text
+  let nodes = isHydrating ? findPreviousNodes(comment, index) : []
+
+  return new NodePartImpl(index, ({ part, value }) => {
+    return ctx.queue.add(part, () => {
+      matchValue(value, (content) => {
+        if (text === undefined) {
+          text = document.createTextNode("")
+        }
+        text.textContent = content
+
+        nodes = diffChildren(comment, nodes, [text], document)
+      }, (updatedNodes) => {
+        nodes = diffChildren(comment, nodes, updatedNodes, document)
+      })
+    })
+  }, nodes)
+}
+
+export function getPreviousTextSibling(node: Node | null) {
+  if (!node) return null
+
+  if (node && node.nodeType === node.TEXT_NODE) {
+    // During hydration there should be a comment to separate these values
+    if (
+      node.previousSibling &&
+      isComment(node.previousSibling) &&
+      isCommentWithValue(node.previousSibling, "text")
+    ) {
+      return node as Text
+    }
+  }
+
+  return null
+}
+
+export function notIsEmptyTextNode(node: Node) {
+  if (node.nodeType === node.COMMENT_NODE) {
+    return node.nodeValue?.trim() === ""
+  }
+
+  return true
+}
+
+export function findPreviousNodes(comment: Comment, index: number) {
+  const previousIndex = `hole${index - 1}`
+
+  const nodes: Array<Node> = []
+
+  let node = comment.previousSibling
+  while (node && !isCommentWithValue(node, previousIndex) && !isCommentWithValue(node, "text")) {
+    nodes.unshift(node)
+    node = node.previousSibling
+  }
+
+  return nodes
+}
+
+export function diffChildren(
+  comment: Comment,
+  currentNodes: Array<Node>,
+  nextNodes: Array<Node>,
+  document: Document
+) {
+  return udomdiff(
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    comment.parentNode!,
+    // Document Fragments cannot be removed, so we filter them out
+    currentNodes.filter((x) => x.nodeType !== x.DOCUMENT_FRAGMENT_NODE),
+    nextNodes.flatMap(flattenRenderEvent),
+    diffable(document),
+    comment
+  )
+}
+
+function flattenRenderEvent(x: Node | RenderEvent): Array<Node> {
+  if (isRenderEvent(x)) {
+    const value = x.valueOf()
+
+    return Array.isArray(value) ? value : [value]
+  } else {
+    return [x]
+  }
+}
+
+function matchValue<A, B>(value: unknown, onText: (text: string) => A, onNodes: (nodes: Array<Node>) => B): A | B {
+  switch (typeof value) {
+    // primitives are handled as text content
+    case "string":
+    case "symbol":
+    case "number":
+    case "bigint":
+    case "boolean":
+      return onText(String(value))
+    case "undefined":
+    case "object": {
+      if (!value) {
+        return onNodes([])
+      } else if (Array.isArray(value)) {
+        // arrays can be used to cleanup, if empty
+        if (value.length === 0) return onNodes([])
+        // or diffed, if these contains nodes or "wires"
+        else if (value.some((x) => typeof x === "object")) {
+          return onNodes(
+            value.flatMap((x) => (x === null ? [] : [isRenderEvent(x) ? x.valueOf() : x]))
+          )
+        } // in all other cases the content is stringified as is
+        else return onText(String(value))
+      } else {
+        return onNodes([isRenderEvent(value) ? (value.valueOf() as Node) : (value as Node)])
+      }
+    }
+    case "function":
+      return onNodes([])
+  }
+}

package/src/internal/chunks.ts

@@ -0,0 +1,73 @@
+export type TextChunk = {
+  readonly length: number
+  readonly match: RegExpExecArray
+}
+
+export const PART_STRING = (i: number) => `{{__PART${i}__}}`
+
+export const PART_REGEX = /(\{\{__PART(\d+)__\}\})/g
+
+export const getPart = chunker(PART_REGEX)
+
+export const STRICT_PART_REGEX = /^(\{\{__PART(\d+)__\}\})$/g
+
+export const getStrictPart = chunker(STRICT_PART_REGEX)
+
+export const getOpeningTag = chunker(/(\s?<(([a-z0-9-]+:)?[a-z0-9-]+))\s?/gi)
+
+export const getOpeningTagEnd = chunker(/((\s+)?>)/gi)
+
+// Matches the closing of a tag
+// Allows for whitespace between the tag name and the closing brackets
+// allows for namespaced tags
+export const getClosingTag = chunker(/(\s?<\/(\s+)?(([a-z0-9-]+:)?[a-z0-9-]+)(\s+)?>)/gi)
+
+export const getSelfClosingTagEnd = chunker(/(\s+\/>)/gi)
+
+export const getComment = chunker(/(<!--(.+)-->)/gu)
+
+// Get all the text that does not lead to a Part
+// Uses a negative lookahead to ensure to match all text that does not lead to a Part
+export const getTextUntilPart = chunker(/((?:(?!{{__PART\d+__}}).)*)/gi)
+
+// Get all the text that does not lead to a Part
+// Uses a negative lookahead to ensure to match all text that does not lead to a brace
+export const getTextUntilCloseBrace = chunker(/((?:(?!<).)*)/gi)
+
+// Get an attribute and its value within quotes
+export const getAttributeWithQuotes = chunker(
+  /(\s+(([?.@a-z0-9\-_]+:)?[?.@a-z0-9\-_]+)="([^"]*)")/gi
+)
+
+// Get an attribute and its value without quotes up to the next whitespace
+export const getAttributeWithoutQuotes = chunker(
+  /(\s+(([?.@a-z0-9\-_]+:)?[?.@a-z0-9\-_]+)=([^\s>]*))/gi
+)
+
+// Get a boolean attribute up to the next whitespace
+
+export const getBooleanAttribute = chunker(/(\s+(([?.@a-z0-9\-_]+:)?[?.@a-z0-9\-_]+)(?=[\s>]))/gi)
+
+// Takes all text content until </ tagName > with optional whitespace
+export const getAllTextUntilElementClose = (tagName: string) => {
+  return chunker(new RegExp(`([^<]+)(\\s*<\\/${tagName}\\s*>)`, "gi"))
+}
+
+export const getWhitespace = chunker(/(\s+)/g)
+
+function chunker(regex: RegExp) {
+  return (str: string, pos: number): TextChunk | undefined => {
+    regex.lastIndex = pos
+    const match = regex.exec(str)
+    regex.lastIndex = 0
+
+    if (!match || match.index !== pos) {
+      return
+    } else {
+      return {
+        length: match[1].length,
+        match
+      } as const
+    }
+  }
+}

package/src/internal/errors.ts

@@ -0,0 +1,11 @@
+export class CouldNotFindCommentError extends Error {
+  constructor(readonly partIndex: number) {
+    super(`Could not find comment for part ${partIndex}`)
+  }
+}
+
+export class CouldNotFindRootElement extends Error {
+  constructor(readonly partIndex: number) {
+    super(`Could not find root elements for part ${partIndex}`)
+  }
+}

package/src/internal/external.d.ts

@@ -0,0 +1,11 @@
+declare module "udomdiff" {
+  const udomdiff: (
+    parentNode: Node,
+    current: Array<Node>,
+    updated: Array<Node>,
+    get: (n: Node, x: number) => Node | DocumentFragment | null,
+    before: Node
+  ) => Array<Node>
+
+  export default udomdiff
+}