From c77f55d9c075569be018dc1fb5a42c932b9071c7 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Fri, 27 Oct 2023 08:11:46 -0400
Subject: [PATCH] Prevent passing slot names as props (#8930)

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>
Co-authored-by: Nate Moore <7118177+natemoo-re@users.noreply.github.com>
---
 .changeset/swift-suits-drum.md                |  5 ++++
 packages/integrations/vue/server.js           |  4 +++-
 packages/integrations/vue/test/basics.test.js | 24 +++++++++++++++++++
 .../vue/test/fixtures/basics/astro.config.mjs |  6 +++++
 .../vue/test/fixtures/basics/package.json     |  9 +++++++
 .../fixtures/basics/src/components/Foo.vue    |  4 ++++
 .../basics/src/components/Parent.astro        |  4 ++++
 .../fixtures/basics/src/pages/index.astro     | 14 +++++++++++
 pnpm-lock.yaml                                |  9 +++++++
 9 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/swift-suits-drum.md
 create mode 100644 packages/integrations/vue/test/basics.test.js
 create mode 100644 packages/integrations/vue/test/fixtures/basics/astro.config.mjs
 create mode 100644 packages/integrations/vue/test/fixtures/basics/package.json
 create mode 100644 packages/integrations/vue/test/fixtures/basics/src/components/Foo.vue
 create mode 100644 packages/integrations/vue/test/fixtures/basics/src/components/Parent.astro
 create mode 100644 packages/integrations/vue/test/fixtures/basics/src/pages/index.astro

diff --git a/.changeset/swift-suits-drum.md b/.changeset/swift-suits-drum.md
new file mode 100644
index 000000000000..664541c44d7c
--- /dev/null
+++ 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
index 4e06baa5f671..4bcf0490373c 100644
--- 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
new file mode 100644
index 000000000000..a4bdc7f873fb
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..afd8fbca69d4
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..9cae3999cef2
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..29db411cdec4
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..25c574998261
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..e17de6edf9f8
--- /dev/null
+++ 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
index 86f4cee5b516..bdc87fe98423 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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: