@emkodev/emroute 1.10.0 → 1.12.0-beta.2

package/dist/emroute.js

@@ -15,8 +15,10 @@ function unescapeHtml(text) {
   return text.replaceAll("&#96;", "`").replaceAll("&#39;", "'").replaceAll("&quot;", '"').replaceAll("&gt;", ">").replaceAll("&lt;", "<").replaceAll("&amp;", "&");
 }
 function scopeWidgetCss(css, widgetName) {
-  return `@scope (widget-${widgetName}) {
+  return `@layer emroute {
+@scope (widget-${widgetName}) {
 ${css}
+}
 }`;
 }
 var STATUS_MESSAGES = {
@@ -27,14 +29,34 @@ var STATUS_MESSAGES = {
 };
 
 // dist/src/util/html.util.js
+class SsrCSSStyleSheet {
+  cssText = "";
+  replaceSync(css) {
+    this.cssText = css;
+  }
+  replace(css) {
+    this.cssText = css;
+    return Promise.resolve(this);
+  }
+}
+var CSSStyleSheetBase = globalThis.CSSStyleSheet ?? SsrCSSStyleSheet;
+
 class SsrShadowRoot {
   host;
   _innerHTML = "";
+  _adoptedStyleSheets = [];
   constructor(host) {
     this.host = host;
   }
+  get adoptedStyleSheets() {
+    return this._adoptedStyleSheets;
+  }
+  set adoptedStyleSheets(sheets) {
+    this._adoptedStyleSheets = sheets;
+  }
   get innerHTML() {
-    return this._innerHTML;
+    const adopted = this._adoptedStyleSheets.filter((s) => s.cssText).map((s) => `<style>${s.cssText}</style>`).join("");
+    return adopted + this._innerHTML;
   }
   set innerHTML(value) {
     this._innerHTML = value;
@@ -57,6 +79,10 @@ class SsrShadowRoot {
   }
 }
 
+class SsrElementInternals {
+  states = new Set;
+}
+
 class SsrHTMLElement {
   _innerHTML = "";
   _shadowRoot = null;
@@ -97,6 +123,9 @@ class SsrHTMLElement {
     this._shadowRoot = new SsrShadowRoot(this);
     return this._shadowRoot;
   }
+  attachInternals() {
+    return new SsrElementInternals;
+  }
   getAttribute(name) {
     return this._attributes.get(name) ?? null;
   }
@@ -212,10 +241,12 @@ function filterUndefined(obj) {
 
 class ComponentElement extends HTMLElementBase {
   static lazyLoaders = new Map;
+  static sheetCache = new Map;
   static extendContext;
   static setContextProvider(provider) {
     ComponentElement.extendContext = provider;
   }
+  static CUSTOM_STATES = ["lazy", "loading", "hydrating", "ready", "error"];
   component;
   effectiveFiles;
   params = null;
@@ -226,15 +257,23 @@ class ComponentElement extends HTMLElementBase {
   deferred = null;
   abortController = null;
   intersectionObserver = null;
+  internals;
   dataPromise = null;
   constructor(component, files) {
     super();
     this.component = component;
     this.effectiveFiles = files;
+    this.internals = this.attachInternals();
     if (!this.shadowRoot) {
       this.attachShadow({ mode: "open" });
     }
   }
+  setCustomState(next) {
+    for (const s of ComponentElement.CUSTOM_STATES) {
+      this.internals.states.delete(s);
+    }
+    this.internals.states.add(next);
+  }
   static register(component, files) {
     const tagName = `widget-${component.name}`;
     if (!globalThis.customElements || customElements.get(tagName)) {
@@ -316,7 +355,6 @@ class ComponentElement extends HTMLElementBase {
       }
     }
     this.component.element = this;
-    this.style.contentVisibility = "auto";
     this.abortController = new AbortController;
     const signal = this.abortController.signal;
     const params = {};
@@ -351,8 +389,10 @@ class ComponentElement extends HTMLElementBase {
       ...filteredFiles ? { files: filteredFiles } : {}
     };
     this.context = ComponentElement.extendContext ? ComponentElement.extendContext(base) : base;
+    this.adoptCss();
     if (this.hasAttribute(SSR_ATTR)) {
       this.removeAttribute(SSR_ATTR);
+      this.setCustomState("hydrating");
       const lightText = this.textContent?.trim();
       if (lightText) {
         try {
@@ -365,12 +405,16 @@ class ComponentElement extends HTMLElementBase {
         const args = { data: this.data, params: this.params, context: this.context };
         queueMicrotask(() => {
           this.component.hydrate(args);
+          this.setCustomState("ready");
         });
+      } else {
+        this.setCustomState("ready");
       }
       this.signalReady();
       return;
     }
     if (this.hasAttribute(LAZY_ATTR)) {
+      this.setCustomState("lazy");
       this.intersectionObserver = new IntersectionObserver((entries) => {
         const entry = entries[0];
         if (entry.isIntersecting) {
@@ -392,6 +436,9 @@ class ComponentElement extends HTMLElementBase {
     this.abortController?.abort();
     this.abortController = null;
     this.state = "idle";
+    for (const s of ComponentElement.CUSTOM_STATES) {
+      this.internals.states.delete(s);
+    }
     this.data = null;
     this.context = undefined;
     this.dataPromise = null;
@@ -409,11 +456,36 @@ class ComponentElement extends HTMLElementBase {
   async loadFiles() {
     return this.effectiveFiles ?? {};
   }
+  static baseSheet = null;
+  static getBaseSheet() {
+    if (!ComponentElement.baseSheet) {
+      ComponentElement.baseSheet = new CSSStyleSheetBase;
+      ComponentElement.baseSheet.replaceSync(":host { container-type: inline-size; content-visibility: auto; }");
+    }
+    return ComponentElement.baseSheet;
+  }
+  adoptCss() {
+    const css = this.effectiveFiles?.css;
+    const base = ComponentElement.getBaseSheet();
+    if (!css) {
+      this.shadowRoot.adoptedStyleSheets = [base];
+      return;
+    }
+    const name = this.component.name;
+    let sheet = ComponentElement.sheetCache.get(name);
+    if (!sheet) {
+      sheet = new CSSStyleSheetBase;
+      sheet.replaceSync(scopeWidgetCss(css, name));
+      ComponentElement.sheetCache.set(name, sheet);
+    }
+    this.shadowRoot.adoptedStyleSheets = [base, sheet];
+  }
   async loadData() {
     if (this.params === null)
       return;
     const signal = this.abortController?.signal;
     this.state = "loading";
+    this.setCustomState("loading");
     this.render();
     try {
       const promise = this.component.getData({
@@ -426,6 +498,7 @@ class ComponentElement extends HTMLElementBase {
       if (signal?.aborted)
         return;
       this.state = "ready";
+      this.setCustomState("ready");
     } catch (e) {
       if (e instanceof DOMException && e.name === "AbortError")
         return;
@@ -439,6 +512,7 @@ class ComponentElement extends HTMLElementBase {
   }
   setError(message) {
     this.state = "error";
+    this.setCustomState("error");
     this.errorMessage = message;
     this.render();
     this.signalReady();
@@ -696,21 +770,26 @@ class Pipeline {
     return hierarchy;
   }
   async findWidgetModulePath(name) {
+    return (await this.findWidgetEntry(name))?.modulePath;
+  }
+  async findWidgetEntry(name) {
     const response = await this.runtime.query(WIDGETS_MANIFEST_PATH);
     if (response.status === 404)
       return;
     const entries = await response.json();
-    return entries.find((e) => e.name === name)?.modulePath;
+    return entries.find((e) => e.name === name);
   }
   async loadWidgetModule(name) {
-    const path = await this.findWidgetModulePath(name);
-    if (!path)
+    const entry = await this.findWidgetEntry(name);
+    if (!entry)
       return;
-    const mod = await this.loadModule(path);
+    const mod = await this.loadModule(entry.modulePath);
     const component = this.extractWidgetComponent(mod);
     if (!component)
       return;
-    return { component, files: this.getModuleFiles(mod) ?? {} };
+    const inlined = this.getModuleFiles(mod);
+    const files = inlined ?? (entry.files ? await this.loadFiles(entry.files) : {});
+    return { component, files };
   }
   async loadWidget(name) {
     return (await this.loadWidgetModule(name))?.component;
@@ -847,7 +926,9 @@ function resolveWidgetTags(html, getWidget, routeInfo, contextProvider, logger =
       };
       const context = contextProvider ? contextProvider(baseContext) : baseContext;
       const data = await widget.getData({ params, context });
-      const rendered = widget.renderHTML({ data, params, context });
+      const hostStyle = "<style>:host { container-type: inline-size; content-visibility: auto; }</style>";
+      const cssStyle = files?.css ? `<style>${scopeWidgetCss(files.css, widgetName)}</style>` : "";
+      const rendered = hostStyle + cssStyle + widget.renderHTML({ data, params, context });
       wrappers.set(match, {
         tagName: `widget-${widgetName}`,
         attrs: attrsString ? ` ${attrsString}` : "",
@@ -1605,6 +1686,11 @@ function resolveTargetNode(node, name, isRoot) {
   return node.children[name];
 }
 
+// dist/core/util/js.util.js
+function escapeTemplateLiteral(s) {
+  return s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+}
+
 // dist/runtime/abstract.runtime.js
 var CONTENT_TYPES = new Map([
   [".html", "text/html; charset=utf-8"],
@@ -1912,26 +1998,12 @@ class Runtime {
     } catch {
       return;
     }
-    const companionExts = kind === "element" ? [] : ["html", "md", "css"];
-    const files = {};
-    for (const ext of companionExts) {
-      const companionPath = tsPath.replace(/\.ts$/, `.${ext}`);
-      try {
-        files[ext] = await this.query(companionPath, { as: "text" });
-      } catch {}
-    }
     let jsCode;
     try {
-      jsCode = await this.transpile(tsSource);
+      jsCode = await this.transpileModule(tsPath, tsSource);
     } catch {
       return;
     }
-    if (Object.keys(files).length > 0) {
-      const entries = Object.entries(files).map(([k, v]) => `${k}: \`${v.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$")}\``).join(", ");
-      jsCode += `
-export const __files = { ${entries} };
-`;
-    }
     await this.handle(jsPath, { method: "PUT", body: jsCode });
   }
   loadModule(_path) {
@@ -1940,6 +2012,27 @@ export const __files = { ${entries} };
   transpile(_source) {
     throw new Error(`transpile not implemented for ${this.constructor.name}`);
   }
+  async transpileModule(path, source) {
+    let js = await this.transpile(source);
+    const basePath = path.replace(/\.ts$/, "");
+    const companions = ["html", "md", "css"];
+    const entries = [];
+    for (const ext of companions) {
+      try {
+        const content = await this.query(basePath + "." + ext, { as: "text" });
+        entries.push(`  ${ext}: \`${escapeTemplateLiteral(content)}\``);
+      } catch {}
+    }
+    if (entries.length > 0) {
+      js += `
+export const __files = {
+${entries.join(`,
+`)}
+};
+`;
+    }
+    return js;
+  }
   async mergeWidgetIntoManifest(filePath, widgetsDir) {
     const relativePath = filePath.slice(widgetsDir.length + 1);
     const parts = relativePath.split("/");
@@ -2448,16 +2541,11 @@ function buildLazyLoaders(tree, widgetEntries, elementEntries, runtime) {
 class WidgetComponent extends Component {
   renderHTML(args) {
     const files = args.context.files;
-    const style = files?.css ? `<style>${scopeWidgetCss(files.css, this.name)}</style>
-` : "";
     if (files?.html) {
-      return style + files.html;
+      return files.html;
     }
     if (files?.md) {
-      return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>`;
-    }
-    if (style) {
-      return style + super.renderHTML(args);
+      return `<mark-down>${escapeHtml(files.md)}</mark-down>`;
     }
     return super.renderHTML(args);
   }
@@ -3467,5 +3555,5 @@ export {
   BreadcrumbWidget
 };
 
-//# debugId=422168580B2E75DD64756E2164756E21
+//# debugId=9D7A4A39ADB77FE864756E2164756E21
 //# sourceMappingURL=emroute.js.map