Parser: Support multiple components in one file, change args to params with defaults

examples/runtime/ritz.js

@@ -0,0 +1,112 @@
+/**
+ * Ritz Runtime - DOM Bridge for WASM
+ *
+ * Provides DOM manipulation functions called by WASM code.
+ */
+
+class RitzRuntime {
+  constructor(rootElement) {
+    this.rootElement = rootElement || document.body;
+    this.nodes = new Map(); // Map of node IDs to DOM nodes
+    this.nextNodeId = 1;
+    this.rootNodeId = null;
+  }
+
+  /**
+   * Create a DOM element and return its ID
+   */
+  createElement(tag) {
+    const element = document.createElement(tag);
+    const id = this.nextNodeId++;
+    this.nodes.set(id, element);
+    console.log(`[Ritz] Created element <${tag}> with ID ${id}`);
+    return id;
+  }
+
+  /**
+   * Create a text node and return its ID
+   */
+  createTextNode(text) {
+    const textNode = document.createTextNode(text);
+    const id = this.nextNodeId++;
+    this.nodes.set(id, textNode);
+    console.log(`[Ritz] Created text node "${text}" with ID ${id}`);
+    return id;
+  }
+
+  /**
+   * Append child to parent
+   */
+  appendChild(parentId, childId) {
+    const parent = this.nodes.get(parentId);
+    const child = this.nodes.get(childId);
+
+    if (!parent || !child) {
+      console.error(`[Ritz] appendChild failed: parent=${parentId}, child=${childId}`);
+      return;
+    }
+
+    parent.appendChild(child);
+    console.log(`[Ritz] Appended node ${childId} to node ${parentId}`);
+  }
+
+  /**
+   * Set an attribute on an element
+   */
+  setAttribute(elemId, name, value) {
+    const element = this.nodes.get(elemId);
+
+    if (!element) {
+      console.error(`[Ritz] setAttribute failed: element=${elemId}`);
+      return;
+    }
+
+    // Handle special cases
+    if (name === 'class') {
+      element.className = value;
+    } else {
+      element.setAttribute(name, value);
+    }
+
+    console.log(`[Ritz] Set attribute ${name}="${value}" on node ${elemId}`);
+  }
+
+  /**
+   * Set the root element and mount it to DOM
+   */
+  setRoot(elemId) {
+    const element = this.nodes.get(elemId);
+
+    if (!element) {
+      console.error(`[Ritz] setRoot failed: element=${elemId}`);
+      return;
+    }
+
+    this.rootNodeId = elemId;
+
+    // Clear the root element
+    this.rootElement.innerHTML = '';
+
+    // Mount the component
+    this.rootElement.appendChild(element);
+
+    console.log(`[Ritz] Mounted component (node ${elemId}) to DOM`);
+  }
+
+  /**
+   * Clear all nodes (for hot reload)
+   */
+  clear() {
+    this.nodes.clear();
+    this.nextNodeId = 1;
+    this.rootNodeId = null;
+    this.rootElement.innerHTML = '';
+  }
+}
+
+// Export for use in module or global scope
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = RitzRuntime;
+} else {
+  window.RitzRuntime = RitzRuntime;
+}