intable 0.0.6 → 0.0.7

package/packages/intable/src/components/Menu.tsx

@@ -0,0 +1,109 @@
+import { children, createContext, createEffect, createMemo, createResource, createSignal, mergeProps, onMount, splitProps, useContext } from "solid-js"
+import { isEmpty } from 'es-toolkit/compat'
+import { createRender } from "./Render"
+import { autoUpdate, createFloating, offset } from "floating-ui-solid"
+import { combineProps } from '@solid-primitives/props'
+import { pointerHover } from "@solid-primitives/pointer"
+import { createMutable } from "solid-js/store"
+import { delay } from "es-toolkit"
+import { log, unFn } from "../utils"
+import { VDir } from "../hooks/useDir"
+import { Popover } from "./Popover"
+import { useSignle2 } from "../hooks"
+
+export function Menu(props) {
+  const MenuCtx = createContext({ deep: 0 })
+  
+  const _Li = _e => {
+    const ctx = useContext(MenuCtx)
+    const [e, attrs] = splitProps(_e, ['children', 'label', 'icon', 'isActive', 'cb', 'menu', 'popover'])
+
+    const x = createMemo(() => props.x && ctx.deep == 1)
+
+    let el!: HTMLDivElement
+    const [floating, setFloating] = createSignal<HTMLElement>()
+    const [hover, setHover] = useSignle2(false, { before: () => delay(100) })
+    pointerHover
+    
+    const style = createMemo(() => floating() ? createFloating({
+      strategy: 'fixed',
+      placement: x() ? 'bottom-start' : 'right-start',
+      ...e.menu,
+      elements: { reference: () => el, floating },
+      whileElementsMounted(ref, float, update) {
+        return autoUpdate(ref, float, update, { ancestorResize: true, elementResize: true, layoutShift: true, ancestorScroll: true })
+      }
+    }).floatingStyles : void 0)
+    
+    createEffect(() => {
+      floating() && Object.assign(floating()!.style, style()?.() ?? {})
+    })
+
+    const req = createMutable({ loading: false })
+
+    async function onClick() {
+      if (req.loading) return
+      const ret = e.cb?.()
+      if (ret instanceof Promise) {
+        try {
+          await ret
+          req.loading = true
+        } finally {
+          req.loading = false
+          props.onAction?.(e)
+        }
+      }
+      else {
+        props.onAction?.(e)
+      }
+    }
+
+    onMount(() => {
+      <Popover strategy='fixed' reference={el} portal={el} {..._e.popover} middleware={[offset({ mainAxis: 4 })]} />
+    })
+
+    const child = children(() => e.children)
+    return (
+      <div
+        ref={el}
+        use:pointerHover={setHover}
+        {...combineProps({ class: `li flex aic rd-2 ${x() ? 'my-1 p-1' : 'mx-1 pl-1 pr-4 py-1'} ${unFn(e.isActive) && 'active'}` }, attrs)}
+        on:click={onClick}
+      >
+        <div class={`flex aic ${x() ? '' : props.density == 'comfortable' ? 'ml-1 mr-2.5' : 'ml-.5 mr-1'} `}>
+          {req.loading ? <IMyLoading /> : e.icon}
+        </div>
+        {e.label}
+        {/* {hover() && child() && <_Menu ref={setFloating}>{child()}</_Menu>} */}
+        {hover() && e.children && <_Menu ref={setFloating} class='z-1'>{e.children}</_Menu>}
+      </div>
+    )
+  }
+
+  const Li = createRender({
+    is: _Li,
+    processProps: props => {
+      let i = 0
+      Array.isArray(props.children) && props.children.forEach((e) => !e.is && typeof e == 'object' && (e['data-index'] = i++))
+      return props
+    }
+  })
+
+  const _Menu = e => {
+    const parent = useContext(MenuCtx)
+    const ctx = createMutable({ deep: parent.deep + 1 })
+    return (
+      <MenuCtx.Provider value={ctx}>
+        <div
+          {...combineProps({ class: `${props.x && ctx.deep == 1 ? 'tt-menu-x flex' : 'tt-menu max-h-100'} overflow-auto` }, e)}
+          use:VDir={e.usedir}
+          on:click={e => e.stopPropagation()}
+        >
+          {(el => isEmpty(el) ? <div class='px-4 py-2 op40'>无内容</div> : el)(e.children)}
+        </div>
+      </MenuCtx.Provider>
+    )
+  }
+
+  return <Li {...combineProps({}, props)} is={_Menu} items={null} children={props.items} />
+}

package/packages/intable/src/components/Popover.tsx

@@ -0,0 +1,55 @@
+import { children, createEffect, createMemo, createSignal, type JSX, splitProps } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import { autoUpdate, createFloating, type createFloatingProps, type ReferenceType } from 'floating-ui-solid'
+import type { AutoUpdateOptions } from '@floating-ui/dom'
+import { delay } from 'es-toolkit'
+import { useClicked, useHover, useMemoAsync } from '../hooks'
+
+export function Popover(attrs: FloatingProps) {
+  const [_, props] = splitProps(attrs, ['reference', 'floating'])
+  
+  const show = (attrs.trigger == 'click' ? useClicked : useHover)(() => [reference(), floating()].filter(e => e))
+  const show2 = useMemoAsync(() => (
+    attrs.trigger == 'click'
+      ? show()
+      : show() ? delay(100).then(() => true) : delay(200).then(() => false)
+  ))
+
+  const reference = children(() => attrs.reference as HTMLElement)
+  const floating = children(() => show2() ? attrs.floating as HTMLElement : void 0)
+
+  return <Floating {...props} reference={reference} floating={floating} />
+}
+
+type FloatingProps = {
+  reference: ReferenceType
+  floating?: JSX.Element | (() => JSX.Element)
+  portal?: HTMLElement
+  trigger?: 'click' | 'hover'
+} & createFloatingProps
+
+export function Floating(attrs: FloatingProps & { update?: Partial<AutoUpdateOptions> }) {
+  const [_, props] = splitProps(attrs, ['reference', 'floating'])
+  const reference = children(() => attrs.reference)
+  const floating = children(() => attrs.floating)
+
+  const style = createMemo(() => floating() ? createFloating({
+    whileElementsMounted(ref, float, update) {
+      return autoUpdate(ref, float, update, { ancestorResize: true, elementResize: true, layoutShift: true, ancestorScroll: true, ...attrs.update })
+    },
+    ...props,
+    elements: { reference, floating },
+  }).floatingStyles : void 0)
+
+  createEffect(() => {
+    // console.log(props.floating)
+    floating() && Object.assign(floating().style, style()?.() ?? {})
+  })
+
+  return (
+    <>
+      {reference()}
+      {props.portal && floating() ? <Portal mount={props.portal}>{floating()}</Portal> : floating()}
+    </>
+  )
+}

package/packages/intable/src/components/RecycleList.tsx

@@ -0,0 +1,99 @@
+import { createMemo, type JSX, onCleanup, For, getOwner, runWithOwner, children, Show, createRoot } from 'solid-js'
+import { createMutable } from 'solid-js/store'
+import { log } from '../utils'
+
+/**
+ * RecycleList — a keyed list component with DOM recycling.
+ *
+ * Works like SolidJS `<For>` (keyed by reference identity) but instead of
+ * destroying DOM when items leave the list, it hides and pools those DOM
+ * nodes. When new items enter, a pooled slot is reused by swapping the
+ * reactive signals, avoiding the cost of creating & hydrating fresh DOM.
+ *
+ * Each slot gets its own `createRoot` so that its inner reactive tree
+ * (memos, effects) is NOT owned by the reconciliation memo — preventing
+ * SolidJS from disposing child computations when the outer memo re-runs.
+ *
+ * Ideal for virtual-scroll scenarios where items constantly enter/leave
+ * the viewport but the DOM structure per item is identical.
+ *
+ * ```tsx
+ * <RecycleList each={visibleItems()}>
+ *   {(item, index) => <div>{item().name} at {index()}</div>}
+ * </RecycleList>
+ * ```
+ */
+export function RecycleList<T>(props: {
+  each: T[]
+  children: (item: () => T, index: () => number) => JSX.Element
+}): JSX.Element {
+  interface Val {
+    v: any
+    i: number
+    active: boolean
+    el?: any
+  }
+  
+  // Active slots keyed by identity reference
+  const active = new Map<T, Val>()
+  // Pool of inactive (hidden) slots ready for reuse
+  const pool: Val[] = []
+  const owner = getOwner()
+
+  function state<T extends Object>(initial: T): T {
+    return runWithOwner(owner, () => createMutable(initial))!
+  }
+
+  const list = createMemo(() => {
+    const items = props.each || []
+    const nextKeys = new Set(items)
+
+    // 1. Deactivate slots whose keys left the list → move to pool
+    for (const [key, val] of active) {
+      if (!nextKeys.has(key)) {
+        pool.push(val)
+        active.delete(key)
+        // val.v = null
+        // val.i = -1
+        val.active = false
+      }
+    }
+ 
+    // 2. For each item: reuse existing active slot, recycle from pool, or create new
+    const list = [] as Val[]
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i]
+      if (active.has(item)) {
+        const slot = active.get(item)!
+        slot.i = i
+        slot.v = item
+      } else if (pool.length > 0) {
+        const slot = pool.pop()!
+        slot.i = i
+        slot.v = item
+        slot.active = true
+        active.set(item, slot)
+      } else {
+        active.set(item, state({ v: item, i, active: true }))
+      }
+      list.push(active.get(item)!)
+    }
+
+    return list.concat(...pool)
+  })
+
+  onCleanup(() => {
+    active.clear()
+    pool.length = 0
+  })
+
+  return (
+    <For each={list()}>{(val) => {
+      return <>
+        {val.active && runWithOwner(owner, () => (
+          val.el ??= props.children(() => val.v, () => val.i)
+        ))}
+      </>
+    }}</For>
+  )
+}

package/packages/intable/src/components/Render.tsx

@@ -0,0 +1,26 @@
+import { splitProps } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+const unFn = (fn, ...arg) => typeof fn == 'function' ? fn(...arg) : fn
+
+export function createRender({ is, processProps = e => e } = {}) {
+  const Render = (props: any) => {
+    const [reserve, attrs] = splitProps(processProps?.(props), ['is', 'vIf', 'children'])
+    return (<>
+      { (!('vIf' in reserve) || !!unFn(reserve.vIf)) &&
+        <Dynamic component={reserve.is ?? is} {...attrs}>
+          {List(reserve.children)}
+        </Dynamic>
+      }
+    </>)
+  }
+
+  const List = children => (
+    Array.isArray(children) ? children.map(e => typeof e == 'object' ? Render(e) : e) :
+    children
+  )
+
+  return Render
+}
+
+export const Render = createRender({ is: 'div' })

package/packages/intable/src/components/Split.tsx

@@ -0,0 +1,56 @@
+import { unFn } from '../utils'
+import { createElementBounds } from '@solid-primitives/bounds'
+import { children, createComputed, createEffect, createMemo, For, Index, mapArray, mergeProps, onMount, splitProps, type JSXElement } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+type SplitProps = {
+  container?: Element
+  cells: () => Element[]
+  handle?: (i: number) => JSXElement
+  size?: number
+  dir?: 'x' | 'y'
+  leading?: boolean
+  trailing?: boolean
+}
+
+export const Split = (props: SplitProps & { children?: JSXElement }) => {
+  let el!: Element
+  const child = children(() => props.children)
+
+  onMount(() => {
+    useSplit({
+      ...props,
+      container: el,
+      cells: () => props.cells ? props.cells() : child()
+    })
+  })
+
+  return <div ref={el} class='relative' {...props}>{child()}</div>
+}
+
+export const useSplit = (props: SplitProps) => {
+  props = mergeProps({ dir: 'x', size: 4 }, props) as SplitProps
+
+  let el!: HTMLDivElement
+  // const bounds = createMemo(() => props.cells().map()
+  const bounds = mapArray(() => props.cells(), el => createElementBounds(el))
+  const rect = createElementBounds(() => el)
+  createEffect(() => el.style.position = 'absolute')
+
+  const style = (e, bool) => props.dir == 'x'
+    ? `transform: translate(${(bool ? e.left + e.width : e.left) - (props.size! / 2)}px, ${e.top}px); width: ${props.size}px; height: ${e.height}px;`
+    : `transform: translate(${e.left}px, ${(bool ? e.top + e.height : e.top) - (props.size! / 2)}px); width: ${e.width}px; height: ${props.size}px;`
+
+  const Handle = (e) => (
+    <div class='absolute z-1' style={style({ ...e.e, left: e.e.left - rect.left, top: e.e.top - rect.top }, e.bool)}>{props.handle?.(e.i)}</div>
+  )
+
+  ; //
+  <Portal ref={el} mount={props.container || document.body}>
+    <For each={bounds().slice(0, -1)}>
+      {(e, i) => <Handle e={unFn(e)} bool={1} i={unFn(i)} />}
+    </For>
+    {!!bounds().length && props.leading && <Handle e={bounds()[0]} i={-1} />}
+    {!!bounds().length && props.trailing && <Handle e={bounds()[bounds().length - 1]} bool={1} i={bounds().length - 1} />}
+  </Portal>
+}

package/packages/intable/src/components/Tree.tsx

@@ -0,0 +1,115 @@
+import { createEffect, createMemo, createSignal, For, Index, on, onCleanup, splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { createLazyMemo } from '@solid-primitives/memo'
+import { combineProps } from '@solid-primitives/props'
+import { castArray } from 'es-toolkit/compat'
+
+function define(that, key) {
+  const signal = createSignal()
+  Object.defineProperty(that, key, {
+    get() { return signal[0]() },
+    set(v) { signal[1](v) }
+  })
+  return signal
+}
+
+function memo<T>(that, key, fn: () => T) {
+  const signal = createLazyMemo(fn)
+  Object.defineProperty(that, key, {
+    get() { return signal() },
+  })
+  return signal
+}
+
+export abstract class $Node {
+  data: any
+  constructor(data: any) {
+    this.data = data
+
+    createEffect(() => {
+      const children = this.children
+      children?.map(e => e.parent = this)
+      onCleanup(() => children?.map(e => e.parent = undefined))
+    })
+  }
+
+  // abstract get Node(data): $Node
+  // abstract get id(): any
+  get label() { return this.data.label }
+  abstract getChildren(): $Node[] | undefined
+  
+  declare children: $Node[] | undefined
+  $children = memo(this, 'children', () => this.getChildren())
+  
+  declare parent: $Node | undefined
+  $parent = define(this, 'parent')
+  
+  declare deep: number
+  $deep = memo(this, 'deep', () => this.parent ? this.parent.deep + 1 : 0)
+
+  declare index: number
+  $index = memo(this, 'index', () => this.parent?.children?.indexOf(this))
+
+  declare prev: $Node | undefined
+  $prev = memo(this, 'prev', () => this.parent?.children?.[this.index - 1])
+
+  declare next: $Node | undefined
+  $next = memo(this, 'next', () => this.parent?.children?.[this.index + 1])
+
+  declare root: $Node
+  $root = memo(this, 'root', () => this.parent ? this.parent.root : this)
+
+  declare path: $Node[]
+  $path = memo(this, 'path', () => {
+    const ret = [this] as $Node[]
+    let e: $Node = this
+    while (e.parent) ret.push(e = e.parent)
+    return ret.reverse()
+  })
+
+  get descendants(): $Node[] {
+    return this.children?.flatMap(e => [e, ...e.descendants]) || []
+  }
+
+  contains(node: $Node) {
+    return node.path.includes(this)
+  }
+
+  remove() {
+    // this.
+  }
+}
+
+export class $TreeItem extends $Node {
+  get is() { return this.data.is }
+  get props() { return this.data }
+  get id() { return this.data.id }
+  getChildren() { return this.data.children?.map(e => new $TreeItem(e)) }
+}
+
+export function Tree(_: { data: any; Node: { new (data: any): $TreeItem } }) {
+  const [props, attrs] = splitProps(_, ['data', 'Node'])
+
+  const Node = props.Node ?? $TreeItem
+
+  const root = createMemo(() => new (class extends Node {
+    getChildren() { return castArray(this.data || []).map(e  => new Node(e)) }
+  })(props.data))
+
+  const flated = createMemo(() => root().descendants as $TreeItem[])
+
+  return (
+    <div {...combineProps({ class: 'tt-menu' }, attrs)}>
+      <Index each={flated()}>
+        {(node, index) => (
+          <Dynamic
+            component={node().is ?? 'div'}
+            {...combineProps({ class: 'li py-1 px-4', style: `padding-left: ${(node().deep) * 16}px` }, node().props)}
+          >
+            {node().label}
+          </Dynamic>
+        )}
+      </Index>
+    </div>
+  )
+}

package/packages/intable/src/components/utils.tsx

@@ -0,0 +1,12 @@
+import type { JSX } from 'solid-js'
+
+export function solidComponent<T extends (...arg) => JSX.Element>(comp: T) {
+  comp.__solid = 1
+  return comp
+}
+
+export function renderComponent(Comp: any, props: any, renderer: any) {
+  if (!Comp) return null
+  if (!Comp.__solid) Comp = renderer(Comp)
+  return <Comp {...props} />
+}

package/packages/intable/src/hooks/index.ts

@@ -0,0 +1,200 @@
+import { $PROXY, batch, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, mergeProps, on, onCleanup, untrack, type Signal } from 'solid-js'
+import { $RAW, createMutable } from 'solid-js/store'
+import { createEventListener, createEventListenerMap } from '@solid-primitives/event-listener'
+import { createPointerListeners } from '@solid-primitives/pointer'
+import { access, type Many, type MaybeAccessor, } from '@solid-primitives/utils'
+import { makePersisted, storageSync } from '@solid-primitives/storage'
+import { createMutationObserver } from '@solid-primitives/mutation-observer'
+import { isFunction, isPromise, mapValues } from 'es-toolkit'
+import { castArray } from 'es-toolkit/compat'
+import { createKeybindingsHandler } from 'tinykeys'
+import { unFn } from '../utils'
+
+interface UseMoveOptions {
+  preventDefault?: boolean
+  start?(
+    e: PointerEvent,
+    move: (cb: MoveCB) => void,
+    end: (cb: EndCb) => void
+  ): void,
+}
+
+type MoveCB = (e: PointerEvent, o: { sx: number, sy: number, ox: number, oy: number }) => void
+type EndCb = (e: PointerEvent) => void
+
+export function usePointerDrag(el: MaybeAccessor<HTMLElement | undefined>, options: UseMoveOptions) {
+  options = mergeProps({ preventDefault: true } as UseMoveOptions, options)
+  
+  createPointerListeners({
+    target: el,
+    passive: false,
+    onDown(e) {
+      options.preventDefault && e.preventDefault()
+      const [sx, sy] = [e.x, e.y]
+
+      let move: MoveCB | void
+      let end: EndCb | void
+      options.start?.(e, (cb) => move = cb, (cb) => end = cb)
+      
+      createRoot(dispose => {
+        createPointerListeners({
+          target: document,
+          onMove(e) {
+            const [ox, oy] = [e.x - sx, e.y - sy]
+            move?.(e, { sx, sy, ox, oy })
+          },
+          onUp() {
+            end?.(e)
+            dispose()
+            move = void 0
+            end = void 0
+          }
+        })
+        // fix: does't cb onUp when drop
+        createEventListenerMap(document, {
+          drop: dispose
+        })
+      })
+    }
+  })
+}
+
+export function model(el: any, value: () => [() => string, (v: string) => any]) {
+  const [field, setField] = value()
+  createRenderEffect(() => (el.value = field()))
+  el.addEventListener("input", (e) => setField((e.target as HTMLInputElement).value))
+}
+
+export function toSignle<T extends Record<string, any>>(state: T, k: keyof T) {
+  return [() => state[k], v => state[k] = v]
+}
+
+export function useDark() {
+  const get = v => v == 'dark' || (prefersDark() && !v), set = v => v ? 'dark' : 'light'
+  const prefersDark = () => window.matchMedia("(prefers-color-scheme: dark)").matches
+  const dark = makePersisted(createSignal(prefersDark()), { name: 'color-schema', storage: localStorage, sync: storageSync, serialize: set, deserialize: get })
+  createEffect(() => document.documentElement.classList[dark[0]() ? 'add' : 'remove']('dark'))
+  createEffect(() =>  window.dispatchEvent(new StorageEvent('storage', { key: 'color-schema', newValue: set(dark[0]()) })))
+  return dark
+}
+
+export function useMemoAsync<T>(fn: (prev?: T) => Promise<T> | T, init?: Awaited<T>) {
+  const REJECT = Symbol()
+  const [val, setVal] = createSignal(init)
+  createComputed(async () => {
+    const ret = fn(untrack(val))
+    const v = ret instanceof Promise ? await new Promise((resolve) => {
+      ret.then(resolve)
+      onCleanup(() => resolve(REJECT))
+    }) : ret
+    v == REJECT || setVal(() => v)
+  })
+  return val
+}
+
+export function useSignle2<T>(v: T | (() => T), opt?: { before?: (v: T) => Promise<T | void> | T }) {
+  const state = createSignal(isFunction(v) ? void 0 : v)
+  const before = v => {
+    const v2 = opt?.before?.(v)
+    return isPromise(v2) ? v2.then(v3 => v3 === void 0 ? v : v3) : v2 ?? v
+  }
+  
+  const val = useMemoAsync(() => before(state[0]() as T))
+
+  if (isFunction(v)) {
+    const fned = useMemoAsync(() => before(v()))
+    createComputed(() => state[1](fned()))
+  }
+
+  return [val, state[1]] as Signal<T>
+}
+
+const $MEMO = Symbol()
+
+type Reactive<T extends object> = { [K in keyof T]: T[K] extends () => infer V ? V : T[K] }
+export function toReactive<T extends object>(fn: (() => T) | T): Reactive<T> {
+  const v = () => unFn(fn)
+  const trueFn = () => true
+  const get = k => (e => typeof e == 'function' && $MEMO in e ? e() : e)(v()[k])
+  return new Proxy(Object.create(null), {
+    get: (o, k, r) => k == $PROXY ? r : k == $RAW ? r : (v => typeof v == 'function' && $MEMO in v ? v() : v)(v()[k]),
+    set: trueFn,
+    defineProperty: (o, k, attributes) => Object.defineProperty(v(), k, attributes),
+    deleteProperty: trueFn,
+    getPrototypeOf: () => Object.getPrototypeOf(v()),
+    has: (o, p) => p == $PROXY || p in v(),
+    ownKeys: (o) => Object.keys(v()),
+    getOwnPropertyDescriptor: (o, k) => ({ enumerable: true, configurable: true, get() { return get(k) }, set: trueFn }),
+  })
+}
+
+export function useMemo<T>(fn: () => T) {
+  const ret = createMemo(fn)
+  ret[$MEMO] = 1
+  return ret
+}
+
+export function useHover(el: MaybeAccessor<Many<HTMLElement | undefined>>) {
+  const [hover, setHover] = createSignal(false)
+  createEventListener(el, 'pointerenter', () => setHover(true))
+  createEventListener(el, 'pointerleave', () => setHover(false))
+  return hover
+}
+
+export function useMouseDown(el: MaybeAccessor<Many<HTMLElement | undefined>>) {
+  const [down, setDown] = createSignal(false)
+  createEventListener(el, 'pointerdown', () => setDown(true))
+  createEventListener(document.body, 'pointerup', () => setDown(false))
+  return down
+}
+
+export function useClicked(el: MaybeAccessor<Many<HTMLElement | undefined>>) {
+  const [clicked, setClicked] = createSignal(false)
+  const els = () => castArray(access(el))
+  createEventListener(() => els().map(e => e?.getRootNode()), 'click', e => setClicked(els().some(el => el?.contains(e.target))))
+  return clicked
+}
+
+export function useMutation<T>(initial: MaybeAccessor<Node | Node[]>, options: MutationObserverInit, cb: () => T) {
+  const ret = createSignal<T>(cb())
+  createMutationObserver(initial, options, ms => ret[1](cb() as any))
+  return ret[0]
+}
+
+export function useTinykeys(el: MaybeAccessor<HTMLElement | undefined>, handlers) {
+  createEventListener(el, 'keydown', createKeybindingsHandler({
+    ...mapValues(handlers, cb => e => {
+      e.preventDefault()
+      cb(e)
+    })
+  }))
+}
+
+export function useHistory([val, setVal]) {
+  let bool = 1
+  const state = createMutable({ index: -1, history: [] as any[] })
+  const clear = () => (state.index = 0, state.history = [val()])
+  const canUndo = () => state.index > 0
+  const canRedo = () => state.index < state.history.length - 1
+  const undo = () => canUndo() && ((bool = 0) || setVal(state.history[--state.index]))
+  const redo = () => canRedo() && ((bool = 0) || setVal(state.history[++state.index]))
+  createRenderEffect(on(val, ret => {
+    if (ret == null) return // todo
+    if (!bool) return bool = 1
+    if (canRedo()) state.history = state.history.slice(0, state.index + 1)
+    state.history[++state.index] = ret
+  }))
+  return { undo, redo, clear, get index() { return state.index }, get history() { return state.history } }
+}
+
+export function useMemoState(fn) {
+  const state = createMutable({})
+  createComputed(() => {
+    const val = fn()
+    untrack(() => batch(() => {
+      for (const k in state) k in val || (delete state[k])
+      Object.assign(state, val)
+    }))
+  })
+  return state
+}