Fix: Vue script setup with other renderers applied (#4706)

* fix: add __ssrInlineRender to Vue check * chore: remove console log * test: vue builds with other renderer present * chore: changeset
withastro · Sep 9, 2022 · b0ee81d · b0ee81d
1 parent 100b8d0
commit b0ee81d
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 1 deletion.
diff --git a/.changeset/green-pillows-hammer.md b/.changeset/green-pillows-hammer.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+Fix Vue `script setup` with other renderers applied
diff --git a/packages/astro/test/fixtures/vue-with-multi-renderer/astro.config.mjs b/packages/astro/test/fixtures/vue-with-multi-renderer/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+import vue from '@astrojs/vue';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [vue(), svelte()],
+});
diff --git a/packages/astro/test/fixtures/vue-with-multi-renderer/package.json b/packages/astro/test/fixtures/vue-with-multi-renderer/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@test/vue-with-multi-renderer",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/vue": "workspace:*",
+    "@astrojs/svelte": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/vue-with-multi-renderer/src/components/Counter.vue b/packages/astro/test/fixtures/vue-with-multi-renderer/src/components/Counter.vue
@@ -0,0 +1,54 @@
+<template>
+  <div :id="id" class="counter">
+    <button class="decrement" @click="subtract()">-</button>
+		<pre>{{count}}</pre>
+    <button class="increment" @click="add()">+</button>
+  </div>
+	<div :id="messageId" class="message">
+		<slot />
+	</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  props: {
+		id: {
+			type: String,
+			required: true
+		},
+    count: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
+		const id = props.id;
+		const count = ref(props.count);
+		const messageId = `${id}-message`;
+    const add = () => (count.value = count.value + 1);
+    const subtract = () => (count.value = count.value - 1);
+    return {
+      count,
+			id,
+			messageId,
+      add,
+      subtract,
+    };
+  },
+};
+</script>
+
+<style>
+  .counter {
+    display: grid;
+    font-size: 2em;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-top: 2em;
+    place-items: center;
+  }
+  .message {
+    text-align: center;
+  }
+</style>
diff --git a/...ges/astro/test/fixtures/vue-with-multi-renderer/src/components/CounterWithScriptSetup.vue b/...ges/astro/test/fixtures/vue-with-multi-renderer/src/components/CounterWithScriptSetup.vue
@@ -0,0 +1,15 @@
+<template>
+  <div :id="id" class="counter">
+    <button class="decrement" @click="subtract()">-</button>
+		<pre>{{count}}</pre>
+    <button class="increment" @click="add()">+</button>
+  </div>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+
+	const count = ref(0);
+	const add = () => (count.value = count.value + 1);
+	const subtract = () => (count.value = count.value - 1);
+</script>
diff --git a/packages/astro/test/fixtures/vue-with-multi-renderer/src/pages/index.astro b/packages/astro/test/fixtures/vue-with-multi-renderer/src/pages/index.astro
@@ -0,0 +1,55 @@
+---
+import Counter from '../components/Counter.vue';
+import CounterWithScriptSetup from '../components/CounterWithScriptSetup.vue';
+
+const someProps = {
+	count: 0,
+};
+---
+
+<html>
+	<head>
+		<!-- Head Stuff -->
+	</head>
+	<body>
+		<Counter id="server-only" {...someProps}>
+			<h1>Hello, server!</h1>
+		</Counter>
+
+		<Counter id="client-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</Counter>
+
+		<Counter id="client-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</Counter>
+
+		<Counter id="client-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</Counter>
+
+		<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
+
+		<CounterWithScriptSetup id="server-only" {...someProps}>
+			<h1>Hello, server!</h1>
+		</CounterWithScriptSetup>
+
+		<CounterWithScriptSetup id="client-idle" {...someProps} client:idle>
+			<h1>Hello, client:idle!</h1>
+		</CounterWithScriptSetup>
+
+		<CounterWithScriptSetup id="client-load" {...someProps} client:load>
+			<h1>Hello, client:load!</h1>
+		</CounterWithScriptSetup>
+
+		<CounterWithScriptSetup id="client-visible" {...someProps} client:visible>
+			<h1>Hello, client:visible!</h1>
+		</CounterWithScriptSetup>
+
+		<CounterWithScriptSetup id="client-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</CounterWithScriptSetup>
+	</body>
+</html>
diff --git a/packages/astro/test/vue-with-multi-renderer.test.js b/packages/astro/test/vue-with-multi-renderer.test.js
@@ -0,0 +1,21 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Vue with multi-renderer', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/vue-with-multi-renderer/',
+		});
+	});
+
+	it('builds with another renderer present', async () => {
+		try {
+			await fixture.build();
+		} catch (e) {
+			expect(e).to.equal(undefined, `Should not throw`);
+		}
+	});
+});
diff --git a/packages/integrations/vue/server.js b/packages/integrations/vue/server.js
@@ -3,7 +3,7 @@ import { renderToString } from 'vue/server-renderer';
 import StaticHtml from './static-html.js';
 
 function check(Component) {
-	return !!Component['ssrRender'];
+	return !!Component['ssrRender'] || !!Component['__ssrInlineRender'];
 }
 
 async function renderToStaticMarkup(Component, props, slotted) {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml