chore: add failing Vue test

2021-06-30 12:59:15 -04:00
11 changed files with 199 additions and 34 deletions
--- a/packages/astro/test/fixtures/framework-vue/snowpack.config.json
+++ b/packages/astro/test/fixtures/framework-vue/snowpack.config.json
@ -0,0 +1,3 @@
+{
+  "workspaceRoot": "../../../../../"
+}
--- a/packages/astro/test/fixtures/framework-vue/src/components/Basic.vue
+++ b/packages/astro/test/fixtures/framework-vue/src/components/Basic.vue
@ -0,0 +1,9 @@
+<template>
+  <div id="basic"></div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({})
+</script>
--- a/packages/astro/test/fixtures/framework-vue/src/components/Counter.vue
+++ b/packages/astro/test/fixtures/framework-vue/src/components/Counter.vue
@ -0,0 +1,21 @@
+<template>
+  <div id="counter">{{ count }}</div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const count = ref(0);
+    const add = () => count.value++;
+    const subtract = () => count.value--;
+
+    return {
+      count,
+      add,
+      subtract
+    }
+  }
+})
+</script>
--- a/packages/astro/test/fixtures/framework-vue/src/components/Nested.vue
+++ b/packages/astro/test/fixtures/framework-vue/src/components/Nested.vue
@ -0,0 +1,16 @@
+<template>
+  <div id="nested">
+    <Counter />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import Counter from './Counter.vue';
+
+export default defineComponent({
+  components: { 
+    Counter
+  }
+})
+</script>
--- a/packages/astro/test/fixtures/framework-vue/src/pages/basic.astro
+++ b/packages/astro/test/fixtures/framework-vue/src/pages/basic.astro
@ -0,0 +1,12 @@
+---
+import BasicComponent from '../components/Basic.vue';
+---
+
+<html>
+<head>
+  <title>Vue basic component</title>
+</head>
+<body>
+  <BasicComponent />
+</body>
+</html>
--- a/packages/astro/test/fixtures/framework-vue/src/pages/counter.astro
+++ b/packages/astro/test/fixtures/framework-vue/src/pages/counter.astro
@ -0,0 +1,12 @@
+---
+import CounterComponent from '../components/Counter.vue';
+---
+
+<html>
+<head>
+  <title>Vue counter components</title>
+</head>
+<body>
+  <CounterComponent:idle />
+</body>
+</html>
--- a/packages/astro/test/fixtures/framework-vue/src/pages/nested.astro
+++ b/packages/astro/test/fixtures/framework-vue/src/pages/nested.astro
@ -0,0 +1,12 @@
+---
+import NestedComponent from '../components/Nested.vue';
+---
+
+<html>
+<head>
+  <title>Vue nested components</title>
+</head>
+<body>
+  <NestedComponent:idle />
+</body>
+</html>
--- a/packages/astro/test/framework-vue.test.js
+++ 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();
--- 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"
--- 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 };
 }
--- 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"