Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

Prevent passing slot names as props (#8930)

Browse source 
Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>
Co-authored-by: Nate Moore <7118177+natemoo-re@users.noreply.github.com>
This commit is contained in:
Matthew Phillips 2023-10-27 08:11:46 -04:00 • committed by GitHub
parent ca90b47cfc
commit c77f55d9c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 78 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/swift-suits-drum.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/vue': patch
---
Fixes an issue where Astro slot names were being rendered as attributes in components. Astro slot names will no longer be sent as props to framework components.

4
packages/integrations/vue/server.js
View file

@ -7,8 +7,10 @@ function check(Component) {
return !!Component['ssrRender'] || !!Component['__ssrInlineRender'];
}
async function renderToStaticMarkup(Component, props, slotted, metadata) {
async function renderToStaticMarkup(Component, inputProps, slotted, metadata) {
const slots = {};
const props = { ...inputProps };
delete props.slot;
for (const [key, value] of Object.entries(slotted)) {
slots[key] = () =>
h(StaticHtml, {

24
packages/integrations/vue/test/basics.test.js Normal file
View file

@ -0,0 +1,24 @@
import { loadFixture } from './test-utils.js';
import { expect } from 'chai';
import { parseHTML } from 'linkedom';
describe('Basics', () => {
/** @type {import('./test-utils').Fixture} */
let fixture;
before(async () => {
fixture = await loadFixture({
root: './fixtures/basics/',
});
await fixture.build();
});
it('Slots are added without the slot attribute', async () => {
const data = await fixture.readFile('/index.html');
const { document } = parseHTML(data);
const bar = document.querySelector('#foo');
expect(bar).not.to.be.undefined;
expect(bar.getAttribute('slot')).to.be.null;
});
});

6
packages/integrations/vue/test/fixtures/basics/astro.config.mjs vendored Normal file
View file

@ -0,0 +1,6 @@
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
export default defineConfig({
integrations: [vue()],
})

9
packages/integrations/vue/test/fixtures/basics/package.json vendored Normal file
View file

@ -0,0 +1,9 @@
{
"name": "@test/vue-basics",
"version": "0.0.0",
"private": true,
"dependencies": {
"astro": "workspace:*",
"@astrojs/vue": "workspace:*"
}
}

4
packages/integrations/vue/test/fixtures/basics/src/components/Foo.vue vendored Normal file
View file

@ -0,0 +1,4 @@
<template>
<div id="foo">bar</div>
</template>

4
packages/integrations/vue/test/fixtures/basics/src/components/Parent.astro vendored Normal file
View file

@ -0,0 +1,4 @@
<section>
<header></header>
<footer><slot name="footer"></slot></footer>
</section>

14
packages/integrations/vue/test/fixtures/basics/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,14 @@
---
import Parent from '../components/Parent.astro';
import Bar from '../components/Foo.vue';
---
<html>
<head>
<title>Testing</title>
</head>
<body>
<Parent>
<Bar slot="footer" />
</Parent>
</body>
</html>

9
pnpm-lock.yaml generated
View file

@ -4804,6 +4804,15 @@ importers:
specifier: 4.0.0
version: 4.0.0
packages/integrations/vue/test/fixtures/basics:
dependencies:
'@astrojs/vue':
specifier: workspace:*
version: link:../../..
astro:
specifier: workspace:*
version: link:../../../../../astro
packages/internal-helpers:
devDependencies:
astro-scripts: