@useavalon/vue 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -42
- package/dist/server/renderer.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
# @useavalon/vue
|
|
2
|
-
|
|
3
|
-
Vue 3 integration for [Avalon](https://useavalon.dev). Server-side rendering and client-side hydration for Vue Single File Components as islands.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Vue 3 with Composition API and `<script setup>`
|
|
8
|
-
- Server-side rendering via `@vue/server-renderer`
|
|
9
|
-
- Scoped CSS extraction from SFCs
|
|
10
|
-
- All hydration strategies (`on:client`, `on:visible`, `on:idle`, `on:interaction`)
|
|
11
|
-
|
|
12
|
-
## Usage
|
|
13
|
-
|
|
14
|
-
```vue
|
|
15
|
-
<!-- components/Counter.vue -->
|
|
16
|
-
<script setup>
|
|
17
|
-
import { ref } from 'vue';
|
|
18
|
-
const count = ref(0);
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<template>
|
|
22
|
-
<button @click="count++">Count: {{ count }}</button>
|
|
23
|
-
</template>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
```tsx
|
|
27
|
-
// pages/index.tsx
|
|
28
|
-
import Counter from '../components/Counter.vue';
|
|
29
|
-
|
|
30
|
-
export default function Home() {
|
|
31
|
-
return <Counter island={{ condition: 'on:visible' }} />;
|
|
32
|
-
}
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Links
|
|
36
|
-
|
|
37
|
-
- [Documentation](https://useavalon.dev/docs/frameworks/vue)
|
|
38
|
-
- [GitHub](https://github.com/useAvalon/Avalon)
|
|
39
|
-
|
|
40
|
-
## License
|
|
41
|
-
|
|
42
|
-
MIT
|
|
1
|
+
# @useavalon/vue
|
|
2
|
+
|
|
3
|
+
Vue 3 integration for [Avalon](https://useavalon.dev). Server-side rendering and client-side hydration for Vue Single File Components as islands.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Vue 3 with Composition API and `<script setup>`
|
|
8
|
+
- Server-side rendering via `@vue/server-renderer`
|
|
9
|
+
- Scoped CSS extraction from SFCs
|
|
10
|
+
- All hydration strategies (`on:client`, `on:visible`, `on:idle`, `on:interaction`)
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
```vue
|
|
15
|
+
<!-- components/Counter.vue -->
|
|
16
|
+
<script setup>
|
|
17
|
+
import { ref } from 'vue';
|
|
18
|
+
const count = ref(0);
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<button @click="count++">Count: {{ count }}</button>
|
|
23
|
+
</template>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// pages/index.tsx
|
|
28
|
+
import Counter from '../components/Counter.vue';
|
|
29
|
+
|
|
30
|
+
export default function Home() {
|
|
31
|
+
return <Counter island={{ condition: 'on:visible' }} />;
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Links
|
|
36
|
+
|
|
37
|
+
- [Documentation](https://useavalon.dev/docs/frameworks/vue)
|
|
38
|
+
- [GitHub](https://github.com/useAvalon/Avalon)
|
|
39
|
+
|
|
40
|
+
## License
|
|
41
|
+
|
|
42
|
+
MIT
|
package/dist/server/renderer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
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}}
|