Skip to content

Commit 2d27da6

Browse files
alexzhang1030sxzz
alexzhang1030
and
sxzz
authored
feat(astro): add astro integration (#453)
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
1 parent 0f98d37 commit 2d27da6

File tree

43 files changed

+2153
-115
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2153
-115
lines changed

‎.changeset/great-taxis-switch.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@vue-macros/astro': minor
3+
---
4+
5+
Add astro support

‎docs/.vitepress/locales/common.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ export const sidebar = (lang: string): DefaultTheme.SidebarItem[] => {
4848
text: 'Nuxt Integration',
4949
link: `${urlPrefix}/guide/nuxt-integration`,
5050
},
51+
{
52+
text: 'Astro Integration',
53+
link: `${urlPrefix}/guide/astro-integration`,
54+
},
5155
{
5256
text: 'Configurations',
5357
link: `${urlPrefix}/guide/configurations`,

‎docs/guide/astro-integration.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Astro Integration
2+
3+
### Installation
4+
5+
::: code-group
6+
7+
```bash [npm]
8+
npm i -D @vue-macros/astro
9+
```
10+
11+
```bash [yarn]
12+
yarn add -D @vue-macros/astro
13+
```
14+
15+
```bash [pnpm]
16+
pnpm add -D @vue-macros/astro
17+
```
18+
19+
:::
20+
21+
## Configuration
22+
23+
```ts
24+
// astro.config.mjs
25+
import { defineConfig } from 'astro/config'
26+
import Vue from '@astrojs/vue'
27+
import Macros from '@vue-macros/astro'
28+
29+
export default defineConfig({
30+
integrations: [
31+
Vue(),
32+
Macros({
33+
// ... configs
34+
}),
35+
],
36+
})
37+
```
38+
39+
## TypeScript Support & Volar Support
40+
41+
Same with [Bundler Integration](./bundler-integration.md#typescript-support)
42+
43+
## Limitations
44+
45+
[`shortVmodel`](../macros/short-vmodel.md) and [`booleanProp`](../features/boolean-prop.md) need to be explicitly added to the `template.compilerOptions.nodeTransforms`, cannot be auto injected.
46+
47+
Same with Vue 3 usage.
48+
49+
For example:
50+
51+
```ts
52+
import { defineConfig } from 'astro/config'
53+
import Vue from '@astrojs/vue'
54+
import Macros from '@vue-macros/astro'
55+
import { transformShortVmodel } from '@vue-macros/short-vmodel'
56+
57+
export default defineConfig({
58+
integrations: [
59+
Vue({
60+
jsx: true,
61+
template: {
62+
compilerOptions: {
63+
// explicit add transformShortVModel to node transforms
64+
nodeTransforms: [transformShortVmodel()],
65+
},
66+
},
67+
}),
68+
Macros(),
69+
],
70+
})
71+
```
72+
73+
:tada: Congratulations! That's all.
74+
75+
To learn more about the macros, please visit [All Macros](/macros/) :laughing:.

‎docs/zh-CN/guide/astro-integration.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Astro 集成
2+
3+
### 安装
4+
5+
::: code-group
6+
7+
```bash [npm]
8+
npm i -D @vue-macros/astro
9+
```
10+
11+
```bash [yarn]
12+
yarn add -D @vue-macros/astro
13+
```
14+
15+
```bash [pnpm]
16+
pnpm add -D @vue-macros/astro
17+
```
18+
19+
:::
20+
21+
## 配置
22+
23+
```ts
24+
// astro.config.mjs
25+
import { defineConfig } from 'astro/config'
26+
import Vue from '@astrojs/vue'
27+
import Macros from '@vue-macros/astro'
28+
29+
export default defineConfig({
30+
integrations: [
31+
Vue(),
32+
Macros({
33+
// ... 如果需要，在这里配置插件
34+
}),
35+
],
36+
})
37+
```
38+
39+
## TypeScript 支持 和 Volar 支持
40+
41+
与 [Bundler Integration](./bundler-integration.md#typescript-support) 一致。
42+
43+
## 缺陷
44+
45+
[`shortVmodel`](../macros/short-vmodel.md) 和 [`booleanProp`](../features/boolean-prop.md) 需要被显式添加到 `template.compilerOptions.nodeTransforms` 中，没有办法通过集成自动注入。
46+
47+
与 Vue 3 的使用方式一致。
48+
49+
如下所示：
50+
51+
```ts
52+
import { defineConfig } from 'astro/config'
53+
import Vue from '@astrojs/vue'
54+
import Macros from '@vue-macros/astro'
55+
import { transformShortVmodel } from '@vue-macros/short-vmodel'
56+
57+
export default defineConfig({
58+
integrations: [
59+
Vue({
60+
jsx: true,
61+
template: {
62+
compilerOptions: {
63+
// 显式地配置 nodeTransforms
64+
nodeTransforms: [transformShortVmodel()],
65+
},
66+
},
67+
}),
68+
Macros(),
69+
],
70+
})
71+
```
72+
73+
:tada: 恭喜你! 现在已经成功完成了对 Astro 的集成过程。
74+
75+
如果你还想要了解有关宏的更多信息, 请访问 [全部宏](/zh-CN/macros/) :laughing:。

‎eslint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { sxzz } from '@sxzz/eslint-config'
22

33
export default sxzz([
44
{
5-
ignores: ['playground/vue2', 'playground/nuxt'],
5+
ignores: ['playground/vue2', 'playground/nuxt', 'playground/astro'],
66
},
77

88
{

‎packages/astro/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# @vue-macros/astro [![npm](https://img.shields.io/npm/v/@vue-macros/astro.svg)](https://npmjs.com/package/@vue-macros/astro)
2+
3+
Please refer to [README.md](https://github.com/vue-macros/vue-macros#readme)

‎packages/astro/package.json‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"name": "@vue-macros/astro",
3+
"version": "0.0.0",
4+
"packageManager": "pnpm@8.6.12",
5+
"description": "Astro integration of Vue Macros.",
6+
"keywords": [
7+
"vue-macros",
8+
"macros",
9+
"vue",
10+
"sfc",
11+
"setup",
12+
"script-setup",
13+
"astro",
14+
"astro-integration"
15+
],
16+
"license": "MIT",
17+
"homepage": "https://github.com/vue-macros/vue-macros#readme",
18+
"bugs": {
19+
"url": "https://github.com/vue-macros/vue-macros/issues"
20+
},
21+
"repository": {
22+
"type": "git",
23+
"url": "git+https://github.com/vue-macros/vue-macros.git",
24+
"directory": "packages/astro"
25+
},
26+
"author": "三咲智子 <sxzz@sxzz.moe>",
27+
"contributors": [
28+
"alexzhang1030 <alexzhang1030@foxmail.com>"
29+
],
30+
"files": [
31+
"dist"
32+
],
33+
"main": "dist/index.js",
34+
"module": "dist/index.mjs",
35+
"types": "dist/index.d.ts",
36+
"exports": {
37+
".": {
38+
"dev": "./src/index.ts",
39+
"types": {
40+
"require": "./dist/index.d.ts",
41+
"import": "./dist/index.d.mts"
42+
},
43+
"require": "./dist/index.js",
44+
"import": "./dist/index.mjs"
45+
},
46+
"./*": [
47+
"./*",
48+
"./*.d.ts"
49+
]
50+
},
51+
"scripts": {
52+
"build": "tsup",
53+
"dev": "DEV=true tsup"
54+
},
55+
"peerDependencies": {
56+
"astro": "^2.0.0"
57+
},
58+
"dependencies": {
59+
"@vue-macros/common": "workspace:~",
60+
"unplugin-vue-macros": "workspace:*"
61+
},
62+
"devDependencies": {
63+
"@vitejs/plugin-vue": "^4.2.3",
64+
"astro": "^2.10.3"
65+
},
66+
"engines": {
67+
"node": ">=16.14.0"
68+
}
69+
}

‎packages/astro/src/index.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { type AstroIntegration, type ViteUserConfig } from 'astro'
2+
import { type Options, resolveOptions } from 'unplugin-vue-macros'
3+
import { type Plugin } from 'vite'
4+
import VueMacros from 'unplugin-vue-macros/vite'
5+
6+
export type VueMacrosOptions = Options
7+
8+
function findPluginAndRemove(
9+
name: string,
10+
plugins: ViteUserConfig['plugins']
11+
): Plugin | undefined {
12+
const idx = plugins!.findIndex(
13+
(plugin) => plugin && 'name' in plugin && plugin.name === name
14+
)
15+
if (idx === -1) return
16+
const plugin = plugins![idx]
17+
plugins!.splice(idx, 1)
18+
return plugin as any
19+
}
20+
21+
export default function (options?: VueMacrosOptions): AstroIntegration {
22+
return {
23+
name: '@vue-macros/astro',
24+
hooks: {
25+
'astro:config:setup': ({ config }) => {
26+
const resolvedOptions = resolveOptions(options ?? {})
27+
const vue = findPluginAndRemove('vite:vue', config.vite.plugins)
28+
const vueJsx = findPluginAndRemove('vite:vue-jsx', config.vite.plugins)
29+
30+
config.vite.plugins?.push(
31+
VueMacros({
32+
...resolvedOptions,
33+
plugins: {
34+
vue,
35+
vueJsx,
36+
},
37+
})
38+
)
39+
},
40+
},
41+
}
42+
}

‎packages/astro/tsup.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from '../../tsup.config.js'

‎playground/astro/.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# build output
2+
dist/
3+
# generated types
4+
.astro/
5+
6+
# dependencies
7+
node_modules/
8+
9+
# logs
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
16+
# environment variables
17+
.env
18+
.env.production
19+
20+
# macOS-specific files
21+
.DS_Store

0 commit comments

Comments
 (0)