michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* fix: add __ssrInlineRender to Vue check

* chore: remove console log

* test: vue builds with other renderer present

* chore: changeset
This commit is contained in:
Ben Holmes 2022-09-09 19:09:59 -04:00 committed by GitHub
parent 100b8d0583
commit b0ee81d0a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 179 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/green-pillows-hammer.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/vue': patch
---
Fix Vue `script setup` with other renderers applied

8
packages/astro/test/fixtures/vue-with-multi-renderer/astro.config.mjs vendored Normal file
View file

@ -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
packages/astro/test/fixtures/vue-with-multi-renderer/package.json vendored Normal file
View file

@ -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:*"
}
}

54
packages/astro/test/fixtures/vue-with-multi-renderer/src/components/Counter.vue vendored Normal file
View file

@ -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>

15
packages/astro/test/fixtures/vue-with-multi-renderer/src/components/CounterWithScriptSetup.vue vendored Normal file
View file

@ -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>

55
packages/astro/test/fixtures/vue-with-multi-renderer/src/pages/index.astro vendored Normal file
View file

@ -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
packages/astro/test/vue-with-multi-renderer.test.js Normal file
View file

@ -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
packages/integrations/vue/server.js
View file

@ -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) {

10
pnpm-lock.yaml
View file

@ -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:*