@tempots/dom 5.0.0 → 5.0.2

package/src/prop.ts

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

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

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

package/test/common.ts

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

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

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

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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-{
-  "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/**/*"]
-}