@zhinnx/core 2.0.0

package/index.js

@@ -0,0 +1,8 @@
+export * from './src/reactive.js';
+export * from './src/vdom.js';
+export * from './src/diff.js';
+export * from './src/Component.js';
+export * from './src/Lazy.js';
+export * from './src/Router.js';
+export * from './src/Store.js';
+export * from './src/API.js';

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@zhinnx/core",
+  "version": "2.0.0",
+  "description": "Core library for zhinnx framework",
+  "type": "module",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": ["zhinnx", "framework", "vdom", "reactive"],
+  "license": "MIT"
+}

package/src/API.js

@@ -0,0 +1,55 @@
+/**
+ * zhinnx Core - API
+ * A unified wrapper for making API requests.
+ */
+
+export class API {
+  constructor(baseURL = '') {
+    this.baseURL = baseURL;
+  }
+
+  async request(endpoint, method = 'GET', data = null) {
+    const config = {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    };
+
+    if (data) {
+      config.body = JSON.stringify(data);
+    }
+
+    try {
+      const response = await fetch(`${this.baseURL}${endpoint}`, config);
+
+      if (!response.ok) {
+        throw new Error(`API Error: ${response.status} ${response.statusText}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('API Request Failed:', error);
+      throw error;
+    }
+  }
+
+  get(endpoint) {
+    return this.request(endpoint, 'GET');
+  }
+
+  post(endpoint, data) {
+    return this.request(endpoint, 'POST', data);
+  }
+
+  put(endpoint, data) {
+    return this.request(endpoint, 'PUT', data);
+  }
+
+  delete(endpoint) {
+    return this.request(endpoint, 'DELETE');
+  }
+}
+
+// Export a default instance
+export default new API();

package/src/Component.js

@@ -0,0 +1,117 @@
+/**
+ * zhinnx Core - Component
+ * Base class with Reactivity and VDOM integration.
+ */
+
+import { reactive, effect } from './reactive.js';
+import { html } from './vdom.js';
+import { diffChildren, unmount, hydrate } from './diff.js';
+
+export { html };
+
+export class Component {
+    constructor(props = {}) {
+        this.props = props;
+        this.state = reactive({});
+        this.isMounted = false;
+
+        // Internal
+        this._container = null;
+        this._vnodes = []; // Supports Fragments (multiple roots)
+        this._updateEffect = null;
+    }
+
+    /**
+     * Override to return VNodes.
+     */
+    render() {
+        return html`<div></div>`;
+    }
+
+    /**
+     * Mounts the component to a DOM element.
+     */
+    mount(container) {
+        if (this.isMounted) return;
+        this._container = container;
+
+        // Check for Hydration Need (SSR Content Present)
+        // Only hydrate if we haven't mounted yet and container has children
+        const shouldHydrate = !this.isMounted && container.hasChildNodes();
+
+        // Reactive update loop
+        this._updateEffect = effect(() => {
+            // If it's the first run and shouldHydrate is true, run hydration
+            // Note: In effect, this runs immediately.
+            if (shouldHydrate && !this.isMounted) {
+                this.hydrate();
+            } else {
+                this.update();
+            }
+        });
+
+        this.isMounted = true;
+        this.onMount();
+    }
+
+    hydrate() {
+        if (!this._container) return;
+        const rendered = this.render();
+        const newVNodes = Array.isArray(rendered) ? rendered : [rendered];
+
+        // Hydrate logic in diff.js
+        hydrate(newVNodes, this._container);
+
+        this._vnodes = newVNodes;
+        this.afterRender();
+    }
+
+    /**
+     * Force update (automatically called by reactive state).
+     */
+    update() {
+        if (!this._container) return;
+
+        const rendered = this.render();
+        // Normalize to array to support Fragments (multiple root nodes)
+        const newVNodes = Array.isArray(rendered) ? rendered : [rendered];
+
+        // Use diffChildren to reconcile the container's content
+        diffChildren(this._vnodes, newVNodes, this._container);
+
+        this._vnodes = newVNodes;
+
+        // Lifecycle
+        this.afterRender();
+    }
+
+    unmount() {
+        if (!this.isMounted) return;
+
+        this._vnodes.forEach(vnode => unmount(vnode));
+        this._vnodes = [];
+        this.isMounted = false;
+        this.onUnmount();
+    }
+
+    /**
+     * Legacy State Support
+     */
+    setState(newState) {
+        Object.assign(this.state, newState);
+    }
+
+    /**
+     * Lifecycle Hooks
+     */
+    onMount() {}
+    onUnmount() {}
+    afterRender() {}
+
+    /**
+     * Helper
+     */
+    $(selector) {
+        return this._container ? this._container.querySelector(selector) : null;
+    }
+}

package/src/Lazy.js

@@ -0,0 +1,69 @@
+
+/**
+ * zhinnx Lazy Hydration Wrapper
+ */
+import { Component, html } from './Component.js';
+
+export class Lazy extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isLoaded: false,
+            component: null
+        };
+        this.observer = null;
+    }
+
+    render() {
+        if (this.state.isLoaded && this.state.component) {
+            // Render the actual loaded component
+            // We need to instantiate it if it's a class
+            const Comp = this.state.component;
+            return new Comp(this.props).render();
+        }
+
+        // Placeholder
+        return html`<div class="zhin-lazy-placeholder" style="min-height: 100px">Loading...</div>`;
+    }
+
+    onMount() {
+        // Use IntersectionObserver to detect visibility
+        if ('IntersectionObserver' in window) {
+            this.observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        this.loadComponent();
+                        this.observer.disconnect();
+                    }
+                });
+            });
+
+            const el = this.$('.zhin-lazy-placeholder');
+            if (el) this.observer.observe(el);
+            else this.loadComponent(); // If no placeholder (maybe rendered already?), load immediately
+        } else {
+            // Fallback for no observer
+            this.loadComponent();
+        }
+    }
+
+    async loadComponent() {
+        if (this.state.isLoaded) return;
+
+        const loader = this.props.loader;
+        if (loader) {
+            try {
+                // Expect loader to be a function returning a Promise that resolves to a Module or Component
+                const module = await loader();
+                const Comp = module.default || module;
+                this.setState({ isLoaded: true, component: Comp });
+            } catch (e) {
+                console.error('Lazy Load Error:', e);
+            }
+        }
+    }
+
+    onUnmount() {
+        if (this.observer) this.observer.disconnect();
+    }
+}

package/src/Router.js

@@ -0,0 +1,109 @@
+/**
+ * zhinnx Core - Router
+ * specific Simple client-side routing.
+ */
+
+export class Router {
+  /**
+   * @param {Object} routeMap - Map of routes from server { '/path': { regex, importPath, params } }
+   * @param {HTMLElement} rootElement - The DOM element to render pages into.
+   */
+  constructor(routeMap, rootElement) {
+    this.routeMap = routeMap || {};
+    this.root = rootElement;
+    this.hydrated = false;
+
+    // Use History API for standard routing
+    window.addEventListener('popstate', () => this.resolve());
+
+    // Initial load - if DOM already loaded (scripts at end of body), resolve immediately
+    if (document.readyState === 'loading') {
+        window.addEventListener('DOMContentLoaded', () => this.resolve());
+    } else {
+        this.resolve();
+    }
+  }
+
+  /**
+   * Resolve the current route and render the component.
+   */
+  resolve() {
+    const path = window.location.pathname || '/';
+
+    // Find matching route using Regex
+    let matchedRoute = null;
+    let params = {};
+    let matchedKey = null;
+
+    // routeMap keys are simple paths, but values contain regex
+    for (const [key, route] of Object.entries(this.routeMap)) {
+        const re = new RegExp(route.regex);
+        const match = path.match(re);
+        if (match) {
+            matchedKey = key;
+            matchedRoute = route;
+            // Extract params
+            if (route.params) {
+                route.params.forEach((key, index) => {
+                    params[key] = match[index + 1];
+                });
+            }
+            break;
+        }
+    }
+
+    if (matchedRoute) {
+      const handleComponent = (ComponentClass) => {
+          const shouldHydrate = this.root.hasChildNodes() && !this.hydrated;
+
+          if (!shouldHydrate) {
+              this.root.innerHTML = '';
+          }
+
+          // Instantiate and mount the page component with Params
+          const page = new ComponentClass({ params });
+          page.mount(this.root);
+
+          this.hydrated = true;
+      };
+
+      // Check if we have the module loaded (client-side mapping)
+      // For file-based routing, `route.importPath` is server-side relative.
+      // Client needs to know how to import it.
+      // We assume `window.__ROUTES__` contains `importFn` or we Map it in `app.js`.
+      // Actually, passing functions in JSON (window.__ROUTES__) is impossible.
+      // So `app.js` must construct the Router with a mapping of `key -> import()`.
+
+      // If `routeMap` passed to constructor has a `loader` property (function), use it.
+      if (matchedRoute.loader) {
+           if (!this.hydrated && !this.root.hasChildNodes()) {
+             this.root.innerHTML = '<div>Loading route...</div>';
+           }
+
+           matchedRoute.loader().then(module => {
+              const Comp = module.default || module;
+              handleComponent(Comp);
+           }).catch(err => {
+              console.error('Route Loading Error', err);
+              this.root.innerHTML = '<h1>Error Loading Page</h1>';
+           });
+      } else {
+          // Fallback or Error
+          console.error('Route found but no loader defined on client:', matchedKey);
+          this.root.innerHTML = '<h1>Error: Route Configuration Missing</h1>';
+      }
+
+    } else {
+      this.root.innerHTML = '<h1>404 - Page Not Found</h1>';
+    }
+  }
+
+  /**
+   * Programmatic navigation
+   * @param {string} path
+   */
+  navigate(path) {
+    window.history.pushState({}, '', path);
+    this.resolve();
+  }
+}

package/src/Store.js

@@ -0,0 +1,45 @@
+/**
+ * zhinnx Core - Store
+ * A lightweight global state management system.
+ */
+
+export class Store {
+  constructor(initialState = {}) {
+    this.listeners = new Set();
+
+    // Proxy allows us to detect changes automatically
+    this.state = new Proxy(initialState, {
+      set: (target, property, value) => {
+        target[property] = value;
+        this.notify();
+        return true;
+      }
+    });
+  }
+
+  /**
+   * Subscribe to state changes.
+   * @param {Function} listener - Function to call when state changes.
+   * @returns {Function} - Unsubscribe function.
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    // Return an unsubscribe function for cleanup
+    return () => this.listeners.delete(listener);
+  }
+
+  /**
+   * Notify all subscribers of a change.
+   */
+  notify() {
+    this.listeners.forEach(listener => listener(this.state));
+  }
+
+  /**
+   * Action helper to mutate state in a structured way (optional pattern)
+   * @param {Function} actionFn
+   */
+  dispatch(actionFn) {
+    actionFn(this.state);
+  }
+}

package/src/diff.js

@@ -0,0 +1,284 @@
+
+/**
+ * Zhinnx VDOM Diffing Engine
+ * Optimized for Fragments and Arrays
+ */
+
+export function mount(vnode, container, anchor = null) {
+    if (vnode === null || vnode === undefined || vnode === false) return;
+
+    if (Array.isArray(vnode)) {
+        vnode.forEach(child => mount(child, container, anchor));
+        return; // Fragments don't return a single EL
+    }
+
+    const el = createDOM(vnode);
+    vnode.el = el;
+    container.insertBefore(el, anchor);
+    return el;
+}
+
+export function unmount(vnode) {
+    if (vnode === null || vnode === undefined || vnode === false) return;
+
+    if (Array.isArray(vnode)) {
+        vnode.forEach(unmount);
+        return;
+    }
+
+    if (vnode.el && vnode.el.parentNode) {
+        vnode.el.parentNode.removeChild(vnode.el);
+    }
+}
+
+function createDOM(vnode) {
+    if (vnode.text !== undefined) {
+        return document.createTextNode(vnode.text);
+    }
+    const el = document.createElement(vnode.tag);
+    if (vnode.props) {
+        for (const key in vnode.props) {
+            patchProp(el, key, null, vnode.props[key]);
+        }
+    }
+    if (vnode.children) {
+        vnode.children.forEach(child => mount(child, el));
+    }
+    return el;
+}
+
+/**
+ * Hydrates a VNode into an existing DOM Node.
+ */
+export function hydrate(vnode, container) {
+    let domNode = container.firstChild;
+
+    // Normalize vnode to array for consistent handling
+    const nodes = Array.isArray(vnode) ? vnode : [vnode];
+
+    nodes.forEach(child => {
+        domNode = hydrateNode(child, domNode);
+    });
+}
+
+function hydrateNode(vnode, domNode) {
+    if (vnode === null || vnode === undefined || vnode === false) return domNode;
+
+    if (Array.isArray(vnode)) {
+        vnode.forEach(child => {
+            domNode = hydrateNode(child, domNode);
+        });
+        return domNode;
+    }
+
+    if (!domNode) {
+        mount(vnode, domNode ? domNode.parentNode : null);
+        return null;
+    }
+
+    vnode.el = domNode;
+
+    // Text Node
+    if (vnode.text !== undefined) {
+        if (domNode.nodeType !== Node.TEXT_NODE) {
+            // console.warn('Hydration Mismatch: Expected Text, found Element');
+            const newEl = createDOM(vnode);
+            domNode.parentNode.replaceChild(newEl, domNode);
+            vnode.el = newEl;
+            return newEl.nextSibling;
+        }
+        if (domNode.nodeValue !== vnode.text) {
+             domNode.nodeValue = vnode.text;
+        }
+        return domNode.nextSibling;
+    }
+
+    // Element Node
+    if (domNode.nodeType !== Node.ELEMENT_NODE || domNode.tagName.toLowerCase() !== vnode.tag.toLowerCase()) {
+         // console.warn(`Hydration Mismatch: Expected <${vnode.tag}>, found <${domNode.tagName}>`);
+         const newEl = createDOM(vnode);
+         domNode.parentNode.replaceChild(newEl, domNode);
+         vnode.el = newEl;
+         return newEl.nextSibling;
+    }
+
+    // Patch Props
+    if (vnode.props) {
+        for (const key in vnode.props) {
+            if (key.startsWith('on')) {
+                patchProp(domNode, key, null, vnode.props[key]);
+            }
+        }
+    }
+
+    // Hydrate Children
+    let childDomNode = domNode.firstChild;
+    if (vnode.children) {
+        vnode.children.forEach(child => {
+            childDomNode = hydrateNode(child, childDomNode);
+        });
+    }
+
+    return domNode.nextSibling;
+}
+
+
+export function patch(n1, n2, container) {
+    if (n1 === n2) return;
+
+    // Handle Arrays (Fragments)
+    if (Array.isArray(n1) || Array.isArray(n2)) {
+        const c1 = Array.isArray(n1) ? n1 : [n1];
+        const c2 = Array.isArray(n2) ? n2 : [n2];
+        diffChildren(c1, c2, container);
+        return;
+    }
+
+    // Replace if different types
+    if (n1.tag !== n2.tag || (n1.text !== undefined && n2.text === undefined) || (n1.text === undefined && n2.text !== undefined)) {
+        const anchor = n1.el.nextSibling;
+        unmount(n1);
+        mount(n2, container, anchor);
+        return;
+    }
+
+    // Text Update
+    if (n2.text !== undefined) {
+        n2.el = n1.el;
+        if (n2.text !== n1.text) {
+            n2.el.nodeValue = n2.text;
+        }
+        return;
+    }
+
+    // Element Update
+    const el = (n2.el = n1.el);
+
+    // Patch Props
+    const oldProps = n1.props || {};
+    const newProps = n2.props || {};
+    for (const key in newProps) {
+        const oldValue = oldProps[key];
+        const newValue = newProps[key];
+        if (newValue !== oldValue) {
+            patchProp(el, key, oldValue, newValue);
+        }
+    }
+    for (const key in oldProps) {
+        if (!(key in newProps)) {
+            patchProp(el, key, oldProps[key], null);
+        }
+    }
+
+    // Patch Children
+    diffChildren(n1.children, n2.children, el);
+}
+
+export function diffChildren(oldChildren, newChildren, container) {
+    // Optimization: fast path for empty
+    if (oldChildren.length === 0) {
+        newChildren.forEach(c => mount(c, container));
+        return;
+    }
+    if (newChildren.length === 0) {
+        oldChildren.forEach(c => unmount(c));
+        return;
+    }
+
+    const oldMap = new Map();
+    const unkeyed = [];
+
+    oldChildren.forEach((c, i) => {
+        if (c.key != null) oldMap.set(c.key, c);
+        else unkeyed.push({ vnode: c, index: i });
+    });
+
+    let unkeyedIndex = 0;
+
+    // We need to track where we are inserting in the DOM.
+    // Since we are patching in place, we can use the old children's locations,
+    // but if we move things, it gets complex.
+    // For this implementation, we use `insertBefore` with a reference node.
+    // But getting the reference node is hard if the old list is shuffled.
+
+    // Simplified Reconciler:
+    // 1. Walk new children.
+    // 2. If matched (key or type), patch. Move if needed.
+    // 3. If new, mount.
+
+    // To properly place nodes, we can use `container.childNodes` but that includes text nodes and comments
+    // that might not be in VDOM if VDOM stripped them (vdom.js keeps text).
+
+    // We'll trust the VDOM order matches DOM order initially.
+
+    // Pointer to the *next* sibling for insertion
+    let nextSibling = oldChildren[0]?.el;
+
+    // Wait, this is getting into React Fiber complexity.
+    // Fallback to the previous implementation which was decent for keyed,
+    // but ensure we handle `mount` correctly.
+
+    // Let's use the previous implementation logic but fix the anchor.
+
+    const newChildrenSize = newChildren.length;
+
+    // First, process keyed updates and moves
+    for (let i = 0; i < newChildrenSize; i++) {
+        const newChild = newChildren[i];
+        let oldChild;
+
+        if (newChild.key != null) {
+            oldChild = oldMap.get(newChild.key);
+            oldMap.delete(newChild.key);
+        } else {
+            if (unkeyedIndex < unkeyed.length) {
+                oldChild = unkeyed[unkeyedIndex].vnode;
+                unkeyedIndex++;
+            }
+        }
+
+        if (oldChild) {
+            patch(oldChild, newChild, container);
+            // Move: check if the DOM node at this position is correct
+            // The DOM node at index `i` (ignoring non-vdom nodes? No, we assume 1-to-1)
+            // But if we have fragments, index `i` is meaningless.
+
+            // Critical fix: We assume Component doesn't return Fragments for now in diffChildren logic
+            // OR we accept that reordering Fragments is expensive/not supported.
+            // Component.render() returning Array is handled by `patch` -> `diffChildren` on container.
+
+            // Let's rely on `container.childNodes[i]` assuming 1-to-1 mapping for Elements/Text.
+            const currentNode = container.childNodes[i];
+             if (oldChild.el && currentNode !== oldChild.el) {
+                 container.insertBefore(oldChild.el, currentNode);
+             }
+        } else {
+             // Mount new
+             // We want to insert it at index `i`.
+             const anchor = container.childNodes[i];
+             mount(newChild, container, anchor);
+        }
+    }
+
+    // Cleanup
+    oldMap.forEach(c => unmount(c));
+    while (unkeyedIndex < unkeyed.length) {
+        unmount(unkeyed[unkeyedIndex].vnode);
+        unkeyedIndex++;
+    }
+}
+
+function patchProp(el, key, prev, next) {
+    if (key.startsWith('on')) {
+        const name = key.slice(2).toLowerCase();
+        if (prev) el.removeEventListener(name, prev);
+        if (next) el.addEventListener(name, next);
+    } else if (key === 'value' || key === 'checked') {
+        el[key] = next;
+    } else if (key === 'className') {
+        el.className = next || '';
+    } else {
+        if (next == null || next === false) el.removeAttribute(key);
+        else el.setAttribute(key, next);
+    }
+}

package/src/reactive.js

@@ -0,0 +1,142 @@
+// Zhinnx v2 Reactivity System
+// Optimized with dependency cleanup and lazy computed properties
+
+let activeEffect = null;
+const targetMap = new WeakMap();
+
+/**
+ * Tracks dependencies for a reactive property.
+ * @param {Object} target
+ * @param {string} key
+ */
+export function track(target, key) {
+    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);
+        }
+        dep.add(activeEffect);
+        activeEffect.deps.push(dep);
+    }
+}
+
+/**
+ * Triggers effects associated with a reactive property.
+ * @param {Object} target
+ * @param {string} key
+ */
+export function trigger(target, key) {
+    const depsMap = targetMap.get(target);
+    if (!depsMap) return;
+    const dep = depsMap.get(key);
+    if (dep) {
+        const effectsToRun = new Set(dep);
+        effectsToRun.forEach(eff => {
+            if (eff.scheduler) {
+                eff.scheduler();
+            } else {
+                eff();
+            }
+        });
+    }
+}
+
+/**
+ * Creates a reactive proxy for an object.
+ * @param {Object} target
+ * @returns {Proxy}
+ */
+export function reactive(target) {
+    return new Proxy(target, {
+        get(obj, prop) {
+            track(obj, prop);
+            return Reflect.get(obj, prop);
+        },
+        set(obj, prop, value) {
+            const oldValue = obj[prop];
+            const result = Reflect.set(obj, prop, value);
+            if (oldValue !== value) {
+                trigger(obj, prop);
+            }
+            return result;
+        }
+    });
+}
+
+function cleanupEffect(effectFn) {
+    const { deps } = effectFn;
+    if (deps.length) {
+        for (let i = 0; i < deps.length; i++) {
+            deps[i].delete(effectFn);
+        }
+        deps.length = 0;
+    }
+}
+
+/**
+ * Registers a side effect that runs when dependencies change.
+ * @param {Function} fn - The function to run
+ * @param {Object} options - { lazy: boolean, scheduler: Function }
+ */
+export function effect(fn, options = {}) {
+    const effectFn = () => {
+        // cleanup previous dependencies to avoid memory leaks and stale deps
+        cleanupEffect(effectFn);
+
+        const previousEffect = activeEffect;
+        activeEffect = effectFn;
+        try {
+            return fn();
+        } finally {
+            activeEffect = previousEffect;
+        }
+    };
+
+    effectFn.deps = [];
+    effectFn.scheduler = options.scheduler;
+
+    if (!options.lazy) {
+        effectFn();
+    }
+
+    return effectFn;
+}
+
+/**
+ * Creates a computed property.
+ * @param {Function} getter
+ * @returns {Object} { value }
+ */
+export function computed(getter) {
+    let value;
+    let dirty = true;
+
+    const effectFn = effect(getter, {
+        lazy: true,
+        scheduler: () => {
+            if (!dirty) {
+                dirty = true;
+                trigger(computedObj, 'value');
+            }
+        }
+    });
+
+    const computedObj = {
+        get value() {
+            if (dirty) {
+                value = effectFn();
+                dirty = false;
+            }
+            track(computedObj, 'value');
+            return value;
+        }
+    };
+
+    return computedObj;
+}

package/src/vdom.js

@@ -0,0 +1,118 @@
+
+/**
+ * zhinnx VDOM
+ * Lightweight Virtual DOM implementation.
+ */
+
+// VNode Factory
+export function h(tag, props, ...children) {
+    return {
+        tag,
+        props: props || {},
+        children: children.flat(Infinity)
+            .filter(c => c != null && c !== false)
+            .map(c => (typeof c === 'string' || typeof c === 'number') ? { text: String(c) } : c),
+        key: props?.key
+    };
+}
+
+// Token to identify dynamic values in HTML
+const UID = '__ZHIN_VAL__';
+
+/**
+ * Tagged template function to create VNodes.
+ * Uses the browser's native HTML parser (via <template>).
+ * Note: This implementation requires a browser environment (DOM).
+ */
+export function html(strings, ...values) {
+    // SSR Check - Return SSR Object
+    if (typeof document === 'undefined' || (typeof global !== 'undefined' && global.IS_SSR_TEST)) {
+        return {
+             isSSR: true,
+             strings,
+             values
+        };
+    }
+
+    // 1. Interleave strings and placeholders
+    let htmlString = '';
+    const valMap = new Map();
+
+    strings.forEach((str, i) => {
+        htmlString += str;
+        if (i < values.length) {
+            const key = UID + i;
+            valMap.set(key, values[i]);
+            htmlString += key;
+        }
+    });
+
+    const template = document.createElement('template');
+    template.innerHTML = htmlString;
+
+    // 3. Convert DOM to VNodes
+    return walk(template.content, valMap);
+}
+
+function walk(node, valMap) {
+    if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent;
+        // Check if the text is exactly a placeholder
+        // Note: This logic assumes placeholders are the entire text content or properly separated.
+        // For mixed text "Hello ${name}", the parser might see "Hello __ZHIN_VAL__0".
+        // We need to split.
+
+        if (text.includes(UID)) {
+             // Split by UID regex
+             const parts = text.split(new RegExp(`(${UID}\\d+)`));
+             const nodes = parts.map(part => {
+                 if (part.startsWith(UID)) {
+                     return valMap.get(part);
+                 } else if (part) {
+                     return { text: part }; // plain text normalized to VNode
+                 }
+                 return null;
+             }).filter(n => n !== null);
+
+             // If single item, return it
+             if (nodes.length === 1) return nodes[0];
+             return nodes;
+        }
+        return { text };
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        // If it's a fragment, just return children
+        if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            let children = Array.from(node.childNodes).map(c => walk(c, valMap)).flat();
+            // Normalize strings if any leaked (though walk should handle them now)
+            children = children.map(c => (typeof c === 'string') ? { text: c } : c);
+
+            // If the fragment results in a single VNode, return it.
+            if (children.length === 1) return children[0];
+            return children;
+        }
+
+        const tag = node.tagName.toLowerCase();
+        const props = {};
+
+        // Attributes
+        Array.from(node.attributes).forEach(attr => {
+            let name = attr.name;
+            let value = attr.value;
+
+            // Check if value is a placeholder
+            if (value.startsWith(UID) && valMap.has(value)) {
+                value = valMap.get(value);
+            }
+
+            props[name] = value;
+        });
+
+        const children = Array.from(node.childNodes).map(c => walk(c, valMap)).flat();
+
+        return h(tag, props, ...children);
+    }
+
+    return null;
+}