diff --git a/packages/astro/test/fixtures/framework-vue/snowpack.config.json b/packages/astro/test/fixtures/framework-vue/snowpack.config.json new file mode 100644 index 0000000000..8f034781d8 --- /dev/null +++ b/packages/astro/test/fixtures/framework-vue/snowpack.config.json @@ -0,0 +1,3 @@ +{ + "workspaceRoot": "../../../../../" +} diff --git a/packages/astro/test/fixtures/framework-vue/src/components/Basic.vue b/packages/astro/test/fixtures/framework-vue/src/components/Basic.vue new file mode 100644 index 0000000000..8d5118d92d --- /dev/null +++ b/packages/astro/test/fixtures/framework-vue/src/components/Basic.vue @@ -0,0 +1,9 @@ + + + diff --git a/packages/astro/test/fixtures/framework-vue/src/components/Counter.vue b/packages/astro/test/fixtures/framework-vue/src/components/Counter.vue new file mode 100644 index 0000000000..4d3d378912 --- /dev/null +++ b/packages/astro/test/fixtures/framework-vue/src/components/Counter.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/astro/test/fixtures/framework-vue/src/components/Nested.vue b/packages/astro/test/fixtures/framework-vue/src/components/Nested.vue new file mode 100644 index 0000000000..df4c2f21df --- /dev/null +++ b/packages/astro/test/fixtures/framework-vue/src/components/Nested.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/astro/test/fixtures/framework-vue/src/pages/basic.astro b/packages/astro/test/fixtures/framework-vue/src/pages/basic.astro new file mode 100644 index 0000000000..609045ca54 --- /dev/null +++ b/packages/astro/test/fixtures/framework-vue/src/pages/basic.astro @@ -0,0 +1,12 @@ +--- +import BasicComponent from '../components/Basic.vue'; +--- + + + + Vue basic component + + + + + diff --git a/packages/astro/test/fixtures/framework-vue/src/pages/counter.astro b/packages/astro/test/fixtures/framework-vue/src/pages/counter.astro new file mode 100644 index 0000000000..4bc684dfde --- /dev/null +++ b/packages/astro/test/fixtures/framework-vue/src/pages/counter.astro @@ -0,0 +1,12 @@ +--- +import CounterComponent from '../components/Counter.vue'; +--- + + + + Vue counter components + + + + + diff --git a/packages/astro/test/fixtures/framework-vue/src/pages/nested.astro b/packages/astro/test/fixtures/framework-vue/src/pages/nested.astro new file mode 100644 index 0000000000..6ff3d846c0 --- /dev/null +++ b/packages/astro/test/fixtures/framework-vue/src/pages/nested.astro @@ -0,0 +1,12 @@ +--- +import NestedComponent from '../components/Nested.vue'; +--- + + + + Vue nested components + + + + + diff --git a/packages/astro/test/framework-vue.test.js b/packages/astro/test/framework-vue.test.js new file mode 100644 index 0000000000..650aa68ed5 --- /dev/null +++ b/packages/astro/test/framework-vue.test.js @@ -0,0 +1,44 @@ +import { suite } from 'uvu'; +import * as assert from 'uvu/assert'; +import { doc } from './test-utils.js'; +import { setup, setupBuild } from './helpers.js'; + +const FrameworkVue = suite('Vue framework test'); + +setup(FrameworkVue, './fixtures/framework-vue'); +setupBuild(FrameworkVue, './fixtures/framework-vue'); + +FrameworkVue('Can load basic component', async ({ runtime }) => { + const result = await runtime.load('/basic'); + if (result.error) throw new Error(result.error); + + const $ = doc(result.contents); + assert.equal($('#basic').length, 1, 'Can use a basic component'); +}); + +FrameworkVue('Can load reactive component', async ({ runtime }) => { + const result = await runtime.load('/counter'); + if (result.error) throw new Error(result.error); + + const $ = doc(result.contents); + assert.equal($('#counter').length, 1, 'Can use a reactive component'); +}); + +FrameworkVue('Can load nested component', async ({ runtime }) => { + const result = await runtime.load('/nested'); + if (result.error) throw new Error(result.error); + + const $ = doc(result.contents); + assert.equal($('#nested').length, 1, 'Can use nested components'); + assert.equal($('#counter').length, 1, 'Can use nested components'); +}); + +FrameworkVue('Can build', async ({ build }) => { + await build().catch((err) => { + assert.ok(!err, 'Error during the build'); + }); + const clientHTML = await readFile('/nested/index.html'); + console.log({ clientHTML }); +}); + +FrameworkVue.run(); diff --git a/packages/renderers/renderer-vue/package.json b/packages/renderers/renderer-vue/package.json index f63cc8170c..c3a0034c70 100644 --- a/packages/renderers/renderer-vue/package.json +++ b/packages/renderers/renderer-vue/package.json @@ -9,9 +9,9 @@ "./package.json": "./package.json" }, "dependencies": { - "vue": "^3.0.10", - "@vue/server-renderer": "^3.0.10", - "@snowpack/plugin-vue": "^2.6.1" + "@snowpack/plugin-vue": "^2.6.1", + "@vue/server-renderer": "^3.1.2", + "vue": "^3.1.2" }, "engines": { "node": "^12.20.0 || ^14.13.1 || >=16.0.0" diff --git a/packages/renderers/renderer-vue/server.js b/packages/renderers/renderer-vue/server.js index 3d31596349..79b67bfec9 100644 --- a/packages/renderers/renderer-vue/server.js +++ b/packages/renderers/renderer-vue/server.js @@ -7,7 +7,11 @@ function check(Component) { } async function renderToStaticMarkup(Component, props, children) { - const app = createSSRApp({ render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) }) }); + const app = createSSRApp({ + setup() { + return () => h(Component, props, { default: () => h(StaticHtml, { value: children }) }) + } + }); const html = await renderToString(app); return { html }; } diff --git a/yarn.lock b/yarn.lock index c8a556a143..97e9c9a72c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1613,6 +1613,17 @@ estree-walker "^2.0.1" source-map "^0.6.1" +"@vue/compiler-core@3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.1.2.tgz#31ab1d88e1706a5c7a545faeeb64c31bd0101db0" + integrity sha512-nHmq7vLjq/XM2IMbZUcKWoH5sPXa2uR/nIKZtjbK5F3TcbnYE/zKsrSUR9WZJ03unlwotNBX1OyxVt9HbWD7/Q== + dependencies: + "@babel/parser" "^7.12.0" + "@babel/types" "^7.12.0" + "@vue/shared" "3.1.2" + estree-walker "^2.0.1" + source-map "^0.6.1" + "@vue/compiler-dom@3.0.11": version "3.0.11" resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.11.tgz#b15fc1c909371fd671746020ba55b5dab4a730ee" @@ -1621,6 +1632,14 @@ "@vue/compiler-core" "3.0.11" "@vue/shared" "3.0.11" +"@vue/compiler-dom@3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.2.tgz#75a7731bcc5d9718183a3c56c18e992f7c13e7b1" + integrity sha512-k2+SWcWH0jL6WQAX7Or2ONqu5MbtTgTO0dJrvebQYzgqaKMXNI90RNeWeCxS4BnNFMDONpHBeFgbwbnDWIkmRg== + dependencies: + "@vue/compiler-core" "3.1.2" + "@vue/shared" "3.1.2" + "@vue/compiler-sfc@^3.0.10": version "3.0.11" resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.11.tgz#cd8ca2154b88967b521f5ad3b10f5f8b6b665679" @@ -1651,43 +1670,56 @@ "@vue/compiler-dom" "3.0.11" "@vue/shared" "3.0.11" -"@vue/reactivity@3.0.11": - version "3.0.11" - resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.11.tgz#07b588349fd05626b17f3500cbef7d4bdb4dbd0b" - integrity sha512-SKM3YKxtXHBPMf7yufXeBhCZ4XZDKP9/iXeQSC8bBO3ivBuzAi4aZi0bNoeE2IF2iGfP/AHEt1OU4ARj4ao/Xw== +"@vue/compiler-ssr@3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.1.2.tgz#e33ad0876d9b96f0950e22b0e174b94c1b049d2d" + integrity sha512-BwXo9LFk5OSWdMyZQ4bX1ELHX0Z/9F+ld/OaVnpUPzAZCHslBYLvyKUVDwv2C/lpLjRffpC2DOUEdl1+RP1aGg== dependencies: - "@vue/shared" "3.0.11" + "@vue/compiler-dom" "3.1.2" + "@vue/shared" "3.1.2" -"@vue/runtime-core@3.0.11": - version "3.0.11" - resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.11.tgz#c52dfc6acf3215493623552c1c2919080c562e44" - integrity sha512-87XPNwHfz9JkmOlayBeCCfMh9PT2NBnv795DSbi//C/RaAnc/bGZgECjmkD7oXJ526BZbgk9QZBPdFT8KMxkAg== +"@vue/reactivity@3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.2.tgz#66fa530dd726d2fef285ae55d02106a727db463b" + integrity sha512-glJzJoN2xE7I2lRvwKM5u1BHRPTd1yc8iaf//Lai/78/uYAvE5DXp5HzWRFOwMlbRvMGJHIQjOqoxj87cDAaag== dependencies: - "@vue/reactivity" "3.0.11" - "@vue/shared" "3.0.11" + "@vue/shared" "3.1.2" -"@vue/runtime-dom@3.0.11": - version "3.0.11" - resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.11.tgz#7a552df21907942721feb6961c418e222a699337" - integrity sha512-jm3FVQESY3y2hKZ2wlkcmFDDyqaPyU3p1IdAX92zTNeCH7I8zZ37PtlE1b9NlCtzV53WjB4TZAYh9yDCMIEumA== +"@vue/runtime-core@3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.2.tgz#f4dbc503cfc9a02ab5f1ebe002c3322512064a54" + integrity sha512-gsPZG4dRIkixuuKmoj4P9IHgfT0yaFLcqWOM5F/bCk0nxQn1XtxH8oUehWuET726KhbukvDoJfe9G2CKviy80w== dependencies: - "@vue/runtime-core" "3.0.11" - "@vue/shared" "3.0.11" + "@vue/reactivity" "3.1.2" + "@vue/shared" "3.1.2" + +"@vue/runtime-dom@3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.2.tgz#0fd8724f14bc7ba64b6c954d874a8d8a4fcb5fe9" + integrity sha512-QvINxjLucEZFzp5f0NVu7JqWYCv5TKQfkH2FDs/N6QNE4iKcYtKrWdT0HKfABnVXG28Znqv6rIH0dH4ZAOwxpA== + dependencies: + "@vue/runtime-core" "3.1.2" + "@vue/shared" "3.1.2" csstype "^2.6.8" -"@vue/server-renderer@^3.0.10": - version "3.0.11" - resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.0.11.tgz#d340f0db630ed56d4af7615faf495dc77558b44c" - integrity sha512-NtXRxCq+jJWohce7s2kgUdO7gD6LRrWhvpGUMrpp65ODxuwolVHVyacyvAnU9bxTj11xw+ErC7Q2+su9mJusEg== +"@vue/server-renderer@^3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.1.2.tgz#fd5c4ac433cbcea4f44b9ef971ff612786e1d04f" + integrity sha512-XDw8KTrz/siiU5p6Zlicvf2KIjSZrqaxATBPM/9FYNnyv4LTS14JC5daTL13rk50d3UPBurRR/3wJupVvtQJ4w== dependencies: - "@vue/compiler-ssr" "3.0.11" - "@vue/shared" "3.0.11" + "@vue/compiler-ssr" "3.1.2" + "@vue/shared" "3.1.2" "@vue/shared@3.0.11": version "3.0.11" resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.11.tgz#20d22dd0da7d358bb21c17f9bde8628152642c77" integrity sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA== +"@vue/shared@3.1.2": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.2.tgz#1069c0bc7d6f4bd15ccf3a5f3be29450aca368f9" + integrity sha512-EmH/poaDWBPJaPILXNI/1fvUbArJQmmTyVCwvvyDYDFnkPoTclAbHRAtyIvqfez7jybTDn077HTNILpxlsoWhg== + JSONStream@^1.0.4: version "1.3.5" resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0" @@ -10358,14 +10390,14 @@ vscode-uri@^3.0.2: resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.2.tgz#ecfd1d066cb8ef4c3a208decdbab9a8c23d055d0" integrity sha512-jkjy6pjU1fxUvI51P+gCsxg1u2n8LSt0W6KrCNQceaziKzff74GoWmjVG46KieVzybO1sttPQmYfrwSHey7GUA== -vue@^3.0.10: - version "3.0.11" - resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.11.tgz#c82f9594cbf4dcc869241d4c8dd3e08d9a8f4b5f" - integrity sha512-3/eUi4InQz8MPzruHYSTQPxtM3LdZ1/S/BvaU021zBnZi0laRUyH6pfuE4wtUeLvI8wmUNwj5wrZFvbHUXL9dw== +vue@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.2.tgz#647f8e3949a3d600771dca25d50225dc3e594c64" + integrity sha512-q/rbKpb7aofax4ugqu2k/uj7BYuNPcd6Z5/qJtfkJQsE0NkwVoCyeSh7IZGH61hChwYn3CEkh4bHolvUPxlQ+w== dependencies: - "@vue/compiler-dom" "3.0.11" - "@vue/runtime-dom" "3.0.11" - "@vue/shared" "3.0.11" + "@vue/compiler-dom" "3.1.2" + "@vue/runtime-dom" "3.1.2" + "@vue/shared" "3.1.2" wcwidth@^1.0.0, wcwidth@^1.0.1: version "1.0.1"