dtwo 3.0.0-rc.14 → 3.1.0-0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { dirname, resolve, basename, extname, relative, normalize, isAbsolute, join } from 'pathe';
 import { createHooks, createDebugger } from 'hookable';
-import { useDtwo, resolveFiles, defineDtwoModule, addPlugin, addTemplate, addComponent, updateTemplates, addWitePlugin, addWebpackPlugin, findPath, isIgnored, resolveAlias, addPluginTemplate, logger, resolvePath, dtwoCtx, tryResolveModule, installModule, loadDtwoConfig, normalizeTemplate, compileTemplate, normalizePlugin, templateUtils, importModule } from '@dtwo/kit';
+import { useDtwo, resolveFiles, defineDtwoModule, addPlugin, addTemplate, addComponent, updateTemplates, addWitePlugin, addWebpackPlugin, findPath, isIgnored, resolveAlias, addPluginTemplate, logger, resolvePath, createResolver, dtwoCtx, tryResolveModule, installModule, loadDtwoConfig, normalizeTemplate, compileTemplate, normalizePlugin, templateUtils, importModule } from '@dtwo/kit';
 import escapeRE from 'escape-string-regexp';
 import fse from 'fs-extra';
 import { encodePath, parseURL, stringifyQuery, parseQuery, joinURL, withTrailingSlash, withoutLeadingSlash } from 'ufo';
@@ -15,18 +15,21 @@ import MagicString from 'magic-string';
 import { globby } from 'globby';
 import { hyphenate } from '@kdujs/shared';
 import { parse, walk as walk$1, ELEMENT_NODE } from 'ultrahtml';
-import { defineKdimportPreset, createKdimport, toImports, scanDirExports } from 'kdimport';
+import { defineKdimportPreset, createKdimport, scanDirExports } from 'kdimport';
 import { createRequire } from 'node:module';
 import { createTransformer } from 'unctx/transform';
 import { stripLiteral } from 'strip-literal';
 import { createHole, scanHandlers, writeTypes, build as build$1, prepare, copyPublicAssets, prerender, createDevServer } from 'holepack';
-import defu from 'defu';
+import defu, { defu as defu$1 } from 'defu';
 import { dynamicEventHandler } from 'h3';
 import { createHeadCore } from 'kdhead';
 import { renderSSRHead } from '@kdhead/ssr';
+import { rm, mkdir, writeFile } from 'node:fs/promises';
 import chokidar from 'chokidar';
 import { debounce } from 'perfect-debounce';
-import { generateTypes, resolveSchema } from 'untyped';
+import { resolveSchema, generateMarkdown, generateTypes } from 'untyped';
+import untypedPlugin from 'untyped/babel-plugin';
+import jiti from 'jiti';
 import { hash } from 'ohash';
 
 let _distDir = dirname(fileURLToPath(import.meta.url));
@@ -192,26 +195,30 @@ function prepareRoutes(routes, parent) {
   return routes;
 }
 function normalizeRoutes(routes, metaImports = /* @__PURE__ */ new Set()) {
+  const dtwo = useDtwo();
   return {
     imports: metaImports,
-    routes: genArrayFromRaw(routes.map((route) => {
-      const file = normalize(route.file);
-      const metaImportName = genSafeVariableName(file) + "Meta";
+    routes: genArrayFromRaw(routes.map((page) => {
+      const file = normalize(page.file);
+      const metaImportName = genSafeVariableName(relative(dtwo.options.rootDir, file)) + "Meta";
       metaImports.add(genImport(`${file}?macro=true`, [{ name: "default", as: metaImportName }]));
       let aliasCode = `${metaImportName}?.alias || []`;
-      if (Array.isArray(route.alias) && route.alias.length) {
-        aliasCode = `${JSON.stringify(route.alias)}.concat(${aliasCode})`;
-      }
-      return {
-        ...Object.fromEntries(Object.entries(route).map(([key, value]) => [key, JSON.stringify(value)])),
-        name: `${metaImportName}?.name ?? ${route.name ? JSON.stringify(route.name) : "undefined"}`,
-        path: `${metaImportName}?.path ?? ${JSON.stringify(route.path)}`,
-        children: route.children ? normalizeRoutes(route.children, metaImports).routes : [],
-        meta: route.meta ? `{...(${metaImportName} || {}), ...${JSON.stringify(route.meta)}}` : metaImportName,
+      if (Array.isArray(page.alias) && page.alias.length) {
+        aliasCode = `${JSON.stringify(page.alias)}.concat(${aliasCode})`;
+      }
+      const route = {
+        ...Object.fromEntries(Object.entries(page).map(([key, value]) => [key, JSON.stringify(value)])),
+        file: void 0,
+        name: `${metaImportName}?.name ?? ${page.name ? JSON.stringify(page.name) : "undefined"}`,
+        path: `${metaImportName}?.path ?? ${JSON.stringify(page.path)}`,
+        children: page.children ? normalizeRoutes(page.children, metaImports).routes : [],
+        meta: page.meta ? `{...(${metaImportName} || {}), ...${JSON.stringify(page.meta)}}` : metaImportName,
         alias: aliasCode,
-        redirect: route.redirect ? JSON.stringify(route.redirect) : `${metaImportName}?.redirect || undefined`,
+        redirect: page.redirect ? JSON.stringify(page.redirect) : `${metaImportName}?.redirect || undefined`,
         component: genDynamicImport(file, { interopDefault: true })
       };
+      delete route.file;
+      return route;
     }))
   };
 }
@@ -227,7 +234,7 @@ if (import.meta.hot) {
     Object.assign(__dtwo_page_meta, mod)
   })
 }
-// Webpack
+// webpack
 if (import.meta.webpackHot) {
   import.meta.webpackHot.accept((err) => {
     if (err) { window.location = window.location.href }
@@ -500,7 +507,8 @@ const pagesModule = defineDtwoModule({
     };
     addWitePlugin(PageMetaPlugin.wite(pageMetaOptions));
     addWebpackPlugin(PageMetaPlugin.webpack(pageMetaOptions));
-    addPlugin(resolve(runtimeDir, "router"));
+    addPlugin(resolve(runtimeDir, "plugins/prefetch.client"));
+    addPlugin(resolve(runtimeDir, "plugins/router"));
     const getSources = (pages) => pages.flatMap(
       (p) => [relative(dtwo.options.srcDir, p.file), ...getSources(p.children || [])]
     );
@@ -543,6 +551,7 @@ const pagesModule = defineDtwoModule({
           `const configRouterOptions = ${configRouterOptions}`,
           "export default {",
           "...configRouterOptions,",
+          // We need to reverse spreading order to respect layers priority
           ...routerOptionsFiles.map((_, index) => `...routerOptions${index},`).reverse(),
           "}"
         ].join("\n");
@@ -605,6 +614,7 @@ const metaModule = defineDtwoModule({
         name: componentName,
         filePath: componentsPath,
         export: componentName,
+        // kebab case version of these tags is not valid
         kebabName: componentName
       });
     }
@@ -643,11 +653,12 @@ export default defineDtwoPlugin(dtwoApp => {
   }
 };
 const componentsTemplate = {
+  // components.[server|client].mjs'
   getContents({ options }) {
     const imports = /* @__PURE__ */ new Set();
     imports.add("import { defineAsyncComponent } from 'kdu'");
     let num = 0;
-    const components = options.getComponents(options.mode).flatMap((c) => {
+    const components = options.getComponents(options.mode).filter((c) => !c.island).flatMap((c) => {
       const exp = c.export === "default" ? "c.default || c" : `c['${c.export}']`;
       const comment = createImportMagicComments(c);
       const isClient = c.mode === "client";
@@ -667,15 +678,32 @@ const componentsTemplate = {
     return [
       ...imports,
       ...components,
-      `export const componentNames = ${JSON.stringify(options.getComponents().map((c) => c.pascalName))}`
+      `export const componentNames = ${JSON.stringify(options.getComponents().filter((c) => !c.island).map((c) => c.pascalName))}`
     ].join("\n");
   }
 };
+const componentsIslandsTemplate = {
+  // components.islands.mjs'
+  getContents({ options }) {
+    const components = options.getComponents();
+    const islands = components.filter(
+      (component) => component.island || // .server components without a corresponding .client component will need to be rendered as an island
+      component.mode === "server" && !components.some((c) => c.pascalName === component.pascalName && c.mode === "client")
+    );
+    return islands.map(
+      (c) => {
+        const exp = c.export === "default" ? "c.default || c" : `c['${c.export}']`;
+        const comment = createImportMagicComments(c);
+        return `export const ${c.pascalName} = defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`;
+      }
+    ).join("\n");
+  }
+};
 const componentsTypeTemplate = {
   filename: "components.d.ts",
   getContents: ({ options, dtwo }) => {
     const buildDir = dtwo.options.buildDir;
-    const componentTypes = options.getComponents().map((c) => [
+    const componentTypes = options.getComponents().filter((c) => !c.island).map((c) => [
       c.pascalName,
       `typeof ${genDynamicImport(isAbsolute(c.filePath) ? relative(buildDir, c.filePath).replace(/(?<=\w)\.(?!kdu)\w+$/g, "") : c.filePath.replace(/(?<=\w)\.(?!kdu)\w+$/g, ""), { wrapper: false })}['${c.export}']`
     ]);
@@ -716,9 +744,10 @@ async function scanComponents(dirs, srcDir) {
         dir.pathPrefix !== false ? splitByCase(relative(dir.path, dirname(filePath))) : []
       );
       let fileName = basename(filePath, extname(filePath));
-      const global = /\.(global)$/.test(fileName) || dir.global;
-      const mode = fileName.match(/(?<=\.)(client|server)(\.global)?$/)?.[1] || "all";
-      fileName = fileName.replace(/(\.(client|server))?(\.global)?$/, "");
+      const island = /\.(island)(\.global)?$/.test(fileName) || dir.island;
+      const global = /\.(global)(\.island)?$/.test(fileName) || dir.global;
+      const mode = island ? "server" : fileName.match(/(?<=\.)(client|server)(\.global|\.island)*$/)?.[1] || "all";
+      fileName = fileName.replace(/(\.(client|server))?(\.global|\.island)*$/, "");
       if (fileName.toLowerCase() === "index") {
         fileName = dir.pathPrefix === false ? basename(dirname(filePath)) : "";
       }
@@ -744,10 +773,13 @@ async function scanComponents(dirs, srcDir) {
       const shortPath = relative(srcDir, filePath);
       const chunkName = "components/" + kebabName + suffix;
       let component = {
+        // inheritable from directory configuration
         mode,
         global,
+        island,
         prefetch: Boolean(dir.prefetch),
         preload: Boolean(dir.preload),
+        // specific to the file
         filePath,
         pascalName,
         kebabName,
@@ -787,6 +819,7 @@ function isKduTemplate(id) {
 const loaderPlugin = createUnplugin((options) => {
   const exclude = options.transform?.exclude || [];
   const include = options.transform?.include || [];
+  const serverComponentRuntime = resolve(distDir, "components/runtime/server-component");
   return {
     name: "dtwo:components-loader",
     enforce: "post",
@@ -810,6 +843,15 @@ const loaderPlugin = createUnplugin((options) => {
         if (component) {
           let identifier = map.get(component) || `__dtwo_component_${num++}`;
           map.set(component, identifier);
+          const isServerOnly = component.mode === "server" && !components.some((c) => c.pascalName === component.pascalName && c.mode === "client");
+          if (isServerOnly) {
+            imports.add(genImport(serverComponentRuntime, [{ name: "createServerComponent" }]));
+            imports.add(`const ${identifier} = createServerComponent(${JSON.stringify(name)})`);
+            if (!options.experimentalComponentIslands) {
+              console.warn(`Standalone server components (\`${name}\`) are not yet supported without enabling \`experimental.componentIslands\`.`);
+            }
+            return identifier;
+          }
           const isClientOnly = component.mode === "client";
           if (isClientOnly) {
             imports.add(genImport("#app/components/client-only", [{ name: "createClientOnly" }]));
@@ -845,10 +887,13 @@ const loaderPlugin = createUnplugin((options) => {
 function findComponent(components, name, mode) {
   const id = pascalCase(name).replace(/["']/g, "");
   const component = components.find((component2) => id === component2.pascalName && ["all", mode, void 0].includes(component2.mode));
-  if (!component && components.some((component2) => id === component2.pascalName)) {
-    return components.find((component2) => component2.pascalName === "ServerPlaceholder");
+  if (component) {
+    return component;
+  }
+  if (mode === "server" && !component) {
+    return components.find((c) => c.pascalName === "ServerPlaceholder");
   }
-  return component;
+  return components.find((component2) => id === component2.pascalName);
 }
 
 const PLACEHOLDER_RE = /^(k-slot|#)(fallback|placeholder)/;
@@ -912,7 +957,7 @@ const isDirectory = (p) => {
 function compareDirByPathLength({ path: pathA }, { path: pathB }) {
   return pathB.split(/[\\/]/).filter(Boolean).length - pathA.split(/[\\/]/).filter(Boolean).length;
 }
-const DEFAULT_COMPONENTS_DIRS_RE = /\/components$|\/components\/global$/;
+const DEFAULT_COMPONENTS_DIRS_RE = /\/components(\/global|\/islands)?$/;
 const componentsModule = defineDtwoModule({
   meta: {
     name: "components",
@@ -935,6 +980,7 @@ const componentsModule = defineDtwoModule({
       }
       if (dir === true || dir === void 0) {
         return [
+          { path: resolve(cwd, "components/islands"), island: true },
           { path: resolve(cwd, "components/global"), global: true },
           { path: resolve(cwd, "components") }
         ];
@@ -968,13 +1014,16 @@ const componentsModule = defineDtwoModule({
         return {
           global: componentOptions.global,
           ...dirOptions,
+          // TODO
           enabled: true,
           path: dirPath,
           extensions,
           pattern: dirOptions.pattern || `**/*.{${extensions.join(",")},}`,
           ignore: [
             "**/*{M,.m,-m}ixin.{js,ts,jsx,tsx}",
+            // ignore mixins
             "**/*.d.ts",
+            // .d.ts files
             ...dirOptions.ignore || []
           ],
           transpile: transpile === "auto" ? dirPath.includes("node_modules") : transpile
@@ -990,6 +1039,11 @@ const componentsModule = defineDtwoModule({
     addPluginTemplate({ ...componentsPluginTemplate, options: { getComponents } });
     addTemplate({ ...componentsTemplate, filename: "components.server.mjs", options: { getComponents, mode: "server" } });
     addTemplate({ ...componentsTemplate, filename: "components.client.mjs", options: { getComponents, mode: "client" } });
+    if (dtwo.options.experimental.componentIslands) {
+      addTemplate({ ...componentsIslandsTemplate, filename: "components.islands.mjs", options: { getComponents } });
+    } else {
+      addTemplate({ filename: "components.islands.mjs", getContents: () => "export default {}" });
+    }
     dtwo.hook("wite:extendConfig", (config, { isClient }) => {
       const mode = isClient ? "client" : "server";
       config.resolve.alias["#components"] = resolve(dtwo.options.buildDir, `components.${mode}.mjs`);
@@ -1049,7 +1103,8 @@ const componentsModule = defineDtwoModule({
       config.plugins.push(loaderPlugin.wite({
         sourcemap: dtwo.options.sourcemap[mode],
         getComponents,
-        mode
+        mode,
+        experimentalComponentIslands: dtwo.options.experimental.componentIslands
       }));
       if (dtwo.options.experimental.treeshakeClientOnly && isServer) {
         config.plugins.push(TreeShakeTemplatePlugin.wite({
@@ -1065,7 +1120,8 @@ const componentsModule = defineDtwoModule({
         config.plugins.push(loaderPlugin.webpack({
           sourcemap: dtwo.options.sourcemap[mode],
           getComponents,
-          mode
+          mode,
+          experimentalComponentIslands: dtwo.options.experimental.componentIslands
         }));
         if (dtwo.options.experimental.treeshakeClientOnly && mode === "server") {
           config.plugins.push(TreeShakeTemplatePlugin.webpack({
@@ -1116,12 +1172,16 @@ const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }) => {
 });
 
 const commonPresets = [
+  // #head
   defineKdimportPreset({
     from: "#head",
     imports: [
-      "useHead"
+      "useHead",
+      "useSeoMeta",
+      "useServerSeoMeta"
     ]
   }),
+  // kdu-demi (mocked)
   defineKdimportPreset({
     from: "kdu-demi",
     imports: [
@@ -1135,6 +1195,7 @@ const appPreset = defineKdimportPreset({
   imports: [
     "useAsyncData",
     "useLazyAsyncData",
+    "useDtwoData",
     "refreshDtwoData",
     "clearDtwoData",
     "defineDtwoComponent",
@@ -1149,14 +1210,13 @@ const appPreset = defineKdimportPreset({
     "useRequestEvent",
     "setResponseStatus",
     "setPageLayout",
+    "onDtwoReady",
     "useRouter",
     "useRoute",
-    "useActiveRoute",
     "defineDtwoRouteMiddleware",
     "navigateTo",
     "abortNavigation",
     "addRouteMiddleware",
-    "throwError",
     "showError",
     "clearError",
     "isDtwoError",
@@ -1184,12 +1244,14 @@ const routerPreset = defineKdimportPreset({
 const kduPreset = defineKdimportPreset({
   from: "kdu",
   imports: [
+    // <script setup>
     "withCtx",
     "withDirectives",
     "withKeys",
     "withMemo",
     "withModifiers",
     "withScopeId",
+    // Lifecycle
     "onActivated",
     "onBeforeMount",
     "onBeforeUnmount",
@@ -1202,6 +1264,7 @@ const kduPreset = defineKdimportPreset({
     "onServerPrefetch",
     "onUnmounted",
     "onUpdated",
+    // Reactivity
     "computed",
     "customRef",
     "isProxy",
@@ -1224,10 +1287,12 @@ const kduPreset = defineKdimportPreset({
     "watch",
     "watchEffect",
     "isShallow",
+    // effect
     "effect",
     "effectScope",
     "getCurrentScope",
     "onScopeDispose",
+    // Component
     "defineComponent",
     "defineAsyncComponent",
     "resolveComponent",
@@ -1264,19 +1329,21 @@ const importsModule = defineDtwoModule({
     transform: {
       include: [],
       exclude: void 0
-    }
+    },
+    virtualImports: ["#imports"]
   },
   async setup(options, dtwo) {
     const presets = JSON.parse(JSON.stringify(options.presets));
     await dtwo.callHook("imports:sources", presets);
     const ctx = createKdimport({
-      presets,
-      imports: options.imports,
-      virtualImports: ["#imports"],
+      ...options,
       addons: {
-        kduTemplate: options.autoImport
-      }
+        kduTemplate: options.autoImport,
+        ...options.addons
+      },
+      presets
     });
+    await dtwo.callHook("imports:context", ctx);
     let composablesDirs = [];
     for (const layer of dtwo.options._layers) {
       composablesDirs.push(resolve(layer.config.srcDir, "composables"));
@@ -1295,28 +1362,17 @@ const importsModule = defineDtwoModule({
       getContents: async () => await ctx.toExports() + '\nif (process.dev) { console.warn("[dtwo] `#imports` should be transformed with real imports. There seems to be something wrong with the imports plugin.") }'
     });
     dtwo.options.alias["#imports"] = join(dtwo.options.buildDir, "imports");
-    if (dtwo.options.dev && options.global) {
-      addPluginTemplate({
-        filename: "imports.mjs",
-        getContents: async () => {
-          const imports = await ctx.getImports();
-          const importStatement = toImports(imports);
-          const globalThisSet = imports.map((i) => `globalThis.${i.as} = ${i.as};`).join("\n");
-          return `${importStatement}
-
-${globalThisSet}
-
-export default () => {};`;
-        }
-      });
-    } else {
-      addWitePlugin(TransformPlugin.wite({ ctx, options, sourcemap: dtwo.options.sourcemap.server || dtwo.options.sourcemap.client }));
-      addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: dtwo.options.sourcemap.server || dtwo.options.sourcemap.client }));
-    }
+    addWitePlugin(TransformPlugin.wite({ ctx, options, sourcemap: dtwo.options.sourcemap.server || dtwo.options.sourcemap.client }));
+    addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: dtwo.options.sourcemap.server || dtwo.options.sourcemap.client }));
+    const priorities = dtwo.options._layers.map((layer, i) => [layer.config.srcDir, -i]).sort(([a], [b]) => b.length - a.length);
     const regenerateImports = async () => {
       ctx.clearDynamicImports();
       await ctx.modifyDynamicImports(async (imports) => {
-        imports.push(...await scanDirExports(composablesDirs));
+        const composableImports = await scanDirExports(composablesDirs);
+        for (const i of composableImports) {
+          i.priority = i.priority || priorities.find(([dir]) => i.from.startsWith(dir))?.[1];
+        }
+        imports.push(...composableImports);
         await dtwo.callHook("imports:extend", imports);
       });
     };
@@ -1370,7 +1426,7 @@ function addDeclarationTemplates(ctx, options) {
   });
 }
 
-const version = "3.0.0-rc.14";
+const version = "3.1.0-0";
 
 const _require = createRequire(import.meta.url);
 const kduAppPatterns = (dtwo) => [
@@ -1430,7 +1486,7 @@ const UnctxTransformPlugin = (dtwo) => {
     app = _app;
   });
   return createUnplugin((options = {}) => ({
-    name: "unctx:transfrom",
+    name: "unctx:transform",
     enforce: "post",
     transformInclude(id) {
       id = normalize(id).replace(/\?.*$/, "");
@@ -1451,7 +1507,7 @@ const UnctxTransformPlugin = (dtwo) => {
 const TreeShakePlugin = createUnplugin((options) => {
   const COMPOSABLE_RE = new RegExp(`($\\s+)(${options.treeShake.join("|")})(?=\\()`, "gm");
   return {
-    name: "dtwo:server-treeshake:transfrom",
+    name: "dtwo:server-treeshake:transform",
     enforce: "post",
     transformInclude(id) {
       const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
@@ -1483,9 +1539,9 @@ const TreeShakePlugin = createUnplugin((options) => {
 });
 
 const DevOnlyPlugin = createUnplugin((options) => {
-  const DEVONLY_COMP_RE = /<dev-?only>(:?[\s\S]*)<\/dev-?only>/gmi;
+  const DEVONLY_COMP_RE = /<(dev-only|DevOnly)>[\s\S]*?<\/(dev-only|DevOnly)>/g;
   return {
-    name: "dtwo:server-devonly:transfrom",
+    name: "dtwo:server-devonly:transform",
     enforce: "pre",
     transformInclude(id) {
       const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
@@ -1540,6 +1596,20 @@ async function initHole(dtwo) {
     srcDir: dtwo.options.serverDir,
     dev: dtwo.options.dev,
     buildDir: dtwo.options.buildDir,
+    imports: {
+      imports: [
+        {
+          as: "__buildAssetsURL",
+          name: "buildAssetsURL",
+          from: resolve(distDir, "core/runtime/hole/paths")
+        },
+        {
+          as: "__publicAssetsURL",
+          name: "publicAssetsURL",
+          from: resolve(distDir, "core/runtime/hole/paths")
+        }
+      ]
+    },
     esbuild: {
       options: {
         exclude: [
@@ -1591,6 +1661,7 @@ async function initHole(dtwo) {
           "@dtwo/",
           dtwo.options.buildDir
         ],
+        ...dtwo.options.build.transpile.filter((i) => typeof i === "string"),
         "dtwo/dist",
         "dtwo3/dist",
         distDir
@@ -1602,13 +1673,16 @@ async function initHole(dtwo) {
         "kdu/server-renderer": "kdu/server-renderer",
         kdu: await resolvePath(`kdu/dist/kdu.cjs${dtwo.options.dev ? "" : ".prod"}.js`)
       },
+      // Kdu 3 mocks
       "estree-walker": "unenv/runtime/mock/proxy",
       "@babel/parser": "unenv/runtime/mock/proxy",
       "@kdujs/compiler-core": "unenv/runtime/mock/proxy",
       "@kdujs/compiler-dom": "unenv/runtime/mock/proxy",
       "@kdujs/compiler-ssr": "unenv/runtime/mock/proxy",
       "@kdujs/devtools-api": "kdu-devtools-stub",
+      // Paths
       "#paths": resolve(distDir, "core/runtime/hole/paths"),
+      // Dtwo aliases
       ...dtwo.options.alias
     },
     replace: {
@@ -1617,10 +1691,12 @@ async function initHole(dtwo) {
       "process.env.DTWO_NO_SCRIPTS": !!dtwo.options.experimental.noScripts && !dtwo.options.dev,
       "process.env.DTWO_INLINE_STYLES": !!dtwo.options.experimental.inlineSSRStyles,
       "process.env.DTWO_PAYLOAD_EXTRACTION": !!dtwo.options.experimental.payloadExtraction,
+      "process.env.DTWO_COMPONENT_ISLANDS": !!dtwo.options.experimental.componentIslands,
       "process.dev": dtwo.options.dev,
       __KDU_PROD_DEVTOOLS__: false
     },
     rollupConfig: {
+      output: {},
       plugins: []
     }
   });
@@ -1634,6 +1710,8 @@ async function initHole(dtwo) {
   if (!dtwo.options.experimental.inlineSSRStyles) {
     holeConfig.virtual["#build/dist/server/styles.mjs"] = "export default {}";
   }
+  holeConfig.rollupConfig.plugins = await holeConfig.rollupConfig.plugins || [];
+  holeConfig.rollupConfig.plugins = Array.isArray(holeConfig.rollupConfig.plugins) ? holeConfig.rollupConfig.plugins : [holeConfig.rollupConfig.plugins];
   holeConfig.rollupConfig.plugins.push(
     ImportProtectionPlugin.rollup({
       rootDir: dtwo.options.rootDir,
@@ -1676,7 +1754,9 @@ async function initHole(dtwo) {
       await copyPublicAssets(hole);
       await prerender(hole);
       if (!dtwo.options._generate) {
+        logger.restoreAll();
         await build$1(hole);
+        logger.wrapAll();
       } else {
         const distDir2 = resolve(dtwo.options.rootDir, "dist");
         if (!existsSync(distDir2)) {
@@ -1705,6 +1785,126 @@ async function initHole(dtwo) {
   }
 }
 
+const schemaModule = defineDtwoModule({
+  meta: {
+    name: "dtwo-config-schema"
+  },
+  async setup(_, dtwo) {
+    if (!dtwo.options.experimental.configSchema) {
+      return;
+    }
+    const resolver = createResolver(import.meta.url);
+    const _resolveSchema = jiti(dirname(import.meta.url), {
+      esmResolve: true,
+      interopDefault: true,
+      cache: false,
+      requireCache: false,
+      transformOptions: {
+        babel: {
+          plugins: [untypedPlugin]
+        }
+      }
+    });
+    dtwo.hook("prepare:types", (ctx) => {
+      ctx.references.push({ path: "dtwo-config-schema" });
+      ctx.references.push({ path: "schema/dtwo.schema.d.ts" });
+    });
+    let schema;
+    dtwo.hook("modules:done", async () => {
+      schema = await resolveSchema$1();
+    });
+    dtwo.hooks.hook("build:done", async () => {
+      await dtwo.hooks.callHook("schema:beforeWrite", schema);
+      await writeSchema(schema);
+      await dtwo.hooks.callHook("schema:written");
+    });
+    if (dtwo.options.dev) {
+      const filesToWatch = await Promise.all(dtwo.options._layers.map(
+        (layer) => resolver.resolve(layer.config.rootDir, "dtwo.schema.*")
+      ));
+      const watcher = chokidar.watch(filesToWatch, {
+        ...dtwo.options.watchers.chokidar,
+        ignoreInitial: true
+      });
+      const onChange = debounce(async () => {
+        schema = await resolveSchema$1();
+        await dtwo.hooks.callHook("schema:beforeWrite", schema);
+        await writeSchema(schema);
+        await dtwo.hooks.callHook("schema:written");
+      });
+      watcher.on("all", onChange);
+      dtwo.hook("close", () => watcher.close());
+    }
+    async function resolveSchema$1() {
+      globalThis.defineDtwoSchema = (val) => val;
+      const schemaDefs = [dtwo.options.$schema];
+      for (const layer of dtwo.options._layers) {
+        const filePath = await resolver.resolvePath(resolve(layer.config.rootDir, "dtwo.schema"));
+        if (filePath && existsSync(filePath)) {
+          let loadedConfig;
+          try {
+            loadedConfig = _resolveSchema(filePath);
+          } catch (err) {
+            console.warn(
+              "[dtwo-config-schema] Unable to load schema from",
+              filePath,
+              err
+            );
+            continue;
+          }
+          schemaDefs.push(loadedConfig);
+        }
+      }
+      await dtwo.hooks.callHook("schema:extend", schemaDefs);
+      const schemas = await Promise.all(
+        schemaDefs.map((schemaDef) => resolveSchema(schemaDef))
+      );
+      const schema2 = defu$1(...schemas);
+      await dtwo.hooks.callHook("schema:resolved", schema2);
+      return schema2;
+    }
+    async function writeSchema(schema2) {
+      const isEmptySchema = !schema2.properties || Object.keys(schema2.properties).length === 0;
+      if (isEmptySchema) {
+        await rm(resolve(dtwo.options.buildDir, "schema"), { recursive: true }).catch(() => {
+        });
+        return;
+      }
+      await mkdir(resolve(dtwo.options.buildDir, "schema"), { recursive: true });
+      await writeFile(
+        resolve(dtwo.options.buildDir, "schema/dtwo.schema.json"),
+        JSON.stringify(schema2, null, 2),
+        "utf8"
+      );
+      const markdown = "# Dtwo Custom Config Schema" + generateMarkdown(schema2);
+      await writeFile(
+        resolve(dtwo.options.buildDir, "schema/dtwo.schema.md"),
+        markdown,
+        "utf8"
+      );
+      const _types = generateTypes(schema2, {
+        addExport: true,
+        interfaceName: "DtwoCustomSchema",
+        partial: true
+      });
+      const types = _types + `
+export type CustomAppConfig = Exclude<DtwoCustomSchema['appConfig'], undefined>
+
+declare module '@dtwo/schema' {
+  interface DtwoConfig extends DtwoCustomSchema {}
+  interface DtwoOptions extends DtwoCustomSchema {}
+  interface AppConfigInput extends CustomAppConfig {}
+  interface AppConfig extends CustomAppConfig {}
+}`;
+      const typesPath = resolve(
+        dtwo.options.buildDir,
+        "schema/dtwo.schema.d.ts"
+      );
+      await writeFile(typesPath, types, "utf8");
+    }
+  }
+});
+
 function createDtwo(options) {
   const hooks = createHooks();
   const dtwo = {
@@ -1741,6 +1941,7 @@ async function initDtwo(dtwo) {
   });
   const config = {
     rootDir: dtwo.options.rootDir,
+    // Exclude top-level resolutions by plugins
     exclude: [join(dtwo.options.rootDir, "index.html")],
     patterns: kduAppPatterns(dtwo)
   };
@@ -1808,6 +2009,12 @@ async function initDtwo(dtwo) {
     name: "DtwoLoadingIndicator",
     filePath: resolve(dtwo.options.appDir, "components/dtwo-loading-indicator")
   });
+  if (dtwo.options.experimental.componentIslands) {
+    addComponent({
+      name: "DtwoIsland",
+      filePath: resolve(dtwo.options.appDir, "components/dtwo-island")
+    });
+  }
   if (!dtwo.options.dev && dtwo.options.experimental.payloadExtraction) {
     addPlugin(resolve(dtwo.options.appDir, "plugins/payload.client"));
   }
@@ -1843,6 +2050,7 @@ async function loadDtwo(opts) {
       include: options._layers.filter((i) => i.cwd && i.cwd.includes("node_modules")).map((i) => new RegExp(`(^|\\/)${escapeRE(i.cwd.split("node_modules/").pop())}(\\/|$)(?!node_modules\\/)`))
     }
   }]);
+  options._modules.push(schemaModule);
   options.modulesDir.push(resolve(options.workspaceDir, "node_modules"));
   options.modulesDir.push(resolve(pkgDir, "node_modules"));
   options.build.transpile.push("@dtwo/ui-templates");
@@ -1959,13 +2167,16 @@ const schemaTemplate = {
       importName: m.entryPath || m.meta?.name
     })).filter((m) => m.configKey && m.name && !adHocModules.includes(m.name));
     const relativeRoot = relative(resolve(dtwo.options.buildDir, "types"), dtwo.options.rootDir);
+    const getImportName = (name) => (name.startsWith(".") ? "./" + join(relativeRoot, name) : name).replace(/\.\w+$/, "");
+    const modules = moduleInfo.map((meta) => [genString(meta.configKey), getImportName(meta.importName)]);
     return [
       "import { DtwoModule } from '@dtwo/schema'",
       "declare module '@dtwo/schema' {",
       "  interface DtwoConfig {",
-      ...moduleInfo.filter(Boolean).map(
-        (meta) => `    [${genString(meta.configKey)}]?: typeof ${genDynamicImport(meta.importName.startsWith(".") ? "./" + join(relativeRoot, meta.importName) : meta.importName, { wrapper: false })}.default extends DtwoModule<infer O> ? Partial<O> : Record<string, any>`
+      ...modules.map(
+        ([configKey, importName]) => `    [${configKey}]?: typeof ${genDynamicImport(importName, { wrapper: false })}.default extends DtwoModule<infer O> ? Partial<O> : Record<string, any>`
       ),
+      modules.length > 0 ? `    modules?: (DtwoModule | string | [DtwoModule | string, Record<string, any>] | ${modules.map(([configKey, importName]) => `[${genString(importName)}, DtwoConfig[${configKey}]]`).join(" | ")})[],` : "",
       "  }",
       generateTypes(
         await resolveSchema(Object.fromEntries(Object.entries(dtwo.options.runtimeConfig).filter(([key]) => key !== "public"))),
@@ -2066,6 +2277,7 @@ const publicPathTemplate = {
       "  const publicBase = appConfig.cdnURL || appConfig.baseURL",
       "  return path.length ? joinURL(publicBase, ...path) : publicBase",
       "}",
+      // On server these are registered directly in packages/dtwo/src/core/runtime/hole/renderer.ts
       "if (process.client) {",
       "  globalThis.__buildAssetsURL = buildAssetsURL",
       "  globalThis.__publicAssetsURL = publicAssetsURL",
@@ -2082,9 +2294,11 @@ const dtwoConfigTemplate = {
 function _resolveId(id) {
   return resolvePath$1(id, {
     url: [
+      // @ts-ignore
       global.__DTWO_PREPATHS__,
       import.meta.url,
       process.cwd(),
+      // @ts-ignore
       global.__DTWO_PATHS__
     ]
   });
@@ -2092,22 +2306,22 @@ function _resolveId(id) {
 
 const defaultTemplates = {
   __proto__: null,
-  kduShim: kduShim,
   appComponentTemplate: appComponentTemplate,
-  rootComponentTemplate: rootComponentTemplate,
-  errorComponentTemplate: errorComponentTemplate,
-  cssTemplate: cssTemplate,
+  appConfigDeclarationTemplate: appConfigDeclarationTemplate,
+  appConfigTemplate: appConfigTemplate,
+  clientConfigTemplate: clientConfigTemplate,
   clientPluginTemplate: clientPluginTemplate,
-  serverPluginTemplate: serverPluginTemplate,
-  pluginsDeclaration: pluginsDeclaration,
-  schemaTemplate: schemaTemplate,
+  cssTemplate: cssTemplate,
+  dtwoConfigTemplate: dtwoConfigTemplate,
+  errorComponentTemplate: errorComponentTemplate,
+  kduShim: kduShim,
   layoutTemplate: layoutTemplate,
   middlewareTemplate: middlewareTemplate,
-  clientConfigTemplate: clientConfigTemplate,
-  appConfigDeclarationTemplate: appConfigDeclarationTemplate,
-  appConfigTemplate: appConfigTemplate,
+  pluginsDeclaration: pluginsDeclaration,
   publicPathTemplate: publicPathTemplate,
-  dtwoConfigTemplate: dtwoConfigTemplate
+  rootComponentTemplate: rootComponentTemplate,
+  schemaTemplate: schemaTemplate,
+  serverPluginTemplate: serverPluginTemplate
 };
 
 function createApp(dtwo, options = {}) {
@@ -2143,7 +2357,10 @@ async function generateApp(dtwo, app, options = {}) {
 async function resolveApp(dtwo, app) {
   if (!app.mainComponent) {
     app.mainComponent = await findPath(
-      dtwo.options._layers.flatMap((layer) => [`${layer.config.srcDir}/App`, `${layer.config.srcDir}/app`])
+      dtwo.options._layers.flatMap((layer) => [
+        join(layer.config.srcDir, "App"),
+        join(layer.config.srcDir, "app")
+      ])
     );
   }
   if (!app.mainComponent) {
@@ -2153,7 +2370,9 @@ async function resolveApp(dtwo, app) {
     app.rootComponent = await findPath(["~/app.root", resolve(dtwo.options.appDir, "components/dtwo-root.kdu")]);
   }
   if (!app.errorComponent) {
-    app.errorComponent = await findPath(["~/error"]) || resolve(dtwo.options.appDir, "components/dtwo-error-page.kdu");
+    app.errorComponent = await findPath(
+      dtwo.options._layers.map((layer) => join(layer.config.srcDir, "error"))
+    ) ?? resolve(dtwo.options.appDir, "components/dtwo-error-page.kdu");
   }
   app.layouts = {};
   for (const config of dtwo.options._layers.map((layer) => layer.config)) {