npm - rxflare-js - Versions diffs - 0.0.1 - Mend

rxflare-js 0.0.1

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 (8) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,43 @@
+# RxFlare
+Fine-grained reactive framework inspired by:
+- SolidJS
+- Vue Vapor
+- Svelte
+## Install
+```bash
+npm install rxflare
+```
+## Usage
+```js
+import {
+  state,
+  derived,
+  compile,
+  createComponent,
+  render
+} from 'rxflare';
+const count = state(0);
+const App =
+  compile(`
+<div>
+  {{ count() }}
+</div>
+`);
+render(
+  () =>
+    createComponent(
+      App,
+      { count }
+    ),
+  document.body
+);
+```

package/index.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>RxFlare Demo</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      padding: 40px;
+    }
+    .done {
+      text-decoration: line-through;
+      font-size: 50px;
+      opacity: 0.5;
+    }
+    button {
+      margin-left: 8px;
+    }
+  </style>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="./main.js"></script>
+</body>
+</html>

package/main.js ADDED Viewed

@@ -0,0 +1,183 @@
+import {
+  state,
+  derived,
+  render,
+  compile,
+  createComponent,
+  reconcile
+} from './src/index.js';
+// ======================================================
+// STATE
+// ======================================================
+const count = state(0);
+const todos = state([
+  {
+    id: 1,
+    text: 'Build compiler'
+  },
+  {
+    id: 2,
+    text: 'Build vapor'
+  }
+]);
+const double = derived(() => {
+  return count() * 2;
+});
+// ======================================================
+// TEMPLATES
+// ======================================================
+const AppTemplate =
+  compile(
+`
+<div class="app">
+  <h1>
+    Count:
+    {{ count() }}
+  </h1>
+  <p>
+    Double:
+    {{ double() }}
+  </p>
+  <button>
+    INC
+  </button>
+  <button :class="count() % 2 ? 'red' : 'blue'">
+    COLOR
+  </button>
+  <div id="list"></div>
+</div>
+`
+);
+const TodoTemplate =
+  compile(
+`
+<div class="todo">
+  {{ item.text }}
+</div>
+`
+);
+// ======================================================
+// APP
+// ======================================================
+function App() {
+  const root =
+    createComponent(
+      AppTemplate,
+      {
+        count,
+        double
+      }
+    );
+  // ======================================================
+  // BUTTONS
+  // ======================================================
+  const buttons =
+    root.querySelectorAll('button');
+  buttons[0].onclick = () => {
+    count.set(
+      count() + 1
+    );
+  };
+  buttons[1].onclick = () => {
+    count.set(
+      count() + 1
+    );
+  };
+  // ======================================================
+  // LIST
+  // ======================================================
+  const list =
+    root.querySelector('#list');
+  reconcile(
+    list,
+    todos,
+    item => {
+      return createComponent(
+        TodoTemplate,
+        {
+          item
+        }
+      );
+    }
+  );
+  // ======================================================
+  // ADD TODO
+  // ======================================================
+  setInterval(() => {
+    todos.set([
+      ...todos(),
+      {
+        id: Date.now(),
+        text:
+          'TODO ' +
+          todos().length
+      }
+    ]);
+  }, 3000);
+  return root;
+}
+// ======================================================
+// RENDER
+// ======================================================
+render(
+  App,
+  document.getElementById('app')
+);

package/package.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "name": "rxflare-js",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./core": "./src/core.js",
+    "./dom": "./src/dom.js",
+    "./compiler": "./src/compiler.js"
+  },
+  "keywords": [
+    "reactive",
+    "signals",
+    "solidjs",
+    "vue",
+    "compiler",
+    "framework"
+  ],
+  "author": "msfm2018",
+  "license": "MIT",
+  "description": "Fine-grained reactive UI framework",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/msfm2018/rxflare-js"
+  }
+}

package/src/compiler.js ADDED Viewed

@@ -0,0 +1,322 @@
+// Fixed version of rxflare-compiler.js
+// Key fixes:
+// 1. Path calculation bug during mutations (sibling index shifts)
+// 2. Better handling using markers for dynamic parts
+// 3. Attach instructions via a registry using node references (with clone mapping)
+import { root } from './core.js';
+import { insert, prop, show, reconcile } from './dom.js';
+export function compile(htmlString) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlString, 'text/html');
+  const fragment = document.createDocumentFragment();
+  while (doc.body.firstChild) {
+    fragment.appendChild(doc.body.firstChild);
+  }
+  const instructions = [];
+  const nodeToIns = new Map(); // For elements/markers
+  // 深度优先遍历，处理指令并插入 marker
+  function traverse(node) {
+    if (!node) return;
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      // 处理 :if
+      if (node.hasAttribute(':if')) {
+        const expr = node.getAttribute(':if');
+        const subNode = node.cloneNode(true);
+        subNode.removeAttribute(':if');
+        const marker = document.createComment(`rx-if:${expr}`);
+        node.parentNode.replaceChild(marker, node);
+        instructions.push({
+          type: 'if',
+          marker,
+          getter: compileExpression(expr),
+          subTemplate: compile(subNode.outerHTML)
+        });
+        nodeToIns.set(marker, instructions[instructions.length - 1]);
+        return;
+      }
+      // 处理 :for
+      if (node.hasAttribute(':for')) {
+        const rawExpr = node.getAttribute(':for');
+        const match = rawExpr.match(/^\s*(?:([\w\s,]+)|(?:\(([\w\s,]+)\)))\s+in\s+(.+)$/);
+        if (!match) throw new Error(`RxFlare 语法错误: :for 格式必须为 'item in list'`);
+        const iterators = (match[1] || match[2]).split(',').map(s => s.trim());
+        const itemParam = iterators[0];
+        const indexParam = iterators[1] || '$index';
+        const listExpr = match[3].trim();
+        const subNode = node.cloneNode(true);
+        subNode.removeAttribute(':for');
+        const marker = document.createComment(`rx-for:${listExpr}`);
+        node.parentNode.replaceChild(marker, node);
+        instructions.push({
+          type: 'for',
+          marker,
+          getter: compileExpression(listExpr),
+          itemParam,
+          indexParam,
+          subTemplate: compile(subNode.outerHTML)
+        });
+        nodeToIns.set(marker, instructions[instructions.length - 1]);
+        return;
+      }
+      // 处理属性绑定 (包括 :class, :style 等)
+      const attrs = Array.from(node.attributes);
+      attrs.forEach(attr => {
+        const name = attr.name;
+        const expr = attr.value;
+        if (name.startsWith('@') || name.startsWith(':on')) {
+          const eventName = name.startsWith('@') ? name.slice(1) : name.slice(3);
+          node.removeAttribute(name);
+          instructions.push({
+            type: 'event',
+            target: node,  // element itself
+            eventName,
+            getter: compileExpression(expr)
+          });
+          nodeToIns.set(node, instructions[instructions.length - 1]); // last one, but better collect list
+        } else if (name === ':model') {
+          node.removeAttribute(name);
+          instructions.push({
+            type: 'model',
+            target: node,
+            propName: expr.trim()
+          });
+          nodeToIns.set(node, instructions[instructions.length - 1]);
+        } else if (name.startsWith(':')) {
+          const propName = name.slice(1);
+          node.removeAttribute(name);
+          instructions.push({
+            type: 'prop',
+            target: node,
+            propName,
+            getter: compileExpression(expr)
+          });
+          nodeToIns.set(node, instructions[instructions.length - 1]);
+        }
+      });
+    }
+    // 处理 TEXT 插值
+    else if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.nodeValue;
+      const regex = /\{\{(.*?)\}\}/g;
+      if (regex.test(text)) {
+        const parent = node.parentNode;
+        const container = document.createDocumentFragment();
+        const segments = text.split(/\{\{(.*?)\}\}/g);
+        segments.forEach((seg, index) => {
+          if (index % 2 === 0) {
+            if (seg) container.appendChild(document.createTextNode(seg));
+          } else {
+            const marker = document.createComment('rx-text');
+            container.appendChild(marker);
+            instructions.push({
+              type: 'text',
+              marker,
+              getter: compileExpression(seg.trim())
+            });
+            nodeToIns.set(marker, instructions[instructions.length - 1]);
+          }
+        });
+        parent.replaceChild(container, node);
+        return;
+      }
+    }
+    // 递归子节点
+    let child = node.firstChild;
+    while (child) {
+      const next = child.nextSibling;
+      traverse(child);
+      child = next;
+    }
+  }
+  Array.from(fragment.childNodes).forEach(child => traverse(child));
+  return {
+    template: fragment,
+    instructions,
+    // nodeToIns not needed for runtime
+  };
+}
+function compileExpression(expr) {
+  try {
+    return new Function('scope', `
+      try {
+        with(scope) { return ${expr}; }
+      } catch(e) {
+        console.error('Expr error:', e);
+        return '';
+      }
+    `);
+  } catch (e) {
+    console.error(`RxFlare 表达式解析错误: ${expr}`);
+    return () => '';
+  }
+}
+// New createComponent using marker/target references + clone mapping
+export function createComponent(compiledResult, scope = {}) {
+  return root(dispose => {
+    const clone = compiledResult.template.cloneNode(true);
+    // Create mapping from original nodes to cloned nodes by traversing both in parallel
+    const nodeMap = new Map();
+    function mapNodes(original, cloned) {
+      if (!original || !cloned) return;
+      nodeMap.set(original, cloned);
+      // Map children
+      let oChild = original.firstChild;
+      let cChild = cloned.firstChild;
+      while (oChild && cChild) {
+        mapNodes(oChild, cChild);
+        oChild = oChild.nextSibling;
+        cChild = cChild.nextSibling;
+      }
+    }
+    mapNodes(compiledResult.template, clone);
+    // Apply all instructions using mapped nodes
+    compiledResult.instructions.forEach(ins => {
+      let target;
+      if (ins.marker) {
+        target = nodeMap.get(ins.marker);
+      } else if (ins.target) {
+        target = nodeMap.get(ins.target);
+      }
+      if (!target) {
+        console.warn('Target not found for instruction', ins);
+        return;
+      }
+      switch (ins.type) {
+        case 'text':
+          insert(target, () => ins.getter(scope));
+          break;
+        case 'prop':
+          prop(target, ins.propName, () => ins.getter(scope));
+          break;
+        case 'event': {
+prop(
+target,
+`on${ins.eventName}`,
+e => {
+const eventScope =
+Object.create(scope);
+eventScope.$event = e;
+return ins.getter(eventScope);
+}
+);
+break;
+}
+        case 'model':
+          if (target.tagName === 'INPUT' && (target.type === 'checkbox' || target.type === 'radio')) {
+            prop(target, 'checked', () => scope[ins.propName]);
+            target.addEventListener('change', e => {
+              if (typeof scope[ins.propName] !== 'undefined') scope[ins.propName] = e.target.checked;
+            });
+          } else {
+            prop(target, 'value', () => scope[ins.propName]);
+            target.addEventListener('input', e => {
+              if (typeof scope[ins.propName] !== 'undefined') scope[ins.propName] = e.target.value;
+            });
+          }
+          break;
+        case 'if':
+          show(target, () => !!ins.getter(scope), () => {
+            return createComponent(ins.subTemplate, scope);
+          });
+          break;
+       case 'for': {
+const endMarker =
+document.createComment('rx-for-end');
+target.parentNode.insertBefore(
+endMarker,
+target.nextSibling
+);
+reconcile(
+target,
+endMarker,
+() => ins.getter(scope) || [],
+(item, index) => {
+const itemScope =
+Object.create(scope);
+  itemScope[ins.itemParam] = item;
+  itemScope[ins.indexParam] = index;
+  return createComponent(
+    ins.subTemplate,
+    itemScope
+  );
+}
+);
+break;
+}
+      }
+    });
+const first =
+  clone.firstElementChild ||
+  clone.firstChild;
+if (first) {
+  first.dispose = dispose;
+}
+return first;
+//     const first = clone.firstElementChild || clone.firstChild;
+//     if (first) first.dispose = dispose;
+//     const wrapper =
+// document.createElement('div');
+// wrapper.appendChild(clone);
+// wrapper.dispose = dispose;
+// return wrapper;
+  });
+}

package/src/core.js ADDED Viewed

@@ -0,0 +1,299 @@
+// ======================================================
+// RXFLARE CORE NEXT++
+// ======================================================
+let activeEffect = null;
+const effectStack = [];
+const scheduled = new Set();
+// ======================================================
+// OWNER TREE
+// ======================================================
+let currentOwner = null;
+function createOwner(parent = currentOwner) {
+  const owner = {
+    parent,
+    cleanups: [],
+    effects: []
+  };
+  return owner;
+}
+export function onCleanup(fn) {
+  if (currentOwner) {
+    currentOwner.cleanups.push(fn);
+  }
+}
+function cleanupOwner(owner) {
+  owner.cleanups.forEach(fn => fn());
+  owner.cleanups.length = 0;
+  owner.effects.forEach(e => e.stop());
+  owner.effects.length = 0;
+}
+// ======================================================
+// SIGNAL
+// ======================================================
+export function state(initial) {
+  let value = initial;
+  const subscribers = new Set();
+  function signal() {
+    if (activeEffect) {
+      subscribers.add(activeEffect);
+      activeEffect.deps.add(subscribers);
+    }
+    return value;
+  }
+  signal.set = next => {
+    if (Object.is(value, next)) return;
+    value = next;
+    subscribers.forEach(schedule);
+  };
+  signal.peek = () => value;
+  return signal;
+}
+// ======================================================
+// EFFECT
+// ======================================================
+export function effect(fn) {
+  const owner = currentOwner;
+  const effectFn = {
+    active: true,
+    deps: new Set(),
+    cleanups: [],
+    run() {
+      if (!effectFn.active) return;
+      cleanup(effectFn);
+      effectStack.push(effectFn);
+      activeEffect = effectFn;
+      const prevOwner = currentOwner;
+      currentOwner = owner;
+      fn();
+      currentOwner = prevOwner;
+      effectStack.pop();
+      activeEffect =
+        effectStack[
+          effectStack.length - 1
+        ] || null;
+    },
+    stop() {
+      if (!effectFn.active) return;
+      effectFn.active = false;
+      cleanup(effectFn);
+    }
+  };
+  if (owner) {
+    owner.effects.push(effectFn);
+  }
+  effectFn.run();
+  return effectFn;
+}
+function cleanup(effectFn) {
+  effectFn.deps.forEach(dep => {
+    dep.delete(effectFn);
+  });
+  effectFn.deps.clear();
+  effectFn.cleanups.forEach(fn => fn());
+  effectFn.cleanups.length = 0;
+}
+function schedule(effectFn) {
+  if (
+    !effectFn.active ||
+    scheduled.has(effectFn)
+  ) return;
+  scheduled.add(effectFn);
+  queueMicrotask(() => {
+    scheduled.delete(effectFn);
+    effectFn.run();
+  });
+}
+// ======================================================
+// ROOT
+// ======================================================
+export function root(fn) {
+  const prev = currentOwner;
+  const owner = createOwner(prev);
+  currentOwner = owner;
+  const result = fn(() => {
+    cleanupOwner(owner);
+  });
+  currentOwner = prev;
+  return result;
+}
+// ======================================================
+// MEMO
+// ======================================================
+export function derived(fn) {
+  const s = state();
+  effect(() => {
+    s.set(fn());
+  });
+  return s;
+}
+// ======================================================
+// TEMPLATE CACHE
+// ======================================================
+const templateCache = new Map();
+export function template(html) {
+  if (templateCache.has(html)) {
+    return templateCache.get(html);
+  }
+  const tpl =
+    document.createElement('template');
+  tpl.innerHTML = html;
+  templateCache.set(html, tpl);
+  return tpl;
+}
+export function cloneTemplate(html) {
+  return template(html)
+    .content
+    .cloneNode(true);
+}
+// ======================================================
+// RENDER
+// ======================================================
+export function render(
+  component,
+  root
+) {
+  const node = component();
+  root.appendChild(node);
+  return () => {
+    if (node.dispose) {
+      node.dispose();
+    }
+    node.remove();
+  };
+}
+export function store(obj) {
+const signals = {};
+return new Proxy(obj, {
+get(target, key) {
+if (!signals[key]) {
+signals[key] = state(target[key]);
+}
+  return signals[key]();
+},
+set(target, key, value) {
+  target[key] = value;
+  if (!signals[key]) {
+    signals[key] = state(value);
+  }
+  signals[key].set(value);
+  return true;
+}
+});
+}

package/src/dom.js ADDED Viewed

@@ -0,0 +1,394 @@
+// ======================================================
+// RXFLARE DOM NEXT++
+// ======================================================
+import {
+  effect,
+  onCleanup
+} from './core.js';
+// ======================================================
+// INSERT
+// ======================================================
+export function insert(marker, value) {
+  const parent = marker.parentNode;
+  let current = null;
+  effect(() => {
+    const next =
+      typeof value === 'function'
+        ? value()
+        : value;
+    patch(next);
+  });
+  function patch(v) {
+    if (
+      typeof v === 'string' ||
+      typeof v === 'number'
+    ) {
+      if (
+        current &&
+        current.nodeType === Node.TEXT_NODE
+      ) {
+        current.nodeValue = v;
+      } else {
+        clear();
+        current =
+          document.createTextNode(v);
+        parent.insertBefore(
+          current,
+          marker
+        );
+      }
+      return;
+    }
+    if (v instanceof Node) {
+      if (current !== v) {
+        clear();
+        current = v;
+        parent.insertBefore(v, marker);
+      }
+      return;
+    }
+    if (v == null || v === false) {
+      clear();
+    }
+  }
+  function clear() {
+    if (!current) return;
+    current.dispose?.();
+    current.remove?.();
+    current = null;
+  }
+}
+// ======================================================
+// PROP
+// ======================================================
+export function prop(
+  el,
+  key,
+  value
+) {
+  // events
+  if (key.startsWith('on')) {
+    setProp(el, key, value);
+    return;
+  }
+  // reactive bindings
+  if (typeof value === 'function') {
+    effect(() => {
+      setProp(el, key, value());
+    });
+  } else {
+    setProp(el, key, value);
+  }
+}
+function setProp(
+  el,
+  key,
+  value
+) {
+  // event
+  if (key.startsWith('on')) {
+    const event =
+      key.slice(2).toLowerCase();
+    const store =
+      el._vei || (el._vei = {});
+    let invoker =
+      store[event];
+    if (!invoker) {
+      invoker = e => {
+        invoker.value?.(e);
+      };
+      store[event] = invoker;
+      el.addEventListener(
+        event,
+        invoker
+      );
+    }
+    invoker.value = value;
+    return;
+  }
+  if (
+    value == null ||
+    value === false
+  ) {
+    el.removeAttribute(key);
+    return;
+  }
+  if (key === 'class') {
+    el.className = value;
+    return;
+  }
+  if (key === 'style') {
+    Object.assign(el.style, value);
+    return;
+  }
+  if (key in el) {
+    el[key] = value;
+  } else {
+    el.setAttribute(key, value);
+  }
+}
+// ======================================================
+// SHOW
+// ======================================================
+export function show(
+  marker,
+  condition,
+  render
+) {
+  insert(marker, () => {
+    return condition()
+      ? render()
+      : null;
+  });
+}
+// ======================================================
+// EACH
+// ======================================================
+export function each(
+  marker,
+  list,
+  renderItem
+) {
+  insert(marker, () => {
+    return list().map(renderItem);
+  });
+}
+// ======================================================
+// RECONCILE
+// ======================================================
+export function reconcile(
+  containerOrStart,
+  endMarkerOrList,
+  listOrRender,
+  renderItemOrKey,
+  keyFn = item => item?.id ?? item
+) {
+  // ======================================================
+  // COMPAT MODE
+  // reconcile(container, list, renderItem)
+  // ======================================================
+  if (
+    !(endMarkerOrList instanceof Node)
+  ) {
+    const container =
+      containerOrStart;
+    const list =
+      endMarkerOrList;
+    const renderItem =
+      listOrRender;
+    const startMarker =
+      document.createComment(
+        'rx-start'
+      );
+    const endMarker =
+      document.createComment(
+        'rx-end'
+      );
+    container.appendChild(
+      startMarker
+    );
+    container.appendChild(
+      endMarker
+    );
+    return reconcile(
+      startMarker,
+      endMarker,
+      list,
+      renderItem,
+      renderItemOrKey
+    );
+  }
+  // ======================================================
+  // NORMAL MODE
+  // reconcile(start, end, list, render)
+  // ======================================================
+  const startMarker =
+    containerOrStart;
+  const endMarker =
+    endMarkerOrList;
+  const list =
+    listOrRender;
+  const renderItem =
+    renderItemOrKey;
+  let oldMap = new Map();
+  effect(() => {
+    const items =
+      typeof list === 'function'
+        ? list() || []
+        : [];
+    const newMap = new Map();
+    const newNodes = [];
+    items.forEach((item, index) => {
+      const key =
+        keyFn(item);
+      let node =
+        oldMap.get(key);
+      if (!node) {
+        node =
+          renderItem(
+            item,
+            index
+          );
+      }
+      newMap.set(key, node);
+      newNodes.push(node);
+    });
+    // remove old
+    oldMap.forEach((node, key) => {
+      if (!newMap.has(key)) {
+        node.dispose?.();
+        node.remove?.();
+      }
+    });
+    // insert/reorder
+    let anchor =
+      endMarker;
+    for (
+      let i =
+        newNodes.length - 1;
+      i >= 0;
+      i--
+    ) {
+      const node =
+        newNodes[i];
+      if (
+        node.nextSibling !== anchor
+      ) {
+        endMarker.parentNode.insertBefore(
+          node,
+          anchor
+        );
+      }
+      anchor = node;
+    }
+    oldMap = newMap;
+  });
+}

package/src/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './core.js';
+export * from './dom.js';
+export * from './compiler.js';