@hyperspan/plugin-preact 2.0.0-alpha.19 → 2.0.0-alpha.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperspan/plugin-preact",
-  "version": "2.0.0-alpha.19",
+  "version": "2.0.0-alpha.20",
   "description": "Hyperspan Plugin for Preact",
   "type": "module",
   "main": "src/index.ts",
@@ -14,7 +14,8 @@
     ".": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "author": "Vance Lucas <vance@vancelucas.com>",
   "license": "BSD-3-Clause",
@@ -30,20 +31,21 @@
     "url": "git+https://github.com/vlucas/hyperspan.git"
   },
   "devDependencies": {
-    "@hyperspan/vite-plugin": "^2.0.0-alpha.19",
+    "@hyperspan/vite-plugin": "^2.0.0-alpha.20",
+    "preact": "^10.28.3",
     "prettier": "^3.8.1",
     "typescript": "^5.9.3",
     "vite": "^8.2.1",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
-    "@hyperspan/framework": "^2.0.0-alpha.19",
-    "@hyperspan/vite-plugin": "^2.0.0-alpha.19",
+    "@hyperspan/framework": "^2.0.0-alpha.20",
+    "@hyperspan/vite-plugin": "^2.0.0-alpha.20",
+    "preact": "^10.28.3",
     "vite": "^8.0.0"
   },
   "dependencies": {
     "debug": "^4.4.3",
-    "preact": "^10.28.3",
     "preact-render-to-string": "^6.6.5"
   }
 }

package/src/index.test.ts

@@ -1,6 +1,8 @@
 import { test, describe, expect } from 'vitest';
 import { h } from 'preact';
-import { buildIslandHtml, renderPreactSSR, renderPreactIsland } from './index';
+import { useState } from 'preact/hooks';
+import { buildIslandHtml } from '@hyperspan/vite-plugin/islands';
+import { renderPreactSSR, renderPreactIsland } from './index';
 
 // ---------------------------------------------------------------------------
 // Simple Preact components defined inline — no .tsx compilation needed
@@ -91,6 +93,14 @@ describe('renderPreactSSR', () => {
     const output = renderPreactSSR(Hello, { name: '<script>alert(1)</script>' });
     expect(output).not.toContain('<script>alert');
   });
+
+  test('renders components that use hooks (same Preact as the renderer)', () => {
+    function Counter({ count: initial = 0 }: { count?: number }) {
+      const [count] = useState(initial);
+      return h('p', null, `Count: ${count}`);
+    }
+    expect(renderPreactSSR(Counter, { count: 3 })).toContain('Count: 3');
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/index.ts

@@ -2,43 +2,53 @@ import type { Plugin } from 'vite';
 import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { assetHash } from '@hyperspan/framework/utils';
-import { registerImport, JS_ISLAND_PUBLIC_PATH } from '@hyperspan/framework/client/js';
 import { renderIsland } from '@hyperspan/framework';
 import type { Hyperspan as HS } from '@hyperspan/framework';
 import { html } from '@hyperspan/framework/html';
 import { h } from 'preact';
 import { render as preactRenderToString } from 'preact-render-to-string';
+
+export { render as renderToString } from 'preact-render-to-string';
 import {
   registerIslandPlugin,
   isIslandModule,
   islandPluginResolveId,
   splitIslandId,
   registerClientChunkAliases,
+  registerIslandClientUrl,
+  registerRuntimeSpecifier,
+  isSsrTransform,
+  externalClientIslandRuntime,
+  isRuntimeSpecifier,
+  viteFsUrl,
+  buildIslandHtmlSource,
+  type IslandExportKind,
 } from '@hyperspan/vite-plugin/islands';
+import {
+  preactSingletonAliases,
+  resolvePackageDir,
+  resolvePreactSpecifier,
+} from './resolve-package';
 import debug from 'debug';
 
 const log = debug('hyperspan:plugin-preact');
 
-export type IslandExportKind = 'default' | 'named';
-
-export function buildIslandHtml(
-  jsId: string,
-  componentName: string,
-  esmName: string,
-  jsContent: string,
-  ssrContent: string,
-  options: { loading?: string; exportKind?: IslandExportKind } = {}
-): string {
-  const importStmt =
-    options.exportKind === 'named'
-      ? `import { ${componentName} } from "${esmName}";`
-      : `import ${componentName} from "${esmName}";`;
-  const scriptTag = `<script type="module" id="${jsId}_script" data-source-id="${jsId}">${importStmt}${jsContent}</script>`;
-  if (options.loading === 'lazy') {
-    return `<div id="${jsId}">${ssrContent}</div><div data-loading="lazy" style="height:1px;width:1px;overflow:hidden;"><template>\n${scriptTag}</template></div>`;
-  }
-  return `<div id="${jsId}">${ssrContent}</div>\n${scriptTag}`;
-}
+const PREACT_ISLAND = {
+  framework: 'preact',
+  ext: '.tsx',
+  specifiers: [
+    'preact',
+    'preact/hooks',
+    'preact/jsx-runtime',
+    'preact/jsx-dev-runtime',
+    'preact/compat',
+    'react',
+    'react-dom',
+  ] as const,
+  runtimePrefixes: ['preact', 'react', 'react-dom', 'preact-render-to-string'] as const,
+} as const;
+
+export type { IslandExportKind };
 
 export function renderPreactSSR(Component: unknown, props: Record<string, unknown> = {}): string {
   return preactRenderToString(h(Component as Parameters<typeof h>[0], props));
@@ -135,40 +145,73 @@ function __hs_renderIsland_${componentName}(jsContent = '', ssrContent = '', opt
 `;
 }
 
-const PREACT_CLIENT_SPECIFIERS = [
-  'preact',
-  'preact/hooks',
-  'preact/jsx-runtime',
-  'preact/jsx-dev-runtime',
-  'preact/compat',
-  'react',
-  'react-dom',
-] as const;
+const PREACT_CLIENT_SPECIFIERS = PREACT_ISLAND.specifiers;
 
 /**
  * Vite plugin for Preact islands.
  */
 export function preactIslandPlugin(): Plugin {
+  const pluginRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
   const preactClientPath = resolve(dirname(fileURLToPath(import.meta.url)), './preact-client.ts');
+  let root = process.cwd();
+  const { framework, ext } = PREACT_ISLAND;
+  const resolveIslandId = islandPluginResolveId(framework, ext);
 
   return {
     name: 'hyperspan-preact',
     enforce: 'pre',
 
-    config() {
+    config(config) {
+      const projectRoot = config.root ? String(config.root) : process.cwd();
+      const prerender = resolvePackageDir(pluginRoot, 'preact-render-to-string');
       return {
+        resolve: {
+          dedupe: ['preact', 'preact/hooks', 'preact/jsx-runtime'],
+        },
+        ssr: {
+          noExternal: ['preact', 'preact/hooks', 'preact-render-to-string'],
+          resolve: {
+            alias: {
+              ...preactSingletonAliases(projectRoot, pluginRoot),
+              ...(prerender ? { 'preact-render-to-string': prerender } : {}),
+            },
+          },
+        },
         optimizeDeps: {
           include: ['preact', 'preact/hooks', 'preact/jsx-runtime'],
         },
       };
     },
 
-    resolveId: islandPluginResolveId('preact', '.tsx'),
+    configResolved(config) {
+      root = config.root;
+    },
+
+    async resolveId(id, importer, options) {
+      const island = await resolveIslandId.call(this, id, importer, options);
+      if (island) return island;
+      const ssr = Boolean(options?.ssr) || this.environment?.name === 'ssr';
+      if (!ssr) {
+        const isRuntime = (specifier: string) =>
+          isRuntimeSpecifier(specifier, PREACT_ISLAND.runtimePrefixes);
+        if (
+          (this.environment?.mode === 'dev' || this.meta.watchMode) &&
+          importer &&
+          isIslandModule(importer, framework, ext) &&
+          isRuntime(id)
+        ) {
+          return preactClientPath;
+        }
+        return externalClientIslandRuntime(id, importer, { ssr: false }, framework, ext, isRuntime);
+      }
+      return resolvePreactSpecifier(id, root, pluginRoot);
+    },
 
     configureServer() {
-      const clientUrl = '/islands/preact-client.js';
+      const productionUrl = '/islands/preact-client.js';
+      const devUrl = viteFsUrl(preactClientPath);
       for (const spec of PREACT_CLIENT_SPECIFIERS) {
-        registerImport(spec, clientUrl);
+        registerRuntimeSpecifier(spec, productionUrl, { devUrl });
       }
     },
 
@@ -181,21 +224,31 @@ export function preactIslandPlugin(): Plugin {
       );
     },
 
-    async transform(code, id) {
-      if (!isIslandModule(id, 'preact', '.tsx')) return;
+    async transform(code, id, options) {
+      if (!isIslandModule(id, framework, ext)) return;
 
       log('transform island', id);
       const cleanId = splitIslandId(id).path;
-      const esmName = `island-${assetHash(cleanId)}`;
+      const esmName = registerIslandClientUrl(cleanId, framework, root);
       const exports = discoverPreactExports(code);
 
       if (exports.length === 0) {
         throw new Error(
-          `No component exports found in ${cleanId}. Export a default or named Preact component and import with \`with { island: 'preact' }\`.`
+          `No component exports found in ${cleanId}. Export a default or named Preact component and import with \`with { island: '${framework}' }\`.`
         );
       }
 
-      registerImport(esmName, `${JS_ISLAND_PUBLIC_PATH}/${esmName}.js`);
+      if (!isSsrTransform(this, options)) {
+        const esbuild = await import('esbuild');
+        const result = await esbuild.transform(code, {
+          loader: 'tsx',
+          jsx: 'transform',
+          jsxFactory: 'h',
+          jsxFragment: 'Fragment',
+          sourcefile: cleanId,
+        });
+        return { code: result.code, map: result.map || null };
+      }
 
       const attachments = exports
         .map((exp) => buildIslandAttachment(exp, cleanId, esmName))
@@ -204,7 +257,7 @@ export function preactIslandPlugin(): Plugin {
       const moduleCode = `// hyperspan:processed
 import { h as __hs_h, render as __hs_render, hydrate as __hs_hydrate } from 'preact';
 import { render as __hs_renderToString } from 'preact-render-to-string';
-import { buildIslandHtml as __hs_buildIslandHtml } from '@hyperspan/plugin-preact';
+${buildIslandHtmlSource}
 
 ${code}
 ${attachments}
@@ -232,7 +285,12 @@ ${attachments}
  * Hyperspan config plugin — register in hyperspan.config.ts plugins array.
  */
 export function preactPlugin(): HS.Plugin {
-  registerIslandPlugin('preact', { vitePlugin: preactIslandPlugin });
+  registerIslandPlugin({
+    framework: PREACT_ISLAND.framework,
+    ext: PREACT_ISLAND.ext,
+    specifiers: PREACT_ISLAND.specifiers,
+    vitePlugin: preactIslandPlugin,
+  });
   return () => {
     log('preactPlugin loaded');
   };

package/src/preact-client.ts

@@ -1,4 +1,39 @@
-export * from 'preact/compat';
-export * from 'preact/hooks';
-export * from 'preact/jsx-runtime';
-export { h, render, hydrate } from 'preact';
+// Named re-exports only — `export *` from compat + hooks + preact collides
+// (h, useState, Fragment, …) and Vite's native ESM module then fails to load.
+export {
+  h,
+  render,
+  hydrate,
+  Component,
+  Fragment,
+  createContext,
+  createRef,
+  toChildArray,
+  cloneElement,
+  createElement,
+  isValidElement,
+} from 'preact';
+export {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useReducer,
+  useRef,
+  useMemo,
+  useCallback,
+  useContext,
+  useId,
+  useErrorBoundary,
+  useDebugValue,
+  useImperativeHandle,
+} from 'preact/hooks';
+export { jsx, jsxs } from 'preact/jsx-runtime';
+export {
+  memo,
+  forwardRef,
+  Children,
+  createPortal,
+  lazy,
+  Suspense,
+  PureComponent,
+} from 'preact/compat';

package/src/resolve-package.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, test } from 'vitest';
+import { mkdirSync, mkdtempSync, realpathSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import {
+  preactSingletonAliases,
+  resolvePackageDir,
+  resolvePackageFrom,
+  resolvePreactSpecifier,
+} from './resolve-package';
+
+function fakePackage(root: string, name: string, file = 'index.js') {
+  const dir = join(root, 'node_modules', ...name.split('/'));
+  mkdirSync(dir, { recursive: true });
+  writeFileSync(join(dir, 'package.json'), JSON.stringify({ name, main: file }));
+  writeFileSync(join(dir, file), 'export {}\n');
+  mkdirSync(join(dir, 'hooks'), { recursive: true });
+  writeFileSync(
+    join(dir, 'hooks', 'package.json'),
+    JSON.stringify({ name: `${name}/hooks`, main: 'index.js' })
+  );
+  writeFileSync(join(dir, 'hooks', 'index.js'), 'export {}\n');
+  writeFileSync(join(root, 'package.json'), JSON.stringify({ name: 'app', type: 'module' }));
+  return realpathSync(dir);
+}
+
+describe('resolvePackageFrom', () => {
+  test('resolves a package from the starting directory', () => {
+    const root = mkdtempSync(join(tmpdir(), 'hs-preact-resolve-'));
+    const dir = fakePackage(root, 'preact');
+    expect(resolvePackageFrom(root, 'preact')).toBe(join(dir, 'index.js'));
+    expect(resolvePackageDir(root, 'preact')).toBe(dir);
+  });
+
+  test('prefers the app copy when pinning preact', () => {
+    const app = mkdtempSync(join(tmpdir(), 'hs-preact-app-'));
+    const plugin = mkdtempSync(join(tmpdir(), 'hs-preact-plugin-'));
+    const appPreact = fakePackage(app, 'preact');
+    fakePackage(plugin, 'preact');
+
+    expect(preactSingletonAliases(app, plugin)).toEqual({ preact: appPreact });
+    expect(resolvePreactSpecifier('preact/hooks', app, plugin)).toContain(join(appPreact, 'hooks'));
+  });
+
+  test('falls back to the plugin copy when the app has no preact', () => {
+    const app = mkdtempSync(join(tmpdir(), 'hs-preact-empty-'));
+    const plugin = mkdtempSync(join(tmpdir(), 'hs-preact-plugin-'));
+    writeFileSync(join(app, 'package.json'), JSON.stringify({ name: 'app' }));
+    const pluginPreact = fakePackage(plugin, 'preact');
+
+    expect(preactSingletonAliases(app, plugin)).toEqual({ preact: pluginPreact });
+    expect(resolvePreactSpecifier('preact', app, plugin)).toBe(join(pluginPreact, 'index.js'));
+  });
+
+  test('resolves preact-render-to-string from the plugin when the app lacks it', () => {
+    const app = mkdtempSync(join(tmpdir(), 'hs-prerender-app-'));
+    const plugin = mkdtempSync(join(tmpdir(), 'hs-prerender-plugin-'));
+    writeFileSync(join(app, 'package.json'), JSON.stringify({ name: 'app' }));
+    const prerender = fakePackage(plugin, 'preact-render-to-string');
+    expect(resolvePreactSpecifier('preact-render-to-string', app, plugin)).toBe(
+      join(prerender, 'index.js')
+    );
+  });
+
+  test('ignores non-preact specifiers', () => {
+    expect(resolvePreactSpecifier('vue', '/', '/')).toBeUndefined();
+  });
+});

package/src/resolve-package.ts

@@ -0,0 +1,84 @@
+import { createRequire } from 'node:module';
+import { dirname, join, sep } from 'node:path';
+import { existsSync, readFileSync, realpathSync } from 'node:fs';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+function realpath(path: string): string {
+  try {
+    return realpathSync(path);
+  } catch {
+    return path;
+  }
+}
+
+/**
+ * Resolve a specifier from a project's directory (its package.json / node_modules).
+ */
+export function resolvePackageFrom(fromDir: string, specifier: string): string | undefined {
+  const parent = pathToFileURL(join(fromDir, 'package.json')).href;
+  try {
+    return realpath(fileURLToPath(import.meta.resolve(specifier, parent)));
+  } catch {
+    try {
+      return realpath(createRequire(join(fromDir, 'package.json')).resolve(specifier));
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+/**
+ * Directory of an installed package, starting from `fromDir`.
+ */
+export function resolvePackageDir(fromDir: string, name: string): string | undefined {
+  const file = resolvePackageFrom(fromDir, name);
+  if (!file) return undefined;
+
+  const needle = `${sep}node_modules${sep}${name.replaceAll('/', sep)}${sep}`;
+  const idx = file.lastIndexOf(needle);
+  if (idx !== -1) {
+    return realpath(file.slice(0, idx + needle.length - 1));
+  }
+
+  let dir = dirname(file);
+  while (true) {
+    const pkgFile = join(dir, 'package.json');
+    if (existsSync(pkgFile)) {
+      try {
+        const pkg = JSON.parse(readFileSync(pkgFile, 'utf8')) as { name?: string };
+        if (pkg.name === name) return dir;
+      } catch {
+        // keep walking
+      }
+    }
+    const parent = dirname(dir);
+    if (parent === dir) return undefined;
+    dir = parent;
+  }
+}
+
+/**
+ * Force every `preact` / `preact/*` import onto one physical install.
+ * Prefer the app's copy; fall back to the plugin's so file: / monorepo links
+ * do not load hooks from one Preact and render-to-string from another.
+ */
+export function preactSingletonAliases(
+  projectRoot: string,
+  fallbackDir: string
+): Record<string, string> {
+  const dir = resolvePackageDir(projectRoot, 'preact') ?? resolvePackageDir(fallbackDir, 'preact');
+  if (!dir) return {};
+  return { preact: dir };
+}
+
+export function resolvePreactSpecifier(
+  specifier: string,
+  projectRoot: string,
+  fallbackDir: string
+): string | undefined {
+  if (specifier === 'preact-render-to-string') {
+    return resolvePackageFrom(fallbackDir, specifier) ?? resolvePackageFrom(projectRoot, specifier);
+  }
+  if (specifier !== 'preact' && !specifier.startsWith('preact/')) return undefined;
+  return resolvePackageFrom(projectRoot, specifier) ?? resolvePackageFrom(fallbackDir, specifier);
+}