@useavalon/vue 0.1.3 → 0.1.4

package/dist/client/hmr-adapter.js

@@ -0,0 +1 @@
+import{BaseFrameworkAdapter as e}from"@useavalon/avalon/client/hmr";export class VueHMRAdapter extends e{name=`vue`;apps=new WeakMap;componentIds=new WeakMap;canHandle(e){if(!e)return!1;if(typeof e==`function`)return!0;if(typeof e!=`object`)return!1;let t=e;return`setup`in t||`data`in t||`render`in t||`template`in t||`props`in t||`computed`in t||`methods`in t||`components`in t||`emits`in t||`mounted`in t||`created`in t||`beforeMount`in t||`beforeCreate`in t||`__vccOpts`in t}preserveState(e){try{let t=super.preserveState(e);if(!t)return null;let n=e.dataset.props?JSON.parse(e.dataset.props):{},r=this.extractComponentName(e.dataset.src||``),i=this.captureReactiveData(e);return{...t,framework:`vue`,data:{componentName:r,capturedProps:n,reactiveData:i}}}catch(e){return console.warn(`Failed to preserve Vue state:`,e),null}}async update(e,t,n){if(!this.canHandle(t))throw Error(`Component is not a valid Vue component`);let r=t;try{let{createApp:t}=await import(`vue`),i=this.apps.get(e),a=this.componentIds.get(e),o=globalThis.__VUE_HMR_RUNTIME__;if(o&&a)try{if(o.reload(a,r),i)return}catch(e){console.warn(`Vue HMR runtime reload failed, falling back to full remount:`,e)}if(i)try{i.unmount()}catch(e){console.warn(`Failed to unmount existing Vue app:`,e)}let s=t(r,n);s.config.errorHandler=(e,t,n)=>{console.error(`Vue component error during HMR:`,e,n)},s.mount(e,!0),this.apps.set(e,s);let c=e.dataset.src||``,l=this.generateComponentId(c);this.componentIds.set(e,l),o&&o.createRecord(l,r),e.dataset.hydrated=`true`,e.dataset.hydrationStatus=`success`}catch(t){throw console.error(`Vue HMR update failed:`,t),e.dataset.hydrationStatus=`error`,t}}restoreState(e,t){try{super.restoreState(e,t)}catch(e){console.warn(`Failed to restore Vue state:`,e)}}handleError(e,t){console.error(`Vue HMR error:`,t),super.handleError(e,t);let n=e.querySelector(`.hmr-error-indicator`);if(n){let e=t.message,r=``;e.includes(`reactive`)||e.includes(`ref`)?r=` (Hint: Check reactive state usage - refs must be accessed with .value)`:e.includes(`render`)?r=` (Hint: Check component render function or template for errors)`:e.includes(`hydration`)||e.includes(`mismatch`)?r=` (Hint: Server and client render must match)`:e.includes(`setup`)&&(r=` (Hint: Check setup function - it should return render function or object)`),n.textContent=`Vue HMR Error: ${e}${r}`}}extractComponentName(e){return(e.split(`/`).at(-1)??``).replace(/\.(vue|tsx?|jsx?)$/,``)}generateComponentId(e){return e.replaceAll(/[^a-zA-Z0-9]/g,`_`)}captureReactiveData(e){try{let t=e.__vueParentComponent;if(t&&typeof t==`object`){let e=t.data;if(e&&typeof e==`object`)return{...e}}}catch(e){console.debug(`Could not capture Vue reactive data:`,e)}}unmount(e){let t=this.apps.get(e);if(t)try{t.unmount(),this.apps.delete(e),this.componentIds.delete(e)}catch(e){console.warn(`Failed to unmount Vue app:`,e)}}}export const vueAdapter=new VueHMRAdapter;

package/{client/hydration.ts → dist/client/hydration.js}

@@ -1,124 +1,76 @@
-/**
- * Vue Client Hydration
- * 
- * Provides client-side hydration for Vue components.
- * Attaches interactivity to server-rendered Vue components.
- */
-
-import { createApp } from "vue";
-import type { Component } from "vue";
-
-/**
- * Hydrate a Vue component on the client
- * 
- * Creates a Vue app instance and mounts it to the container element,
- * hydrating the server-rendered HTML.
- * 
- * @param container - DOM element containing server-rendered HTML
- * @param component - Vue component to hydrate
- * @param props - Component props
- */
-export function hydrate(
-  container: Element,
-  component: unknown,
-  props: Record<string, unknown> = {},
-): void {
-  try {
-    // Create Vue app with the component and props
-    // Type assertion needed because component is dynamically loaded
-    const app = createApp(component as Component, props);
-    
-    // Mount and hydrate
-    app.mount(container, true);
-  } catch (error) {
-    console.error("Vue hydration failed:", error);
-    throw error;
-  }
-}
-
-/**
- * Get the hydration script for Vue islands
- * 
- * Returns a script that will be injected into the page to handle
- * automatic hydration of Vue islands based on their conditions.
- * 
- * @returns Hydration script as a string
- */
-export function getHydrationScript(): string {
-  return `
-    import { createApp } from 'vue';
-    
-    // Auto-hydrate all Vue islands
-    document.querySelectorAll('[data-framework="vue"]').forEach(async (el) => {
-      const src = el.getAttribute('data-src');
-      const propsJson = el.getAttribute('data-props') || '{}';
-      const condition = el.getAttribute('data-condition') || 'on:client';
-      
-      // Check hydration condition
-      if (!shouldHydrate(el, condition)) {
-        return;
-      }
-      
-      try {
-        // Dynamic import the component
-        const module = await import(src);
-        const Component = module.default || module;
-        
-        // Parse props
-        const props = JSON.parse(propsJson);
-        
-        // Create and mount Vue app
-        const app = createApp(Component, props);
-        app.mount(el, true);
-      } catch (error) {
-        console.error('Failed to hydrate Vue island:', error);
-      }
-    });
-    
-    function shouldHydrate(element, condition) {
-      if (!condition || condition === 'on:client') {
-        return true;
-      }
-      
-      if (condition === 'on:visible') {
-        return new Promise((resolve) => {
-          const observer = new IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting) {
-              observer.disconnect();
-              resolve(true);
-            }
-          });
-          observer.observe(element);
-        });
-      }
-      
-      if (condition === 'on:interaction') {
-        return new Promise((resolve) => {
-          const events = ['click', 'mouseenter', 'focusin', 'touchstart'];
-          const handler = () => {
-            events.forEach(e => element.removeEventListener(e, handler));
-            resolve(true);
-          };
-          events.forEach(e => element.addEventListener(e, handler, { once: true }));
-        });
-      }
-      
-      if (condition === 'on:idle') {
-        return new Promise((resolve) => {
-          if ('requestIdleCallback' in window) {
-            requestIdleCallback(() => resolve(true));
-          } else {
-            setTimeout(() => resolve(true), 200);
-          }
-        });
-      }
-      
-      if (condition.startsWith('media:')) {
-        const query = condition.slice(6);
-        return window.matchMedia(query).matches;
-      }
-      
-      return true;
-    }
-  `;
-}
+import{createApp as e}from"vue";export function hydrate(t,n,r={}){try{e(n,r).mount(t,!0)}catch(e){throw console.error(`Vue hydration failed:`,e),e}}export function getHydrationScript(){return`
+    import { createApp } from 'vue';
+    
+    // Auto-hydrate all Vue islands
+    document.querySelectorAll('[data-framework="vue"]').forEach(async (el) => {
+      const src = el.getAttribute('data-src');
+      const propsJson = el.getAttribute('data-props') || '{}';
+      const condition = el.getAttribute('data-condition') || 'on:client';
+      
+      // Check hydration condition
+      if (!shouldHydrate(el, condition)) {
+        return;
+      }
+      
+      try {
+        // Dynamic import the component
+        const module = await import(src);
+        const Component = module.default || module;
+        
+        // Parse props
+        const props = JSON.parse(propsJson);
+        
+        // Create and mount Vue app
+        const app = createApp(Component, props);
+        app.mount(el, true);
+      } catch (error) {
+        console.error('Failed to hydrate Vue island:', error);
+      }
+    });
+    
+    function shouldHydrate(element, condition) {
+      if (!condition || condition === 'on:client') {
+        return true;
+      }
+      
+      if (condition === 'on:visible') {
+        return new Promise((resolve) => {
+          const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+              observer.disconnect();
+              resolve(true);
+            }
+          });
+          observer.observe(element);
+        });
+      }
+      
+      if (condition === 'on:interaction') {
+        return new Promise((resolve) => {
+          const events = ['click', 'mouseenter', 'focusin', 'touchstart'];
+          const handler = () => {
+            events.forEach(e => element.removeEventListener(e, handler));
+            resolve(true);
+          };
+          events.forEach(e => element.addEventListener(e, handler, { once: true }));
+        });
+      }
+      
+      if (condition === 'on:idle') {
+        return new Promise((resolve) => {
+          if ('requestIdleCallback' in window) {
+            requestIdleCallback(() => resolve(true));
+          } else {
+            setTimeout(() => resolve(true), 200);
+          }
+        });
+      }
+      
+      if (condition.startsWith('media:')) {
+        const query = condition.slice(6);
+        return window.matchMedia(query).matches;
+      }
+      
+      return true;
+    }
+  `}

package/dist/client/index.js

@@ -0,0 +1 @@
+export{hydrate,getHydrationScript}from"./hydration.js";

package/dist/mod.js

@@ -0,0 +1 @@
+import{render as e}from"./server/renderer.js";import{getHydrationScript as t}from"./client/hydration.js";export const vueIntegration={name:`vue`,version:`0.1.0`,render:e,getHydrationScript:t,config(){return{name:`vue`,fileExtensions:[`.vue`],jsxImportSources:[],detectionPatterns:{imports:[/^vue$/,/^vue\//,/from\s+['"]vue['"]/],content:[/<template>/,/<script.*setup>/,/\bdefineComponent\b/,/\bref\b/,/\breactive\b/,/\bcomputed\b/]}}},async vitePlugin(){let{default:e}=await import(`@vitejs/plugin-vue`);return e({template:{compilerOptions:{isCustomElement:e=>e===`avalon-island`}}})}};export{render}from"./server/renderer.js";export{hydrate,getHydrationScript}from"./client/hydration.js";export{extractCSS,applyScopedCSS,generateScopeId}from"./server/css-extractor.js";

package/dist/server/css-extractor.js

@@ -0,0 +1 @@
+import{readFile as e}from"node:fs/promises";export async function extractCSS(t,a={}){let o=[t.startsWith(`/`)?`src${t}`:t,t.replace(`/islands/`,`/src/islands/`),t.startsWith(`/`)?t.substring(1):t],s=``;for(let t of o)try{s=await e(t,`utf-8`);break}catch{continue}if(!s)throw Error(`Vue file not found in any of the attempted paths: ${o.join(`, `)}`);let c=r(s);if(c.length===0)return``;let l=a.scopeId||generateScopeId(t),u=``;for(let e of c)e.scoped?u+=applyScopedCSS(e.content,l):u+=e.content;return u}export function applyScopedCSS(e,t){return e.replace(/([^{}]+){/g,(e,n)=>{let r=n.trim();return r.startsWith(`@`)?e:`${r.split(`,`).map(e=>`${e.trim()}[${t}]`).join(`, `)} {`})}function r(e){let t=/<style([^>]*)>([\s\S]*?)<\/style>/gi,n=[],r;for(;(r=t.exec(e))!==null;){let e=r[1],t=r[2].trim(),i=e.includes(`scoped`);n.push({content:t,scoped:i,attributes:e})}return n}export function generateScopeId(e){return`data-v-${e.replace(/[^a-zA-Z0-9]/g,``).toLowerCase()}`}export function applyScopeToHTML(e,t){return e.replace(/<([a-zA-Z][^>]*?)>/g,(e,n)=>n.startsWith(`/`)||n.endsWith(`/`)?e:`<${n} ${t}>`)}

package/dist/server/renderer.js

@@ -0,0 +1 @@
+import{createSSRApp as e}from"vue";import{renderToString as t}from"vue/server-renderer";import{extractCSS as n,generateScopeId as r,applyScopeToHTML as i}from"./css-extractor.js";import{toImportSpecifier as a}from"@useavalon/core/utils";import{resolveIslandPath as o}from"@useavalon/avalon/islands/framework-detection";export async function render(a){let{component:o,props:s={},src:l,condition:u=`on:client`,ssrOnly:d=!1}=a;try{let a=await t(e(await c(l),s)),o=``,f=``;try{f=r(l),o=await n(l,{scopeId:f})}catch{}let p=a;return o&&(p=i(a,f)),{html:p,css:o||void 0,scopeId:f||void 0,hydrationData:{src:l,props:s,framework:`vue`,condition:u,ssrOnly:d}}}catch(e){throw Error(`Vue SSR rendering failed: ${e}`)}}async function c(e){if(process.env.NODE_ENV!==`production`&&globalThis.__viteDevServer){let t=globalThis.__viteDevServer,n=await o(e),r=await t.ssrLoadModule(n);return r.default||r}let t=await import(a(e.replace(`/islands/`,`/dist/ssr/islands/`).replace(`.vue`,`.js`)));return t.default||t}export function getComponentMetadata(e){return typeof e==`object`&&e?{name:e.name||`Anonymous`,type:`component`,hasSetup:`setup`in e,hasTemplate:`template`in e,hasRender:`render`in e}:{type:typeof e}}

package/dist/types.js

@@ -0,0 +1 @@
+export{};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@useavalon/vue",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"description": "Vue integration for Avalon islands architecture",
 	"license": "MIT",
 	"type": "module",
@@ -18,22 +18,23 @@
 		"hydration"
 	],
 	"exports": {
-		".": "./mod.ts",
-		"./server": "./server/renderer.ts",
-		"./client": "./client/index.ts",
-		"./client/hmr": "./client/hmr-adapter.ts",
-		"./types": "./types.ts"
+		".": "./dist/mod.js",
+		"./server": "./dist/server/renderer.js",
+		"./client": "./dist/client/index.js",
+		"./client/hmr": "./dist/client/hmr-adapter.js",
+		"./types": "./dist/types.js"
+	},
+	"scripts": {
+		"build": "bun run ../../../scripts/build-package.ts",
+		"prepublishOnly": "bun run build"
 	},
 	"files": [
-		"**/*.ts",
-		"**/*.tsx",
-		"!**/__tests__/**",
-		"!**/*.test.ts",
-		"!vitest.config.ts",
+		"dist/**/*.js",
+		"dist/**/*.d.ts",
 		"README.md"
 	],
 	"dependencies": {
-		"@useavalon/avalon": "^0.1.12",
+		"@useavalon/avalon": "^0.1.15",
 		"@useavalon/core": "^0.1.3",
 		"@vitejs/plugin-vue": "^5.2.4"
 	},

package/client/hmr-adapter.ts

@@ -1,226 +0,0 @@
-/**
- * Vue HMR Adapter
- *
- * Provides Hot Module Replacement support for Vue 3 components.
- * Integrates with @vitejs/plugin-vue to preserve reactive state during updates.
- * Uses Vue's __VUE_HMR_RUNTIME__ API for hot updates.
- */
-
-/// <reference lib="dom" />
-
-import { BaseFrameworkAdapter, type StateSnapshot } from '@useavalon/avalon/client/hmr';
-
-type VueComponent<P = Record<string, unknown>> = VueComponentOptions<P> | ((props: P) => unknown);
-
-interface VueComponentOptions<P = Record<string, unknown>> {
-	name?: string;
-	props?: string[] | Record<string, unknown>;
-	data?: () => Record<string, unknown>;
-	setup?: (props: P, context: unknown) => unknown;
-	render?: () => unknown;
-	template?: string;
-	components?: Record<string, VueComponent>;
-	computed?: Record<string, () => unknown>;
-	methods?: Record<string, (...args: unknown[]) => unknown>;
-	watch?: Record<string, unknown>;
-	emits?: string[] | Record<string, unknown>;
-	expose?: string[];
-	beforeCreate?: () => void;
-	created?: () => void;
-	beforeMount?: () => void;
-	mounted?: () => void;
-	beforeUpdate?: () => void;
-	updated?: () => void;
-	beforeUnmount?: () => void;
-	unmounted?: () => void;
-}
-
-interface VueApp {
-	mount(rootContainer: HTMLElement | string, isHydrate?: boolean): unknown;
-	unmount(): void;
-	use(plugin: unknown, ...options: unknown[]): this;
-	component(name: string, component: VueComponent): this;
-	directive(name: string, directive: unknown): this;
-	provide(key: string | symbol, value: unknown): this;
-	config: {
-		errorHandler?: (err: Error, instance: unknown, info: string) => void;
-		warnHandler?: (msg: string, instance: unknown, trace: string) => void;
-	};
-}
-
-interface VueModule {
-	createApp(rootComponent: VueComponent, rootProps?: Record<string, unknown>): VueApp;
-	version: string;
-}
-
-interface VueHMRRuntime {
-	createRecord(id: string, component: VueComponent): boolean;
-	reload(id: string, component: VueComponent): void;
-	rerender(id: string, render: () => unknown): void;
-}
-
-declare global {
-	var __VUE_HMR_RUNTIME__: VueHMRRuntime | undefined;
-}
-
-interface VueStateSnapshot extends StateSnapshot {
-	framework: 'vue';
-	data: {
-		reactiveData?: Record<string, unknown>;
-		componentName?: string;
-		capturedProps?: Record<string, unknown>;
-		computedValues?: Record<string, unknown>;
-	};
-}
-
-export class VueHMRAdapter extends BaseFrameworkAdapter {
-	readonly name = 'vue';
-	private apps: WeakMap<HTMLElement, VueApp> = new WeakMap();
-	private componentIds: WeakMap<HTMLElement, string> = new WeakMap();
-
-	canHandle(component: unknown): boolean {
-		if (!component) return false;
-		if (typeof component === 'function') return true;
-		if (typeof component !== 'object') return false;
-		const obj = component as Record<string, unknown>;
-		if (
-			'setup' in obj ||
-			'data' in obj ||
-			'render' in obj ||
-			'template' in obj ||
-			'props' in obj ||
-			'computed' in obj ||
-			'methods' in obj ||
-			'components' in obj ||
-			'emits' in obj ||
-			'mounted' in obj ||
-			'created' in obj ||
-			'beforeMount' in obj ||
-			'beforeCreate' in obj
-		)
-			return true;
-		if ('__vccOpts' in obj) return true;
-		return false;
-	}
-
-	override preserveState(island: HTMLElement): VueStateSnapshot | null {
-		try {
-			const baseSnapshot = super.preserveState(island);
-			if (!baseSnapshot) return null;
-			const capturedProps = island.dataset.props ? JSON.parse(island.dataset.props) : {};
-			const componentName = this.extractComponentName(island.dataset.src || '');
-			const reactiveData = this.captureReactiveData(island);
-			return { ...baseSnapshot, framework: 'vue', data: { componentName, capturedProps, reactiveData } };
-		} catch (error) {
-			console.warn('Failed to preserve Vue state:', error);
-			return null;
-		}
-	}
-
-	async update(island: HTMLElement, newComponent: unknown, props: Record<string, unknown>): Promise<void> {
-		if (!this.canHandle(newComponent)) throw new Error('Component is not a valid Vue component');
-		const Component = newComponent as VueComponent;
-		try {
-			const vueModule = (await import('vue')) as VueModule;
-			const { createApp } = vueModule;
-			const existingApp = this.apps.get(island);
-			const componentId = this.componentIds.get(island);
-			const hmrRuntime = globalThis.__VUE_HMR_RUNTIME__;
-			if (hmrRuntime && componentId) {
-				try {
-					hmrRuntime.reload(componentId, Component);
-					if (existingApp) return;
-				} catch (error) {
-					console.warn('Vue HMR runtime reload failed, falling back to full remount:', error);
-				}
-			}
-			if (existingApp) {
-				try {
-					existingApp.unmount();
-				} catch (error) {
-					console.warn('Failed to unmount existing Vue app:', error);
-				}
-			}
-			const app = createApp(Component, props);
-			app.config.errorHandler = (err: Error, _instance: unknown, info: string) => {
-				console.error('Vue component error during HMR:', err, info);
-			};
-			app.mount(island, true);
-			this.apps.set(island, app);
-			const src = island.dataset.src || '';
-			const newComponentId = this.generateComponentId(src);
-			this.componentIds.set(island, newComponentId);
-			if (hmrRuntime) hmrRuntime.createRecord(newComponentId, Component);
-			island.dataset.hydrated = 'true';
-			island.dataset.hydrationStatus = 'success';
-		} catch (error) {
-			console.error('Vue HMR update failed:', error);
-			island.dataset.hydrationStatus = 'error';
-			throw error;
-		}
-	}
-
-	override restoreState(island: HTMLElement, state: StateSnapshot): void {
-		try {
-			super.restoreState(island, state);
-		} catch (error) {
-			console.warn('Failed to restore Vue state:', error);
-		}
-	}
-
-	override handleError(island: HTMLElement, error: Error): void {
-		console.error('Vue HMR error:', error);
-		super.handleError(island, error);
-		const errorIndicator = island.querySelector('.hmr-error-indicator');
-		if (errorIndicator) {
-			const msg = error.message;
-			let hint = '';
-			if (msg.includes('reactive') || msg.includes('ref'))
-				hint = ' (Hint: Check reactive state usage - refs must be accessed with .value)';
-			else if (msg.includes('render')) hint = ' (Hint: Check component render function or template for errors)';
-			else if (msg.includes('hydration') || msg.includes('mismatch'))
-				hint = ' (Hint: Server and client render must match)';
-			else if (msg.includes('setup'))
-				hint = ' (Hint: Check setup function - it should return render function or object)';
-			errorIndicator.textContent = `Vue HMR Error: ${msg}${hint}`;
-		}
-	}
-
-	private extractComponentName(src: string): string {
-		const parts = src.split('/');
-		const filename = parts.at(-1) ?? '';
-		return filename.replace(/\.(vue|tsx?|jsx?)$/, '');
-	}
-
-	private generateComponentId(src: string): string {
-		return src.replaceAll(/[^a-zA-Z0-9]/g, '_');
-	}
-
-	private captureReactiveData(island: HTMLElement): Record<string, unknown> | undefined {
-		try {
-			const vueInstance = (island as unknown as { __vueParentComponent?: unknown }).__vueParentComponent;
-			if (vueInstance && typeof vueInstance === 'object') {
-				const data = (vueInstance as { data?: Record<string, unknown> }).data;
-				if (data && typeof data === 'object') return { ...data };
-			}
-		} catch (error) {
-			console.debug('Could not capture Vue reactive data:', error);
-		}
-		return undefined;
-	}
-
-	unmount(island: HTMLElement): void {
-		const app = this.apps.get(island);
-		if (app) {
-			try {
-				app.unmount();
-				this.apps.delete(island);
-				this.componentIds.delete(island);
-			} catch (error) {
-				console.warn('Failed to unmount Vue app:', error);
-			}
-		}
-	}
-}
-
-export const vueAdapter = new VueHMRAdapter();

package/client/index.ts

@@ -1,7 +0,0 @@
-/**
- * Vue Integration Client Entrypoint
- * 
- * Main export for client-side Vue integration functionality.
- */
-
-export { hydrate, getHydrationScript } from "./hydration.ts";

package/mod.ts

@@ -1,59 +0,0 @@
-/**
- * Vue Integration for Avalon
- *
- * Provides Vue 3 support with SSR, hydration, and scoped CSS extraction.
- * This integration enables Vue Single File Components (.vue) to work
- * seamlessly with Avalon's islands architecture.
- */
-
-import type { Plugin } from 'vite';
-import type { Integration, IntegrationConfig } from '@useavalon/core/types';
-import { render } from './server/renderer.ts';
-import { getHydrationScript } from './client/hydration.ts';
-
-/**
- * Vue integration instance
- *
- * Implements the standard Integration interface for Vue components.
- */
-export const vueIntegration: Integration = {
-	name: 'vue',
-	version: '0.1.0',
-
-	render,
-	getHydrationScript,
-
-	config(): IntegrationConfig {
-		return {
-			name: 'vue',
-			fileExtensions: ['.vue'],
-			jsxImportSources: [],
-			detectionPatterns: {
-				imports: [/^vue$/, /^vue\//, /from\s+['"]vue['"]/],
-				content: [/<template>/, /<script.*setup>/, /\bdefineComponent\b/, /\bref\b/, /\breactive\b/, /\bcomputed\b/],
-			},
-		};
-	},
-
-	/**
-	 * Provides the @vitejs/plugin-vue Vite plugin with avalon-island custom element configuration.
-	 * This allows Vue components to work seamlessly with Avalon's islands architecture.
-	 */
-	async vitePlugin(): Promise<Plugin | Plugin[]> {
-		const { default: vue } = await import('@vitejs/plugin-vue');
-		return vue({
-			template: {
-				compilerOptions: {
-					// Treat avalon-island as a custom element so Vue doesn't try to resolve it
-					isCustomElement: (tag: string) => tag === 'avalon-island',
-				},
-			},
-		});
-	},
-};
-
-// Re-export public API
-export { render } from './server/renderer.ts';
-export { hydrate, getHydrationScript } from './client/hydration.ts';
-export { extractCSS, applyScopedCSS, generateScopeId } from './server/css-extractor.ts';
-export type * from './types.ts';

package/server/css-extractor.ts

@@ -1,175 +0,0 @@
-/**
- * Vue CSS Extractor
- * 
- * Utilities for extracting and processing CSS from Vue Single File Components.
- * Handles both scoped and global styles with proper attribute application.
- */
-
-import { readFile } from "node:fs/promises";
-import type { CSSExtractionOptions, StyleBlock } from "../types.ts";
-
-/**
- * Extract CSS from Vue Single File Component
- * 
- * Parses <style> blocks from .vue files and applies scoping if needed.
- * Supports both scoped and global styles.
- * 
- * @param src - Path to the Vue component file
- * @param options - CSS extraction options
- * @returns Extracted and processed CSS string
- */
-export async function extractCSS(
-  src: string,
-  options: CSSExtractionOptions = {},
-) {
-  // Try different path variations to find the Vue file
-  const pathVariations = [
-    // Standard framework paths
-    src.startsWith("/") ? `src${src}` : src,
-    src.replace("/islands/", "/src/islands/"),
-    // Remove leading slash variations
-    src.startsWith("/") ? src.substring(1) : src,
-  ];
-
-  let vueContent = "";
-  
-  for (const path of pathVariations) {
-    try {
-      vueContent = await readFile(path, "utf-8");
-      break;
-    } catch {
-      continue;
-    }
-  }
-
-  if (!vueContent) {
-    throw new Error(
-      `Vue file not found in any of the attempted paths: ${
-        pathVariations.join(", ")
-      }`,
-    );
-  }
-
-  // Extract all style blocks
-  const styleBlocks = extractStyleBlocks(vueContent);
-  
-  if (styleBlocks.length === 0) {
-    return "";
-  }
-
-  // Generate scope ID if not provided
-  const scopeId = options.scopeId || generateScopeId(src);
-
-  // Process each style block
-  let componentCSS = "";
-  
-  for (const block of styleBlocks) {
-    if (block.scoped) {
-      componentCSS += applyScopedCSS(block.content, scopeId);
-    } else {
-      componentCSS += block.content;
-    }
-  }
-
-  return componentCSS;
-}
-
-/**
- * Apply scoped CSS transformation
- * 
- * Adds scope attributes to CSS selectors for Vue's scoped styles.
- * Skips at-rules like @media, @keyframes, etc.
- * 
- * @param css - CSS content to scope
- * @param scopeId - Scope identifier (e.g., "data-v-abc123")
- * @returns Scoped CSS string
- */
-export function applyScopedCSS(css: string, scopeId: string) {
-  return css.replace(/([^{}]+){/g, (match, selector) => {
-    const trimmedSelector = selector.trim();
-    
-    // Skip at-rules (@media, @keyframes, @supports, etc.)
-    if (trimmedSelector.startsWith("@")) {
-      return match;
-    }
-    
-    // Add scope attribute to each selector
-    // Handle multiple selectors separated by commas
-    const scopedSelectors = trimmedSelector
-      .split(",")
-      .map((s: string) => `${s.trim()}[${scopeId}]`)
-      .join(", ");
-    
-    return `${scopedSelectors} {`;
-  });
-}
-
-/**
- * Extract style blocks from Vue SFC content
- * 
- * Parses <style> tags and extracts their content and attributes.
- * 
- * @param vueContent - Vue SFC file content
- * @returns Array of style blocks with metadata
- */
-function extractStyleBlocks(vueContent: string) {
-  const styleRegex = /<style([^>]*)>([\s\S]*?)<\/style>/gi;
-  const blocks: StyleBlock[] = [];
-  let match;
-
-  while ((match = styleRegex.exec(vueContent)) !== null) {
-    const attributes = match[1];
-    const content = match[2].trim();
-    const isScoped = attributes.includes("scoped");
-
-    blocks.push({
-      content,
-      scoped: isScoped,
-      attributes,
-    });
-  }
-
-  return blocks;
-}
-
-/**
- * Generate a consistent scope ID for a component
- * 
- * Creates a deterministic scope ID based on the component path.
- * Format: "data-v-{hash}" where hash is derived from the path.
- * 
- * @param src - Component source path
- * @returns Scope ID string
- */
-export function generateScopeId(src: string) {
-  // Remove special characters and convert to lowercase for consistency
-  const hash = src.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
-  return `data-v-${hash}`;
-}
-
-/**
- * Apply scope attributes to HTML elements
- * 
- * Adds scope attributes to HTML tags for matching with scoped CSS.
- * Skips closing tags and self-closing tags.
- * 
- * @param html - HTML string to process
- * @param scopeId - Scope identifier
- * @returns HTML with scope attributes
- */
-export function applyScopeToHTML(html: string, scopeId: string) {
-  return html.replace(/<([a-zA-Z][^>]*?)>/g, (match, tagContent) => {
-    // Skip closing tags
-    if (tagContent.startsWith("/")) {
-      return match;
-    }
-    
-    // Skip self-closing tags (already have /)
-    if (tagContent.endsWith("/")) {
-      return match;
-    }
-    
-    // Add scope attribute
-    return `<${tagContent} ${scopeId}>`;
-  });
-}

package/server/renderer.ts

@@ -1,116 +0,0 @@
-/**
- * Vue Server Renderer
- *
- * Provides server-side rendering capabilities for Vue components.
- * Uses Vue's official SSR API with proper hydration support.
- *
- * Migrated from src/islands/renderers/vue-renderer.ts
- */
-
-import { createSSRApp } from 'vue';
-import { renderToString as vueRenderToString } from 'vue/server-renderer';
-import type { RenderParams, RenderResult } from '@useavalon/core/types';
-import { extractCSS, generateScopeId, applyScopeToHTML } from './css-extractor.ts';
-import { toImportSpecifier } from '@useavalon/core/utils';
-import { resolveIslandPath } from '@useavalon/avalon/islands/framework-detection';
-
-/**
- * Render a Vue component to HTML string with SSR
- *
- * Creates a Vue SSR app instance and renders it to string.
- * Extracts and applies scoped CSS from the component.
- *
- * Based on Vue.js SSR documentation and Astro's Vue integration:
- * - Creates proper SSR app with createSSRApp
- * - Wraps SSR HTML in a div with data-server-rendered="true"
- * - Uses consistent container structure for client hydration
- *
- * @param params - Render parameters including component, props, and source path
- * @returns Render result with HTML, CSS, and hydration data
- */
-export async function render(params: RenderParams): Promise<RenderResult> {
-	const { component: _component, props = {}, src, condition = 'on:client', ssrOnly = false } = params;
-
-	try {
-		const VueComponent = await loadComponent(src);
-
-		const app = createSSRApp(VueComponent as any, props);
-		const ssrHtml = await vueRenderToString(app);
-
-		let componentCSS = '';
-		let scopeId = '';
-
-		try {
-			scopeId = generateScopeId(src);
-			componentCSS = await extractCSS(src, { scopeId });
-		} catch {
-			// CSS extraction failed, continue without CSS
-		}
-
-		let finalHtml = ssrHtml;
-		if (componentCSS) {
-			finalHtml = applyScopeToHTML(ssrHtml, scopeId);
-		}
-
-		return {
-			html: finalHtml,
-			css: componentCSS || undefined,
-			scopeId: scopeId || undefined,
-			hydrationData: { src, props, framework: 'vue', condition, ssrOnly },
-		};
-	} catch (error) {
-		throw new Error(`Vue SSR rendering failed: ${error}`);
-	}
-}
-
-/**
- * Load a Vue component module
- *
- * Handles both development (via Vite) and production (pre-built) scenarios.
- *
- * @param src - Component source path
- * @returns Vue component module
- */
-async function loadComponent(src: string) {
-	const isDev = process.env.NODE_ENV !== 'production';
-
-	if (isDev && (globalThis as any).__viteDevServer) {
-		// Development: use Vite's SSR module loading
-
-		const viteServer = (globalThis as any).__viteDevServer;
-		const resolvedPath = await resolveIslandPath(src);
-		const module = await viteServer.ssrLoadModule(resolvedPath);
-		return module.default || module;
-	}
-
-	// Production: load from build output
-	const ssrPath = src.replace('/islands/', '/dist/ssr/islands/').replace('.vue', '.js');
-
-	const module = await import(
-		/* @vite-ignore */
-		toImportSpecifier(ssrPath)
-	);
-	return module.default || module;
-}
-
-/**
- * Get component metadata for debugging
- *
- * @param component - Vue component
- * @returns Component metadata object
- */
-export function getComponentMetadata(component: unknown) {
-	if (typeof component === 'object' && component !== null) {
-		return {
-			name: (component as { name?: string }).name || 'Anonymous',
-			type: 'component',
-			hasSetup: 'setup' in component,
-			hasTemplate: 'template' in component,
-			hasRender: 'render' in component,
-		};
-	}
-
-	return {
-		type: typeof component,
-	};
-}

package/types.ts

@@ -1,80 +0,0 @@
-/**
- * Vue Integration Types
- * 
- * Type definitions specific to the Vue integration package.
- */
-
-import type { RenderParams, RenderResult } from '@useavalon/core/types';
-
-/**
- * Vue-specific render parameters
- */
-export interface VueRenderParams extends RenderParams {
-  /**
-   * Vue app context for SSR
-   */
-  context?: Map<string, unknown>;
-}
-
-/**
- * Vue-specific render result with CSS extraction
- */
-export interface VueRenderResult extends RenderResult {
-  /**
-   * Extracted CSS from Vue SFC <style> blocks
-   */
-  css?: string;
-  
-  /**
-   * Head content (e.g., meta tags, title)
-   */
-  head?: string;
-  
-  /**
-   * Scope ID for scoped styles
-   */
-  scopeId?: string;
-}
-
-/**
- * Vue component module structure
- */
-export interface VueComponentModule {
-  default?: unknown;
-  [key: string]: unknown;
-}
-
-/**
- * CSS extraction options
- */
-export interface CSSExtractionOptions {
-  /**
-   * Whether to apply scoping to CSS
-   */
-  scoped?: boolean;
-  
-  /**
-   * Custom scope ID (generated if not provided)
-   */
-  scopeId?: string;
-}
-
-/**
- * Style block metadata from Vue SFC
- */
-export interface StyleBlock {
-  /**
-   * CSS content
-   */
-  content: string;
-  
-  /**
-   * Whether the style is scoped
-   */
-  scoped: boolean;
-  
-  /**
-   * Style attributes (e.g., lang, scoped)
-   */
-  attributes: string;
-}