@jsweb/ui 1.2.6 → 1.2.7

package/src/index.ts

@@ -1,10 +0,0 @@
-import { reactive, watch } from './reactivity'
-import { createScope } from './parser'
-
-export { reactive, watch, createScope }
-
-if (typeof window !== 'undefined') {
-  const w = window as any
-  w.jsweb = w.jsweb || {}
-  w.jsweb.ui = { createScope, reactive, watch }
-}

package/src/parser.ts

@@ -1,426 +0,0 @@
-import { effect, reactive } from './reactivity'
-import { evaluate, evaluateEvent } from './evaluator'
-
-export type Context = Record<string, any>
-
-interface BoundNode extends Node {
-  _effects?: Array<() => void>
-}
-
-export function cleanupTree(node: Node) {
-  const bNode = node as BoundNode
-  if (bNode._effects) {
-    bNode._effects.forEach((stop) => stop())
-    bNode._effects = []
-  }
-  const children = Array.from(node.childNodes)
-  for (const child of children) cleanupTree(child)
-}
-
-export function createContext(scope: any, context: Context = {}): Context {
-  const reactiveScope = scope._isReactive ? scope : reactive(scope)
-
-  return new Proxy(reactiveScope, {
-    get(target, prop) {
-      if (prop === '_isContext') return true
-      if (prop in target) return Reflect.get(target, prop, target)
-      if (prop in context) {
-        return Reflect.get(context, prop, context)
-      }
-      return Reflect.get(target, prop, target)
-    },
-    set(target, prop, value) {
-      if (prop in target) return Reflect.set(target, prop, value, target)
-      if (prop in context) {
-        return Reflect.set(context, prop, value, context)
-      }
-      return Reflect.set(target, prop, value, target)
-    },
-    has(target, prop) {
-      if (prop in target) return true
-      if (prop in context) return true
-      return false
-    },
-  })
-}
-
-export function parseNode(node: Node, context: Context) {
-  if (node.nodeType !== Node.ELEMENT_NODE) return
-
-  const el = node as HTMLElement
-  const scope = processScope(el, context)
-  if (!scope) return
-
-  const forAttrs = ['ui:for', ':for']
-  const forDirective = getDirectiveValue(el, forAttrs)
-  if (forDirective) {
-    removeDirectiveAttributes(el, forAttrs)
-    processFor(el, forDirective, scope)
-    return
-  }
-
-  const ifAttrs = ['ui:if', ':if']
-  const ifDirective = getDirectiveValue(el, ifAttrs)
-  if (ifDirective) {
-    removeDirectiveAttributes(el, ifAttrs)
-    processIf(el, ifDirective, scope)
-  }
-
-  processAttributes(el, scope)
-
-  const children = Array.from(el.childNodes)
-  for (const child of children) parseNode(child, scope)
-}
-
-export function createScope(
-  selectorOrElement: string | HTMLElement,
-  context: Context = {},
-) {
-  const el =
-    typeof selectorOrElement === 'string'
-      ? document.querySelector(selectorOrElement)
-      : selectorOrElement
-
-  if (el) {
-    if (!context.$emit) {
-      context.$emit = (eventName: string, detail?: any) => {
-        el.dispatchEvent(
-          new CustomEvent(eventName, { detail, bubbles: true, composed: true }),
-        )
-      }
-    }
-
-    parseNode(el, context)
-  } else {
-    console.warn('[jsweb/ui] Element not found:', selectorOrElement)
-  }
-}
-
-function bindEffect(node: Node, fn: () => void) {
-  const e = effect(fn)
-  const bNode = node as BoundNode
-  bNode._effects ??= []
-  bNode._effects.push(e.stop)
-}
-
-function getDirectiveValue(el: HTMLElement, names: string[]) {
-  for (const name of names) {
-    const value = el.getAttribute(name)
-    if (value !== null) return value
-  }
-  return null
-}
-
-function removeDirectiveAttributes(el: HTMLElement, names: string[]) {
-  for (const name of names) {
-    el.removeAttribute(name)
-  }
-}
-
-function processScope(el: HTMLElement, context: Context) {
-  const attrs = ['ui:scope', ':scope']
-  const directive = getDirectiveValue(el, attrs)
-  if (!directive) return context
-
-  const scope = evaluate(directive, context)
-  if (!scope) return undefined
-
-  removeDirectiveAttributes(el, attrs)
-
-  if (!scope.$emit) {
-    scope.$emit = (event: string, detail?: any) => {
-      el.dispatchEvent(
-        new CustomEvent(event, { detail, bubbles: true, composed: true }),
-      )
-    }
-  }
-
-  return createContext(scope, context)
-}
-
-function processFor(el: HTMLElement, expr: string, context: Context) {
-  const parent = el.parentNode
-  if (!parent) return
-
-  const match = /^\s*(.+)\s+(?:in|of)\s+(.+)\s*$/.exec(expr)
-  if (!match) {
-    return console.warn(`[jsweb/ui] Invalid ui:for expression: ${expr}`)
-  }
-  const [, itemName, listName] = match
-
-  const keyAttr = ['ui:key', ':key']
-  const keyDirective = getDirectiveValue(el, keyAttr)
-  removeDirectiveAttributes(el, keyAttr)
-
-  const uuid = crypto.randomUUID()
-  const comment = document.createComment(` ui:for ${uuid} `)
-  el.replaceWith(comment)
-
-  interface RenderedNode {
-    key: any
-    el: HTMLElement
-    scope: any
-  }
-  let renderedNodes: RenderedNode[] = []
-
-  bindEffect(comment, () => {
-    const list = evaluate(listName, context)
-
-    if (!Array.isArray(list)) {
-      renderedNodes.forEach((node) => {
-        node.el.remove()
-        cleanupTree(node.el)
-      })
-      renderedNodes = []
-      return
-    }
-
-    const newNodes: RenderedNode[] = []
-    const oldNodesByKey = new Map<any, RenderedNode>()
-    renderedNodes.forEach((node) => oldNodesByKey.set(node.key, node))
-
-    list.forEach((item, index) => {
-      const scope = { [itemName]: item, $index: index }
-      let key: any = index
-
-      if (keyDirective) {
-        const tempContext = createContext(scope, context)
-        key = evaluate(keyDirective, tempContext)
-      }
-
-      let node = oldNodesByKey.get(key)
-      if (node) {
-        // Reuse node
-        node.scope[itemName] = item
-        node.scope.$index = index
-        oldNodesByKey.delete(key)
-      } else {
-        // Create new node
-        const clone = el.cloneNode(true) as HTMLElement
-        const reactiveScope = reactive(scope)
-        const localContext = createContext(reactiveScope, context)
-        parseNode(clone, localContext)
-        node = { key, el: clone, scope: reactiveScope }
-      }
-
-      newNodes.push(node)
-    })
-
-    // Remove un-reused nodes
-    oldNodesByKey.forEach((node) => {
-      node.el.remove()
-      cleanupTree(node.el)
-    })
-
-    // Reorder and insert new DOM nodes
-    let currentAnchor = comment.nextSibling
-    newNodes.forEach((node) => {
-      if (currentAnchor === node.el) {
-        currentAnchor = currentAnchor.nextSibling
-      } else {
-        comment.parentNode?.insertBefore(node.el, currentAnchor)
-      }
-    })
-
-    renderedNodes = newNodes
-  })
-}
-
-function processIf(el: HTMLElement, expr: string, context: Context) {
-  const parent = el.parentNode
-  if (!parent) return
-
-  const uuid = crypto.randomUUID()
-  const comment = document.createComment(` ui:if ${uuid} `)
-  el.before(comment)
-
-  bindEffect(comment, () => {
-    const val = evaluate(expr, context)
-    if (val) {
-      if (!el.parentNode) {
-        comment.parentNode?.insertBefore(el, comment.nextSibling)
-      }
-    } else if (el.parentNode) {
-      el.remove()
-    }
-  })
-}
-
-function processAttributes(el: HTMLElement, context: Context) {
-  const attrs = Array.from(el.attributes)
-
-  for (const attr of attrs) {
-    const { name, value } = attr
-    const isText = ['ui:text', ':text'].includes(name)
-    const isTwoWayBind = ['ui:bind', ':bind'].includes(name)
-    const isClassBind = ['ui:class', ':class'].includes(name)
-    const isStyleBind = ['ui:style', ':style'].includes(name)
-    const isAttrBind = name.startsWith('ui:') || name.startsWith(':')
-    const isEvent = name.startsWith('ui@') || name.startsWith('@')
-
-    if (isText) {
-      processTextBinding(el, value, context)
-      el.removeAttribute(name)
-    } else if (isTwoWayBind) {
-      processTwoWayBinding(el, value, context)
-      el.removeAttribute(name)
-    } else if (isClassBind) {
-      processClassBinding(el, value, context)
-      el.removeAttribute(name)
-    } else if (isStyleBind) {
-      processStyleBinding(el, value, context)
-      el.removeAttribute(name)
-    } else if (isAttrBind) {
-      const bound = name.split(':').pop()!
-      processAttrBinding(el, bound, value, context)
-      el.removeAttribute(name)
-    } else if (isEvent) {
-      processEventBinding(el, name, value, context)
-      el.removeAttribute(name)
-    }
-  }
-}
-
-function processTextBinding(el: HTMLElement, expr: string, context: Context) {
-  bindEffect(el, () => {
-    const val = evaluate(expr, context)
-    el.textContent = val !== undefined && val !== null ? String(val) : ''
-  })
-}
-
-function processTwoWayBinding(el: HTMLElement, expr: string, context: Context) {
-  const isCheckbox = el instanceof HTMLInputElement && el.type === 'checkbox'
-  const isRadio = el instanceof HTMLInputElement && el.type === 'radio'
-
-  // 1. Reactive state to DOM
-  bindEffect(el, () => {
-    const val = evaluate(expr, context)
-    if (isCheckbox) {
-      el.checked = !!val
-    } else if (isRadio) {
-      el.checked = el.value === String(val)
-    } else {
-      const target = el as
-        | HTMLInputElement
-        | HTMLSelectElement
-        | HTMLTextAreaElement
-      target.value = val == null ? '' : String(val)
-    }
-  })
-
-  // 2. DOM to Reactive state
-  const isChange = isCheckbox || isRadio || el instanceof HTMLSelectElement
-  const eventName = isChange ? 'change' : 'input'
-  el.addEventListener(eventName, ($event) => {
-    const target = isCheckbox ? 'checked' : 'value'
-    const value = `$event.target.${target}`
-    evaluateEvent($event, `${expr} = ${value}`, context)
-  })
-}
-
-function processAttrBinding(
-  el: HTMLElement,
-  attr: string,
-  expr: string,
-  context: Context,
-) {
-  bindEffect(el, () => {
-    const val = evaluate(expr, context)
-    if (val === null || val === undefined || val === false) {
-      el.removeAttribute(attr)
-    } else if (val === true) {
-      el.setAttribute(attr, '')
-    } else {
-      el.setAttribute(attr, String(val))
-    }
-  })
-}
-
-function processClassBinding(el: HTMLElement, expr: string, context: Context) {
-  let oldClasses = new Set<string>()
-
-  bindEffect(el, () => {
-    const val = evaluate(expr, context)
-    const newClasses = new Set<string>()
-    const addClass = (c: string) => c && newClasses.add(c)
-    const addClasses = (c: string) => c.split(/\s+/).forEach(addClass)
-
-    if (typeof val === 'string') addClasses(val)
-    else if (Array.isArray(val)) {
-      val.flat().forEach((c: any) => {
-        if (typeof c === 'string') addClasses(c)
-      })
-    } else if (typeof val === 'object' && val !== null) {
-      Object.entries(val).forEach(([c, condition]: [string, any]) => {
-        if (condition) addClasses(c)
-      })
-    }
-
-    oldClasses.forEach((c) => {
-      if (!newClasses.has(c)) el.classList.remove(c)
-    })
-    newClasses.forEach((c) => {
-      if (!oldClasses.has(c)) el.classList.add(c)
-    })
-
-    oldClasses = newClasses
-  })
-}
-
-function processStyleBinding(el: HTMLElement, expr: string, context: Context) {
-  let oldStyles: Record<string, any> = {}
-
-  bindEffect(el, () => {
-    const val = evaluate(expr, context)
-    const newStyles = typeof val === 'object' && val !== null ? val : {}
-
-    for (const key in oldStyles) {
-      if (!(key in newStyles)) {
-        ;(el.style as any)[key] = ''
-      }
-    }
-
-    for (const key in newStyles) {
-      if (oldStyles[key] !== newStyles[key]) {
-        ;(el.style as any)[key] = newStyles[key]
-      }
-    }
-
-    oldStyles = { ...newStyles }
-  })
-}
-
-function processEventBinding(
-  el: HTMLElement,
-  evt: string,
-  expr: string,
-  context: Context,
-) {
-  const refs = evt.split('@').pop()!
-  const [name, ...modifiers] = refs.split('.')
-
-  const isOutside = modifiers.includes('outside')
-  const target = isOutside ? document : el
-
-  const handler: EventListener = ($event: Event) => {
-    if (!el.isConnected) return
-
-    const isTargetNode = $event.target instanceof Node
-
-    if (isOutside && isTargetNode && el.contains($event.target)) return
-    if (modifiers.includes('self') && $event.target !== el) return
-
-    if (modifiers.includes('prevent')) $event.preventDefault()
-    if (modifiers.includes('stop')) $event.stopPropagation()
-
-    evaluateEvent($event, expr, context)
-  }
-
-  target.addEventListener(name, handler)
-
-  if (isOutside) {
-    const bNode = el as BoundNode
-    bNode._effects ??= []
-    bNode._effects.push(() => target.removeEventListener(name, handler))
-  }
-}

package/src/reactivity.ts

@@ -1,177 +0,0 @@
-let activeEffect: symbol | null = null
-const targetMap = new WeakMap<
-  object,
-  Map<string | symbol, Set<ReactiveEffect>>
->()
-const proxyMap = new WeakMap<object, any>()
-const effectMap = new WeakMap<symbol, ReactiveEffect>()
-
-export class ReactiveEffect {
-  active = true
-  deps: Set<Set<ReactiveEffect>> = new Set()
-
-  constructor(public fn: () => void) {}
-
-  run() {
-    if (!this.active) return this.fn()
-
-    this.cleanup()
-
-    activeEffect = Symbol()
-    effectMap.set(activeEffect, this)
-
-    try {
-      return this.fn()
-    } finally {
-      effectMap.delete(activeEffect)
-      activeEffect = null
-    }
-  }
-
-  stop() {
-    if (this.active) {
-      this.cleanup()
-      this.active = false
-    }
-  }
-
-  cleanup() {
-    this.deps.forEach((dep) => dep.delete(this))
-    this.deps.clear()
-  }
-
-  effect() {
-    return {
-      run: () => this.run(),
-      stop: () => this.stop(),
-    }
-  }
-}
-
-export function effect(fn: () => void) {
-  const ref = new ReactiveEffect(fn)
-  ref.run()
-  return ref.effect()
-}
-
-export function track(target: object, key: string | symbol) {
-  if (activeEffect) {
-    let depsMap = targetMap.get(target)
-    if (!depsMap) {
-      depsMap = new Map()
-      targetMap.set(target, depsMap)
-    }
-
-    let dep = depsMap.get(key)
-    if (!dep) {
-      dep = new Set()
-      depsMap.set(key, dep)
-    }
-
-    const active = effectMap.get(activeEffect)
-    if (active) {
-      dep.add(active)
-      active.deps.add(dep)
-    }
-  }
-}
-
-export function trigger(target: object, key: string | symbol) {
-  const depsMap = targetMap.get(target)
-  if (!depsMap) return
-
-  const dep = depsMap.get(key)
-  if (dep) {
-    const effects = new Set(dep)
-    effects.forEach((effect) => effect.run())
-  }
-}
-
-export function reactive<T extends object>(target: T): T {
-  const notObject = typeof target !== 'object' || target === null
-  if (notObject) return target
-
-  const isReactive = Object.hasOwn(target, '_isReactive')
-  if (isReactive) return target
-
-  const existingProxy = proxyMap.get(target)
-  if (existingProxy) return existingProxy
-
-  const proxy = new Proxy(target, {
-    get(obj, key, receiver) {
-      if (key === '_isReactive') return true
-      track(obj, key)
-
-      // getter
-      const desc = Object.getOwnPropertyDescriptor(obj, key)
-      if (desc?.get) return desc.get.call(obj)
-
-      const res = Reflect.get(obj, key, receiver)
-      // deep reactivity
-      return typeof res === 'object' && res !== null ? reactive(res) : res
-    },
-    set(obj, key, value, receiver) {
-      const isArray = Array.isArray(obj)
-      const oldValue = Reflect.get(obj, key, receiver)
-      const hadKey =
-        isArray && String(Number(key)) === key
-          ? Number(key) < obj.length
-          : Object.hasOwn(obj, key)
-
-      const result = Reflect.set(obj, key, value, receiver)
-
-      if (!hadKey) {
-        trigger(obj, key)
-        if (isArray && key !== 'length') {
-          trigger(obj, 'length')
-        }
-      } else if (oldValue !== value) {
-        trigger(obj, key)
-      }
-
-      return result
-    },
-  })
-
-  proxyMap.set(target, proxy)
-  return proxy
-}
-
-export function traverse(value: any, seen = new Set()) {
-  if (typeof value !== 'object' || value === null || seen.has(value)) {
-    return value
-  }
-  seen.add(value)
-  for (const key in value) {
-    traverse(value[key], seen)
-  }
-  return value
-}
-
-export function watch(
-  source: any | (() => any),
-  cb: (newValue: any, oldValue: any) => void,
-  options?: { immediate?: boolean },
-) {
-  let oldValue: any
-  let isFirstRun = true
-
-  const getter = source instanceof Function ? source : () => traverse(source)
-
-  const runner = effect(() => {
-    const newValue = getter()
-
-    if (isFirstRun) {
-      isFirstRun = false
-      oldValue = newValue
-      if (options?.immediate) {
-        cb(newValue, undefined)
-      }
-    } else {
-      cb(newValue, oldValue)
-      oldValue = newValue
-    }
-  })
-
-  return runner.stop
-}

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src", "vite.config.ts"]
-}

package/vite.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-
-export default defineConfig({
-  build: {
-    lib: {
-      name: '@jsweb/ui',
-      formats: ['es', 'umd'],
-      entry: './src/index.ts',
-      fileName: (format: string) => `index.${format}.js`,
-    },
-    sourcemap: true,
-    minify: 'terser',
-  },
-  plugins: [dts({ insertTypesEntry: true })],
-})