@typed/template 0.1.0

package/src/RenderTemplate.ts

@@ -0,0 +1,88 @@
+/**
+ * @since 1.0.0
+ */
+
+import * as Context from "@typed/context"
+import * as Fx from "@typed/fx/Fx"
+import type { Rendered } from "@typed/wire"
+import type * as Effect from "effect/Effect"
+import type { Scope } from "effect/Scope"
+import type { ElementRef } from "./ElementRef"
+import type { Placeholder } from "./Placeholder"
+import type { Renderable } from "./Renderable"
+import type { RenderEvent } from "./RenderEvent"
+import type { TemplateInstance } from "./TemplateInstance"
+
+/**
+ * @since 1.0.0
+ */
+export interface RenderTemplate {
+  <Values extends ReadonlyArray<Renderable<any, any>>, T extends Rendered = Rendered>(
+    templateStrings: TemplateStringsArray,
+    values: Values,
+    ref?: ElementRef<T>
+  ): Effect.Effect<
+    Scope | Placeholder.Context<readonly [] extends Values ? never : Values[number]>,
+    never,
+    TemplateInstance<
+      Placeholder.Error<Values[number]>,
+      T
+    >
+  >
+}
+
+/**
+ * @since 1.0.0
+ */
+export const RenderTemplate: Context.Tagged<RenderTemplate, RenderTemplate> = Context.Tagged<
+  RenderTemplate,
+  RenderTemplate
+>(
+  "./RenderTemplate"
+)
+
+/**
+ * @since 1.0.0
+ */
+export interface TemplateFx<R, E, T extends Rendered = Rendered> extends
+  Fx.Fx<
+    RenderTemplate | Scope | R,
+    E,
+    RenderEvent
+  >
+{
+  readonly instance: Effect.Effect<
+    RenderTemplate | Scope | R,
+    never,
+    TemplateInstance<
+      E,
+      T
+    >
+  >
+}
+
+/**
+ * @since 1.0.0
+ */
+export function html<const Values extends ReadonlyArray<Renderable<any, any>>>(
+  template: TemplateStringsArray,
+  ...values: Values
+): TemplateFx<Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>> {
+  const instance = RenderTemplate.withEffect((render) => render(template, values))
+
+  return Object.assign(Fx.fromFxEffect(instance), { instance })
+}
+
+/**
+ * @since 1.0.0
+ */
+export function as<T extends Rendered = Rendered>(ref: ElementRef<T>) {
+  return function html<const Values extends ReadonlyArray<Renderable<any, any>>>(
+    template: TemplateStringsArray,
+    ...values: Values
+  ): TemplateFx<Placeholder.Context<Values[number]>, Placeholder.Error<Values[number]>, T> {
+    const instance = RenderTemplate.withEffect((render) => render(template, values, ref))
+
+    return Object.assign(Fx.fromFxEffect(instance), { instance })
+  }
+}

package/src/Renderable.ts

@@ -0,0 +1,34 @@
+/**
+ * @since 1.0.0
+ */
+import type { Fx } from "@typed/fx/Fx"
+import type { Rendered } from "@typed/wire"
+import type { Effect } from "effect/Effect"
+import type { Placeholder } from "./Placeholder"
+import type { RenderEvent } from "./RenderEvent"
+
+/**
+ * @since 1.0.0
+ */
+export type Renderable<R = never, E = never> =
+  | Renderable.Value
+  | { readonly [key: string]: Renderable.Value } // TODO: Should we manage data attributes this way?
+  | Placeholder<R, E, any>
+  | Effect<R, E, any>
+  | Fx<R, E, any>
+  | ReadonlyArray<Renderable<R, E>>
+
+/**
+ * @since 1.0.0
+ */
+export namespace Renderable {
+  /**
+   * @since 1.0.0
+   */
+  export type Primitive = string | number | boolean | null | undefined | void | ReadonlyArray<Primitive>
+
+  /**
+   * @since 1.0.0
+   */
+  export type Value = Primitive | Rendered | RenderEvent
+}

package/src/Template.ts

@@ -0,0 +1,284 @@
+/**
+ * @since 1.0.0
+ */
+import type { Chunk } from "effect/Chunk"
+
+/**
+ * @since 1.0.0
+ */
+export class Template {
+  readonly _tag = "template"
+
+  constructor(
+    readonly nodes: ReadonlyArray<Node>,
+    readonly hash: string,
+    // Parts are a array of Parts to the respective path from the root node to access it during
+    readonly parts: ReadonlyArray<readonly [part: PartNode | SparsePartNode, path: Chunk<number>]>
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export type ParentNode = ElementNode | SelfClosingElementNode | TextOnlyElement
+
+/**
+ * @since 1.0.0
+ */
+export type Node =
+  | ElementNode
+  | SelfClosingElementNode
+  | TextOnlyElement
+  | TextNode
+  | NodePart
+  | Comment
+
+/**
+ * @since 1.0.0
+ */
+export type PartNode =
+  | AttrPartNode
+  | BooleanPartNode
+  | ClassNamePartNode
+  | DataPartNode
+  | EventPartNode
+  | NodePart
+  | PropertyPartNode
+  | RefPartNode
+  | TextPartNode
+  | CommentPartNode
+
+/**
+ * @since 1.0.0
+ */
+export type SparsePartNode = SparseAttrNode | SparseClassNameNode | SparseCommentNode
+
+/**
+ * @since 1.0.0
+ */
+export class ElementNode {
+  readonly _tag = "element"
+  constructor(
+    readonly tagName: string,
+    readonly attributes: Array<Attribute>,
+    readonly children: Array<Node>
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class NodePart {
+  readonly _tag = "node"
+  constructor(readonly index: number) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class SelfClosingElementNode {
+  readonly _tag = "self-closing-element"
+  constructor(
+    readonly tagName: string,
+    readonly attributes: Array<Attribute>
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class TextOnlyElement {
+  readonly _tag = "text-only-element"
+  constructor(
+    readonly tagName: string,
+    readonly attributes: Array<Attribute>,
+    readonly children: Array<Text>
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export type Attribute =
+  | AttributeNode
+  | AttrPartNode
+  | SparseAttrNode
+  | BooleanNode
+  | BooleanPartNode
+  | ClassNameNode
+  | SparseClassNameNode
+  | DataPartNode
+  | EventPartNode
+  | PropertyPartNode
+  | RefPartNode
+
+/**
+ * @since 1.0.0
+ */
+export class AttributeNode {
+  readonly _tag = "attribute" as const
+  constructor(
+    readonly name: string,
+    readonly value: string
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class AttrPartNode {
+  readonly _tag = "attr" as const
+  constructor(
+    readonly name: string,
+    readonly index: number
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class SparseAttrNode {
+  readonly _tag = "sparse-attr" as const
+  constructor(
+    readonly name: string,
+    readonly nodes: Array<AttrPartNode | TextNode>
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class BooleanNode {
+  readonly _tag = "boolean" as const
+  constructor(readonly name: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class BooleanPartNode {
+  readonly _tag = "boolean-part" as const
+  constructor(
+    readonly name: string,
+    readonly index: number
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export type ClassNameNode = TextNode | ClassNamePartNode
+
+/**
+ * @since 1.0.0
+ */
+export class ClassNamePartNode {
+  readonly _tag = "className-part" as const
+  constructor(readonly index: number) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class SparseClassNameNode {
+  readonly _tag = "sparse-class-name" as const
+
+  constructor(readonly nodes: Array<ClassNameNode>) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class DataPartNode {
+  readonly _tag = "data" as const
+
+  constructor(readonly index: number) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class EventPartNode {
+  readonly _tag = "event" as const
+
+  constructor(
+    readonly name: string,
+    readonly index: number
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class PropertyPartNode {
+  readonly _tag = "property" as const
+
+  constructor(
+    readonly name: string,
+    readonly index: number
+  ) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class RefPartNode {
+  readonly _tag = "ref" as const
+
+  constructor(readonly index: number) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export type Text = TextNode | TextPartNode
+
+/**
+ * @since 1.0.0
+ */
+export class TextNode {
+  readonly _tag = "text" as const
+
+  constructor(readonly value: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class TextPartNode {
+  readonly _tag = "text-part" as const
+
+  constructor(readonly index: number) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export type Comment = CommentNode | CommentPartNode | SparseCommentNode
+
+/**
+ * @since 1.0.0
+ */
+export class CommentNode {
+  readonly _tag = "comment" as const
+
+  constructor(readonly value: string) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class CommentPartNode {
+  readonly _tag = "comment-part" as const
+
+  constructor(readonly index: number) {}
+}
+
+/**
+ * @since 1.0.0
+ */
+export class SparseCommentNode {
+  readonly _tag = "sparse-comment" as const
+
+  constructor(readonly nodes: Array<TextNode | CommentPartNode>) {}
+}

package/src/TemplateInstance.ts

@@ -0,0 +1,83 @@
+/**
+ * @since 1.0.0
+ */
+
+import type * as Fx from "@typed/fx/Fx"
+import { FxEffectBase } from "@typed/fx/internal/protos"
+import type * as Versioned from "@typed/fx/Versioned"
+import type { Rendered } from "@typed/wire"
+import type { NoSuchElementException } from "effect/Cause"
+import type * as Effect from "effect/Effect"
+import { type ElementRef, ElementRefTypeId } from "./ElementRef"
+import type { Placeholder } from "./Placeholder"
+import type { RenderEvent } from "./RenderEvent"
+
+/**
+ * @since 1.0.0
+ */
+export const TemplateInstanceTypeId = Symbol.for("./TemplateInstance")
+/**
+ * @since 1.0.0
+ */
+export type TemplateInstanceTypeId = typeof TemplateInstanceTypeId
+
+/**
+ * @since 1.0.0
+ */
+export interface TemplateInstance<E, T extends Rendered = Rendered>
+  extends Versioned.Versioned<never, never, never, E, RenderEvent, never, E | NoSuchElementException, T>
+{
+  readonly [TemplateInstanceTypeId]: TemplateInstanceTypeId
+
+  readonly query: ElementRef<T>["query"]
+
+  readonly events: ElementRef<T>["events"]
+
+  readonly elements: ElementRef<T>["elements"]
+
+  readonly dispatchEvent: ElementRef<T>["dispatchEvent"]
+}
+
+/**
+ * @since 1.0.0
+ */
+export function TemplateInstance<T extends Rendered = Rendered, E = never>(
+  events: Fx.Fx<never, E, RenderEvent>,
+  ref: ElementRef<T>
+): TemplateInstance<E, T> {
+  return new TemplateInstanceImpl(events, ref) as any
+}
+
+// @ts-expect-error placeholder issues
+class TemplateInstanceImpl<E, T extends Rendered>
+  extends FxEffectBase<never, E, RenderEvent, never, E | NoSuchElementException, T>
+  implements Omit<TemplateInstance<E, T>, keyof Placeholder<never, E, RenderEvent>>
+{
+  readonly [TemplateInstanceTypeId]: TemplateInstanceTypeId = TemplateInstanceTypeId
+  query: TemplateInstance<E, T>["query"]
+  events: TemplateInstance<E, T>["events"]
+  elements: TemplateInstance<E, T>["elements"]
+  dispatchEvent: TemplateInstance<E, T>["dispatchEvent"]
+  version: Effect.Effect<never, never, number>
+
+  constructor(
+    readonly i0: Fx.Fx<never, E, RenderEvent>,
+    readonly i1: ElementRef<T>
+  ) {
+    super()
+
+    this.query = this.i1.query
+    this.events = this.i1.events
+    this.elements = this.i1.elements
+    this.dispatchEvent = this.i1.dispatchEvent
+    this.version = this.i1[ElementRefTypeId].version
+  }
+
+  toFx(): Fx.Fx<never, E, RenderEvent> {
+    return this.i0
+  }
+
+  toEffect(): Effect.Effect<never, E | NoSuchElementException, T> {
+    return this.i1
+  }
+}

package/src/Test.ts

@@ -0,0 +1,151 @@
+/**
+ * @since 1.0.0
+ */
+import type { Document } from "@typed/dom/Document"
+import type { DomServices, DomServicesElementParams } from "@typed/dom/DomServices"
+import type { GlobalThis } from "@typed/dom/GlobalThis"
+import type { Window } from "@typed/dom/Window"
+import type { CurrentEnvironment } from "@typed/environment"
+import type { Computed } from "@typed/fx/Computed"
+import type { Filtered } from "@typed/fx/Filtered"
+import * as Fx from "@typed/fx/Fx"
+import * as RefArray from "@typed/fx/RefArray"
+import * as Sink from "@typed/fx/Sink"
+import * as Cause from "effect/Cause"
+import * as Effect from "effect/Effect"
+import * as Either from "effect/Either"
+import * as Fiber from "effect/Fiber"
+import type * as Scope from "effect/Scope"
+import * as happyDOM from "happy-dom"
+import type IHappyDOMOptions from "happy-dom/lib/window/IHappyDOMOptions.js"
+import * as ElementRef from "./ElementRef"
+import { ROOT_CSS_SELECTOR } from "./ElementSource"
+import { adjustTime } from "./internal/utils"
+import { render } from "./Render"
+import * as RenderContext from "./RenderContext"
+import type { RenderEvent } from "./RenderEvent"
+import type { RenderTemplate } from "./RenderTemplate"
+
+// TODO: Instrument RenderTemplate to log info about when specific values are hanging for too long
+// TODO: Input events
+// TODO: Form events
+// TODO: keyboard events
+// TODO: drag and drop events
+
+/**
+ * @since 1.0.0
+ */
+export interface TestRender<E> {
+  readonly window: Window & GlobalThis & Pick<happyDOM.Window, "happyDOM">
+  readonly document: Document
+  readonly elementRef: ElementRef.ElementRef
+  readonly errors: Computed<never, never, ReadonlyArray<E>>
+  readonly lastError: Filtered<never, never, E>
+  readonly interrupt: Effect.Effect<never, never, void>
+  readonly makeEvent: (type: string, eventInitDict?: EventInit) => Event
+  readonly makeCustomEvent: <A>(type: string, eventInitDict?: CustomEventInit<A>) => CustomEvent<A>
+  readonly dispatchEvent: (options: EventOptions) => Effect.Effect<never, Cause.NoSuchElementException, void>
+  readonly click: (options?: Omit<EventOptions, "event">) => Effect.Effect<never, Cause.NoSuchElementException, void>
+}
+
+/**
+ * @since 1.0.0
+ */
+export function testRender<R, E>(
+  fx: Fx.Fx<R, E, RenderEvent>,
+  options?:
+    & IHappyDOMOptions
+    & { readonly [K in keyof DomServicesElementParams]?: (document: Document) => DomServicesElementParams[K] }
+): Effect.Effect<
+  Scope.Scope | Exclude<Exclude<R, RenderTemplate>, RenderContext.RenderContext | CurrentEnvironment | DomServices>,
+  never,
+  TestRender<E>
+> {
+  return Effect.gen(function*(_) {
+    const window = makeWindow(options)
+    const elementRef = yield* _(ElementRef.make())
+    const errors = yield* _(RefArray.make<never, never, E>(Effect.succeed([])))
+    const fiber = yield* _(
+      fx,
+      render,
+      Fx.run(Sink.Sink(
+        (cause) =>
+          Cause.failureOrCause(cause).pipe(
+            Either.match({
+              onLeft: (error) => RefArray.append(errors, error),
+              onRight: (cause) => errors.onFailure(cause)
+            })
+          ),
+        (rendered) => ElementRef.set(elementRef, rendered)
+      )),
+      Effect.forkScoped,
+      Effect.provide(RenderContext.browser(window, { skipRenderScheduling: true }))
+    )
+
+    const test: TestRender<E> = {
+      window,
+      document: window.document,
+      elementRef,
+      errors,
+      lastError: RefArray.last(errors),
+      interrupt: Fiber.interrupt(fiber),
+      makeEvent: (type, init) => new window.Event(type, init),
+      makeCustomEvent: (type, init) => new window.CustomEvent(type, init),
+      dispatchEvent: (options) => dispatchEvent(test, options),
+      click: (options) => click(test, options)
+    }
+
+    // Allow our fibers to start
+    yield* _(adjustTime(1))
+    yield* _(adjustTime(1))
+
+    return test
+  })
+}
+
+/**
+ * @since 1.0.0
+ */
+export type EventOptions = {
+  readonly event: string
+  readonly selector?: string
+  readonly eventInit?: EventInit
+}
+
+// TODO: Find more events to add here
+const NON_BUBBLING_EVENTS = new Set(["focus", "blur"])
+
+/**
+ * @since 1.0.0
+ */
+export function dispatchEvent<E>(
+  { elementRef, makeEvent }: Pick<TestRender<E>, "elementRef" | "makeEvent">,
+  options: EventOptions
+) {
+  const selector = options.selector ?? ROOT_CSS_SELECTOR
+
+  return elementRef.query(selector).dispatchEvent(
+    makeEvent(options.event, {
+      bubbles: !NON_BUBBLING_EVENTS.has(selector),
+      cancelable: true,
+      composed: false,
+      ...options?.eventInit
+    })
+  )
+}
+
+/**
+ * @since 1.0.0
+ */
+export function click<E>(
+  rendered: Pick<TestRender<E>, "elementRef" | "makeEvent">,
+  options?: Omit<EventOptions, "event">
+) {
+  return dispatchEvent(rendered, { event: "click", ...options, eventInit: { bubbles: true, ...options?.eventInit } })
+}
+
+// internals
+
+function makeWindow(options?: IHappyDOMOptions) {
+  return new happyDOM.Window(options) as any as Window & GlobalThis & Pick<happyDOM.Window, "happyDOM">
+}