feat: Enhance runtime and build process

- Fix reactivity bugs in runtime
- Modularize runtime code for better maintainability
- Update compiler to link runtime externally
- Improve and update README documentation

Author: sktryo

.gitignore

@@ -1,2 +1,28 @@
+# Dependencies
+/node_modules
+
 # Build output
-/dist
+/dist
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Test coverage
+/coverage
+.nyc_output
+
+# Editor directories and files
+.vscode
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

src/runtime/modules/directives.js

@@ -0,0 +1,99 @@
+import { evaluate } from './evaluate.js';
+import { getDirectives } from './dom.js';
+
+function _initDirectives(el, scope, createEffect, refs) {
+    const directives = getDirectives(el);
+
+    for (const { node, name, value } of directives) {
+        if (!node.parentNode && name !== 'x-data') continue;
+
+        const directive = name.substring(2);
+
+        if (directive === 'ref') {
+            refs[value] = node;
+        } else if (directive === 'for') {
+            const template = node;
+            const match = value.match(/(.*)\s+in\s+(.*)/);
+            if (!match) { console.error(`XIV Error: Invalid x-for expression: "${value}"`); continue; }
+            const [_, alias, arrayKey] = match;
+            const anchor = document.createComment(`xiv-for: ${value}`);
+            template.parentNode.replaceChild(anchor, template);
+
+            createEffect(() => {
+                const items = evaluate(scope, arrayKey) || [];
+                while (anchor.nextSibling && anchor.nextSibling.__xiv_for_item) {
+                    anchor.nextSibling.remove();
+                }
+                let lastEl = anchor;
+                for (const item of items) {
+                    const content = template.content.cloneNode(true);
+                    const itemEl = content.firstElementChild;
+                    if (!itemEl) continue;
+                    itemEl.__xiv_for_item = true;
+                    const newScope = Object.create(scope);
+                    newScope[alias.trim()] = item;
+                    _initDirectives(itemEl, newScope, createEffect, refs);
+                    lastEl.after(itemEl);
+                    lastEl = itemEl;
+                }
+            });
+        } else if (directive === 'if') {
+            const template = node;
+            const anchor = document.createComment('xiv-if');
+            template.parentNode.replaceChild(anchor, template);
+            let isShowing = false;
+            let element = null;
+            createEffect(() => {
+                const condition = evaluate(scope, value);
+                if (condition && !isShowing) {
+                    const content = template.content.cloneNode(true);
+                    element = content.firstElementChild;
+                    if (!element) return;
+                    _initDirectives(element, scope, createEffect, refs);
+                    anchor.after(element);
+                    isShowing = true;
+                } else if (!condition && isShowing) {
+                    element.remove();
+                    element = null;
+                    isShowing = false;
+                }
+            });
+        } else if (directive.startsWith('bind:')) {
+            const attrName = directive.substring(5);
+            createEffect(() => {
+                const result = evaluate(scope, value);
+                if (result === false || result === null || result === undefined) {
+                    node.removeAttribute(attrName);
+                } else {
+                    node.setAttribute(attrName, result === true ? '' : result);
+                }
+            });
+        } else if (directive.startsWith('on:')) {
+            const event = directive.substring(3);
+            node.addEventListener(event, (e) => {
+                evaluate({ ...scope, '$event': e }, value);
+            });
+        } else if (directive === 'model') {
+            const key = value;
+            const eventType = (node.type === 'checkbox' || node.type === 'radio') ? 'change' : 'input';
+            createEffect(() => { 
+                if (document.activeElement !== node) {
+                    const modelValue = evaluate(scope, key);
+                    if (node.type === 'checkbox') node.checked = modelValue;
+                    else node.value = modelValue;
+                }
+            });
+            node.addEventListener(eventType, (e) => {
+                const valueToSet = node.type === 'checkbox' ? e.target.checked : JSON.stringify(e.target.value);
+                evaluate(scope, `${key} = ${valueToSet}`);
+            });
+        } else if (directive === 'text') {
+            createEffect(() => {
+                const textValue = evaluate(scope, value);
+                node.textContent = (textValue === undefined || textValue === null) ? '' : textValue;
+            });
+        }
+    }
+}
+
+export const initDirectives = _initDirectives;

src/runtime/modules/dom.js

@@ -0,0 +1,21 @@
+export function getDirectives(el) {
+    const directives = [];
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT);
+    while(walker.nextNode()) {
+        const node = walker.currentNode;
+        if (node.parentNode && node.parentNode.nodeName === 'TEMPLATE') continue;
+        for (const attr of Array.from(node.attributes)) {
+            if (attr.name.startsWith('x-')) {
+                directives.push({ node, name: attr.name, value: attr.value });
+            }
+        }
+    }
+    const priority = ['for', 'if', 'init', 'ref'];
+    return directives.sort((a, b) => {
+        const aName = a.name.substring(2).split(':')[0];
+        const bName = b.name.substring(2).split(':')[0];
+        const aPrio = priority.includes(aName) ? priority.indexOf(aName) : priority.length;
+        const bPrio = priority.includes(bName) ? priority.indexOf(bName) : priority.length;
+        return aPrio - bPrio;
+    });
+}

src/runtime/modules/evaluate.js

@@ -0,0 +1,11 @@
+import { Parser } from 'expr-eval';
+
+const parser = new Parser();
+
+export function evaluate(scope, expression) {
+    try {
+        return parser.parse(expression).evaluate(scope);
+    } catch (e) {
+        console.error(`Error evaluating expression: "${expression}"`, e);
+    }
+}

src/runtime/modules/reactivity.js

@@ -0,0 +1,48 @@
+export function reactive(initialData, refs) {
+    const effects = new Map();
+    let currentEffect = null;
+
+    const track = (key) => {
+        if (currentEffect) {
+            if (!effects.has(key)) effects.set(key, new Set());
+            effects.get(key).add(currentEffect);
+        }
+    };
+
+    const trigger = (key) => {
+        if (effects.has(key)) {
+            effects.get(key).forEach(effect => effect());
+        }
+    };
+
+    const scope = new Proxy(initialData, {
+        get(target, key, receiver) {
+            if (key === '$refs') return refs;
+            if (key === '$fetch') return (url, options) => fetch(url, options).then(res => res.json());
+            track(key);
+            const value = Reflect.get(target, key, receiver);
+            if (typeof value === 'function') {
+                return value.bind(receiver);
+            }
+            return value;
+        },
+        set(target, key, value, receiver) {
+            const success = Reflect.set(target, key, value, receiver);
+            if (success) {
+                trigger(key);
+            }
+            return success;
+        }
+    });
+
+    const createEffect = (fn) => {
+        const effect = () => {
+            currentEffect = effect;
+            fn();
+            currentEffect = null;
+        };
+        effect();
+    };
+
+    return { scope, createEffect };
+}