@tempots/dom 5.0.0 → 5.0.1

package/coverage/lcov.info

@@ -1,57 +0,0 @@
-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/jest.config.js

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

package/src/clean.ts

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

package/src/components/Attribute.ts

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,33 +0,0 @@
-/** @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

@@ -1,22 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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)
-}

package/src/components/OneOf.ts

@@ -1,57 +0,0 @@
-import { Prop, type Signal } from '../prop'
-import { type Clear } from '../clean'
-import { type DOMContext } from '../dom-context'
-import { type Renderable } from '../renderable'
-import { type JSX } from '../jsx'
-import { makeRenderable } from '../jsx-runtime'
-
-export type AnyKey = string | number | symbol
-export class OneOfImpl<T extends [AnyKey, unknown]> implements Renderable {
-  constructor (
-    private readonly match: Signal<T>,
-    private readonly cases: {
-      [KK in T[0]]: (value: Signal<T[1]>) => JSX.DOMNode
-    }) { }
-
-  readonly appendTo = (ctx: DOMContext): Clear => {
-    const pair: [T[0], T[1]] = this.match.get()
-    let key = pair[0]
-    const value = pair[1]
-    const stableCtx = ctx.makeReference()
-    let prop = new Prop(value)
-    let newCtx = stableCtx.makeReference()
-    let clear = makeRenderable(this.cases[key](prop)).appendTo(newCtx)
-    const cancel = this.match.subscribe(([newKey, newValue]) => {
-      if (newKey !== key) {
-        newCtx.requestClear(true, () => {
-          newCtx = stableCtx.makeReference()
-          key = newKey
-          prop.clean()
-          prop = new Prop(newValue)
-          clear(true)
-          clear = makeRenderable(this.cases[key](prop)).appendTo(newCtx)
-        })
-      } else {
-        prop.set(newValue)
-      }
-    })
-    return (removeTree: boolean) => {
-      newCtx.requestClear(removeTree, () => {
-        cancel()
-        prop.clean()
-        stableCtx.requestClear(removeTree, () => { })
-      })
-    }
-  }
-}
-
-export type OneOfProps<T extends [AnyKey, unknown]> = {
-  match: Signal<T>
-} & {
-  [KK in T[0]]: (value: Signal<T[1]>) => JSX.DOMNode
-}
-
-// <OneOf match={counter.map(v => v % 2 == 0 ? [1, "odd"] : [2, "even"])} 1={t => <b>{t}</b>} 2={t => <i>{t}</i>} /
-export function OneOf<T extends [AnyKey, unknown]> (props: OneOfProps<T>): JSX.DOMNode {
-  return new OneOfImpl(props.match, props)
-}

package/src/components/Portal.ts

@@ -1,30 +0,0 @@
-import { render } from '../render'
-import { type Clear } from '../clean'
-import { type DOMContext } from '../dom-context'
-import { type Renderable } from '../renderable'
-import { type JSX } from '../jsx'
-import { makeRenderable } from '../jsx-runtime'
-
-export class PortalImpl implements Renderable {
-  constructor(
-    private readonly selector: string,
-    private readonly children: JSX.DOMNode
-  ) { }
-
-  appendTo(ctx: DOMContext): Clear {
-    const element = ctx.getDocument().querySelector(this.selector)
-    if (element === null) {
-      throw new Error(`Cannot find element by selector: ${this.selector}`)
-    }
-    return render(makeRenderable(this.children), element as HTMLElement)
-  }
-}
-
-export interface PortalProps {
-  selector: string
-  children?: JSX.DOMNode
-}
-
-export function Portal(props: PortalProps): JSX.DOMNode {
-  return new PortalImpl(props.selector, props.children)
-}