@useavalon/vue 0.1.1 → 0.1.3

package/mod.ts

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

@@ -1,6 +1,6 @@
 {
 	"name": "@useavalon/vue",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"description": "Vue integration for Avalon islands architecture",
 	"license": "MIT",
 	"type": "module",
@@ -10,19 +10,35 @@
 		"directory": "packages/integrations/vue"
 	},
 	"homepage": "https://useavalon.dev/docs/frameworks/vue",
-	"keywords": ["avalon", "islands", "vue", "ssr", "hydration"],
+	"keywords": [
+		"avalon",
+		"islands",
+		"vue",
+		"ssr",
+		"hydration"
+	],
 	"exports": {
 		".": "./mod.ts",
 		"./server": "./server/renderer.ts",
 		"./client": "./client/index.ts",
+		"./client/hmr": "./client/hmr-adapter.ts",
 		"./types": "./types.ts"
 	},
-	"files": ["**/*.ts", "**/*.tsx", "!**/__tests__/**", "!**/*.test.ts", "README.md"],
+	"files": [
+		"**/*.ts",
+		"**/*.tsx",
+		"!**/__tests__/**",
+		"!**/*.test.ts",
+		"!vitest.config.ts",
+		"README.md"
+	],
 	"dependencies": {
-		"@useavalon/avalon": "^0.1.6",
-		"@useavalon/core": "^0.1.1",
-		"vue": "3.5.21",
-		"vite": "8.0.0",
+		"@useavalon/avalon": "^0.1.12",
+		"@useavalon/core": "^0.1.3",
 		"@vitejs/plugin-vue": "^5.2.4"
+	},
+	"peerDependencies": {
+		"vue": "^3.4.0",
+		"vite": "^8.0.0"
 	}
 }

package/server/css-extractor.ts

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