@typed/template 0.1.0

package/package.json

@@ -0,0 +1,242 @@
+{
+  "name": "@typed/template",
+  "version": "0.1.0",
+  "description": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tylors/typed.git"
+  },
+  "sideEffects": [],
+  "author": "Typed contributors",
+  "dependencies": {
+    "@effect/platform": "^0.31.1",
+    "@effect/schema": "0.49.4",
+    "effect": "2.0.0-next.56",
+    "typed-query-selector": "^2.11.0",
+    "udomdiff": "^1.1.0",
+    "@typed/context": "0.1.0",
+    "@typed/environment": "0.1.0",
+    "@typed/dom": "0.1.0",
+    "@typed/fx": "1.18.0",
+    "@typed/wire": "0.2.0"
+  },
+  "peerDependencies": {
+    "effect": "2.0.0-next.56"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/dts/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/dts/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./Directive": {
+      "types": "./dist/dts/Directive.d.ts",
+      "import": "./dist/esm/Directive.js",
+      "default": "./dist/cjs/Directive.js"
+    },
+    "./ElementRef": {
+      "types": "./dist/dts/ElementRef.d.ts",
+      "import": "./dist/esm/ElementRef.js",
+      "default": "./dist/cjs/ElementRef.js"
+    },
+    "./ElementSource": {
+      "types": "./dist/dts/ElementSource.d.ts",
+      "import": "./dist/esm/ElementSource.js",
+      "default": "./dist/cjs/ElementSource.js"
+    },
+    "./Entry": {
+      "types": "./dist/dts/Entry.d.ts",
+      "import": "./dist/esm/Entry.js",
+      "default": "./dist/cjs/Entry.js"
+    },
+    "./EventHandler": {
+      "types": "./dist/dts/EventHandler.d.ts",
+      "import": "./dist/esm/EventHandler.js",
+      "default": "./dist/cjs/EventHandler.js"
+    },
+    "./Html": {
+      "types": "./dist/dts/Html.d.ts",
+      "import": "./dist/esm/Html.js",
+      "default": "./dist/cjs/Html.js"
+    },
+    "./HtmlChunk": {
+      "types": "./dist/dts/HtmlChunk.d.ts",
+      "import": "./dist/esm/HtmlChunk.js",
+      "default": "./dist/cjs/HtmlChunk.js"
+    },
+    "./Hydrate": {
+      "types": "./dist/dts/Hydrate.d.ts",
+      "import": "./dist/esm/Hydrate.js",
+      "default": "./dist/cjs/Hydrate.js"
+    },
+    "./Many": {
+      "types": "./dist/dts/Many.d.ts",
+      "import": "./dist/esm/Many.js",
+      "default": "./dist/cjs/Many.js"
+    },
+    "./Meta": {
+      "types": "./dist/dts/Meta.d.ts",
+      "import": "./dist/esm/Meta.js",
+      "default": "./dist/cjs/Meta.js"
+    },
+    "./Parser": {
+      "types": "./dist/dts/Parser.d.ts",
+      "import": "./dist/esm/Parser.js",
+      "default": "./dist/cjs/Parser.js"
+    },
+    "./Part": {
+      "types": "./dist/dts/Part.d.ts",
+      "import": "./dist/esm/Part.js",
+      "default": "./dist/cjs/Part.js"
+    },
+    "./Placeholder": {
+      "types": "./dist/dts/Placeholder.d.ts",
+      "import": "./dist/esm/Placeholder.js",
+      "default": "./dist/cjs/Placeholder.js"
+    },
+    "./Platform": {
+      "types": "./dist/dts/Platform.d.ts",
+      "import": "./dist/esm/Platform.js",
+      "default": "./dist/cjs/Platform.js"
+    },
+    "./Render": {
+      "types": "./dist/dts/Render.d.ts",
+      "import": "./dist/esm/Render.js",
+      "default": "./dist/cjs/Render.js"
+    },
+    "./RenderContext": {
+      "types": "./dist/dts/RenderContext.d.ts",
+      "import": "./dist/esm/RenderContext.js",
+      "default": "./dist/cjs/RenderContext.js"
+    },
+    "./RenderEvent": {
+      "types": "./dist/dts/RenderEvent.d.ts",
+      "import": "./dist/esm/RenderEvent.js",
+      "default": "./dist/cjs/RenderEvent.js"
+    },
+    "./RenderTemplate": {
+      "types": "./dist/dts/RenderTemplate.d.ts",
+      "import": "./dist/esm/RenderTemplate.js",
+      "default": "./dist/cjs/RenderTemplate.js"
+    },
+    "./Renderable": {
+      "types": "./dist/dts/Renderable.d.ts",
+      "import": "./dist/esm/Renderable.js",
+      "default": "./dist/cjs/Renderable.js"
+    },
+    "./Template": {
+      "types": "./dist/dts/Template.d.ts",
+      "import": "./dist/esm/Template.js",
+      "default": "./dist/cjs/Template.js"
+    },
+    "./TemplateInstance": {
+      "types": "./dist/dts/TemplateInstance.d.ts",
+      "import": "./dist/esm/TemplateInstance.js",
+      "default": "./dist/cjs/TemplateInstance.js"
+    },
+    "./Test": {
+      "types": "./dist/dts/Test.d.ts",
+      "import": "./dist/esm/Test.js",
+      "default": "./dist/cjs/Test.js"
+    },
+    "./Token": {
+      "types": "./dist/dts/Token.d.ts",
+      "import": "./dist/esm/Token.js",
+      "default": "./dist/cjs/Token.js"
+    },
+    "./Tokenizer": {
+      "types": "./dist/dts/Tokenizer.d.ts",
+      "import": "./dist/esm/Tokenizer.js",
+      "default": "./dist/cjs/Tokenizer.js"
+    },
+    "./Vitest": {
+      "types": "./dist/dts/Vitest.d.ts",
+      "import": "./dist/esm/Vitest.js",
+      "default": "./dist/cjs/Vitest.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "Directive": [
+        "./dist/dts/Directive.d.ts"
+      ],
+      "ElementRef": [
+        "./dist/dts/ElementRef.d.ts"
+      ],
+      "ElementSource": [
+        "./dist/dts/ElementSource.d.ts"
+      ],
+      "Entry": [
+        "./dist/dts/Entry.d.ts"
+      ],
+      "EventHandler": [
+        "./dist/dts/EventHandler.d.ts"
+      ],
+      "Html": [
+        "./dist/dts/Html.d.ts"
+      ],
+      "HtmlChunk": [
+        "./dist/dts/HtmlChunk.d.ts"
+      ],
+      "Hydrate": [
+        "./dist/dts/Hydrate.d.ts"
+      ],
+      "Many": [
+        "./dist/dts/Many.d.ts"
+      ],
+      "Meta": [
+        "./dist/dts/Meta.d.ts"
+      ],
+      "Parser": [
+        "./dist/dts/Parser.d.ts"
+      ],
+      "Part": [
+        "./dist/dts/Part.d.ts"
+      ],
+      "Placeholder": [
+        "./dist/dts/Placeholder.d.ts"
+      ],
+      "Platform": [
+        "./dist/dts/Platform.d.ts"
+      ],
+      "Render": [
+        "./dist/dts/Render.d.ts"
+      ],
+      "RenderContext": [
+        "./dist/dts/RenderContext.d.ts"
+      ],
+      "RenderEvent": [
+        "./dist/dts/RenderEvent.d.ts"
+      ],
+      "RenderTemplate": [
+        "./dist/dts/RenderTemplate.d.ts"
+      ],
+      "Renderable": [
+        "./dist/dts/Renderable.d.ts"
+      ],
+      "Template": [
+        "./dist/dts/Template.d.ts"
+      ],
+      "TemplateInstance": [
+        "./dist/dts/TemplateInstance.d.ts"
+      ],
+      "Test": [
+        "./dist/dts/Test.d.ts"
+      ],
+      "Token": [
+        "./dist/dts/Token.d.ts"
+      ],
+      "Tokenizer": [
+        "./dist/dts/Tokenizer.d.ts"
+      ],
+      "Vitest": [
+        "./dist/dts/Vitest.d.ts"
+      ]
+    }
+  }
+}

package/src/Directive.ts

@@ -0,0 +1,114 @@
+/**
+ * @since 1.0.0
+ */
+
+import * as Effect from "effect/Effect"
+import type * as Part from "./Part"
+import type { Placeholder } from "./Placeholder"
+
+/**
+ * @since 1.0.0
+ */
+export const DirectiveTypeId = Symbol.for(".Directive")
+/**
+ * @since 1.0.0
+ */
+export type DirectiveTypeId = typeof DirectiveTypeId
+
+/**
+ * @since 1.0.0
+ */
+export interface Directive<R, E> extends Placeholder<R, E, unknown> {
+  readonly [DirectiveTypeId]: DirectiveTypeId
+
+  (part: Part.Part): Effect.Effect<R, E, unknown>
+}
+
+/**
+ * @since 1.0.0
+ */
+export function Directive<R, E>(
+  directive: (part: Part.Part) => Effect.Effect<R, E, unknown>
+): Directive<R, E> {
+  return Object.assign((p: Part.Part) => directive(p), {
+    [DirectiveTypeId]: DirectiveTypeId
+  }) as Directive<R, E>
+}
+
+const withTag = <T extends Part.Part["_tag"]>(tag: T) =>
+<R, E>(
+  directive: (part: Extract<Part.Part, { readonly _tag: T }>) => Effect.Effect<R, E, unknown>
+): Directive<R, E> =>
+  Directive((part) =>
+    part._tag === tag ? directive(part as any) : Effect.logDebug(`Expected ${tag} Part but received ${part._tag}`)
+  )
+
+/**
+ * @since 1.0.0
+ */
+export const attribute: <R, E>(
+  directive: (part: Part.AttributePart) => Effect.Effect<R, E, unknown>
+) => Directive<R, E> = withTag("attribute")
+
+/**
+ * @since 1.0.0
+ */
+export const boolean: <R, E>(directive: (part: Part.BooleanPart) => Effect.Effect<R, E, unknown>) => Directive<R, E> =
+  withTag("boolean")
+
+/**
+ * @since 1.0.0
+ */
+export const className: <R, E>(
+  directive: (part: Part.ClassNamePart) => Effect.Effect<R, E, unknown>
+) => Directive<R, E> = withTag("className")
+
+/**
+ * @since 1.0.0
+ */
+export const data: <R, E>(directive: (part: Part.DataPart) => Effect.Effect<R, E, unknown>) => Directive<R, E> =
+  withTag("data")
+
+/**
+ * @since 1.0.0
+ */
+export const event: <R, E>(directive: (part: Part.EventPart) => Effect.Effect<R, E, unknown>) => Directive<R, E> =
+  withTag("event")
+
+/**
+ * @since 1.0.0
+ */
+export const property: <R, E>(directive: (part: Part.PropertyPart) => Effect.Effect<R, E, unknown>) => Directive<R, E> =
+  withTag("property")
+
+/**
+ * @since 1.0.0
+ */
+export const ref: <R, E>(directive: (part: Part.RefPart) => Effect.Effect<R, E, unknown>) => Directive<R, E> = withTag(
+  "ref"
+)
+
+/**
+ * @since 1.0.0
+ */
+export const comment: <R, E>(directive: (part: Part.CommentPart) => Effect.Effect<R, E, unknown>) => Directive<R, E> =
+  withTag("comment")
+
+/**
+ * @since 1.0.0
+ */
+export const text: <R, E>(directive: (part: Part.TextPart) => Effect.Effect<R, E, unknown>) => Directive<R, E> =
+  withTag("text")
+
+/**
+ * @since 1.0.0
+ */
+export const node: <R, E>(directive: (part: Part.NodePart) => Effect.Effect<R, E, unknown>) => Directive<R, E> =
+  withTag("node")
+
+/**
+ * @since 1.0.0
+ */
+export function isDirective<R, E>(renderable: unknown): renderable is Directive<R, E> {
+  return typeof renderable === "function" && DirectiveTypeId in (renderable as any)
+}

package/src/ElementRef.ts

@@ -0,0 +1,123 @@
+/**
+ * @since 1.0.0
+ */
+import type { Fx } from "@typed/fx/Fx"
+import { compact } from "@typed/fx/Fx"
+import { FxEffectBase } from "@typed/fx/internal/protos"
+import * as RefSubject from "@typed/fx/RefSubject"
+import type { Versioned } from "@typed/fx/Versioned"
+import { type Rendered } from "@typed/wire"
+import type { Scope } from "effect"
+import { Effect, Option } from "effect"
+import type { NoSuchElementException } from "effect/Cause"
+import { dual } from "effect/Function"
+import type { DefaultEventMap } from "./ElementSource"
+import { ElementSource, getElements } from "./ElementSource"
+import { adjustTime } from "./internal/utils"
+import type { Placeholder } from "./Placeholder"
+
+export const ElementRefTypeId = Symbol.for("./ElementRef")
+export type ElementRefTypeId = typeof ElementRefTypeId
+
+/**
+ * A reference to a rendered element.
+ * @since 1.0.0
+ */
+export interface ElementRef<T extends Rendered = Rendered>
+  extends Versioned<never, never, never, never, T, never, NoSuchElementException, T>
+{
+  readonly [ElementRefTypeId]: RefSubject.RefSubject<never, never, Option.Option<T>>
+
+  readonly query: ElementSource<T>["query"]
+  readonly events: ElementSource<T>["events"]
+  readonly elements: ElementSource<T>["elements"]
+  readonly dispatchEvent: ElementSource<T>["dispatchEvent"]
+}
+
+const strictEqual = Option.getEquivalence((a, b) => a === b)
+
+/**
+ * @since 1.0.0
+ */
+export function make<T extends Rendered = Rendered>(): Effect.Effect<Scope.Scope, never, ElementRef<T>> {
+  return Effect.map(
+    RefSubject.of(Option.none<T>(), strictEqual),
+    (ref) => new ElementRefImpl(ref) as any as ElementRef<T>
+  )
+}
+
+/**
+ * @since 1.0.0
+ */
+export function of<T extends Rendered>(rendered: T): Effect.Effect<Scope.Scope, never, ElementRef<T>> {
+  return Effect.map(
+    RefSubject.of(Option.some<T>(rendered), strictEqual),
+    (ref) => new ElementRefImpl(ref) as any as ElementRef<T>
+  )
+}
+
+// @ts-expect-error placeholder issues
+class ElementRefImpl<T extends Rendered> extends FxEffectBase<never, never, T, never, NoSuchElementException, T>
+  implements
+    Omit<ElementRef<T>, keyof Placeholder<never, never, T> | keyof Placeholder<never, NoSuchElementException, T>>
+{
+  readonly [ElementRefTypeId]: RefSubject.RefSubject<never, never, Option.Option<T>>
+
+  private source: ElementSource<
+    T,
+    DefaultEventMap<T>
+  >
+
+  readonly query: ElementRef<T>["query"]
+  readonly events: ElementRef<T>["events"]
+  readonly elements: ElementRef<T>["elements"]
+  readonly version: ElementRef<T>["version"]
+  readonly dispatchEvent: ElementRef<T>["dispatchEvent"]
+
+  constructor(readonly ref: RefSubject.RefSubject<never, never, Option.Option<T>>) {
+    super()
+    this[ElementRefTypeId] = ref
+    this.source = ElementSource(RefSubject.compact(ref))
+    this.query = this.source.query
+    this.events = this.source.events
+    this.elements = this.source.elements
+    this.dispatchEvent = this.source.dispatchEvent
+    this.version = ref.version
+  }
+
+  protected toFx(): Fx<never, never, T> {
+    return compact(this.ref)
+  }
+
+  protected toEffect(): Effect.Effect<never, NoSuchElementException, T> {
+    return Effect.flatten(this.ref.get)
+  }
+}
+
+/**
+ * @since 1.0.0
+ */
+export const set: {
+  <A extends Rendered>(value: A): (elementRef: ElementRef<A>) => Effect.Effect<never, never, A>
+  <A extends Rendered>(elementRef: ElementRef<A>, value: A): Effect.Effect<never, never, A>
+} = dual(2, function set<A extends Rendered>(elementRef: ElementRef<A>, value: A) {
+  return Effect.as(elementRef[ElementRefTypeId].set(Option.some(value)), value)
+})
+
+/**
+ * @since 1.0.0
+ */
+export function dispatchEvent<T extends Rendered>(ref: ElementRef<T>, event: Event) {
+  return ref.pipe(
+    Effect.flatMap((rendered) => {
+      const elements = getElements(rendered)
+      if (elements.length === 0) return Option.none()
+      // TODO: How should we manage multiple elements?
+      return Effect.sync(() => elements[0].dispatchEvent(event))
+    }),
+    // Allow changes to take place
+    Effect.zipRight(adjustTime(1)),
+    // Allow additional fibers to start
+    Effect.zipRight(adjustTime(1))
+  )
+}