mirror of
https://github.com/withastro/astro.git
synced 2024-12-30 22:03:56 -05:00
Fix Vue components nesting and add tests (#924)
* Allow @vue/server-renderer to be processed * Bump @vue/server-renderer version * Create twenty-coats-talk.md * Bump Vue packages version to get ESM builds * Add Vue components tests * Create shaggy-pugs-raise.md * Delete shaggy-pugs-raise.md
This commit is contained in:
Bartek Igielski
GitHub
parent
01387674ba
commit
a1491cc659
10 changed files with 171 additions and 34 deletions
6
.changeset/twenty-coats-talk.md
Normal file
6
.changeset/twenty-coats-talk.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
"@astrojs/renderer-vue": patch
|
||||
"astro": patch
|
||||
---
|
||||
|
||||
Fix Vue components nesting
|
||||
|
|
@ -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
|
||||
|
|
|
|||
3
packages/astro/test/fixtures/vue-component/snowpack.config.json
vendored
Normal file
3
packages/astro/test/fixtures/vue-component/snowpack.config.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"workspaceRoot": "../../../../../"
|
||||
}
|
||||
36
packages/astro/test/fixtures/vue-component/src/components/Counter.vue
vendored
Normal file
36
packages/astro/test/fixtures/vue-component/src/components/Counter.vue
vendored
Normal file
|
|
@ -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>
|
||||
15
packages/astro/test/fixtures/vue-component/src/components/Result.vue
vendored
Normal file
15
packages/astro/test/fixtures/vue-component/src/components/Result.vue
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<pre>{{ value }}</pre>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
24
packages/astro/test/fixtures/vue-component/src/pages/index.astro
vendored
Normal file
24
packages/astro/test/fixtures/vue-component/src/pages/index.astro
vendored
Normal file
|
|
@ -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>
|
||||
21
packages/astro/test/vue-component.test.js
Normal file
21
packages/astro/test/vue-component.test.js
Normal file
|
|
@ -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();
|
||||
|
|
@ -3,5 +3,5 @@ export default {
|
|||
snowpackPlugin: '@snowpack/plugin-vue',
|
||||
client: './client',
|
||||
server: './server',
|
||||
knownEntrypoints: ['vue'],
|
||||
knownEntrypoints: ['vue', '@vue/server-renderer'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
92
yarn.lock
92
yarn.lock
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue