@useavalon/vue 0.1.0

package/README.md

@@ -0,0 +1,42 @@
+# @useavalon/vue
+
+Vue 3 integration for [Avalon](https://useavalon.dev). Server-side rendering and client-side hydration for Vue Single File Components as islands.
+
+## Features
+
+- Vue 3 with Composition API and `<script setup>`
+- Server-side rendering via `@vue/server-renderer`
+- Scoped CSS extraction from SFCs
+- All hydration strategies (`on:client`, `on:visible`, `on:idle`, `on:interaction`)
+
+## Usage
+
+```vue
+<!-- components/Counter.vue -->
+<script setup>
+import { ref } from 'vue';
+const count = ref(0);
+</script>
+
+<template>
+  <button @click="count++">Count: {{ count }}</button>
+</template>
+```
+
+```tsx
+// pages/index.tsx
+import Counter from '../components/Counter.vue';
+
+export default function Home() {
+  return <Counter island={{ condition: 'on:visible' }} />;
+}
+```
+
+## Links
+
+- [Documentation](https://useavalon.dev/docs/frameworks/vue)
+- [GitHub](https://github.com/useAvalon/Avalon)
+
+## License
+
+MIT

package/__tests__/config.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest';
+import { vueIntegration } from '../mod.ts';
+
+describe('vueIntegration.config()', () => {
+	const cfg = vueIntegration.config();
+
+	it('returns "vue" as the integration name', () => {
+		expect(cfg.name).toBe('vue');
+	});
+
+	it('declares .vue file extension', () => {
+		expect(cfg.fileExtensions).toEqual(['.vue']);
+	});
+
+	describe('detection patterns - imports', () => {
+		const { imports } = cfg.detectionPatterns;
+
+		it('matches bare "vue" import', () => {
+			expect(imports.some((r) => r.test('vue'))).toBe(true);
+		});
+
+		it('matches "vue/" subpath import', () => {
+			expect(imports.some((r) => r.test('vue/server-renderer'))).toBe(true);
+		});
+
+		it('matches from "vue" import statement', () => {
+			const code = "import { ref } from 'vue'";
+			expect(imports.some((r) => r.test(code))).toBe(true);
+		});
+
+		it('does not match unrelated imports', () => {
+			const code = "import { render } from 'react'";
+			expect(imports.some((r) => r.test(code))).toBe(false);
+		});
+	});
+
+	describe('detection patterns - content', () => {
+		const { content } = cfg.detectionPatterns;
+
+		it('matches <template> tag', () => {
+			expect(content.some((r) => r.test('<template>'))).toBe(true);
+		});
+
+		it('matches <script setup> tag', () => {
+			expect(content.some((r) => r.test('<script setup>'))).toBe(true);
+		});
+
+		it('matches <script lang="ts" setup> tag', () => {
+			expect(content.some((r) => r.test('<script lang="ts" setup>'))).toBe(true);
+		});
+
+		it('matches defineComponent API', () => {
+			expect(content.some((r) => r.test('defineComponent({ })'))).toBe(true);
+		});
+
+		it('matches ref API', () => {
+			expect(content.some((r) => r.test('const count = ref(0)'))).toBe(true);
+		});
+
+		it('matches reactive API', () => {
+			expect(content.some((r) => r.test('const state = reactive({})'))).toBe(true);
+		});
+
+		it('matches computed API', () => {
+			expect(content.some((r) => r.test('const doubled = computed(() => count.value * 2)'))).toBe(true);
+		});
+
+		it('does not match unrelated content', () => {
+			expect(content.some((r) => r.test('const x = 42'))).toBe(false);
+		});
+	});
+});
+
+describe('vueIntegration.getHydrationScript()', () => {
+	const script = vueIntegration.getHydrationScript();
+
+	it('returns a non-empty string', () => {
+		expect(script).toBeTruthy();
+		expect(typeof script).toBe('string');
+		expect(script.length).toBeGreaterThan(0);
+	});
+
+	it('contains a query selector for data-framework="vue"', () => {
+		expect(script).toContain('data-framework="vue"');
+	});
+
+	it('contains dynamic import logic', () => {
+		expect(script).toContain('import(');
+	});
+});

package/__tests__/css-extractor.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest';
+import { applyScopedCSS, applyScopeToHTML, generateScopeId } from '../server/css-extractor.ts';
+
+describe('applyScopedCSS', () => {
+	it('appends scope attribute to a simple selector', () => {
+		const css = '.foo { color: red; }';
+		const result = applyScopedCSS(css, 'data-v-abc123');
+		expect(result).toContain('.foo[data-v-abc123]');
+		expect(result).toContain('color: red;');
+	});
+
+	it('scopes multiple comma-separated selectors', () => {
+		const css = '.foo, .bar { margin: 0; }';
+		const result = applyScopedCSS(css, 'data-v-abc123');
+		expect(result).toContain('.foo[data-v-abc123]');
+		expect(result).toContain('.bar[data-v-abc123]');
+	});
+
+	it('scopes element selectors', () => {
+		const css = 'h1 { font-size: 2em; }';
+		const result = applyScopedCSS(css, 'data-v-xyz');
+		expect(result).toContain('h1[data-v-xyz]');
+	});
+
+	it('scopes compound selectors', () => {
+		const css = '.parent .child { display: flex; }';
+		const result = applyScopedCSS(css, 'data-v-s1');
+		expect(result).toContain('.parent .child[data-v-s1]');
+	});
+
+	it('skips @media at-rules', () => {
+		const css = '@media (max-width: 600px) { .foo { color: red; } }';
+		const result = applyScopedCSS(css, 'data-v-abc');
+		// The @media rule itself should not be scoped
+		expect(result).toMatch(/@media\s*\(max-width:\s*600px\)/);
+	});
+
+	it('skips @keyframes at-rules', () => {
+		const css = '@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }';
+		const result = applyScopedCSS(css, 'data-v-abc');
+		expect(result).toContain('@keyframes fadeIn');
+	});
+
+	it('skips @supports at-rules', () => {
+		const css = '@supports (display: grid) { .grid { display: grid; } }';
+		const result = applyScopedCSS(css, 'data-v-abc');
+		expect(result).toMatch(/@supports\s*\(display:\s*grid\)/);
+	});
+
+	it('returns empty string for empty CSS', () => {
+		expect(applyScopedCSS('', 'data-v-abc')).toBe('');
+	});
+});
+
+describe('applyScopeToHTML', () => {
+	it('adds scope attribute to opening tags', () => {
+		const html = '<div class="wrapper"><span>hello</span></div>';
+		const result = applyScopeToHTML(html, 'data-v-abc');
+		expect(result).toContain('<div class="wrapper" data-v-abc>');
+		expect(result).toContain('<span data-v-abc>');
+	});
+
+	it('leaves closing tags unmodified', () => {
+		const html = '<div>text</div>';
+		const result = applyScopeToHTML(html, 'data-v-abc');
+		expect(result).toContain('</div>');
+		// Closing tag should not have the scope attribute
+		expect(result).not.toContain('</div data-v-abc>');
+	});
+
+	it('leaves self-closing tags unmodified', () => {
+		const html = '<img src="a.png"/>';
+		const result = applyScopeToHTML(html, 'data-v-abc');
+		// Self-closing tags ending with / are skipped by the implementation
+		expect(result).toContain('<img src="a.png"/>');
+	});
+
+	it('handles multiple opening tags', () => {
+		const html = '<ul><li>one</li><li>two</li></ul>';
+		const result = applyScopeToHTML(html, 'data-v-s1');
+		expect(result).toContain('<ul data-v-s1>');
+		expect(result).toContain('<li data-v-s1>');
+	});
+
+	it('returns empty string for empty HTML', () => {
+		expect(applyScopeToHTML('', 'data-v-abc')).toBe('');
+	});
+
+	it('handles tags with attributes', () => {
+		const html = '<a href="/link" class="btn">click</a>';
+		const result = applyScopeToHTML(html, 'data-v-abc');
+		expect(result).toContain('<a href="/link" class="btn" data-v-abc>');
+	});
+});
+
+describe('generateScopeId', () => {
+	it('returns a string starting with "data-v-"', () => {
+		const id = generateScopeId('/components/Foo.vue');
+		expect(id).toMatch(/^data-v-/);
+	});
+
+	it('returns deterministic output for the same input', () => {
+		const a = generateScopeId('/components/Foo.vue');
+		const b = generateScopeId('/components/Foo.vue');
+		expect(a).toBe(b);
+	});
+
+	it('returns different IDs for different paths', () => {
+		const a = generateScopeId('/components/Foo.vue');
+		const b = generateScopeId('/components/Bar.vue');
+		expect(a).not.toBe(b);
+	});
+
+	it('produces alphanumeric hash portion', () => {
+		const id = generateScopeId('/src/App.vue');
+		const hash = id.replace('data-v-', '');
+		expect(hash).toMatch(/^[a-z0-9]+$/);
+	});
+});

package/client/hydration.ts

@@ -0,0 +1,124 @@
+/**
+ * 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;
+    }
+  `;
+}

package/client/index.ts

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

package/mod.ts

@@ -0,0 +1,59 @@
+/**
+ * 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 '../core/types.ts';
+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/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@useavalon/vue",
+	"version": "0.1.0",
+	"description": "Vue integration for Avalon islands architecture",
+	"license": "MIT",
+	"type": "module",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/useAvalon/Avalon.git",
+		"directory": "packages/integrations/vue"
+	},
+	"homepage": "https://useavalon.dev/docs/frameworks/vue",
+	"keywords": ["avalon", "islands", "vue", "ssr", "hydration"],
+	"exports": {
+		".": "./mod.ts",
+		"./server": "./server/renderer.ts",
+		"./client": "./client/index.ts",
+		"./types": "./types.ts"
+	},
+	"files": ["**/*.ts", "**/*.tsx", "README.md"],
+	"dependencies": {
+		"vue": "3.5.21",
+		"vite": "8.0.0",
+		"@vitejs/plugin-vue": "^5.2.4"
+	}
+}

package/server/css-extractor.ts

@@ -0,0 +1,175 @@
+/**
+ * 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

@@ -0,0 +1,116 @@
+/**
+ * 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 '../../core/types.ts';
+import { extractCSS, generateScopeId, applyScopeToHTML } from './css-extractor.ts';
+import { toImportSpecifier } from '../../core/utils.ts';
+import { resolveIslandPath } from '../../../avalon/src/islands/framework-detection.ts';
+
+/**
+ * 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

@@ -0,0 +1,80 @@
+/**
+ * Vue Integration Types
+ * 
+ * Type definitions specific to the Vue integration package.
+ */
+
+import type { RenderParams, RenderResult } from "../core/types.ts";
+
+/**
+ * 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;
+}

package/vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    root: import.meta.dirname,
+    include: ['__tests__/**/*.test.ts'],
+    server: {
+      deps: {
+        inline: ['zod'],
+      },
+    },
+  },
+});