@typed/template 0.1.4 → 0.3.0

package/src/internal/browser.ts

@@ -1,7 +1,6 @@
 import { diffable, isComment } from "@typed/wire"
 import udomdiff from "udomdiff"
 import type { RenderContext } from "../RenderContext.js"
-import type { RenderEvent } from "../RenderEvent.js"
 import { isRenderEvent } from "../RenderEvent.js"
 import { NodePartImpl } from "./parts.js"
 import { findHoleComment, isCommentWithValue } from "./utils.js"
@@ -19,16 +18,20 @@ export function makeRenderNodePart(
 
   return new NodePartImpl(index, ({ part, value }) => {
     return ctx.queue.add(part, () => {
-      matchValue(value, (content) => {
-        if (text === undefined) {
-          text = document.createTextNode("")
+      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)
         }
-        text.textContent = content
-
-        nodes = diffChildren(comment, nodes, [text], document)
-      }, (updatedNodes) => {
-        nodes = diffChildren(comment, nodes, updatedNodes, document)
-      })
+      )
     })
   }, nodes)
 }
@@ -83,22 +86,12 @@ export function diffChildren(
     comment.parentNode!,
     // Document Fragments cannot be removed, so we filter them out
     currentNodes.filter((x) => x.nodeType !== x.DOCUMENT_FRAGMENT_NODE),
-    nextNodes.flatMap(flattenRenderEvent),
+    nextNodes,
     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
@@ -117,16 +110,24 @@ function matchValue<A, B>(value: unknown, onText: (text: string) => A, onNodes:
         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]))
-          )
+          return onNodes(value.flatMap(renderEventToArray))
         } // 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)])
+        return onNodes(renderEventToArray(value))
       }
     }
     case "function":
       return onNodes([])
   }
 }
+
+function renderEventToArray(x: unknown): Array<Node> {
+  if (x === null || x === undefined) return []
+  if (isRenderEvent(x)) {
+    const value = x.valueOf()
+    return Array.isArray(value) ? value : [value]
+  }
+
+  return [x as Node]
+}

package/src/internal/hydrate.ts

@@ -1,21 +1,20 @@
 import * as Fx from "@typed/fx/Fx"
-import * as Subject from "@typed/fx/Subject"
-import type { Rendered } from "@typed/wire"
 import type { Cause } from "effect"
-import { Effect } from "effect"
-import * as ElementRef from "../ElementRef.js"
+import * as Effect from "effect/Effect"
 import type { Placeholder } from "../Placeholder.js"
 import type { Renderable } from "../Renderable.js"
 import type { RenderContext } from "../RenderContext.js"
+import type { RenderEvent } from "../RenderEvent.js"
 import { DomRenderEvent } from "../RenderEvent.js"
 import type { RenderTemplate } from "../RenderTemplate.js"
-import { TemplateInstance } from "../TemplateInstance.js"
 import { indexRefCounter } from "./indexRefCounter.js"
 
 import { unsafeGet } from "@typed/context"
 
+import { Scope } from "effect/Scope"
 import type { Template } from "../Template.js"
 import { CouldNotFindCommentError, CouldNotFindRootElement } from "./errors.js"
+import { type EventSource, makeEventSource } from "./EventSource.js"
 import { HydrateContext } from "./HydrateContext.js"
 import { buildParts, getBrowserEntry, renderTemplate, renderValues } from "./render.js"
 import {
@@ -33,61 +32,69 @@ import {
  * Here for "standard" browser rendering, a TemplateInstance is effectively a live
  * view into the contents rendered by the Template.
  */
-export const hydrateTemplate: (document: Document, ctx: RenderContext) => RenderTemplate =
-  (document, renderContext) =>
-  <Values extends ReadonlyArray<Renderable<any, any>>, T extends Rendered = Rendered>(
-    templateStrings: TemplateStringsArray,
-    values: Values,
-    providedRef?: ElementRef.ElementRef<T>
-  ) => {
-    return Effect.gen(function*(_) {
-      const context = yield* _(Effect.context<never>())
-      const hydrateCtx = unsafeGet(context, HydrateContext)
-
-      // If we're not longer hydrating, just render normally
-      if (!hydrateCtx.hydrate) {
-        return yield* _(renderTemplate(document, renderContext)(templateStrings, values, providedRef))
-      }
+export const hydrateTemplate: (document: Document, ctx: RenderContext) => RenderTemplate = (
+  document,
+  renderContext
+) => {
+  const render_ = renderTemplate(document, renderContext)
 
-      const elementRef = providedRef || (yield* _(ElementRef.make<T>()))
-      const events = Fx.map(elementRef, DomRenderEvent)
-      const errors = Subject.make<Placeholder.Error<Values[number]>, never>()
-
-      const { getParts, template, where, wire } = getHydrateEntry({
-        ...hydrateCtx,
-        document,
-        renderContext,
-        elementRef,
-        strings: templateStrings,
-        onCause: errors.onFailure
+  return <Values extends ReadonlyArray<Renderable<any, any>>>(
+    templateStrings: TemplateStringsArray,
+    values: Values
+  ): Fx.Fx<
+    Scope | Placeholder.Context<Values[number]>,
+    Placeholder.Error<Values[number]>,
+    RenderEvent
+  > => {
+    return Fx.make((sink) =>
+      Effect.gen(function*(_) {
+        const eventSource = makeEventSource()
+        const context = yield* _(Effect.context<Scope>())
+        const hydrateCtx = unsafeGet(context, HydrateContext)
+        const scope = unsafeGet(context, Scope)
+
+        // If we're not longer hydrating, just render normally
+        if (hydrateCtx.hydrate === false) {
+          return render_(templateStrings, values)
+        }
+
+        const { parts, template, where, wire } = getHydrateEntry({
+          ...hydrateCtx,
+          document,
+          renderContext,
+          eventSource,
+          strings: templateStrings,
+          onCause: sink.onFailure
+        })
+
+        // If there are parts we need to render them before constructing our Wire
+        if (parts.length > 0) {
+          const refCounter = yield* _(indexRefCounter(parts.length))
+
+          // Do the work
+          yield* _(
+            renderValues(values, parts, refCounter, context, (index: number): HydrateContext => ({
+              where,
+              rootIndex: index,
+              parentTemplate: template,
+              hydrate: true
+            }))
+          )
+
+          // Wait for initial work to be completed
+          yield* _(refCounter.wait)
+        }
+
+        hydrateCtx.hydrate = false
+
+        yield* _(eventSource.setup(wire, scope))
+
+        yield* _(sink.onSuccess(DomRenderEvent(wire)))
+        yield* _(Effect.never)
       })
-      const parts = yield* _(getParts)
-
-      // If there are parts we need to render them before constructing our Wire
-      if (parts.length > 0) {
-        const refCounter = yield* _(indexRefCounter(parts.length))
-
-        // Do the work
-        yield* _(renderValues(values, parts, refCounter, errors.onFailure, (index: number): HydrateContext => ({
-          where,
-          rootIndex: index,
-          parentTemplate: template,
-          hydrate: true
-        })))
-
-        // Wait for initial work to be completed
-        yield* _(refCounter.wait)
-      }
-
-      hydrateCtx.hydrate = false
-
-      // Set the element when it is ready
-      yield* _(ElementRef.set(elementRef, wire as T))
-
-      // Return the Template instance
-      return TemplateInstance(Fx.merge([events, errors]), elementRef)
-    })
+    )
   }
+}
 
 export function findRootParentChildNodes(where: HTMLElement): ParentChildNodes {
   const childNodes = findRootChildNodes(where)
@@ -205,7 +212,7 @@ export function findPartComment(childNodes: ArrayLike<Node>, partIndex: number)
 export function getHydrateEntry({
   childIndex,
   document,
-  elementRef,
+  eventSource,
   onCause,
   parentTemplate,
   renderContext,
@@ -219,7 +226,7 @@ export function getHydrateEntry({
   rootIndex: number
   parentTemplate: Template | null
   strings: TemplateStringsArray
-  elementRef: ElementRef.ElementRef<any>
+  eventSource: EventSource
   onCause: (cause: Cause.Cause<any>) => Effect.Effect<never, never, void>
   childIndex?: number
 }) {
@@ -229,7 +236,7 @@ export function getHydrateEntry({
     where = findTemplateResultPartChildNodes(where, parentTemplate, template, rootIndex, childIndex)
   }
 
-  const getParts = buildParts(document, renderContext, template, where, elementRef, onCause, true)
+  const parts = buildParts(document, renderContext, template, where, eventSource, onCause, true)
 
   const wire = (() => {
     if (!parentTemplate) {
@@ -256,7 +263,7 @@ export function getHydrateEntry({
   return {
     template,
     wire,
-    getParts,
+    parts,
     where
   } as const
 }

package/src/internal/indexRefCounter.ts

@@ -1,5 +1,6 @@
 import * as Deferred from "effect/Deferred"
 import * as Effect from "effect/Effect"
+import * as Option from "effect/Option"
 
 export type IndexRefCounter = {
   release: (index: number) => Effect.Effect<never, never, void>
@@ -15,13 +16,16 @@ export function indexRefCounter(expected: number): Effect.Effect<
   IndexRefCounter
 > {
   return Effect.map(Deferred.make<never, void>(), (deferred) => {
+    const done = Deferred.succeed(deferred, undefined)
     const indexes = new Set<number>(Array.from({ length: expected }, (_, i) => i))
 
     function release(index: number) {
       return Effect.suspend(() => {
         if (indexes.delete(index) && indexes.size === 0) {
-          return Deferred.succeed(deferred, undefined)
-        } else return Effect.unit
+          return done
+        } else {
+          return Effect.unit
+        }
       })
     }
 
@@ -31,3 +35,60 @@ export function indexRefCounter(expected: number): Effect.Effect<
     }
   })
 }
+
+export type IndexRefCounter2 = {
+  release: (index: number) => Effect.Effect<never, never, void>
+  expect: (count: number) => Effect.Effect<never, never, boolean>
+  wait: Effect.Effect<never, never, void>
+}
+
+/**
+ * @internal
+ */
+export function indexRefCounter2(): Effect.Effect<
+  never,
+  never,
+  IndexRefCounter2
+> {
+  return Effect.map(Deferred.make<never, void>(), (deferred) => {
+    let expected: Option.Option<number> = Option.none<number>()
+    const done = Deferred.succeed(deferred, undefined)
+    const indexes = new Set<number>()
+
+    function isDone() {
+      if (Option.isSome(expected)) {
+        return indexes.size === expected.value
+      } else {
+        return false
+      }
+    }
+
+    function release(index: number) {
+      return Effect.suspend(() => {
+        indexes.add(index)
+        if (isDone()) {
+          return done
+        } else {
+          return Effect.succeed(false)
+        }
+      })
+    }
+
+    function expect(count: number) {
+      return Effect.suspend(() => {
+        expected = Option.some(count)
+        if (isDone()) {
+          return Effect.as(done, false)
+        } else {
+          return Effect.succeed(true)
+        }
+      })
+    }
+
+    return {
+      release,
+      expect,
+      wait: Deferred.await(deferred)
+    }
+  })
+}

package/src/internal/module-augmentation.ts

@@ -42,7 +42,3 @@ declare global {
 declare module "@typed/fx/Fx" {
   export interface Fx<R, E, A> extends Placeholder<R, E, A> {}
 }
-
-declare module "effect/Effect" {
-  export interface Effect<R, E, A> extends Placeholder<R, E, A> {}
-}

package/src/internal/parser.ts

@@ -2,7 +2,6 @@ import * as Chunk from "effect/Chunk"
 import { globalValue } from "effect/GlobalValue"
 import * as Option from "effect/Option"
 import * as Template from "../Template.js"
-import { SELF_CLOSING_TAGS, TEXT_ONLY_NODES_REGEX } from "../Token.js"
 import type { TextChunk } from "./chunks.js"
 import {
   getPart,
@@ -16,6 +15,40 @@ import {
 // TODO: Consider ways to surface useful errors and warnings.
 // TODO: Profile for performance optimization
 
+/**
+ * @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"
+])
+
 export interface Parser {
   parse(templateStrings: ReadonlyArray<string>): Template.Template
 }
@@ -25,18 +58,38 @@ export function parse(templateStrings: ReadonlyArray<string>): Template.Template
 }
 
 const SPACE_REGEX = /\s/
-const isPartToken: TextPredicate = (input, pos) => input[pos] === "{" && input.slice(pos, pos + 8) === "{{__PART"
-const isPartEndToken: TextPredicate = (input, pos) => input[pos] === "_" && input.slice(pos, pos + 4) === "__}}"
-const isElementOpenToken: TextPredicate = (input, pos) => input[pos] === "<" && input[pos + 1] !== "/"
-const isElementCloseToken: TextPredicate = (input, pos) => input[pos] === "<" && input[pos + 1] === "/"
-const isEqualsToken: TextPredicate = (input, pos) => input[pos] === "="
-const isQuoteToken: TextPredicate = (input, pos) => input[pos] === `"`
-const isSingleQuoteToken: TextPredicate = (input, pos) => input[pos] === "'"
+const PART_START = "{{__PART"
+const PART_END = "__}}"
+const chars = {
+  openBracket: "{",
+  closeBracket: "}",
+  underscore: "_",
+  equals: "=",
+  quote: `"`,
+  singleQuote: "'",
+  slash: "/",
+  greaterThan: ">",
+  lessThan: "<",
+  hypen: "-"
+} as const
+
+const isPartToken: TextPredicate = (input, pos) =>
+  input[pos] === chars.openBracket && input.slice(pos, pos + 8) === PART_START
+const isPartEndToken: TextPredicate = (input, pos) =>
+  input[pos] === chars.underscore && input.slice(pos, pos + 4) === PART_END
+const isElementOpenToken: TextPredicate = (input, pos) =>
+  input[pos] === chars.lessThan && input[pos + 1] !== chars.slash
+const isElementCloseToken: TextPredicate = (input, pos) =>
+  input[pos] === chars.lessThan && input[pos + 1] === chars.slash
+const isEqualsToken: TextPredicate = (input, pos) => input[pos] === chars.equals
+const isQuoteToken: TextPredicate = (input, pos) => input[pos] === chars.quote
+const isSingleQuoteToken: TextPredicate = (input, pos) => input[pos] === chars.singleQuote
 const isWhitespaceToken: TextPredicate = (input, pos) => SPACE_REGEX.test(input[pos])
-const isOpenTagEndToken: TextPredicate = (input, pos) => input[pos] === ">"
-const isSelfClosingTagEndToken: TextPredicate = (input, pos) => input[pos] === "/" && input[pos + 1] === ">"
+const isOpenTagEndToken: TextPredicate = (input, pos) => input[pos] === chars.greaterThan
+const isSelfClosingTagEndToken: TextPredicate = (input, pos) =>
+  input[pos] === chars.slash && input[pos + 1] === chars.greaterThan
 const isCommentEndToken: TextPredicate = (input, pos) =>
-  input[pos] === "-" && input[pos + 1] === "-" && input[pos + 2] === ">"
+  input[pos] === chars.hypen && input[pos + 1] === chars.hypen && input[pos + 2] === chars.greaterThan
 
 type Context = "unknown" | "element"
 
@@ -154,6 +207,7 @@ class ParserImpl implements Parser {
 
     while (this.pos < this.length) {
       const node = this.parseNodeFromContext(this.context)
+
       if (node === undefined) {
         return nodes
       } else {
@@ -187,9 +241,16 @@ class ParserImpl implements Parser {
     const nextChar = this.nextChar()
 
     if (nextChar === "!") { // Comment
-      this.consumeAmount(3)
+      this.consumeAmount(1)
+
+      const nextChar = this.nextChar()
 
-      return [this.parseComment()]
+      if (nextChar == "-") {
+        this.consumeAmount(2)
+        return [this.parseComment()]
+      } else {
+        return [this.parseDocType()]
+      }
     } else if (nextChar === "/") { // Self-closing tag
       return this.selfClosingTagEnd()
     } else { // Elements
@@ -263,6 +324,7 @@ class ParserImpl implements Parser {
 
   private parseTextOnlyElement(tagName: string): Template.TextOnlyElement {
     const attributes = this.parseAttributes()
+
     this.path.push()
     const children = this.parseTextChildren()
     this.path.pop()
@@ -289,6 +351,14 @@ class ParserImpl implements Parser {
     return this.addPart(new Template.SparseCommentNode(textAndParts))
   }
 
+  private parseDocType(): Template.DocType {
+    this.parseTextUntil((char) => char === chars.greaterThan)
+    this.consumeAmount(1)
+    this.skipWhitespace()
+
+    return new Template.DocType("html")
+  }
+
   private parseTagName() {
     return this.parseTextUntilMany(tagNameMatches)
   }
@@ -304,6 +374,7 @@ class ParserImpl implements Parser {
       case null:
         return Skip
       case "whitespace":
+        this.skipWhitespace()
         return Continue([new Template.BooleanNode(name)])
       case "equals": {
         this.consumeAmount(1)
@@ -366,11 +437,13 @@ class ParserImpl implements Parser {
       case ".": {
         const property = name.slice(1)
 
-        return this.addPart(
-          property === "data"
-            ? new Template.DataPartNode(unsafeParsePartIndex(text))
-            : new Template.PropertyPartNode(property, unsafeParsePartIndex(text))
-        )
+        if (property === "data") {
+          return this.addPart(new Template.DataPartNode(unsafeParsePartIndex(text)))
+        } else if (property === "props" || property === "properties") {
+          return this.addPart(new Template.PropertiesPartNode(unsafeParsePartIndex(text)))
+        } else {
+          return this.addPart(new Template.PropertyPartNode(property, unsafeParsePartIndex(text)))
+        }
       }
       case "@":
         return this.addPart(new Template.EventPartNode(name.slice(1), unsafeParsePartIndex(text)))
@@ -617,7 +690,7 @@ function parseTextAndParts<T>(s: string, f: (index: number) => T): Array<Templat
   return out
 }
 
-export const parser: Parser = globalValue(Symbol.for("../Parser2.js"), () => new ParserImpl())
+export const parser: Parser = globalValue(Symbol.for("@typed/template/Parser2"), () => new ParserImpl())
 
 const digestSize = 2
 const multiplier = 33