fixup!

Author: avivkeller

src/generators/web/ui/islands/loaders.mjs

@@ -1,20 +1,11 @@
 /* eslint-disable jsdoc/require-jsdoc -- each entry is a bare dynamic import */
 
 /**
- * @type {Record<string, () => import('preact').ComponentType | Promise<import('preact').ComponentType>>}
+ * @type {Record<string, () => Promise<{ default: import('preact').ComponentType }>>}
  */
 export default {
-  Banner: () => import('../components/Banner').then(m => m.default),
-  ThemeToggle: () =>
-    import('../components/ThemeToggle.jsx').then(m => m.default),
-  SearchBox: () => import('../components/SearchBox').then(m => m.default),
-  SideBar: () => import('#theme/Sidebar').then(m => m.default),
-  CodeBox: () => import('../components/CodeBox').then(m => m.default),
-
-  // Not an island, and never called. The shell is server-rendered and never
-  // hydrated, so nothing else in the client graph reaches it — and CSS is only
-  // emitted from the client build, so without this its stylesheet would never
-  // exist. `cssCodeSplit: false` collects it into the page's one stylesheet
-  // while leaving the JavaScript in a chunk the browser never requests.
-  shell: () => import('#theme/Layout'),
+  Banner: () => import('../components/Banner'),
+  ThemeToggle: () => import('../components/ThemeToggle.jsx'),
+  SearchBox: () => import('../components/SearchBox'),
+  SideBar: () => import('#theme/Sidebar'),
 };

src/generators/web/ui/islands/runtime.mjs

@@ -3,6 +3,13 @@ import { h, hydrate } from 'preact';
 
 import loaders from './loaders.mjs';
 
+/**
+ * Adds the generator's component map to the registry.
+ *
+ * @param {Record<string, () => Promise<{ default: import('preact').ComponentType }>>} components
+ */
+export const registerIslands = components => Object.assign(loaders, components);
+
 /**
  * Re-renders an island's server-rendered children as the markup they already
  * are. Preact keeps the existing DOM because the HTML is identical, so nothing
@@ -26,7 +33,10 @@ Island.addInitType('preact', async island => {
     return;
   }
 
-  const script = island.querySelector(':scope > script[data-island-props]');
+  const script = [...island.children].find(child =>
+    child.matches('script[data-island-props]')
+  );
+
   const props = script ? JSON.parse(script.textContent) : {};
 
   // Preact hydrates by walking the container's children in order, so the props
@@ -39,5 +49,13 @@ Island.addInitType('preact', async island => {
     props.children = h(Slot, { html: slot.innerHTML });
   }
 
-  hydrate(h(await loader(), props), island);
+  try {
+    const { default: Component } = await loader();
+
+    hydrate(h(Component, props), island);
+  } catch (error) {
+    // is-land awaits this callback, so a rejection would leave the island
+    // silently stuck: never marked ready, and never reported anywhere.
+    console.error(`[is-land] "${name}" failed to hydrate`, error);
+  }
 });

src/generators/web/ui/islands/withIsland.jsx

@@ -45,7 +45,9 @@ export default (Component, { name, on }) => {
       )}
 
       <Component {...props}>
-        {children != null && <island-slot>{children}</island-slot>}
+        {children != null && (
+          <island-slot defer-hydration>{children}</island-slot>
+        )}
       </Component>
     </is-land>
   );

src/generators/web/utils/generate.mjs

@@ -46,15 +46,7 @@ export const createImportDeclaration = (
 };
 
 /**
- * The client entry, shared verbatim by every page.
- */
-export const CLIENT_PROGRAM = [
-  createImportDeclaration(null, resolve(ROOT, './ui/index.css')),
-  createImportDeclaration(null, resolve(ROOT, './ui/islands/runtime.mjs')),
-].join('\n');
-
-/**
- * Factory function that creates the server program generator.
+ * Factory function that creates the page programs.
  */
 export default () => {
   // User-configured components (for JSX-in-MDX), merged with the built-ins.
@@ -102,5 +94,23 @@ export default () => {
     ].join('\n');
   };
 
-  return { buildServerProgram };
+  // The client entry, shared verbatim by every page
+  const clientProgram = [
+    createImportDeclaration(null, resolve(ROOT, './ui/index.css')),
+
+    createImportDeclaration(
+      'registerIslands',
+      resolve(ROOT, './ui/islands/runtime.mjs'),
+      false
+    ),
+
+    `registerIslands({${componentImports
+      .map(
+        ({ name, source }) =>
+          `${JSON.stringify(name)}: () => import(${JSON.stringify(source)})`
+      )
+      .join(', ')}});`,
+  ].join('\n');
+
+  return { buildServerProgram, clientProgram };
 };

src/generators/web/utils/processing.mjs

@@ -1,5 +1,5 @@
 import createConfigSource from './config.mjs';
-import createServerBuilder, { CLIENT_PROGRAM } from './generate.mjs';
+import createProgramBuilder from './generate.mjs';
 import { relativeOrAbsolute } from './relativeOrAbsolute.mjs';
 import getConfig from '../../../utils/configuration/index.mjs';
 import { populate } from '../../../utils/configuration/templates.mjs';
@@ -94,7 +94,7 @@ export const buildHead = ({ meta = [], links = [], html = [] }) =>
  * @returns {{ add: (item: { data: import('../../metadata/types').MetadataEntry, code: string }) => void, serverCodeMap: Map<string, string>, clientCodeMap: Map<string, string> }}
  */
 export function createCodeConverter() {
-  const { buildServerProgram } = createServerBuilder();
+  const { buildServerProgram, clientProgram } = createProgramBuilder();
 
   const serverCodeMap = new Map();
   const clientCodeMap = new Map();
@@ -112,7 +112,7 @@ export function createCodeConverter() {
       serverCodeMap.set(fileName, buildServerProgram(code));
 
       // Every page's entry is the same module; the bundler emits one chunk.
-      clientCodeMap.set(fileName, CLIENT_PROGRAM);
+      clientCodeMap.set(fileName, clientProgram);
     },
     serverCodeMap,
     clientCodeMap,