Prevent passing slot names as props (#8930)

matthewp · sarah11918 · natemoo-re · web-flow · commit c77f55d9c075 · 2023-10-27T08:11:46.000-04:00
Co-authored-by: Sarah Rainsberger &lt;5098874+sarah11918@users.noreply.github.com&gt;
Co-authored-by: Nate Moore &lt;7118177+natemoo-re@users.noreply.github.com&gt;
diff --git a/.changeset/swift-suits-drum.md b/.changeset/swift-suits-drum.md
@@ -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.
diff --git a/packages/integrations/vue/server.js b/packages/integrations/vue/server.js
@@ -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, {
diff --git a/packages/integrations/vue/test/basics.test.js b/packages/integrations/vue/test/basics.test.js
@@ -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;
+	});
+
+});
diff --git a/packages/integrations/vue/test/fixtures/basics/astro.config.mjs b/packages/integrations/vue/test/fixtures/basics/astro.config.mjs
@@ -0,0 +1,6 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+export default defineConfig({
+  integrations: [vue()],
+})
diff --git a/packages/integrations/vue/test/fixtures/basics/package.json b/packages/integrations/vue/test/fixtures/basics/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/vue-basics",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/vue": "workspace:*"
+  }
+}
diff --git a/packages/integrations/vue/test/fixtures/basics/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/basics/src/components/Foo.vue
@@ -0,0 +1,4 @@
+
+<template>
+	<div id="foo">bar</div>
+</template>
diff --git a/packages/integrations/vue/test/fixtures/basics/src/components/Parent.astro b/packages/integrations/vue/test/fixtures/basics/src/components/Parent.astro
@@ -0,0 +1,4 @@
+<section>
+	<header></header>
+	<footer><slot name="footer"></slot></footer>
+</section>
diff --git a/packages/integrations/vue/test/fixtures/basics/src/pages/index.astro b/packages/integrations/vue/test/fixtures/basics/src/pages/index.astro
@@ -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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -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.