npm - @jsweb/ui - Versions diffs - 1.2.4 → 1.2.6 - Mend

@jsweb/ui 1.2.4 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/.github/workflows/npm-publish.yml +21 -0
package/.prettierignore +3 -0
package/.prettierrc +7 -0
package/HISTORY.md +36 -0
package/PROJECT.md +90 -0
package/dist/LICENSE +21 -0
package/dist/README.md +104 -0
package/dist/index.es.js +2 -0
package/dist/index.es.js.map +1 -0
package/dist/index.umd.js +2 -0
package/dist/index.umd.js.map +1 -0
package/dist/package.json +34 -0
package/index.html +162 -0
package/package.json +24 -8
package/publish.js +34 -0
package/src/evaluator.ts +29 -0
package/src/index.ts +10 -0
package/src/parser.ts +426 -0
package/src/reactivity.ts +177 -0
package/tsconfig.json +23 -0
package/vite.config.ts +16 -0
package/index.es.js +0 -2
package/index.es.js.map +0 -1
package/index.umd.js +0 -2
package/index.umd.js.map +0 -1
/package/{index.d.ts → dist/index.d.ts} +0 -0
/package/{src → dist/src}/evaluator.d.ts +0 -0
/package/{src → dist/src}/index.d.ts +0 -0
/package/{src → dist/src}/parser.d.ts +0 -0
/package/{src → dist/src}/reactivity.d.ts +0 -0
/package/{vite.config.d.ts → dist/vite.config.d.ts} +0 -0

package/index.html ADDED Viewed

@@ -0,0 +1,162 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS Web UI Test</title>
+    <style>
+      .box {
+        padding: 20px;
+        border-radius: 8px;
+        transition: all 0.3s ease;
+        margin-bottom: 10px;
+        color: white;
+      }
+      .active {
+        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+        transform: scale(1.02);
+      }
+    </style>
+    <script type="module">
+      import { createScope, reactive } from '/src/index.ts'
+      const scope = reactive({
+        count: 0,
+        inc: 'Incremento',
+        dec: 'Decremento',
+        model: 'Exemplo',
+        items: ['A', 'B', 'C'],
+        active: false,
+        color: '#42b883',
+        get computedItems() {
+          return this.items.map((value, index) => {
+            return { value, index }
+          })
+        },
+        increment() {
+          this.count++
+        },
+        decrement() {
+          this.count--
+        },
+        zero() {
+          this.count = 0
+        },
+        addItem() {
+          const value = Date.now()
+          this.items.push(value)
+        },
+        removeItem() {
+          this.items.pop()
+        },
+        logEvent(e, ...args) {
+          console.log('Evento recebido:', e, args)
+          this.items.push(`Evento ${e.type}`)
+        },
+        toggleActive() {
+          this.active = !this.active
+        },
+        handleCustomEvent(e) {
+          alert(`Custom event received: ${e.detail.message}`)
+          this.items.push(`Custom Event: ${e.detail.message}`)
+        },
+      })
+      window.scope = scope
+      createScope('body', { scope })
+    </script>
+  </head>
+  <body>
+    <div :scope="scope">
+      <h1>JS Web UI</h1>
+      <p>Contador: <span :text="count"></span></p>
+      <button :text="inc" @click="increment">+</button>
+      <button :text="dec" @click="decrement">-</button>
+      <div style="margin-top: 20px">
+        <button @click="zero" :disabled="!count">Zerar</button>
+      </div>
+      <div
+        :if="count > 0"
+        style="margin-top: 20px; padding: 10px; border: 1px solid green"
+      >
+        O contador é maior que zero!
+      </div>
+      <div style="margin-top: 20px">
+        <h3>Lista:</h3>
+        <div style="margin-bottom: 10px">
+          <input type="text" :bind="model" placeholder="Digite algo..." />
+          <p>Você vai adicionar: <strong :text="model"></strong></p>
+          <button @click="addItem">Adicionar Item</button>
+          <button @click="removeItem">Remover Item</button>
+          <button @click="logEvent">Testar Evento (Sem Parênteses)</button>
+          <button @click="logEvent($event, 'A', 'B', 'C')">
+            Testar Evento (Com Parênteses)
+          </button>
+        </div>
+        <ul>
+          <li :for="item of computedItems">
+            <span :text="item.index"></span>
+            <input type="text" :value="item.value" />
+          </li>
+        </ul>
+      </div>
+      <hr />
+      <div style="margin-top: 20px">
+        <h3>Testes de :class e :style</h3>
+        <div
+          class="box"
+          :class="{ active }"
+          :style="{ backgroundColor: color, opacity: count ? 1 : 0.5 }"
+        >
+          Caixa de teste! Ativa: <strong :text="active"></strong>
+        </div>
+        <div style="margin-top: 10px">
+          <button @click="toggleActive">Alternar Classe 'active'</button>
+          <label style="margin-left: 10px">
+            Cor de Fundo:
+            <input type="color" :bind="color" />
+          </label>
+        </div>
+      </div>
+      <hr />
+      <div style="margin-top: 20px" @custom-event="handleCustomEvent">
+        <h3>Teste de $emit (Comunicação de Eventos)</h3>
+        <p>A div pai está escutando <code>@custom-event</code>.</p>
+        <!-- Escopo Filho Simulado -->
+        <div
+          :scope="{ component: 'Componente Interno' }"
+          style="
+            padding: 0 15px 15px 15px;
+            border: 2px dashed silver;
+            margin-top: 10px;
+          "
+        >
+          <p>Nome interno: <strong :text="component"></strong></p>
+          <button
+            @click="
+              $emit(
+                'custom-event',
+                { message: `Mensagem enviada do ${component}` },
+              )
+            "
+          >
+            Disparar evento para o pai
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jsweb/ui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "JS Web Microframework",
   "keywords": [
     "js",
@@ -21,14 +21,30 @@
   "license": "MIT",
   "author": "Alex Bruno Cáceres <email@alexbruno.dev>",
   "type": "module",
-  "main": "index.umd.js",
-  "module": "index.es.js",
-  "types": "index.d.ts",
+  "main": "dist/ui.umd.js",
+  "module": "dist/ui.es.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./index.es.js",
-      "require": "./index.umd.js",
-      "types": "./index.d.ts"
+      "import": "./dist/ui.es.js",
+      "require": "./dist/ui.umd.js",
+      "types": "./dist/index.d.ts"
     }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && node publish.js",
+    "preview": "vite preview",
+    "format": "prettier --write .",
+    "test": "echo 'test'",
+    "preversion": "npm run build",
+    "postversion": "git push && git push --tags"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.3",
+    "terser": "^5.46.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.0"
   }
-}
+}

package/publish.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { resolve } from 'node:path'
+import { copyFileSync, readFileSync, writeFileSync } from 'node:fs'
+const root = process.cwd()
+const source = resolve(root, 'package.json')
+const target = resolve(root, 'dist/package.json')
+const pkgInfo = JSON.parse(readFileSync(source, 'utf8'))
+// 1. Remove campos que não são necessários no pacote publicado
+delete pkgInfo.scripts
+delete pkgInfo.devDependencies
+// 2. Ajusta os caminhos dos arquivos, pois o root do pacote agora será a pasta dist/
+pkgInfo.main = 'index.umd.js'
+pkgInfo.module = 'index.es.js'
+pkgInfo.types = 'index.d.ts'
+pkgInfo.exports = {
+  '.': {
+    import: './index.es.js',
+    require: './index.umd.js',
+    types: './index.d.ts',
+  },
+}
+// 3. Salva o package.json modificado dentro da pasta dist/
+writeFileSync(target, JSON.stringify(pkgInfo, null, 2))
+// 4. Copia arquivos de metadados importantes para o NPM
+copyFileSync(resolve(root, 'README.md'), resolve(root, 'dist/README.md'))
+copyFileSync(resolve(root, 'LICENSE'), resolve(root, 'dist/LICENSE'))
+console.log(
+  '✅ Arquivo package.json mínimo e metadados preparados na pasta dist/',
+)

package/src/evaluator.ts ADDED Viewed

@@ -0,0 +1,29 @@
+export function evaluate(
+  expression: string,
+  context: Record<string, any> = {},
+) {
+  try {
+    const fn = new Function(`with(this) { return ${expression} }`)
+    return fn.call(context)
+  } catch {
+    return undefined
+  }
+}
+export function evaluateEvent(
+  $event: Event,
+  expression: string,
+  context: Record<string, any> = {},
+) {
+  try {
+    const exp = expression.trim()
+    const isIdentifier = /^[a-zA-Z_$][0-9a-zA-Z_$.]*$/.test(exp)
+    const code = `${exp} instanceof Function ? ${exp}.call(this, $event) : ${exp}`
+    const result = isIdentifier ? code : exp
+    const fn = new Function('$event', `with(this) { ${result} }`)
+    fn.call(context, $event)
+  } catch {
+    console.warn(`[jsweb/ui] Error evaluating event: ${expression}`)
+  }
+}

package/src/index.ts ADDED Viewed

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

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