perf: Island lazy loading v2 (fixed __lazy init + no TS in JS)

Author: SisyphusZheng

deno.lock

@@ -1,7 +1,7 @@
 /**
  * @kissjs/core - entry-generators.ts tests (Deno)
  *
- * v0.5.0: Simplified client entry — no hydration strategies, no Lit imports.
+ * v0.5.0: IntersectionObserver lazy loading.
  */
 import { assertEquals, assertExists, assertFalse } from 'jsr:@std/assert@^1.0.0';
 import { generateClientEntry } from '../src/entry-generators.ts';
@@ -18,85 +18,49 @@ const PACKAGE_ISLAND = {
   isPackage: true as const,
 };
 
-// ─── Empty Islands ──────────────────────────────────────────
-
-Deno.test('generateClientEntry returns no-op for empty islands', () => {
+Deno.test('empty islands → zero client JS', () => {
   const code = generateClientEntry([]);
   assertExists(code.includes('zero client JS needed'));
 });
 
-// ─── Local Island Registration ─────────────────────────────
-
-Deno.test('generateClientEntry registers local island via dynamic import', () => {
+Deno.test('local island in lazy map', () => {
   const code = generateClientEntry([LOCAL_ISLAND]);
   assertExists(code.includes("import('./islands/my-counter.ts')"));
-  assertFalse(
-    code.includes("import Island_0 from './islands/my-counter.ts'"),
-    'Local islands must use dynamic import()',
-  );
 });
 
-// ─── Package Island Dynamic Import ─────────────────────────
-
-Deno.test('generateClientEntry uses dynamic import for package islands', () => {
+Deno.test('package island in lazy map', () => {
   const code = generateClientEntry([PACKAGE_ISLAND]);
   assertExists(code.includes("import('@kissjs/ui/kiss-theme-toggle')"));
-  // Should be dynamic import(), not static import
-  assertExists(code.match(/import\s*\(/));
-  assertFalse(
-    code.includes(`import '${PACKAGE_ISLAND.modulePath}'`),
-    'Package islands must use dynamic import()',
-  );
 });
 
-// ─── Mixed Islands ─────────────────────────────────────────
-
-Deno.test('generateClientEntry handles mixed local and package islands', () => {
+Deno.test('mixed islands', () => {
   const code = generateClientEntry([LOCAL_ISLAND, PACKAGE_ISLAND]);
-
   assertExists(code.includes("import('./islands/my-counter.ts')"));
   assertExists(code.includes("import('@kissjs/ui/kiss-theme-toggle')"));
-
-  assertFalse(
-    code.includes("import Island_0 from './islands/my-counter.ts'"),
-    'Local islands must use dynamic import()',
-  );
 });
 
-// ─── No Lit Hydration ──────────────────────────────────────
-
-Deno.test('generateClientEntry has no Lit hydration imports', () => {
+Deno.test('no Lit hydration', () => {
   const code = generateClientEntry([LOCAL_ISLAND]);
-  // v0.5.0: No Lit hydration — CE spec handles element upgrade
   assertEquals(code.includes('lit-element-hydrate-support'), false);
-  assertEquals(code.includes('litElementHydrateSupport'), false);
   assertEquals(code.includes('LitElement'), false);
-  assertEquals(code.includes('defer-hydration'), false);
-  assertEquals(code.includes('__kissFindDeferred'), false);
-  assertEquals(code.includes('__kissHydrateAll'), false);
 });
 
-// ─── whenDefined List ──────────────────────────────────────
-
-Deno.test('generateClientEntry creates whenDefined list for all islands', () => {
-  const code = generateClientEntry([
-    LOCAL_ISLAND,
-    { ...PACKAGE_ISLAND },
-    { tagName: 'code-block', modulePath: './islands/code-block.ts', isPackage: false },
-  ]);
-
-  assertExists(code.includes("customElements.whenDefined('my-counter')"));
-  assertExists(code.includes("customElements.whenDefined('kiss-theme-toggle')"));
-  assertExists(code.includes("'code-block'"));
+Deno.test('IntersectionObserver + lazy map', () => {
+  const code = generateClientEntry([LOCAL_ISLAND, PACKAGE_ISLAND]);
+  assertExists(code.includes('IntersectionObserver'));
+  assertExists(code.includes("'my-counter': () => import('./islands/my-counter.ts')"));
+  assertExists(code.includes("'kiss-theme-toggle': () => import('@kissjs/ui/kiss-theme-toggle')"));
 });
 
-// ─── kiss:ready Event ──────────────────────────────────────
-
-Deno.test('generateClientEntry dispatches kiss:ready event', () => {
+Deno.test('kiss:ready event', () => {
   const code = generateClientEntry([LOCAL_ISLAND]);
-
-  // v0.5.0: dispatches kiss:ready instead of hydration ceremony
   assertExists(code.includes('kiss:ready'));
-  assertExists(code.includes('customElements.whenDefined'));
-  assertExists(code.includes('Promise.all'));
+  assertExists(code.includes('IntersectionObserver'));
+
+  // Validate JS syntax — generated code must be clean JavaScript
+  try {
+    new Function(code);
+  } catch (e) {
+    assertEquals(true, false, `Generated JS has syntax error: ${String(e)}`);
+  }
 });

packages/kiss-core/__tests__/entry-generators.test.ts

@@ -3,87 +3,64 @@
  *
  * Pure functions that generate client entry code strings.
  *
- * v0.5.0: Simplified client entry.
- * No Lit hydration, no defer-hydration, no <!--lit-part--> markers.
- * Custom Elements upgrade naturally via the browser's CE spec.
- *
- * Client lifecycle:
- *   1. Browser parses SSR HTML → DSD Shadow DOM attached automatically
- *   2. This script loads → dynamic import() all island modules
- *   3. Each module's side-effect calls customElements.define()
- *   4. Browser automatically upgrades all existing <tag> elements
- *   5. connectedCallback fires on each upgraded element
- *   6. Event listeners are attached (no re-rendering needed)
- *
- * No hydration ceremony needed because:
- *   - DSD provides the initial Shadow DOM content (from SSR)
- *   - Custom Elements upgrade activates the behavior
- *   - No TemplateResult to re-associate
- *   - No <!--lit-part--> markers to reconcile
+ * v0.5.0: Lazy Island Loading via IntersectionObserver.
+ * Islands load only when they scroll into the viewport.
  */
 
-/** Island entry for client bundle generation */
 export interface ClientIslandEntry {
-  /** Custom element tag name */
   tagName: string;
-  /** Module path for dynamic import */
   modulePath: string;
-  /** True if this island comes from a package */
   isPackage?: boolean;
 }
 
-/**
- * Generate the client entry point file content.
- *
- * This entry is built by Vite's client build (Phase 2).
- * It dynamically imports all island modules — the browser's Custom
- * Elements v1 spec handles automatic element upgrade from there.
- *
- * @param islands - List of islands to register
- * @param strategy - Hydration strategy (preserved for backward compat, minimal effect)
- */
 export function generateClientEntry(
   islands: ClientIslandEntry[],
 ): string {
   if (islands.length === 0) {
     return '// KISS Client Entry — No islands detected, zero client JS needed\n';
   }
 
-  // All islands use dynamic import() — their side effects call customElements.define()
-  const dynamicImports = islands
-    .map((island) => `  import('${island.modulePath}'),`)
-    .join('\n');
+  const islandMap = islands
+    .map((i) => `  '${i.tagName}': () => import('${i.modulePath}')`)
+    .join(',\n');
 
-  const whenDefinedList = islands
-    .map((island) => `customElements.whenDefined('${island.tagName}')`)
-    .join(', ');
+  const tags = islands.map((i) => `'${i.tagName}'`).join(', ');
 
-  return `// KISS Client Entry (auto-generated — v0.5.0)
-// No Lit hydration — CE upgrade + DSD handles everything natively.
+  // Note: This is generated JavaScript — NO TypeScript syntax allowed.
+  return `// KISS Client Entry (auto-generated)
+// IntersectionObserver lazy loading — islands load on scroll.
 
-// --- Dynamic import all islands ---
-// Each module's customElements.define() registers the element.
-// The browser automatically upgrades existing SSR-rendered elements.
-const __islandPromises = Promise.all([
-${dynamicImports}
-]);
+var __lazy = {
+${islandMap}
+};
 
-// --- Wait for all elements to upgrade, then notify ---
-__islandPromises.then(() => {
-  Promise.all([${whenDefinedList}]).then(() => {
-    // Dispatch custom event so external code can hook into ready state
-    document.dispatchEvent(new CustomEvent('kiss:ready', {
-      detail: { islands: [${islands.map((i) => `'${i.tagName}'`).join(', ')}] }
-    }));
+function __upgrade(tag) {
+  if (__lazy[tag]) {
+    __lazy[tag]().catch(function(e) { console.warn('[KISS]', tag, e); });
+    __lazy[tag] = null;
+  }
+}
+
+var __obs = new IntersectionObserver(function(entries) {
+  entries.forEach(function(e) {
+    if (e.isIntersecting) {
+      __upgrade(e.target.tagName.toLowerCase());
+      __obs.unobserve(e.target);
+    }
   });
-}).catch(err => {
-  console.warn('[KISS] Island loading failed:', err);
-  // Best-effort: try to upgrade any islands that DID load
-  Promise.all([${whenDefinedList}]).then(() => {
-    document.dispatchEvent(new CustomEvent('kiss:ready', {
-      detail: { islands: [${islands.map((i) => `'${i.tagName}'`).join(', ')}], partial: true }
-    }));
-  }).catch(() => { /* best effort */ });
 });
+
+// Observe islands in document and kiss-layout shadow DOM
+var __layout = document.querySelector('kiss-layout');
+var __root = __layout && __layout.shadowRoot || document;
+var __tags = [${tags}];
+__tags.forEach(function(tag) {
+  __root.querySelectorAll(tag).forEach(function(el) { __obs.observe(el); });
+});
+setTimeout(function() {
+  document.dispatchEvent(new CustomEvent('kiss:ready', {
+    detail: { islands: __tags }
+  }));
+}, 100);
 `;
-}
+}