coralite 0.29.3 → 0.29.4

package/dist/lib/coralite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coralite.d.ts","sourceRoot":"","sources":["../../lib/coralite.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"coralite.d.ts","sourceRoot":"","sources":["../../lib/coralite.js"],"names":[],"mappings":"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"}

package/dist/lib/index.js

@@ -9374,8 +9374,8 @@ async function transformCss(css, rootClasses, descendantClasses) {
 // lib/script-manager.js
 import { build } from "esbuild";
 import serialize from "serialize-javascript";
-import { pathToFileURL } from "node:url";
-import { resolve, parse as parse4, join as join2 } from "node:path";
+import { pathToFileURL, fileURLToPath } from "node:url";
+import { resolve, parse as parse4 } from "node:path";
 import { createHash } from "node:crypto";
 import { nodeModulesPolyfillPlugin } from "esbuild-plugins-node-modules-polyfill";
 function ScriptManager(options = {}) {
@@ -9418,11 +9418,12 @@ ScriptManager.prototype.getHelpers = function() {
   }
   return `{${helpers}}`;
 };
-ScriptManager.prototype.registerComponent = function({ id, script = {}, filePath, template = null, defaultValues = {}, styles = "" }) {
+ScriptManager.prototype.registerComponent = function({ id, script = {}, filePath, templateAST = null, templateValues = null, defaultValues = {}, styles = "" }) {
   this.sharedFunctions[id] = {
     id,
     script,
-    template,
+    templateAST,
+    templateValues,
     defaultValues,
     styles,
     imports: script.imports || [],
@@ -9496,13 +9497,13 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
     processedComponent[instanceData[1].componentId] = true;
   }
   for (const [componentId, fnData] of Object.entries(this.sharedFunctions)) {
-    if (fnData.template != null || fnData.defaultValues && Object.keys(fnData.defaultValues).length > 0 || fnData.script && fnData.script.components && fnData.script.components.length > 0 || fnData.script && fnData.script.content && fnData.script.content !== "export default function(){}" || fnData.script && fnData.script.content && fnData.script.content !== "export default function() {}" || fnData.styles && fnData.styles !== "") {
+    if (fnData.templateAST != null || fnData.defaultValues && Object.keys(fnData.defaultValues).length > 0 || fnData.script && fnData.script.components && fnData.script.components.length > 0 || fnData.script && fnData.script.content && fnData.script.content !== "export default function(){}" || fnData.script && fnData.script.content && fnData.script.content !== "export default function() {}" || fnData.styles && fnData.styles !== "") {
       processedComponent[componentId] = true;
     } else if (fnData.script && fnData.script.content && fnData.script.content.trim() !== "export default function(){}" && fnData.script.content.trim() !== "export default function() {}" && fnData.script.content.trim() !== "export default function() { }") {
       processedComponent[componentId] = true;
     } else if (fnData.script && fnData.script.content) {
       processedComponent[componentId] = true;
-    } else if (fnData.template || fnData.styles) {
+    } else if (fnData.templateAST || fnData.styles) {
       processedComponent[componentId] = true;
     }
   }
@@ -9533,14 +9534,6 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
   for (const componentId of processedComponentKeys) {
     if (this.sharedFunctions[componentId] && this.sharedFunctions[componentId].imports && this.sharedFunctions[componentId].imports.length > 0) {
       entryCodeParts.push(`  "${componentId}": componentImports_${componentId.replace(regex, "_")},
-`);
-    }
-  }
-  entryCodeParts.push("};\n");
-  entryCodeParts.push("const coraliteComponentTemplates = {\n");
-  for (const key of processedComponentKeys) {
-    if (this.sharedFunctions[key] && this.sharedFunctions[key].template) {
-      entryCodeParts.push(`  "${key}": ${serialize(this.sharedFunctions[key].template)},
 `);
     }
   }
@@ -9570,7 +9563,10 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
     }
   }
   entryCodeParts.push("};\n");
-  entryCodeParts.push("\nexport { getHelpers, getSetups };\n");
+  const domSerializerPath = fileURLToPath(import.meta.resolve("dom-serializer"));
+  entryCodeParts.push(`import render from "${domSerializerPath}";
+`);
+  entryCodeParts.push("\nexport { getHelpers, getSetups, render };\n");
   const entryPoints = {
     "chunk-shared": entryCodeParts.join("").trimEnd()
   };
@@ -9591,13 +9587,66 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
         componentEntryCode += `const componentScript = null;
 `;
       }
-      const template = serialize(this.sharedFunctions[componentId].template || "");
+      const nodeMap = /* @__PURE__ */ new WeakMap();
+      let nodeCounter = 0;
+      const cleanAST = (nodes) => {
+        if (!nodes) return null;
+        return nodes.map((node) => {
+          const cloned = { ...node };
+          const id = nodeCounter++;
+          nodeMap.set(node, id);
+          cloned._id = id;
+          delete cloned.parent;
+          delete cloned.prev;
+          delete cloned.next;
+          if (cloned.children) {
+            cloned.children = cleanAST(cloned.children);
+          }
+          return cloned;
+        });
+      };
+      const cleanValues = (values) => {
+        if (!values) return null;
+        const result2 = { ...values };
+        if (result2.attributes) {
+          result2.attributes = result2.attributes.map((item) => {
+            const cloned = { ...item };
+            cloned.elementId = nodeMap.get(item.element);
+            delete cloned.element;
+            return cloned;
+          });
+        }
+        if (result2.textNodes) {
+          result2.textNodes = result2.textNodes.map((item) => {
+            const cloned = { ...item };
+            cloned.textNodeId = nodeMap.get(item.textNode);
+            delete cloned.textNode;
+            return cloned;
+          });
+        }
+        if (result2.refs) {
+          result2.refs = result2.refs.map((item) => {
+            const cloned = { ...item };
+            cloned.elementId = nodeMap.get(item.element);
+            delete cloned.element;
+            return cloned;
+          });
+        }
+        return result2;
+      };
+      const templateAST = serialize(cleanAST(this.sharedFunctions[componentId].templateAST) || []);
+      const templateValues = serialize(cleanValues(this.sharedFunctions[componentId].templateValues) || {
+        attributes: [],
+        textNodes: [],
+        refs: []
+      });
       const styles = JSON.stringify(this.sharedFunctions[componentId].styles || "");
       const defaults = serialize(this.sharedFunctions[componentId].defaultValues || {});
       componentEntryCode += `
 export default {
   componentId: "${componentId}",
-  template: ${template},
+  templateAST: ${templateAST},
+  templateValues: ${templateValues},
   styles: ${styles},
   defaultValues: (() => { const defaults = ${defaults}; return defaults; })(),
   imports: ${hasImports ? "componentImports" : "{}"},
@@ -10343,19 +10392,19 @@ function createPlugin({
 
 // plugins/static-assets.js
 import { createRequire } from "node:module";
-import { dirname as dirname3, join as join3 } from "node:path";
+import { dirname as dirname3, join as join2 } from "node:path";
 import { existsSync as existsSync2 } from "node:fs";
 import { cp, mkdir } from "node:fs/promises";
 var staticAssetPlugin = (assets = []) => {
   return createPlugin({
     name: "static-asset-plugin",
     onBeforeBuild: async function() {
-      const outputDir = this.options.output || join3(process.cwd(), "dist");
+      const outputDir = this.options.output || join2(process.cwd(), "dist");
       for (const asset of assets) {
         if (!asset.dest) {
           throw new Error("staticAssetPlugin requires assets to have a dest property.");
         }
-        const dest = join3(outputDir, asset.dest);
+        const dest = join2(outputDir, asset.dest);
         if (asset.src) {
           await mkdir(dirname3(dest), { recursive: true });
           await cp(asset.src, dest, { recursive: true });
@@ -10364,20 +10413,20 @@ var staticAssetPlugin = (assets = []) => {
         if (!asset.pkg || !asset.path) {
           throw new Error("staticAssetPlugin requires assets to have pkg and path properties when src is not provided.");
         }
-        const require2 = createRequire(join3(process.cwd(), "package.json"));
+        const require2 = createRequire(join2(process.cwd(), "package.json"));
         let pkgPath;
         try {
           pkgPath = dirname3(require2.resolve(`${asset.pkg}/package.json`));
         } catch (e) {
           pkgPath = dirname3(require2.resolve(asset.pkg));
-          while (pkgPath !== "/" && !existsSync2(join3(pkgPath, "package.json"))) {
+          while (pkgPath !== "/" && !existsSync2(join2(pkgPath, "package.json"))) {
             pkgPath = dirname3(pkgPath);
           }
           if (pkgPath === "/") {
             throw new Error(`staticAssetPlugin could not resolve package.json for package: ${asset.pkg}`);
           }
         }
-        const src = join3(pkgPath, asset.path);
+        const src = join2(pkgPath, asset.path);
         await mkdir(dirname3(dest), { recursive: true });
         await cp(src, dest, { recursive: true });
       }
@@ -10387,7 +10436,7 @@ var staticAssetPlugin = (assets = []) => {
 
 // lib/coralite.js
 import { mkdir as mkdir2, writeFile } from "node:fs/promises";
-import { dirname as dirname4, join as join4, normalize, relative, resolve as resolve2 } from "node:path";
+import { dirname as dirname4, join as join3, normalize, relative, resolve as resolve2 } from "node:path";
 import { createRequire as createRequire2 } from "node:module";
 import { transform } from "esbuild";
 
@@ -10662,7 +10711,7 @@ Coralite.prototype.initialise = async function() {
     if (data2.type === "component") {
       rootPath = this.options.path.components;
     }
-    const urlPathname = pathToFileURL2(join4("/", relative(rootPath, data2.path.pathname))).pathname;
+    const urlPathname = pathToFileURL2(join3("/", relative(rootPath, data2.path.pathname))).pathname;
     const values = {
       $urlPathname: urlPathname,
       $urlDirname: pathToFileURL2(dirname4(urlPathname)).pathname,
@@ -10966,7 +11015,7 @@ ${css}
         delete chunkManifest["chunk-shared"];
         const base2 = this.options.baseURL.endsWith("/") ? this.options.baseURL : this.options.baseURL + "/";
         let scriptContent = `
-import { getHelpers, getSetups } from '${base2}assets/js/${scriptResult.manifest["chunk-shared"]}';
+import { getHelpers, getSetups, render } from '${base2}assets/js/${scriptResult.manifest["chunk-shared"]}';
 
 // Global setups initialization
 const globalContext = {};
@@ -10988,8 +11037,9 @@ const globalSetupValuesPromise = getSetups(globalContext);
             super();
             this.componentId = module.default.componentId;
             this.attachShadow({ mode: 'open' });
+            this._abortController = null;
             
-            const randomID = Math.random().toString(36).substring(2, 10);
+            const randomID = crypto.randomUUID();
             this._instanceId = \`\${this.componentId}-\${randomID}\`;
             
             this.values = {};
@@ -11006,48 +11056,27 @@ const globalSetupValuesPromise = getSetups(globalContext);
             
             // Merge defaults
             Object.assign(this.values, module.default.defaultValues);
-            
-            this._render();
-          }
 
-          _replaceTokens(template) {
-            return template.replace(/\\{\\{\\s*([^{}\\s]+)\\s*\\}\\}/g, (match, tokenName) => {
-              const value = this.values[tokenName];
-              if (typeof value === 'function') {
-                return value(this.values);
-              }
-              return value != null ? value : '';
-            });
-          }
-
-          _render() {
-            let content = '';
+            this._styles = ''
             if (module.default.styles) {
-              content += \`<style>\${module.default.styles}</style>\`;
+              this._styles += \`<style>\${module.default.styles}</style>\`;
             }
-            content += this._replaceTokens(module.default.template);
-            
-            this.shadowRoot.innerHTML = content;
+          }
 
+          connectedCallback() {
+            this._abortController = new AbortController();
+            
+            this._render();
+            
             const localContext = {
               instanceId: this._instanceId,
               componentId: this.componentId,
               values: this.values,
               root: this.shadowRoot, 
-              helpers: {}
+              helpers: {},
+              signal: this._abortController.signal
             };
 
-            const refElements = this.shadowRoot.querySelectorAll('[ref]');
-            for (let i = 0; i < refElements.length; i++) {
-              const element = refElements[i];
-              const refName = element.getAttribute('ref');
-              
-              const dynamicId = \`\${this.componentId}__\${refName}-\${localContext.instanceId}\`;
-              element.setAttribute('ref', dynamicId);
-              
-              this.values[\`ref_\${refName}\`] = dynamicId;
-            }
-
             ;(async () => {
               const setupValues = await globalSetupValuesPromise;
               localContext.values = { ...localContext.values, ...setupValues };
@@ -11087,7 +11116,101 @@ const globalSetupValuesPromise = getSetups(globalContext);
             this._observer.observe(this, { attributes: true });
           }
 
+          _replaceTokens(templateAST, templateValues) {
+            // Map to store cloned nodes by their _id
+            const nodeById = {};
+
+            // Function to deep clone AST and build ID map
+            const cloneAST = (nodes) => {
+              return nodes.map((node) => {
+                const cloned = { ...node };
+                if (cloned._id != null) {
+                  nodeById[cloned._id] = cloned;
+                }
+                if (cloned.children) {
+                  cloned.children = cloneAST(cloned.children);
+                }
+                if (cloned.attribs) {
+                  cloned.attribs = { ...cloned.attribs };
+                }
+                return cloned;
+              });
+            };
+
+            const ast = cloneAST(templateAST);
+
+            if (!templateValues) return ast;
+
+            // Replace tokens in attributes using the exact token matches
+            if (templateValues.attributes) {
+              for (let i = 0; i < templateValues.attributes.length; i++) {
+                const item = templateValues.attributes[i];
+                const node = nodeById[item.elementId];
+                if (!node || !node.attribs || node.attribs[item.name] == null) continue;
+
+                for (let j = 0; j < item.tokens.length; j++) {
+                  const token = item.tokens[j];
+                  let value = this.values[token.name];
+                  
+                  if (typeof value === 'function') {
+                    value = value(this.values);
+                  }
+                  if (value == null) value = '';
+
+                  // Replace exactly the token content string rather than a regex over the whole attribute
+                  node.attribs[item.name] = node.attribs[item.name].split(token.content).join(value);
+                }
+              }
+            }
+
+            // Replace tokens in text nodes using the exact token matches
+            if (templateValues.textNodes) {
+              for (let i = 0; i < templateValues.textNodes.length; i++) {
+                const item = templateValues.textNodes[i];
+                const node = nodeById[item.textNodeId];
+                if (!node || node.data == null) continue;
+
+                for (let j = 0; j < item.tokens.length; j++) {
+                  const token = item.tokens[j];
+                  let value = this.values[token.name];
+                  
+                  if (typeof value === 'function') {
+                    value = value(this.values);
+                  }
+                  if (value == null) value = '';
+
+                  node.data = node.data.split(token.content).join(value);
+                }
+              }
+            }
+
+            return ast;
+          }
+
+          _render() {
+            let content = this._styles;
+            const ast = this._replaceTokens(module.default.templateAST, module.default.templateValues);
+            content += render(ast, { decodeEntities: false });
+            
+            this.shadowRoot.innerHTML = content;
+
+            const refElements = this.shadowRoot.querySelectorAll('[ref]');
+            for (let i = 0; i < refElements.length; i++) {
+              const element = refElements[i];
+              const refName = element.getAttribute('ref');
+              
+              const dynamicId = \`\${this.componentId}__\${refName}-\${this._instanceId}\`;
+              element.setAttribute('ref', dynamicId);
+              
+              this.values[\`ref_\${refName}\`] = dynamicId;
+            }
+          }
+
           disconnectedCallback() {
+            if (this._abortController) {
+              this._abortController.abort();
+              this._abortController = null;
+            }
             if (this._observer) {
               this._observer.disconnect();
               this._observer = null;
@@ -11100,11 +11223,12 @@ const globalSetupValuesPromise = getSetups(globalContext);
   };
 
   // Check the current page's DOM for custom elements
-  const elements = document.querySelectorAll('*');
+  const componentTags = Object.keys(componentManifest);
   const loadPromises = [];
-  for (let i = 0; i < elements.length; i++) {
-    const tagName = elements[i].tagName.toLowerCase();
-    if (componentManifest[tagName]) {
+  for (let i = 0; i < componentTags.length; i++) {
+    const tagName = componentTags[i];
+    const elements = document.querySelectorAll(tagName);
+    if (elements.length > 0) {
       loadPromises.push(loadComponent(tagName));
     }
   }
@@ -11307,8 +11431,8 @@ Coralite.prototype.save = async function(path2, options = {}) {
   const results = await this.build(path2, options, async (result) => {
     let relativeDir, outDir, outFile, contentToWrite;
     relativeDir = relative(this.options.path.pages, result.path.dirname);
-    outDir = join4(output, relativeDir);
-    outFile = join4(outDir, result.path.filename);
+    outDir = join3(output, relativeDir);
+    outFile = join3(outDir, result.path.filename);
     contentToWrite = result.content;
     if (!createdDir[outDir]) {
       await mkdir2(outDir, { recursive: true });
@@ -11321,13 +11445,13 @@ Coralite.prototype.save = async function(path2, options = {}) {
     };
   });
   if (this.outputFiles) {
-    const assetsDir = join4(output, "assets", "js");
+    const assetsDir = join3(output, "assets", "js");
     if (!createdDir[assetsDir]) {
       await mkdir2(assetsDir, { recursive: true });
       createdDir[assetsDir] = true;
     }
     const assetWrites = Object.values(this.outputFiles).map(async (file) => {
-      const outFile = join4(assetsDir, file.hashedPath);
+      const outFile = join3(assetsDir, file.hashedPath);
       await writeFile(outFile, file.text, { signal });
       results.push({
         path: outFile,
@@ -11398,7 +11522,8 @@ Coralite.prototype._processDependentComponents = async function(componentIds, re
         renderContext
       });
     }
-    const templateHTML = this.transform(module.template.children);
+    const templateAST = module.template.children;
+    const templateValues = module.values;
     const stylesHTML = module.styles && module.styles.length ? module.styles.join("\n") : "";
     let scriptObj = {
       content: "export default function(){}",
@@ -11422,7 +11547,8 @@ Coralite.prototype._processDependentComponents = async function(componentIds, re
       id: module.id,
       script: scriptObj,
       filePath: moduleComponent.path.pathname,
-      template: templateHTML,
+      templateAST,
+      templateValues,
       defaultValues,
       styles: stylesHTML
     });
@@ -11499,7 +11625,8 @@ Coralite.prototype.createComponentElement = async function({
         scriptResult.__script__.content = "export default function(){}";
       }
       const stylesHTML = module.styles && module.styles.length ? module.styles.join("\n") : "";
-      const templateHTML = this.transform(module.template.children);
+      const templateAST = module.template.children;
+      const templateValues = module.values;
       const componentTokens = {};
       for (let i = 0; i < module.values.attributes.length; i++) {
         const item = module.values.attributes[i];
@@ -11525,7 +11652,8 @@ Coralite.prototype.createComponentElement = async function({
         id: module.id,
         script: scriptResult.__script__,
         filePath: moduleComponent.path.pathname,
-        template: templateHTML,
+        templateAST,
+        templateValues,
         defaultValues: componentDefaultValues,
         styles: stylesHTML
       });