forked from laptou/astro
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Enable named slots in renderers (withastro#3652)
* feat: pass all slots to renderers * refactor: pass `slots` as top-level props * test: add named slot test for frameworks * fix: nested hydration, slots that are not initially rendered * test: add nested-recursive e2e test * fix: render unmatched custom element children * chore: update lockfile * fix: unrendered slots for client:only * fix(lit): ensure lit integration uses new slots API * chore: add changeset * chore: add changesets * fix: lit slots * feat: convert dash-case or snake_case slots to camelCase for JSX * feat: remove tmpl special logic * test: add slot components-in-markdown test * refactor: prefer Object.entries.map() to for/of loop Co-authored-by: Nate Moore <nate@astro.build>
- Loading branch information
1 parent
bac604c
commit 441e557
Showing
35 changed files
with
597 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { defineConfig } from 'astro/config'; | ||
import preact from '@astrojs/preact'; | ||
import react from '@astrojs/react'; | ||
import svelte from '@astrojs/svelte'; | ||
import vue from '@astrojs/vue'; | ||
import solid from '@astrojs/solid-js'; | ||
|
||
// https://astro.build/config | ||
export default defineConfig({ | ||
// Enable many frameworks to support all different kinds of components. | ||
integrations: [preact(), react(), svelte(), vue(), solid()], | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
{ | ||
"name": "@e2e/nested-recursive", | ||
"version": "0.0.0", | ||
"private": true, | ||
"devDependencies": { | ||
"@astrojs/preact": "workspace:*", | ||
"@astrojs/react": "workspace:*", | ||
"@astrojs/solid-js": "workspace:*", | ||
"@astrojs/svelte": "workspace:*", | ||
"@astrojs/vue": "workspace:*", | ||
"astro": "workspace:*" | ||
}, | ||
"dependencies": { | ||
"preact": "^10.7.3", | ||
"react": "^18.1.0", | ||
"react-dom": "^18.1.0", | ||
"solid-js": "^1.4.3", | ||
"svelte": "^3.48.0", | ||
"vue": "^3.2.36" | ||
}, | ||
"scripts": { | ||
"dev": "astro dev" | ||
} | ||
} |
17 changes: 17 additions & 0 deletions
17
e2e/fixtures/nested-recursive/src/components/PreactCounter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { useState } from 'preact/hooks'; | ||
|
||
/** a counter written in Preact */ | ||
export default function PreactCounter({ children, id }) { | ||
const [count, setCount] = useState(0); | ||
const add = () => setCount((i) => i + 1); | ||
const subtract = () => setCount((i) => i - 1); | ||
|
||
return ( | ||
<div id={id} class="counter"> | ||
<button class="decrement" onClick={subtract}>-</button> | ||
<pre id={`${id}-count`}>{count}</pre> | ||
<button id={`${id}-increment`} class="increment" onClick={add}>+</button> | ||
<div class="children">{children}</div> | ||
</div> | ||
); | ||
} |
17 changes: 17 additions & 0 deletions
17
e2e/fixtures/nested-recursive/src/components/ReactCounter.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { useState } from 'react'; | ||
|
||
/** a counter written in React */ | ||
export default function ReactCounter({ children, id }) { | ||
const [count, setCount] = useState(0); | ||
const add = () => setCount((i) => i + 1); | ||
const subtract = () => setCount((i) => i - 1); | ||
|
||
return ( | ||
<div id={id} className="counter"> | ||
<button className="decrement" onClick={subtract}>-</button> | ||
<pre id={`${id}-count`}>{count}</pre> | ||
<button id={`${id}-increment`} className="increment" onClick={add}>+</button> | ||
<div className="children">{children}</div> | ||
</div> | ||
); | ||
} |
17 changes: 17 additions & 0 deletions
17
e2e/fixtures/nested-recursive/src/components/SolidCounter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { createSignal } from 'solid-js'; | ||
|
||
/** a counter written with Solid */ | ||
export default function SolidCounter({ children, id }) { | ||
const [count, setCount] = createSignal(0); | ||
const add = () => setCount(count() + 1); | ||
const subtract = () => setCount(count() - 1); | ||
|
||
return ( | ||
<div id={id} class="counter"> | ||
<button class="decrement" onClick={subtract}>-</button> | ||
<pre id={`${id}-count`}>{count()}</pre> | ||
<button id={`${id}-increment`} class="increment" onClick={add}>+</button> | ||
<div class="children">{children}</div> | ||
</div> | ||
); | ||
} |
29 changes: 29 additions & 0 deletions
29
e2e/fixtures/nested-recursive/src/components/SvelteCounter.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
|
||
<script> | ||
export let id; | ||
let children; | ||
let count = 0; | ||
function add() { | ||
count += 1; | ||
} | ||
function subtract() { | ||
count -= 1; | ||
} | ||
</script> | ||
|
||
<div {id} class="counter"> | ||
<button class="decrement" on:click={subtract}>-</button> | ||
<pre id={`${id}-count`}>{ count }</pre> | ||
<button id={`${id}-increment`} class="increment" on:click={add}>+</button> | ||
<div class="children"> | ||
<slot /> | ||
</div> | ||
</div> | ||
|
||
<style> | ||
.counter { | ||
background: white; | ||
} | ||
</style> |
34 changes: 34 additions & 0 deletions
34
e2e/fixtures/nested-recursive/src/components/VueCounter.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
<template> | ||
<div :id="id" class="counter"> | ||
<button class="decrement" @click="subtract()">-</button> | ||
<pre :id="`${id}-count`">{{ count }}</pre> | ||
<button :id="`${id}-increment`" class="increment" @click="add()">+</button> | ||
<div class="children"> | ||
<slot /> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import { ref } from 'vue'; | ||
export default { | ||
props: { | ||
id: { | ||
type: String, | ||
required: true | ||
} | ||
}, | ||
setup(props) { | ||
const count = ref(0); | ||
const add = () => (count.value = count.value + 1); | ||
const subtract = () => (count.value = count.value - 1); | ||
return { | ||
id: props.id, | ||
count, | ||
add, | ||
subtract, | ||
}; | ||
}, | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
--- | ||
import ReactCounter from '../components/ReactCounter.jsx'; | ||
import PreactCounter from '../components/PreactCounter.tsx'; | ||
import SolidCounter from '../components/SolidCounter.tsx'; | ||
import VueCounter from '../components/VueCounter.vue'; | ||
import SvelteCounter from '../components/SvelteCounter.svelte'; | ||
--- | ||
|
||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width" /> | ||
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> | ||
</head> | ||
<body> | ||
<main> | ||
<ReactCounter id="react-counter" client:idle> | ||
<PreactCounter id="preact-counter" client:idle> | ||
<SolidCounter id="solid-counter" client:idle> | ||
<SvelteCounter id="svelte-counter" client:idle> | ||
<VueCounter id="vue-counter" client:idle /> | ||
</SvelteCounter> | ||
</SolidCounter> | ||
</PreactCounter> | ||
</ReactCounter> | ||
</main> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
import { test as base, expect } from '@playwright/test'; | ||
import { loadFixture } from './test-utils.js'; | ||
|
||
const test = base.extend({ | ||
astro: async ({}, use) => { | ||
const fixture = await loadFixture({ root: './fixtures/nested-recursive/' }); | ||
await use(fixture); | ||
}, | ||
}); | ||
|
||
let devServer; | ||
|
||
test.beforeEach(async ({ astro }) => { | ||
devServer = await astro.startDevServer(); | ||
}); | ||
|
||
test.afterEach(async () => { | ||
await devServer.stop(); | ||
}); | ||
|
||
test.describe('Recursive Nested Frameworks', () => { | ||
test('React counter', async ({ astro, page }) => { | ||
await page.goto('/'); | ||
|
||
const counter = await page.locator('#react-counter'); | ||
await expect(counter, 'component is visible').toBeVisible(); | ||
|
||
const count = await counter.locator('#react-counter-count'); | ||
await expect(count, 'initial count is 0').toHaveText('0'); | ||
|
||
const increment = await counter.locator('#react-counter-increment'); | ||
await increment.click(); | ||
|
||
await expect(count, 'count incremented by 1').toHaveText('1'); | ||
}); | ||
|
||
test('Preact counter', async ({ astro, page }) => { | ||
await page.goto('/'); | ||
|
||
const counter = await page.locator('#preact-counter'); | ||
await expect(counter, 'component is visible').toBeVisible(); | ||
|
||
const count = await counter.locator('#preact-counter-count'); | ||
await expect(count, 'initial count is 0').toHaveText('0'); | ||
|
||
const increment = await counter.locator('#preact-counter-increment'); | ||
await increment.click(); | ||
|
||
await expect(count, 'count incremented by 1').toHaveText('1'); | ||
}); | ||
|
||
test('Solid counter', async ({ astro, page }) => { | ||
await page.goto('/'); | ||
|
||
const counter = await page.locator('#solid-counter'); | ||
await expect(counter, 'component is visible').toBeVisible(); | ||
|
||
const count = await counter.locator('#solid-counter-count'); | ||
await expect(count, 'initial count is 0').toHaveText('0'); | ||
|
||
const increment = await counter.locator('#solid-counter-increment'); | ||
await increment.click(); | ||
|
||
await expect(count, 'count incremented by 1').toHaveText('1'); | ||
}); | ||
|
||
test('Vue counter', async ({ astro, page }) => { | ||
await page.goto('/'); | ||
|
||
const counter = await page.locator('#vue-counter'); | ||
await expect(counter, 'component is visible').toBeVisible(); | ||
|
||
const count = await counter.locator('#vue-counter-count'); | ||
await expect(count, 'initial count is 0').toHaveText('0'); | ||
|
||
const increment = await counter.locator('#vue-counter-increment'); | ||
await increment.click(); | ||
|
||
await expect(count, 'count incremented by 1').toHaveText('1'); | ||
}); | ||
|
||
test('Svelte counter', async ({ astro, page }) => { | ||
await page.goto('/'); | ||
|
||
const counter = await page.locator('#svelte-counter'); | ||
await expect(counter, 'component is visible').toBeVisible(); | ||
|
||
const count = await counter.locator('#svelte-counter-count'); | ||
await expect(count, 'initial count is 0').toHaveText('0'); | ||
|
||
const increment = await counter.locator('#svelte-counter-increment'); | ||
await increment.click(); | ||
|
||
await expect(count, 'count incremented by 1').toHaveText('1'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.