@emkodev/emroute 1.8.2-beta.1 → 1.10.0-beta.1

package/dist/emroute.js

@@ -472,27 +472,6 @@ class ComponentElement extends HTMLElementBase {
   }
 }
 
-// dist/core/widget/widget.registry.js
-class WidgetRegistry {
-  entries = new Map;
-  add(widget, modulePath) {
-    this.entries.set(widget.name, { widget, modulePath });
-  }
-  get(name) {
-    return this.entries.get(name)?.widget;
-  }
-  getModulePath(name) {
-    return this.entries.get(name)?.modulePath;
-  }
-  [Symbol.iterator]() {
-    const entries = this.entries.values();
-    return function* () {
-      for (const entry of entries)
-        yield entry.widget;
-    }();
-  }
-}
-
 // dist/core/router/route.trie.js
 class RouteTrie {
   tree;
@@ -715,6 +694,13 @@ class Pipeline {
     }
     return hierarchy;
   }
+  async findWidgetModulePath(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;
+  }
   async loadModule(modulePath) {
     const loader = this.moduleLoaders[modulePath];
     if (loader) {
@@ -806,7 +792,7 @@ async function resolveRecursively(content, parse, resolve, replace, depth = 0, l
   }));
   return replace(content, replacements);
 }
-function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider, logger = defaultLogger) {
+function resolveWidgetTags(html, getWidget, routeInfo, loadFiles, contextProvider, logger = defaultLogger) {
   const tagPattern = /<widget-(?<name>[a-z][a-z0-9-]*)(?<attrs>\s[^>]*)?>(?<content>.*?)<\/widget-\k<name>>/gis;
   const wrappers = new Map;
   const ssrAttrPattern = new RegExp(`\\s${SSR_ATTR}(?:\\s|=|$)`);
@@ -820,7 +806,7 @@ function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider
   const resolve = async (match) => {
     const widgetName = match.groups.name;
     const attrsString = match.groups.attrs?.trim() ?? "";
-    const widget = registry.get(widgetName);
+    const widget = await getWidget(widgetName);
     if (!widget)
       return match[0];
     const params = parseAttrsToParams(attrsString);
@@ -1017,15 +1003,40 @@ class PageComponent extends Component {
 }
 var page_component_default = new PageComponent;
 
+// dist/core/widget/widget.registry.js
+function extractWidgetExport(mod) {
+  for (const value of Object.values(mod)) {
+    if (!value)
+      continue;
+    if (typeof value === "object" && "getData" in value) {
+      return value;
+    }
+    if (typeof value === "function" && value.prototype?.getData) {
+      return new value;
+    }
+  }
+  return null;
+}
+
 // dist/core/renderer/ssr.renderer.js
 class SsrRenderer {
   pipeline;
-  widgets;
   logger;
-  constructor(pipeline, options = {}) {
+  constructor(pipeline, _options = {}) {
     this.pipeline = pipeline;
     this.logger = pipeline.logger;
-    this.widgets = options.widgets ?? null;
+  }
+  async resolveWidget(name) {
+    const path = await this.pipeline.findWidgetModulePath(name);
+    if (!path)
+      return;
+    try {
+      const mod = await this.pipeline.loadModule(path);
+      return extractWidgetExport(mod) ?? undefined;
+    } catch (e) {
+      this.logger.error(`[${this.label}] Failed to load widget "${name}"`, e instanceof Error ? e : undefined);
+      return;
+    }
   }
   async render(url, signal) {
     const matched = await this.pipeline.match(url);
@@ -1190,18 +1201,16 @@ class SsrHtmlRenderer extends SsrRenderer {
     let content = rawContent;
     content = await this.expandMarkdown(content);
     content = this.attributeSlots(content, route.pattern);
-    if (this.widgets) {
-      content = await resolveWidgetTags(content, this.widgets, routeInfo, async (name) => {
-        const modulePath = this.widgets.getModulePath(name);
-        if (modulePath) {
-          const mod = await this.pipeline.loadModule(modulePath);
-          const inlined = this.pipeline.getModuleFiles(mod);
-          if (inlined)
-            return inlined;
-        }
-        return {};
-      }, this.pipeline.contextProvider, this.logger);
-    }
+    content = await resolveWidgetTags(content, (name) => this.resolveWidget(name), routeInfo, async (name) => {
+      const modulePath = await this.pipeline.findWidgetModulePath(name);
+      if (modulePath) {
+        const mod = await this.pipeline.loadModule(modulePath);
+        const inlined = this.pipeline.getModuleFiles(mod);
+        if (inlined)
+          return inlined;
+      }
+      return {};
+    }, this.pipeline.contextProvider, this.logger);
     return { content, ...title !== undefined ? { title } : {} };
   }
   renderContent(component, args) {
@@ -1313,9 +1322,7 @@ class SsrMdRenderer extends SsrRenderer {
     const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf, signal);
     let content = rawContent;
     content = content.replaceAll(BARE_SLOT_BLOCK, routerSlotBlock(route.pattern));
-    if (this.widgets) {
-      content = await this.resolveWidgets(content, routeInfo);
-    }
+    content = await this.resolveWidgets(content, routeInfo);
     return { content, ...title !== undefined ? { title } : {} };
   }
   renderContent(component, args) {
@@ -1339,13 +1346,13 @@ Path: \`${url.pathname}\``;
       if (block.parseError || !block.params) {
         return `> **Error** (\`${block.widgetName}\`): ${block.parseError}`;
       }
-      const widget = this.widgets.get(block.widgetName);
+      const widget = await this.resolveWidget(block.widgetName);
       if (!widget) {
         return `> **Error**: Unknown widget \`${block.widgetName}\``;
       }
       try {
         let files;
-        const modulePath = this.widgets.getModulePath(block.widgetName);
+        const modulePath = await this.pipeline.findWidgetModulePath(block.widgetName);
         if (modulePath) {
           const mod = await this.pipeline.loadModule(modulePath);
           files = this.pipeline.getModuleFiles(mod);
@@ -1430,28 +1437,13 @@ class Emroute {
       ...config.extendContext ? { contextProvider: config.extendContext } : {},
       ...config.moduleLoaders ? { moduleLoaders: config.moduleLoaders } : {}
     });
-    let widgets;
-    const widgetsResponse = await runtime.query(WIDGETS_MANIFEST_PATH);
-    if (widgetsResponse.status !== 404) {
-      const entries = await widgetsResponse.json();
-      widgets = await Emroute.importWidgets(entries, runtime);
-    }
-    if (config.widgets) {
-      if (!widgets)
-        widgets = new WidgetRegistry;
-      for (const w of config.widgets)
-        widgets.add(w);
-    }
     let ssrHtmlRenderer = null;
     let ssrMdRenderer = null;
     if (spa !== "only") {
       ssrHtmlRenderer = new SsrHtmlRenderer(pipeline, {
-        ...config.markdownRenderer ? { markdownRenderer: config.markdownRenderer } : {},
-        ...widgets ? { widgets } : {}
-      });
-      ssrMdRenderer = new SsrMdRenderer(pipeline, {
-        ...widgets ? { widgets } : {}
+        ...config.markdownRenderer ? { markdownRenderer: config.markdownRenderer } : {}
       });
+      ssrMdRenderer = new SsrMdRenderer(pipeline);
     }
     const title = config.title ?? "emroute";
     const shellBase = spa === "root" || spa === "only" ? appBase : htmlBase;
@@ -1531,38 +1523,14 @@ class Emroute {
     const bare = pathname === "/" ? "" : pathname.slice(1).replace(/\/$/, "");
     return Response.redirect(new URL(`${base}/${bare}`, url.origin), 302);
   }
-  static extractWidgetExport(mod) {
-    for (const value of Object.values(mod)) {
-      if (!value)
-        continue;
-      if (typeof value === "object" && "getData" in value) {
-        return value;
-      }
-      if (typeof value === "function" && value.prototype?.getData) {
-        return new value;
-      }
-    }
-    return null;
-  }
-  static async importWidgets(entries, runtime) {
-    const registry = new WidgetRegistry;
-    for (const entry of entries) {
-      try {
-        const runtimePath = entry.modulePath.startsWith("/") ? entry.modulePath : `/${entry.modulePath}`;
-        const mod = await runtime.loadModule(runtimePath);
-        const instance = Emroute.extractWidgetExport(mod);
-        if (!instance)
-          continue;
-        registry.add(instance, runtimePath);
-      } catch (e) {
-        console.error(`[emroute] Failed to load widget ${entry.modulePath}:`, e);
-      }
-    }
-    return registry;
-  }
   static async buildHtmlShell(runtime, title, basePath, spa) {
     const baseTag = basePath ? `
   <base href="${escapeHtml(basePath)}/">` : "";
+    let manifestTag = "";
+    if ((await runtime.query("/manifest.json")).status !== 404) {
+      manifestTag = `
+  <link rel="manifest" href="/manifest.json">`;
+    }
     let cssTag = "";
     if ((await runtime.query("/main.css")).status !== 404) {
       cssTag = `
@@ -1591,7 +1559,7 @@ ${importMap}
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${escapeHtml(title)}</title>
-  <style>@view-transition { navigation: auto; } router-slot { display: contents; }</style>${cssTag}
+  <style>@view-transition { navigation: auto; } router-slot { display: contents; }</style>${manifestTag}${cssTag}
 </head>
 <body>
   <router-slot></router-slot>${importMapHtml}${scriptHtml}
@@ -2415,7 +2383,6 @@ async function bootEmrouteApp(options) {
   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, moduleLoaders[entry.modulePath]);
   }
@@ -2432,12 +2399,15 @@ async function bootEmrouteApp(options) {
       });
     }
   }
+  if (options?.extendContext) {
+    ComponentElement.setContextProvider(options.extendContext);
+  }
   const mdRenderer = MarkdownElement.getConfiguredRenderer();
   const server = await Emroute.create({
     routeTree,
-    widgets,
     moduleLoaders,
-    ...mdRenderer ? { markdownRenderer: mdRenderer } : {}
+    ...mdRenderer ? { markdownRenderer: mdRenderer } : {},
+    ...options?.extendContext ? { extendContext: options.extendContext } : {}
   }, runtime);
   return createEmrouteApp(server, options);
 }
@@ -3015,6 +2985,388 @@ function createOverlayService() {
     dismissAll
   };
 }
+// dist/runtime/cache.runtime.js
+var __rewriteRelativeImportExtension2 = function(path, preserveJsx) {
+  if (typeof path === "string" && /^\.\.?\//.test(path)) {
+    return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function(m, tsx, d, ext, cm) {
+      return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : d + ext + "." + cm.toLowerCase() + "js";
+    });
+  }
+  return path;
+};
+
+class CacheRuntime extends Runtime {
+  cache = null;
+  cacheName;
+  constructor(cacheName, config = {}) {
+    super(config);
+    this.cacheName = cacheName;
+  }
+  async getCache() {
+    this.cache ??= await caches.open(this.cacheName);
+    return this.cache;
+  }
+  handle(resource, init) {
+    const path = this.parsePath(resource);
+    const method = init?.method ?? "GET";
+    switch (method) {
+      case "PUT":
+        return this.write(path, init?.body ?? null);
+      case "DELETE":
+        return this.delete(path);
+      default:
+        return this.read(path);
+    }
+  }
+  query(resource, options) {
+    if (options?.as === "text") {
+      return this.read(this.parsePath(resource)).then(async (r) => {
+        if (r.status === 404)
+          throw new Error(`Not found: ${this.parsePath(resource)}`);
+        return r.text();
+      });
+    }
+    return this.handle(resource, options);
+  }
+  async loadModule(path) {
+    const response = await this.read(path);
+    if (response.status === 404) {
+      throw new Error(`Module not found in cache: ${path}`);
+    }
+    const js = await response.text();
+    const blob = new Blob([js], { type: "application/javascript" });
+    const objectUrl = URL.createObjectURL(blob);
+    try {
+      return await import(__rewriteRelativeImportExtension2(objectUrl));
+    } finally {
+      URL.revokeObjectURL(objectUrl);
+    }
+  }
+  async read(path) {
+    const cache = await this.getCache();
+    const key = new Request(this.toFakeUrl(path));
+    const cached = await cache.match(key);
+    if (!cached)
+      return new Response("Not Found", { status: 404 });
+    return cached;
+  }
+  async write(path, body) {
+    const cache = await this.getCache();
+    const ext = path.slice(path.lastIndexOf(".")).toLowerCase();
+    const contentType = CONTENT_TYPES.get(ext) ?? "application/octet-stream";
+    const response = new Response(body, {
+      status: 200,
+      headers: { "Content-Type": contentType }
+    });
+    await cache.put(new Request(this.toFakeUrl(path)), response);
+    return new Response(null, { status: 204 });
+  }
+  async delete(path) {
+    const cache = await this.getCache();
+    await cache.delete(new Request(this.toFakeUrl(path)));
+    return new Response(null, { status: 204 });
+  }
+  parsePath(resource) {
+    if (typeof resource === "string")
+      return resource;
+    if (resource instanceof URL)
+      return resource.pathname;
+    return new URL(resource.url).pathname;
+  }
+  toFakeUrl(path) {
+    return `https://emroute-cache${path}`;
+  }
+}
+
+// dist/runtime/idb.runtime.js
+var __rewriteRelativeImportExtension3 = function(path, preserveJsx) {
+  if (typeof path === "string" && /^\.\.?\//.test(path)) {
+    return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function(m, tsx, d, ext, cm) {
+      return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : d + ext + "." + cm.toLowerCase() + "js";
+    });
+  }
+  return path;
+};
+var STORE_NAME = "files";
+
+class IdbRuntime extends Runtime {
+  db = null;
+  dbName;
+  constructor(dbName, config = {}) {
+    super(config);
+    this.dbName = dbName;
+  }
+  open() {
+    if (this.db)
+      return Promise.resolve(this.db);
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, 1);
+      request.onupgradeneeded = () => {
+        request.result.createObjectStore(STORE_NAME);
+      };
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve(this.db);
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+  handle(resource, init) {
+    const [pathname, method, body] = this.parse(resource, init);
+    switch (method) {
+      case "PUT":
+        return this.write(pathname, body);
+      case "DELETE":
+        return this.delete(pathname);
+      default:
+        return this.read(pathname);
+    }
+  }
+  query(resource, options) {
+    if (options?.as === "text") {
+      const pathname = this.parsePath(resource);
+      return this.get(pathname).then((data) => {
+        if (!data)
+          throw new Error(`Not found: ${pathname}`);
+        return new TextDecoder().decode(data);
+      });
+    }
+    return this.handle(resource, options);
+  }
+  async loadModule(path) {
+    const data = await this.get(path);
+    if (!data)
+      throw new Error(`Module not found in IDB: ${path}`);
+    const buf = data.buffer;
+    const blob = new Blob([buf], { type: "application/javascript" });
+    const objectUrl = URL.createObjectURL(blob);
+    try {
+      return await import(__rewriteRelativeImportExtension3(objectUrl));
+    } finally {
+      URL.revokeObjectURL(objectUrl);
+    }
+  }
+  async read(path) {
+    if (path.endsWith("/")) {
+      const children = await this.listChildren(path);
+      if (children.length === 0)
+        return new Response("Not Found", { status: 404 });
+      return Response.json(children);
+    }
+    const data = await this.get(path);
+    if (!data) {
+      const children = await this.listChildren(path + "/");
+      if (children.length > 0)
+        return Response.json(children);
+      return new Response("Not Found", { status: 404 });
+    }
+    const ext = path.slice(path.lastIndexOf(".")).toLowerCase();
+    return new Response(data.buffer, {
+      status: 200,
+      headers: { "Content-Type": CONTENT_TYPES.get(ext) ?? "application/octet-stream" }
+    });
+  }
+  async write(path, body) {
+    const data = body ? new Uint8Array(await new Response(body).arrayBuffer()) : new Uint8Array;
+    await this.put(path, data);
+    return new Response(null, { status: 204 });
+  }
+  async delete(path) {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      tx.objectStore(STORE_NAME).delete(path);
+      tx.oncomplete = () => resolve(new Response(null, { status: 204 }));
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+  async get(path) {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const req = tx.objectStore(STORE_NAME).get(path);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+  async put(path, data) {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      tx.objectStore(STORE_NAME).put(data, path);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  }
+  async listChildren(prefix) {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const store = tx.objectStore(STORE_NAME);
+      const range = IDBKeyRange.bound(prefix, prefix + "￿", false, false);
+      const req = store.getAllKeys(range);
+      req.onsuccess = () => {
+        const entries = new Set;
+        for (const key of req.result) {
+          const rest = key.slice(prefix.length);
+          const slashIdx = rest.indexOf("/");
+          if (slashIdx === -1) {
+            entries.add(rest);
+          } else {
+            entries.add(rest.slice(0, slashIdx + 1));
+          }
+        }
+        resolve([...entries]);
+      };
+      req.onerror = () => reject(req.error);
+    });
+  }
+  parsePath(resource) {
+    if (typeof resource === "string")
+      return resource;
+    if (resource instanceof URL)
+      return resource.pathname;
+    return new URL(resource.url).pathname;
+  }
+  parse(resource, init) {
+    const pathname = this.parsePath(resource);
+    if (typeof resource === "string" || resource instanceof URL) {
+      return [pathname, init?.method ?? "GET", init?.body ?? null];
+    }
+    return [
+      pathname,
+      init?.method ?? resource.method,
+      init?.body ?? resource.body
+    ];
+  }
+}
+
+// dist/src/service-worker/emroute.sw.js
+class SwRuntime extends Runtime {
+  cache;
+  idb;
+  constructor(cache, idb) {
+    super();
+    this.cache = cache;
+    this.idb = idb;
+  }
+  handle(resource, init) {
+    const method = init?.method ?? "GET";
+    if (method === "PUT" || method === "DELETE") {
+      return this.idb.handle(resource, init);
+    }
+    return this.cache.handle(resource, init).then(async (r) => {
+      if (r.status !== 404)
+        return r;
+      return this.idb.handle(resource, init);
+    });
+  }
+  query(resource, options) {
+    if (options?.as === "text") {
+      return this.handle(resource, options).then(async (r) => {
+        if (r.status === 404) {
+          const path = typeof resource === "string" ? resource : resource instanceof URL ? resource.pathname : new URL(resource.url).pathname;
+          throw new Error(`Not found: ${path}`);
+        }
+        return r.text();
+      });
+    }
+    return this.handle(resource, options);
+  }
+  async loadModule(path) {
+    try {
+      return await this.cache.loadModule(path);
+    } catch {
+      return await this.idb.loadModule(path);
+    }
+  }
+}
+function createEmrouteSW(options) {
+  const { cacheName, precache, content = [], dbName = "emroute-content", origin = self.location.origin } = options;
+  const cacheRuntime = new CacheRuntime(cacheName);
+  const idbRuntime = new IdbRuntime(dbName);
+  const swRuntime = new SwRuntime(cacheRuntime, idbRuntime);
+  let emroute = null;
+  async function getEmroute() {
+    if (emroute)
+      return emroute;
+    emroute = await Emroute.create({
+      spa: options.spa ?? "only",
+      ...options.basePath ? { basePath: options.basePath } : {},
+      ...options.title ? { title: options.title } : {},
+      ...options.markdownRenderer ? { markdownRenderer: options.markdownRenderer } : {},
+      ...options.extendContext ? { extendContext: options.extendContext } : {}
+    }, swRuntime);
+    return emroute;
+  }
+  self.addEventListener("install", (event) => {
+    event.waitUntil((async () => {
+      if (precache.length > 0) {
+        const cache = await caches.open(cacheName);
+        await Promise.all(precache.map(async (path) => {
+          try {
+            const response = await fetch(`${origin}${path}`);
+            if (response.ok) {
+              await cache.put(new Request(`https://emroute-cache${path}`), response);
+            }
+          } catch {
+            console.error(`[emroute-sw] Failed to precache asset: ${path}`);
+          }
+        }));
+      }
+      if (content.length > 0) {
+        await Promise.all(content.map(async (path) => {
+          try {
+            const response = await fetch(`${origin}${path}`);
+            if (response.ok) {
+              const data = new Uint8Array(await response.arrayBuffer());
+              await idbRuntime.handle(path, {
+                method: "PUT",
+                body: data
+              });
+            }
+          } catch {
+            console.error(`[emroute-sw] Failed to precache content: ${path}`);
+          }
+        }));
+      }
+      await self.skipWaiting();
+    })());
+  });
+  self.addEventListener("activate", (event) => {
+    event.waitUntil((async () => {
+      const keys = await caches.keys();
+      await Promise.all(keys.filter((key) => key !== cacheName && key.startsWith("emroute")).map((key) => caches.delete(key)));
+      await self.clients.claim();
+    })());
+  });
+  self.addEventListener("fetch", (event) => {
+    const url = new URL(event.request.url);
+    if (url.origin !== self.location.origin)
+      return;
+    event.respondWith(handleFetch(event.request, url));
+  });
+  async function handleFetch(request, url) {
+    if (request.mode === "navigate") {
+      try {
+        const server = await getEmroute();
+        const response = await server.handleRequest(request);
+        if (response)
+          return response;
+      } catch (e) {
+        console.error("[emroute-sw] Navigation error:", e);
+      }
+    }
+    const cached = await swRuntime.handle(url.pathname);
+    if (cached.status !== 404)
+      return cached;
+    try {
+      return await fetch(request);
+    } catch {
+      return new Response("Offline", { status: 503 });
+    }
+  }
+}
 // dist/src/widget/page-title.widget.js
 class PageTitleWidget extends WidgetComponent {
   name = "page-title";
@@ -3093,23 +3445,25 @@ export {
   scopeWidgetCss,
   escapeHtml,
   createOverlayService,
+  createEmrouteSW,
   createEmrouteApp,
   bootEmrouteApp,
-  WidgetRegistry,
   WidgetComponent,
   RouterSlot,
   RouteTrie,
   PageTitleWidget,
   PageComponent,
   MarkdownElement,
+  IdbRuntime,
   FetchRuntime,
   EmrouteApp,
   Emroute,
   DEFAULT_BASE_PATH,
   ComponentElement,
   Component,
+  CacheRuntime,
   BreadcrumbWidget
 };
 
-//# debugId=AF103AF6F8C1794764756E2164756E21
+//# debugId=FB9DE7997217939864756E2164756E21
 //# sourceMappingURL=emroute.js.map