@tempots/dom 5.0.0 → 5.0.1

package/src/components/Property.ts

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

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

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

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

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

@@ -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 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

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

package/src/dom-context.ts

@@ -1,281 +0,0 @@
-import { type Clear } from './clean'
-
-function extractClassNames(cls: string): string[] {
-  return (cls ?? '').split(/\s+/g).filter((className) => className.length > 0)
-}
-
-function createIntegerSet(x: number): Set<number> {
-  const integerSet = new Set<number>()
-
-  for (let i = 0; i < x; i++) {
-    integerSet.add(i)
-  }
-  return integerSet
-}
-
-export type ProviderMark<T> = symbol
-
-export function makeProviderMark<T>(): ProviderMark<T> {
-  return Symbol('providerMark')
-}
-
-export type Providers = Record<ProviderMark<unknown>, unknown>
-
-export class DOMContext {
-  static of(element: HTMLElement): DOMContext {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return new DOMContext(element.ownerDocument, element, undefined, undefined, {})
-  }
-
-  constructor(
-    private readonly document: Document,
-    private readonly element: HTMLElement,
-    private readonly reference: Text | undefined,
-    private readonly ns: string | undefined,
-    private readonly providers: Providers
-  ) { }
-
-  append(node: Node): void {
-    if (this.reference !== undefined) {
-      try {
-        // There are components (TextContent, InnerHTML) that can mess up with the internal state of an element
-        this.element.insertBefore(node, this.reference)
-      } catch (_) {
-        this.element.appendChild(node)
-      }
-    } else {
-      this.element.appendChild(node)
-    }
-  }
-
-  getElement(): HTMLElement {
-    return this.element
-  }
-
-  getDocument(): Document {
-    return this.document
-  }
-
-  makeReference(): DOMContext {
-    const textNode = this.document.createTextNode('')
-    this.append(textNode)
-    return new DOMContext(this.document, this.element, textNode, this.ns, this.providers)
-  }
-
-  makeElement(tagName: string): DOMContext {
-    if (this.ns !== undefined || tagName === 'svg') {
-      const ns = this.ns ?? 'http://www.w3.org/2000/svg'
-      const element = this.document.createElementNS(ns, tagName)
-      this.append(element)
-      return new DOMContext(this.document, element as HTMLElement, undefined, ns, this.providers)
-    } else {
-      const element = this.document.createElement(tagName)
-      this.append(element)
-      return new DOMContext(this.document, element, undefined, this.ns, this.providers)
-    }
-  }
-
-  getBooleanAttribute(name: string): boolean {
-    return this.element.hasAttribute(name)
-  }
-
-  setBooleanAttribute(name: string, value: boolean): void {
-    if (value) {
-      this.element.setAttribute(name, '')
-    } else {
-      this.element.removeAttribute(name)
-    }
-  }
-
-  createBooleanAttribute(name: string, value: boolean): [(newValue: boolean) => void, Clear] {
-    const current = this.element.hasAttribute(name)
-    this.setBooleanAttribute(name, value)
-    return [
-      (newValue: boolean) => {
-        this.setBooleanAttribute(name, newValue)
-      },
-      (removeTree: boolean) => {
-        if (removeTree) {
-          this.setBooleanAttribute(name, current)
-        }
-      }
-    ]
-  }
-
-  getAttribute(name: string): string | null {
-    return this.element.getAttribute(name)
-  }
-
-  setAttribute(name: string, value: string | null): void {
-    if (value == null) {
-      this.element.removeAttribute(name)
-    } else {
-      this.element.setAttribute(name, value)
-    }
-  }
-
-  createAttribute(name: string, value: string): [(newValue: string) => void, Clear] {
-    const current = this.element.getAttribute(name)
-    this.setAttribute(name, value)
-    return [
-      (newValue: string) => {
-        this.setAttribute(name, newValue)
-      },
-      (removeTree: boolean) => {
-        if (removeTree) {
-          this.setAttribute(name, current)
-        }
-      }
-    ]
-  }
-
-  getProperty<T>(name: string): T {
-    return Reflect.get(this.element, name)
-  }
-
-  setProperty<T>(name: string, value: T): void {
-    if (value == null) {
-      Reflect.deleteProperty(this.element, name)
-    } else {
-      Reflect.set(this.element, name, value)
-    }
-  }
-
-  createProperty<T>(name: string, value: T): [(newValue: T) => void, Clear] {
-    const current = this.getProperty<T>(name)
-    this.setProperty(name, value)
-    return [
-      (newValue: T) => {
-        this.setProperty(name, newValue)
-      },
-      (removeTree: boolean) => {
-        if (removeTree) {
-          this.setProperty(name, current)
-        }
-      }
-    ]
-  }
-
-  createText(text: string): [(newText: string) => void, Clear] {
-    const textNode = this.document.createTextNode(text)
-    this.append(textNode)
-    return [
-      (newText: string) => {
-        textNode.nodeValue = newText
-      },
-      (removeTree: boolean) => {
-        if (removeTree) {
-          textNode.remove()
-        }
-      }
-    ]
-  }
-
-  createClass(cls: string): [(newClass: string) => void, Clear] {
-    let current = extractClassNames(cls)
-    current.forEach((className) => {
-      this.element.classList.add(className)
-    })
-    return [
-      (newClass: string) => {
-        current.forEach((className) => {
-          this.element.classList.remove(className)
-        })
-        current = extractClassNames(newClass)
-        current.forEach((className) => {
-          this.element.classList.add(className)
-        })
-      },
-      (removeTree: boolean) => {
-        if (removeTree) {
-          current.forEach((className) => {
-            this.element.classList.remove(className)
-            if (this.element.classList.length === 0) {
-              this.element.removeAttribute('class')
-            }
-          })
-        }
-      }
-    ]
-  }
-
-  createHandler<T>(name: string, handler: (event: T) => void): Clear {
-    this.element.addEventListener(name, handler as unknown as EventListener)
-    return (removeTree: boolean) => {
-      if (removeTree) {
-        this.element.removeEventListener(name, handler as unknown as EventListener)
-      }
-    }
-  }
-
-  private readonly suspendedClears: Array<(removeTree: boolean, clear: () => void) => void> = []
-  delayClear(f: (removeTree: boolean, clear: () => void) => void): (removeTree: boolean) => void {
-    this.suspendedClears.push(f)
-    return (removeTree) => {
-      // TODO nothing happens?
-    }
-  }
-
-  requestClear(removeTree: boolean, willClear: () => void): void {
-    if (this.suspendedClears.length === 0) {
-      willClear()
-      this.clear(removeTree)
-    } else {
-      const set = createIntegerSet(this.suspendedClears.length)
-      const clearSuspended = (index: number): void => {
-        set.delete(index)
-        if (set.size === 0) {
-          willClear()
-          this.clear(removeTree)
-        }
-      }
-      this.suspendedClears.forEach((f, i) => { f(removeTree, () => { clearSuspended(i) }) })
-      this.suspendedClears.length = 0
-    }
-  }
-
-  private clear(removeTree: boolean): void {
-    if (removeTree) {
-      if (this.reference !== undefined) {
-        this.reference.parentElement?.removeChild(this.reference)
-      } else {
-        this.element.onblur = null
-        this.element.parentElement?.removeChild(this.element)
-      }
-    }
-  }
-
-  withProvider<T>(mark: ProviderMark<T>, provider: T): DOMContext {
-    return new DOMContext(this.document, this.element, this.reference, this.ns, {
-      ...this.providers,
-      [mark]: provider
-    })
-  }
-
-  getProvider<T>(mark: ProviderMark<T>): T {
-    return this.providers[mark] as T
-  }
-
-  setStyle(name: string, value: string | undefined | null): void {
-    if (value == null) {
-      this.element.style.removeProperty(name)
-    } else {
-      this.element.style.setProperty(name, value)
-    }
-  }
-
-  createStyle(name: string, value: string | undefined | null): [(newValue: string) => void, Clear] {
-    const current = this.element.style.getPropertyValue(name)
-    this.setStyle(name, value)
-    return [
-      (newValue: string) => {
-        this.setStyle(name, newValue)
-      },
-      (removeTree: boolean) => {
-        if (removeTree) {
-          this.setStyle(name, current)
-        }
-      }
-    ]
-  }
-}