Skip to content

Commit

Permalink
Fix: Vue script setup with other renderers applied (#4706)
Browse files Browse the repository at this point in the history
* fix: add __ssrInlineRender to Vue check

* chore: remove console log

* test: vue builds with other renderer present

* chore: changeset
  • Loading branch information
bholmesdev authored Sep 9, 2022
1 parent 100b8d0 commit b0ee81d
Show file tree
Hide file tree
Showing 9 changed files with 179 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/green-pillows-hammer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/vue': patch
---

Fix Vue `script setup` with other renderers applied
Original file line number Diff line number Diff line change
@@ -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()],
});
10 changes: 10 additions & 0 deletions packages/astro/test/fixtures/vue-with-multi-renderer/package.json
Original file line number Diff line number Diff line change
@@ -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:*"
}
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 21 additions & 0 deletions packages/astro/test/vue-with-multi-renderer.test.js
Original file line number Diff line number Diff line change
@@ -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`);
}
});
});
2 changes: 1 addition & 1 deletion packages/integrations/vue/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
10 changes: 10 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b0ee81d

Please sign in to comment.