@typed/template 0.1.0

package/src/Html.ts

@@ -0,0 +1,258 @@
+/**
+ * @since 1.0.0
+ */
+
+import * as Fx from "@typed/fx/Fx"
+import { Sink } from "@typed/fx/Sink"
+import { TypeId } from "@typed/fx/TypeId"
+import type { Rendered } from "@typed/wire"
+import { Effect, Option } from "effect"
+import { join } from "effect/ReadonlyArray"
+import type * as Scope from "effect/Scope"
+import { isDirective } from "./Directive"
+import * as ElementRef from "./ElementRef"
+import type { ServerEntry } from "./Entry"
+import type { HtmlChunk, PartChunk, SparsePartChunk, TextChunk } from "./HtmlChunk"
+import { templateToHtmlChunks } from "./HtmlChunk"
+import { parse } from "./internal/parser"
+import { partNodeToPart } from "./internal/server"
+import { TEXT_START, TYPED_END, TYPED_HOLE, TYPED_START } from "./Meta"
+import type { Placeholder } from "./Placeholder"
+import type { Renderable } from "./Renderable"
+import { RenderContext } from "./RenderContext"
+import { HtmlRenderEvent, isRenderEvent } from "./RenderEvent"
+import type { RenderEvent } from "./RenderEvent"
+import { RenderTemplate } from "./RenderTemplate"
+import { TemplateInstance } from "./TemplateInstance"
+
+const toHtml = (r: RenderEvent) => (r as HtmlRenderEvent).html
+
+/**
+ * @since 1.0.0
+ */
+export function renderToHtml<R, E>(
+  fx: Fx.Fx<R, E, RenderEvent>
+): Fx.Fx<Exclude<R, RenderTemplate> | RenderContext, E, string> {
+  return Fx.fromFxEffect(
+    RenderContext.with((ctx) =>
+      fx.pipe(
+        Fx.provide(RenderTemplate.layer(renderHtml(ctx))),
+        Fx.map(toHtml),
+        Fx.startWith(TYPED_START),
+        Fx.endWith(TYPED_END)
+      )
+    )
+  )
+}
+
+/**
+ * @since 1.0.0
+ */
+export function renderToHtmlString<R, E>(
+  fx: Fx.Fx<R, E, RenderEvent>
+): Effect.Effect<Exclude<R, RenderTemplate> | RenderContext, E, string> {
+  return Effect.map(Fx.toReadonlyArray(renderToHtml(fx)), join(""))
+}
+
+function renderHtml(ctx: RenderContext) {
+  return <Values extends ReadonlyArray<Renderable<any, any>>, T extends Rendered = Rendered>(
+    templateStrings: TemplateStringsArray,
+    values: Values,
+    providedRef?: ElementRef.ElementRef<T>
+  ): Effect.Effect<
+    Scope.Scope | Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
+    never,
+    TemplateInstance<
+      Placeholder.Error<Values[number]>,
+      T
+    >
+  > => {
+    return Effect.gen(function*(_) {
+      const ref = providedRef || (yield* _(ElementRef.make()))
+      const entry = getServerEntry(templateStrings, ctx.templateCache)
+
+      if (values.length === 0) {
+        return TemplateInstance(Fx.succeed(HtmlRenderEvent((entry.chunks[0] as TextChunk).value)), ref as any)
+      } else {
+        return TemplateInstance(
+          Fx.filter(
+            Fx.mergeBuffer(
+              entry.chunks.map((chunk) =>
+                renderChunk<
+                  Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
+                  Placeholder.Error<Values[number]>
+                >(chunk, values)
+              )
+            ),
+            (x) => (x.valueOf() as string).length > 0
+          ) as any,
+          ref as any
+        )
+      }
+    })
+  }
+}
+
+function renderChunk<R, E>(
+  chunk: HtmlChunk,
+  values: ReadonlyArray<Renderable<any, any>>
+): Fx.Fx<R, E, RenderEvent> {
+  if (chunk._tag === "text") {
+    return Fx.succeed(HtmlRenderEvent(chunk.value))
+  } else if (chunk._tag === "part") {
+    return renderPart<R, E>(chunk, values)
+  } else {
+    return renderSparsePart<R, E>(chunk, values) as Fx.Fx<R, E, RenderEvent>
+  }
+}
+
+function renderNode<R, E>(renderable: Renderable<any, any>): Fx.Fx<R, E, RenderEvent> {
+  switch (typeof renderable) {
+    case "string":
+    case "number":
+    case "boolean":
+    case "bigint":
+      return Fx.succeed(HtmlRenderEvent(TEXT_START + renderable.toString()))
+    case "undefined":
+    case "object":
+      return renderObject(renderable)
+    default:
+      return Fx.empty
+  }
+}
+
+function renderObject<R, E>(renderable: object | null | undefined) {
+  if (renderable === null || renderable === undefined) {
+    return Fx.succeed(HtmlRenderEvent(TEXT_START))
+  } else if (Array.isArray(renderable)) {
+    return Fx.mergeBuffer(renderable.map(renderNode)) as any
+  } else if (Fx.isFx<R, E, Renderable>(renderable)) {
+    return Fx.concatMap(takeOneIfNotRenderEvent(renderable), renderNode as any)
+  } else if (Effect.isEffect(renderable)) {
+    return Fx.switchMap(Fx.fromEffect(renderable as Effect.Effect<R, E, Renderable>), renderNode<R, E>)
+  } else if (isRenderEvent(renderable)) {
+    return Fx.succeed(renderable)
+  } else {
+    return Fx.empty
+  }
+}
+
+function renderPart<R, E>(
+  chunk: PartChunk,
+  values: ReadonlyArray<Renderable<any, any>>
+): Fx.Fx<R, E, RenderEvent> {
+  const { node, render } = chunk
+  const renderable: Renderable<any, any> = values[node.index]
+
+  // Refs and events are not rendered into HTML
+  if (isDirective<R, E>(renderable)) {
+    return Fx.fromSink((sink: Sink<E, RenderEvent>) => {
+      const part = partNodeToPart(
+        node,
+        (value) => sink.onSuccess(HtmlRenderEvent(render(value)))
+      )
+
+      return Effect.catchAllCause(renderable(part), sink.onFailure)
+    })
+  } else if (node._tag === "node") {
+    return Fx.endWith(renderNode<R, E>(renderable), HtmlRenderEvent(TYPED_HOLE(node.index)))
+  } else {
+    const html = Fx.filterMap(Fx.take(unwrapRenderable<R, E>(renderable), 1), (value) => {
+      const s = render(value)
+
+      return s ? Option.some(HtmlRenderEvent(s)) : Option.none()
+    })
+
+    if (node._tag === "text-part") {
+      return Fx.endWith(Fx.startWith(html, HtmlRenderEvent(TEXT_START)), HtmlRenderEvent(TYPED_HOLE(node.index)))
+    }
+
+    return html
+  }
+}
+
+function renderSparsePart<R, E>(
+  chunk: SparsePartChunk,
+  values: ReadonlyArray<Renderable<any, any>>
+): Fx.Fx<R, E, RenderEvent> {
+  const { node, render } = chunk
+
+  return Fx.map(
+    Fx.take(
+      Fx.combine(
+        node.nodes.map((node) => {
+          if (node._tag === "text") return Fx.succeed(node.value)
+
+          const renderable: Renderable<any, any> = (values as any)[node.index]
+
+          if (isDirective<R, E>(renderable)) {
+            return Fx.fromSink<R, E, unknown>((sink: Sink<E, unknown>) =>
+              Effect.catchAllCause(
+                renderable(partNodeToPart(node, (value) => sink.onSuccess(value))),
+                sink.onFailure
+              )
+            )
+          }
+
+          return unwrapRenderable<R, E>(renderable)
+        })
+      ),
+      1
+    ),
+    (value) => HtmlRenderEvent(render(value))
+  )
+}
+
+function takeOneIfNotRenderEvent<R, E, A>(fx: Fx.Fx<R, E, A>): Fx.Fx<R, E, A> {
+  return Fx.withEarlyExit(({ fork, sink }) =>
+    Fx.run(
+      fx,
+      Sink(
+        sink.onFailure,
+        (event) => isRenderEvent(event) ? sink.onSuccess(event) : Effect.zipRight(sink.onSuccess(event), sink.earlyExit)
+      )
+    ).pipe(
+      fork,
+      Effect.fromFiberEffect
+    )
+  )
+}
+
+function getServerEntry(
+  templateStrings: TemplateStringsArray,
+  templateCache: RenderContext["templateCache"]
+): ServerEntry {
+  const cached = templateCache.get(templateStrings)
+
+  if (cached === undefined || cached._tag === "Browser") {
+    const template = parse(templateStrings)
+
+    const entry: ServerEntry = {
+      _tag: "Server",
+      template,
+      chunks: templateToHtmlChunks(template)
+    }
+
+    return entry
+  } else {
+    return cached
+  }
+}
+
+function unwrapRenderable<R, E>(renderable: Renderable<any, any>): Fx.Fx<R, E, any> {
+  switch (typeof renderable) {
+    case "undefined":
+    case "object": {
+      if (renderable === null || renderable === undefined) return Fx.succeed(null)
+      else if (Array.isArray(renderable)) {
+        return Fx.combine(renderable.map(unwrapRenderable)) as any
+      } else if (TypeId in renderable) {
+        return renderable as any
+      } else if (Effect.EffectTypeId in renderable) {
+        return Fx.fromFxEffect(Effect.map(renderable as any, unwrapRenderable<any, any>))
+      } else return Fx.succeed(renderable as any)
+    }
+    default:
+      return Fx.succeed(renderable)
+  }
+}

package/src/HtmlChunk.ts

@@ -0,0 +1,346 @@
+/**
+ * @since 1.0.0
+ */
+import { TYPED_HASH } from "./Meta"
+import type {
+  Attribute,
+  ElementNode,
+  Node,
+  PartNode,
+  SelfClosingElementNode,
+  SparseAttrNode,
+  SparseClassNameNode,
+  Template,
+  Text,
+  TextOnlyElement
+} from "./Template"
+
+/**
+ * @since 1.0.0
+ */
+export type HtmlChunk = TextChunk | PartChunk | SparsePartChunk
+
+/**
+ * @since 1.0.0
+ */
+export class TextChunk {
+  readonly _tag = "text"
+  constructor(readonly value: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class PartChunk {
+  readonly _tag = "part"
+
+  constructor(
+    readonly node: PartNode,
+    readonly render: (value: unknown) => string
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class SparsePartChunk {
+  readonly _tag = "sparse-part"
+
+  constructor(
+    readonly node: SparseAttrNode | SparseClassNameNode,
+    readonly render: (value: AttrValue) => string
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export type AttrValue = string | null | undefined | ReadonlyArray<AttrValue>
+
+// TODO: Should we escape more things?
+// TODO: We should manually optimize the text fusion
+
+/**
+ * @since 1.0.0
+ */
+export function templateToHtmlChunks({ hash, nodes }: Template) {
+  return fuseTextChunks(nodes.flatMap((node) => nodeToHtmlChunk(node, hash)))
+}
+
+function fuseTextChunks(chunks: Array<HtmlChunk>): ReadonlyArray<HtmlChunk> {
+  const output: Array<HtmlChunk> = []
+
+  for (let i = 0; i < chunks.length; i++) {
+    if (i > 0) {
+      const prevIndex = output.length - 1
+      const prev = output[prevIndex]
+      const curr = chunks[i]
+
+      if (prev._tag === "text" && curr._tag === "text") {
+        output[prevIndex] = new TextChunk(prev.value + curr.value)
+      } else {
+        output.push(curr)
+      }
+    } else {
+      output.push(chunks[i])
+    }
+  }
+
+  return output
+}
+
+type NodeMap = {
+  readonly [K in Node["_tag"]]: (node: Extract<Node, { _tag: K }>, hash?: string) => Array<HtmlChunk>
+}
+
+const nodeMap: NodeMap = {
+  element: elementToHtmlChunks,
+  node: (node) => [new PartChunk(node, String)],
+  "self-closing-element": selfClosingElementToHtmlChunks,
+  text: (node) => [textToHtmlChunks(node)],
+  "text-only-element": textOnlyElementToHtmlChunks,
+  comment: (node) => [new TextChunk(`<!--${node.value}-->`)],
+  "comment-part": (node) => [
+    new PartChunk(node, (value) => `<!--${value}-->`)
+  ],
+  "sparse-comment": (node) => [
+    new TextChunk("<!--"),
+    ...node.nodes.map((node) => {
+      if (node._tag === "text") {
+        return textToHtmlChunks(node)
+      } else {
+        return new PartChunk(node, (value) => `${value}`)
+      }
+    }),
+    new TextChunk("-->")
+  ]
+}
+
+function nodeToHtmlChunk(node: Node, hash?: string): Array<HtmlChunk> {
+  return nodeMap[node._tag](node as any, hash)
+}
+
+function elementToHtmlChunks(
+  { attributes, children, tagName }: ElementNode,
+  hash?: string
+): Array<HtmlChunk> {
+  if (attributes.length === 0) {
+    return [
+      new TextChunk(openTag(tagName, hash) + ">"),
+      ...children.flatMap((c) => nodeToHtmlChunk(c)),
+      new TextChunk(closeTag(tagName))
+    ]
+  }
+
+  const chunks: Array<HtmlChunk> = [
+    new TextChunk(openTag(tagName, hash)),
+    ...attributes.map((a) => attributeToHtmlChunk(a)),
+    new TextChunk(">"),
+    ...children.flatMap((c) => nodeToHtmlChunk(c)),
+    new TextChunk(closeTag(tagName))
+  ]
+
+  return chunks
+}
+
+function selfClosingElementToHtmlChunks(
+  { attributes, tagName }: SelfClosingElementNode,
+  hash?: string
+): Array<HtmlChunk> {
+  if (attributes.length === 0) {
+    return [new TextChunk(openTag(tagName, hash) + "/>")]
+  }
+
+  const chunks: Array<HtmlChunk> = [
+    new TextChunk(openTag(tagName, hash)),
+    ...attributes.map((a) => attributeToHtmlChunk(a)),
+    new TextChunk(`/>`)
+  ]
+
+  return chunks
+}
+
+function textToHtmlChunks(text: Text): HtmlChunk {
+  return text._tag === "text" ? new TextChunk(text.value) : new PartChunk(text, String)
+}
+
+function textOnlyElementToHtmlChunks(
+  { attributes, children, tagName }: TextOnlyElement,
+  hash?: string
+): Array<HtmlChunk> {
+  if (attributes.length === 0) {
+    return [
+      new TextChunk(openTag(tagName, hash) + ">"),
+      ...children.map((c) => textToHtmlChunks(c)),
+      new TextChunk(closeTag(tagName))
+    ]
+  }
+
+  const chunks: Array<HtmlChunk> = [
+    new TextChunk(openTag(tagName, hash)),
+    ...attributes.map((a) => attributeToHtmlChunk(a)),
+    new TextChunk(">"),
+    ...children.map((c) => textToHtmlChunks(c)),
+    new TextChunk(closeTag(tagName))
+  ]
+
+  return chunks
+}
+
+type AttrMap = {
+  [K in Attribute["_tag"]]: (attr: Extract<Attribute, { readonly _tag: K }>) => HtmlChunk
+}
+
+const attrMap: AttrMap = {
+  attribute: (attr) => new TextChunk(` ${attr.name}="${attr.value}"`),
+  attr: (attr) => new PartChunk(attr, (value) => (value == null ? `` : ` ${attr.name}="${value}"`)),
+  boolean: (attr) => new TextChunk(" " + attr.name),
+  "boolean-part": (attr) => new PartChunk(attr, (value) => (value ? ` ${attr.name}` : "")),
+  "className-part": (attr) => new PartChunk(attr, (value) => (value ? ` class="${value}"` : "")),
+  data: (attr) =>
+    new PartChunk(attr, (value) => value == null ? `` : datasetToString(value as Readonly<Record<string, string>>)),
+  event: () => new TextChunk(""),
+  property: (attr) => new PartChunk(attr, (value) => (value == null ? `` : ` ${attr.name}="${escape(value)}"`)),
+  ref: () => new TextChunk(""),
+  "sparse-attr": (attr) =>
+    new SparsePartChunk(attr, (values) => {
+      return values == null
+        ? ``
+        : ` ${attr.name}="${Array.isArray(values) ? values.filter(isString).join("") : values}"`
+    }),
+  "sparse-class-name": (attr) =>
+    new SparsePartChunk(attr, (values) => {
+      return values == null
+        ? ``
+        : ` class="${Array.isArray(values) ? values.filter(isString).join(" ") : values}"`
+    }),
+  text: (attr) => new TextChunk(attr.value)
+}
+
+function attributeToHtmlChunk(attr: Attribute): HtmlChunk {
+  return attrMap[attr._tag](attr as any)
+}
+
+function isString(value: unknown): value is string {
+  return typeof value === "string"
+}
+
+function datasetToString(dataset: Readonly<Record<string, string | undefined>>) {
+  const s = Object.entries(dataset)
+    .map(([key, value]) => (value === undefined ? `data-${key}` : `data-${key}="${value}"`))
+    .join(" ")
+
+  return s.length === 0 ? "" : " " + s
+}
+
+function openTag(tagName: string, hash?: string): string {
+  if (hash === undefined) return `<${tagName}`
+
+  return `<${tagName} ${TYPED_HASH(hash)}`
+}
+
+function closeTag(tagName: string): string {
+  return `</${tagName}>`
+}
+
+/**
+ * @since 1.0.0
+ */
+export function escape(s: unknown) {
+  switch (typeof s) {
+    case "string":
+    case "number":
+    case "boolean":
+      return escapeHtml(String(s))
+    default:
+      return escapeHtml(JSON.stringify(s))
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export function unescape(s: string) {
+  const unescaped = unescapeHtml(s)
+  const couldBeJson = unescaped[0] === "[" || unescaped === "{"
+  if (couldBeJson) {
+    try {
+      return JSON.parse(unescaped)
+    } catch {
+      return unescaped
+    }
+  } else {
+    return unescaped
+  }
+}
+
+const unescapeHtmlRules = [
+  [/&quot;/g, "\""],
+  [/&#39;/g, "'"],
+  [/&#x3A;/g, ":"],
+  [/&lt;/g, "<"],
+  [/&gt;/g, ">"],
+  [/&amp;/g, "&"]
+] as const
+
+const matchHtmlRegExp = /["'&<>]/
+
+/**
+ * @since 1.0.0
+ */
+export function escapeHtml(str: string): string {
+  const match = matchHtmlRegExp.exec(str)
+
+  if (!match) {
+    return str
+  }
+
+  let escape
+  let html = ""
+  let index = 0
+  let lastIndex = 0
+
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escape = "&quot;"
+        break
+      case 38: // &
+        escape = "&amp;"
+        break
+      case 39: // '
+        escape = "&#39;"
+        break
+      case 60: // <
+        escape = "&lt;"
+        break
+      case 62: // >
+        escape = "&gt;"
+        break
+      default:
+        continue
+    }
+
+    if (lastIndex !== index) {
+      html += str.substring(lastIndex, index)
+    }
+
+    lastIndex = index + 1
+    html += escape
+  }
+
+  return lastIndex !== index
+    ? html + str.substring(lastIndex, index)
+    : html
+}
+
+/**
+ * @since 1.0.0
+ */
+export function unescapeHtml(html: string) {
+  for (const [from, to] of unescapeHtmlRules) {
+    html = html.replace(from, to)
+  }
+
+  return html
+}

package/src/Hydrate.ts

@@ -0,0 +1,53 @@
+/**
+ * @since 1.0.0
+ */
+
+import * as Context from "@typed/context"
+import { Document } from "@typed/dom/Document"
+import { RootElement } from "@typed/dom/RootElement"
+import * as Fx from "@typed/fx/Fx"
+import * as Effect from "effect/Effect"
+import * as Layer from "effect/Layer"
+import { findRootParentChildNodes, hydrateTemplate } from "./internal/hydrate"
+import { HydrateContext } from "./internal/HydrateContext"
+import { attachRoot } from "./internal/render"
+import type { ToRendered } from "./Render"
+import { RenderContext } from "./RenderContext"
+import { type RenderEvent } from "./RenderEvent"
+import { RenderTemplate } from "./RenderTemplate"
+
+/**
+ * @since 1.0.0
+ */
+export function hydrate<R, E, T extends RenderEvent | null>(
+  rendered: Fx.Fx<R, E, T>
+): Fx.Fx<Exclude<R, RenderTemplate> | Document | RenderContext | RootElement, E, ToRendered<T>> {
+  return Fx.fromFxEffect(Effect.contextWith((context) => {
+    const [document, renderContext, { rootElement }] = Context.getMany(context, Document, RenderContext, RootElement)
+    const ctx: HydrateContext = {
+      where: findRootParentChildNodes(rootElement),
+      rootIndex: -1,
+      parentTemplate: null,
+      hydrate: true
+    }
+
+    const layer = Layer.provideMerge(
+      HydrateContext.layer(ctx),
+      RenderTemplate.layer(hydrateTemplate(document, renderContext))
+    )
+
+    return Fx.provide(
+      Fx.mapEffect(rendered, (what) => attachRoot(renderContext.renderCache, rootElement, what)),
+      layer
+    )
+  })) as Fx.Fx<Exclude<R, RenderTemplate> | Document | RenderContext | RootElement, E, ToRendered<T>>
+}
+
+/**
+ * @since 1.0.0
+ */
+export function hydrateLayer<R, E, T extends RenderEvent | null>(
+  rendered: Fx.Fx<R, E, T>
+) {
+  return Fx.drainLayer(Fx.switchMapCause(hydrate(rendered), Effect.logError))
+}