@tempots/dom 5.0.0

package/src/prop.ts

@@ -0,0 +1,202 @@
+export type ArgsToSignals<T extends [...unknown[]]> = T extends [] ? [] : T extends [infer U, ...infer V] ? [Signal<U>, ...ArgsToSignals<V>] : []
+
+const $isSignal = Symbol('isSignal')
+const $isProp = Symbol('isProp')
+
+export type Value<T> = T | Signal<T>
+
+export class Signal<T> {
+  static of<T>(value: T): Signal<T> {
+    return new Signal(value)
+  }
+
+  static ofValue<T>(value: Value<T> | null | undefined): Signal<T> | undefined {
+    return value == null ? undefined : Signal.wrap(value)
+  }
+
+  static wrap<T>(value: T | Signal<T>): Signal<T> {
+    return Signal.isSignal<T>(value) ? value : new Signal(value)
+  }
+
+  static isSignal<T = unknown>(x: unknown): x is Signal<T> {
+    const s = x as Signal<T>
+    return s != null && typeof s.get === 'function' && typeof s.subscribe === 'function'
+  }
+
+  /**
+   * Combines many into one using a merging function
+   */
+  static combine<Args extends [...unknown[]], Out>(
+    others: ArgsToSignals<Args>,
+    f: (...args: Args) => Out
+  ): Signal<Out> {
+    function getValues(others: Array<Prop<unknown>>): Args {
+      return others.map(other => other.get()) as Args
+    }
+    const prop = new Prop(f(...getValues(others)))
+    others.forEach((other: Prop<unknown>) => {
+      other.subscribe(() => {
+        prop.set(f(...getValues(others)))
+      })
+    })
+    return prop
+  }
+
+  public readonly [$isSignal] = true
+
+  protected readonly _listeners: Array<(value: T) => void> = []
+  constructor(protected _value: T) { }
+  readonly get = (): T => {
+    return this._value
+  }
+
+  readonly subscribe = (listener: (value: T) => void): () => void => {
+    this._listeners.push(listener)
+    return () => {
+      const index = this._listeners.indexOf(listener)
+      if (index >= 0) { this._listeners.splice(index, 1) }
+    }
+  }
+
+  readonly map = <V>(f: (value: T) => V): Signal<V> => {
+    const prop = new Prop(f(this._value))
+    this.subscribe(value => { prop.set(f(value)) })
+    return prop
+  }
+
+  readonly flatMap = <V>(f: (value: T) => Signal<V>): Signal<V> => {
+    let signal = f(this._value)
+    const prop = new Prop(signal.get())
+    this.subscribe(value => {
+      signal.clean()
+      signal = f(value)
+      signal.subscribe(value => { prop.set(value) })
+    })
+    return prop
+  }
+
+  readonly tap = (f: (value: T) => void): this => {
+    f(this._value)
+    this.subscribe(f)
+    return this
+  }
+
+  readonly at = <K extends keyof T>(key: K): Signal<T[K]> => {
+    return this.map(value => value[key])
+  }
+
+  readonly filter = (predicate: (value: T) => boolean): Signal<T> => {
+    const prop = new Prop(this._value)
+    this.subscribe(value => {
+      if (predicate(value)) {
+        prop.set(value)
+      }
+    })
+    return prop
+  }
+
+  readonly distinct = (equality: (a: T, b: T) => boolean): Signal<T> => {
+    let lastValue = this._value
+    return this.filter(value => {
+      const result = !equality(value, lastValue)
+      lastValue = value
+      return result
+    })
+  }
+
+  readonly mapAsync = <V>(f: (value: T) => Promise<V>, alt: V): Signal<V> => {
+    let counter = 0
+    const prop = new Prop(alt)
+    f(this._value)
+      .then(value => {
+        if (counter === 0) prop.set(value)
+      })
+      .catch(e => {
+        throw e
+      })
+    this.subscribe(value => {
+      const matchCounter = ++counter
+      f(value)
+        .then(value => {
+          if (matchCounter === counter) { prop.set(value) }
+        })
+        .catch(e => {
+          throw e
+        })
+    })
+    return prop
+  }
+
+  readonly mapMaybe = <V>(f: (value: T) => V | null | undefined, alt: V): Signal<V> => {
+    const prop = new Prop(f(this._value) ?? alt)
+    this.subscribe(value => {
+      const newValue = f(value)
+      if (newValue != null) prop.set(newValue)
+    })
+    return prop
+  }
+
+  readonly combine = <V, Z>(other: Signal<V>, f: (a: T, b: V) => Z): Signal<Z> => {
+    const prop = new Prop(f(this._value, other.get()))
+    this.subscribe(value => { prop.set(f(value, other.get())) })
+    other.subscribe(value => { prop.set(f(this._value, value)) })
+    return prop
+  }
+
+  readonly feed = (prop: Prop<T>): Prop<T> => {
+    this.subscribe(value => { prop.set(value) })
+    return prop
+  }
+
+  readonly deriveProp = (): Prop<T> => {
+    return new Prop(this._value)
+  }
+
+  readonly clean = (): void => {
+    this._listeners.length = 0
+  }
+}
+
+export class Prop<T> extends Signal<T> {
+  static isProp<T = unknown>(x: unknown): x is Prop<T> {
+    const p = x as Prop<T>
+    return Signal.isSignal(x) && typeof p.set === 'function'
+    // return x != null && (x as Prop<T>)[$isProp] === true
+  }
+
+  static override of<T>(value: T): Prop<T> {
+    return new Prop(value)
+  }
+
+  public readonly [$isProp] = true
+
+  readonly set = (value: T): void => {
+    if (this._value === value) return
+    this._value = value
+    this._listeners.forEach(listener => { listener(value) })
+  }
+
+  readonly update = (f: (value: T) => T): void => {
+    this.set(f(this._value))
+  }
+
+  readonly atLens = <K extends keyof T>(key: K): Prop<T[K]> => {
+    return this.iso(
+      value => value[key],
+      value => ({ ...this._value, [key]: value })
+    )
+  }
+
+  readonly reducer = <V>(f: (state: T, action: V) => T) => {
+    return (action: V) => {
+      this.set(f(this._value, action))
+    }
+  }
+
+  readonly iso = <V>(map: (value: T) => V, reverse: (value: V) => T): Prop<V> => {
+    const prop = new Prop(map(this._value))
+    this.subscribe(value => { prop.set(map(value)) })
+    prop.subscribe(value => { this.set(reverse(value)) })
+    return prop
+  }
+}

package/src/render.ts

@@ -0,0 +1,9 @@
+import { DOMContext } from './dom-context'
+import { type JSX, makeRenderable } from './jsx-runtime'
+import { type Clean } from './clean'
+
+export function render(renderable: JSX.DOMNode, element: HTMLElement): Clean {
+  const ctx = DOMContext.of(element)
+  const clear = makeRenderable(renderable).appendTo(ctx)
+  return () => { clear(true) }
+}

package/src/renderable.ts

@@ -0,0 +1,6 @@
+import { type DOMContext } from './dom-context'
+import { type Clear } from './clean'
+
+export interface Renderable {
+  appendTo: (ctx: DOMContext) => Clear
+}

package/test/common.ts

@@ -0,0 +1,9 @@
+export type Assertion = ReturnType<typeof expect>
+
+export function expectBody() {
+  return expect(document.body.innerHTML)
+}
+
+export function expectHead() {
+  return expect(document.head.innerHTML)
+}

package/test/component.spec.tsx

@@ -0,0 +1,27 @@
+/**
+ * @jsxImportSource ../src
+ */
+
+import { DOMContext, Prop } from '../src'
+import { expectBody } from './common'
+import { makeRenderable } from '../src/jsx-runtime'
+
+export const Custom = ({ name, email }: { name: Prop<string>, email: string }) => {
+  return (
+    <div>
+      {name}: {email}
+    </div>
+  )
+}
+
+describe('Component', () => {
+  afterEach(() => {
+    document.getElementsByTagName('html')[0].innerHTML = ''
+  })
+
+  test('should access scope', () => {
+    // Tempo.mount(<Custom name="some" />)
+    makeRenderable(<Custom name={Prop.of("foo")} email="bar@gmail.com" />).appendTo(DOMContext.of(document.body))
+    expectBody().toBe('<div>foo: bar@gmail.com</div>')
+  })
+})

package/test/domcontext.spec.ts

@@ -0,0 +1,36 @@
+import { DOMContext } from '../src/dom-context'
+
+describe('DOMContext', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+  })
+
+  test('setAttribute', () => {
+    const ctx = DOMContext.of(document.createElement('div'))
+    expect(ctx.getElement()).not.toBeNull()
+    ctx.setAttribute('id', 'foo')
+    expect(ctx.getElement().outerHTML).toBe('<div id="foo"></div>')
+    ctx.setAttribute('id', null)
+    expect(ctx.getElement().outerHTML).toBe('<div></div>')
+  })
+
+  test('setBooleanAttribute', () => {
+    const ctx = DOMContext.of(document.createElement('div'))
+    expect(ctx.getElement()).not.toBeNull()
+    ctx.setBooleanAttribute('hidden', true)
+    expect(ctx.getElement().outerHTML).toBe('<div hidden=""></div>')
+    ctx.setBooleanAttribute('hidden', false)
+    expect(ctx.getElement().outerHTML).toBe('<div></div>')
+  })
+
+  test('createClass', () => {
+    const ctx = DOMContext.of(document.createElement('div'))
+    const [setClass, clear] = ctx.createClass('foo')
+    expect(ctx.getElement().outerHTML).toBe('<div class="foo"></div>')
+    setClass('bar')
+    expect(ctx.getElement().outerHTML).toBe('<div class="bar"></div>')
+    clear(true)
+    expect(ctx.getElement().outerHTML).toBe('<div></div>')
+  })
+})

package/test/fadein.spec.tsx

@@ -0,0 +1,36 @@
+/**
+ * @jsxImportSource ../src
+ */
+
+import { render, FadeIn } from '../src'
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+describe('FadeIn', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+  })
+
+  test('with delay and start', async () => {
+    const view = <div><FadeIn delay={10} duration={10} start={{ opacity: 0 }} opacity={1} /></div>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 0;"></div>')
+    await sleep(1)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 0;"></div>')
+    await sleep(20)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 1;"></div>')
+  })
+
+  test('without delay and start', async () => {
+    const view = <div><FadeIn duration={10} opacity={1} /></div>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 0;"></div>')
+    await sleep(1)
+    expect(document.body.innerHTML).not.toBe('<div style="opacity: 0;"></div>')
+    await sleep(20)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 1;"></div>')
+  })
+})

package/test/fadeout.spec.tsx

@@ -0,0 +1,41 @@
+/**
+ * @jsxImportSource ../src
+ */
+
+import { render, FadeOut, Prop, When } from '../src'
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+describe('FadeOut', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+  })
+
+  test('removed with clear', async () => {
+    const view = <div style="opacity: 1"><FadeOut duration={10} opacity={0} /></div>
+    const clear = render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 1;"></div>')
+    clear()
+    expect(document.body.innerHTML).toBe('<div style="opacity: 1;"></div>')
+    await sleep(1)
+    expect(document.body.innerHTML).not.toBe('<div style="opacity: 1;"></div>')
+    await sleep(20)
+    expect(document.body.innerHTML).toBe('')
+  })
+
+  test('with delay', async () => {
+    const cond = Prop.of(true)
+    const view = <When is={cond}><div style="opacity: 1"><FadeOut delay={10} duration={10} opacity={0} /></div></When>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 1;"></div>')
+    cond.set(false)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 1;"></div>')
+    await sleep(1)
+    expect(document.body.innerHTML).toBe('<div style="opacity: 1;"></div>')
+    await sleep(20)
+    expect(document.body.innerHTML).toBe('')
+  })
+})

package/test/if.spec.tsx

@@ -0,0 +1,30 @@
+/**
+ * @jsxImportSource ../src
+ */
+
+import { render, If, Prop } from '../src'
+
+describe('If', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+  })
+
+  test('when true/false', () => {
+    const prop = Prop.of(true)
+    const view = <If is={prop} then={<div>foo</div>} otherwise={<span>bar</span>} />
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div>foo</div>')
+    prop.set(false)
+    expect(document.body.innerHTML).toBe('<span>bar</span>')
+  })
+
+  test('without false', () => {
+    const prop = Prop.of(true)
+    const view = <If is={prop} then={<div>foo</div>} />
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div>foo</div>')
+    prop.set(false)
+    expect(document.body.innerHTML).toBe('')
+  })
+})

package/test/innerhtml.spec.tsx

@@ -0,0 +1,45 @@
+/**
+ * @jsxImportSource ../src
+ */
+
+import { render, Prop, InnerHTML, When } from '../src'
+
+describe('InnerHTML', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+  })
+
+  test('set', () => {
+    const prop = Prop.of("<b>foo</b>")
+    const view = <div><InnerHTML html={prop} /></div>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div><b>foo</b></div>')
+    prop.set("<i>bar</i>")
+    expect(document.body.innerHTML).toBe('<div><i>bar</i></div>')
+  })
+
+  test('restore', () => {
+    const cond = Prop.of(true)
+    const prop = Prop.of("foo")
+    document.body.textContent = "default"
+    const view = <When is={cond}><InnerHTML html={prop} /></When>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('foo')
+    prop.set("bar")
+    expect(document.body.innerHTML).toBe('bar')
+    cond.set(false)
+    expect(document.body.innerHTML).toBe('default')
+  })
+
+  test('set nullable', () => {
+    const prop = Prop.of(undefined as string | undefined)
+    const view = <div><InnerHTML html={prop} /></div>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div></div>')
+    prop.set("bar")
+    expect(document.body.innerHTML).toBe('<div>bar</div>')
+    prop.set(undefined)
+    expect(document.body.innerHTML).toBe('<div></div>')
+  })
+})

package/test/prop.spec.ts

@@ -0,0 +1,10 @@
+import { Prop } from '../src/prop'
+
+describe('Prop', () => {
+  test('get/set', () => {
+    const prop = new Prop(1)
+    expect(prop.get()).toBe(1)
+    prop.set(2)
+    expect(prop.get()).toBe(2)
+  })
+})

package/test/render.spec.tsx

@@ -0,0 +1,19 @@
+/**
+ * @jsxImportSource ../src
+ */
+
+import { render } from '../src'
+
+describe('render', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+  })
+
+  test('render div', () => {
+    const clear = render(<div>foo</div>, document.body)
+    expect(document.body.innerHTML).toBe('<div>foo</div>')
+    clear()
+    expect(document.body.innerHTML).toBe('')
+  })
+})

package/test/textcontent.spec.tsx

@@ -0,0 +1,45 @@
+/**
+ * @jsxImportSource ../src
+ */
+
+import { render, If, Prop, TextContent, When } from '../src'
+
+describe('TextContent', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+  })
+
+  test('set', () => {
+    const prop = Prop.of("foo")
+    const view = <div><TextContent value={prop} /></div>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div>foo</div>')
+    prop.set("bar")
+    expect(document.body.innerHTML).toBe('<div>bar</div>')
+  })
+
+  test('restore', () => {
+    const cond = Prop.of(true)
+    const prop = Prop.of("foo")
+    document.body.textContent = "default"
+    const view = <When is={cond}><TextContent value={prop} /></When>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('foo')
+    prop.set("bar")
+    expect(document.body.innerHTML).toBe('bar')
+    cond.set(false)
+    expect(document.body.innerHTML).toBe('default')
+  })
+
+  test('set nullable', () => {
+    const prop = Prop.of(undefined as string | undefined)
+    const view = <div><TextContent value={prop} /></div>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div></div>')
+    prop.set("bar")
+    expect(document.body.innerHTML).toBe('<div>bar</div>')
+    prop.set(undefined)
+    expect(document.body.innerHTML).toBe('<div></div>')
+  })
+})

package/test/when.spec.tsx

@@ -0,0 +1,30 @@
+/**
+ * @jsxImportSource ../src
+ */
+
+import { render, When, Unless, Prop } from '../src'
+
+describe('When', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+  })
+
+  test('when true/false', () => {
+    const prop = Prop.of(true)
+    const view = <When is={prop}><div>foo</div></When>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div>foo</div>')
+    prop.set(false)
+    expect(document.body.innerHTML).toBe('')
+  })
+
+  test('unless true/false', () => {
+    const prop = Prop.of(false)
+    const view = <Unless is={prop}><div>foo</div></Unless>
+    render(view, document.body)
+    expect(document.body.innerHTML).toBe('<div>foo</div>')
+    prop.set(true)
+    expect(document.body.innerHTML).toBe('')
+  })
+})

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "target": "ESNext",
+    "declaration": true,
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "./src",
+  },
+  "include": ["src/**/*"]
+}