diff options
9 files changed, 179 insertions, 1 deletions
diff --git a/.changeset/green-pillows-hammer.md b/.changeset/green-pillows-hammer.md new file mode 100644 index 000000000..ca3bef981 --- /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 000000000..3c67ad965 --- /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 000000000..e36b012a6 --- /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 000000000..ed6fb5fb4 --- /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 000000000..1b63df0d6 --- /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 000000000..12cd7bb54 --- /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 --> + </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 000000000..62ad96491 --- /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 883aa4de0..8d4c6df9e 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 8f041c15e..836f848b8 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:* |