@typed/template 0.2.0 → 0.3.0

package/src/Parser.ts

@@ -2,456 +2,13 @@
  * @since 1.0.0
  */
 
-import * as Chunk from "effect/Chunk"
-import { globalValue } from "effect/GlobalValue"
-import { templateHash } from "./internal/parser.js"
-import * as Template from "./Template.js"
-import type { Token } from "./Token.js"
-import { tokenize } from "./Tokenizer.js"
-
-/**
- * @since 1.0.0
- */
-export interface Parser {
-  parse(template: ReadonlyArray<string>, tokenStream?: Iterator<Token>): Template.Template
-}
-
-const iterator = <A>(iterable: Iterable<A>): Iterator<A> => iterable[Symbol.iterator]()
-
-const dropLast = Chunk.dropRight(1)
-
-class ParserImpl {
-  protected _template: ReadonlyArray<string> = []
-  protected _tokenStream!: Iterator<Token>
-  protected _lookahead!: Token | null
-  protected _stack!: Chunk.Chunk<number>
-  protected _parts!: Array<[Template.PartNode | Template.SparsePartNode, Chunk.Chunk<number>]>
-  protected _skipWhitespace!: boolean
-
-  parse(
-    template: ReadonlyArray<string>,
-    tokenStream: Iterator<Token> = iterator(tokenize(template))
-  ): Template.Template {
-    this._template = template
-    this._tokenStream = tokenStream
-    this._lookahead = this.getNextToken()
-    this._stack = Chunk.empty()
-    this._parts = []
-    this._skipWhitespace = true
-
-    const ast = this.Template(templateHash(template))
-
-    return ast
-  }
-
-  protected Template(hash: string): Template.Template {
-    const template = new Template.Template(this.Children(), hash, this._parts)
-
-    return template
-  }
-
-  protected Node(): Template.Node | null {
-    const token = this.findTokenOfType(
-      "opening-tag",
-      "text",
-      "comment",
-      "comment-start",
-      "part-token",
-      "closing-tag"
-    )
-
-    if (token._tag === "closing-tag") return null
-
-    if (token._tag === "text") {
-      if (this._skipWhitespace && token.value.trim() === "") return null
-
-      return new Template.TextNode(token.value)
-    }
-
-    if (token._tag === "comment") {
-      return new Template.CommentNode(token.value)
-    }
-
-    if (token._tag === "comment-start") {
-      const node = this.Comment("")
-      return node
-    }
-
-    // Some annoyances here for generating the correct path for node parts
-    if (token._tag === "part-token") {
-      this._skipWhitespace = false
-      return this.addPartWithoutCurrent(new Template.NodePart(token.index))
-    }
-
-    this._skipWhitespace = true
-
-    if (token.isSelfClosing) {
-      return this.SelfClosingElementNode(token.name)
-    } else if (token.textOnly) {
-      return this.TextOnlyElement(token.name)
-    } else {
-      return this.ElementNode(token.name)
-    }
-  }
-
-  protected ElementNode(tagName: string): Template.ElementNode {
-    const attrs: Array<Template.Attribute> = []
-    const children: Array<Template.Node> = []
-    const element = new Template.ElementNode(tagName, attrs, children)
-
-    this.Attributes(attrs)
-    this.Children(children)
-
-    return element
-  }
-
-  protected SelfClosingElementNode(tagName: string): Template.SelfClosingElementNode {
-    const attrs: Array<Template.Attribute> = []
-    const element = new Template.SelfClosingElementNode(tagName, attrs)
-
-    this.Attributes(attrs)
-
-    return element
-  }
-
-  protected TextOnlyElement(tagName: string): Template.TextOnlyElement {
-    const attrs: Array<Template.Attribute> = []
-    const children: Array<Template.Text> = []
-    const element = new Template.TextOnlyElement(tagName, attrs, children)
-
-    this.Attributes(attrs)
-    this.TextChildren(children)
-
-    return element
-  }
-
-  protected Attributes(attributes: Array<Template.Attribute> = []): Array<Template.Attribute> {
-    while (this._lookahead !== null) {
-      if (this._lookahead._tag === "opening-tag-end") {
-        this._lookahead = this.getNextToken()
-        break
-      } else {
-        const attr = this.Attribute()
-        if (attr) {
-          attributes.push(attr)
-        } else {
-          break
-        }
-      }
-    }
-
-    return attributes
-  }
-
-  protected Attribute(): Template.Attribute | null {
-    const token = this.findTokenOfType(
-      "attribute",
-      "attribute-start",
-      "boolean-attribute",
-      "boolean-attribute-start",
-      "className-attribute-start",
-      "data-attribute-start",
-      "event-attribute-start",
-      "property-attribute-start",
-      "ref-attribute-start",
-      "text"
-    )
-
-    switch (token._tag) {
-      case "attribute":
-        return new Template.AttributeNode(token.name, token.value)
-      case "attribute-start":
-        return this.SparseAttrNode(token.name)
-      case "boolean-attribute":
-        return new Template.BooleanNode(token.name)
-      case "boolean-attribute-start":
-        return this.BooleanNode(token.name)
-      case "className-attribute-start":
-        return this.SparseClassNameNode()
-      case "data-attribute-start":
-        return this.DataNode()
-      case "event-attribute-start":
-        return this.EventNode(token.name)
-      case "property-attribute-start":
-        return this.PropertyNode(token.name)
-      case "ref-attribute-start":
-        return this.RefNode()
-      case "text":
-        return null
-    }
-  }
-
-  protected SparseAttrNode(name: string): Template.SparseAttrNode | Template.AttrPartNode | Template.BooleanNode {
-    const nodes: Array<Template.AttrPartNode | Template.TextNode> = []
-
-    while (this._lookahead !== null) {
-      const token = this.findTokenOfType("text", "part-token", "attribute-end")
-
-      if (token._tag === "text") {
-        if (token.value === "") continue
-        nodes.push(new Template.TextNode(token.value))
-      } else if (token._tag === "part-token") {
-        nodes.push(new Template.AttrPartNode(name, token.index))
-      } else {
-        if (nodes.length === 0) {
-          return new Template.BooleanNode(name)
-        }
-
-        break
-      }
-    }
-
-    if (nodes.length === 1) {
-      return this.addPart(nodes[0] as Template.AttrPartNode)
-    }
-
-    if (nodes.length === 0) {
-      return new Template.BooleanNode(name)
-    }
-
-    return this.addPart(new Template.SparseAttrNode(name, nodes))
-  }
-
-  protected BooleanNode(name: string): Template.BooleanPartNode {
-    // We know that the next token MUST be a part-token
-    const part = this.predictNextToken("part-token")
-
-    // We don't need to do anything with a boolean-attribute-end token, skip it
-    this.skipIfNextToken("boolean-attribute-end")
-
-    return this.addPart(new Template.BooleanPartNode(name, part.index))
-  }
-
-  protected SparseClassNameNode(): Template.SparseClassNameNode | Template.ClassNameNode {
-    const nodes: Array<Template.ClassNameNode> = []
-
-    while (this._lookahead !== null) {
-      const token = this.findTokenOfType("text", "part-token", "className-attribute-end")
-
-      if (token._tag === "text") {
-        if (token.value.trim() === "") continue
-        nodes.push(new Template.TextNode(token.value))
-      } else if (token._tag === "part-token") {
-        nodes.push(new Template.ClassNamePartNode(token.index))
-      } else {
-        break
-      }
-    }
-
-    if (nodes.length === 0) {
-      throw new SyntaxError("Expected at least one node in class name attribute")
-    }
-
-    if (nodes.length === 1) {
-      return this.addPart(nodes[0] as Template.ClassNamePartNode)
-    }
-
-    return this.addPart(new Template.SparseClassNameNode(nodes))
-  }
-
-  protected DataNode(): Template.DataPartNode {
-    const part = this.predictNextToken("part-token")
-
-    // We don't need to do anything with a data-attribute-end token, skip it
-    this.skipIfNextToken("data-attribute-end")
-
-    return this.addPart(new Template.DataPartNode(part.index))
-  }
-
-  protected EventNode(name: string): Template.EventPartNode {
-    const part = this.predictNextToken("part-token")
-
-    // We don't need to do anything with a event-attribute-end token, skip it
-    this.skipIfNextToken("event-attribute-end")
-
-    return this.addPart(new Template.EventPartNode(name, part.index))
-  }
-
-  protected PropertyNode(name: string): Template.PropertyPartNode {
-    const part = this.predictNextToken("part-token")
-
-    // We don't need to do anything with a property-attribute-end token, skip it
-    this.skipIfNextToken("property-attribute-end")
-
-    return this.addPart(new Template.PropertyPartNode(name, part.index))
-  }
-
-  protected RefNode(): Template.RefPartNode {
-    const part = this.predictNextToken("part-token")
-
-    // We don't need to do anything with a ref-attribute-end token, skip it
-    this.skipIfNextToken("ref-attribute-end")
-
-    return this.addPart(new Template.RefPartNode(part.index))
-  }
-
-  protected TextPartNode(): Template.TextPartNode {
-    const token = this.predictNextToken("part-token")
-
-    return this.addPart(new Template.TextPartNode(token.index))
-  }
-
-  protected Children(children: Array<Template.Node> = []): Array<Template.Node> {
-    let i = 0
-    while (this._lookahead) {
-      if (this._lookahead._tag === "closing-tag") {
-        this._lookahead = this.getNextToken()
-        this._skipWhitespace = true
-
-        break
-      } else if (
-        this._skipWhitespace &&
-        this._lookahead._tag === "text" &&
-        this._lookahead.value.trim() === ""
-      ) {
-        this._lookahead = this.getNextToken()
-      } else {
-        this._stack = Chunk.append(this._stack, i++)
-        const child = this.Node()
-        this._stack = Chunk.dropRight(this._stack, 1)
-
-        if (child) {
-          children.push(child)
-        } else {
-          break
-        }
-      }
-    }
-
-    return children
-  }
-
-  protected TextChildren(children: Array<Template.Text> = []): Array<Template.Text> {
-    while (this._lookahead !== null) {
-      const token = this.findTokenOfType("text", "part-token", "closing-tag")
-
-      if (token._tag === "text") {
-        if (token.value) children.push(new Template.TextNode(token.value))
-      } else if (token._tag === `part-token`) {
-        children.push(this.addPart(new Template.TextPartNode(token.index)))
-      } else {
-        this._skipWhitespace = true
-        break
-      }
-    }
-
-    return children
-  }
-
-  protected Comment(before: string): Template.Comment {
-    const nodes: Array<Template.CommentPartNode | Template.TextNode> = []
-
-    if (before) {
-      nodes.push(new Template.TextNode(before))
-    }
-
-    while (this._lookahead !== null) {
-      const token = this.findTokenOfType("part-token", "text", "comment-end")
-
-      if (token._tag === "part-token") {
-        nodes.push(new Template.CommentPartNode(token.index))
-      } else if (token._tag === "text") {
-        nodes.push(new Template.TextNode(token.value))
-      } else {
-        break
-      }
-    }
-
-    if (nodes.length === 1) {
-      const node = nodes[0]
-
-      if (node._tag === "comment-part") {
-        return new Template.CommentPartNode(node.index)
-      } else {
-        return new Template.CommentNode(node.value)
-      }
-    }
-
-    return this.addPart(new Template.SparseCommentNode(nodes))
-  }
-
-  protected findTokenOfType<T extends ReadonlyArray<Token["_tag"]>>(
-    ...tokenTypes: T
-  ): Extract<Token, { readonly _tag: T[number] }> {
-    const token = this._lookahead
-
-    if (token === null) {
-      throw new SyntaxError(
-        `Unexpected end of template. Expected one of types ${tokenTypes.join(", ")}.`
-      )
-    }
-
-    for (let i = 0; i < tokenTypes.length; i++) {
-      if (token._tag === tokenTypes[i]) {
-        this._lookahead = this.getNextToken()
-
-        return token as Extract<Token, { readonly _tag: T[number] }>
-      }
-    }
-
-    throw new SyntaxError(
-      `Unexpected token ${token._tag}. Expected one of types ${tokenTypes.join(", ")}.`
-    )
-  }
-
-  protected predictNextToken<T extends Token["_tag"]>(
-    type: T
-  ): Extract<Token, { readonly _tag: T }> {
-    const token = this._lookahead
-
-    if (token === null) {
-      throw new SyntaxError(`Unexpected end of template. Expected ${type}.`)
-    }
-
-    if (token._tag !== type) {
-      throw new SyntaxError(`Unexpected token ${token._tag}. Expected ${type}.`)
-    }
-
-    this._lookahead = this.getNextToken()
-
-    return token as Extract<Token, { readonly _tag: T }>
-  }
-
-  protected skipIfNextToken<T extends Token["_tag"]>(type: T): boolean {
-    const token = this._lookahead
-
-    if (token === null) {
-      return false
-    }
-
-    if (token._tag !== type) {
-      return false
-    }
-
-    this._lookahead = this.getNextToken()
-
-    return true
-  }
-
-  protected getNextToken(): Token | null {
-    const { done, value } = this._tokenStream.next()
-
-    if (done) {
-      return null
-    }
-
-    return value
-  }
-
-  protected addPart<A extends Template.PartNode | Template.SparsePartNode>(part: A): A {
-    this._parts.push([part, this._stack])
-
-    return part
-  }
-
-  protected addPartWithoutCurrent<A extends Template.PartNode>(part: A): A {
-    this._parts.push([part, dropLast(this._stack)])
-
-    return part
-  }
-}
-
-/**
- * @since 1.0.0
- */
-export const parser: Parser = globalValue(Symbol.for("./Parser.js"), () => new ParserImpl())
+export {
+  /**
+   * @since 1.0.0
+   */
+  parse,
+  /**
+   * @since 1.0.0
+   */
+  templateHash
+} from "./internal/parser.js"

package/src/Part.ts

@@ -22,6 +22,7 @@ export type Part =
   | PropertyPart
   | RefPart
   | TextPart
+  | PropertiesPart
 
 /**
  * @since 1.0.0
@@ -75,11 +76,11 @@ export interface DataPart {
 export interface EventPart {
   readonly _tag: "event"
   readonly name: string
-  readonly value: EventHandler<unknown, never> | null | undefined
+  readonly source: ElementSource<any>
+  readonly value: null
   readonly index: number
   readonly onCause: (cause: Cause<unknown>) => Effect<never, never, unknown>
-
-  readonly update: <R = never>(value: EventHandler<R, never> | null | undefined) => Effect<R | Scope, never, void>
+  readonly addEventListener: (handler: EventHandler<never, never, Event>) => void
 }
 
 /**
@@ -136,6 +137,17 @@ export interface NodePart {
   readonly update: (value: this["value"]) => Effect<Scope, never, void>
 }
 
+/**
+ * @since 1.0.0
+ */
+export interface PropertiesPart {
+  readonly _tag: "properties"
+  readonly value: Readonly<Record<string, any>> | null | undefined
+  readonly index: number
+
+  readonly update: (value: this["value"]) => Effect<Scope, never, void>
+}
+
 /**
  * @since 1.0.0
  */

package/src/Placeholder.ts

@@ -6,13 +6,13 @@ import "./internal/module-augmentation.js"
 import type { Fx } from "@typed/fx/Fx"
 import { isFx } from "@typed/fx/Fx"
 import * as RefSubject from "@typed/fx/RefSubject"
-import type { Scope } from "effect"
-import { Effect } from "effect"
+import * as Effect from "effect/Effect"
+import type * as Scope from "effect/Scope"
 
 /**
  * @since 1.0.0
  */
-export const PlaceholderTypeId = Symbol.for("./Placholder.js")
+export const PlaceholderTypeId = Symbol.for("@typed/template/Placholder")
 /**
  * @since 1.0.0
  */
@@ -64,7 +64,7 @@ export namespace Placeholder {
     if (isFx<R, E, A>(placeholder) || Effect.isEffect(placeholder)) {
       return RefSubject.make(placeholder as Fx<R, E, A>)
     } else {
-      return RefSubject.of(placeholder as A)
+      return RefSubject.of<A, E>(placeholder as A)
     }
   }
 }

package/src/Platform.ts

@@ -30,7 +30,7 @@ export function htmlResponse<R, E>(
       {
         ...CAMEL_CASE_CONTENT_TYPE,
         ...options,
-        headers: { ...HYPHENATED_CONTENT_TYPE, ...options?.headers }
+        headers: Headers.unsafeFromRecord({ ...HYPHENATED_CONTENT_TYPE, ...options?.headers })
       }
     )
   )
@@ -48,7 +48,7 @@ export function htmlResponseString(
     {
       ...CAMEL_CASE_CONTENT_TYPE,
       ...options,
-      headers: { ...HYPHENATED_CONTENT_TYPE, ...options?.headers }
+      headers: Headers.unsafeFromRecord({ ...HYPHENATED_CONTENT_TYPE, ...options?.headers })
     }
   )
 }

package/src/Render.ts

@@ -7,6 +7,7 @@ import { Document } from "@typed/dom/Document"
 import { RootElement } from "@typed/dom/RootElement"
 import * as Fx from "@typed/fx/Fx"
 import { type Rendered } from "@typed/wire"
+import type { Layer, Scope } from "effect"
 import * as Effect from "effect/Effect"
 import { attachRoot, renderTemplate } from "./internal/render.js"
 import { RenderContext } from "./RenderContext.js"
@@ -40,6 +41,10 @@ export function render<R, E, T extends RenderEvent | null>(
  */
 export function renderLayer<R, E, T extends RenderEvent | null>(
   rendered: Fx.Fx<R, E, T>
-) {
-  return Fx.drainLayer(Fx.switchMapCause(render(rendered), Effect.logError))
+): Layer.Layer<
+  Document | RenderContext | RootElement | Exclude<Exclude<R, RenderTemplate>, Scope.Scope>,
+  never,
+  never
+> {
+  return Fx.drainLayer(Fx.switchMapCause(render(rendered), (e) => Fx.fromEffect(Effect.logError(e))))
 }

package/src/RenderContext.ts

@@ -11,10 +11,13 @@ import type { Environment } from "@typed/environment"
 import { CurrentEnvironment } from "@typed/environment"
 import * as Idle from "@typed/fx/Idle"
 import type { Rendered } from "@typed/wire"
-import { Effect, Layer, Option } from "effect"
+import * as Effect from "effect/Effect"
+import * as Layer from "effect/Layer"
+import * as Option from "effect/Option"
 import * as Scope from "effect/Scope"
 import type { Entry } from "./Entry.js"
-import type { Part, SparsePart } from "./Part.js"
+
+// TODO: We should probably have a more explicit environment type between DOM/HTML rendering
 
 /**
  * The context in which templates are rendered within
@@ -54,7 +57,7 @@ export const RenderContext: Context.Tagged<RenderContext, RenderContext> = Conte
  * @since 1.0.0
  */
 export interface RenderQueue {
-  readonly add: (part: Part | SparsePart, task: () => void) => Effect.Effect<Scope.Scope, never, void>
+  readonly add: (part: unknown, task: () => void) => Effect.Effect<Scope.Scope, never, void>
 }
 
 /**
@@ -114,14 +117,14 @@ const buildWithCurrentEnvironment = (environment: Environment, skipRenderSchedul
 /**
  * @since 1.0.0
  */
-export const browser: (
+export const dom: (
   window: Window & GlobalThis,
   options?: DomServicesElementParams & { readonly skipRenderScheduling?: boolean }
 ) => Layer.Layer<never, never, RenderContext | CurrentEnvironment | DomServices> = (window, options) =>
   Layer.provideMerge(
     Layer.mergeAll(
       buildWithCurrentEnvironment(
-        "browser",
+        "dom",
         options?.skipRenderScheduling
       ),
       domServices(options)
@@ -146,8 +149,9 @@ export {
 }
 
 class RenderQueueImpl implements RenderQueue {
-  queue = new Map<Part | SparsePart, () => void>()
+  queue = new Map<unknown, () => void>()
   scheduled = false
+  run: Effect.Effect<Scope.Scope, never, void>
 
   constructor(
     readonly scope: Scope.Scope,
@@ -155,9 +159,11 @@ class RenderQueueImpl implements RenderQueue {
     readonly skipRenderScheduling: boolean = false
   ) {
     this.add.bind(this)
+
+    this.run = typeof requestAnimationFrame === "undefined" ? this.runIdle : this.runAnimationFrame
   }
 
-  add(part: Part | SparsePart, task: () => void) {
+  add(part: unknown, task: () => void) {
     if (this.skipRenderScheduling) return Effect.sync(task)
 
     return Effect.suspend(() => {
@@ -190,26 +196,20 @@ class RenderQueueImpl implements RenderQueue {
     )
   })
 
-  run: Effect.Effect<Scope.Scope, never, void> = Effect.suspend(() =>
-    Effect.flatMap(
+  runIdle: Effect.Effect<Scope.Scope, never, void> = Effect.suspend(() => {
+    return Effect.flatMap(
       Idle.whenIdle(this.options),
       (deadline) =>
         Effect.suspend(() => {
           const iterator = this.queue.entries()
 
-          while (Idle.shouldContinue(deadline)) {
-            const result = iterator.next()
-
-            if (result.done) break
-            else {
-              const [part, task] = result.value
-              this.queue.delete(part)
-              task()
-            }
+          while (Idle.shouldContinue(deadline) && this.runTask(iterator)) {
+            // Continue
           }
 
+          // If we have more work to do, schedule another run
           if (this.queue.size > 0) {
-            return this.run
+            return this.runIdle
           }
 
           this.scheduled = false
@@ -217,5 +217,33 @@ class RenderQueueImpl implements RenderQueue {
           return Effect.unit
         })
     )
+  })
+
+  runAnimationFrame: Effect.Effect<Scope.Scope, never, void> = Effect.zipRight(
+    Effect.asyncOption<never, never, void>((cb) => {
+      const id = requestAnimationFrame(() => cb(Effect.unit))
+      return Option.some(Effect.sync(() => cancelAnimationFrame(id)))
+    }),
+    Effect.sync(() => {
+      const iterator = this.queue.entries()
+
+      while (this.runTask(iterator)) {
+        // Continue
+      }
+
+      this.scheduled = false
+    })
   )
+
+  private runTask = (iterator: Iterator<[unknown, () => void]>) => {
+    const result = iterator.next()
+
+    if (result.done) return false
+    else {
+      const [part, task] = result.value
+      this.queue.delete(part)
+      task()
+      return true
+    }
+  }
 }