coralite 0.27.0 → 0.28.0

package/README.md

@@ -32,20 +32,12 @@ Before using the Coralite CLI, ensure that it's installed on your system. You ca
 
 ```bash
 npm install -g coralite
-# or
-yarn global add coralite
-# or
-pnpm add -g coralite
 ```
 
 You can also install coralite as a development dependency:
 
 ```bash
 npm install --save-dev coralite
-# or
-yarn add -D coralite
-# or
-pnpm add -D coralite
 ```
 
 ## Basic Syntax
@@ -64,14 +56,14 @@ Replace `[options]` with the desired flags and arguments.
 
 To generate a website using Coralite, you must provide three essential options:
 
-- **-t or --templates**: The path to your templates directory containing reusable UI elements (e.g., `-t src/templates`).
+- **-t or --components**: The path to your components directory containing reusable UI elements (e.g., `-t src/components`).
 - **-p or --pages**: The path to your pages directory where static HTML files reside (e.g., `-p src/pages`).
 - **--output or -o**: The output directory for the generated site (e.g., `--output dist`).
 
 Here's an example of how these options might look:
 
 ```bash
-coralite --templates path/to/templates --pages path/to/pages --output dist
+coralite --components path/to/components --pages path/to/pages --output dist
 ```
 
 ## Optional Options
@@ -81,5 +73,5 @@ coralite --templates path/to/templates --pages path/to/pages --output dist
 Run the CLI in dry-run mode to preview the actions that would be performed without actually generating the website. This is useful for debugging or when you want to check potential issues before committing changes:
 
 ```bash
-coralite --templates path/to/templates --pages path/to/pages --output dist --dry-run
+coralite --components path/to/components --pages path/to/pages --output dist --dry-run
 ```

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

@@ -6615,6 +6615,18 @@ function findAndExtractScript(code) {
       if (node.callee && node.callee.type === "Identifier" && node.callee.name === "defineComponent") {
         const firstArg = node.arguments[0];
         if (firstArg && firstArg.type === "ObjectExpression") {
+          const tokensProp = firstArg.properties.find(
+            (prop) => prop.type === "Property" && prop.key.type === "Identifier" && prop.key.name === "tokens"
+          );
+          let tokens = [];
+          if (tokensProp && tokensProp.type === "Property" && tokensProp.value.type === "ObjectExpression") {
+            tokens = tokensProp.value.properties.map((p) => {
+              if (p.type === "Property") {
+                return p.key.type === "Identifier" ? p.key.name : p.key.type === "Literal" ? p.key.value : void 0;
+              }
+              return void 0;
+            }).filter(Boolean);
+          }
           const clientProp = firstArg.properties.find(
             (prop) => prop.type === "Property" && prop.key.type === "Identifier" && prop.key.name === "client"
           );
@@ -6733,6 +6745,15 @@ function findAndExtractScript(code) {
                 result.setupContent = setupContent;
               }
             }
+            if (result && tokens.length > 0) {
+              result.tokens = tokens;
+            }
+          } else if (tokens.length > 0) {
+            result = {
+              content: "export default function(){}",
+              lineOffset: 0,
+              tokens
+            };
           }
         }
       }
@@ -9438,11 +9459,14 @@ ScriptManager.prototype.compileStandaloneComponent = async function(componentId,
       if (parts.length > 0) {
         const importStr = parts.join(", ");
         entryCodeParts.push(`import ${importStr} from ${specifier}${attributesString};
+`);
+      } else if (!importDefinition.namespaceExport) {
+        entryCodeParts.push(`import ${specifier}${attributesString};
 `);
       }
     }
   }
-  const importsObjContent = Object.keys(importMap).length > 0 ? `const componentImports = { ${Object.entries(importMap).map(([key, value]) => `${key}: ${value}`).join(", ")} };` : "const componentImports = {};";
+  const importsObjContent = Object.keys(importMap).length > 0 ? `const componentImports = { ${Object.entries(importMap).map(([key, value]) => `"${key}": ${value}`).join(", ")} };` : "const componentImports = {};";
   entryCodeParts.push(importsObjContent + "\n");
   entryCodeParts.push(`
 function kebabToCamel(str) {
@@ -9534,13 +9558,68 @@ function cleanKeys(object) {
   `);
   entryCodeParts.push(`
 class ${componentId.replace(/[-.:]/g, "_")} extends HTMLElement {
+  static get observedAttributes() {
+    return ${JSON.stringify(scriptContent?.tokens || [])};
+  }
+
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._initialized = false;
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      if (this._context && this._context.values) {
+        this._context.values[name] = newValue;
+      }
+      this.updateDOM(name, newValue);
+    }
+  }
+
+  updateDOM(name, newValue) {
+    if (!this.shadowRoot) return;
+    
+    // Find text nodes that contain the token mapping
+    const walker = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_TEXT, null, false);
+    let node;
+    const tokenStr = \`{{ \${name} }}\`;
+    
+    while ((node = walker.nextNode())) {
+      // Check if original data or textContent contains the token map
+      if (node._coraliteTokens && node._coraliteTokens.includes(name)) {
+        // We know this text node holds the value, let's re-render its text based on current context
+        let newText = node._coraliteOriginalText;
+        for (const token of node._coraliteTokens) {
+           newText = newText.split(\`{{ \${token} }}\`).join(this._context.values[token] !== undefined ? this._context.values[token] : '');
+        }
+        node.nodeValue = newText;
+        node.nodeValue = newText;
+      }
+    }
+    
+    // Also update attributes that might have bindings
+    const elements = this.shadowRoot.querySelectorAll('*');
+    for (const el of elements) {
+      if (el._coraliteAttrs) {
+        for (const [attrName, originalValue] of Object.entries(el._coraliteAttrs)) {
+          if (originalValue.includes(tokenStr)) {
+            let newAttrValue = originalValue;
+            // replace all tokens in this attribute
+            const tokenMatches = originalValue.match(/\\{\\{([^}]+)\\}\\}/g) || [];
+            for (const match of tokenMatches) {
+               const tokenKey = match.replace(/\\{|\\}/g, '').trim();
+               newAttrValue = newAttrValue.split(match).join(this._context.values[tokenKey] !== undefined ? this._context.values[tokenKey] : '');
+            }
+            el.setAttribute(attrName, newAttrValue);
+          }
+        }
+      }
+    }
   }
 
   async connectedCallback() {
-    // 1. Map DOM Attributes to values
+    // Map DOM Attributes to values
     const domAttributes = {};
     for (let i = 0; i < this.attributes.length; i++) {
       const attribute = this.attributes[i];
@@ -9548,17 +9627,18 @@ class ${componentId.replace(/[-.:]/g, "_")} extends HTMLElement {
     }
     const initialValues = cleanKeys(domAttributes);
 
-    // 2. Hydrate Refs
+    // Hydrate Refs
     const refs = {};
 
-    // 3. Setup context
-    const context = {
+    // Setup context
+    this._context = {
       instanceId: this.id || Math.random().toString(36).substr(2, 9),
       componentId: "${componentId}",
       values: initialValues,
       root: this.shadowRoot,
       imports: componentImports // Standalone imports are bundled within the component
     };
+    const context = this._context;
 
     const setupValues = await getSetups(context);
     context.values = { ...context.values, ...setupValues };
@@ -9567,18 +9647,51 @@ class ${componentId.replace(/[-.:]/g, "_")} extends HTMLElement {
     let htmlPayload = \`${htmlPayload.replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`;
     const cssPayload = \`${cssPayload.replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`;
     
-    // Replace text tokens in the payload (rudimentary support for standalone components without the full AST engine)
-    for (const [key, value] of Object.entries(context.values)) {
-      const token = \`{{ \${key} }}\`;
-      htmlPayload = htmlPayload.split(token).join(value);
-    }
-    
     let styles = '';
     if (cssPayload) {
       styles = \`<style>\${cssPayload}</style>\`;
     }
+    
+    // Set raw HTML first before token replacement to preserve slots structure
     this.shadowRoot.innerHTML = styles + htmlPayload;
 
+    // Extract tokens mapped to DOM nodes for reactivity
+    const walker = document.createTreeWalker(this.shadowRoot, NodeFilter.SHOW_TEXT, null, false);
+    let node;
+    while ((node = walker.nextNode())) {
+      const text = node.textContent || '';
+      const tokens = (text.match(/\\{\\{([^}]+)\\}\\}/g) || []).map(t => t.replace(/\\{|\\}/g, '').trim());
+      
+      if (tokens.length > 0) {
+        node._coraliteTokens = tokens;
+        node._coraliteOriginalText = text;
+        
+        let newText = text;
+        for (const token of tokens) {
+          newText = newText.split(\`{{ \${token} }}\`).join(context.values[token] !== undefined ? context.values[token] : '');
+        }
+        node.nodeValue = newText;
+      }
+    }
+    
+    // Attribute reactivity
+    const allElements = this.shadowRoot.querySelectorAll('*');
+    for (const el of allElements) {
+      for (const attr of el.attributes) {
+         if (attr.value.includes('{{')) {
+             if (!el._coraliteAttrs) el._coraliteAttrs = {};
+             el._coraliteAttrs[attr.name] = attr.value;
+             
+             let newAttrValue = attr.value;
+             const tokens = (attr.value.match(/\\{\\{([^}]+)\\}\\}/g) || []).map(t => t.replace(/\\{|\\}/g, '').trim());
+             for (const token of tokens) {
+               newAttrValue = newAttrValue.split(\`{{ \${token} }}\`).join(context.values[token] !== undefined ? context.values[token] : '');
+             }
+             el.setAttribute(attr.name, newAttrValue);
+         }
+      }
+    }
+
     // Post-render ref extraction
     const refElements = this.shadowRoot.querySelectorAll('[ref]');
     refElements.forEach(el => {
@@ -9594,6 +9707,10 @@ class ${componentId.replace(/[-.:]/g, "_")} extends HTMLElement {
 
     // 4. Execute User Script
     if (typeof userComponentFn === 'function') {
+      if (this._initialized) {
+        return;
+      }
+      this._initialized = true;
       await userComponentFn.call(this, context);
     }
   }
@@ -9626,6 +9743,13 @@ customElements.define("${componentId}", ${componentId.replace(/[-.:]/g, "_")});
               pluginData: { index }
             };
           });
+          pluginBuild.onResolve({ filter: /^coralite-component\// }, (args) => {
+            const componentId2 = args.path.replace("coralite-component/", "");
+            return {
+              path: `./${componentId2}.js`,
+              external: true
+            };
+          });
           pluginBuild.onLoad({
             filter: /.*/,
             namespace: "coralite-script-module"
@@ -9669,7 +9793,7 @@ customElements.define("${componentId}", ${componentId.replace(/[-.:]/g, "_")});
                 }
               }
             }
-            const importsObjContent2 = Object.keys(importMap2).length > 0 ? `const pluginImports = { ${Object.entries(importMap2).map(([key, value]) => `${key}: ${value}`).join(", ")} };` : "const pluginImports = {};";
+            const importsObjContent2 = Object.keys(importMap2).length > 0 ? `const pluginImports = { ${Object.entries(importMap2).map(([key, value]) => `"${key}": ${value}`).join(", ")} };` : "const pluginImports = {};";
             contents += importsObjContent2 + "\n";
             const configContent = module.config ? `const pluginConfig = ${JSON.stringify(module.config)};` : "const pluginConfig = {};";
             contents += configContent + "\n";
@@ -9901,7 +10025,7 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
                 }
               }
             }
-            const importsObjContent = Object.keys(importMap).length > 0 ? `const componentImports = { ${Object.entries(importMap).map(([key, value]) => `${key}: ${value}`).join(", ")} };` : "const componentImports = {};";
+            const importsObjContent = Object.keys(importMap).length > 0 ? `const componentImports = { ${Object.entries(importMap).map(([key, value]) => `"${key}": ${value}`).join(", ")} };` : "const componentImports = {};";
             contents += importsObjContent + "\n";
             contents += "export default componentImports;";
             return {
@@ -9953,7 +10077,7 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
                 }
               }
             }
-            const importsObjContent = Object.keys(importMap).length > 0 ? `const pluginImports = { ${Object.entries(importMap).map(([key, value]) => `${key}: ${value}`).join(", ")} };` : "const pluginImports = {};";
+            const importsObjContent = Object.keys(importMap).length > 0 ? `const pluginImports = { ${Object.entries(importMap).map(([key, value]) => `"${key}": ${value}`).join(", ")} };` : "const pluginImports = {};";
             contents += importsObjContent + "\n";
             const configContent = module.config ? `const pluginConfig = ${JSON.stringify(module.config)};` : "const pluginConfig = {};";
             contents += configContent + "\n";
@@ -10677,7 +10801,10 @@ Coralite.prototype._generateStandaloneComponents = async function* () {
     );
     yield {
       type: "component",
-      path: component.path,
+      path: {
+        ...component.path,
+        filename: component.path.filename.replace(/\.html$/, ".js")
+      },
       content: compiledCode,
       duration: performance.now() - startTime
     };
@@ -10941,17 +11068,15 @@ Coralite.prototype.build = async function(...args) {
       });
     }
     await Promise.all(executing);
-    if (this.options.standaloneOutput) {
-      for await (const result of this._generateStandaloneComponents()) {
-        if (signal?.aborted) throw signal.reason;
-        if (typeof callback === "function") {
-          const transformed = await callback(result);
-          if (transformed) {
-            results.push(transformed);
-          }
-        } else {
-          results.push(result);
+    for await (const result of this._generateStandaloneComponents()) {
+      if (signal?.aborted) throw signal.reason;
+      if (typeof callback === "function") {
+        const transformed = await callback(result);
+        if (transformed) {
+          results.push(transformed);
         }
+      } else {
+        results.push(result);
       }
     }
     return results;
@@ -10982,15 +11107,19 @@ Coralite.prototype.save = async function(output, path2, options = {}) {
   const signal = options?.signal;
   const createdDir = {};
   const results = await this.build(path2, options, async (result) => {
-    let relDir, outDir, outFile, contentToWrite;
+    let relativeDir, outDir, outFile, contentToWrite;
     if (result.type === "component") {
-      relDir = relative(this.options.path.components, result.path.dirname);
-      outDir = join2(this.options.standaloneOutput, relDir);
-      outFile = join2(outDir, result.path.filename.replace(".html", ".js"));
+      relativeDir = relative(this.options.path.components, result.path.dirname);
+      if (this.options.standaloneOutput) {
+        outDir = join2(output, this.options.standaloneOutput, relativeDir);
+      } else {
+        outDir = join2(output, "components", relativeDir);
+      }
+      outFile = join2(outDir, result.path.filename);
       contentToWrite = result.content;
     } else {
-      relDir = relative(this.options.path.pages, result.path.dirname);
-      outDir = join2(output, relDir);
+      relativeDir = relative(this.options.path.pages, result.path.dirname);
+      outDir = join2(output, relativeDir);
       outFile = join2(outDir, result.path.filename);
       contentToWrite = result.content;
     }