@tempots/dom 5.0.0

package/src/components/OneOf.ts

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

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

package/src/components/Property.ts

@@ -0,0 +1,23 @@
+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 PropertyImpl<T> implements Renderable {
+  constructor(private readonly name: string, private readonly value: Signal<T>) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const [set, clear] = ctx.createProperty(this.name, this.value.get())
+    return subscribeToSignal(this.value, set, clear)
+  }
+}
+
+export interface PropertyProps<T> {
+  name: string
+  value: Signal<T>
+}
+
+export function Property<T>({ name, value }: PropertyProps<T>): Renderable {
+  return new PropertyImpl(name, value)
+}

package/src/components/Provider.ts

@@ -0,0 +1,53 @@
+import { type Clear } from '../clean'
+import { type DOMContext, type ProviderMark } from '../dom-context'
+import { type Renderable } from '../renderable'
+import { type JSX } from '../jsx'
+import { makeRenderable } from '../jsx-runtime'
+
+export class ProviderImpl<T> implements Renderable {
+  constructor(private readonly mark: ProviderMark<T>, private readonly provider: T, private readonly children: JSX.DOMNode) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const newCtx = ctx.withProvider(this.mark, this.provider)
+    const clear = makeRenderable(this.children).appendTo(newCtx)
+    return (removeTree: boolean) => {
+      newCtx.requestClear(removeTree, () => {
+        clear(removeTree)
+      })
+    }
+  }
+}
+
+export interface ProviderProps<T> {
+  mark: ProviderMark<T>
+  value: T
+  children?: JSX.DOMNode
+}
+
+export function Provider<T>({ mark, value, children }: ProviderProps<T>): JSX.DOMNode {
+  return new ProviderImpl(mark, value, children)
+}
+
+export class ConsumerImpl<T> implements Renderable {
+  constructor(private readonly mark: ProviderMark<T>, private readonly children: (provider: T) => JSX.DOMNode) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const provider: T = ctx.getProvider(this.mark)
+    if (provider == null) {
+      throw new Error('No provider found for mark')
+    }
+    const clear = makeRenderable(this.children(provider)).appendTo(ctx)
+    return (removeTree: boolean) => {
+      clear(removeTree)
+    }
+  }
+}
+
+export interface ConsumerProps<T> {
+  mark: ProviderMark<T>
+  children?: (provider: T) => JSX.DOMNode
+}
+
+export function Consumer<T>({ mark, children }: ConsumerProps<T>): JSX.DOMNode {
+  return new ConsumerImpl(mark, children ?? (() => []))
+}

package/src/components/Repeat.ts

@@ -0,0 +1,46 @@
+import { type Signal } from '../prop'
+import { type Clear } from '../clean'
+import { type DOMContext } from '../dom-context'
+import { type Renderable } from '../renderable'
+import { Fragment } from './Fragment'
+
+export class RepeatImpl implements Renderable {
+  constructor(
+    private readonly times: Signal<number>,
+    private readonly children: (index: number) => Renderable
+  ) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const newCtx = ctx.makeReference()
+    const count = this.times.get()
+    const clears = new Array<Clear>(count)
+    for (let i = 0; i < count; i++) {
+      clears[i] = this.children(i).appendTo(newCtx)
+    }
+    const cancel = this.times.subscribe(
+      (newCount) => {
+        while (newCount < clears.length) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          clears.pop()!(true)
+        }
+        for (let i = clears.length; i < newCount; i++) {
+          clears[i] = this.children(i).appendTo(newCtx)
+        }
+      }
+    )
+
+    return (removeTree: boolean) => {
+      newCtx.requestClear(removeTree, () => {
+        cancel()
+        clears.forEach(clear => { clear(removeTree) })
+      })
+    }
+  }
+}
+
+export interface RepeatProps {
+  times: Signal<number>
+  children?: (index: number) => Renderable
+}
+
+export function Repeat(props: RepeatProps): Renderable { return new RepeatImpl(props.times, props.children ?? (() => Fragment({ children: [] }))) }

package/src/components/Show.tsx

@@ -0,0 +1,35 @@
+/** @jsxImportSource .. */
+import { type Signal } from '../prop'
+import { type Renderable } from '../renderable'
+import { type JSX } from '../jsx'
+import { type Clear } from '../clean'
+import { type DOMContext } from '../dom-context'
+import { If } from './If'
+import { makeRenderable } from '../jsx-runtime'
+
+export type Condition<T> =
+  | Signal<T | null | undefined>
+  | Signal<T | undefined>
+  | Signal<T | null>
+  | Signal<T>
+
+export class ShowImpl<T> implements Renderable {
+  constructor(private readonly on: Condition<T>, private readonly otherwise: JSX.DOMNode, private readonly children: (value: Signal<NonNullable<T>>) => JSX.DOMNode) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const condition = this.on.map(v => v != null)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const el = makeRenderable(<If is={condition} then={this.children(this.on as any)} otherwise={this.otherwise} />)
+    return el.appendTo(ctx)
+  }
+}
+
+export interface ShowProps<T> {
+  when: Condition<T>
+  otherwise?: JSX.DOMNode
+  children?: (value: Signal<NonNullable<T>>) => JSX.DOMNode
+}
+
+export function Show<T>({ when, children, otherwise }: ShowProps<T>): ShowImpl<T> {
+  return new ShowImpl(when, otherwise, children ?? (() => <></>))
+}

package/src/components/Text.ts

@@ -0,0 +1,48 @@
+import { Signal } from '../prop'
+import { type Renderable } from '../renderable'
+import { type Clear } from '../clean'
+import { type DOMContext } from '../dom-context'
+
+export function subscribeToSignal<T>(
+  prop: Signal<T>,
+  listener: (value: T) => void,
+  clear: Clear
+): Clear {
+  const unsubscribe = prop.subscribe(listener)
+  return (removeTree: boolean) => {
+    unsubscribe()
+    clear(removeTree)
+  }
+}
+
+export class TextImpl implements Renderable {
+  constructor(private readonly text: Signal<string>) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const [set, clear] = ctx.createText(this.text.get())
+    return subscribeToSignal(this.text, set, clear)
+  }
+}
+
+export type Primitive = string | number | boolean | Date
+
+export interface TextProps {
+  children?: Signal<Primitive | undefined> | Signal<Primitive> | Primitive
+}
+
+function propFromChildren(children: TextProps['children']): Signal<string> {
+  if (children instanceof Signal) {
+    return children.map((child) => {
+      if (child == null) {
+        return ''
+      }
+      return String(child)
+    })
+  }
+  return new Signal(String(children))
+}
+
+export function Text({ children }: TextProps): Renderable {
+  const prop = propFromChildren(children)
+  return new TextImpl(prop)
+}

package/src/components/TextContent.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 TextContentImpl implements Renderable {
+  constructor(private readonly value: Signal<string> | Signal<string | undefined>) { }
+
+  readonly appendTo = (ctx: DOMContext): Clear => {
+    const el = ctx.getElement()
+    const previous = el.textContent
+    el.textContent = this.value.get() ?? ''
+    const cancel = this.value.subscribe(value => {
+      el.textContent = value ?? ''
+    })
+    return (removeTree: boolean) => {
+      cancel()
+      if (removeTree) {
+        el.textContent = previous
+      }
+    }
+  }
+}
+
+export interface TextContentProps {
+  value: Signal<string> | Signal<string | undefined>
+}
+
+export function TextContent({ value }: TextContentProps): TextContentImpl {
+  return new TextContentImpl(value)
+}

package/src/components/animatable.ts

@@ -0,0 +1,178 @@
+export interface Animatable {
+  width?: number
+  maxWidth?: number
+  minWidth?: number
+  height?: number
+  maxHeight?: number
+  minHeight?: number
+  lineHeight?: number
+  opacity?: number
+  top?: number
+  left?: number
+  right?: number
+  bottom?: number
+  padding?: number
+  paddingTop?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  margin?: number
+  marginTop?: number
+  marginBottom?: number
+  marginLeft?: number
+  marginRight?: number
+  fontSize?: number
+  letterSpacing?: number
+  // color?: string
+  // backgroundColor?: string
+  // borderColor?: string
+  borderWidth?: number
+  borderRadius?: number
+  // boxShadow?: string
+  // textShadow?: string
+  translateX?: number
+  translateY?: number
+  translateZ?: number
+  rotateX?: number
+  rotateY?: number
+  rotateZ?: number
+  scaleX?: number
+  scaleY?: number
+  scaleZ?: number
+  skewX?: number
+  skewY?: number
+  grayScale?: number
+  sepia?: number
+  saturate?: number
+  hueRotate?: number
+  invert?: number
+  brightness?: number
+  contrast?: number
+  blur?: number
+}
+
+export function getComputedAnimatableProp(styles: CSSStyleDeclaration, key: keyof Animatable): Animatable[typeof key] {
+  if (key === 'translateX') {
+    return new WebKitCSSMatrix(styles.transform).m41
+  } else if (key === 'translateY') {
+    return new WebKitCSSMatrix(styles.transform).m42
+  } else if (key === 'translateZ') {
+    return new WebKitCSSMatrix(styles.transform).m43
+  } else if (key === 'rotateX') {
+    return new WebKitCSSMatrix(styles.transform).m12
+  } else if (key === 'rotateY') {
+    return new WebKitCSSMatrix(styles.transform).m21
+  } else if (key === 'rotateZ') {
+    return new WebKitCSSMatrix(styles.transform).m31
+  } else if (key === 'scaleX') {
+    return new WebKitCSSMatrix(styles.transform).m11
+  } else if (key === 'scaleY') {
+    return new WebKitCSSMatrix(styles.transform).m22
+  } else if (key === 'scaleZ') {
+    return new WebKitCSSMatrix(styles.transform).m33
+  } else if (key === 'skewX') {
+    return new WebKitCSSMatrix(styles.transform).m13
+  } else if (key === 'skewY') {
+    return new WebKitCSSMatrix(styles.transform).m23
+  } else if (key === 'grayScale') {
+    return Number(styles.filter.match(/grayscale\((\d+)%\)/)?.[1])
+  } else if (key === 'sepia') {
+    return Number(styles.filter.match(/sepia\((\d+)%\)/)?.[1])
+  } else if (key === 'saturate') {
+    return Number(styles.filter.match(/saturate\((\d+)%\)/)?.[1])
+  } else if (key === 'hueRotate') {
+    return Number(styles.filter.match(/hue-rotate\((\d+)deg\)/)?.[1])
+  } else if (key === 'invert') {
+    return Number(styles.filter.match(/invert\((\d+)%\)/)?.[1])
+  } else if (key === 'brightness') {
+    return Number(styles.filter.match(/brightness\((\d+)%\)/)?.[1])
+  } else if (key === 'contrast') {
+    return Number(styles.filter.match(/contrast\((\d+)%\)/)?.[1])
+  } else if (key === 'blur') {
+    return Number(styles.filter.match(/blur\((\d+)px\)/)?.[1])
+  }
+  return Number(styles.getPropertyValue(key))
+}
+
+export function getComputedAnimatable(el: HTMLElement, styles: Animatable): Animatable {
+  const result: Animatable = {}
+  const computedStyles = getComputedStyle(el)
+  for (const [key, value] of Object.entries(styles)) {
+    const k = key as keyof Animatable
+    if (value != null) {
+      result[k] = getComputedAnimatableProp(computedStyles, k)
+    }
+  }
+  return result
+}
+
+export function applyAnimatableProp(el: HTMLElement, key: keyof Animatable, value: Animatable[typeof key]): void {
+  if (value == null) return
+
+  if (key === 'translateX') {
+    el.style.transform += ` translateX(${value}px)`
+  } else if (key === 'translateY') {
+    el.style.transform += ` translateY(${value}px)`
+  } else if (key === 'translateZ') {
+    el.style.transform += ` translateZ(${value}px)`
+  } else if (key === 'rotateX') {
+    el.style.transform += ` rotateX(${value}deg)`
+  } else if (key === 'rotateY') {
+    el.style.transform += ` rotateY(${value}deg)`
+  } else if (key === 'rotateZ') {
+    el.style.transform += ` rotateZ(${value}deg)`
+  } else if (key === 'scaleX') {
+    el.style.transform += ` scaleX(${value})`
+  } else if (key === 'scaleY') {
+    el.style.transform += ` scaleY(${value})`
+  } else if (key === 'scaleZ') {
+    el.style.transform += ` scaleZ(${value})`
+  } else if (key === 'skewX') {
+    el.style.transform += ` skewX(${value}deg)`
+  } else if (key === 'skewY') {
+    el.style.transform += ` skewY(${value}deg)`
+  } else if (key === 'grayScale') {
+    el.style.filter += ` grayscale(${value}%)`
+  } else if (key === 'sepia') {
+    el.style.filter += ` sepia(${value}%)`
+  } else if (key === 'saturate') {
+    el.style.filter += ` saturate(${value}%)`
+  } else if (key === 'hueRotate') {
+    el.style.filter += ` hue-rotate(${value}deg)`
+  } else if (key === 'invert') {
+    el.style.filter += ` invert(${value}%)`
+  } else if (key === 'brightness') {
+    el.style.filter += ` brightness(${value}%)`
+  } else if (key === 'contrast') {
+    el.style.filter += ` contrast(${value}%)`
+  } else if (key === 'blur') {
+    el.style.filter += ` blur(${value}px)`
+  }
+  el.style.setProperty(key, String(value))
+}
+
+export function applyInterpolatedAnimatableProp(el: HTMLElement, key: keyof Animatable, from: Animatable[typeof key], to: Animatable[typeof key], progress: number): void {
+  if (from != null && to != null) {
+    const value = from + (to - from) * progress
+    applyAnimatableProp(el, key, value)
+  }
+}
+
+export function applyInterpolatedAnimatable(el: HTMLElement, from: Animatable, to: Animatable, progress: number): void {
+  el.style.transform = ''
+  el.style.filter = ''
+  for (const [key, value] of Object.entries(to)) {
+    const k = key as keyof Animatable
+    applyInterpolatedAnimatableProp(el, k, from[k], value, progress)
+  }
+}
+
+export function applyAnimatable(el: HTMLElement, styles: Animatable): void {
+  el.style.transform = ''
+  el.style.filter = ''
+  for (const [key, value] of Object.entries(styles)) {
+    if (value != null) {
+      applyAnimatableProp(el, key as keyof Animatable, value)
+    }
+  }
+}