@typed/template 0.2.0 → 0.3.1

package/src/internal/parser.ts

@@ -2,9 +2,9 @@ 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 {
+  getClosingTagName,
   getPart,
   getStrictPart,
   getTextUntilCloseBrace,
@@ -16,6 +16,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 +59,39 @@ 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
+const isGreaterThanToken: TextPredicate = (input, pos) => input[pos] === chars.greaterThan
 
 type Context = "unknown" | "element"
 
@@ -154,6 +209,7 @@ class ParserImpl implements Parser {
 
     while (this.pos < this.length) {
       const node = this.parseNodeFromContext(this.context)
+
       if (node === undefined) {
         return nodes
       } else {
@@ -187,9 +243,18 @@ class ParserImpl implements Parser {
     const nextChar = this.nextChar()
 
     if (nextChar === "!") { // Comment
-      this.consumeAmount(3)
+      this.consumeAmount(1)
 
-      return [this.parseComment()]
+      const nextChar = this.nextChar()
+
+      if (nextChar == "-") {
+        this.consumeAmount(2)
+        return [this.parseComment()]
+      } else if (nextChar.toLowerCase() === "d") {
+        return [this.parseDocType()]
+      } else {
+        throw new SyntaxError(`Unknown comment type ${nextChar}`)
+      }
     } else if (nextChar === "/") { // Self-closing tag
       return this.selfClosingTagEnd()
     } else { // Elements
@@ -251,10 +316,17 @@ class ParserImpl implements Parser {
       this.path.pop()
       const element = new Template.ElementNode(tagName, attributes, children)
 
+      this.skipWhitespace()
+      this.consumeClosingTag(tagName)
+
       return element
     }
   }
 
+  private consumeClosingTag(tagName: string) {
+    this.chunk(getClosingTagName(tagName))
+  }
+
   private parseSelfClosingElement(tagName: string): Template.SelfClosingElementNode {
     const attributes = this.parseAttributes()
 
@@ -263,6 +335,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 +362,14 @@ class ParserImpl implements Parser {
     return this.addPart(new Template.SparseCommentNode(textAndParts))
   }
 
+  private parseDocType(): Template.DocType {
+    this.parseTextUntil(isGreaterThanToken)
+    this.consumeAmount(1)
+    this.skipWhitespace()
+
+    return new Template.DocType("html")
+  }
+
   private parseTagName() {
     return this.parseTextUntilMany(tagNameMatches)
   }
@@ -304,6 +385,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 +448,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)))
@@ -450,20 +534,18 @@ class ParserImpl implements Parser {
   }
 
   private parseTextUntil(predicate: (char: string, pos: number) => boolean) {
-    let text = ""
-
+    const start = this.pos
+    let i = 0
     while (this.pos < this.length) {
-      const char = this.nextChar()
-
       if (predicate(this.input, this.pos)) {
         break
       }
 
-      text += char
+      i++
       this.consumeAmount(1)
     }
 
-    return text
+    return this.input.slice(start, start + i)
   }
 
   private parseTextUntilMany<const T extends Predicates>(
@@ -617,7 +699,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

package/src/internal/parts.ts

@@ -1,18 +1,13 @@
-import type { Context } from "@typed/context"
-import * as Fx from "@typed/fx/Fx"
-import { WithContext } from "@typed/fx/Sink"
-import { isText, type Rendered } from "@typed/wire"
+import { isText } from "@typed/wire"
 import type { Cause } from "effect/Cause"
+import * as Data from "effect/Data"
 import * as Effect from "effect/Effect"
 import { equals } from "effect/Equal"
-import { strict } from "effect/Equivalence"
-import type { Equivalence } from "effect/Equivalence"
-import * as Fiber from "effect/Fiber"
+import * as Equivalence from "effect/Equivalence"
 import * as ReadonlyArray from "effect/ReadonlyArray"
 import type { Scope } from "effect/Scope"
-import * as SynchronizedRef from "effect/SynchronizedRef"
-import type { ElementRef } from "../ElementRef.js"
 import type { ElementSource } from "../ElementSource.js"
+import type { EventHandler } from "../EventHandler.js"
 import { unescape } from "../HtmlChunk.js"
 import type {
   AttributePart,
@@ -23,6 +18,7 @@ import type {
   EventPart,
   NodePart,
   Part,
+  PropertiesPart,
   PropertyPart,
   RefPart,
   SparseAttributePart,
@@ -35,7 +31,7 @@ import type {
 import type { RenderContext } from "../RenderContext.js"
 import { findHoleComment } from "./utils.js"
 
-const strictEq = strict<any>()
+const strictEq = Equivalence.strict<any>()
 
 const base = <T extends Part["_tag"]>(tag: T) =>
   class Base {
@@ -51,7 +47,7 @@ const base = <T extends Part["_tag"]>(tag: T) =>
         }
       ) => Effect.Effect<Scope, never, void>,
       public value: Extract<Part, { readonly _tag: T }>["value"],
-      readonly eq: Equivalence<Extract<Part, { readonly _tag: T }>["value"]> = equals
+      readonly eq: Equivalence.Equivalence<Extract<Part, { readonly _tag: T }>["value"]> = equals
     ) {
       this.update = this.update.bind(this)
     }
@@ -64,7 +60,7 @@ const base = <T extends Part["_tag"]>(tag: T) =>
         return Effect.unit
       }
 
-      return Effect.tap(
+      return Effect.flatMap(
         this.commit.call(this, {
           previous,
           value,
@@ -291,73 +287,20 @@ function diffDataSet(
   }
 }
 
-export class EventPartImpl extends base("event") implements EventPart {
+export class EventPartImpl implements EventPart {
+  readonly _tag = "event"
+  readonly value: EventPart["value"] = null
+
   constructor(
     readonly name: string,
+    readonly index: number,
+    readonly source: ElementSource<any>,
     readonly onCause: <E>(cause: Cause<E>) => Effect.Effect<never, never, unknown>,
-    index: number,
-    commit: EventPartImpl["commit"],
-    value: EventPart["value"]
+    readonly addEventListener: <Ev extends Event>(handler: EventHandler<never, never, Ev>) => void
   ) {
-    super(index, commit, value, strictEq)
-  }
-
-  static browser<T extends Rendered, E>(
-    name: string,
-    index: number,
-    ref: ElementRef<T>,
-    element: HTMLElement | SVGElement,
-    onCause: (cause: Cause<E>) => Effect.Effect<never, never, unknown>
-  ): Effect.Effect<unknown, never, void> {
-    return withSwitchFork((fork, ctx) => {
-      const source = ref.query(element)
-
-      return Effect.succeed(
-        new EventPartImpl(
-          name,
-          onCause as any,
-          index,
-          ({ value }) => {
-            return value
-              ? Fx.run(
-                source.events(name as keyof HTMLElementEventMap | keyof SVGElementEventMap, value.options),
-                WithContext(onCause, value.handler)
-              ).pipe(
-                Effect.provide(ctx),
-                fork
-              )
-              : fork(Effect.unit)
-          },
-          null
-        )
-      )
-    })
   }
 }
 
-function withScopedFork<R, E, A>(f: (fork: Fx.ScopedFork) => Effect.Effect<R, E, A>): Effect.Effect<R | Scope, E, A> {
-  return Effect.scopeWith((scope) => f(Effect.forkIn(scope)))
-}
-
-// Ensures only a single fiber is executing
-function withSwitchFork<R, E, A>(
-  f: (fork: Fx.FxFork, ctx: Context<R | Scope>) => Effect.Effect<R, E, A>
-): Effect.Effect<R | Scope, E, A> {
-  return Effect.contextWithEffect((ctx) =>
-    withScopedFork((fork) =>
-      Effect.flatMap(
-        SynchronizedRef.make<Fiber.Fiber<never, void>>(Fiber.unit),
-        (ref) =>
-          f((effect) =>
-            SynchronizedRef.updateAndGetEffect(
-              ref,
-              (fiber) => Effect.flatMap(Fiber.interrupt(fiber), () => fork(effect))
-            ), ctx)
-      )
-    )
-  )
-}
-
 export class NodePartImpl extends base("node") implements NodePart {}
 
 export class PropertyPartImpl extends base("property") implements PropertyPart {
@@ -403,6 +346,147 @@ export class TextPartImpl extends base("text") implements TextPart {
       strictEq
     )
   }
+
+  static fromText(text: Text, index: number, ctx: RenderContext) {
+    return new TextPartImpl(
+      index,
+      ({ part, value }) => ctx.queue.add(part, () => text.nodeValue = value ?? null),
+      text.nodeValue,
+      strictEq
+    )
+  }
+
+  static getOrCreateText(document: Document, index: number, element: Element) {
+    const comment = findHoleComment(element, index)
+
+    return comment.previousSibling && isText(comment.previousSibling)
+      ? comment.previousSibling.nodeValue
+      : document.createTextNode("")
+  }
+}
+
+export class PropertiesPartImpl extends base("properties") implements PropertiesPart {
+  constructor(
+    index: number,
+    commit: PropertiesPartImpl["commit"],
+    value: PropertiesPartImpl["value"]
+  ) {
+    super(index, commit, value, equals)
+  }
+
+  getValue(value: unknown): unknown {
+    if (value == null) return null
+    return Data.struct(value)
+  }
+
+  static browser(index: number, element: HTMLElement | SVGElement, ctx: RenderContext) {
+    return new PropertiesPartImpl(
+      index,
+      ({ part, previous, value }) =>
+        ctx.queue.add(
+          part,
+          () => {
+            const diff = diffProperties(previous, value)
+            if (diff) {
+              const { added, removed } = diff
+
+              removed.forEach((nv) => removeNameValue(element, nv))
+              added.forEach((nv) => {
+                if ((nv.name[0] === "o" && nv.name[1] === "n") || nv.name[0] === "@") return
+
+                return addNameValue(element, nv)
+              })
+            }
+          }
+        ),
+      {}
+    )
+  }
+}
+
+function removeNameValue(element: HTMLElement | SVGElement, { name, type }: NameValue) {
+  switch (type) {
+    case "attr":
+    case "bool":
+      return element.removeAttribute(name)
+    case "prop":
+      return delete (element as any)[name]
+  }
+}
+
+function addNameValue(element: HTMLElement | SVGElement, { name, type, value }: NameValue) {
+  switch (type) {
+    case "attr":
+      return value == null ? element.removeAttribute(name) : element.setAttribute(name, value)
+    case "bool":
+      return value == null ? element.removeAttribute(name) : element.toggleAttribute(name, value)
+    case "prop":
+      return value == null ? (delete (element as any)[name]) : (element as any)[name] = value
+  }
+}
+
+type AttrNameValue = {
+  readonly type: "attr"
+  readonly name: string
+  readonly value: string
+}
+
+type BoolAttrNameValue = {
+  readonly type: "bool"
+  readonly name: string
+  readonly value: boolean
+}
+
+type PropNameValue = {
+  readonly type: "prop"
+  readonly name: string
+  readonly value: unknown
+}
+
+type NameValue = AttrNameValue | BoolAttrNameValue | PropNameValue
+
+function diffProperties(
+  a: Record<string, unknown> | null | undefined,
+  b: Record<string, unknown> | null | undefined
+): { added: Array<NameValue>; removed: ReadonlyArray<NameValue> } | null {
+  if (!a) {
+    if (b) {
+      return { added: Object.entries(b).flatMap(([k, v]) => fromKeyValue(k, v)), removed: [] }
+    } else return null
+  } else if (!b) {
+    return { added: [], removed: Object.entries(a).flatMap(([k, v]) => fromKeyValue(k, v)) }
+  } else {
+    const { added, removed, unchanged } = diffStrings(Object.keys(a), Object.keys(b))
+
+    return {
+      added: added.concat(unchanged).flatMap((k) => fromKeyValue(k, b[k])),
+      removed: removed.flatMap((k) => fromKeyValue(k, a[k]))
+    }
+  }
+}
+
+function fromKeyValue(name: string, value: unknown): Array<NameValue> {
+  if (name[0] === ".") {
+    return value == null ? [] : [{
+      type: "prop",
+      name: name.slice(1),
+      value
+    }]
+  } else if (typeof value === "boolean") {
+    return [{
+      type: "bool",
+      name,
+      value
+    }]
+  } else {
+    if (name[0] === "o" || name[1] === "n") return []
+
+    return value == null ? [] : [{
+      type: "attr",
+      name,
+      value: String(value)
+    }]
+  }
 }
 
 const sparse = <T extends SparsePart["_tag"]>(tag: T) =>
@@ -418,7 +502,8 @@ const sparse = <T extends SparsePart["_tag"]>(tag: T) =>
         }
       ) => Effect.Effect<Scope, never, void>,
       public value: SparseAttributeValues<Extract<SparsePart, { readonly _tag: T }>["parts"]>,
-      readonly eq: Equivalence<SparseAttributeValues<Extract<SparsePart, { readonly _tag: T }>["parts"]>> = equals
+      readonly eq: Equivalence.Equivalence<SparseAttributeValues<Extract<SparsePart, { readonly _tag: T }>["parts"]>> =
+        equals
     ) {}
 
     update = (value: this["value"]) => {