@typed/template 0.13.0 → 1.0.0-beta.0

package/src/internal/hydration.ts

@@ -0,0 +1,406 @@
+import { type Inspectable, NodeInspectSymbol } from "effect/Inspectable";
+import { CouldNotFindRootElement, CouldNotFindTemplateEndError } from "../errors.js";
+import type { HydrateContext } from "../HydrateContext.js";
+import { isComment, isElement, toHtml } from "../Wire.js";
+
+const TYPED_TEMPLATE_PREFIX = `t_`;
+const TYPED_TEMPLATE_END_PREFIX = `/t_`;
+const MANY_PREFIX = `/m_`;
+const HOLE_PREFIX = `n_`;
+
+export function getRendered(where: HydrationNode) {
+  const nodes = getNodes(where);
+  if (nodes.length === 1) return nodes[0];
+  return nodes;
+}
+
+export function findHydrationTemplateByHash(
+  hydrateCtx: HydrateContext,
+  hash: string,
+): HydrationTemplate | null {
+  // If there is not a manyKey, we can just find the template by its hash
+  if (hydrateCtx.manyKey === undefined) {
+    return findHydrationTemplate(getChildNodes(hydrateCtx.where), hash);
+  }
+
+  // If there is a manyKey, we need to find the many node first
+  const many = findHydrationMany(getChildNodes(hydrateCtx.where), hydrateCtx.manyKey);
+
+  if (many === null) return null;
+
+  // Then we can find the template by its hash
+  return findHydrationTemplate(getChildNodes(many), hash);
+}
+
+export function getHydrationRoot(root: HTMLElement): HydrationElement {
+  const childNodes = Array.from(root.childNodes);
+  let hydrationNodes = getHydrationNodes(childNodes);
+
+  // If your whole template is wrapped in a single hole, unwrap it.
+  if (hydrationNodes.length === 1 && hydrationNodes[0]._tag === "hole") {
+    hydrationNodes = getChildNodes(hydrationNodes[0]);
+  }
+
+  return new HydrationElement(root, hydrationNodes);
+}
+
+function getHydrationNodes(nodes: Array<Node>): Array<HydrationNode> {
+  const out: Array<HydrationNode> = [];
+
+  for (let i = 0; i < nodes.length; ++i) {
+    const node = nodes[i];
+    if (isComment(node)) {
+      if (node.data.startsWith(TYPED_TEMPLATE_PREFIX)) {
+        const hash = node.data.slice(TYPED_TEMPLATE_PREFIX.length);
+        const endIndex = getTemplateEndIndex(nodes, i, hash);
+        const childNodes = nodes.slice(i + 1, endIndex);
+
+        out.push(new HydrationTemplate(hash, getHydrationNodes(childNodes)));
+
+        i = endIndex;
+      } else if (node.data.startsWith(MANY_PREFIX)) {
+        const last = out.pop();
+        out.push(new HydrationMany(node.data.slice(MANY_PREFIX.length), node, last ? [last] : []));
+      } else if (node.data.startsWith(HOLE_PREFIX)) {
+        const index = parseInt(node.data.slice(HOLE_PREFIX.length), 10);
+        const endIndex = getHoleEndIndex(nodes, i, index);
+        const endComment = nodes[endIndex] as Comment;
+        out.push(
+          new HydrationHole(
+            index,
+            node,
+            endComment,
+            getHydrationNodes(nodes.slice(i + 1, endIndex)),
+          ),
+        );
+        i = endIndex;
+      } else {
+        out.push(new HydrationLiteral(node));
+      }
+    } else if (isElement(node)) {
+      out.push(new HydrationElement(node, getHydrationNodes(Array.from(node.childNodes))));
+    } else {
+      out.push(new HydrationLiteral(node));
+    }
+  }
+
+  return out;
+}
+
+function getTemplateEndIndex(nodes: Array<Node>, start: number, hash: string): number {
+  const endHash = TYPED_TEMPLATE_END_PREFIX + hash;
+
+  for (let i = start; i < nodes.length; ++i) {
+    const node = nodes[i];
+
+    if (isComment(node) && node.data === endHash) {
+      return i;
+    }
+  }
+
+  throw new CouldNotFindTemplateEndError(hash);
+}
+
+function getHoleEndIndex(nodes: Array<Node>, start: number, index: number): number {
+  const endHash = `/${HOLE_PREFIX}${index}`;
+
+  let templateDepth = 0;
+
+  for (let i = start; i < nodes.length; ++i) {
+    const node = nodes[i];
+
+    if (isComment(node)) {
+      if (templateDepth === 0 && node.data === endHash) return i;
+      else if (node.data.startsWith(TYPED_TEMPLATE_PREFIX)) templateDepth++;
+      else if (node.data.startsWith(TYPED_TEMPLATE_END_PREFIX)) templateDepth--;
+    }
+  }
+
+  throw new CouldNotFindRootElement(index);
+}
+
+export class HydrationElement implements Inspectable {
+  readonly _tag = "element" as const;
+
+  readonly parentNode: Element;
+  readonly childNodes: Array<HydrationNode>;
+
+  constructor(parentNode: Element, childNodes: Array<HydrationNode>) {
+    this.parentNode = parentNode;
+    this.childNodes = childNodes;
+  }
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      parentNode: toHtml(this.parentNode),
+      childNodes: this.childNodes.map((n) => n.toJSON()),
+    };
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2);
+  }
+}
+
+export class HydrationTemplate implements Inspectable {
+  readonly _tag = "template" as const;
+
+  readonly hash: string;
+  readonly childNodes: Array<HydrationNode>;
+
+  constructor(hash: string, childNodes: Array<HydrationNode>) {
+    this.hash = hash;
+    this.childNodes = childNodes;
+  }
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      hash: this.hash,
+      childNodes: this.childNodes.map((n) => n.toJSON()),
+    };
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2);
+  }
+}
+
+export type HydrationNode =
+  | HydrationElement
+  | HydrationTemplate
+  | HydrationMany
+  | HydrationHole
+  | HydrationLiteral;
+
+export class HydrationMany implements Inspectable {
+  readonly _tag = "many" as const;
+
+  readonly key: string;
+  readonly comment: Comment;
+  readonly childNodes: Array<HydrationNode>;
+
+  constructor(key: string, comment: Comment, childNodes: Array<HydrationNode>) {
+    this.key = key;
+    this.comment = comment;
+    this.childNodes = childNodes;
+  }
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      key: this.key,
+      childNodes: this.childNodes.map((n) => n.toJSON()),
+    };
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2);
+  }
+}
+
+export class HydrationHole implements Inspectable {
+  readonly _tag = "hole" as const;
+
+  readonly index: number;
+  readonly startComment: Comment;
+  readonly endComment: Comment;
+  readonly childNodes: Array<HydrationNode>;
+
+  constructor(
+    index: number,
+    startComment: Comment,
+    endComment: Comment,
+    childNodes: Array<HydrationNode>,
+  ) {
+    this.index = index;
+    this.startComment = startComment;
+    this.endComment = endComment;
+    this.childNodes = childNodes;
+  }
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      index: this.index,
+      childNodes: this.childNodes.map((n) => n.toJSON()),
+    };
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2);
+  }
+}
+
+export class HydrationLiteral implements Inspectable {
+  readonly _tag = "literal" as const;
+
+  readonly node: Node;
+
+  constructor(node: Node) {
+    this.node = node;
+  }
+
+  toJSON(): unknown {
+    return {
+      _tag: this._tag,
+      node: toHtml(this.node),
+    };
+  }
+
+  [NodeInspectSymbol]() {
+    return JSON.stringify(this.toJSON(), null, 2);
+  }
+}
+
+export function getChildNodes(node: HydrationNode): Array<HydrationNode> {
+  switch (node._tag) {
+    case "literal":
+      return [];
+    case "hole":
+    case "element":
+    case "template":
+    case "many":
+      return node.childNodes;
+  }
+}
+
+export function findHydrationTemplate(
+  nodes: Array<HydrationNode>,
+  templateHash: string,
+): HydrationTemplate | null {
+  let index = 0;
+  const toProcess: Array<HydrationNode> = [...nodes];
+
+  while (index < toProcess.length) {
+    const node = toProcess[index++];
+
+    if (node._tag === "template" && node.hash === templateHash) {
+      return node;
+    } else if (node._tag === "element") {
+      const childNodes = node.childNodes;
+      for (let i = 0; i < childNodes.length; i++) {
+        toProcess.push(childNodes[i]);
+      }
+    }
+  }
+
+  return null;
+}
+
+export function findHydrationMany(nodes: Array<HydrationNode>, key: string): HydrationMany | null {
+  for (let i = 0; i < nodes.length; ++i) {
+    const node = nodes[i];
+    if (node._tag === "many" && node.key === key) {
+      return node;
+    }
+  }
+
+  return null;
+}
+
+export function findHydrationHole(
+  nodes: Array<HydrationNode>,
+  index: number,
+): HydrationHole | null {
+  for (const node of nodes) {
+    if (node._tag === "hole" && node.index === index) {
+      return node;
+    } else if (node._tag === "element") {
+      const found = findHydrationHole(node.childNodes, index);
+      if (found !== null) {
+        return found;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function findHydrationNode(
+  node: HydrationNode,
+  index: number,
+  manyKey?: string,
+): HydrationHole | HydrationMany | null {
+  const childNodes = getChildNodes(node);
+  const found =
+    manyKey === undefined
+      ? findHydrationHole(childNodes, index)
+      : findHydrationMany(childNodes, manyKey);
+
+  return found;
+}
+
+export function getNodes(node: HydrationNode): Array<Node> {
+  switch (node._tag) {
+    case "element":
+      return [node.parentNode];
+    case "literal":
+      return [node.node];
+    case "hole":
+      return [node.startComment, ...node.childNodes.flatMap(getNodes), node.endComment];
+    case "many":
+      return [...node.childNodes.flatMap(getNodes), node.comment];
+    case "template":
+      return node.childNodes.flatMap(getNodes);
+  }
+}
+
+export function getNodesExcludingStartComment(node: HydrationNode): Array<Node> {
+  switch (node._tag) {
+    case "element":
+      return [node.parentNode];
+    case "literal":
+      return [node.node];
+    case "hole":
+      return [...node.childNodes.flatMap(getNodesExcludingStartComment), node.endComment];
+    case "many":
+      return [...node.childNodes.flatMap(getNodesExcludingStartComment), node.comment];
+    case "template":
+      return node.childNodes.flatMap(getNodesExcludingStartComment);
+  }
+}
+
+export const findHydratePath = (node: HydrationNode, path: ReadonlyArray<number>): Node => {
+  if (path.length === 0) {
+    return getNodesExcludingStartComment(node)[0];
+  }
+
+  // Get initial node without creating full array if possible
+  let current: Node;
+  const firstIndex = path[0];
+  if (node._tag === "element") {
+    current = node.parentNode;
+  } else if (node._tag === "literal") {
+    current = node.node;
+  } else {
+    // For holes, templates, many - need to get nodes array
+    const nodes = getNodesExcludingStartComment(node);
+    current = nodes[firstIndex];
+  }
+
+  // Traverse remaining path indices
+  for (let i = 1; i < path.length; i++) {
+    const index = path[i];
+    // Use secondary index to skip start comments without creating intermediate arrays
+    let targetIndex = 0;
+
+    for (let j = 0; j < current.childNodes.length; j++) {
+      const child = current.childNodes[j];
+      if (isNotStartComment(child)) {
+        if (targetIndex === index) {
+          current = child;
+          break;
+        }
+        targetIndex++;
+      }
+    }
+  }
+
+  return current;
+};
+
+function isNotStartComment(node: Node) {
+  return !isComment(node) || !node.data.startsWith("n_");
+}

package/src/internal/keyToPartType.ts

@@ -0,0 +1,113 @@
+function getCodePoints(str: string) {
+  return Array.from(str, (c) => c.codePointAt(0)!);
+}
+
+// Pre-computed character codes for fast comparisons
+const CHAR_CODES = {
+  QUESTION: "?".codePointAt(0)!,
+  DOT: ".".codePointAt(0)!,
+  AT: "@".codePointAt(0)!,
+  LOWERCASE_O: "o".codePointAt(0)!,
+  LOWERCASE_N: "n".codePointAt(0)!,
+  UPPERCASE_A: "A".codePointAt(0)!,
+  UPPERCASE_Z: "Z".codePointAt(0)!,
+  CASE_OFFSET: "a".codePointAt(0)! - "A".codePointAt(0)!,
+} as const;
+
+// Pre-computed string patterns for exact matches
+const PATTERNS = {
+  REF: getCodePoints("ref"),
+  CLASS: getCodePoints("class"),
+  CLASSNAME: getCodePoints("classname"),
+
+  DATA: getCodePoints(".data"),
+  PROPS: getCodePoints(".props"),
+  PROPERTIES: getCodePoints(".properties"),
+} as const;
+
+const NAMES = {
+  ATTR: "attr",
+  BOOLEAN: "boolean",
+  REF: "ref",
+  CLASS: "class",
+  DATA: "data",
+  EVENT: "event",
+  PROPERTY: "property",
+  PROPERTIES: "properties",
+} as const;
+
+const NAME_TUPLE = {
+  DATA: [NAMES.DATA],
+  PROPERTIES: [NAMES.PROPERTIES],
+  REF: [NAMES.REF],
+  CLASS: [NAMES.CLASS],
+
+  BOOLEAN: (key: string) => [NAMES.BOOLEAN, key] as const,
+  PROPERTY: (key: string) => [NAMES.PROPERTY, key] as const,
+  EVENT: (key: string) => [NAMES.EVENT, fastUncapitalize(key)] as const,
+  ATTR: (key: string) => [NAMES.ATTR, key] as const,
+} as const;
+
+// Fast uncapitalize using pre-computed character codes
+function fastUncapitalize(str: string): string {
+  if (str.length === 0) return str;
+  const first = str.codePointAt(0)!;
+  if (first >= CHAR_CODES.UPPERCASE_A && first <= CHAR_CODES.UPPERCASE_Z) {
+    return String.fromCodePoint(first + CHAR_CODES.CASE_OFFSET) + str.slice(1);
+  }
+  return str;
+}
+
+// Fast string comparison using pre-computed patterns
+function matchesPattern(str: string, pattern: ReadonlyArray<number>): boolean {
+  for (let i = 0; i < pattern.length; i++) {
+    if (str.codePointAt(i) !== pattern[i]) return false;
+  }
+  return true;
+}
+
+export function keyToPartType(key: string) {
+  const len = key.length;
+
+  // Check for static keys
+  switch (len) {
+    case 3: {
+      if (matchesPattern(key, PATTERNS.REF)) return NAME_TUPLE.REF;
+      break;
+    }
+    case 5: {
+      if (matchesPattern(key, PATTERNS.DATA)) return NAME_TUPLE.DATA;
+      if (matchesPattern(key, PATTERNS.CLASS)) return NAME_TUPLE.CLASS;
+      break;
+    }
+    case 6: {
+      if (matchesPattern(key, PATTERNS.PROPS)) return NAME_TUPLE.PROPERTIES;
+      break;
+    }
+    case 9: {
+      if (matchesPattern(key, PATTERNS.CLASSNAME)) return NAME_TUPLE.CLASS;
+      break;
+    }
+    case 11: {
+      if (matchesPattern(key, PATTERNS.PROPERTIES)) return NAME_TUPLE.PROPERTIES;
+    }
+  }
+
+  // Check for special prefixes
+  const first = key.codePointAt(0)!;
+  switch (first) {
+    case CHAR_CODES.QUESTION:
+      return NAME_TUPLE.BOOLEAN(key.slice(1));
+    case CHAR_CODES.DOT:
+      return NAME_TUPLE.PROPERTY(key.slice(1));
+    case CHAR_CODES.AT:
+      return NAME_TUPLE.EVENT(fastUncapitalize(key.slice(1)));
+    case CHAR_CODES.LOWERCASE_O: {
+      if (key.codePointAt(1) === CHAR_CODES.LOWERCASE_N)
+        return NAME_TUPLE.EVENT(fastUncapitalize(key.slice(2)));
+      return NAME_TUPLE.ATTR(key);
+    }
+    default:
+      return NAME_TUPLE.ATTR(key);
+  }
+}

package/src/internal/meta.ts

@@ -0,0 +1,25 @@
+export const PART_REGEX = /(\{\{(\d+)\}\})/g;
+export const STRICT_PART_REGEX = /^(\{\{(\d+)\}\})/;
+export const PART_STRING = (i: number) => `{{${i}}}`;
+
+export const TEMPLATE_START_COMMENT = (hash: string) => `<!--t_${hash}-->`;
+export const TEMPLATE_END_COMMENT = (hash: string) => `<!--/t_${hash}-->`;
+
+export const TEXT_START = "<!--txt-->";
+
+export const TYPED_NODE_START = (i: number) => `<!--n_${i}-->`;
+export const TYPED_NODE_END = (i: number) => `<!--/n_${i}-->`;
+
+export const TYPED_COMMENT_PART = (i: number) => `<!--c_${i}-->`;
+
+const typedTemplateStartCommentRegex = /<!--[t|n|txt]_(.*?)-->/g;
+const typedTemplateEndCommentRegex = /<!--\/[t|n|txt]_(.*?)-->/g;
+
+export const isTemplateStartComment = (comment: { nodeValue: string }) =>
+  typedTemplateStartCommentRegex.test(comment.nodeValue);
+
+export const isTemplateEndComment = (comment: { nodeValue: string }) =>
+  typedTemplateEndCommentRegex.test(comment.nodeValue);
+
+export const stripTypedTemplateComments = (html: string) =>
+  html.replace(typedTemplateStartCommentRegex, "").replace(typedTemplateEndCommentRegex, "");

package/src/internal/takeOneIfNotRenderEvent.ts

@@ -0,0 +1,19 @@
+import * as Effect from "effect/Effect";
+import { Fx, Sink } from "@typed/fx";
+import type { HtmlRenderEvent } from "../RenderEvent.js";
+import { isHtmlRenderEvent } from "../RenderEvent.js";
+
+export function takeOneIfNotRenderEvent<A, E, R>(
+  fx: Fx.Fx<A, E, R>,
+): Fx.Fx<A | HtmlRenderEvent, E, R> {
+  return Fx.make<A | HtmlRenderEvent, E, R>((sink) =>
+    Sink.withEarlyExit(sink, (sink) =>
+      fx.run(
+        Sink.make(sink.onFailure, (event) => {
+          if (isHtmlRenderEvent(event) && !event.last) return sink.onSuccess(event);
+          return Effect.flatMap(sink.onSuccess(event), () => sink.earlyExit);
+        }),
+      ),
+    ),
+  );
+}

package/src/internal/templateHash.ts

@@ -0,0 +1,18 @@
+const digestSize = 2;
+const multiplier = 33;
+const fill = 5381;
+
+export function templateHash(strings: ReadonlyArray<string>) {
+  const hashes = new Uint32Array(digestSize).fill(fill);
+
+  for (let i = 0; i < strings.length; i++) {
+    const string = strings[i];
+
+    for (let j = 0; j < string.length; j++) {
+      const key = j % digestSize;
+      hashes[key] = hashes[key] * multiplier + string.charCodeAt(j);
+    }
+  }
+
+  return btoa(String.fromCharCode(...new Uint8Array(hashes.buffer)));
+}