@emkodev/emroute 1.7.2 → 1.7.3

package/dist/emroute.js

@@ -177,7 +177,7 @@ var MarkdownElement = class _MarkdownElement extends HTMLElementBase {
   async loadFromSrc(src) {
     const signal = this.abortController?.signal;
     try {
-      const response = await fetch(src, { signal });
+      const response = await fetch(src, signal ? { signal } : {});
       if (!response.ok) {
         throw new Error(`Failed to fetch ${src}: ${response.status}`);
       }
@@ -205,6 +205,17 @@ var MarkdownElement = class _MarkdownElement extends HTMLElementBase {
 };
 
 // dist/src/element/component.element.js
+function filterUndefined(obj) {
+  const result = {};
+  let hasValue = false;
+  for (const [k, v] of Object.entries(obj)) {
+    if (v !== void 0) {
+      result[k] = v;
+      hasValue = true;
+    }
+  }
+  return hasValue ? result : void 0;
+}
 var ComponentElement = class _ComponentElement extends HTMLElementBase {
   /** Shared file content cache — deduplicates fetches across all widget instances. */
   static fileCache = /* @__PURE__ */ new Map();
@@ -367,12 +378,13 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
     if (signal.aborted)
       return;
     const currentUrl = globalThis.location ? new URL(location.href) : new URL("http://localhost/");
+    const filteredFiles = filterUndefined(files);
     const base = {
       url: currentUrl,
       pathname: currentUrl.pathname,
       searchParams: currentUrl.searchParams,
       params: this.params ?? {},
-      files: files.html || files.md || files.css ? files : void 0
+      ...filteredFiles ? { files: filteredFiles } : {}
     };
     this.context = _ComponentElement.extendContext ? _ComponentElement.extendContext(base) : base;
     if (this.hasAttribute(SSR_ATTR)) {
@@ -459,7 +471,7 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
       filePaths.md ? _ComponentElement.loadFile(filePaths.md) : void 0,
       filePaths.css ? _ComponentElement.loadFile(filePaths.css) : void 0
     ]);
-    return { html, md, css };
+    return filterUndefined({ html, md, css }) ?? {};
   }
   async loadData() {
     if (this.params === null)
@@ -470,7 +482,7 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
     try {
       const promise = this.component.getData({
         params: this.params,
-        signal,
+        ...signal ? { signal } : {},
         context: this.context
       });
       this.dataPromise = promise;
@@ -549,7 +561,7 @@ var WidgetRegistry = class {
         name,
         modulePath: name,
         tagName: `widget-${name}`,
-        files: widget.files
+        ...widget.files ? { files: widget.files } : {}
       };
       widgets.push(entry);
       moduleLoaders[name] = () => Promise.resolve({ default: widget.constructor });
@@ -585,7 +597,7 @@ function toRouteConfig(resolved) {
     pattern: resolved.pattern,
     type: node.redirect ? "redirect" : "page",
     modulePath: node.redirect ?? node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? "",
-    files: node.files
+    ...node.files ? { files: node.files } : {}
   };
 }
 var RouteCore = class {
@@ -659,7 +671,7 @@ var RouteCore = class {
       pattern: `/${status}`,
       type: "page",
       modulePath: node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? "",
-      files: node.files
+      ...node.files ? { files: node.files } : {}
     };
   }
   /** Get global error handler (root errorBoundary). */
@@ -692,7 +704,7 @@ var RouteCore = class {
       pattern,
       type: node.redirect ? "redirect" : "page",
       modulePath: node.redirect ?? node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? "",
-      files: node.files
+      ...node.files ? { files: node.files } : {}
     };
   }
   /**
@@ -772,7 +784,14 @@ var RouteCore = class {
       widgetFiles.md ? load(widgetFiles.md) : void 0,
       widgetFiles.css ? load(widgetFiles.css) : void 0
     ]);
-    return { html, md, css };
+    const result = {};
+    if (html != null)
+      result.html = html;
+    if (md != null)
+      result.md = md;
+    if (css != null)
+      result.css = css;
+    return result;
   }
   /**
    * Build a RouteInfo from a matched route and the resolved URL pathname.
@@ -822,13 +841,20 @@ var RouteCore = class {
         rf?.css ? fetchFile(rf.css) : void 0
       ]);
     }
+    const files = {};
+    if (html != null)
+      files.html = html;
+    if (md != null)
+      files.md = md;
+    if (css != null)
+      files.css = css;
     const base = {
       ...routeInfo,
       pathname: routeInfo.url.pathname,
       searchParams: routeInfo.url.searchParams,
-      files: { html, md, css },
-      signal,
-      isLeaf
+      files,
+      ...signal ? { signal } : {},
+      ...isLeaf != null ? { isLeaf } : {}
     };
     return this.contextProvider ? this.contextProvider(base) : base;
   }
@@ -1051,7 +1077,7 @@ function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider
         ...routeInfo,
         pathname: routeInfo.url.pathname,
         searchParams: routeInfo.url.searchParams,
-        files
+        ...files ? { files } : {}
       };
       const context = contextProvider ? contextProvider(baseContext) : baseContext;
       const data = await widget.getData({ params, context });
@@ -1274,7 +1300,7 @@ var SsrRenderer = class _SsrRenderer {
         try {
           const ri = { url, params: {} };
           const result = await this.renderRouteContent(ri, statusPage, void 0, signal);
-          return { content: this.stripSlots(result.content), status: 404, title: result.title };
+          return { content: this.stripSlots(result.content), status: 404, ...result.title != null ? { title: result.title } : {} };
         } catch (e) {
           logger.error(`[${this.label}] Failed to render 404 status page for ${url.pathname}`, e instanceof Error ? e : void 0);
         }
@@ -1294,7 +1320,7 @@ var SsrRenderer = class _SsrRenderer {
     const routeInfo = this.core.toRouteInfo(matched, url);
     try {
       const { content, title } = await this.renderPage(routeInfo, matched, signal);
-      return { content, status: 200, title };
+      return { content, status: 200, ...title != null ? { title } : {} };
     } catch (error) {
       if (error instanceof Response) {
         const statusPage = this.core.getStatusPage(error.status);
@@ -1305,7 +1331,7 @@ var SsrRenderer = class _SsrRenderer {
             return {
               content: this.stripSlots(result.content),
               status: error.status,
-              title: result.title
+              ...result.title != null ? { title: result.title } : {}
             };
           } catch (e) {
             logger.error(`[${this.label}] Failed to render ${error.status} status page for ${url.pathname}`, e instanceof Error ? e : void 0);
@@ -1368,7 +1394,7 @@ var SsrRenderer = class _SsrRenderer {
       lastRenderedPattern = segments[i].route.pattern;
     }
     result = this.stripSlots(result);
-    return { content: result, title: pageTitle };
+    return { content: result, ...pageTitle != null ? { title: pageTitle } : {} };
   }
   /** Load component, build context, get data, render content, get title. */
   async loadRouteContent(routeInfo, route, isLeaf, signal) {
@@ -1376,10 +1402,10 @@ var SsrRenderer = class _SsrRenderer {
     const tsModule = files.ts ?? files.js;
     const component = tsModule ? (await this.core.loadModule(tsModule)).default : page_component_default;
     const context = await this.core.buildComponentContext(routeInfo, route, signal, isLeaf);
-    const data = await component.getData({ params: routeInfo.params, signal, context });
+    const data = await component.getData({ params: routeInfo.params, ...signal ? { signal } : {}, context });
     const content = this.renderContent(component, { data, params: routeInfo.params, context });
     const title = component.getTitle({ data, params: routeInfo.params, context });
-    return { content, title };
+    return { content, ...title != null ? { title } : {} };
   }
   /** Render a component for error boundary/handler with minimal context. */
   renderComponent(component, data, context) {
@@ -1443,7 +1469,7 @@ var SsrHtmlRouter = class extends SsrRenderer {
         return files ? this.core.loadWidgetFiles(files) : Promise.resolve({});
       }, this.core.contextProvider);
     }
-    return { content, title };
+    return { content, ...title != null ? { title } : {} };
   }
   renderContent(component, args) {
     return component.renderHTML(args);
@@ -1565,7 +1591,7 @@ var SsrMdRouter = class extends SsrRenderer {
     if (this.widgets) {
       content = await this.resolveWidgets(content, routeInfo);
     }
-    return { content, title };
+    return { content, ...title != null ? { title } : {} };
   }
   renderContent(component, args) {
     return component.renderMarkdown(args);
@@ -1606,7 +1632,7 @@ Path: \`${url.pathname}\``;
           ...routeInfo,
           pathname: routeInfo.url.pathname,
           searchParams: routeInfo.url.searchParams,
-          files
+          ...files ? { files } : {}
         };
         const context = this.core.contextProvider ? this.core.contextProvider(baseContext) : baseContext;
         const data = await widget.getData({ params: block.params, context });
@@ -1660,8 +1686,10 @@ function resolveTargetNode(node, name, isRoot) {
 // dist/runtime/abstract.runtime.js
 var DEFAULT_ROUTES_DIR = "/routes";
 var DEFAULT_WIDGETS_DIR = "/widgets";
+var DEFAULT_ELEMENTS_DIR = "/elements";
 var ROUTES_MANIFEST_PATH = "/routes.manifest.json";
 var WIDGETS_MANIFEST_PATH = "/widgets.manifest.json";
+var ELEMENTS_MANIFEST_PATH = "/elements.manifest.json";
 var Runtime = class {
   config;
   constructor(config = {}) {
@@ -1743,10 +1771,12 @@ var Runtime = class {
   // ── Manifest resolution ─────────────────────────────────────────────
   routesManifestCache = null;
   widgetsManifestCache = null;
+  elementsManifestCache = null;
   /** Clear cached manifests so the next query triggers a fresh scan. */
   invalidateManifests() {
     this.routesManifestCache = null;
     this.widgetsManifestCache = null;
+    this.elementsManifestCache = null;
   }
   /**
    * Resolve the routes manifest. Called when the concrete runtime returns
@@ -1780,6 +1810,22 @@ var Runtime = class {
     this.widgetsManifestCache = Response.json(entries);
     return this.widgetsManifestCache.clone();
   }
+  /**
+   * Resolve the elements manifest. Called when the concrete runtime returns
+   * 404 for ELEMENTS_MANIFEST_PATH. Scans `config.elementsDir` (or default).
+   */
+  async resolveElementsManifest() {
+    if (this.elementsManifestCache)
+      return this.elementsManifestCache.clone();
+    const elementsDir = this.config.elementsDir ?? DEFAULT_ELEMENTS_DIR;
+    const dirResponse = await this.query(elementsDir + "/");
+    if (dirResponse.status === 404) {
+      return new Response("Not Found", { status: 404 });
+    }
+    const entries = await this.scanElements(elementsDir, elementsDir.replace(/^\//, ""));
+    this.elementsManifestCache = Response.json(entries);
+    return this.elementsManifestCache.clone();
+  }
   // ── Scanning ──────────────────────────────────────────────────────────
   async *walkDirectory(dir) {
     const trailingDir = dir.endsWith("/") ? dir : dir + "/";
@@ -1880,6 +1926,37 @@ var Runtime = class {
     entries.sort((a, b) => a.name.localeCompare(b.name));
     return entries;
   }
+  async scanElements(elementsDir, pathPrefix) {
+    const entries = [];
+    const trailingDir = elementsDir.endsWith("/") ? elementsDir : elementsDir + "/";
+    const response = await this.query(trailingDir);
+    const listing = await response.json();
+    for (const item of listing) {
+      if (!item.endsWith("/"))
+        continue;
+      const name = item.slice(0, -1);
+      if (!name.includes("-")) {
+        console.warn(`[emroute] Skipping element "${name}": custom element names must contain a hyphen (e.g. "my-element")`);
+        continue;
+      }
+      let moduleFile = `${name}.element.ts`;
+      let modulePath = `${trailingDir}${name}/${moduleFile}`;
+      if ((await this.query(modulePath)).status === 404) {
+        moduleFile = `${name}.element.js`;
+        modulePath = `${trailingDir}${name}/${moduleFile}`;
+        if ((await this.query(modulePath)).status === 404)
+          continue;
+      }
+      const prefix = pathPrefix ? `${pathPrefix}/` : "";
+      entries.push({
+        name,
+        modulePath: `${prefix}${name}/${moduleFile}`,
+        tagName: name
+      });
+    }
+    entries.sort((a, b) => a.name.localeCompare(b.name));
+    return entries;
+  }
 };
 
 // dist/server/emroute.server.js
@@ -2018,6 +2095,11 @@ async function createEmrouteServer(config, runtime) {
       widgetFiles = imported.widgetFiles;
     }
   }
+  let discoveredElementEntries = [];
+  const elementsResponse = await runtime.query(ELEMENTS_MANIFEST_PATH);
+  if (elementsResponse.status !== 404) {
+    discoveredElementEntries = await elementsResponse.json();
+  }
   let ssrHtmlRouter = null;
   let ssrMdRouter = null;
   function buildSsrRouters() {
@@ -2029,22 +2111,23 @@ async function createEmrouteServer(config, runtime) {
     ssrHtmlRouter = new SsrHtmlRouter(resolver, {
       fileReader: (path) => runtime.query(path, { as: "text" }),
       moduleLoaders,
-      markdownRenderer: config.markdownRenderer,
-      extendContext: config.extendContext,
-      widgets,
+      ...config.markdownRenderer ? { markdownRenderer: config.markdownRenderer } : {},
+      ...config.extendContext ? { extendContext: config.extendContext } : {},
+      ...widgets ? { widgets } : {},
       widgetFiles
     });
     ssrMdRouter = new SsrMdRouter(resolver, {
       fileReader: (path) => runtime.query(path, { as: "text" }),
       moduleLoaders,
-      extendContext: config.extendContext,
-      widgets,
+      ...config.extendContext ? { extendContext: config.extendContext } : {},
+      ...widgets ? { widgets } : {},
       widgetFiles
     });
   }
   buildSsrRouters();
   const title = config.title ?? "emroute";
-  let shell = await resolveShell(runtime, title, htmlBase);
+  const shellBase = spa === "root" || spa === "only" ? appBase : htmlBase;
+  let shell = await resolveShell(runtime, title, shellBase);
   if ((await runtime.query("/main.css")).status !== 404) {
     shell = shell.replace("</head>", '  <link rel="stylesheet" href="/main.css">\n</head>');
   }
@@ -2137,6 +2220,9 @@ async function createEmrouteServer(config, runtime) {
     get widgetEntries() {
       return discoveredWidgetEntries;
     },
+    get elementEntries() {
+      return discoveredElementEntries;
+    },
     get shell() {
       return shell;
     }
@@ -2321,20 +2407,36 @@ async function bootEmrouteApp(options) {
   const routeTree = await routesResponse.json();
   const widgetsResponse = await runtime.handle(WIDGETS_MANIFEST_PATH);
   const widgetEntries = widgetsResponse.ok ? await widgetsResponse.json() : [];
-  const moduleLoaders = buildLazyLoaders(routeTree, widgetEntries, runtime);
+  const elementsResponse = await runtime.handle(ELEMENTS_MANIFEST_PATH);
+  const elementEntries = elementsResponse.ok ? await elementsResponse.json() : [];
+  const moduleLoaders = buildLazyLoaders(routeTree, widgetEntries, elementEntries, runtime);
   const widgets = new WidgetRegistry();
   for (const entry of widgetEntries) {
     ComponentElement.registerLazy(entry.name, entry.files, moduleLoaders[entry.modulePath]);
   }
+  for (const entry of elementEntries) {
+    const loader = moduleLoaders[entry.modulePath];
+    if (loader) {
+      loader().then((mod) => {
+        const cls = mod.default;
+        if (typeof cls === "function" && !customElements.get(entry.tagName)) {
+          customElements.define(entry.tagName, cls);
+        }
+      }).catch((e) => {
+        console.error(`[emroute] Failed to load element ${entry.tagName}:`, e);
+      });
+    }
+  }
+  const mdRenderer = MarkdownElement.getConfiguredRenderer();
   const server = await createEmrouteServer({
     routeTree,
     widgets,
     moduleLoaders,
-    markdownRenderer: MarkdownElement.getConfiguredRenderer() ?? void 0
+    ...mdRenderer ? { markdownRenderer: mdRenderer } : {}
   }, runtime);
   return createEmrouteApp(server, options);
 }
-function buildLazyLoaders(tree, widgetEntries, runtime) {
+function buildLazyLoaders(tree, widgetEntries, elementEntries, runtime) {
   const paths = /* @__PURE__ */ new Set();
   function walk(node) {
     const modulePath = node.files?.ts ?? node.files?.js;
@@ -2356,6 +2458,8 @@ function buildLazyLoaders(tree, widgetEntries, runtime) {
   walk(tree);
   for (const entry of widgetEntries)
     paths.add(entry.modulePath);
+  for (const entry of elementEntries)
+    paths.add(entry.modulePath);
   const loaders = {};
   for (const path of paths) {
     const absolute = path.startsWith("/") ? path : "/" + path;