From b0ee81d0a70d8301530c321b670ab784c9bc00a2 Mon Sep 17 00:00:00 2001
From: Ben Holmes <hey@bholmes.dev>
Date: Fri, 9 Sep 2022 19:09:59 -0400
Subject: [PATCH] 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
---
 .changeset/green-pillows-hammer.md            |  5 ++
 .../vue-with-multi-renderer/astro.config.mjs  |  8 +++
 .../vue-with-multi-renderer/package.json      | 10 ++++
 .../src/components/Counter.vue                | 54 ++++++++++++++++++
 .../src/components/CounterWithScriptSetup.vue | 15 +++++
 .../src/pages/index.astro                     | 55 +++++++++++++++++++
 .../test/vue-with-multi-renderer.test.js      | 21 +++++++
 packages/integrations/vue/server.js           |  2 +-
 pnpm-lock.yaml                                | 10 ++++
 9 files changed, 179 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/green-pillows-hammer.md
 create mode 100644 packages/astro/test/fixtures/vue-with-multi-renderer/astro.config.mjs
 create mode 100644 packages/astro/test/fixtures/vue-with-multi-renderer/package.json
 create mode 100644 packages/astro/test/fixtures/vue-with-multi-renderer/src/components/Counter.vue
 create mode 100644 packages/astro/test/fixtures/vue-with-multi-renderer/src/components/CounterWithScriptSetup.vue
 create mode 100644 packages/astro/test/fixtures/vue-with-multi-renderer/src/pages/index.astro
 create mode 100644 packages/astro/test/vue-with-multi-renderer.test.js

diff --git a/.changeset/green-pillows-hammer.md b/.changeset/green-pillows-hammer.md
new file mode 100644
index 000000000000..ca3bef981bf4
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..3c67ad96522a
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..e36b012a6ac8
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..ed6fb5fb4370
--- /dev/null
+++ 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/packages/astro/test/fixtures/vue-with-multi-renderer/src/components/CounterWithScriptSetup.vue b/packages/astro/test/fixtures/vue-with-multi-renderer/src/components/CounterWithScriptSetup.vue
new file mode 100644
index 000000000000..1b63df0d6687
--- /dev/null
+++ b/packages/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
new file mode 100644
index 000000000000..12cd7bb54eb2
--- /dev/null
+++ 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 -->
+	        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </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
new file mode 100644
index 000000000000..62ad96491884
--- /dev/null
+++ 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
index 883aa4de0054..8d4c6df9e0e2 100644
--- 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
index 8f041c15e1b4..836f848b8f1c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2073,6 +2073,16 @@ importers:
       '@astrojs/vue': link:../../../../integrations/vue
       astro: link:../../..
 
+  packages/astro/test/fixtures/vue-with-multi-renderer:
+    specifiers:
+      '@astrojs/svelte': workspace:*
+      '@astrojs/vue': workspace:*
+      astro: workspace:*
+    dependencies:
+      '@astrojs/svelte': link:../../../../integrations/svelte
+      '@astrojs/vue': link:../../../../integrations/vue
+      astro: link:../../..
+
   packages/astro/test/fixtures/with-endpoint-routes:
     specifiers:
       astro: workspace:*