@withl5e/l5e 1.1.0-alpha.0 → 1.1.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@withl5e/l5e",
-  "version": "1.1.0-alpha.0",
+  "version": "1.1.0-alpha.1",
   "description": "HTML-first SSR MPA framework with loaders, middleware, islands, actions, swap, SEO and cache controls.",
   "type": "module",
   "license": "MIT",
@@ -16,6 +16,8 @@
   "sideEffects": [
     "**/island/runtime.ts",
     "**/island/runtime.js",
+    "**/island/compact-runtime.ts",
+    "**/island/compact-runtime.js",
     "**/*.css"
   ],
   "exports": {
@@ -79,6 +81,10 @@
       "types": "./src/island/runtime.ts",
       "default": "./dist/island/runtime.js"
     },
+    "./island/compact-runtime": {
+      "types": "./src/island/compact-runtime.ts",
+      "default": "./dist/island/compact-runtime.js"
+    },
     "./router": {
       "types": "./src/router/index.ts",
       "default": "./dist/router.js"

package/src/core/bundler.ts

@@ -43,6 +43,16 @@ interface BundleResult {
   content: string;
 }
 
+export interface ScriptBundleOptions {
+  compact?: boolean;
+  islands?: Array<{ key: string; script: string }>;
+  renderer?: string;
+  name?: 'global' | 'bundle' | 'shared';
+  sharedUrl?: string;
+  globalUrl?: string;
+  exportScripts?: string[];
+}
+
 const EMPTY_RESULT: BundleResult = { hash: '', filename: '', content: '' };
 
 // Memory map để lưu bundled files
@@ -120,22 +130,78 @@ function preserveBuildChunksPlugin(policy: ScriptBundlePolicy): Plugin {
   };
 }
 
+function compactBuildPlugin(
+  policy: ScriptBundlePolicy,
+  sharedUrl?: string,
+  globalUrl?: string,
+): Plugin {
+  return {
+    name: 'compact-build-graph',
+    resolveId(source, importer) {
+      if (!importer || source === VIRTUAL_ENTRY_ID) return null;
+      const file = path.isAbsolute(source)
+        ? path.normalize(source)
+        : source.startsWith('/')
+          ? policy.fileForAssetUrl(source)
+        : source.startsWith('.')
+          ? path.resolve(path.dirname(importer), source)
+          : null;
+      if (!file) return null;
+      return policy.isShared(file) && sharedUrl
+        ? { id: sharedUrl, external: 'absolute' }
+        : policy.isGlobalOwned(file) && globalUrl
+          ? { id: globalUrl, external: 'absolute' }
+        : { id: file };
+    },
+  };
+}
+
 async function runScriptBundle(
   uniquePaths: string[],
   policy: ScriptBundlePolicy,
+  options: ScriptBundleOptions = {},
 ): Promise<BundleResult> {
   const roots = uniquePaths.map((p) => policy.fileForScript(p));
+  const compact = options.compact && policy.compact;
   const suffix = policy.inlineableRoots(roots);
   const prefixChunks = new Map(
     roots.flatMap((file, index) =>
       !policy.isPreserved(file) && !suffix.has(file) ? [[file, `entry-${index}`] as const] : [],
     ),
   );
-  const entryContent = roots.map((filePath) => `import ${JSON.stringify(filePath)};`).join('\n');
+  const islands = (options.islands || []).map(({ key, script }) => ({
+    key,
+    file: policy.fileForScript(script),
+  }));
+  const renderer = options.renderer ? policy.fileForScript(options.renderer) : undefined;
+  const exportFiles = (options.exportScripts || []).map((script) => policy.fileForScript(script));
+  const entryContent = [
+    ...roots.map((filePath) =>
+      options.name === 'shared'
+        ? `export * from ${JSON.stringify(filePath)};`
+        : `import ${JSON.stringify(filePath)};`,
+    ),
+    ...exportFiles.map((filePath) => `export * from ${JSON.stringify(filePath)};`),
+    ...(islands.length
+      ? [
+          'globalThis.__L5E_ISLANDS__ ||= {};',
+          ...islands.map(
+            ({ key, file }) =>
+              `globalThis.__L5E_ISLANDS__[${JSON.stringify(key)}] = async () => { const [renderer, module] = await Promise.all([import(${JSON.stringify(renderer)}), import(${JSON.stringify(file)})]); return { reactDomClient: renderer.reactDomClient, createElement: renderer.createElement, module }; };`,
+          ),
+          'globalThis.__L5E_BOOT_ISLANDS__?.();',
+        ]
+      : []),
+  ].join('\n');
 
   const rolldownOptions: InputOptions = {
     input: VIRTUAL_ENTRY_ID,
-    plugins: [virtualEntryPlugin(entryContent), preserveBuildChunksPlugin(policy)],
+    plugins: [
+      virtualEntryPlugin(entryContent),
+      compact
+        ? compactBuildPlugin(policy, options.sharedUrl, options.globalUrl)
+        : preserveBuildChunksPlugin(policy),
+    ],
     platform: 'neutral',
     tsconfig: false,
     // Runtime scripts are imported for their side effects. Do not let an app's
@@ -156,9 +222,12 @@ async function runScriptBundle(
 
   const outputOptions: OutputOptions = {
     format: 'es',
-    codeSplitting: { groups: [{ name: (id) => prefixChunks.get(id) ?? null }] },
+    codeSplitting: compact
+      ? false
+      : { groups: [{ name: (id) => prefixChunks.get(id) ?? null }] },
     minify: false,
-    entryFileNames: 'bundle-[hash].js',
+    entryFileNames: `${options.name || 'bundle'}-[hash].js`,
+    strictExecutionOrder: compact,
     chunkFileNames: `bundle-${generateHash(JSON.stringify(roots))}-[hash].js`,
   };
 
@@ -206,6 +275,7 @@ export async function bundleScripts(
   scriptPaths: string[],
   distClientDir: string,
   policy?: ScriptBundlePolicy,
+  options: ScriptBundleOptions = {},
 ): Promise<BundleResult> {
   if (scriptPaths.length === 0) {
     return EMPTY_RESULT;
@@ -217,10 +287,10 @@ export async function bundleScripts(
   }
 
   const uniquePaths = [...new Set(scriptPaths)];
-  const cacheKey = `scripts:${policy.cacheKey}:${JSON.stringify(uniquePaths)}`;
+  const cacheKey = `scripts:${policy.cacheKey}:${JSON.stringify([uniquePaths, options])}`;
 
   try {
-    return await dedupe(cacheKey, () => runScriptBundle(uniquePaths, policy));
+    return await dedupe(cacheKey, () => runScriptBundle(uniquePaths, policy, options));
   } catch (error) {
     console.error('[bundler] Error bundling scripts:', error);
     return EMPTY_RESULT;

package/src/core/chunking.ts

@@ -14,6 +14,11 @@ export interface SharedChunkGroup {
 }
 
 export interface ChunkingOptions {
+  /**
+   * Opt in to at most one global, one page bundle and one canonical shared file.
+   * State that must retain identity across page bundles must be listed in `shared`.
+   */
+  mode?: 'compact';
   shared?: SharedChunkGroup[];
 }
 
@@ -38,6 +43,9 @@ type Decision = { group: string | null; rule?: string; consumers: string[]; reas
 /** One build-time plan drives placement and the diagnostic report. Runtime reads Vite's manifest. */
 export function createChunkPlanner(options: ChunkingOptions = {}) {
   const rules = options.shared || [];
+  if (options.mode === 'compact' && rules.length > 1) {
+    throw new Error('[l5e chunking] Compact mode accepts one canonical shared group.');
+  }
   const names = new Set<string>();
   for (const rule of rules) {
     if (!/^[a-zA-Z0-9][a-zA-Z0-9_-]*$/.test(rule.name) || names.has(rule.name)) {
@@ -49,6 +57,11 @@ export function createChunkPlanner(options: ChunkingOptions = {}) {
     if (rule.maxSize !== undefined && (!Number.isFinite(rule.maxSize) || rule.maxSize <= 0)) {
       throw new Error(`[l5e chunking] Invalid maxSize for ${rule.name}`);
     }
+    if (options.mode === 'compact' && rule.maxSize !== undefined) {
+      throw new Error(
+        `[l5e chunking] Compact mode cannot use maxSize for ${rule.name}; it would split the canonical shared file.`,
+      );
+    }
     names.add(rule.name);
   }
   let root = '';
@@ -83,6 +96,39 @@ export function createChunkPlanner(options: ChunkingOptions = {}) {
     analyze(modules: ModuleInfo[]) {
       decisions.clear();
       const graph = new Map(modules.map((mod) => [mod.id, mod]));
+      if (options.mode === 'compact') {
+        const reachability = new Map<string, Map<string, boolean>>();
+        for (const entry of modules.filter((mod) => mod.isEntry)) {
+          const visit = (id: string, lazy: boolean) => {
+            const owners = reachability.get(id) || new Map<string, boolean>();
+            const previous = owners.get(entry.id);
+            if (previous === false || previous === lazy) return;
+            owners.set(entry.id, lazy);
+            reachability.set(id, owners);
+            const module = graph.get(id);
+            if (!module) return;
+            module.importedIds.forEach((dependency) => visit(dependency, lazy));
+            module.dynamicallyImportedIds.forEach((dependency) => visit(dependency, true));
+          };
+          visit(entry.id, false);
+        }
+        const globalEntry = modules.find(
+          (mod) => mod.isEntry && normalize(mod.id).endsWith('/src/client.global.ts'),
+        );
+        if (globalEntry) {
+          for (const [id, owners] of reachability) {
+            if (
+              !/\.css(?:\?|$)/.test(normalize(id)) &&
+              owners.get(globalEntry.id) === true &&
+              [...owners.keys()].some((owner) => owner !== globalEntry.id)
+            ) {
+              throw new Error(
+                `[l5e chunking] Compact mode cannot bridge a dynamic-only global overlap: ${portable(id)}. Import it statically from global or place state behind an explicit shared root.`,
+              );
+            }
+          }
+        }
+      }
       const roots = modules.filter((mod) => mod.isEntry || mod.dynamicImporters.length > 0);
       const consumers = new Map<string, Set<string>>();
       for (const entry of roots) {
@@ -133,9 +179,17 @@ export function createChunkPlanner(options: ChunkingOptions = {}) {
             tier === 3
               ? `lazy-${digest(JSON.stringify(labels))}`
               : ['global', 'page', 'island'][tier];
-          group = `shared-${matches[0].name}-${activation}`;
+          group = options.mode === 'compact' ? 'shared' : `shared-${matches[0].name}-${activation}`;
           reason = `Configured group ${matches[0].name}; activation ${activation}.`;
-        } else if (!mod.isEntry && users.length > 1) {
+        } else if (
+          options.mode === 'compact' &&
+          !mod.isEntry &&
+          users.some((id) => rank(id) === 0) &&
+          users.some((id) => rank(id) > 0)
+        ) {
+          group = 'global-owner';
+          reason = 'Static global/page overlap is exported by the canonical global artifact.';
+        } else if (options.mode !== 'compact' && !mod.isEntry && users.length > 1) {
           group = `shared-auto-${digest(JSON.stringify(labels))}`;
           reason = 'Shared by the same static consumers; preserves dynamic import roots.';
         }
@@ -155,7 +209,7 @@ export function createChunkPlanner(options: ChunkingOptions = {}) {
             return decision?.rule === rule.name ? decision.group : null;
           },
           maxSize: rule.maxSize,
-          includeDependenciesRecursively: false,
+          includeDependenciesRecursively: options.mode === 'compact',
         })),
         {
           name: (id: string) => decisions.get(id)?.group || null,
@@ -165,7 +219,8 @@ export function createChunkPlanner(options: ChunkingOptions = {}) {
     },
     report(bundle: OutputBundle) {
       return {
-        version: 1,
+        version: 2,
+        mode: options.mode || 'default',
         warnings: [...warnings],
         chunks: Object.values(bundle).flatMap((chunk) => {
           if (chunk.type !== 'chunk') return [];
@@ -182,6 +237,8 @@ export function createChunkPlanner(options: ChunkingOptions = {}) {
             {
               file: chunk.fileName,
               kind,
+              canonicalShared: options.mode === 'compact' && chunk.name === 'shared',
+              canonicalGlobal: options.mode === 'compact' && chunk.name === 'global-owner',
               source,
               bytes: Buffer.byteLength(chunk.code),
               imports: chunk.imports,

package/src/core/script-bundle-policy.ts

@@ -5,7 +5,22 @@ import type { Manifest } from 'vite';
 import { withAssetBase } from './global-style';
 
 /** Preserve the emitted module boundaries chosen by the application's build. */
-export function createScriptBundlePolicy(manifest: Manifest, distClientDir: string, base = '/') {
+export interface ChunkingReport {
+  mode?: string;
+  chunks?: Array<{
+    file: string;
+    kind: string;
+    canonicalShared?: boolean;
+    canonicalGlobal?: boolean;
+  }>;
+}
+
+export function createScriptBundlePolicy(
+  manifest: Manifest,
+  distClientDir: string,
+  base = '/',
+  report?: ChunkingReport,
+) {
   const directory = path.resolve(distClientDir);
   // Rolldown resolves entry importers through symlinks/junctions. Use the same
   // physical directory for identity while retaining the caller's output scope.
@@ -29,6 +44,17 @@ export function createScriptBundlePolicy(manifest: Manifest, distClientDir: stri
     return absolute;
   }
 
+  const shared = new Set(
+    (report?.chunks || [])
+      .filter((chunk) => report?.mode === 'compact' && chunk.canonicalShared)
+      .map((chunk) => absoluteFile(chunk.file)),
+  );
+  const globalOwned = new Set(
+    (report?.chunks || [])
+      .filter((chunk) => report?.mode === 'compact' && chunk.canonicalGlobal)
+      .map((chunk) => absoluteFile(chunk.file)),
+  );
+
   for (const [key, entry] of jsEntries) {
     const file = absoluteFile(entry.file);
     files.add(file);
@@ -63,15 +89,44 @@ export function createScriptBundlePolicy(manifest: Manifest, distClientDir: stri
 
   return {
     cacheKey,
+    compact: report?.mode === 'compact',
     directory,
     fileForScript(script: string) {
-      const file = absoluteFile(script.replace(/^\/+/, ''));
+      const normalizedBase = base === '/' ? '/' : `/${base.replace(/^\/+|\/+$/g, '')}/`;
+      const relative = script.startsWith(normalizedBase)
+        ? script.slice(normalizedBase.length)
+        : script.replace(/^\/+/, '');
+      const file = absoluteFile(relative);
       if (!files.has(file)) throw new Error(`[bundler] Script is missing from manifest: ${script}`);
       return file;
     },
+    fileForAssetUrl(url: string) {
+      const normalizedBase = base === '/' ? '/' : `/${base.replace(/^\/+|\/+$/g, '')}/`;
+      const relative = url.startsWith(normalizedBase)
+        ? url.slice(normalizedBase.length)
+        : url.replace(/^\/+/, '');
+      const file = absoluteFile(relative);
+      return files.has(file) ? file : undefined;
+    },
     isPreserved(file: string) {
       return preserved.has(file);
     },
+    isShared(file: string) {
+      return shared.has(file);
+    },
+    isGlobalOwned(file: string) {
+      return globalOwned.has(file);
+    },
+    sharedScripts() {
+      return [...shared].map((file) =>
+        withAssetBase(base, path.relative(assetDirectory, file).replace(/\\/g, '/')),
+      );
+    },
+    globalOwnedScripts() {
+      return [...globalOwned].map((file) =>
+        withAssetBase(base, path.relative(assetDirectory, file).replace(/\\/g, '/')),
+      );
+    },
     inlineableRoots(roots: string[]) {
       // External ESM imports execute before any inlined body. Isolate prefix
       // roots in runtime chunks when a later root introduces a dependency effect;

package/src/core/server.ts

@@ -10,7 +10,11 @@ import { createContext, type MiddlewareHandler, type RewritePayload } from '../m
 import { bundleCss, bundleScripts, getBundledFile } from './bundler';
 import type { RenderResult, RequestInfo } from './entry-server';
 import { resolveGlobalStyleHref, withAssetBase } from './global-style';
-import { createScriptBundlePolicy, type ScriptBundlePolicy } from './script-bundle-policy';
+import {
+  createScriptBundlePolicy,
+  type ChunkingReport,
+  type ScriptBundlePolicy,
+} from './script-bundle-policy';
 import type { Manifest } from 'vite';
 import { escapeProp } from './render';
 import { createHeadersFromExpressRequest, parseCookies } from './request';
@@ -281,6 +285,43 @@ async function createPageResponse({
   }
 
   if (isProduction && manifest) {
+    let compactSharedUrl: string | undefined;
+    let compactGlobalUrl: string | undefined;
+    if (scriptPolicy?.compact) {
+      const sharedScripts = scriptPolicy.sharedScripts();
+      if (sharedScripts.length > 1) {
+        throw new Error('[l5e chunking] Compact build has more than one canonical shared root.');
+      }
+      if (sharedScripts.length === 1) {
+        const bundledShared = await bundleScripts(sharedScripts, distClientDir, scriptPolicy, {
+          compact: true,
+          name: 'shared',
+        });
+        if (!bundledShared.filename) {
+          throw new Error('[l5e chunking] Compact shared bundle failed.');
+        }
+        compactSharedUrl = withAssetBase(assetBase, bundledShared.filename);
+      }
+      const compactGlobalEntry = manifest['src/client.global.ts'];
+      if (compactGlobalEntry?.file) {
+        const bundledGlobal = await bundleScripts(
+          [`/${compactGlobalEntry.file}`],
+          distClientDir,
+          scriptPolicy,
+          {
+            compact: true,
+            name: 'global',
+            sharedUrl: compactSharedUrl,
+            exportScripts: scriptPolicy.globalOwnedScripts(),
+          },
+        );
+        if (!bundledGlobal.filename) {
+          throw new Error('[l5e chunking] Compact global bundle failed.');
+        }
+        compactGlobalUrl = withAssetBase(assetBase, bundledGlobal.filename);
+        globalScripts.push(compactGlobalUrl);
+      }
+    }
     scriptSrcList = scriptSrcList.filter(
       (src) => src.replace(/^\//, '') !== 'src/client.global.ts',
     );
@@ -321,8 +362,28 @@ async function createPageResponse({
       }
     }
 
-    if (mappedScripts.length > 0) {
-      const bundledScript = await bundleScripts(mappedScripts, distClientDir, scriptPolicy);
+    if (mappedScripts.length > 0 || (scriptPolicy?.compact && islandEntries.length > 0)) {
+      const compactIslands = scriptPolicy?.compact
+        ? islandEntries.flatMap((island) => {
+            const entry = manifest[island.src];
+            return entry?.file ? [{ key: island.key, script: `/${entry.file}` }] : [];
+          })
+        : [];
+      const compactRenderer = scriptPolicy?.compact
+        ? Object.entries(manifest).find(([key]) => key.includes('l5e-compact-renderer'))?.[1]
+            ?.file
+        : undefined;
+      if (scriptPolicy?.compact && compactIslands.length > 0 && !compactRenderer) {
+        throw new Error('[l5e chunking] Compact renderer entry is missing from the manifest.');
+      }
+      const bundledScript = await bundleScripts(mappedScripts, distClientDir, scriptPolicy, {
+        compact: scriptPolicy?.compact,
+        islands: compactIslands,
+        name: 'bundle',
+        sharedUrl: compactSharedUrl,
+        renderer: compactRenderer ? `/${compactRenderer}` : undefined,
+        globalUrl: compactGlobalUrl,
+      });
       scriptSrcList = bundledScript.filename
         ? [withAssetBase(assetBase, bundledScript.filename)]
         : mappedScripts.map((file) => withAssetBase(assetBase, file));
@@ -349,15 +410,20 @@ async function createPageResponse({
         });
       }
       if (globalEntry.file) {
-        globalScripts.push(withAssetBase(assetBase, globalEntry.file));
+        if (scriptPolicy?.compact) {
+          // The compact global is built before the page bundle so page imports
+          // can target its live export bridge.
+        } else {
+          globalScripts.push(withAssetBase(assetBase, globalEntry.file));
+        }
       }
     }
 
-    for (const file of preloadFiles) {
+    for (const file of scriptPolicy?.compact ? [] : preloadFiles) {
       extraHead += `<link rel="modulepreload" crossorigin href="${escapeProp(withAssetBase(assetBase, file))}">`;
     }
 
-    if (islandEntries.length > 0) {
+    if (islandEntries.length > 0 && !scriptPolicy?.compact) {
       const islandMap: Record<string, string> = {};
       for (const island of islandEntries) {
         const entry = manifest[island.src];
@@ -497,7 +563,17 @@ export async function createServer(options: ServerOptions = {}): Promise<ServerC
   let scriptPolicy: ScriptBundlePolicy | undefined;
   if (productionManifest) {
     try {
-      scriptPolicy = createScriptBundlePolicy(productionManifest, distClientDir, base);
+      let chunkingReport: ChunkingReport | undefined;
+      const reportPath = path.join(distClientDir, '.vite/l5e-chunks.json');
+      if (existsSync(reportPath)) {
+        chunkingReport = JSON.parse(await fs.readFile(reportPath, 'utf-8'));
+      }
+      scriptPolicy = createScriptBundlePolicy(
+        productionManifest,
+        distClientDir,
+        base,
+        chunkingReport,
+      );
     } catch (error) {
       console.warn('[bundler] Invalid build manifest; serving original script entries.', error);
     }
@@ -536,11 +612,16 @@ export async function createServer(options: ServerOptions = {}): Promise<ServerC
     // Route để serve bundled files từ memory map
     // Đặt route này trước route HTML để catch request trước
     app.get(
-      withAssetBase(base, 'bundle-:hash.:ext'),
+      [
+        withAssetBase(base, 'global-:hash.:ext'),
+        withAssetBase(base, 'bundle-:hash.:ext'),
+        withAssetBase(base, 'shared-:hash.:ext'),
+      ],
       async (req: ExpressRequest, res: ExpressResponse) => {
         try {
           const { hash, ext } = req.params;
-          const filename = `bundle-${hash}.${ext}`;
+          const kind = path.basename(req.path).split('-', 1)[0];
+          const filename = `${kind}-${hash}.${ext}`;
           const bundledFile = getBundledFile(filename);
 
           if (!bundledFile) {

package/src/core/vite-plugin.ts

@@ -20,6 +20,7 @@ const VIRTUAL_L5E_SSR_ENTRY = 'virtual:l5e-ssr-entry';
 const VIRTUAL_L5E_GLOBAL_LOADER = 'virtual:l5e-global-loader';
 const VIRTUAL_L5E_ISLAND_STRATEGIES = 'virtual:l5e-island-strategies';
 const VIRTUAL_L5E_ISLANDS = 'virtual:l5e-islands';
+const VIRTUAL_L5E_COMPACT_RENDERER = 'virtual:l5e-compact-renderer';
 const VIRTUAL_L5E_ACTIONS = 'virtual:l5e-actions';
 const VIRTUAL_L5E_MIDDLEWARE = 'virtual:l5e-middleware';
 
@@ -575,9 +576,20 @@ export function coreVite(options: CoreViteOptions = {}): Plugin {
         typeof existingInput === 'object' && !Array.isArray(existingInput)
           ? { ...discovered.input, ...existingInput }
           : discovered.input;
+      if (options.chunking && options.chunking.mode === 'compact') {
+        mergedInput['l5e-compact-renderer'] = VIRTUAL_L5E_COMPACT_RENDERER;
+      }
 
       return {
         build: {
+          ...(options.chunking && options.chunking.mode === 'compact'
+            ? {
+                modulePreload: {
+                  resolveDependencies: (_filename: string, dependencies: string[]) =>
+                    dependencies.filter((dependency) => !/\.[cm]?js(?:\?|$)/.test(dependency)),
+                },
+              }
+            : {}),
           rolldownOptions: {
             ...userConfig.build?.rolldownOptions,
             input: Object.keys(mergedInput).length > 0 ? mergedInput : undefined,
@@ -604,6 +616,8 @@ export function coreVite(options: CoreViteOptions = {}): Plugin {
                     chunkFileNames: (chunk) =>
                       chunk.name.startsWith('shared-')
                         ? 'assets/[name]-[hash].js'
+                        : chunk.name === 'shared'
+                          ? 'assets/shared-[hash].js'
                         : chunk.isDynamicEntry
                           ? 'assets/bundle-[name]-[hash].js'
                           : 'assets/shared-[name]-[hash].js',
@@ -634,6 +648,9 @@ export function coreVite(options: CoreViteOptions = {}): Plugin {
       if (id === VIRTUAL_L5E_ISLANDS) {
         return '\0' + VIRTUAL_L5E_ISLANDS;
       }
+      if (id === VIRTUAL_L5E_COMPACT_RENDERER) {
+        return '\0' + VIRTUAL_L5E_COMPACT_RENDERER;
+      }
       if (id === VIRTUAL_L5E_ACTIONS) {
         return '\0' + VIRTUAL_L5E_ACTIONS;
       }
@@ -643,18 +660,18 @@ export function coreVite(options: CoreViteOptions = {}): Plugin {
       return null;
     },
 
-    async transform(code, id, options) {
+    async transform(code, id, transformOptions) {
       // Auto-inject island runtime into client.global.ts so it's always loaded globally
-      if (id.replace(/\\/g, '/').endsWith('src/client.global.ts') && !options?.ssr) {
+      if (id.replace(/\\/g, '/').endsWith('src/client.global.ts') && !transformOptions?.ssr) {
         return {
-          code: `import '@withl5e/l5e/island/runtime';\n${code}`,
+          code: `import '@withl5e/l5e/island/${options.chunking && options.chunking.mode === 'compact' ? 'compact-runtime' : 'runtime'}';\n${code}`,
           map: null,
         };
       }
 
       // Client-side action transform: replace defineAction exports with fetch stubs
       // Supports actions anywhere under src/ (e.g., src/views/*, src/features/*, etc.)
-      if (!options?.ssr) {
+      if (!transformOptions?.ssr) {
         const normalizedId = id.replace(/\\/g, '/');
         const actionMatch = normalizedId.match(/\/src\/(.+)\/actions\.(ts|tsx)$/);
         if (actionMatch) {
@@ -752,7 +769,7 @@ export function coreVite(options: CoreViteOptions = {}): Plugin {
       // Server side có thể access tất cả env variables
       // Client side chỉ access được VITE_ env variables
       // Transform này chạy ở runtime khi module được load trong SSR context
-      if (options?.ssr) {
+      if (transformOptions?.ssr) {
         let transformedCode = code;
         let hasChanges = false;
 
@@ -882,6 +899,9 @@ export async function loadMiddleware() {
       if (id === '\0' + VIRTUAL_L5E_ISLANDS) {
         return `export const islandModules = import.meta.glob('/src/**/react/*.{tsx,jsx}');`;
       }
+      if (id === '\0' + VIRTUAL_L5E_COMPACT_RENDERER) {
+        return `export * as reactDomClient from 'react-dom/client'; export { createElement } from 'react';`;
+      }
 
       // Virtual module: l5e-island-strategies
       if (id === '\0' + VIRTUAL_L5E_ISLAND_STRATEGIES) {