coralite 0.29.0 → 0.29.2

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

@@ -9392,9 +9392,9 @@ ScriptManager.prototype.use = async function(plugin) {
 ScriptManager.prototype.getHelpersContent = function() {
   let helpers = "";
   for (const key of Object.keys(this.helpers)) {
-    helpers += `"${key}": (() => {
+    helpers += `"${key}": (async () => {
       const phase1 = ${this.helpers[key]};
-      const phase2 = phase1({});
+      const phase2 = await phase1({});
       return (localContext) => phase2(localContext);
     })(),`;
   }
@@ -9407,9 +9407,9 @@ ScriptManager.prototype.addHelper = async function(name, method) {
 ScriptManager.prototype.getHelpers = function() {
   let helpers = "";
   for (const key of Object.keys(this.helpers)) {
-    helpers += `"${key}": (() => {
+    helpers += `"${key}": (async () => {
       const phase1 = ${this.helpers[key]};
-      const phase2 = phase1({});
+      const phase2 = await phase1({});
       return (localContext) => phase2(localContext);
     })(),`;
   }
@@ -9450,10 +9450,11 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
     ${helperParts}
   };
 `);
-  entryCodeParts.push(`const getHelpers = (context) => {
+  entryCodeParts.push(`const getHelpers = async (context) => {
     const helpers = {}
     for (const [key, helper] of Object.entries(coraliteComponentScriptHelpers)) {
-      helpers[key] = helper(context)
+      const resolvedHelper = await helper
+      helpers[key] = resolvedHelper(context)
     }
     return helpers
   }
@@ -9533,7 +9534,16 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
   entryCodeParts.push("const coraliteComponentDefaults = {\n");
   for (const key of processedComponentKeys) {
     if (this.sharedFunctions[key] && this.sharedFunctions[key].defaultValues) {
-      entryCodeParts.push(`  "${key}": ${serialize(this.sharedFunctions[key].defaultValues)},
+      entryCodeParts.push(`  "${key}": (() => {
+`);
+      entryCodeParts.push(`    const defaults = ${serialize(this.sharedFunctions[key].defaultValues)};
+`);
+      entryCodeParts.push(`    return defaults;
+`);
+      entryCodeParts.push(`  })(),
+`);
+    } else {
+      entryCodeParts.push(`  "${key}": {},
 `);
     }
   }
@@ -9554,25 +9564,80 @@ class CoraliteElement extends HTMLElement {
     
     const defaults = coraliteComponentDefaults[componentId] || {};
     this.values = { ...defaults };
+    this._isRendering = false;
+    this._observer = null;
     
     this.attachShadow({ mode: 'open' });
   }
 
-  connectedCallback() {
-    const template = coraliteComponentTemplates[this.componentId] || '';
-    const styles = coraliteComponentStyles[this.componentId];
-    
-    if (!this.shadowRoot.innerHTML.trim()) {
+  _replaceTokens(template) {
+    return template.replace(/\\{\\{\\s*([\\w.]+)\\s*\\}\\}/g, (match, token) => {
+      let value = this.values;
+      const properties = token.split('.');
+      for (const prop of properties) {
+        if (value && typeof value === 'object') {
+          value = value[prop];
+        } else {
+          value = undefined;
+          break;
+        }
+      }
+
+      if (typeof value === 'function') {
+        value = value(this.values);
+      }
+
+      return value != null ? value : '';
+    });
+  }
+
+  _render() {
+    if (this._isRendering) return;
+    this._isRendering = true;
+
+    Promise.resolve().then(() => {
+      this._isRendering = false;
+      const template = coraliteComponentTemplates[this.componentId] || '';
+      const styles = coraliteComponentStyles[this.componentId];
+      
       let content = '';
       if (styles) {
         content += \`<style>\${styles}</style>\`;
       }
-      content += template;
-      this.shadowRoot.innerHTML = content; 
+      content += this._replaceTokens(template);
+      
+      this.shadowRoot.innerHTML = content;
+    });
+  }
+
+  connectedCallback() {
+    this._instanceId = crypto.randomUUID();
+    
+    // Initial sync of attributes to values
+    for (let i = 0; i < this.attributes.length; i++) {
+      const attr = this.attributes[i];
+      // Convert kebab-case to camelCase
+      const camelName = attr.name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+      this.values[camelName] = attr.value;
+      if (camelName !== attr.name) {
+          this.values[attr.name] = attr.value;
+      }
     }
 
+    // Initial render synchronously so it's ready for the script
+    const template = coraliteComponentTemplates[this.componentId] || '';
+    const styles = coraliteComponentStyles[this.componentId];
+    
+    let content = '';
+    if (styles) {
+      content += \`<style>\${styles}</style>\`;
+    }
+    content += this._replaceTokens(template);
+    
+    this.shadowRoot.innerHTML = content;
+
     const localContext = {
-      instanceId: crypto.randomUUID(),
+      instanceId: this._instanceId,
       componentId: this.componentId,
       values: this.values,
       root: this.shadowRoot, 
@@ -9590,15 +9655,48 @@ class CoraliteElement extends HTMLElement {
       this.values[\`ref_\${refName}\`] = dynamicId;
     }
 
-    const helpers = getHelpers(localContext);
-    localContext.helpers = helpers;
-    
-    const imports = coraliteComponentImports[this.componentId] || {};
-    localContext.imports = imports;
+    ;(async () => {
+      const helpers = await getHelpers(localContext);
+      localContext.helpers = helpers;
+      
+      const imports = coraliteComponentImports[this.componentId] || {};
+      localContext.imports = imports;
+
+      const userScript = coraliteComponentFunctions[this.componentId];
+      if (userScript) {
+        userScript(localContext);
+      }
+    })();
 
-    const userScript = coraliteComponentFunctions[this.componentId];
-    if (userScript) {
-      userScript(localContext);
+    this._observer = new MutationObserver((mutations) => {
+      let shouldRender = false;
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes') {
+          const attrName = mutation.attributeName;
+          const camelName = attrName.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+          const newValue = this.getAttribute(attrName);
+          
+          if (this.values[camelName] !== newValue) {
+            this.values[camelName] = newValue;
+            if (camelName !== attrName) {
+                this.values[attrName] = newValue;
+            }
+            shouldRender = true;
+          }
+        }
+      }
+      if (shouldRender) {
+        this._render();
+      }
+    });
+
+    this._observer.observe(this, { attributes: true });
+  }
+
+  disconnectedCallback() {
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
     }
   }
 }
@@ -9629,7 +9727,7 @@ for (const componentId of Object.keys(coraliteComponentTemplates)) {
     entryCodeParts.push("context.imports = imports;\n");
     entryCodeParts.push("const setupValues = await globalSetupValuesPromise;\n");
     entryCodeParts.push("context.values = { ...context.values, ...setupValues };\n");
-    entryCodeParts.push("const helpers = getHelpers(context);\n");
+    entryCodeParts.push("const helpers = await getHelpers(context);\n");
     entryCodeParts.push("context.helpers = helpers;\n");
     entryCodeParts.push(`
 // Instance: ${instanceId}
@@ -9798,13 +9896,14 @@ for (const componentId of Object.keys(coraliteComponentTemplates)) {
               for (const key in module.helpers) {
                 if (Object.hasOwn(module.helpers, key)) {
                   const fn = normalizeFunction(module.helpers[key]);
-                  contents += `  "${key}": (() => {
+                  contents += `  "${key}": (async () => {
                     const globalContext = {
                       imports: pluginImports,
                       config: pluginConfig
                     };
                     const fn = ${fn};
-                    return fn(globalContext);
+                    const phase2 = await fn(globalContext);
+                    return (localContext) => phase2(localContext);
                   })(),
 `;
                 }
@@ -11167,10 +11266,34 @@ 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 componentTokens = {};
+      for (let i = 0; i < module.values.attributes.length; i++) {
+        const item = module.values.attributes[i];
+        for (let j = 0; j < item.tokens.length; j++) {
+          componentTokens[item.tokens[j].name] = true;
+        }
+      }
+      for (let i = 0; i < module.values.textNodes.length; i++) {
+        const item = module.values.textNodes[i];
+        for (let j = 0; j < item.tokens.length; j++) {
+          componentTokens[item.tokens[j].name] = true;
+        }
+      }
+      const componentDefaultValues = scriptResult.__script__.defaultValues || {};
+      if (values) {
+        for (const token of Object.keys(componentTokens)) {
+          if (typeof values[token] === "function") {
+            componentDefaultValues[token] = values[token];
+          }
+        }
+      }
       this._scriptManager.registerComponent({
         id: module.id,
         script: scriptResult.__script__,
         filePath: moduleComponent.path.pathname,
+        template: templateHTML,
+        defaultValues: componentDefaultValues,
         styles: stylesHTML
       });
       if (scriptResult.__script__ && scriptResult.__script__.components) {