@makinbakin/sdk 0.0.1-rc.2 → 0.0.1-rc.20

package/slots/index.js

@@ -1,91 +1,257 @@
 // @bun
 // packages/sdk/src/slots/index.tsx
-import { useSyncExternalStore } from "react";
+import { Component, useEffect, useSyncExternalStore } from "react";
+
+// packages/sdk/src/slots/registry.ts
+function getRegistry() {
+  const g = globalThis;
+  if (!g.__bakinSlotRegistry) {
+    g.__bakinSlotRegistry = new Map;
+  }
+  return g.__bakinSlotRegistry;
+}
+function registerSlot(name, component, order = 100, owner) {
+  const reg = getRegistry();
+  const entries = reg.get(name) ?? [];
+  entries.push({ component, order, owner });
+  entries.sort((a, b) => a.order - b.order);
+  reg.set(name, entries);
+}
+function getSlotEntries(name) {
+  return getRegistry().get(name) ?? [];
+}
+function getSlotNamesOwnedBy(pluginId) {
+  const names = [];
+  for (const [name, entries] of getRegistry().entries()) {
+    if (entries.some((e) => e.owner === pluginId))
+      names.push(name);
+  }
+  return names;
+}
+function clearSlotsOwnedBy(pluginId) {
+  const reg = getRegistry();
+  for (const [name, entries] of reg.entries()) {
+    const filtered = entries.filter((e) => e.owner !== pluginId);
+    if (filtered.length === 0)
+      reg.delete(name);
+    else
+      reg.set(name, filtered);
+  }
+}
 
 // packages/sdk/src/register.ts
 "use client";
 function buildNavItemsSnapshot(registry) {
   const items = [];
+  for (const [pluginId, navItems] of registry.manifestNavByPlugin.entries()) {
+    if (registry.navByPlugin.has(pluginId))
+      continue;
+    items.push(...navItems);
+  }
   for (const navItems of registry.navByPlugin.values()) {
     items.push(...navItems);
   }
   return items.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
 }
-function getRegistry() {
+function getRegistry2() {
   const g = globalThis;
   if (!g.__bakinClientRegistry) {
     g.__bakinClientRegistry = {
       navByPlugin: new Map,
+      manifestNavByPlugin: new Map,
       routesByPlugin: new Map,
       cleanupByPlugin: new Map,
       navItemsSnapshot: [],
       version: 0,
-      listeners: new Set
+      listeners: new Set,
+      badgesByPlugin: new Map,
+      badgesSnapshot: new Map,
+      badgeListeners: new Set
     };
   }
   const registry = g.__bakinClientRegistry;
+  if (!registry.manifestNavByPlugin)
+    registry.manifestNavByPlugin = new Map;
   if (!Array.isArray(registry.navItemsSnapshot)) {
     registry.navItemsSnapshot = buildNavItemsSnapshot(registry);
   }
+  if (!registry.badgesByPlugin)
+    registry.badgesByPlugin = new Map;
+  if (!registry.badgesSnapshot)
+    registry.badgesSnapshot = buildBadgesSnapshot(registry);
+  if (!registry.badgeListeners)
+    registry.badgeListeners = new Set;
   return registry;
 }
+function buildBadgesSnapshot(registry) {
+  const snapshot = new Map;
+  for (const byNavItemId of registry.badgesByPlugin.values()) {
+    for (const [navItemId, badge] of byNavItemId) {
+      if (!snapshot.has(navItemId))
+        snapshot.set(navItemId, badge);
+    }
+  }
+  return snapshot;
+}
 function getRegistryVersion() {
-  return getRegistry().version;
+  return getRegistry2().version;
 }
 function subscribeRegistry(listener) {
-  const registry = getRegistry();
+  const registry = getRegistry2();
   registry.listeners.add(listener);
   return () => {
     registry.listeners.delete(listener);
   };
 }
 
-// packages/sdk/src/slots/index.tsx
-import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+// packages/sdk/src/lazy.ts
 "use client";
-function getRegistry2() {
+function getStore() {
   const g = globalThis;
-  if (!g.__bakinSlotRegistry) {
-    g.__bakinSlotRegistry = new Map;
+  if (!g.__bakinLazyPluginStore) {
+    g.__bakinLazyPluginStore = {
+      ownersBySlot: new Map,
+      routeOwners: [],
+      states: new Map,
+      errors: new Map,
+      loader: null,
+      version: 0,
+      listeners: new Set
+    };
   }
-  return g.__bakinSlotRegistry;
+  return g.__bakinLazyPluginStore;
 }
-function registerSlot(name, component, order = 100, owner) {
-  const reg = getRegistry2();
-  const entries = reg.get(name) ?? [];
-  entries.push({ component, order, owner });
-  entries.sort((a, b) => a.order - b.order);
-  reg.set(name, entries);
+function bump() {
+  const store = getStore();
+  store.version++;
+  for (const l of store.listeners) {
+    try {
+      l();
+    } catch (err) {
+      console.error("[bakin] lazy-plugin listener threw:", err);
+    }
+  }
 }
-function getSlotEntries(name) {
-  return getRegistry2().get(name) ?? [];
+function getPluginLoadState(pluginId) {
+  return getStore().states.get(pluginId) ?? "idle";
 }
-function clearSlotsOwnedBy(pluginId) {
-  const reg = getRegistry2();
-  for (const [name, entries] of reg.entries()) {
-    const filtered = entries.filter((e) => e.owner !== pluginId);
-    if (filtered.length === 0)
-      reg.delete(name);
-    else
-      reg.set(name, filtered);
+function getPluginLoadError(pluginId) {
+  return getStore().errors.get(pluginId);
+}
+function getSlotOwners(name) {
+  return getStore().ownersBySlot.get(name) ?? [];
+}
+function demand(pluginIds) {
+  const store = getStore();
+  if (!store.loader)
+    return;
+  for (const pluginId of pluginIds) {
+    if ((store.states.get(pluginId) ?? "idle") !== "idle")
+      continue;
+    store.loader(pluginId);
+  }
+}
+function requestSlotPlugins(name) {
+  demand(getSlotOwners(name));
+}
+function retryPluginLoad(pluginId) {
+  const store = getStore();
+  if (store.states.get(pluginId) !== "error")
+    return;
+  store.states.set(pluginId, "idle");
+  store.errors.delete(pluginId);
+  bump();
+  demand([pluginId]);
+}
+function getLazyPluginsVersion() {
+  return getStore().version;
+}
+function subscribeLazyPlugins(listener) {
+  const store = getStore();
+  store.listeners.add(listener);
+  return () => {
+    store.listeners.delete(listener);
+  };
+}
+// packages/sdk/src/slots/index.tsx
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+
+class SlotEntryBoundary extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    console.error(`[bakin] slot "${this.props.slotName}" entry${this.props.owner ? ` from plugin "${this.props.owner}"` : ""} crashed:`, error);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsxDEV("div", {
+        className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+        role: "alert",
+        children: [
+          this.props.owner ? `Plugin "${this.props.owner}"` : "A plugin",
+          " failed to render this section."
+        ]
+      }, undefined, true, undefined, this);
+    }
+    return this.props.children;
   }
 }
+function SlotLoadError({ slotName, pluginIds }) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-col items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+    role: "alert",
+    children: [
+      /* @__PURE__ */ jsxDEV("span", {
+        children: [
+          pluginIds.length === 1 ? `Plugin "${pluginIds[0]}" failed to load` : `Plugins ${pluginIds.map((id) => `"${id}"`).join(", ")} failed to load`,
+          getPluginLoadError(pluginIds[0]) ? ` \u2014 ${getPluginLoadError(pluginIds[0])}` : ""
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("button", {
+        type: "button",
+        className: "rounded border border-destructive/40 px-2 py-1 text-xs hover:bg-destructive/20",
+        onClick: () => pluginIds.forEach(retryPluginLoad),
+        "aria-label": `Retry loading ${slotName}`,
+        children: "Retry"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
 function Slot({ name, ...props }) {
   useSyncExternalStore(subscribeRegistry, getRegistryVersion, getRegistryVersion);
+  useSyncExternalStore(subscribeLazyPlugins, getLazyPluginsVersion, getLazyPluginsVersion);
+  useEffect(() => {
+    requestSlotPlugins(name);
+  }, [name]);
   const entries = getSlotEntries(name);
-  if (entries.length === 0)
+  if (entries.length === 0) {
+    const failed = getSlotOwners(name).filter((id) => getPluginLoadState(id) === "error");
+    if (failed.length > 0)
+      return /* @__PURE__ */ jsxDEV(SlotLoadError, {
+        slotName: name,
+        pluginIds: [...failed]
+      }, undefined, false, undefined, this);
     return null;
+  }
   return /* @__PURE__ */ jsxDEV(Fragment, {
     children: entries.map((entry, i) => {
       const C = entry.component;
-      return /* @__PURE__ */ jsxDEV(C, {
-        ...props
+      return /* @__PURE__ */ jsxDEV(SlotEntryBoundary, {
+        owner: entry.owner,
+        slotName: name,
+        children: /* @__PURE__ */ jsxDEV(C, {
+          ...props
+        }, undefined, false, undefined, this)
       }, `${name}-${i}`, false, undefined, this);
     })
   }, undefined, false, undefined, this);
 }
 export {
   registerSlot,
+  getSlotNamesOwnedBy,
   getSlotEntries,
   clearSlotsOwnedBy,
   Slot