@tempots/dom 5.0.0

package/src/dom-context.ts

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

package/src/helpers/handle-anchor-click.ts

@@ -0,0 +1,64 @@
+function shouldNotApplyCallback(
+  e: MouseEvent,
+  checkExtension: boolean,
+  checkExternalUrl: boolean
+): boolean {
+  let target = e.target as HTMLElement | null
+  while ((target != null) && !(target instanceof HTMLAnchorElement)) {
+    target = target.parentElement
+  }
+  if (target == null) return true
+
+  const anchor = target
+
+  // Check for modifier keys and non-left-button, which indicate the user wants to control
+  // navigation
+  if (e.button !== 0 || e.ctrlKey || e.metaKey) {
+    return true
+  }
+
+  // If there is a target and it is not `_self` then we take this
+  // as a signal that it doesn't want to be intercepted.
+  if (anchor.target !== '_self') {
+    return true
+  }
+
+  if (anchor.getAttribute('download') != null) {
+    return true // let the download happen
+  }
+
+  if (checkExternalUrl) {
+    const { pathname, search, hash } = anchor
+    const relativeUrl = pathname + search + hash
+
+    // don't navigate if external link or has extension
+    if (
+      anchor.getAttribute('href') !== relativeUrl ||
+      (checkExtension && !/\/[^/.]*$/.test(pathname))
+    ) {
+      return true
+    }
+  }
+
+  return false
+}
+
+export const handleAnchorClick =
+  (
+    callback: () => boolean,
+    options: { checkExtension?: boolean, checkExternalUrl?: boolean } = {
+      checkExtension: true,
+      checkExternalUrl: true
+    }
+  ) =>
+    (e: MouseEvent) => {
+      const { checkExtension, checkExternalUrl } = options
+      if (
+        shouldNotApplyCallback(
+          e,
+          checkExtension === true,
+          checkExternalUrl === true
+        )
+      ) { return }
+      if (callback()) e.preventDefault()
+    }

package/src/helpers/handle-text-input.ts

@@ -0,0 +1,5 @@
+export const handleTextInput =
+  (f: (input: string) => void) => (e: Event) => {
+    const input = e.target as HTMLInputElement | null
+    f(input?.value ?? '')
+  }

package/src/helpers/is-empty-element.ts

@@ -0,0 +1,9 @@
+import { type JSX } from '../jsx-runtime'
+
+export function isEmptyElement(element: JSX.DOMNode): boolean {
+  if (Array.isArray(element)) {
+    if (element.length === 0) return true
+    return element.every(isEmptyElement)
+  }
+  return element == null || element === ''
+}

package/src/index.ts

@@ -0,0 +1,109 @@
+import { type Clear, type Clean } from './clean'
+import { makeProviderMark, DOMContext, type ProviderMark } from './dom-context'
+import { Prop, Signal } from './prop'
+import { render } from './render'
+import { type Renderable } from './renderable'
+import { isEmptyElement } from './helpers/is-empty-element'
+import { handleTextInput } from './helpers/handle-text-input'
+import { handleAnchorClick } from './helpers/handle-anchor-click'
+import { Animatable, applyInterpolatedAnimatableProp, applyInterpolatedAnimatable, applyAnimatableProp, applyAnimatable, getComputedAnimatableProp, getComputedAnimatable } from './components/animatable'
+
+import { AttributeImpl, Attribute, type AttributeProps } from './components/Attribute'
+import { BooleanAttributeImpl, BooleanAttribute, type BooleanAttributeProps } from './components/BooleanAttribute'
+import { ClassNameImpl, ClassName, type ClassNameProps } from './components/ClassName'
+import { ConsumerImpl, Consumer, type ConsumerProps, ProviderImpl, Provider, type ProviderProps } from './components/Provider'
+import { ElImpl, El, type ElProps } from './components/El'
+import { FadeIn, FadeInImpl, FadeInProps } from './components/FadeIn'
+import { FadeOut, FadeOutImpl, FadeOutProps } from './components/FadeOut'
+import { For, type ForProps } from './components/For'
+import { FragmentImpl, Fragment } from './components/Fragment'
+import { HiddenWhenEmptyImpl, HiddenWhenEmpty } from './components/HiddenWhenEmpty'
+import { If, type IfProps, Unless, When, type WhenProps } from './components/If'
+import { InnerHTMLImpl, InnerHTML, type InnerHTMLProps } from './components/InnerHTML'
+import { Lifecycle, LifecycleImpl, type LifecycleProps } from './components/Lifecycle'
+import { MatchImpl, Match, type MatchProps } from './components/Match'
+import { NotEmpty, type NotEmptyProps } from './components/NotEmpty'
+import { OnImpl, On, type OnProps } from './components/On'
+import { OnRemoveImpl, OnRemove, type OnRemoveProps } from './components/OnRemove'
+import { OneOfImpl, OneOf, type OneOfProps } from './components/OneOf'
+import { PortalImpl, Portal, type PortalProps } from './components/Portal'
+import { PropertyImpl, Property, type PropertyProps } from './components/Property'
+import { RepeatImpl, Repeat, type RepeatProps } from './components/Repeat'
+import { ShowImpl, Show, type ShowProps } from './components/Show'
+import { TextImpl, Text, type TextProps } from './components/Text'
+import { TextContentImpl, TextContent, type TextContentProps } from './components/TextContent'
+
+import type { JSX } from './jsx-runtime'
+
+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
+}
+
+export type {
+  AttributeProps,
+  BooleanAttributeProps,
+  ClassNameProps,
+  Clean,
+  Clear,
+  ConsumerProps,
+  ElProps,
+  FadeInProps,
+  FadeOutProps,
+  ForProps,
+  InnerHTMLProps,
+  IfProps,
+  JSX,
+  LifecycleProps,
+  MatchProps,
+  NotEmptyProps,
+  OnProps,
+  OnRemoveProps,
+  OneOfProps,
+  PortalProps,
+  PropertyProps,
+  ProviderMark,
+  ProviderProps,
+  Renderable,
+  RepeatProps,
+  ShowProps,
+  TextProps,
+  TextContentProps,
+  Animatable,
+  WhenProps
+}

package/src/jsx-dev-runtime.ts

@@ -0,0 +1,8 @@
+export {
+  Fragment,
+  jsx,
+  jsxs,
+  jsxDEV,
+  makeRenderable,
+  makeRenderables
+} from './jsx-runtime'

package/src/jsx-runtime.ts

@@ -0,0 +1,172 @@
+import { type JSX } from './jsx'
+import { type Renderable } from './renderable'
+import { ElImpl } from './components/El'
+import { AttributeImpl } from './components/Attribute'
+import { BooleanAttributeImpl } from './components/BooleanAttribute'
+import { PropertyImpl } from './components/Property'
+import { ClassNameImpl } from './components/ClassName'
+import { Prop, Signal } from './prop'
+import { TextImpl } from './components/Text'
+import { OnImpl } from './components/On'
+import { FragmentImpl } from './components/Fragment'
+
+const domBooleanAttributes = new Set([
+  'allowfullscreen',
+  'allowpaymentrequest',
+  'async',
+  'autofocus',
+  'autoplay',
+  'capture',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'disablepictureinpicture',
+  'disableremoteplayback',
+  'download',
+  'draggable',
+  'formnovalidate',
+  'hidden',
+  'ismap',
+  'itemscope',
+  'loop',
+  'nomodule',
+  'novalidate',
+  'open',
+  'playsinline',
+  'readonly',
+  'required',
+  'reversed',
+  'scoped',
+  'seamless',
+  'spellcheck',
+  'truespeed'
+])
+
+const domProperties = new Set([
+  'checked',
+  'checked',
+  'classList',
+  'className',
+  'contentEditable',
+  'dataset',
+  'innerHTML',
+  'multiple',
+  'muted',
+  'scrollLeft',
+  'scrollTop',
+  'selected',
+  'style',
+  'tabIndex',
+  'textContent',
+  'value'
+])
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isPrimitive(value: any): value is string | number | boolean | Date | bigint {
+  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint' || value instanceof Date
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeRenderables(value: any): Renderable[] {
+  if (value == null) {
+    return []
+  }
+  if (Array.isArray(value)) {
+    return value.flatMap(makeRenderables)
+  }
+  if (typeof value === 'string') {
+    return [new TextImpl(new Prop(value))]
+  }
+  if (Signal.isSignal(value)) {
+    return [new TextImpl(value as Prop<string>)]
+  }
+  if (typeof value === 'object' && 'appendTo' in value) {
+    return [value]
+  }
+  if (isPrimitive(value)) {
+    return [new TextImpl(new Prop(value).map(String))]
+  }
+  throw new Error(`Unkwown renderable: ${String(value)}`)
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeRenderable(value: any): Renderable {
+  const renderables = makeRenderables(value)
+  if (renderables.length === 0) {
+    return new FragmentImpl([])
+  }
+  if (renderables.length === 1) {
+    return renderables[0]
+  }
+  return new FragmentImpl(renderables)
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isNamedConstructor(obj: any): boolean {
+  return obj.prototype?.constructor?.name != null
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function makeFragment({ children }: { children: any[] }): Renderable {
+  if (Array.isArray(children)) {
+    return new FragmentImpl(children.flatMap(makeRenderables))
+  } else {
+    return makeRenderable(children)
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function makeElement(Name: any, ...args: any[]): Renderable {
+  if (typeof Name === 'function') {
+    if (isNamedConstructor(Name)) {
+      const el = new Name(...args)
+      return el
+    } else {
+      const el = Name(...args)
+      return el
+    }
+  }
+  const { children: untypedChildren, ...rest } = args[0] ?? {}
+  const children: Renderable[] = []
+  if (Array.isArray(untypedChildren)) {
+    children.push(...(untypedChildren.flatMap(makeRenderables)))
+  } else if (untypedChildren !== undefined) {
+    children.push(...makeRenderables(untypedChildren))
+  }
+  for (const [key, value] of Object.entries(rest)) {
+    if (key.startsWith('on')) {
+      const eventName = key.slice(2).toLowerCase()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      children.push(new OnImpl(eventName, value as any))
+      continue
+    }
+    if (value == null) {
+      continue
+    }
+    const prop: Prop<unknown> = isPrimitive(value) ? new Prop(value) as Prop<unknown> : value as Prop<unknown>
+    if (key === 'class' || key === 'className') {
+      children.push(new ClassNameImpl(prop as Prop<string>))
+      continue
+    }
+    if (domProperties.has(key)) {
+      children.push(new PropertyImpl(key, prop))
+      continue
+    }
+    if (domBooleanAttributes.has(key)) {
+      children.push(new BooleanAttributeImpl(key, prop as Prop<boolean>))
+      continue
+    }
+    children.push(new AttributeImpl(key, prop as Prop<string>))
+  }
+
+  return new ElImpl(Name, children)
+}
+
+export {
+  makeElement as jsx,
+  makeElement as jsxs,
+  makeElement as jsxDEV,
+  makeFragment as Fragment,
+  type JSX
+}