@useavalon/avalon 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@useavalon/avalon",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"description": "Multi-framework islands architecture for the modern web",
 	"license": "MIT",
 	"type": "module",

package/src/core/integrations/registry.ts

@@ -94,56 +94,36 @@ export class IntegrationRegistry {
     }
   }
 
-  /**
-   * Internal method to load integration module
-   * Note: In development mode, integrations should be pre-loaded via preloader.ts
-   * before Vite's SSR context starts. This method is a fallback for production
-   * or when integrations weren't pre-loaded.
-   */
   private async loadIntegration(name: string): Promise<Integration> {
+    const integrationKey = `${name}Integration`;
+
+    // 1. Try loading from the installed npm package first (@useavalon/<name>)
+    try {
+      const packageName = `@useavalon/${name}`;
+      const module = await import(/* @vite-ignore */ packageName);
+      const integration = module[integrationKey] || module.default;
+      if (integration) return integration as Integration;
+    } catch {
+      // Package not installed or import failed — try monorepo path
+    }
+
+    // 2. Monorepo fallback: resolve via packages/integrations/<name>/mod.ts
     try {
-      // Use absolute file:// URL to bypass Vite's module resolution
-      // This ensures we use Deno's native import which handles npm: specifiers correctly
       const monorepoRoot = findMonorepoRoot();
       const integrationPath = join(monorepoRoot, "packages", "integrations", name, "mod.ts");
       const fileUrl = `file://${integrationPath}`;
-      
-      // Dynamic import with file:// URL bypasses Vite's SSR module loader
       const module = await import(/* @vite-ignore */ fileUrl);
-      
-      // Look for the integration export (e.g., preactIntegration)
-      const integrationKey = `${name}Integration`;
       const integration = module[integrationKey] || module.default;
-
-      if (!integration) {
-        throw new Error(
-          `Integration module '${name}' does not export '${integrationKey}' or a default export`
-        );
-      }
-
-      return integration as Integration;
-    } catch (error) {
-      // Check if this is a Vite SSR context issue
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      const isViteIssue = errorMessage.includes('ERR_UNSUPPORTED_ESM_URL_SCHEME') ||
-                          errorMessage.includes('Only file and data URLs are supported');
-      
-      if (isViteIssue) {
-        throw new Error(
-          `Integration '${name}' could not be loaded within Vite's SSR context. ` +
-          `This usually means the integration wasn't pre-loaded at server startup. ` +
-          `Make sure preloadIntegrationsNative() is called before Vite server starts.`,
-          { cause: error }
-        );
-      }
-      
-      throw new Error(
-        `Failed to load integration for framework '${name}'. ` +
-        `Make sure @useavalon/${name} is installed.\n` +
-        `Install it with: bun add @useavalon/${name}`,
-        { cause: error }
-      );
+      if (integration) return integration as Integration;
+    } catch {
+      // Monorepo path also failed
     }
+
+    throw new Error(
+      `Failed to load integration for framework '${name}'. ` +
+      `Make sure @useavalon/${name} is installed.\n` +
+      `Install it with: bun add @useavalon/${name}`,
+    );
   }
 
   /**

package/src/nitro/renderer.ts

@@ -44,6 +44,8 @@ import {
 	discoverErrorPages,
 	type ErrorHandlerOptions,
 } from './error-handler.ts';
+import { h } from 'preact';
+import preactRenderToString from 'preact-render-to-string';
 
 /**
  * Resolved page route information
@@ -626,17 +628,27 @@ async function renderPageComponent(
 	context: NitroRenderContext,
 	_options: SSRRenderOptions,
 ): Promise<string> {
-	// This would integrate with the existing renderToHtml function
-	// For now, return a basic structure showing the integration point
+	const Component = pageModule.default as (props?: Record<string, unknown>) => unknown;
+	const metadata = pageModule.metadata || {};
 
-	// In the real implementation, this would:
-	// 1. Import and use renderToHtml from '../render/ssr.ts'
-	// 2. Create a RouteConfig from the pageModule
-	// 3. Apply layouts using the layout resolver
-	// 4. Return the fully rendered HTML
+	// Call the page component (supports async components)
+	let vnode: unknown;
+	try {
+		const result = Component(pageProps);
+		vnode = result instanceof Promise ? await result : result;
+	} catch (err) {
+		console.error('[renderer] Error calling page component:', err);
+		vnode = h('div', null, 'Error rendering page');
+	}
 
-	const componentName = (pageModule.default as { name?: string })?.name || 'Page';
-	const metadata = pageModule.metadata || {};
+	// Render the vnode to HTML string using Preact SSR
+	let pageHtml: string;
+	try {
+		pageHtml = preactRenderToString(vnode as any);
+	} catch (err) {
+		console.error('[renderer] Error in preactRenderToString:', err);
+		pageHtml = '<div>Error rendering page</div>';
+	}
 
 	return `<!DOCTYPE html>
 <html lang="en">
@@ -647,9 +659,10 @@ async function renderPageComponent(
     ${metadata.description ? `<meta name="description" content="${escapeHtml(String(metadata.description))}">` : ''}
   </head>
   <body>
-    <div id="app" data-page="${escapeHtml(String(componentName))}" data-props='${escapeHtml(JSON.stringify(pageProps))}'>
-      <!-- Page content rendered by Avalon SSR pipeline -->
+    <div id="app">
+      ${pageHtml}
     </div>
+    <script type="module" src="/src/client/main.js"></script>
   </body>
 </html>`;
 }

package/src/vite-plugin/nitro-integration.ts

@@ -10,6 +10,8 @@
 import type { Plugin, ViteDevServer } from 'vite';
 import { nitro as nitroVitePlugin } from 'nitro/vite';
 import { stat as fsStat } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
 import type { ResolvedAvalonConfig } from './types.ts';
 import { createNitroConfig, type AvalonNitroConfig, type NitroConfigOutput } from '../nitro/config.ts';
 import type { PageModule } from '../nitro/types.ts';
@@ -27,6 +29,26 @@ import { collectCssFromModuleGraph, injectSsrCss } from '../render/collect-css.t
 import { getUniversalCSSForHead } from '../islands/universal-css-collector.ts';
 import { getUniversalHeadForInjection } from '../islands/universal-head-collector.ts';
 
+/**
+ * Resolves the absolute path to a file inside @useavalon/avalon's source tree.
+ */
+function resolveAvalonPackagePath(relativePath: string): string {
+	const require = createRequire(import.meta.url);
+	const modEntry = require.resolve('@useavalon/avalon');
+	const pkgRoot = dirname(modEntry);
+	return join(pkgRoot, relativePath);
+}
+
+/**
+ * Resolves the absolute path to a file inside an @useavalon/<name> integration package.
+ */
+function resolveIntegrationPackagePath(name: string, relativePath: string): string {
+	const require = createRequire(import.meta.url);
+	const modEntry = require.resolve(`@useavalon/${name}`);
+	const pkgRoot = dirname(modEntry);
+	return join(pkgRoot, relativePath);
+}
+
 export const VIRTUAL_MODULE_IDS = {
 	PAGE_ROUTES: 'virtual:avalon/page-routes',
 	ISLAND_MANIFEST: 'virtual:avalon/island-manifest',
@@ -342,18 +364,16 @@ async function handle404(
 async function prewarmCoreModules(server: ViteDevServer, verbose?: boolean): Promise<void> {
 	const prewarmStart = performance.now();
 
+	const frameworkNames = ['react', 'vue', 'solid', 'svelte', 'lit', 'preact'] as const;
+
 	const coreModules = [
-		// SSR infrastructure
-		{ path: '../packages/avalon/src/render/ssr.ts', assignTo: 'ssr' },
-		{ path: '../packages/avalon/src/core/layout/enhanced-layout-resolver.ts', assignTo: 'layout' },
-		{ path: '../packages/avalon/src/middleware/index.ts', assignTo: null },
-		// Framework renderers — prewarm so first island render is fast
-		{ path: '../packages/integrations/react/server/renderer.ts', assignTo: null },
-		{ path: '../packages/integrations/vue/server/renderer.ts', assignTo: null },
-		{ path: '../packages/integrations/solid/server/renderer.ts', assignTo: null },
-		{ path: '../packages/integrations/svelte/server/renderer.ts', assignTo: null },
-		{ path: '../packages/integrations/lit/server/renderer.ts', assignTo: null },
-		{ path: '../packages/integrations/preact/server/renderer.ts', assignTo: null },
+		{ path: resolveAvalonPackagePath('src/render/ssr.ts'), assignTo: 'ssr' as string | null },
+		{ path: resolveAvalonPackagePath('src/core/layout/enhanced-layout-resolver.ts'), assignTo: 'layout' as string | null },
+		{ path: resolveAvalonPackagePath('src/middleware/index.ts'), assignTo: null as string | null },
+		...frameworkNames.map(name => ({
+			path: resolveIntegrationPackagePath(name, 'server/renderer.ts'),
+			assignTo: null as string | null,
+		})),
 	];
 
 	const results = await Promise.allSettled(
@@ -1198,14 +1218,14 @@ async function renderPageToHtml(
 
 	try {
 		if (!cachedSSRModule) {
-			cachedSSRModule = await server.ssrLoadModule('../packages/avalon/src/render/ssr.ts');
+			cachedSSRModule = await server.ssrLoadModule(resolveAvalonPackagePath('src/render/ssr.ts'));
 		}
 		// cachedSSRModule is the dynamically-loaded render/ssr.ts module;
 		// expected exports: renderToHtml, renderToHtmlWithLayouts
 		const ssrModule = cachedSSRModule as Record<string, unknown>;
 
 		if (!cachedLayoutModule) {
-			cachedLayoutModule = await server.ssrLoadModule('../packages/avalon/src/core/layout/enhanced-layout-resolver.ts');
+			cachedLayoutModule = await server.ssrLoadModule(resolveAvalonPackagePath('src/core/layout/enhanced-layout-resolver.ts'));
 		}
 		// cachedLayoutModule is the dynamically-loaded enhanced-layout-resolver.ts module;
 		// expected exports: EnhancedLayoutResolver, EnhancedLayoutResolverUtils

package/src/vite-plugin/plugin.ts

@@ -16,6 +16,8 @@ import type {
   IntegrationName,
   ResolvedAvalonConfig,
 } from "./types.ts";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
 import { resolveConfig, checkDirectoriesExist } from "./config.ts";
 import { activateIntegrations, activateSingleIntegration } from "./integration-activator.ts";
 import { discoverIntegrationsFromIslandUsage } from "./auto-discover.ts";
@@ -254,6 +256,18 @@ export async function avalon(config?: AvalonPluginConfig): Promise<PluginOption[
     verbose: preResolvedConfig.verbose,
   });
 
+  // Resolve the path to @useavalon/avalon's client entry for the /src/client/main.js alias.
+  // In the monorepo www/ project this is handled by a manual resolve.alias; for standalone
+  // projects the plugin must do it automatically.
+  let clientMainResolved: string | null = null;
+  try {
+    const require = createRequire(import.meta.url);
+    const clientEntry = require.resolve("@useavalon/avalon/client");
+    clientMainResolved = join(dirname(clientEntry), "main.js");
+  } catch {
+    // Inside the monorepo www/ project — it sets its own alias in vite.config.ts
+  }
+
   // The main Avalon plugin
   const avalonPlugin: Plugin = {
     name: "avalon",
@@ -269,6 +283,16 @@ export async function avalon(config?: AvalonPluginConfig): Promise<PluginOption[
       checkDirectoriesExist(resolvedConfig, resolvedViteConfig.root);
     },
 
+    resolveId(id: string) {
+      // Resolve /src/client/main.js to the actual file inside @useavalon/avalon.
+      // The SSR renderer injects <script src="/src/client/main.js"> into HTML.
+      // Without this alias, standalone projects get a 404.
+      if (id === "/src/client/main.js" && clientMainResolved) {
+        return clientMainResolved;
+      }
+      return null;
+    },
+
     async buildStart() {
       await runAutoDiscovery(resolvedConfig, viteConfig?.root, activeIntegrations);
       runValidation(resolvedConfig, activeIntegrations);