@useavalon/vue 0.1.7 → 0.1.9

package/README.md

@@ -1,42 +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
+# @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/dist/client/hydration.js

@@ -1,76 +1 @@
-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;
-    }
-  `}
+import{createSSRApp as e}from"vue";export function hydrate(t,n,r={}){try{e(n,r).mount(t)}catch(e){throw console.error(`Vue hydration failed:`,e),e}}export function getHydrationScript(){return``}

package/dist/server/renderer.js

@@ -1 +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(o||await c(l),s)),f=``,p=``;try{p=r(l),f=await n(l,{scopeId:p})}catch{}let m=a;return f&&(m=i(a,p)),{html:m,css:f||void 0,scopeId:p||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}}
+import{resolveIslandPath as e}from"@useavalon/avalon/islands/framework-detection";import{toImportSpecifier as t}from"@useavalon/core/utils";import{createSSRApp as n}from"vue";import{renderToString as r}from"vue/server-renderer";import{extractCSS as i}from"./css-extractor.js";export async function render(e){let{component:t,props:a={},src:s,condition:c=`on:client`,ssrOnly:l=!1}=e;try{let e=t||await o(s),u=await r(n(e,a)),d=e.__scopeId,f=``;if(d)try{f=await i(s,{scopeId:d})}catch{}return{html:u,css:f||void 0,scopeId:d||void 0,hydrationData:{src:s,props:a,framework:`vue`,condition:c,ssrOnly:l}}}catch(e){throw Error(`Vue SSR rendering failed: ${e}`)}}async function o(n){if(process.env.NODE_ENV!==`production`&&globalThis.__viteDevServer){let t=globalThis.__viteDevServer,r=await e(n),i=await t.ssrLoadModule(r);return i.default||i}let r=await import(t(n.replace(`/islands/`,`/dist/ssr/islands/`).replace(`.vue`,`.js`)));return r.default||r}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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@useavalon/vue",
-	"version": "0.1.7",
+	"version": "0.1.9",
 	"description": "Vue integration for Avalon islands architecture",
 	"license": "MIT",
 	"type": "module",
@@ -36,8 +36,8 @@
 		"README.md"
 	],
 	"dependencies": {
-		"@useavalon/avalon": "workspace:^",
-		"@useavalon/core": "workspace:^",
+		"@useavalon/avalon": "^0.1.71",
+		"@useavalon/core": "^0.1.7",
 		"@vitejs/plugin-vue": "^5.2.4"
 	},
 	"peerDependencies": {