@useavalon/vue 0.1.2 → 0.1.3

package/server/renderer.ts

@@ -1,116 +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 '@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,
-	};
-}
+/**
+ * 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 +1,80 @@
-/**
- * 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;
-}
+/**
+ * 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;
+}

package/vitest.config.ts

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