@tempots/dom 5.0.0

package/coverage/lcov.info

@@ -0,0 +1,57 @@
+TN:
+SF:src/components/OneOf.ts
+FN:10,(anonymous_0)
+FN:16,(anonymous_1)
+FN:24,(anonymous_2)
+FN:26,(anonymous_3)
+FN:38,(anonymous_4)
+FN:39,(anonymous_5)
+FN:42,(anonymous_6)
+FN:55,OneOf
+FNF:8
+FNH:4
+FNDA:7,(anonymous_0)
+FNDA:7,(anonymous_1)
+FNDA:7,(anonymous_2)
+FNDA:7,(anonymous_3)
+FNDA:0,(anonymous_4)
+FNDA:0,(anonymous_5)
+FNDA:0,(anonymous_6)
+FNDA:0,OneOf
+DA:1,8
+DA:6,8
+DA:9,8
+DA:11,7
+DA:12,7
+DA:16,7
+DA:17,7
+DA:18,7
+DA:19,7
+DA:20,7
+DA:21,7
+DA:22,7
+DA:23,7
+DA:24,7
+DA:25,7
+DA:26,7
+DA:27,7
+DA:28,7
+DA:29,7
+DA:30,7
+DA:31,7
+DA:32,7
+DA:35,0
+DA:38,7
+DA:39,0
+DA:40,0
+DA:41,0
+DA:42,0
+DA:55,8
+DA:56,0
+LF:30
+LH:24
+BRDA:25,0,0,7
+BRDA:25,0,1,0
+BRF:2
+BRH:1
+end_of_record

package/dist/index.js

@@ -0,0 +1,32 @@
+import { makeProviderMark, DOMContext } from './dom-context';
+import { Prop, Signal } from './prop';
+import { render } from './render';
+import { isEmptyElement } from './helpers/is-empty-element';
+import { handleTextInput } from './helpers/handle-text-input';
+import { handleAnchorClick } from './helpers/handle-anchor-click';
+import { applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable } from './components/animatable';
+import { AttributeImpl, Attribute } from './components/Attribute';
+import { BooleanAttributeImpl, BooleanAttribute } from './components/BooleanAttribute';
+import { ClassNameImpl, ClassName } from './components/ClassName';
+import { ConsumerImpl, Consumer, ProviderImpl, Provider } from './components/Provider';
+import { ElImpl, El } from './components/El';
+import { FadeIn, FadeInImpl } from './components/FadeIn';
+import { FadeOut, FadeOutImpl } from './components/FadeOut';
+import { For } from './components/For';
+import { FragmentImpl, Fragment } from './components/Fragment';
+import { HiddenWhenEmptyImpl, HiddenWhenEmpty } from './components/HiddenWhenEmpty';
+import { If, Unless, When } from './components/If';
+import { InnerHTMLImpl, InnerHTML } from './components/InnerHTML';
+import { Lifecycle, LifecycleImpl } from './components/Lifecycle';
+import { MatchImpl, Match } from './components/Match';
+import { NotEmpty } from './components/NotEmpty';
+import { OnImpl, On } from './components/On';
+import { OnRemoveImpl, OnRemove } from './components/OnRemove';
+import { OneOfImpl, OneOf } from './components/OneOf';
+import { PortalImpl, Portal } from './components/Portal';
+import { PropertyImpl, Property } from './components/Property';
+import { RepeatImpl, Repeat } from './components/Repeat';
+import { ShowImpl, Show } from './components/Show';
+import { TextImpl, Text } from './components/Text';
+import { TextContentImpl, TextContent } from './components/TextContent';
+export { applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable, AttributeImpl, Attribute, BooleanAttributeImpl, BooleanAttribute, ClassNameImpl, ClassName, ConsumerImpl, Consumer, DOMContext, ElImpl, El, FadeIn, FadeInImpl, FadeOut, FadeOutImpl, For, FragmentImpl, Fragment, handleTextInput, handleAnchorClick, HiddenWhenEmptyImpl, HiddenWhenEmpty, If, InnerHTMLImpl, InnerHTML, isEmptyElement, Lifecycle, LifecycleImpl, makeProviderMark, MatchImpl, Match, NotEmpty, OnImpl, On, OnRemoveImpl, OnRemove, OneOfImpl, OneOf, PortalImpl, Portal, Prop, PropertyImpl, Property, ProviderImpl, Provider, render, RepeatImpl, Repeat, ShowImpl, Show, Signal, TextImpl, Text, TextContentImpl, TextContent, Unless, When };

package/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: '@happy-dom/jest-environment',
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@tempots/dom",
+  "version": "5.0.0",
+  "main": "dist/index.js",
+  "scripts": {
+    "watch": "tsc --watch",
+    "build": "tsc",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "coverage": "jest --coverage",
+    "npm:publish": "yarn publish --access public"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@happy-dom/jest-environment": "^9.1.7",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.11",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "eslint": "^8.0.1",
+    "eslint-config-standard-with-typescript": "^34.0.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "happy-dom": "^9.1.0",
+    "jest": "^29.5.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fponticelli/tempots-dom.git"
+  },
+  "author": "Franco Ponticelli",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/fponticelli/tempots-dom/issues"
+  },
+  "homepage": "https://github.com/fponticelli/tempots-dom#readme"
+}

package/src/clean.ts

@@ -0,0 +1,2 @@
+export type Clear = (removeTree: boolean) => void
+export type Clean = () => void

package/src/components/Attribute.ts

@@ -0,0 +1,23 @@
+import { type DOMContext } from '../dom-context'
+import { type Signal } from '../prop'
+import { type Clear } from '../clean'
+import { type Renderable } from '../renderable'
+import { subscribeToSignal } from './Text'
+
+export class AttributeImpl implements Renderable {
+  constructor(private readonly name: string, private readonly value: Signal<string>) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const [set, clear] = ctx.createAttribute(this.name, this.value.get())
+    return subscribeToSignal(this.value, set, clear)
+  }
+}
+
+export interface AttributeProps {
+  name: string
+  value: Signal<string>
+}
+
+export function Attribute({ name, value }: AttributeProps): Renderable {
+  return new AttributeImpl(name, value)
+}

package/src/components/BooleanAttribute.ts

@@ -0,0 +1,23 @@
+import { type DOMContext } from '../dom-context'
+import { type Signal } from '../prop'
+import { type Clear } from '../clean'
+import { type Renderable } from '../renderable'
+import { subscribeToSignal } from './Text'
+
+export class BooleanAttributeImpl implements Renderable {
+  constructor(private readonly name: string, private readonly value: Signal<boolean>) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const [set, clear] = ctx.createBooleanAttribute(this.name, this.value.get())
+    return subscribeToSignal(this.value, set, clear)
+  }
+}
+
+export interface BooleanAttributeProps {
+  name: string
+  value: Signal<boolean>
+}
+
+export function BooleanAttribute({ name, value }: BooleanAttributeProps): Renderable {
+  return new BooleanAttributeImpl(name, value)
+}

package/src/components/ClassName.ts

@@ -0,0 +1,22 @@
+import { type Signal } from '../prop'
+import { type Renderable } from '../renderable'
+import { type Clear } from '../clean'
+import { subscribeToSignal } from './Text'
+import { type DOMContext } from '../dom-context'
+
+export class ClassNameImpl implements Renderable {
+  constructor(private readonly cls: Signal<string> | Signal<string | undefined>) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const [set, clear] = ctx.createClass(this.cls.get() ?? '')
+    return subscribeToSignal(this.cls.map(v => v ?? ''), set, clear)
+  }
+}
+
+export interface ClassNameProps {
+  value: Signal<string> | Signal<string | undefined>
+}
+
+export function ClassName({ value }: ClassNameProps): Renderable {
+  return new ClassNameImpl(value)
+}

package/src/components/El.ts

@@ -0,0 +1,27 @@
+import { type DOMContext } from '../dom-context'
+import { type Clear } from '../clean'
+import { type Renderable } from '../renderable'
+import { type JSX } from '../jsx'
+import { makeRenderables } from '../jsx-runtime'
+
+export class ElImpl implements Renderable {
+  constructor(private readonly tagName: string, private readonly children: Renderable[]) { }
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const newCtx = ctx.makeElement(this.tagName)
+    const clears = this.children.map(child => child.appendTo(newCtx))
+    return (removeTree: boolean) => {
+      newCtx.requestClear(removeTree, () => {
+        clears.forEach(clear => { clear(false) })
+      })
+    }
+  }
+}
+
+export interface ElProps {
+  tagName: string
+  children?: JSX.DOMNode
+}
+
+export function El({ tagName, children }: ElProps): Renderable {
+  return new ElImpl(tagName, makeRenderables(children))
+}

package/src/components/FadeIn.ts

@@ -0,0 +1,59 @@
+import { Clear } from "../clean"
+import { DOMContext } from "../dom-context"
+import { Renderable } from "../renderable"
+import { getComputedAnimatable, Animatable, applyInterpolatedAnimatable, applyAnimatable } from "./animatable"
+
+export class FadeInImpl implements Renderable {
+  constructor(
+    private readonly end: Animatable,
+    private readonly start: Animatable | undefined,
+    private readonly duration: number,
+    private readonly delay: number
+  ) { }
+
+  appendTo(ctx: DOMContext): Clear {
+    const el = ctx.getElement()
+    const start = (() => {
+      if (this.start != null) {
+        applyAnimatable(el, this.start)
+        return this.start
+      } else {
+        return getComputedAnimatable(el, this.end)
+      }
+    })()
+    const startTime = Date.now() + this.delay
+    const { duration, end } = this
+    let nextFrameId: null | number = null
+    function frame() {
+      const now = Date.now()
+      if (now < startTime) {
+        nextFrameId = requestAnimationFrame(frame)
+        return
+      }
+
+      const progress = Math.min((now - startTime) / duration, 1)
+      applyInterpolatedAnimatable(el, start, end, progress)
+      if (progress < 1) {
+        nextFrameId = requestAnimationFrame(frame)
+      } else {
+        nextFrameId = null
+      }
+    }
+    frame()
+
+    return (_: boolean) => {
+      if (nextFrameId != null) cancelAnimationFrame(nextFrameId)
+    }
+  }
+}
+
+export interface FadeInProps extends Animatable {
+  start?: Animatable,
+  duration?: number,
+  delay?: number
+}
+
+export function FadeIn(props: FadeInProps): Renderable {
+  const { start, duration, delay, ...end } = props
+  return new FadeInImpl(end, start, duration ?? 200, delay ?? 0)
+}

package/src/components/FadeOut.ts

@@ -0,0 +1,47 @@
+import { Clear } from "../clean"
+import { DOMContext } from "../dom-context"
+import { Renderable } from "../renderable"
+import { getComputedAnimatable, Animatable, applyInterpolatedAnimatable } from "./animatable"
+
+export class FadeOutImpl implements Renderable {
+  constructor(
+    private readonly end: Animatable,
+    private readonly duration: number,
+    private readonly delay: number
+  ) { }
+
+  appendTo(ctx: DOMContext): Clear {
+    const el = ctx.getElement()
+    const { duration, end } = this
+
+    return ctx.delayClear((removeTree, clear) => {
+      const start = getComputedAnimatable(el, this.end)
+      const startTime = Date.now() + this.delay
+      function frame() {
+        const now = Date.now()
+        if (now < startTime) {
+          requestAnimationFrame(frame)
+          return
+        }
+        const progress = Math.min((now - startTime) / duration, 1)
+        applyInterpolatedAnimatable(el, start, end, progress)
+        if (progress < 1) {
+          requestAnimationFrame(frame)
+        } else {
+          clear()
+        }
+      }
+      requestAnimationFrame(frame)
+    })
+  }
+}
+
+export interface FadeOutProps extends Animatable {
+  duration?: number,
+  delay?: number
+}
+
+export function FadeOut(props: FadeOutProps): Renderable {
+  const { duration, delay, ...end } = props
+  return new FadeOutImpl(end, duration ?? 200, delay ?? 0)
+}

package/src/components/For.ts

@@ -0,0 +1,22 @@
+import { type Signal } from '../prop'
+import { RepeatImpl } from './Repeat'
+import { type JSX, makeRenderable } from '../jsx-runtime'
+import { FragmentImpl } from './Fragment'
+import { OnRemoveImpl } from './OnRemove'
+
+export interface ForProps<T> {
+  of: Signal<T[]>
+  children?: (value: Signal<T>, index: number) => JSX.DOMNode
+}
+
+// <For of={values}>{(value) => <span>{value}</span>}</For>
+export function For<T>({ of, children: render }: ForProps<T>): JSX.DOMNode {
+  const times = of.map(v => v.length)
+  return new RepeatImpl(times, (index: number) => {
+    const value = of.at(index)
+    return new FragmentImpl([
+      makeRenderable(render?.(value, index)),
+      new OnRemoveImpl(value.clean)
+    ])
+  })
+}

package/src/components/Fragment.ts

@@ -0,0 +1,19 @@
+import { type Renderable } from '../renderable'
+import { type Clear } from '../clean'
+import { type DOMContext } from '../dom-context'
+import { type JSX } from '../jsx'
+import { makeRenderables } from '../jsx-runtime'
+
+export class FragmentImpl implements Renderable {
+  constructor(private readonly children: Renderable[]) { }
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const clears = this.children.map(child => child.appendTo(ctx))
+    return (removeTree: boolean) => {
+      clears.forEach(clear => { clear(removeTree) })
+    }
+  }
+}
+
+export function Fragment({ children }: { children: JSX.DOMNode }): Renderable {
+  return new FragmentImpl(makeRenderables(children))
+}

package/src/components/HiddenWhenEmpty.ts

@@ -0,0 +1,16 @@
+import { type Renderable } from '../renderable'
+import { type DOMContext } from '../dom-context'
+import { type Clear } from '../clean'
+
+export class HiddenWhenEmptyImpl implements Renderable {
+  appendTo(ctx: DOMContext): Clear {
+    ctx.setStyle(':empty', 'display: none')
+    return (removeTree) => {
+      if (removeTree) ctx.setStyle(':empty', null)
+    }
+  }
+}
+
+export function HiddenWhenEmpty(): HiddenWhenEmptyImpl {
+  return new HiddenWhenEmptyImpl()
+}

package/src/components/If.ts

@@ -0,0 +1,44 @@
+import { type JSX } from '../jsx'
+import { type Signal } from '../prop'
+import { OneOfImpl } from './OneOf'
+
+export interface IfProps {
+  is: Signal<boolean>
+  then?: JSX.DOMNode
+  otherwise?: JSX.DOMNode
+}
+
+export function If({ is, then, otherwise }: IfProps): JSX.DOMNode {
+  return new OneOfImpl(
+    is.map(v => v ? [1, true] as [1, true] : [2, false] as [2, false]),
+    {
+      1: () => then,
+      2: () => otherwise
+    }
+  )
+}
+
+export interface WhenProps {
+  is: Signal<boolean>
+  children?: JSX.DOMNode
+}
+
+export function When({ is, children }: WhenProps): JSX.DOMNode {
+  return new OneOfImpl(
+    is.map(v => v ? [1, true] as [1, true] : [2, false] as [2, false]),
+    {
+      1: () => children,
+      2: () => null
+    }
+  )
+}
+
+export function Unless({ is, children }: WhenProps): JSX.DOMNode {
+  return new OneOfImpl(
+    is.map(v => v ? [1, true] as [1, true] : [2, false] as [2, false]),
+    {
+      1: () => null,
+      2: () => children
+    }
+  )
+}

package/src/components/InnerHTML.ts

@@ -0,0 +1,31 @@
+import { type Signal } from '../prop'
+import { type Clear } from '../clean'
+import { type DOMContext } from '../dom-context'
+import { type Renderable } from '../renderable'
+
+export class InnerHTMLImpl implements Renderable {
+  constructor(private readonly html: Signal<string> | Signal<string | undefined>) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const el = ctx.getElement()
+    const previous = el.innerHTML
+    el.innerHTML = this.html.get() ?? ''
+    const cancel = this.html.subscribe(value => {
+      el.innerHTML = value ?? ''
+    })
+    return (removeTree: boolean) => {
+      cancel()
+      if (removeTree) {
+        el.innerHTML = previous
+      }
+    }
+  }
+}
+
+export interface InnerHTMLProps {
+  html: Signal<string> | Signal<string | undefined>
+}
+
+export function InnerHTML({ html }: InnerHTMLProps): InnerHTMLImpl {
+  return new InnerHTMLImpl(html)
+}

package/src/components/Lifecycle.ts

@@ -0,0 +1,24 @@
+import { type Clear } from '../clean'
+import { type DOMContext } from '../dom-context'
+import { type Renderable } from '../renderable'
+
+export class LifecycleImpl implements Renderable {
+  constructor(private readonly onMount: (el: HTMLElement) => void, private readonly onUnmount: (el: HTMLElement) => void) { }
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    this.onMount(ctx.getElement())
+
+    return () => {
+      this.onUnmount(ctx.getElement())
+    }
+  }
+}
+
+export interface LifecycleProps {
+  onMount?: (el: HTMLElement) => void
+  onUnmount?: (el: HTMLElement) => void
+}
+
+export function Lifecycle({ onMount, onUnmount }: LifecycleProps): Renderable {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  return new LifecycleImpl(onMount ?? (() => { }), onUnmount ?? (() => { }))
+}

package/src/components/Match.ts

@@ -0,0 +1,67 @@
+import { type Signal } from '../prop'
+import { type DOMContext } from '../dom-context'
+import { type AnyKey } from './OneOf'
+import { type JSX, makeRenderable } from '../jsx-runtime'
+import { type Clear } from '../clean'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class MatchImpl<T extends { [_ in K]: any }, K extends keyof T> {
+  constructor(
+    private readonly on: Signal<T>,
+    private readonly using: K,
+    private readonly matches: {
+      [KIND in T[K]]: (
+        _: Signal<T & { [KK in K]: KIND extends T[KK] ? KIND : never }>
+      ) => JSX.DOMNode
+    }
+  ) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    let newCtx = ctx.makeReference()
+    const value = this.on.get()
+    let key = value[this.using]
+    let derived = this.on.map(v => v)
+    let renderable = makeRenderable(this.matches[key](derived))
+    let clear = renderable.appendTo(newCtx)
+    const cancel = this.on.subscribe(newValue => {
+      const newKey = newValue[this.using]
+      if (newKey === key) return
+      newCtx.requestClear(true, () => {
+        clear(true)
+        derived.clean()
+        key = newKey
+        derived = this.on.map(v => v)
+        newCtx = newCtx.makeReference()
+        renderable = makeRenderable(this.matches[key](derived))
+        clear = renderable.appendTo(newCtx)
+      })
+    })
+
+    return (removeTree: boolean) => {
+      newCtx.requestClear(removeTree, () => {
+        cancel()
+        derived.clean()
+        clear(removeTree)
+      })
+    }
+  }
+}
+
+export type MatchProps<T extends { [_ in K]: AnyKey }, K extends keyof T> = {
+  on: Signal<T>
+  using: K
+} & {
+  matches: {
+    [KIND in T[K]]: (
+      _: Signal<T & { [KK in K]: KIND extends T[KK] ? KIND : never }>
+    ) => JSX.DOMNode
+  }
+}
+
+export function Match<T extends { [_ in K]: AnyKey }, K extends keyof T>({
+  on,
+  using,
+  matches
+}: MatchProps<T, K>): JSX.DOMNode {
+  return new MatchImpl(on, using, matches)
+}

package/src/components/NotEmpty.tsx

@@ -0,0 +1,33 @@
+/** @jsxImportSource .. */
+import { type Signal } from '../prop'
+import { If } from './If'
+import { type AnyKey } from './OneOf'
+import { type JSX } from '../jsx-runtime'
+
+export interface NotEmptyProps<T> {
+  on: Signal<T>
+  whenEmpty?: JSX.DOMNode
+  display: JSX.DOMNode
+}
+
+function isEmpty(obj: Record<AnyKey, unknown>): boolean {
+  return Object.keys(obj).length === 0
+}
+
+// <NotEmpty on={maybevalue} whenEmpty={<span>nothing to show</span>}}>{value => value.toText()}</NotEmpty>
+export function NotEmpty<T extends unknown[] | Record<AnyKey, unknown>>({
+  on,
+  display,
+  whenEmpty
+}: NotEmptyProps<T>): JSX.DOMNode {
+  return (
+    <If
+      is={on.map((v: T) =>
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Array.isArray(v) ? v.length > 0 : v != null && !isEmpty(v as any)
+      )}
+      then={display}
+      otherwise={whenEmpty}
+    />
+  )
+}

package/src/components/On.ts

@@ -0,0 +1,22 @@
+import { type Renderable } from '../renderable'
+import { type Clear } from '../clean'
+import { type DOMContext } from '../dom-context'
+
+export type OnFn<T> = (value: T) => void
+
+export class OnImpl<T> implements Renderable {
+  constructor(private readonly name: string, private readonly handler: OnFn<T>) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    return ctx.createHandler(this.name, this.handler)
+  }
+}
+
+export interface OnProps<T> {
+  name: string
+  handler: OnFn<T>
+}
+
+export function On<T>({ name, handler }: OnProps<T>): Renderable {
+  return new OnImpl(name, handler)
+}

package/src/components/OnRemove.ts

@@ -0,0 +1,20 @@
+import { type Clear } from '../clean'
+import { type Renderable } from '../renderable'
+
+export class OnRemoveImpl implements Renderable {
+  constructor(private readonly clear: Clear) { }
+
+  readonly appendTo = (): Clear => {
+    return (removeTree: boolean) => {
+      this.clear(removeTree)
+    }
+  }
+}
+
+export interface OnRemoveProps {
+  clear: Clear
+}
+
+export function OnRemove(props: OnRemoveProps): OnRemoveImpl {
+  return new OnRemoveImpl(props.clear)
+}