diff options
| -rw-r--r-- | .changeset/twenty-coats-talk.md | 6 | ||||
| -rw-r--r-- | packages/astro/src/external.ts | 2 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/vue-component/snowpack.config.json | 3 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/vue-component/src/components/Counter.vue | 36 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/vue-component/src/components/Result.vue | 15 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/vue-component/src/pages/index.astro | 24 | ||||
| -rw-r--r-- | packages/astro/test/vue-component.test.js | 21 | ||||
| -rw-r--r-- | packages/renderers/renderer-vue/index.js | 2 | ||||
| -rw-r--r-- | packages/renderers/renderer-vue/package.json | 4 | ||||
| -rw-r--r-- | yarn.lock | 92 |
10 files changed, 171 insertions, 34 deletions
diff --git a/.changeset/twenty-coats-talk.md b/.changeset/twenty-coats-talk.md new file mode 100644 index 000000000..9277c955f --- /dev/null +++ b/.changeset/twenty-coats-talk.md @@ -0,0 +1,6 @@ +--- +"@astrojs/renderer-vue": patch +"astro": patch +--- + +Fix Vue components nesting diff --git a/packages/astro/src/external.ts b/packages/astro/src/external.ts index f87a9b00f..577d48215 100644 --- a/packages/astro/src/external.ts +++ b/packages/astro/src/external.ts @@ -18,7 +18,7 @@ const isAstroRenderer = (name: string) => { // These packages should NOT be built by `esinstall` // But might not be explicit dependencies of `astro` -const denyList = ['prismjs/components/index.js', '@vue/server-renderer', '@astrojs/markdown-support', 'node:fs/promises', ...nodeBuiltinsMap.values()]; +const denyList = ['prismjs/components/index.js', '@astrojs/markdown-support', 'node:fs/promises', ...nodeBuiltinsMap.values()]; export default Object.keys(pkg.dependencies) // Filter out packages that should be loaded threw Snowpack diff --git a/packages/astro/test/fixtures/vue-component/snowpack.config.json b/packages/astro/test/fixtures/vue-component/snowpack.config.json new file mode 100644 index 000000000..8f034781d --- /dev/null +++ b/packages/astro/test/fixtures/vue-component/snowpack.config.json @@ -0,0 +1,3 @@ +{ + "workspaceRoot": "../../../../../" +} diff --git a/packages/astro/test/fixtures/vue-component/src/components/Counter.vue b/packages/astro/test/fixtures/vue-component/src/components/Counter.vue new file mode 100644 index 000000000..49d2936ed --- /dev/null +++ b/packages/astro/test/fixtures/vue-component/src/components/Counter.vue @@ -0,0 +1,36 @@ +<template> + <div class="counter"> + <h1><slot /></h1> + <button @click="subtract()">-</button> + <Result :value="count" /> + <button @click="add()">+</button> + </div> +</template> + +<script> +import { ref } from 'vue'; + +import Result from './Result.vue'; + +export default { + components: { + Result + }, + props: { + start: { + type: String, + required: true + } + }, + setup(props) { + const count = ref(parseInt(props.start)) + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); + return { + count, + add, + subtract, + }; + }, +}; +</script> diff --git a/packages/astro/test/fixtures/vue-component/src/components/Result.vue b/packages/astro/test/fixtures/vue-component/src/components/Result.vue new file mode 100644 index 000000000..7795d5ae0 --- /dev/null +++ b/packages/astro/test/fixtures/vue-component/src/components/Result.vue @@ -0,0 +1,15 @@ +<template> + <pre>{{ value }}</pre> +</template> + +<script> + +export default { + props: { + value: { + type: Number, + required: true + } + } +} +</script> diff --git a/packages/astro/test/fixtures/vue-component/src/pages/index.astro b/packages/astro/test/fixtures/vue-component/src/pages/index.astro new file mode 100644 index 000000000..bccd1d2c7 --- /dev/null +++ b/packages/astro/test/fixtures/vue-component/src/pages/index.astro @@ -0,0 +1,24 @@ +--- +import Counter from '../components/Counter.vue' +--- +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta + name="viewport" + content="width=device-width, initial-scale=1, viewport-fit=cover" + /> + <title>Vue component</title> + <style> + :global(:root) { + font-family: system-ui; + padding: 1em; + } + </style> + </head> + <body> + <main> + <Counter start="5" client:visible>Hello world!</Counter> + </main> + </body> +</html> diff --git a/packages/astro/test/vue-component.test.js b/packages/astro/test/vue-component.test.js new file mode 100644 index 000000000..c9ebfee9d --- /dev/null +++ b/packages/astro/test/vue-component.test.js @@ -0,0 +1,21 @@ +import { suite } from 'uvu'; +import * as assert from 'uvu/assert'; +import { doc } from './test-utils.js'; +import { setup, setupBuild } from './helpers.js'; + +const Vue = suite('Vue component test'); + +setup(Vue, './fixtures/vue-component'); +setupBuild(Vue, './fixtures/vue-component'); + +Vue('Can load Vue', async ({ runtime }) => { + const result = await runtime.load('/'); + assert.ok(!result.error, `build error: ${result.error}`); + + const $ = doc(result.contents); + assert.equal($('h1').text(), 'Hello world!', 'Can use slots'); + assert.equal($('button').length, 2, 'Can render components'); + assert.equal($('pre').text(), "5", 'Can render nested components'); +}); + +Vue.run(); diff --git a/packages/renderers/renderer-vue/index.js b/packages/renderers/renderer-vue/index.js index 206bae9f3..3dfc41e19 100644 --- a/packages/renderers/renderer-vue/index.js +++ b/packages/renderers/renderer-vue/index.js @@ -3,5 +3,5 @@ export default { snowpackPlugin: '@snowpack/plugin-vue', client: './client', server: './server', - knownEntrypoints: ['vue'], + knownEntrypoints: ['vue', '@vue/server-renderer'], }; diff --git a/packages/renderers/renderer-vue/package.json b/packages/renderers/renderer-vue/package.json index ff5c7a1a4..03a13b408 100644 --- a/packages/renderers/renderer-vue/package.json +++ b/packages/renderers/renderer-vue/package.json @@ -9,8 +9,8 @@ "./package.json": "./package.json" }, "dependencies": { - "vue": "^3.0.10", - "@vue/server-renderer": "^3.0.10", + "vue": "^3.2.0-beta.7", + "@vue/server-renderer": "^3.2.0-beta.7", "@snowpack/plugin-vue": "^2.6.1" }, "engines": { @@ -2044,6 +2044,17 @@ estree-walker "^2.0.1" source-map "^0.6.1" +"@vue/compiler-core@3.2.0-beta.7": + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.0-beta.7.tgz#bb551e99e207c3e694bd6b283cb5a2a2aae7f521" + integrity sha512-JoL8pskBqYDcw3Yf6Bm/TUz4ZIRIkT7VzMzk0chBwpxHima9roZZA2bn5M/JznZryh9JNfrpm1DdDKmsdrRVSQ== + dependencies: + "@babel/parser" "^7.12.0" + "@babel/types" "^7.12.0" + "@vue/shared" "3.2.0-beta.7" + estree-walker "^2.0.1" + source-map "^0.6.1" + "@vue/compiler-dom@3.1.5": version "3.1.5" resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.5.tgz#cbb97020c62a5faa3fbc2a97916bd98041ac9856" @@ -2052,6 +2063,14 @@ "@vue/compiler-core" "3.1.5" "@vue/shared" "3.1.5" +"@vue/compiler-dom@3.2.0-beta.7": + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.0-beta.7.tgz#2099797206b5f773e949801dd1d6a3bd73d174ce" + integrity sha512-51gwn3EaaNs1XI6D3aoPDuDmS1SxBb/HVlVZwlEYDoje6UeF3lx9M6pXOM6CoMLiFNat4CkwqQZu6SghlY0PYw== + dependencies: + "@vue/compiler-core" "3.2.0-beta.7" + "@vue/shared" "3.2.0-beta.7" + "@vue/compiler-sfc@^3.0.10": version "3.1.5" resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.5.tgz#e61e54f3a963b0f4a8e523fbb8632390dc52b0d6" @@ -2083,43 +2102,56 @@ "@vue/compiler-dom" "3.1.5" "@vue/shared" "3.1.5" -"@vue/reactivity@3.1.5": - version "3.1.5" - resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.5.tgz#dbec4d9557f7c8f25c2635db1e23a78a729eb991" - integrity sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg== +"@vue/compiler-ssr@3.2.0-beta.7": + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.0-beta.7.tgz#1a46abf8bcd3196c2c9ad149063c00c4619f1e24" + integrity sha512-85sT42ErbQ8DmR2w+Joqh5bskqtVj7Y21iwi2Hu1Ccr76vEiD4/7PB8fuhbkDmilOAMMcvh90KyvXpYJ84THCw== dependencies: - "@vue/shared" "3.1.5" + "@vue/compiler-dom" "3.2.0-beta.7" + "@vue/shared" "3.2.0-beta.7" -"@vue/runtime-core@3.1.5": - version "3.1.5" - resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.5.tgz#a545b7f146092929cb5e833e85439150f17ac87b" - integrity sha512-YQbG5cBktN1RowQDKA22itmvQ+b40f0WgQ6CXK4VYoYICAiAfu6Cc14777ve8zp1rJRGtk5oIeS149TOculrTg== +"@vue/reactivity@3.2.0-beta.7": + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.0-beta.7.tgz#06c916315f3b74ae640040ddb75972da29467f84" + integrity sha512-qS6/g+CaPRDNssjk6sLn2od6B/CGKoG0UnbCRE+TrgKKf7QGZGv5RBjZrqqaJvgBx1gjPjRi7DVWO/YWvdyNCA== dependencies: - "@vue/reactivity" "3.1.5" - "@vue/shared" "3.1.5" + "@vue/shared" "3.2.0-beta.7" -"@vue/runtime-dom@3.1.5": - version "3.1.5" - resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.5.tgz#4fa28947d408aa368fa17ea0edc1beb9af1472a1" - integrity sha512-tNcf3JhVR0RfW0kw1p8xZgv30nvX8Y9rsz7eiQ0dHe273sfoCngAG0y4GvMaY4Xd8FsjUwFedd4suQ8Lu8meXg== +"@vue/runtime-core@3.2.0-beta.7": + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.0-beta.7.tgz#52068f50bd72d5504ab0459051d5f9a9e13957f6" + integrity sha512-qlj4Fju6G7/A90XNYVs8H2RV0fNEf0An6LM+tsX4/6QZ44XFYd7W82t1YSUPuihKVAoTh2+xGvAOxu+3sz+RiA== dependencies: - "@vue/runtime-core" "3.1.5" - "@vue/shared" "3.1.5" + "@vue/reactivity" "3.2.0-beta.7" + "@vue/shared" "3.2.0-beta.7" + +"@vue/runtime-dom@3.2.0-beta.7": + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.0-beta.7.tgz#6776548f93ecf4b68c5450301e9e535923c0cf64" + integrity sha512-RrIjQEi+Dngwb4vCC+aSgGLYP/OGl2x56oFve1wSnYDImGaZxyn/4a07m515jwy4yENeQpPkd7HfOpseCOE4Mg== + dependencies: + "@vue/runtime-core" "3.2.0-beta.7" + "@vue/shared" "3.2.0-beta.7" csstype "^2.6.8" -"@vue/server-renderer@^3.0.10": - version "3.1.5" - resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.1.5.tgz#905454eccbb97bb8daafc5db6eec83c452062648" - integrity sha512-b0LLsxwsVIFGNgAHXVT/1iHbPf+uNMdFOz7xUT2tKKIkHN4ps8fAaj1GTSYLhxaPi9ALjxRmWRdvMC69fAW1/A== +"@vue/server-renderer@^3.2.0-beta.7": + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.0-beta.7.tgz#b30f7e5d719bda7f1b731c45b17bf3881e91379f" + integrity sha512-KwaPMtyldU7YGqCIwAUgZ2rxtIAhBfg1x9g1cW0IUJsJ1cv7PwID4nwsBPzbtu/lZ662lQX2+F7F/1Gmbg7+Bw== dependencies: - "@vue/compiler-ssr" "3.1.5" - "@vue/shared" "3.1.5" + "@vue/compiler-ssr" "3.2.0-beta.7" + "@vue/shared" "3.2.0-beta.7" "@vue/shared@3.1.5": version "3.1.5" resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03" integrity sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA== +"@vue/shared@3.2.0-beta.7": + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.0-beta.7.tgz#0bce776271f329e6582fcda00d61d4bcf1c60b52" + integrity sha512-rXkGVA+HeVsnB/pba3uZK9KJCwNetCupqHX5g+aXhZPucHTC0YCPoZFYc4qUE8wa8atXTBWP+1VnztbXBPGRuA== + "@webcomponents/template-shadowroot@^0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@webcomponents/template-shadowroot/-/template-shadowroot-0.1.0.tgz#adb3438d0d9a18e8fced08abc253f56b7eadab00" @@ -10415,14 +10447,14 @@ vm2@^3.9.2: resolved "https://registry.yarnpkg.com/vm2/-/vm2-3.9.3.tgz#29917f6cc081cc43a3f580c26c5b553fd3c91f40" integrity sha512-smLS+18RjXYMl9joyJxMNI9l4w7biW8ilSDaVRvFBDwOH8P0BK1ognFQTpg0wyQ6wIKLTblHJvROW692L/E53Q== -vue@^3.0.10: - version "3.1.5" - resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.5.tgz#12879b11d0685ee4478c8869551799630a52f9fe" - integrity sha512-Ho7HNb1nfDoO+HVb6qYZgeaobt1XbY6KXFe4HGs1b9X6RhkWG/113n4/SrtM1LUclM6OrP/Se5aPHHvAPG1iVQ== +vue@^3.2.0-beta.7: + version "3.2.0-beta.7" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.0-beta.7.tgz#4ec77be552e840651aa175b88e7f03faf32da233" + integrity sha512-1MAUaLvvM3k4MzzMtpevW/K0UuYz76NDm3Le3GC+C2mT+WAwBZqr7bT4FLwVPbaioVaJby8ImnVW1wmoAginPQ== dependencies: - "@vue/compiler-dom" "3.1.5" - "@vue/runtime-dom" "3.1.5" - "@vue/shared" "3.1.5" + "@vue/compiler-dom" "3.2.0-beta.7" + "@vue/runtime-dom" "3.2.0-beta.7" + "@vue/shared" "3.2.0-beta.7" wait-on@5.3.0: version "5.3.0" |