ui-next: page registration

packages/ui-next/index.ts

@@ -49,7 +49,10 @@ function hydroPlugins(): Plugin {
                 }
                 if (!entries.length) return 'export default [];';
                 const imports = entries.map((e, i) => `import * as plugin${i} from '${e}';`).join('\n');
-                const exports = `export default [${entries.map((_, i) => `plugin${i}`).join(', ')}];`;
+                const exports = `export default [${entries.map((e, i) => {
+                    const addonName = path.basename(path.resolve(e, '..', '..'));
+                    return `{ name: '${addonName}', ...plugin${i} }`;
+                }).join(', ')}];`;
                 return `${imports}\n${exports}`;
             }
             return undefined;

packages/ui-next/src/app.tsx

@@ -1,18 +1,37 @@
-import { Link } from './components/link';
+import { Suspense, useMemo, useSyncExternalStore } from 'react';
 import { usePageData } from './context/page-data';
-import { defineSlot } from './registry';
+import { defineSlot, SlotName } from './registry';
+import { SlotErrorBoundary } from './registry/error-boundary';
+import { store } from './registry/store';
 
-const AppInner = defineSlot('page:app', () => {
-  const data = usePageData();
+const App = defineSlot('app:root', () => {
+  const { name } = usePageData();
+  const slotName: SlotName = `page:${name}`;
 
-  return (
-    <>
-      <div>app, page:{data.name}</div>
+  const [subscribe, getSnapshot] = useMemo(() => [
+    (cb: () => void) => store.subscribe(slotName, cb),
+    () => store.getVersion(slotName),
+  ], [slotName]);
+
+  useSyncExternalStore(subscribe, getSnapshot);
+
+  const Comp = store.getDefault(slotName);
+
+  if (!Comp) {
+    return (
       <div>
-        <Link to="homepage">homepage</Link> <Link to="problem_main">problem_main</Link>
+        Page not found: <code>{name}</code>
       </div>
-    </>
+    );
+  }
+
+  return (
+    <SlotErrorBoundary slotName={slotName} label="renderer">
+      <Suspense fallback={<div>Loading...</div>}>
+        <Comp />
+      </Suspense>
+    </SlotErrorBoundary>
   );
 });
 
-export default AppInner;
+export default App;

packages/ui-next/src/components/layout.tsx

@@ -0,0 +1,5 @@
+import { defineSlot } from '../registry';
+
+const Layout = defineSlot('app:layout', ({ children }: React.PropsWithChildren) => <>{children}</>);
+
+export default Layout;

packages/ui-next/src/globals.ts

@@ -16,7 +16,6 @@ export const isInjected: boolean = !!injectionData.HYDRO_INJECTED;
 export const hydroDomains: string[] = injectionData.hydro_domains ?? [];
 export const pluginsUrl: string | undefined = injectionData.plugins_url;
 
-// routeMap as an external store for useSyncExternalStore, with HMR state preservation
 interface RouteMapStore {
   _routeMap: Record<string, string>;
   _listeners: Set<() => void>;

packages/ui-next/src/main.tsx

@@ -1,3 +1,5 @@
+import './pages';
+
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import * as api from './api';

packages/ui-next/src/pages/homepage.tsx

@@ -0,0 +1,19 @@
+import { Link } from '../components/link';
+
+export default function Homepage() {
+  return (
+    <div>
+      <div>homepage</div>
+      <Link to="problem_main">problem_main</Link>
+    </div>
+  );
+}
+
+export function Layout({ children }: React.PropsWithChildren) {
+  return (
+    <div>
+      {children}
+      <div>layout test</div>
+    </div>
+  );
+}

packages/ui-next/src/pages/index.ts

@@ -0,0 +1,4 @@
+import { registerPage } from '../registry/page';
+
+registerPage('homepage', () => import('./homepage'));
+registerPage('problem_main', () => import('./problem_main'));

packages/ui-next/src/pages/problem_main.tsx

@@ -0,0 +1,10 @@
+import { Link } from '../components/link';
+
+export default function ProblemMain() {
+  return (
+    <div>
+      <div>problem_main</div>
+      <Link to="homepage">homepage</Link>
+    </div>
+  );
+}

packages/ui-next/src/registry/index.ts

@@ -1,5 +1,6 @@
 export { SlotErrorBoundary } from './error-boundary';
 export { after, before, intercept, patch, replace, wrap } from './interceptors';
+export { registerPage } from './page';
 export { installPlugin } from './plugin';
 export type { PluginAPI, PluginDefinition } from './plugin';
 export { defineSlot } from './slot';

packages/ui-next/src/registry/page.tsx

@@ -0,0 +1,28 @@
+import React, { lazy } from 'react';
+import Layout from '../components/layout';
+import { store } from './store';
+
+interface PageModule<P = any> {
+  default: React.ComponentType<P>;
+  Layout?: React.ComponentType<React.PropsWithChildren>;
+}
+
+type PageLoader<P = any> = () => Promise<PageModule<P>>;
+
+export function registerPage<P = any>(name: string, loader: PageLoader<P>) {
+  store.setDefault(`page:${name}`, lazy(() =>
+    loader().then((mod) => {
+      const PageComp = mod.default;
+      const LayoutComp = mod.Layout || Layout;
+      return {
+        default(props: React.PropsWithChildren<P>) {
+          return (
+            <LayoutComp>
+              <PageComp {...props} />
+            </LayoutComp>
+          );
+        },
+      };
+    }),
+  ));
+}

packages/ui-next/src/registry/plugin.ts

@@ -1,4 +1,5 @@
 import { after, before, intercept, patch, replace, wrap } from './interceptors';
+import { registerPage } from './page';
 
 export interface PluginAPI {
   intercept: typeof intercept;
@@ -7,10 +8,11 @@ export interface PluginAPI {
   patch: typeof patch;
   replace: typeof replace;
   wrap: typeof wrap;
+  registerPage: typeof registerPage;
 }
 
 export function createPluginAPI(): PluginAPI {
-  return { intercept, before, after, patch, replace, wrap };
+  return { intercept, before, after, patch, replace, wrap, registerPage };
 }
 
 export interface PluginDefinition {

packages/ui-next/src/registry/store.ts

@@ -74,6 +74,7 @@ function createRegistryStore() {
 
   function setDefault(name: SlotName, comp: React.FC<any>) {
     state.defaults[name] = comp;
+    bumpVersion(name);
   }
 
   function getDefault(name: SlotName): React.FC<any> | undefined {

packages/ui-next/src/registry/types.ts

@@ -1,4 +1,4 @@
-type Scope = 'page' | 'component' | 'layout' | string;
+type Scope = 'app' | 'page' | 'component' | string;
 export type SlotName = `${Scope}:${string}`;
 
 export type Interceptor<P = any> = (