coralite 0.41.0 → 0.43.0

package/dist/lib/index.js

@@ -53,17 +53,16 @@ function defaultOnError({ level, message, error }) {
   }
 }
 function handleError({ onErrorCallback, data }) {
-  const error = data.error;
-  if (error && "isCoraliteError" in error && error.isCoraliteError) {
-    const coraliteError = error;
-    data.componentId = data.componentId || coraliteError.componentId;
-    data.filePath = data.filePath || coraliteError.filePath;
-    data.instanceId = data.instanceId || coraliteError.instanceId;
-    data.pagePath = data.pagePath || coraliteError.pagePath;
-    data.path = data.path || coraliteError.path;
-    data.line = data.line || coraliteError.line;
-    data.column = data.column || coraliteError.column;
-    data.stackFile = data.stackFile || coraliteError.stackFile;
+  const { error } = data;
+  if (error && typeof error === "object" && "isCoraliteError" in error && error.isCoraliteError) {
+    data.componentId ??= error.componentId;
+    data.filePath ??= error.filePath;
+    data.instanceId ??= error.instanceId;
+    data.pagePath ??= error.pagePath;
+    data.path ??= error.path;
+    data.line ??= error.line;
+    data.column ??= error.column;
+    data.stackFile ??= error.stackFile;
   }
   if (onErrorCallback) {
     onErrorCallback(data);
@@ -2123,7 +2122,7 @@ function validateSerializable(value, path2 = "root", seen = /* @__PURE__ */ new
 
 // lib/utils/server/server.js
 import { parse as parseJS } from "acorn";
-import { simple as walkJS } from "acorn-walk";
+import { simple as walkJS, ancestor as walkAncestorJS } from "acorn-walk";
 import render from "dom-serializer";
 import { sanitize } from "isomorphic-dompurify";
 
@@ -2189,6 +2188,46 @@ function getAST(code, locations = false) {
   astCache.set(cacheKey, ast);
   return ast;
 }
+function resolveStringValues(node, ancestors) {
+  if (!node) {
+    return [];
+  }
+  if (node.type === "Literal" && typeof node.value === "string") {
+    return [node.value];
+  }
+  if (node.type === "ConditionalExpression") {
+    return [
+      ...resolveStringValues(node.consequent, ancestors),
+      ...resolveStringValues(node.alternate, ancestors)
+    ];
+  }
+  if (node.type === "Identifier" && ancestors && ancestors.length > 0) {
+    const name = node.name;
+    for (let i = ancestors.length - 1; i >= 0; i--) {
+      const ancestor = ancestors[i];
+      let body = null;
+      if (ancestor.type === "BlockStatement" || ancestor.type === "Program") {
+        body = ancestor.body;
+      } else if (ancestor.type === "FunctionExpression" || ancestor.type === "ArrowFunctionExpression" || ancestor.type === "FunctionDeclaration") {
+        if (ancestor.body && ancestor.body.type === "BlockStatement") {
+          body = ancestor.body.body;
+        }
+      }
+      if (body && Array.isArray(body)) {
+        for (const stmt of body) {
+          if (stmt.type === "VariableDeclaration") {
+            for (const decl of stmt.declarations) {
+              if (decl.id.type === "Identifier" && decl.id.name === name && decl.init) {
+                return resolveStringValues(decl.init, []);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  return [];
+}
 function extractFromHTMLString(html, components) {
   try {
     const matches = html.matchAll(/<([a-zA-Z0-9-]+)/g);
@@ -2205,7 +2244,7 @@ function findAndExtractScript(code) {
   const ast = getAST(code, true);
   let result = null;
   const components = /* @__PURE__ */ new Set();
-  const findHTMLComponents = (node) => {
+  const findHTMLComponents = (node, ancestors = []) => {
     if (node.type === "Literal" && typeof node.value === "string") {
       extractFromHTMLString(node.value, components);
     } else if (node.type === "TemplateLiteral") {
@@ -2214,32 +2253,50 @@ function findAndExtractScript(code) {
           extractFromHTMLString(element.value.cooked, components);
         }
       }
+    } else {
+      const values = resolveStringValues(node, ancestors);
+      for (const val of values) {
+        extractFromHTMLString(val, components);
+      }
     }
   };
-  walkJS(ast, {
-    AssignmentExpression(node) {
+  walkAncestorJS(ast, {
+    AssignmentExpression(node, ancestors) {
       if (node.left.type === "MemberExpression" && node.left.property.type === "Identifier" && (node.left.property.name === "innerHTML" || node.left.property.name === "outerHTML")) {
-        findHTMLComponents(node.right);
+        findHTMLComponents(node.right, ancestors);
       }
     },
-    CallExpression(node) {
+    CallExpression(node, ancestors) {
       if (node.callee && node.callee.type === "MemberExpression" && node.callee.object && node.callee.object.type === "Identifier" && node.callee.object.name === "document" && node.callee.property && node.callee.property.type === "Identifier" && node.callee.property.name === "createElement") {
         const arg = node.arguments[0];
-        if (arg && (arg.type !== "Literal" || typeof arg.value === "string" && arg.value.includes("-"))) {
-          if (arg.type === "Literal" && typeof arg.value === "string") {
-            components.add(arg.value);
+        if (arg) {
+          const values = resolveStringValues(arg, ancestors);
+          for (const val of values) {
+            if (val.includes("-")) {
+              components.add(val);
+            }
           }
         }
       }
       if (node.callee && node.callee.type === "MemberExpression" && node.callee.property && node.callee.property.type === "Identifier" && node.callee.property.name === "insertAdjacentHTML") {
         const arg = node.arguments[1];
         if (arg) {
-          findHTMLComponents(arg);
+          findHTMLComponents(arg, ancestors);
         }
       }
       if (node.callee && node.callee.type === "Identifier" && node.callee.name === "defineComponent") {
         const firstArg = node.arguments[0];
         if (firstArg && firstArg.type === "ObjectExpression") {
+          const depsProp = firstArg.properties.find(
+            (prop) => prop.type === "Property" && prop.key && prop.key.type === "Identifier" && prop.key.name === "dependencies"
+          );
+          if (depsProp && depsProp.type === "Property" && depsProp.value.type === "ArrayExpression") {
+            for (const el of depsProp.value.elements) {
+              if (el && el.type === "Literal" && typeof el.value === "string") {
+                components.add(el.value);
+              }
+            }
+          }
           const scriptProp = firstArg.properties.find(
             (prop) => prop.type === "Property" && prop.key && prop.key.type === "Identifier" && prop.key.name === "client"
           );
@@ -2248,12 +2305,28 @@ function findAndExtractScript(code) {
             let startLine = value.loc.start.line - 1;
             let prefix = "";
             let content = "";
+            let instanceIdVar;
+            if (value.params && value.params[0]) {
+              const param = value.params[0];
+              if (param.type === "Identifier") {
+                instanceIdVar = param.name + ".instanceId";
+              } else if (param.type === "ObjectPattern") {
+                const idProp = param.properties.find((p) => p.key?.type === "Identifier" && p.key?.name === "instanceId");
+                if (idProp) {
+                  if (idProp.value.type === "Identifier") {
+                    instanceIdVar = idProp.value.name;
+                  }
+                }
+              }
+            } else if (method) {
+              instanceIdVar = "this._instanceId";
+            }
             let source = code.slice(value.start, value.end);
             const replacements = [];
-            walkJS(value, {
-              AssignmentExpression(node2) {
+            walkAncestorJS(value, {
+              AssignmentExpression(node2, ancestorsInClient) {
                 if (node2.left.type === "MemberExpression" && node2.left.property.type === "Identifier" && (node2.left.property.name === "innerHTML" || node2.left.property.name === "outerHTML")) {
-                  findHTMLComponents(node2.right);
+                  findHTMLComponents(node2.right, [...ancestors, ...ancestorsInClient]);
                   replacements.push({
                     start: node2.right.start - value.start,
                     end: node2.right.start - value.start,
@@ -2262,28 +2335,36 @@ function findAndExtractScript(code) {
                   replacements.push({
                     start: node2.right.end - value.start,
                     end: node2.right.end - value.start,
-                    replacement: ")"
+                    replacement: `, ${instanceIdVar})`
                   });
                 }
               },
-              CallExpression(node2) {
+              CallExpression(node2, ancestorsInClient) {
+                const combinedAncestors = [...ancestors, ...ancestorsInClient];
                 if (node2.callee && node2.callee.type === "MemberExpression" && node2.callee.object && node2.callee.object.type === "Identifier" && node2.callee.object.name === "document" && node2.callee.property && node2.callee.property.type === "Identifier" && node2.callee.property.name === "createElement") {
                   const arg = node2.arguments[0];
-                  if (arg && (arg.type !== "Literal" || typeof arg.value === "string" && arg.value.includes("-"))) {
-                    if (arg.type === "Literal" && typeof arg.value === "string") {
-                      components.add(arg.value);
+                  if (arg) {
+                    const values = resolveStringValues(arg, combinedAncestors);
+                    let isCustom = false;
+                    for (const val of values) {
+                      if (val.includes("-")) {
+                        components.add(val);
+                        isCustom = true;
+                      }
+                    }
+                    if (isCustom || arg.type === "Literal" && typeof arg.value === "string" && arg.value.includes("-") || arg.type !== "Literal") {
+                      replacements.push({
+                        start: node2.callee.start - value.start,
+                        end: node2.callee.end - value.start,
+                        replacement: "createCoraliteElement"
+                      });
                     }
-                    replacements.push({
-                      start: node2.callee.start - value.start,
-                      end: node2.callee.end - value.start,
-                      replacement: "createCoraliteElement"
-                    });
                   }
                 }
                 if (node2.callee && node2.callee.type === "MemberExpression" && node2.callee.property && node2.callee.property.type === "Identifier" && node2.callee.property.name === "insertAdjacentHTML") {
                   const arg = node2.arguments[1];
                   if (arg) {
-                    findHTMLComponents(arg);
+                    findHTMLComponents(arg, combinedAncestors);
                     replacements.push({
                       start: arg.start - value.start,
                       end: arg.start - value.start,
@@ -2292,7 +2373,7 @@ function findAndExtractScript(code) {
                     replacements.push({
                       start: arg.end - value.start,
                       end: arg.end - value.start,
-                      replacement: ")"
+                      replacement: `, ${instanceIdVar})`
                     });
                   }
                 }
@@ -2324,8 +2405,13 @@ function findAndExtractScript(code) {
         }
       } else if (node.callee && node.callee.type === "Identifier" && node.callee.name === "createCoraliteElement") {
         const arg = node.arguments[0];
-        if (arg && arg.type === "Literal" && typeof arg.value === "string") {
-          components.add(arg.value);
+        if (arg) {
+          const values = resolveStringValues(arg, ancestors);
+          for (const val of values) {
+            if (val.includes("-")) {
+              components.add(val);
+            }
+          }
         }
       }
     }
@@ -2391,32 +2477,42 @@ function findAndExtractImperativeComponents(code) {
   try {
     const ast = getAST(code);
     const components = /* @__PURE__ */ new Set();
-    const findHTMLComponents = (node) => {
+    const findHTMLComponents = (node, ancestors = []) => {
       if (node.type === "Literal" && typeof node.value === "string") {
         extractFromHTMLString(node.value, components);
       } else if (node.type === "TemplateLiteral") {
         for (const element of node.quasis) {
           extractFromHTMLString(element.value.cooked, components);
         }
+      } else {
+        const values = resolveStringValues(node, ancestors);
+        for (const val of values) {
+          extractFromHTMLString(val, components);
+        }
       }
     };
-    walkJS(ast, {
-      AssignmentExpression(node) {
+    walkAncestorJS(ast, {
+      AssignmentExpression(node, ancestors) {
         if (node.left.type === "MemberExpression" && node.left.property.type === "Identifier" && (node.left.property.name === "innerHTML" || node.left.property.name === "outerHTML")) {
-          findHTMLComponents(node.right);
+          findHTMLComponents(node.right, ancestors);
         }
       },
-      CallExpression(node) {
+      CallExpression(node, ancestors) {
         if (node.callee && (node.callee.type === "MemberExpression" && node.callee.object && node.callee.object.type === "Identifier" && node.callee.object.name === "document" && node.callee.property && node.callee.property.type === "Identifier" && node.callee.property.name === "createElement" || node.callee.type === "Identifier" && node.callee.name === "createCoraliteElement")) {
           const arg = node.arguments[0];
-          if (arg && arg.type === "Literal" && typeof arg.value === "string" && arg.value.includes("-")) {
-            components.add(arg.value);
+          if (arg) {
+            const values = resolveStringValues(arg, ancestors);
+            for (const val of values) {
+              if (val.includes("-")) {
+                components.add(val);
+              }
+            }
           }
         }
         if (node.callee && node.callee.type === "MemberExpression" && node.callee.property && node.callee.property.type === "Identifier" && node.callee.property.name === "insertAdjacentHTML") {
           const arg = node.arguments[1];
           if (arg) {
-            findHTMLComponents(arg);
+            findHTMLComponents(arg, ancestors);
           }
         }
       }
@@ -2685,9 +2781,19 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
     return factories;
   })();
 `);
+  const clientMocks = {};
+  if (mode === "testing" && this.options.testing?.mocks?.plugins) {
+    for (const [key, mock] of Object.entries(this.options.testing.mocks.plugins)) {
+      if (mock.client) {
+        clientMocks[key] = { client: mock.client };
+      }
+    }
+  }
+  const clientMocksStr = serialize(clientMocks);
   entryCodeParts.push(`const getClientContext = async (instanceContext) => {
     const factories = await resolvedContextFactoriesPromise;
     const cache = new Map();
+    const clientMocks = ${clientMocksStr};
 
     return new Proxy(instanceContext, {
       get(target, prop, receiver) {
@@ -2702,7 +2808,16 @@ ScriptManager.prototype.compileAllInstances = async function(instances, mode) {
            throw new Error('Coralite Plugin Error: The plugin "' + String(prop) + '" must be a function for the second phase (instance context). Received: ' + typeof factory);
         }
 
-        const resolved = factory(receiver);
+        let resolved = factory(receiver);
+
+        if (clientMocks[prop]?.client?.context) {
+          if (typeof resolved === 'object' && resolved !== null) {
+            resolved = Object.assign({}, resolved, clientMocks[prop].client.context);
+          } else {
+            resolved = clientMocks[prop].client.context;
+          }
+        }
+
         cache.set(prop, resolved);
         return resolved;
       },
@@ -3460,24 +3575,37 @@ var staticAssetPlugin = (assets = []) => {
 };
 
 // plugins/testing.js
-function traverseAndAddTestId(children, instanceId, { autoTestId = false, counters = {} } = {}) {
+function traverseAndAddTestId(children, instanceId, { autoTestId = false, counters = {}, mode = "production" } = {}) {
   if (!Array.isArray(children)) {
     return;
   }
+  const isProduction = mode === "production";
+  const isDevOrTest = mode === "development" || mode === "testing";
+  let prefix = "";
+  if (instanceId === "page") {
+    prefix = "page__";
+  } else if (instanceId) {
+    prefix = `${instanceId}__`;
+  }
   for (let i = 0; i < children.length; i++) {
     const node = children[i];
     if (node.type === "tag") {
-      if (node.attribs?.ref) {
-        if (!node.attribs["data-testid"]) {
-          const refValue = node.attribs.ref;
-          const prefix = instanceId ? `${instanceId}__` : "";
-          if (instanceId === "page" && refValue.includes("__")) {
-            node.attribs["data-testid"] = refValue;
-          } else {
-            node.attribs["data-testid"] = `${prefix}${refValue}`;
+      if (node.attribs) {
+        if (node.attribs.test !== void 0) {
+          delete node.attribs.test;
+        }
+        if (node.attribs["data-testid"] !== void 0) {
+          if (isProduction) {
+            delete node.attribs["data-testid"];
+          } else if (isDevOrTest) {
+            const val = node.attribs["data-testid"];
+            if (prefix && !val.startsWith(prefix)) {
+              node.attribs["data-testid"] = `${prefix}${val}`;
+            }
           }
         }
-      } else if (autoTestId && instanceId) {
+      }
+      if (autoTestId && isDevOrTest) {
         const tagName = node.name.toLowerCase();
         const isInteractive = [
           "button",
@@ -3496,7 +3624,7 @@ function traverseAndAddTestId(children, instanceId, { autoTestId = false, counte
             node.attribs = {};
           }
           if (!node.attribs["data-testid"]) {
-            node.attribs["data-testid"] = `${instanceId}__${tagName}-${index}`;
+            node.attribs["data-testid"] = `${prefix}${tagName}-${index}`;
           }
         }
       }
@@ -3504,7 +3632,8 @@ function traverseAndAddTestId(children, instanceId, { autoTestId = false, counte
     if (node.children?.length > 0) {
       traverseAndAddTestId(node.children, instanceId, {
         autoTestId,
-        counters
+        counters,
+        mode
       });
     }
   }
@@ -3527,43 +3656,51 @@ var testingPlugin = definePlugin({
       app.options.externalStyles.push(`data:text/css;base64,${Buffer.from(velocityStyle).toString("base64")}`);
     },
     onBeforeComponentRender: ({ instanceId, template, app }) => {
-      const isTesting = app.options.mode === "testing";
+      const mode = app.options.mode;
+      const isDevOrTest = mode === "development" || mode === "testing";
       const counters = {};
       const templateNode = template;
       if (templateNode && templateNode.children) {
         traverseAndAddTestId(templateNode.children, instanceId, {
-          autoTestId: isTesting,
-          counters
+          autoTestId: isDevOrTest,
+          counters,
+          mode
         });
       }
     },
+    onAfterComponentRender: ({ result, app }) => {
+      const mode = app.options.mode;
+      if (mode !== "production") {
+        return;
+      }
+      const traverse = (children) => {
+        if (!Array.isArray(children)) {
+          return;
+        }
+        for (const node of children) {
+          if (node.type === "tag" && node.attribs) {
+            delete node.attribs["data-testid"];
+            delete node.attribs.test;
+          }
+          if (node.children) {
+            traverse(node.children);
+          }
+        }
+      };
+      if (result && result.children) {
+        traverse(result.children);
+      }
+    },
     onPageSet: ({ elements, app }) => {
-      const isTesting = app.options.mode === "testing";
+      const mode = app.options.mode;
+      const isDevOrTest = mode === "development" || mode === "testing";
       const counters = {};
       traverseAndAddTestId(elements?.root?.children, "page", {
-        autoTestId: isTesting,
-        counters
+        autoTestId: isDevOrTest,
+        counters,
+        mode
       });
     }
-  },
-  client: {
-    onBeforeComponentRender: ({ instanceId, refs }) => {
-      for (let i = 0; i < refs.length; i++) {
-        const ref = refs[i];
-        const prefix = `${instanceId}__`;
-        const uniqueRefValue = ref.element && ref.element.getAttribute("ref");
-        if (ref.element && ref.element.setAttribute) {
-          const currentTestId = ref.element.getAttribute("data-testid");
-          if (!currentTestId || currentTestId === ref.name) {
-            if (uniqueRefValue && uniqueRefValue.startsWith(prefix)) {
-              ref.element.setAttribute("data-testid", uniqueRefValue);
-            } else {
-              ref.element.setAttribute("data-testid", `${prefix}${ref.name}`);
-            }
-          }
-        }
-      }
-    }
   }
 });
 
@@ -4062,7 +4199,7 @@ async function triggerPluginHook({ app, hooks, serverGlobalContext, name, initia
   }
   return currentData;
 }
-function bindPlugins({ pluginFactories, instanceContext = {} }) {
+function bindPlugins({ pluginFactories, instanceContext = {}, app }) {
   const cache = /* @__PURE__ */ new Map();
   const proxy = new Proxy(instanceContext, {
     get(target, prop) {
@@ -4082,7 +4219,17 @@ function bindPlugins({ pluginFactories, instanceContext = {} }) {
       if (typeof factory !== "function") {
         throw new CoraliteError(`Coralite Plugin Error: The plugin "${String(prop)}" must be a function for the second phase (instance context). Received: ${typeof factory}`);
       }
-      const resolved = factory(proxy);
+      let resolved = factory(proxy);
+      if (app?.options?.mode === "testing" && app.options.testing?.mocks?.plugins) {
+        const pluginMock = app.options.testing.mocks.plugins[prop];
+        if (pluginMock?.server?.context) {
+          if (typeof resolved === "object" && resolved !== null) {
+            resolved = Object.assign({}, resolved, pluginMock.server.context);
+          } else {
+            resolved = pluginMock.server.context;
+          }
+        }
+      }
       cache.set(prop, resolved);
       return resolved;
     },
@@ -4238,8 +4385,8 @@ function createComponentDefinition({ app }) {
       }
     }
     let serverToExecute = server;
-    if (app.options.mode === "testing" && app.options.testing?.mocks) {
-      const mock = app.options.testing.mocks[module.id];
+    if (app.options.mode === "testing" && app.options.testing?.mocks?.components) {
+      const mock = app.options.testing.mocks.components[module.id];
       if (mock && typeof mock.server === "function") {
         serverToExecute = mock.server;
       }
@@ -4258,7 +4405,9 @@ function createComponentDefinition({ app }) {
         }
         state.__script__.server = serverResult;
         Object.assign(state, serverResult);
-        Object.assign(state.__script__.defaultValues, serverResult);
+        if (state.__script__.defaultValues) {
+          Object.assign(state.__script__.defaultValues, serverResult);
+        }
       }
     }
     if (getters) {
@@ -4513,6 +4662,15 @@ async function setupPlugins({
 }) {
   const pluginsToInit = app.options.plugins;
   const allExportNames = /* @__PURE__ */ new Set();
+  if (app.options.mode === "testing" && app.options.testing?.mocks?.plugins) {
+    const mockKeys = Object.keys(app.options.testing.mocks.plugins);
+    const registeredPluginNames = pluginsToInit.map((p) => p.server?.name || p.name);
+    for (const mockKey of mockKeys) {
+      if (!registeredPluginNames.includes(mockKey)) {
+        console.warn(`[Coralite Warning]: Mock defined for plugin "${mockKey}", but no plugin with that name is registered.`);
+      }
+    }
+  }
   for (const plugin of pluginsToInit) {
     if (plugin.server) {
       const serverName = plugin.server.name || plugin.name;
@@ -4932,6 +5090,9 @@ function injectReadinessScript(root, head, hasScripts, mode) {
     children: []
   });
   let data = "class CoraliteLifecycleManager { constructor() { this.defined = new Promise(r => this._dr = r); this.rendered = new Promise(r => this._rr = r); this.hydrated = new Promise(r => this._hr = r); this._t = 0; this._rc = 0; this._hc = 0; this._ts = 0; this._dt = new Set(); this._ip = new WeakMap(); this._ir = new WeakMap(); this._rs = new WeakSet(); this._hs = new WeakSet(); this._s = false; } _start(t, ts) { this._t = t; this._ts = ts; this._s = true; this._check(); } _check() { if (!this._s) return; if (this._rc >= this._t) this._rr(); if (this._hc >= this._t) this._hr(); if (this._dt.size >= this._ts) this._dr(); } _markDefined(tag) { this._dt.add(tag); this._check(); } _markInstanceRendered(el) { if (el.hasAttribute('data-coralite-initial') && !this._rs.has(el)) { this._rs.add(el); this._rc++; this._check(); } } _markInstanceReady(el) { const r = this._ir.get(el); r && r(); this._ip.set(el, Promise.resolve()); if (el.hasAttribute('data-coralite-initial') && !this._hs.has(el)) { this._hs.add(el); this._hc++; this._check(); } } waitFor(el) { let p = this._ip.get(el); if (!p) { p = new Promise(r => this._ir.set(el, r)); this._ip.set(el, p); } return p; } } window.__coralite__ = { lifecycle: new CoraliteLifecycleManager() };";
+  if (mode) {
+    data += ` window.__coralite__.mode = '${mode}';`;
+  }
   if (mode === "testing") {
     data += " window.__coralite__.components = {}; window.__coralite__.events = [];";
   }
@@ -4949,8 +5110,12 @@ function injectReadinessScript(root, head, hasScripts, mode) {
     root.children.unshift(readinessScriptElement);
   }
 }
-function injectImportMap(root, head, importMap) {
-  if (!importMap || Object.keys(importMap).length === 0) {
+function injectImportMap(root, head, importMap, base) {
+  const finalImportMap = { ...importMap };
+  if (base) {
+    finalImportMap["assets/js/manifest.js"] = `${base}assets/js/manifest.js`;
+  }
+  if (Object.keys(finalImportMap).length === 0) {
     return;
   }
   const importMapElement = createCoraliteElement({
@@ -4964,7 +5129,7 @@ function injectImportMap(root, head, importMap) {
   });
   importMapElement.children.push(createCoraliteTextNode({
     type: "text",
-    data: JSON.stringify({ imports: importMap }),
+    data: JSON.stringify({ imports: finalImportMap }),
     parent: importMapElement
   }));
   if (head) {
@@ -5031,16 +5196,19 @@ function resolvePageQueue(pagesCollection, path2) {
 function generateClientRuntime({
   base,
   sharedChunkPath,
-  chunkManifest,
   declarativeTags = [],
-  hydrationData = "{}"
+  hydrationData = "{}",
+  mode = "production"
 }) {
   return `
 import { getClientContext, createCoraliteClass, globalClientHooks } from '${base}assets/js/${sharedChunkPath}';
+import componentManifest from '${base}assets/js/manifest.js';
 
 (async () => {
   const hydrationData = ${hydrationData};
   const declarativeTags = ${JSON.stringify(declarativeTags)};
+  window.__coralite__ = window.__coralite__ || {};
+  window.__coralite__.mode = '${mode}';
 
   const initialElements = Array.from(document.querySelectorAll('[data-cid]'))
     .filter(el => {
@@ -5073,7 +5241,6 @@ import { getClientContext, createCoraliteClass, globalClientHooks } from '${base
   globalThis.executableScripts = [];
   globalThis.globalAbortController = new AbortController();
 
-  const componentManifest = ${JSON.stringify(chunkManifest)};
   const loadCache = {};
 
   const loadComponent = (componentId) => {
@@ -5088,7 +5255,10 @@ import { getClientContext, createCoraliteClass, globalClientHooks } from '${base
 
       if (cssPath) {
         const fullCssPath = '${base}assets/css/' + cssPath;
-        if (!document.querySelector('link[href="' + fullCssPath + '"]')) {
+        const inlineStyles = document.getElementById('coralite-inline-styles');
+        const hasStyleInInline = inlineStyles && inlineStyles.textContent.includes('[data-style-selector="' + componentId + '"]');
+
+        if (!document.querySelector('link[href="' + fullCssPath + '"]') && !hasStyleInInline) {
           const link = document.createElement('link');
           link.rel = 'stylesheet';
           link.href = fullCssPath;
@@ -5153,8 +5323,38 @@ import { getClientContext, createCoraliteClass, globalClientHooks } from '${base
     return element;
   };
 
-  window.processHTML = (html) => {
+  window.processHTML = (html, instanceId) => {
     if (typeof html !== 'string') return html;
+
+    const mode = (window.__coralite__ && window.__coralite__.mode) || 'production';
+    const isDevOrTest = mode === 'development' || mode === 'testing';
+    const isProduction = mode === 'production';
+
+    if (isDevOrTest || isProduction) {
+      html = html.replace(/<([a-zA-Z0-9-]+)([^>]*)>/g, (match, tagName, attrs) => {
+        let newAttrs = attrs;
+
+        // Strip deprecated 'test' attribute
+        newAttrs = newAttrs.replace(/\\s+test\\s*=\\s*(['"]).*?\\1/g, '');
+
+        // Handle data-testid
+        const testIdRegex = /\\s+data-testid\\s*=\\s*(['"])(.*?)\\1/g;
+        if (isProduction) {
+          newAttrs = newAttrs.replace(testIdRegex, '');
+        } else if (isDevOrTest) {
+          const prefix = instanceId ? instanceId + '__' : '';
+          if (prefix) {
+            newAttrs = newAttrs.replace(testIdRegex, (attrMatch, quote, testValue) => {
+              if (testValue.startsWith(prefix)) return attrMatch;
+              return ' data-testid="' + prefix + testValue + '"';
+            });
+          }
+        }
+
+        return '<' + tagName + newAttrs + '>';
+      });
+    }
+
     const matches = html.matchAll(/<([a-zA-Z0-9-]+)/g);
     for (const match of matches) {
       const tag = match[1].toLowerCase();
@@ -6029,27 +6229,7 @@ function createRenderer({
           injectExternalStyles(mappedComponent.root, headElement, normalizedOptions.externalStyles);
         }
         if (mappedSessionObject.styles.size > 0) {
-          if (isProduction && globalScriptResult && globalScriptResult.manifest) {
-            const cssPaths = [];
-            const remainingStyles = /* @__PURE__ */ new Map();
-            for (const [selector, css] of mappedSessionObject.styles) {
-              const entry = globalScriptResult.manifest[selector];
-              if (entry && entry.css) {
-                cssPaths.push(entry.css);
-              } else {
-                remainingStyles.set(selector, css);
-              }
-            }
-            if (cssPaths.length > 0) {
-              const base = normalizedOptions.baseURL.endsWith("/") ? normalizedOptions.baseURL : normalizedOptions.baseURL + "/";
-              injectExternalStyleLinks(mappedComponent.root, headElement, cssPaths, base);
-            }
-            if (remainingStyles.size > 0) {
-              injectStyles(mappedComponent.root, headElement, remainingStyles);
-            }
-          } else {
-            injectStyles(mappedComponent.root, headElement, mappedSessionObject.styles);
-          }
+          injectStyles(mappedComponent.root, headElement, mappedSessionObject.styles);
         }
         if (componentsToInclude.size > 0) {
           const targetElement = headElement || bodyElement || mappedComponent.root;
@@ -6095,20 +6275,9 @@ function createRenderer({
               error: new Error(JSON.stringify(scriptResult.manifest))
             });
           }
-          const chunkManifest = {};
-          for (const tag of componentsToInclude) {
-            if (scriptResult.manifest[tag]) {
-              chunkManifest[tag] = scriptResult.manifest[tag];
-            }
-          }
-          for (const tag in scriptResult.manifest) {
-            if (tag !== "coralite-runtime" && !chunkManifest[tag]) {
-              chunkManifest[tag] = scriptResult.manifest[tag];
-            }
-          }
           injectReadinessScript(mappedComponent.root, headElement, true, normalizedOptions.mode);
-          injectImportMap(mappedComponent.root, headElement, scriptResult.importMap);
           const base = normalizedOptions.baseURL.endsWith("/") ? normalizedOptions.baseURL : normalizedOptions.baseURL + "/";
+          injectImportMap(mappedComponent.root, headElement, scriptResult.importMap, base);
           const hydrationData = {};
           for (const [id, instance] of Object.entries(instances)) {
             if (instance.state && Object.keys(instance.state).length > 0) {
@@ -6119,9 +6288,9 @@ function createRenderer({
           const scriptContent = generateClientRuntime({
             base,
             sharedChunkPath: scriptResult.manifest["coralite-runtime"],
-            chunkManifest,
             declarativeTags: Array.from(declarativeTags),
-            hydrationData: serialize2(hydrationData)
+            hydrationData: serialize2(hydrationData),
+            mode: normalizedOptions.mode
           });
           const scriptElement = createCoraliteElement({
             type: "tag",
@@ -6240,10 +6409,74 @@ function createRenderer({
     if (!buildOptions) {
       buildOptions = {};
     }
+    const projectRoot = app.options.projectRoot || process.cwd();
+    const cacheDir = join4(projectRoot, ".coralite");
+    const manifestPath = join4(cacheDir, "manifest.json");
+    let manifest = {
+      physical: {},
+      virtual: {},
+      dependencies: {},
+      components: {}
+    };
+    try {
+      const content = await readFile3(manifestPath, "utf8");
+      manifest = JSON.parse(content);
+      if (!manifest.components) {
+        manifest.components = {};
+      }
+    } catch (e) {
+      if (e.code !== "ENOENT") {
+        handleError2({
+          level: "WARN",
+          message: `Could not parse manifest at ${manifestPath}: ${e.message}. Starting with fresh manifest.`
+        });
+      }
+    }
+    let componentBuildInfo = {
+      completed: 0,
+      skipped: 0,
+      details: []
+    };
     if (normalizedOptions.mode === "production" || normalizedOptions.mode === "testing") {
       const allComponentIds = app.components.list.map((c) => c.result.id);
       globalScriptResult = await scriptManager.compileAllInstances(allComponentIds, normalizedOptions.mode);
       Object.assign(outputFiles, globalScriptResult.outputFiles);
+      if (globalScriptResult.manifest) {
+        const manifestJS = `export default ${JSON.stringify(globalScriptResult.manifest)};`;
+        outputFiles["manifest.js"] = {
+          path: "assets/js/manifest.js",
+          hashedPath: "manifest.js",
+          text: manifestJS
+        };
+        const newComponentManifest = globalScriptResult.manifest;
+        const oldComponentManifest = manifest.components;
+        for (const [id, value] of Object.entries(newComponentManifest)) {
+          if (id === "coralite-runtime") {
+            continue;
+          }
+          const isNew = !oldComponentManifest[id];
+          const hasChanged = !isNew && (value.js !== oldComponentManifest[id].js || value.css !== oldComponentManifest[id].css);
+          if (isNew || hasChanged) {
+            componentBuildInfo.completed++;
+            componentBuildInfo.details.push({
+              id,
+              status: "built",
+              reason: isNew ? "New component" : "Source changed"
+            });
+          } else {
+            componentBuildInfo.skipped++;
+            componentBuildInfo.details.push({
+              id,
+              status: "skipped"
+            });
+          }
+        }
+        if (typeof buildOptions.onComponentBuild === "function") {
+          await buildOptions.onComponentBuild(componentBuildInfo);
+        } else if (typeof normalizedOptions.onComponentBuild === "function") {
+          await normalizedOptions.onComponentBuild(componentBuildInfo);
+        }
+      }
     } else if (normalizedOptions.mode === "development") {
       if (!siteWideBundlePromise) {
         const bundlePromise = (async () => {
@@ -6255,6 +6488,14 @@ function createRenderer({
               delete outputFiles[key];
             }
             Object.assign(outputFiles, result.outputFiles);
+            if (result.manifest) {
+              const manifestJS = `export default ${JSON.stringify(result.manifest)};`;
+              outputFiles["manifest.js"] = {
+                path: "assets/js/manifest.js",
+                hashedPath: "manifest.js",
+                text: manifestJS
+              };
+            }
           }
           return result;
         })();
@@ -6301,36 +6542,17 @@ function createRenderer({
       }
     }
     sealedQueues.add(buildId);
-    const projectRoot = app.options.projectRoot || process.cwd();
-    const cacheDir = join4(projectRoot, ".coralite");
-    const manifestPath = join4(cacheDir, "manifest.json");
-    let manifest = {
-      physical: {},
-      virtual: {},
-      dependencies: {}
-    };
-    try {
-      const content = await readFile3(manifestPath, "utf8");
-      manifest = JSON.parse(content);
-      for (const [path2, metadata] of Object.entries(manifest.physical || {})) {
-        if (metadata.dependencies) {
-          app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
-        }
+    for (const [path2, metadata] of Object.entries(manifest.physical || {})) {
+      if (metadata.dependencies) {
+        app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
       }
-      for (const [path2, metadata] of Object.entries(manifest.virtual || {})) {
-        if (metadata.dependencies) {
-          app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
-        }
-      }
-      app._refreshDependencyGraph();
-    } catch (e) {
-      if (e.code !== "ENOENT") {
-        handleError2({
-          level: "WARN",
-          message: `Could not parse manifest at ${manifestPath}: ${e.message}. Starting with fresh manifest.`
-        });
+    }
+    for (const [path2, metadata] of Object.entries(manifest.virtual || {})) {
+      if (metadata.dependencies) {
+        app._dependencyGraph.directPageComponents[path2] = metadata.dependencies;
       }
     }
+    app._refreshDependencyGraph();
     const mocksStr = app.options.testing?.mocks ? serialize2(app.options.testing.mocks) : "";
     const mocksHash = hash(mocksStr);
     const mocksChanged = manifest.testingMocksHash !== mocksHash;
@@ -6340,6 +6562,7 @@ function createRenderer({
       physical: {},
       virtual: {},
       dependencies: {},
+      components: {},
       testingMocksHash: mocksHash
     };
     const componentChanges = /* @__PURE__ */ new Map();
@@ -6516,6 +6739,7 @@ function createRenderer({
       }
       try {
         await mkdir2(cacheDir, { recursive: true });
+        newManifest.components = globalScriptResult?.manifest || {};
         const tempManifestPath = `${manifestPath}.tmp`;
         await writeFile(tempManifestPath, JSON.stringify(newManifest, null, 2));
         await rename(tempManifestPath, manifestPath);
@@ -6582,6 +6806,7 @@ async function createCoralite({
   ignoreByAttribute,
   skipRenderByAttribute,
   onError,
+  onComponentBuild,
   mode = "production",
   output,
   testing
@@ -6621,6 +6846,7 @@ async function createCoralite({
     mode,
     path: path2,
     output: output ? normalize(output) : void 0,
+    onComponentBuild,
     testing
   };
   const trackedOutputFiles = /* @__PURE__ */ new Set();
@@ -6747,7 +6973,8 @@ async function createCoralite({
   });
   const _bindPluginsLocal = (pluginFactories, instanceContext) => bindPlugins({
     pluginFactories,
-    instanceContext
+    instanceContext,
+    app
   });
   const _defineComponent = createComponentDefinition({ app });
   const _evaluateLocal = (options) => evaluate({
@@ -6872,9 +7099,7 @@ async function createCoralite({
       return results;
     }
   });
-  if (app.options.mode === "testing") {
-    app.options.plugins.unshift(testingPlugin);
-  }
+  app.options.plugins.unshift(testingPlugin);
   app.options.plugins.unshift(metadataPlugin);
   if (assets) {
     app.options.plugins.unshift(staticAssetPlugin(assets));
@@ -6985,12 +7210,49 @@ function defineConfig(options) {
       if (typeof options.testing.mocks !== "object" || options.testing.mocks === null) {
         throw new CoraliteError('Config property "testing.mocks" must be an object');
       }
-      for (const [key, mock] of Object.entries(options.testing.mocks)) {
-        if (typeof mock !== "object" || mock === null) {
-          throw new CoraliteError(`Mock for component "${key}" must be an object`);
+      const validMocksKeys = ["components", "plugins"];
+      for (const key of Object.keys(options.testing.mocks)) {
+        if (!validMocksKeys.includes(key)) {
+          throw new CoraliteError(`Invalid key "${key}" in testing.mocks. Valid keys are: ${validMocksKeys.join(", ")}`);
+        }
+      }
+      if (options.testing.mocks.components !== void 0) {
+        if (typeof options.testing.mocks.components !== "object" || options.testing.mocks.components === null) {
+          throw new CoraliteError('Config property "testing.mocks.components" must be an object');
         }
-        if (mock.server !== void 0 && typeof mock.server !== "function") {
-          throw new CoraliteError(`Mock server for component "${key}" must be a function`);
+        for (const [key, mock] of Object.entries(options.testing.mocks.components)) {
+          if (typeof mock !== "object" || mock === null) {
+            throw new CoraliteError(`Mock for component "${key}" must be an object`);
+          }
+          if (mock.server !== void 0 && typeof mock.server !== "function") {
+            throw new CoraliteError(`Mock server for component "${key}" must be a function`);
+          }
+        }
+      }
+      if (options.testing.mocks.plugins !== void 0) {
+        if (typeof options.testing.mocks.plugins !== "object" || options.testing.mocks.plugins === null) {
+          throw new CoraliteError('Config property "testing.mocks.plugins" must be an object');
+        }
+        for (const [key, mock] of Object.entries(options.testing.mocks.plugins)) {
+          if (typeof mock !== "object" || mock === null) {
+            throw new CoraliteError(`Mock for plugin "${key}" must be an object`);
+          }
+          if (mock.server !== void 0) {
+            if (typeof mock.server !== "object" || mock.server === null) {
+              throw new CoraliteError(`Mock server for plugin "${key}" must be an object`);
+            }
+            if (mock.server.context !== void 0 && (typeof mock.server.context !== "object" || mock.server.context === null)) {
+              throw new CoraliteError(`Mock server context for plugin "${key}" must be an object`);
+            }
+          }
+          if (mock.client !== void 0) {
+            if (typeof mock.client !== "object" || mock.client === null) {
+              throw new CoraliteError(`Mock client for plugin "${key}" must be an object`);
+            }
+            if (mock.client.context !== void 0 && (typeof mock.client.context !== "object" || mock.client.context === null)) {
+              throw new CoraliteError(`Mock client context for plugin "${key}" must be an object`);
+            }
+          }
         }
       }
     }