@useavalon/avalon 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@useavalon/avalon",
-	"version": "0.1.5",
+	"version": "0.1.7",
 	"description": "Multi-framework islands architecture for the modern web",
 	"license": "MIT",
 	"type": "module",
@@ -14,6 +14,7 @@
 	"exports": {
 		".": "./mod.ts",
 		"./client": "./src/client/components.ts",
+		"./islands/framework-detection": "./src/islands/framework-detection.ts",
 		"./middleware": "./src/middleware/index.ts",
 		"./nitro/renderer": "./src/nitro/renderer.ts",
 		"./nitro/types": "./src/nitro/types.ts",
@@ -26,64 +27,36 @@
 			"types": ["./src/types/index.d.ts"]
 		}
 	},
-	"files": ["mod.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.d.ts", "README.md"],
+	"files": ["mod.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.d.ts", "!src/**/*.test.ts", "!src/**/tests/**", "!src/**/__tests__/**", "!src/**/README.md", "README.md"],
 	"devDependencies": {
 		"@types/mime-types": "^3.0.1"
 	},
-	"dependencies": {
-		"@useavalon/core": "0.1.0",
-		"@mdx-js/react": "^3.0.0",
-		"@mdx-js/rollup": "^3.0.0",
-		"@types/mdx": "^2.0.0",
-		"consola": "^3.4.2",
-		"cookie-es": "^2.0.0",
-		"croner": "^10.0.1",
-		"crossws": "^0.4.3",
-		"db0": "^0.3.4",
-		"defu": "^6.1.4",
-		"destr": "^2.0.5",
-		"error-stack-parser-es": "^1.0.5",
-		"get-port-please": "^3.2.0",
-		"h3": "^2.0.1-rc.16",
-		"hast-util-to-text": "^4.0.0",
-		"hookable": "^6.0.1",
-		"jiti": "^2.6.1",
-		"kleur": "^4.1.5",
-		"lowlight": "^3.1.0",
-		"marked": "^17.0.4",
-		"mime-types": "^3.0.2",
-		"nf3": "^0.3.11",
-		"nitro": "3.0.1-alpha.2",
-		"ofetch": "^2.0.0-alpha.3",
-		"ohash": "^2.0.11",
-		"oxc-minify": "^0.117.0",
-		"oxc-transform": "^0.117.0",
-		"preact": "10.28.4",
-		"preact-render-to-string": "6.6.6",
-		"rehype-highlight": "^7.0.0",
-		"remark-frontmatter": "^5.0.0",
-		"remark-gfm": "^4.0.0",
-		"remark-mdx-frontmatter": "^5.0.0",
-		"rendu": "^0.0.7",
-		"rolldown": "^1.0.0-rc.8",
-		"rollup": "^4.55.0",
-		"rou3": "^0.8.1",
-		"scule": "^1.3.0",
-		"srvx": "^0.11.9",
-		"std-env": "^3.9.0",
-		"supports-color": "^10.2.2",
-		"typescript": "5.9.3",
-		"ufo": "^1.6.3",
-		"unctx": "^2.4.1",
-		"undici": "^7.18.2",
-		"unenv": "^2.0.0-rc.24",
-		"unified": "^11.0.0",
-		"unstorage": "^2.0.0-alpha.5",
-		"vite": "8.0.0",
-		"vite-imagetools": "^7.0.5",
-		"xml2js": "^0.6.2",
-		"youch": "^4.1.0-beta.13",
-		"youch-core": "^0.3.3",
-		"zod": "4.3.6"
-	}
+	"peerDependencies": {
+		"vite": "^8.0.0",
+		"nitro": "^3.0.0-alpha.0",
+		"vite-imagetools": "^7.0.0"
+	},
+	"peerDependenciesMeta": {
+		"nitro": {
+		"optional": true
+	},
+	"vite-imagetools": {
+	"optional": true
+}
+},
+"dependencies": {
+	"@useavalon/core": "^0.1.1",
+	"@mdx-js/rollup": "^3.0.0",
+	"h3": "^2.0.1-rc.16",
+	"marked": "^17.0.4",
+	"oxc-transform": "^0.117.0",
+	"preact": "10.28.4",
+	"preact-render-to-string": "6.6.6",
+	"rehype-highlight": "^7.0.0",
+	"remark-frontmatter": "^5.0.0",
+	"remark-gfm": "^4.0.0",
+	"remark-mdx-frontmatter": "^5.0.0",
+	"unified": "^11.0.0",
+	"zod": "4.3.6"
+}
 }

package/src/build/prop-extractors/index.ts

@@ -1,15 +1,15 @@
-export { type PropExtractionResult, FALLBACK_PROPS, extractVueProps } from "./vue";
-export { extractSvelteProps } from "./svelte";
-export { extractLitProps } from "./lit";
-export { extractSolidProps } from "./solid";
-export { extractQwikProps } from "./qwik";
+export { type PropExtractionResult, FALLBACK_PROPS, extractVueProps } from "./vue.ts";
+export { extractSvelteProps } from "./svelte.ts";
+export { extractLitProps } from "./lit.ts";
+export { extractSolidProps } from "./solid.ts";
+export { extractQwikProps } from "./qwik.ts";
 
-import type { PropExtractionResult } from "./vue";
-import { extractVueProps } from "./vue";
-import { extractSvelteProps } from "./svelte";
-import { extractLitProps } from "./lit";
-import { extractSolidProps } from "./solid";
-import { extractQwikProps } from "./qwik";
+import type { PropExtractionResult } from "./vue.ts";
+import { extractVueProps } from "./vue.ts";
+import { extractSvelteProps } from "./svelte.ts";
+import { extractLitProps } from "./lit.ts";
+import { extractSolidProps } from "./solid.ts";
+import { extractQwikProps } from "./qwik.ts";
 
 /** Maps framework name to its prop extractor function */
 export const EXTRACTOR_MAP: Record<string, (source: string) => PropExtractionResult> = {

package/src/build/prop-extractors/lit.ts

@@ -1,4 +1,4 @@
-import { FALLBACK_PROPS, type PropExtractionResult } from "./vue";
+import { FALLBACK_PROPS, type PropExtractionResult } from "./vue.ts";
 
 /** Mapping from Lit type constructors to TypeScript type strings */
 const LIT_TYPE_MAP: Record<string, string> = {

package/src/build/prop-extractors/qwik.ts

@@ -1,5 +1,5 @@
-import type { PropExtractionResult } from "./vue";
-import { FALLBACK_PROPS } from "./vue";
+import type { PropExtractionResult } from "./vue.ts";
+import { FALLBACK_PROPS } from "./vue.ts";
 
 /**
  * Extract props type from a Qwik component file.

package/src/build/prop-extractors/solid.ts

@@ -1,4 +1,4 @@
-import { FALLBACK_PROPS, type PropExtractionResult } from "./vue";
+import { FALLBACK_PROPS, type PropExtractionResult } from "./vue.ts";
 
 /**
  * Extract props from a Solid component source string.

package/src/build/prop-extractors/svelte.ts

@@ -1,4 +1,4 @@
-import { FALLBACK_PROPS, type PropExtractionResult } from "./vue";
+import { FALLBACK_PROPS, type PropExtractionResult } from "./vue.ts";
 
 /**
  * Extract props from a Svelte component source string.

package/src/schemas/routing.ts

@@ -362,7 +362,7 @@ export type {
 	ValidRoutePattern,
 	ValidRouteExtension,
 	PageComponentProps,
-} from '../types/routing';
+} from '../types/routing.ts';
 
 export {
 	isValidRouteParams,
@@ -373,4 +373,4 @@ export {
 	createTypedMetadataGenerator,
 	createTypedPageLoader,
 	createTypedApiHandler,
-} from '../types/routing';
+} from '../types/routing.ts';

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

@@ -43,7 +43,7 @@ function resolveAvalonPackagePath(relativePath: string): string {
  * 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 require = createRequire(join(process.cwd(), 'package.json'));
 	const modEntry = require.resolve(`@useavalon/${name}`);
 	const pkgRoot = dirname(modEntry);
 	return join(pkgRoot, relativePath);

package/src/vite-plugin/plugin.ts

@@ -269,14 +269,12 @@ export async function avalon(config?: AvalonPluginConfig): Promise<PluginOption[
   }
 
   // Resolve /@useavalon/*/client virtual imports used by main.js
-  const integrationClientMap: Record<string, string | null> = {};
-  for (const name of ['preact', 'react', 'vue', 'svelte', 'solid', 'lit', 'qwik']) {
-    try {
-      integrationClientMap[`/@useavalon/${name}/client`] = require.resolve(`@useavalon/${name}/client`);
-    } catch {
-      integrationClientMap[`/@useavalon/${name}/client`] = null;
-    }
-  }
+  // These are resolved dynamically in the resolveId hook using Vite's resolver
+  const integrationClientIds = new Set(
+    ['preact', 'react', 'vue', 'svelte', 'solid', 'lit', 'qwik'].map(
+      name => `/@useavalon/${name}/client`
+    )
+  );
 
   // The main Avalon plugin
   const avalonPlugin: Plugin = {
@@ -309,27 +307,33 @@ export async function avalon(config?: AvalonPluginConfig): Promise<PluginOption[
       checkDirectoriesExist(resolvedConfig, resolvedViteConfig.root);
     },
 
-    resolveId(id: string) {
+    async resolveId(id: string) {
       if (id === "/src/client/main.js" && clientMainResolved) {
         return clientMainResolved;
       }
-      if (id in integrationClientMap && integrationClientMap[id]) {
-        return integrationClientMap[id];
+      // /@useavalon/*/client — resolve through Vite's pipeline so it finds
+      // workspace-linked or npm-installed integration packages from the
+      // consuming project's node_modules, not from avalon's own context.
+      if (integrationClientIds.has(id)) {
+        const packageId = id.slice(1); // strip leading /
+        const resolved = await this.resolve(packageId);
+        return resolved?.id ?? null;
       }
       return null;
     },
 
     async transform(code: string, id: string) {
-      // Vite 8's OXC transform applies the project's jsx config to ALL .ts files,
-      // including those in node_modules/@useavalon. OXC rejects jsx options for
-      // plain .ts files. Strip TypeScript ourselves for @useavalon packages so
-      // Vite's built-in OXC doesn't need to touch them.
+      // Vite 8's built-in OXC plugin returns { moduleType: "js" } so the dev
+      // server knows the output is JavaScript. Because we exclude @useavalon
+      // packages from that plugin (via oxc.exclude), we must strip TypeScript
+      // ourselves AND set moduleType so the browser receives valid JS.
       if (id.includes('node_modules/@useavalon/') && /\.tsx?$/.test(id)) {
         const { transform: oxcTransform } = await import('oxc-transform');
         const result = await oxcTransform(id, code, {
+          sourcemap: true,
           typescript: { onlyRemoveTypeImports: false },
         });
-        return { code: result.code, map: result.map };
+        return { code: result.code, map: result.map, moduleType: 'js' };
       }
     },
 

package/src/build/README.md

@@ -1,310 +0,0 @@
-# Avalon Build System
-
-This directory contains the build system components for Avalon, including integration detection, bundling, and optimization.
-
-## Components
-
-### Integration Detection (`integration-detection-plugin.ts`)
-
-Automatically detects which framework integrations are used in your project by:
-- Scanning file extensions (`.vue`, `.svelte`)
-- Analyzing imports in TSX/JSX files
-- Detecting framework-specific patterns
-
-**Usage:**
-```typescript
-import { detectUsedIntegrations, getRequiredIntegrations } from './integration-detection-plugin.ts';
-
-const detected = await detectUsedIntegrations();
-const required = getRequiredIntegrations(detected);
-// required = ['preact', 'vue', 'solid', 'svelte']
-```
-
-### Integration Resolver (`integration-resolver-plugin.ts`)
-
-Resolves `@useavalon/integration-*` imports to actual file paths:
-
-```typescript
-// Import resolution
-'@useavalon/integration-preact' → 'src/integrations/preact/mod.ts'
-'@useavalon/integration-preact/server' → 'src/integrations/preact/server/renderer.ts'
-'@useavalon/integration-preact/client' → 'src/integrations/preact/client/index.ts'
-```
-
-**Usage:**
-```typescript
-import { integrationResolverPlugin, createIntegrationAliases } from './integration-resolver-plugin.ts';
-
-// In Vite config
-plugins: [
-  integrationResolverPlugin(),
-]
-
-// Or use aliases
-resolve: {
-  alias: createIntegrationAliases(),
-}
-```
-
-### Integration Bundler (`integration-bundler-plugin.ts`)
-
-Handles bundling of integration packages for both client and SSR builds:
-
-**Usage:**
-```typescript
-import { integrationBundlerPlugin } from './integration-bundler-plugin.ts';
-
-// Client build
-plugins: [
-  integrationBundlerPlugin({ 
-    integrations: ['preact', 'vue'], 
-    ssr: false 
-  }),
-]
-
-// SSR build
-plugins: [
-  integrationBundlerPlugin({ 
-    integrations: ['preact', 'vue'], 
-    ssr: true 
-  }),
-]
-```
-
-### Integration Config (`integration-config.ts`)
-
-Centralized configuration for all framework integrations:
-
-```typescript
-export interface IntegrationBuildConfig {
-  name: string;
-  extensions: string[];
-  optimizeDeps: string[];
-  ssrExternal: string[];
-  ssrNoExternal: string[];
-  requiresPlugin: boolean;
-  pluginPackage?: string;
-}
-```
-
-**Usage:**
-```typescript
-import { 
-  getIntegrationBuildConfig,
-  getOptimizeDepsForIntegrations,
-  getSSRNoExternalForIntegrations 
-} from './integration-config.ts';
-
-const config = getIntegrationBuildConfig('preact');
-const optimizeDeps = getOptimizeDepsForIntegrations(['preact', 'vue']);
-const ssrNoExternal = getSSRNoExternalForIntegrations(['preact', 'vue']);
-```
-
-### Island Manifest (`island-manifest.ts`)
-
-Generates a manifest of all islands with their framework types and bundle paths:
-
-```typescript
-export interface IslandManifest {
-  islands: Record<string, IslandEntry>;
-  version: string;
-  buildTime: number;
-}
-
-export interface IslandEntry {
-  src: string;
-  bundle: string;
-  hash: string;
-  framework: 'preact' | 'solid' | 'vue' | 'svelte' | 'vanilla';
-  deps: string[];
-}
-```
-
-**Usage:**
-```typescript
-import { generateIslandManifest, loadIslandManifest } from './island-manifest.ts';
-
-// During build
-const manifest = await generateIslandManifest();
-await Deno.writeTextFile('dist/island-manifest.json', JSON.stringify(manifest));
-
-// At runtime
-const manifest = await loadIslandManifest();
-const bundlePath = getIslandBundlePath('/islands/Counter.tsx', manifest);
-```
-
-### MDX Plugin (`mdx-plugin.ts`)
-
-Handles MDX file processing with support for framework components.
-
-## Build Configurations
-
-### Main Build (`vite.config.ts`)
-
-Client-side build configuration:
-- Detects used integrations
-- Bundles client hydration code
-- Optimizes dependencies
-- Includes island bundles
-
-### SSR Build (`vite.ssr.config.ts`)
-
-Server-side rendering build configuration:
-- Bundles SSR rendering code
-- Includes island SSR bundles
-- Configures SSR externals
-- Outputs to `dist/ssr/`
-
-## Build Process
-
-The build process is orchestrated by `build.ts`:
-
-1. **Integration Detection**: Scan project to detect frameworks
-2. **Manifest Generation**: Create island manifest
-3. **Client Build**: Bundle client code with Vite
-4. **SSR Build**: Bundle SSR code with Vite SSR config
-
-```bash
-deno run --allow-all build.ts
-```
-
-## Tree Shaking
-
-The build system automatically tree-shakes unused integrations:
-
-- Only detected integrations are bundled
-- Framework dependencies are excluded if not used
-- Vite plugins are only loaded for used frameworks
-
-**Example:**
-```
-Project uses: Preact, Vue
-Build includes: preact integration, vue integration
-Build excludes: solid integration, svelte integration
-```
-
-## Testing
-
-Test integration detection:
-```bash
-deno run --allow-read test-integration-detection.ts
-```
-
-Expected output:
-```
-🔍 Testing integration detection...
-
-Detected integrations:
-  Preact: ✅
-  Vue: ✅
-  Solid: ✅
-  Svelte: ✅
-
-Required integrations: preact, vue, solid, svelte
-
-✅ Integration detection test complete!
-```
-
-## Adding a New Integration
-
-To add support for a new framework:
-
-1. **Create Integration Package**
-   ```
-   src/integrations/[framework]/
-   ├── mod.ts
-   ├── server/
-   │   └── renderer.ts
-   ├── client/
-   │   └── index.ts
-   └── types.ts
-   ```
-
-2. **Add Build Configuration**
-   ```typescript
-   // In integration-config.ts
-   export const INTEGRATION_BUILD_CONFIGS = {
-     // ...
-     myframework: {
-       name: 'myframework',
-       extensions: ['.myext'],
-       optimizeDeps: ['myframework'],
-       ssrExternal: [],
-       ssrNoExternal: ['myframework'],
-       requiresPlugin: true,
-       pluginPackage: 'vite-plugin-myframework',
-     },
-   };
-   ```
-
-3. **Update Detection Logic**
-   ```typescript
-   // In integration-detection-plugin.ts
-   export async function detectUsedIntegrations() {
-     const result = {
-       // ...
-       myframework: false,
-     };
-     
-     // Add detection logic
-     if (entry.name.endsWith('.myext')) {
-       result.myframework = true;
-     }
-     
-     return result;
-   }
-   ```
-
-4. **Add Resolver Aliases**
-   ```typescript
-   // In integration-resolver-plugin.ts
-   export function createIntegrationAliases() {
-     return {
-       // ...
-       '@useavalon/integration-myframework': resolve(cwd, 'src/integrations/myframework/mod.ts'),
-     };
-   }
-   ```
-
-## Performance
-
-### Build Time Impact
-
-- Integration detection: ~10-50ms
-- Plugin initialization: ~5-20ms per integration
-- Total overhead: <100ms for typical projects
-
-### Bundle Size Impact
-
-Per-integration overhead (gzipped):
-- Preact: ~4KB (client) + ~8KB (server)
-- Vue: ~10KB (client) + ~15KB (server)
-- Solid: ~7KB (client) + ~10KB (server)
-- Svelte: ~5KB (client) + ~12KB (server)
-
-## Troubleshooting
-
-### Integration Not Detected
-
-Check:
-1. File extensions match integration config
-2. Files are in scanned directories
-3. Imports use correct framework packages
-
-### Build Errors
-
-Common issues:
-- Missing Vite plugin: Install required plugin
-- Module resolution: Check integration aliases
-- SSR errors: Verify SSR noExternal config
-
-### Bundle Size
-
-To optimize:
-1. Remove unused framework imports
-2. Verify tree-shaking is working
-3. Check that only used integrations are bundled
-
-## Documentation
-
-See [docs/build-system-integrations.md](../../docs/build-system-integrations.md) for detailed documentation.