@estjs/template 0.0.14-beta.3 → 0.0.14-beta.5

package/dist/template.dev.cjs.js

@@ -4,13 +4,13 @@ var shared = require('@estjs/shared');
 var signal = require('@estjs/signal');
 
 /**
-* @estjs/template v0.0.14-beta.3
+* @estjs/template v0.0.14-beta.5
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
 
-// src/shared-config.ts
+// src/sharedConfig.ts
 var EVENT_PREFIX = "on";
 var UPDATE_PREFIX = "update";
 var CHILDREN_PROP = "children";
@@ -22,27 +22,21 @@ var RenderContext = class {
   constructor() {
     this.renderMode = 0 /* CLIENT */;
   }
-  // Getter to check if the current mode is SSG
   get isSSG() {
     return this.renderMode === 1 /* SSG */;
   }
-  // Getter to check if the current mode is SSR
   get isSSR() {
     return this.renderMode === 2 /* SSR */;
   }
-  // Getter to check if the current mode is Client
   get isClient() {
     return this.renderMode === 0 /* CLIENT */;
   }
-  // Set render mode to SSR
   setSSR() {
     this.renderMode = 2 /* SSR */;
   }
-  // Set render mode to SSG
   setSSG() {
     this.renderMode = 1 /* SSG */;
   }
-  // Set render mode to Client
   setClient() {
     this.renderMode = 0 /* CLIENT */;
   }
@@ -59,7 +53,7 @@ function getComponentIndex(temp) {
   return (_a = componentMap.get(temp)) == null ? void 0 : _a.index;
 }
 
-// src/lifecycle-context.ts
+// src/lifecycleContext.ts
 var _LifecycleContext = class _LifecycleContext {
   constructor() {
     // Hooks for different lifecycle stages
@@ -85,11 +79,9 @@ var _LifecycleContext = class _LifecycleContext {
   setContext(context, value) {
     _LifecycleContext.context[context] = value;
   }
-  // Initialize the static reference
   initRef() {
     _LifecycleContext.ref = this;
   }
-  // Remove the static reference
   removeRef() {
     _LifecycleContext.ref = null;
   }
@@ -98,13 +90,11 @@ var _LifecycleContext = class _LifecycleContext {
     Object.values(this.hooks).forEach((set) => set.clear());
   }
 };
-// Static reference to the current context
 _LifecycleContext.ref = null;
-// Static context to store shared values
 _LifecycleContext.context = {};
 var LifecycleContext = _LifecycleContext;
 
-// src/ssg-node.ts
+// src/ssgNode.ts
 function isSSGNode(node) {
   return node instanceof SSGNode;
 }
@@ -118,7 +108,6 @@ var SSGNode = class extends LifecycleContext {
     enterComponent(template, componentIndex);
     this.templates = this.processTemplate();
   }
-  // Process the template and return an array of processed strings
   processTemplate() {
     if (shared.isArray(this.template)) {
       const htmlString = this.template.join(PLACEHOLDER);
@@ -127,7 +116,6 @@ var SSGNode = class extends LifecycleContext {
     }
     return [];
   }
-  // Process HTML string by adding component index and handling text nodes
   processHtmlString(htmlString) {
     return htmlString.replaceAll(/(<[^>]+>)|([^<]+)/g, (match, p1, p2) => {
       if (p1) {
@@ -141,14 +129,12 @@ var SSGNode = class extends LifecycleContext {
       return match;
     });
   }
-  // Mount the SSGNode and return the rendered string
   mount() {
     this.initRef();
     const output = this.render();
     this.removeRef();
     return output;
   }
-  // Render the SSGNode
   render() {
     if (shared.isFunction(this.template)) {
       const root = this.template(this.props);
@@ -160,7 +146,6 @@ var SSGNode = class extends LifecycleContext {
     }
     return this.renderTemplate();
   }
-  // Render the template by processing props and children
   renderTemplate() {
     Object.entries(this.props).forEach(([key, cur]) => {
       const children = cur.children;
@@ -176,7 +161,6 @@ var SSGNode = class extends LifecycleContext {
     });
     return this.templates.join("");
   }
-  // Normalize props by removing children and handling signals
   normalizeProps(props) {
     Object.entries(props).forEach(([key, value]) => {
       if (key === "children") {
@@ -188,11 +172,9 @@ var SSGNode = class extends LifecycleContext {
       }
     });
   }
-  // Generate HTML attributes string from props
   generateAttributes(props) {
     return Object.entries(props).filter(([key, value]) => key !== "children" && !shared.isFunction(value)).map(([key, value]) => `${key}="${shared.escape(String(value))}"`).join(" ");
   }
-  // Render children and append them to the template
   renderChildren(children, findIndex) {
     children.forEach(([child]) => {
       componentIndex++;
@@ -200,7 +182,6 @@ var SSGNode = class extends LifecycleContext {
       this.templates[findIndex] += renderedChild;
     });
   }
-  // Render a single child node
   renderChild(child) {
     if (shared.isFunction(child)) {
       return this.renderChild(child(this.props));
@@ -402,25 +383,21 @@ var ComponentNode = class extends LifecycleContext {
     this.key || (this.key = props == null ? void 0 : props.key);
     this.proxyProps = this.createProxyProps(props);
   }
-  // Create reactive props
   createProxyProps(props) {
     if (!props) return {};
-    return signal.shallowReactive(
+    return signal.signalObject(
       props,
       (key) => shared.startsWith(key, EVENT_PREFIX) || shared.startsWith(key, UPDATE_PREFIX) || key === CHILDREN_PROP
     );
   }
-  // Getter for the first child node
   get firstChild() {
     var _a, _b;
     return (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
   }
-  // Getter to check if the node is connected to the DOM
   get isConnected() {
     var _a, _b;
     return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
   }
-  // Method to mount the component to the DOM
   mount(parent, before) {
     var _a, _b, _c, _d;
     if (!shared.isFunction(this.template)) {
@@ -430,14 +407,13 @@ var ComponentNode = class extends LifecycleContext {
       return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
     }
     this.initRef();
-    this.rootNode = this.template(this.proxyProps);
+    this.rootNode = this.template(signal.useReactive(this.proxyProps, ["children"]));
     const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
     this.callMountHooks();
     this.patchProps(this.props);
     this.removeRef();
     return mountedNode;
   }
-  // Method to unmount the component from the DOM
   unmount() {
     var _a;
     this.callDestroyHooks();
@@ -447,22 +423,18 @@ var ComponentNode = class extends LifecycleContext {
     this.proxyProps = {};
     this.clearEmitter();
   }
-  // Private method to call mount hooks
   callMountHooks() {
     this.hooks.mounted.forEach((handler) => handler());
   }
-  // Private method to call destroy hooks
   callDestroyHooks() {
     this.hooks.destroy.forEach((handler) => handler());
   }
-  // Private method to clear the event emitter
   clearEmitter() {
     for (const cleanup of this.emitter) {
       cleanup();
     }
     this.emitter.clear();
   }
-  // Method to inherit properties from another ComponentNode
   inheritNode(node) {
     Object.assign(this.proxyProps, node.proxyProps);
     this.rootNode = node.rootNode;
@@ -472,7 +444,6 @@ var ComponentNode = class extends LifecycleContext {
     this.props = node.props;
     this.patchProps(props);
   }
-  // Private method to get or create a NodeTrack
   getNodeTrack(trackKey) {
     let track = this.trackMap.get(trackKey);
     if (!track) {
@@ -483,7 +454,6 @@ var ComponentNode = class extends LifecycleContext {
     track.cleanup();
     return track;
   }
-  // Method to patch props onto the component
   patchProps(props) {
     var _a;
     if (!props) {
@@ -502,30 +472,32 @@ var ComponentNode = class extends LifecycleContext {
     }
     this.props = props;
   }
-  // Private method to patch event listeners
   patchEventListener(key, prop) {
     const event = key.slice(2).toLowerCase();
     const cleanup = addEventListener(this.rootNode.nodes[0], event, prop);
     this.emitter.add(cleanup);
   }
-  // Private method to patch ref
   patchRef(prop) {
     var _a, _b;
     prop.value = (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
   }
-  // Private method to patch update handlers
   patchUpdateHandler(key, prop) {
     this.props[key] = extractSignal(prop);
   }
-  // Private method to patch normal props
   patchNormalProp(key, prop) {
+    var _a, _b;
+    const newValue = (_b = (_a = this.proxyProps)[key]) != null ? _b : _a[key] = signal.useSignal(prop);
     const track = this.getNodeTrack(key);
     track.cleanup = signal.useEffect(() => {
-      this.proxyProps[key] = shared.isFunction(prop) ? prop() : prop;
+      newValue.value = shared.isFunction(prop) ? prop() : prop;
     });
   }
 };
 
+// ../shared/src/comm.ts
+var _toString = Object.prototype.toString;
+var isPlainObject = (val) => _toString.call(val) === "[object Object]";
+
 // src/patch.ts
 function patchChildren(parent, childrenMap, nextChildren, before) {
   const result = /* @__PURE__ */ new Map();
@@ -633,7 +605,7 @@ function getKey(node, index) {
   return `_$${index}$`;
 }
 
-// src/template-node.ts
+// src/templateNode.ts
 var TemplateNode = class {
   constructor(template, props, key) {
     this.template = template;
@@ -651,21 +623,17 @@ var TemplateNode = class {
       this.componentIndex = getComponentIndex(this.template);
     }
   }
-  // Getter for the first child node
   get firstChild() {
     var _a;
     return (_a = this.nodes[0]) != null ? _a : null;
   }
-  // Getter to check if the node is connected to the DOM
   get isConnected() {
     return this.mounted;
   }
-  // Placeholder methods for event handling
   addEventListener() {
   }
   removeEventListener() {
   }
-  // Method to mount the node to the DOM
   mount(parent, before) {
     var _a;
     this.parent = parent;
@@ -695,7 +663,6 @@ var TemplateNode = class {
     this.mounted = true;
     return this.nodes;
   }
-  // Method to unmount the node from the DOM
   unmount() {
     var _a, _b;
     this.trackMap.forEach((track) => {
@@ -733,7 +700,6 @@ var TemplateNode = class {
       removeChild(child);
     }
   }
-  // Method to inherit properties from another TemplateNode
   inheritNode(node) {
     this.mounted = node.mounted;
     this.nodes = node.nodes;
@@ -743,7 +709,6 @@ var TemplateNode = class {
     this.props = node.props;
     this.patchProps(props);
   }
-  // Private method to map SSG node tree
   mapSSGNodeTree(parent) {
     this.treeMap.set(0, parent);
     this.walkNodeTree(parent, this.handleSSGNode.bind(this));
@@ -759,7 +724,6 @@ var TemplateNode = class {
     };
     this.walkNodeTree(tree, handleNode);
   }
-  // Private method to walk through the node tree
   walkNodeTree(node, handler) {
     if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
       handler(node);
@@ -770,7 +734,6 @@ var TemplateNode = class {
       child = child.nextSibling;
     }
   }
-  // Private method to handle SSG nodes
   handleSSGNode(node) {
     var _a;
     if (node.nodeType === Node.COMMENT_NODE) {
@@ -786,7 +749,6 @@ var TemplateNode = class {
       }
     }
   }
-  // Method to patch props onto the node
   patchProps(props) {
     if (!props) return;
     Object.entries(props).forEach(([key, value]) => {
@@ -798,7 +760,6 @@ var TemplateNode = class {
     });
     this.props = props;
   }
-  // Private method to patch a single prop
   patchProp(key, node, props, isRoot) {
     if (!props) return;
     Object.entries(props).forEach(([attr, value]) => {
@@ -817,13 +778,12 @@ var TemplateNode = class {
   }
   getBindUpdateValue(props, key, attr) {
     const UPDATE_PREFIX2 = "update";
-    const updateKey = `${UPDATE_PREFIX2}${shared.capitalizeFirstLetter(attr)}`;
+    const updateKey = `${UPDATE_PREFIX2}${shared.capitalize(attr)}`;
     if (updateKey && props[updateKey] && shared.isFunction(props[updateKey])) {
       this.bindValueKeys.push(updateKey);
       return props[updateKey];
     }
   }
-  // Private method to patch children
   patchChildren(key, node, children, isRoot) {
     if (!shared.isArray(children)) {
       const trackKey = `${key}:${CHILDREN_PROP}:0`;
@@ -840,20 +800,20 @@ var TemplateNode = class {
       });
     }
   }
-  // Private method to patch event listeners
   patchEventListener(key, node, attr, listener) {
     const eventName = attr.slice(2).toLowerCase();
     const track = this.getNodeTrack(`${key}:${attr}`);
     track.cleanup = addEventListener(node, eventName, listener);
   }
-  // Private method to patch attributes
   patchAttribute(key, element, attr, value, updateFn) {
     const track = this.getNodeTrack(`${key}:${attr}`);
     const val = shared.isFunction(value) ? value() : value;
-    const triggerValue = signal.isSignal(val) ? val : signal.useSignal(val);
+    const triggerValue = signal.isSignal(val) ? val : signal.shallowSignal(val);
     setAttribute(element, attr, triggerValue.value);
     const cleanup = signal.useEffect(() => {
       const val2 = shared.isFunction(value) ? value() : value;
+      if (isPlainObject(val2) && isPlainObject(triggerValue.peek()) && JSON.stringify(triggerValue.value) === JSON.stringify(val2))
+        return;
       triggerValue.value = signal.isSignal(val2) ? val2.value : val2;
       setAttribute(element, attr, triggerValue.value);
     });
@@ -868,7 +828,6 @@ var TemplateNode = class {
       cleanupBind && cleanupBind();
     };
   }
-  // Private method to get or create a NodeTrack
   getNodeTrack(trackKey, trackLastNodes, isRoot) {
     var _a;
     let track = this.trackMap.get(trackKey);
@@ -886,7 +845,6 @@ var TemplateNode = class {
     (_a = track.cleanup) == null ? void 0 : _a.call(track);
     return track;
   }
-  // Private method to patch a child node
   patchChild(track, parent, child, before) {
     if (shared.isFunction(child)) {
       track.cleanup = signal.useEffect(() => {
@@ -910,7 +868,6 @@ var TemplateNode = class {
       });
     }
   }
-  // Private method to reconcile children nodes
   reconcileChildren(parent, nextNodes, before) {
     const result = /* @__PURE__ */ new Map();
     const textNodes = Array.from(parent.childNodes).filter(
@@ -936,7 +893,7 @@ var TemplateNode = class {
   }
 };
 
-// src/jsx-renderer.ts
+// src/jsxRenderer.ts
 function h(template, props, key) {
   if (shared.isString(template)) {
     if (isHtmlTagName(template)) {