@useavalon/vue 0.1.0 → 0.1.2

package/mod.ts

@@ -7,7 +7,7 @@
  */
 
 import type { Plugin } from 'vite';
-import type { Integration, IntegrationConfig } from '../core/types.ts';
+import type { Integration, IntegrationConfig } from '@useavalon/core/types';
 import { render } from './server/renderer.ts';
 import { getHydrationScript } from './client/hydration.ts';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@useavalon/vue",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"description": "Vue integration for Avalon islands architecture",
 	"license": "MIT",
 	"type": "module",
@@ -17,10 +17,14 @@
 		"./client": "./client/index.ts",
 		"./types": "./types.ts"
 	},
-	"files": ["**/*.ts", "**/*.tsx", "README.md"],
+	"files": ["**/*.ts", "**/*.tsx", "!**/__tests__/**", "!**/*.test.ts", "README.md"],
 	"dependencies": {
-		"vue": "3.5.21",
-		"vite": "8.0.0",
+		"@useavalon/avalon": "^0.1.6",
+		"@useavalon/core": "^0.1.1",
 		"@vitejs/plugin-vue": "^5.2.4"
+	},
+	"peerDependencies": {
+		"vue": "^3.4.0",
+		"vite": "^8.0.0"
 	}
 }

package/server/renderer.ts

@@ -9,10 +9,10 @@
 
 import { createSSRApp } from 'vue';
 import { renderToString as vueRenderToString } from 'vue/server-renderer';
-import type { RenderParams, RenderResult } from '../../core/types.ts';
+import type { RenderParams, RenderResult } from '@useavalon/core/types';
 import { extractCSS, generateScopeId, applyScopeToHTML } from './css-extractor.ts';
-import { toImportSpecifier } from '../../core/utils.ts';
-import { resolveIslandPath } from '../../../avalon/src/islands/framework-detection.ts';
+import { toImportSpecifier } from '@useavalon/core/utils';
+import { resolveIslandPath } from '@useavalon/avalon/islands/framework-detection';
 
 /**
  * Render a Vue component to HTML string with SSR

package/types.ts

@@ -4,7 +4,7 @@
  * Type definitions specific to the Vue integration package.
  */
 
-import type { RenderParams, RenderResult } from "../core/types.ts";
+import type { RenderParams, RenderResult } from '@useavalon/core/types';
 
 /**
  * Vue-specific render parameters

package/__tests__/config.test.ts

@@ -1,90 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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]+$/);
-	});
-});