@typed/template 0.9.3 → 0.9.5

package/src/Test.ts

@@ -13,6 +13,7 @@ import * as Sink from "@typed/fx/Sink"
 import { type Rendered } from "@typed/wire"
 import { Layer } from "effect"
 import * as Cause from "effect/Cause"
+import type { DurationInput } from "effect/Duration"
 import * as Effect from "effect/Effect"
 import * as Either from "effect/Either"
 import * as Fiber from "effect/Fiber"
@@ -21,7 +22,7 @@ import * as ElementRef from "./ElementRef.js"
 import { ROOT_CSS_SELECTOR } from "./ElementSource.js"
 import { renderToHtmlString, serverLayer } from "./Html.js"
 import { hydrate, hydrateLayer } from "./Hydrate.js"
-import { adjustTime, isCommentWithValue } from "./internal/utils.js"
+import { adjustTime } from "./internal/utils.js"
 import { render, renderLayer } from "./Render.js"
 import type * as RenderContext from "./RenderContext.js"
 import type { RenderEvent } from "./RenderEvent.js"
@@ -60,6 +61,7 @@ export function testRender<E, R>(
   options?:
     & HappyDOMOptions
     & { readonly [K in keyof DomServicesElementParams]?: (document: Document) => DomServicesElementParams[K] }
+    & { renderTimeout?: DurationInput }
 ): Effect.Effect<
   TestRender<E>,
   never,
@@ -105,7 +107,10 @@ export function testRender<E, R>(
     yield* _(adjustTime(1))
 
     // Await the first render
-    yield* _(Fx.first(elementRef), Effect.race(Effect.delay(Effect.dieMessage(`Rendering taking too long`), 1000)))
+    yield* _(
+      Fx.first(elementRef),
+      Effect.race(Effect.delay(Effect.dieMessage(`Rendering taking too long`), options?.renderTimeout ?? 1000))
+    )
 
     return test
   })
@@ -215,18 +220,7 @@ export function testHydrate<R, E, Elements>(
     body.innerHTML = html
 
     const rendered = Array.from(body.childNodes)
-
-    // Remove the typed-start
-    if (isCommentWithValue(rendered[0], "typed-start")) {
-      rendered.shift()
-    }
-    // Remove the typed-end
-    if (isCommentWithValue(rendered[rendered.length - 1], "typed-end")) {
-      rendered.pop()
-    }
-
     const elements = f(rendered.length === 1 ? rendered[0] : rendered, window)
-
     const elementRef = yield* _(ElementRef.make())
     const errors = yield* _(RefSubject.make<ReadonlyArray<E>>(Effect.succeed([])))
     const fiber = yield* _(
@@ -235,11 +229,14 @@ export function testHydrate<R, E, Elements>(
       (x) =>
         x.run(Sink.make(
           (cause) =>
-            Cause.failureOrCause(cause).pipe(
-              Either.match({
-                onLeft: (error) => RefArray.append(errors, error),
-                onRight: (cause) => errors.onFailure(cause)
-              })
+            Effect.zipRight(
+              Effect.logError(cause),
+              Cause.failureOrCause(cause).pipe(
+                Either.match({
+                  onLeft: (error) => RefArray.append(errors, error),
+                  onRight: (cause) => errors.onFailure(cause)
+                })
+              )
             ),
           (rendered) => ElementRef.set(elementRef, rendered)
         )),

package/src/Vitest.ts

@@ -38,6 +38,38 @@ export function it<E, A>(
   )
 }
 
+it.only = function it<E, A>(
+  name: string,
+  test: () => Effect.Effect<A, E, Scope>,
+  options?: vitest.TestOptions
+) {
+  return vitest.it.only(
+    name,
+    () =>
+      test().pipe(
+        Effect.scoped,
+        Effect.runPromise
+      ),
+    options
+  )
+}
+
+it.skip = function it<E, A>(
+  name: string,
+  test: () => Effect.Effect<A, E, Scope>,
+  options?: vitest.TestOptions
+) {
+  return vitest.it.skip(
+    name,
+    () =>
+      test().pipe(
+        Effect.scoped,
+        Effect.runPromise
+      ),
+    options
+  )
+}
+
 /**
  * @since 1.0.0
  */
@@ -59,3 +91,41 @@ export function test<E, A>(
     options
   )
 }
+
+test.only = function test<E, A>(
+  name: string,
+  test: (options: {
+    readonly clock: TestClock.TestClock
+  }) => Effect.Effect<A, E, Scope | TestServices.TestServices>,
+  options?: vitest.TestOptions
+) {
+  return vitest.it.only(
+    name,
+    () =>
+      TestClock.testClockWith((clock) => test({ clock })).pipe(
+        Effect.provide(TestContext.TestContext),
+        Effect.scoped,
+        Effect.runPromise
+      ),
+    options
+  )
+}
+
+test.skip = function test<E, A>(
+  name: string,
+  test: (options: {
+    readonly clock: TestClock.TestClock
+  }) => Effect.Effect<A, E, Scope | TestServices.TestServices>,
+  options?: vitest.TestOptions
+) {
+  return vitest.it.skip(
+    name,
+    () =>
+      TestClock.testClockWith((clock) => test({ clock })).pipe(
+        Effect.provide(TestContext.TestContext),
+        Effect.scoped,
+        Effect.runPromise
+      ),
+    options
+  )
+}

package/src/internal/hydrate.ts

@@ -161,7 +161,7 @@ export function findRootChildNodes(where: HTMLElement): Array<Node> {
     }
   }
 
-  for (let i = length - 1; i >= start; i--) {
+  for (let i = length - 1; i >= Math.max(start, 0); i--) {
     const node = childNodes[i]
 
     if (node.nodeType === node.COMMENT_NODE && node.nodeValue === END) {

package/src/internal/parser.ts

@@ -287,10 +287,11 @@ class ParserImpl implements Parser {
       this._skipWhitespace = false
       return [this.addPartWithPrevious(new Template.NodePart(parseInt(next.match[2], 10)))]
     } else if ((next = this.chunk(getWhitespace))) { // Whitespace
-      return this._skipWhitespace ? [] : [new Template.TextNode(next.match[1])]
+      return this._skipWhitespace ? [] : (this.path.inc(), [new Template.TextNode(next.match[1])])
     } else if ((next = this.chunk(getTextUntilCloseBrace))) { // Text and parts
       return parseTextAndParts(next.match[1], (i) => this.addPartWithPrevious(new Template.NodePart(i)))
     } else {
+      this.path.inc()
       return [new Template.TextNode(this.nextChar())]
     }
   }
@@ -346,7 +347,7 @@ class ParserImpl implements Parser {
     const attributes = this.parseAttributes()
 
     this.path.push()
-    const children = this.parseTextChildren()
+    const children = this.parseTextChildren(tagName)
     this.path.pop()
 
     return new Template.TextOnlyElement(tagName, attributes, children || [])
@@ -516,11 +517,11 @@ class ParserImpl implements Parser {
     }
   }
 
-  private parseTextChildren(): Array<Template.Text> | null {
-    return this.parseArray(() => this.parseTextChild())
+  private parseTextChildren(tagName: string): Array<Template.Text> | null {
+    return this.parseArray(() => this.parseTextChild(tagName))
   }
 
-  private parseTextChild(): LoopDecision<Array<Template.Text>> {
+  private parseTextChild(tagName: string): LoopDecision<Array<Template.Text>> {
     const [parsed, matched] = this.parseTextUntilMany(textChildMatches)
     const text = parsed.trim()
 
@@ -533,7 +534,12 @@ class ParserImpl implements Parser {
 
         return text === "" ? Continue([part]) : Continue([new Template.TextNode(text), part])
       }
-      case "elementClose":
+      case "elementClose": {
+        this.consumeClosingTag(tagName)
+        return Break(
+          text ? [new Template.TextNode(text)] : undefined
+        )
+      }
       case "elementOpen": // In this case we make the assumption that you forgot to close this element
         return Break(
           text ? [new Template.TextNode(text)] : undefined

package/src/internal/parts.ts

@@ -334,9 +334,8 @@ export class TextPartImpl extends base("text") implements TextPart {
   // TODO: Make this properly
   static browser(document: Document, index: number, element: Element, ctx: RenderContext) {
     const comment = findHoleComment(element, index)
-    const text = comment.previousSibling && isText(comment.previousSibling)
-      ? comment.previousSibling
-      : document.createTextNode("")
+    const text = document.createTextNode("")
+    element.insertBefore(text, comment)
 
     return new TextPartImpl(
       index,

package/src/internal/render.ts

@@ -7,6 +7,7 @@ import { Effect, ExecutionStrategy, Exit, Runtime } from "effect"
 import type { Cause } from "effect/Cause"
 import type { Chunk } from "effect/Chunk"
 import * as Context from "effect/Context"
+import { hasProperty } from "effect/Predicate"
 import * as Scope from "effect/Scope"
 import { uncapitalize } from "effect/String"
 import type { Directive } from "../Directive.js"
@@ -41,7 +42,7 @@ import {
   TextPartImpl
 } from "./parts.js"
 import type { ParentChildNodes } from "./utils.js"
-import { findHoleComment, findPath } from "./utils.js"
+import { findPath } from "./utils.js"
 
 // TODO: We need to re-think hydration for dynamic lists, probably just markers should be fine
 
@@ -77,7 +78,7 @@ const RenderPartMap: RenderPartMap = {
     const element = node as HTMLElement | SVGElement
     const attr = createAttribute(document, element, templatePart.name)
     const renderable = values[templatePart.index]
-    let isSet = true
+    let isSet = false
     const setValue = (value: string | null | undefined) => {
       if (isNullOrUndefined(value)) {
         element.removeAttribute(templatePart.name)
@@ -147,10 +148,10 @@ const RenderPartMap: RenderPartMap = {
   },
   "comment-part": (templatePart, node, ctx) => {
     const { refCounter, renderContext, values } = ctx
-    const comment = findHoleComment(node as Element, templatePart.index)
+    const comment = node as Comment
     const renderable = values[templatePart.index]
     const setValue = (value: string | null | undefined) => {
-      comment.textContent = isNullOrUndefined(value) ? "" : String(value)
+      comment.nodeValue = isNullOrUndefined(value) ? "" : String(value)
     }
 
     return matchSettablePart(
@@ -242,7 +243,7 @@ const RenderPartMap: RenderPartMap = {
   "property": (templatePart, node, ctx) => {
     const element = node as HTMLElement | SVGElement
     const renderable = ctx.values[templatePart.index]
-    const setValue = (value: string | null | undefined) => {
+    const setValue = (value: unknown) => {
       if (isNullOrUndefined(value)) {
         delete (element as any)[templatePart.name]
       } else {
@@ -260,7 +261,6 @@ const RenderPartMap: RenderPartMap = {
   },
   "properties": (templatePart, node, ctx) => {
     const renderable = ctx.values[templatePart.index] as any as Record<string, any>
-
     if (isNullOrUndefined(renderable)) return null
     else if (Fx.isFx(renderable) || Effect.isEffect(renderable)) {
       throw new Error(`Properties Part must utilize an Record of renderable values.`)
@@ -407,11 +407,9 @@ const RenderPartMap: RenderPartMap = {
     const element = node as HTMLElement | SVGElement
     const attr = createAttribute(ctx.document, element, templatePart.name)
 
-    const setValue = (value: string | null | undefined, index: number) =>
-      Effect.suspend(() => {
-        values[index] = value || ""
-        return ctx.renderContext.queue.add(element, () => attr.value = values.join(""))
-      })
+    const setValue = (value: string | null | undefined, index: number) => {
+      values[index] = value ?? ""
+    }
 
     const effects: Array<Effect.Effect<void, any, any>> = []
 
@@ -429,7 +427,11 @@ const RenderPartMap: RenderPartMap = {
             new AttributePartImpl(
               templatePart.name,
               node.index,
-              ({ value }) => setValue(value, index),
+              ({ value }) =>
+                Effect.zipRight(
+                  ctx.renderContext.queue.add(element, () => setValue(value, index)),
+                  ctx.refCounter.release(node.index)
+                ),
               attr.value
             ),
           (f) => Effect.zipRight(ctx.renderContext.queue.add(element, f), ctx.refCounter.release(node.index)),
@@ -442,6 +444,11 @@ const RenderPartMap: RenderPartMap = {
       }
     }
 
+    if (effects.length === 0) {
+      attr.value = values.join("")
+      element.setAttributeNode(attr)
+    }
+
     return effects
   },
   "sparse-class-name": (templatePart, node, ctx) => {
@@ -465,11 +472,12 @@ const RenderPartMap: RenderPartMap = {
     const values = Array.from({ length: templatePart.nodes.length }, (): string => "")
     const comment = node as Comment
 
-    const setValue = (value: string | null | undefined, index: number) =>
-      Effect.suspend(() => {
-        values[index] = value || ""
-        return ctx.renderContext.queue.add(comment, () => comment.textContent = values.join(""))
-      })
+    const setValue = (value: string | null | undefined, index: number) => {
+      values[index] = value ?? ""
+    }
+    const flushValue = () => {
+      comment.data = values.join("")
+    }
 
     const effects: Array<Effect.Effect<void, any, any>> = []
 
@@ -482,11 +490,18 @@ const RenderPartMap: RenderPartMap = {
         const index = i
         const effect = matchSettablePart(
           renderable,
-          (value) => setValue(value, index),
+          (value) => {
+            setValue(value, index)
+            flushValue()
+          },
           () =>
             new CommentPartImpl(
               node.index,
-              ({ value }) => setValue(value, index),
+              ({ value }) => (setValue(value, index),
+                Effect.zipRight(
+                  ctx.renderContext.queue.add(comment, () => flushValue()),
+                  ctx.refCounter.release(node.index)
+                )),
               null
             ),
           (f) => Effect.zipRight(ctx.renderContext.queue.add(comment, f), ctx.refCounter.release(node.index)),
@@ -499,6 +514,10 @@ const RenderPartMap: RenderPartMap = {
       }
     }
 
+    if (effects.length === 0) {
+      flushValue()
+    }
+
     return effects
   },
   "text-part": (templatePart, node, ctx) => {
@@ -750,8 +769,6 @@ function removeChildren(where: HTMLElement, previous: Rendered) {
 }
 
 function replaceChildren(where: HTMLElement, wire: Rendered) {
-  console.log("replaceChildren", wire)
-
   where.replaceChildren(...getNodes(wire))
 }
 
@@ -805,7 +822,7 @@ function buildNode(document: Document, node: Template.Node, isSvgContext: boolea
     case "comment":
       return document.createComment(node.value)
     case "sparse-comment":
-      return document.createComment("")
+      return document.createComment(`hole${node.nodes.map((n) => n._tag === "text" ? "" : n.index).join("")}`)
     // Create placeholders for these elements
     case "comment-part":
     case "node":
@@ -914,7 +931,7 @@ function matchSettablePart(
     Directive: (directive) => {
       expect()
       const part = makePart()
-      return Effect.flatMap(directive(part), () => schedule(() => setValue(part.value)))
+      return runDirective(directive, part, setValue, schedule)
     },
     Otherwise: (otherwise) => {
       setValue(otherwise)
@@ -939,3 +956,16 @@ function matchRenderable(renderable: Renderable<any, any>, matches: {
     return matches.Otherwise(renderable)
   }
 }
+
+function runDirective(
+  directive: Directive<any, any>,
+  part: Part,
+  setValue: (value: any) => void,
+  schedule: (f: () => void) => Effect.Effect<void, never, Scope.Scope>
+): Effect.Effect<void, any, any> {
+  if (hasProperty(part, "update")) {
+    return directive({ ...part, update: (value: any) => schedule(() => setValue(value)) })
+  } else {
+    return Effect.flatMap(directive(part), () => schedule(() => setValue(part.value)))
+  }
+}