-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: renderer behavior with no children (#2078)
* fix: renderer behavior with no children * [ci] Prettier fix * Force CI * fix: properly handle falsy values * [ci] Prettier fix * chore: force ci * [experiment] netlify ignore Co-authored-by: GitHub Action <github-action@users.noreply.github.com>
- Loading branch information
1 parent
62a5e98
commit ac3e870
Showing
27 changed files
with
356 additions
and
19 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,10 @@ | ||
--- | ||
'astro': patch | ||
'@astrojs/renderer-preact': patch | ||
'@astrojs/renderer-react': patch | ||
'@astrojs/renderer-svelte': patch | ||
'@astrojs/renderer-vue': patch | ||
'@astrojs/renderer-solid': patch | ||
--- | ||
|
||
Fix behavior of renderers when no children are passed in |
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 |
---|---|---|
@@ -1,2 +1,2 @@ | ||
[build] | ||
ignore = "git diff --quiet main HEAD www/ docs/" | ||
ignore = "git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- docs/ www/" |
21 changes: 21 additions & 0 deletions
21
packages/astro/test/fixtures/slots-preact/src/components/Counter.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,21 @@ | ||
import { h, Fragment } from 'preact'; | ||
import { useState } from 'preact/hooks' | ||
|
||
export default function Counter({ children, count: initialCount, case: id }) { | ||
const [count, setCount] = useState(initialCount); | ||
const add = () => setCount((i) => i + 1); | ||
const subtract = () => setCount((i) => i - 1); | ||
|
||
return ( | ||
<> | ||
<div className="counter"> | ||
<button onClick={subtract}>-</button> | ||
<pre>{count}</pre> | ||
<button onClick={add}>+</button> | ||
</div> | ||
<div id={id} className="counter-message"> | ||
{children || <h1>Fallback</h1>} | ||
</div> | ||
</> | ||
); | ||
} |
11 changes: 11 additions & 0 deletions
11
packages/astro/test/fixtures/slots-preact/src/pages/index.astro
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,11 @@ | ||
--- | ||
import Counter from '../components/Counter.jsx' | ||
--- | ||
<main> | ||
<Counter case="default-self-closing" client:visible/> | ||
<Counter case="default-empty" client:visible></Counter> | ||
<Counter case="zero" client:visible>{0}</Counter> | ||
<Counter case="false" client:visible>{false}</Counter> | ||
<Counter case="string" client:visible>{''}</Counter> | ||
<Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> | ||
</main> |
20 changes: 20 additions & 0 deletions
20
packages/astro/test/fixtures/slots-react/src/components/Counter.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,20 @@ | ||
import React, { useState } from 'react'; | ||
|
||
export default function Counter({ children, count: initialCount, case: id }) { | ||
const [count, setCount] = useState(initialCount); | ||
const add = () => setCount((i) => i + 1); | ||
const subtract = () => setCount((i) => i - 1); | ||
|
||
return ( | ||
<> | ||
<div className="counter"> | ||
<button onClick={subtract}>-</button> | ||
<pre>{count}</pre> | ||
<button onClick={add}>+</button> | ||
</div> | ||
<div id={id} className="counter-message"> | ||
{children || <h1>Fallback</h1>} | ||
</div> | ||
</> | ||
); | ||
} |
11 changes: 11 additions & 0 deletions
11
packages/astro/test/fixtures/slots-react/src/pages/index.astro
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,11 @@ | ||
--- | ||
import Counter from '../components/Counter.jsx' | ||
--- | ||
<main> | ||
<Counter case="default-self-closing" client:visible/> | ||
<Counter case="default-empty" client:visible></Counter> | ||
<Counter case="zero" client:visible>{0}</Counter> | ||
<Counter case="false" client:visible>{false}</Counter> | ||
<Counter case="string" client:visible>{''}</Counter> | ||
<Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> | ||
</main> |
14 changes: 14 additions & 0 deletions
14
packages/astro/test/fixtures/slots-solid/src/components/Counter.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,14 @@ | ||
import React, { useState } from 'react'; | ||
|
||
export default function Counter({ children, count: initialCount, case: id }) { | ||
return ( | ||
<> | ||
<div className="counter"> | ||
<pre>{0}</pre> | ||
</div> | ||
<div id={id} className="counter-message"> | ||
{children || <h1>Fallback</h1>} | ||
</div> | ||
</> | ||
); | ||
} |
11 changes: 11 additions & 0 deletions
11
packages/astro/test/fixtures/slots-solid/src/pages/index.astro
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,11 @@ | ||
--- | ||
import Counter from '../components/Counter.jsx' | ||
--- | ||
<main> | ||
<Counter case="default-self-closing" client:visible/> | ||
<Counter case="default-empty" client:visible></Counter> | ||
<Counter case="zero" client:visible>{0}</Counter> | ||
<Counter case="false" client:visible>{false}</Counter> | ||
<Counter case="string" client:visible>{''}</Counter> | ||
<Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> | ||
</main> |
36 changes: 36 additions & 0 deletions
36
packages/astro/test/fixtures/slots-svelte/src/components/Counter.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,36 @@ | ||
<script> | ||
let count = 0; | ||
export let id; | ||
function add() { | ||
count += 1; | ||
} | ||
function subtract() { | ||
count -= 1; | ||
} | ||
</script> | ||
|
||
<div class="counter"> | ||
<button on:click={subtract}>-</button> | ||
<pre>{ count }</pre> | ||
<button on:click={add}>+</button> | ||
</div> | ||
<div id={id}> | ||
<slot> | ||
<h1 id="fallback">Fallback</h1> | ||
</slot> | ||
</div> | ||
|
||
<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> |
11 changes: 11 additions & 0 deletions
11
packages/astro/test/fixtures/slots-svelte/src/pages/index.astro
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,11 @@ | ||
--- | ||
import Counter from '../components/Counter.svelte' | ||
--- | ||
<main> | ||
<Counter id="default-self-closing" client:visible/> | ||
<Counter id="default-empty" client:visible></Counter> | ||
<Counter case="zero" client:visible>{0}</Counter> | ||
<Counter case="false" client:visible>{false}</Counter> | ||
<Counter case="string" client:visible>{''}</Counter> | ||
<Counter id="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> | ||
</main> |
46 changes: 46 additions & 0 deletions
46
packages/astro/test/fixtures/slots-vue/src/components/Counter.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,46 @@ | ||
<template> | ||
<div class="counter"> | ||
<button @click="subtract()">-</button> | ||
<pre>{{ count }}</pre> | ||
<button @click="add()">+</button> | ||
</div> | ||
<div :id="case" class="counter-message"> | ||
<slot> | ||
<h1>Fallback</h1> | ||
</slot> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import { ref } from 'vue'; | ||
export default { | ||
props: { | ||
case: String, | ||
}, | ||
setup(props) { | ||
const count = ref(0); | ||
const add = () => (count.value = count.value + 1); | ||
const subtract = () => (count.value = count.value - 1); | ||
return { | ||
case: props.case, | ||
count, | ||
add, | ||
subtract, | ||
}; | ||
}, | ||
}; | ||
</script> | ||
|
||
<style> | ||
.counter { | ||
display: grid; | ||
font-size: 2em; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
margin-top: 2em; | ||
place-items: center; | ||
} | ||
.counter-message { | ||
text-align: center; | ||
} | ||
</style> |
11 changes: 11 additions & 0 deletions
11
packages/astro/test/fixtures/slots-vue/src/pages/index.astro
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,11 @@ | ||
--- | ||
import Counter from '../components/Counter.vue' | ||
--- | ||
<main> | ||
<Counter case="default-self-closing" client:visible/> | ||
<Counter case="default-empty" client:visible></Counter> | ||
<Counter case="zero" client:visible>{0}</Counter> | ||
<Counter case="false" client:visible>{false}</Counter> | ||
<Counter case="string" client:visible>{''}</Counter> | ||
<Counter case="content" client:visible><h1 id="slotted">Hello world!</h1></Counter> | ||
</main> |
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 @@ | ||
import { expect } from 'chai'; | ||
import cheerio from 'cheerio'; | ||
import { loadFixture } from './test-utils.js'; | ||
|
||
describe('Slots: Preact', () => { | ||
let fixture; | ||
|
||
before(async () => { | ||
fixture = await loadFixture({ projectRoot: './fixtures/slots-preact/', renderers: ['@astrojs/renderer-preact'] }); | ||
await fixture.build(); | ||
}); | ||
|
||
it('Renders default slot', async () => { | ||
const html = await fixture.readFile('/index.html'); | ||
const $ = cheerio.load(html); | ||
|
||
expect($('#default-self-closing').text().trim()).to.equal('Fallback'); | ||
expect($('#default-empty').text().trim()).to.equal('Fallback'); | ||
expect($('#zero').text().trim()).to.equal('0'); | ||
expect($('#false').text().trim()).to.equal(''); | ||
expect($('#string').text().trim()).to.equal(''); | ||
expect($('#content').text().trim()).to.equal('Hello world!'); | ||
}); | ||
}); |
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 @@ | ||
import { expect } from 'chai'; | ||
import cheerio from 'cheerio'; | ||
import { loadFixture } from './test-utils.js'; | ||
|
||
describe('Slots: React', () => { | ||
let fixture; | ||
|
||
before(async () => { | ||
fixture = await loadFixture({ projectRoot: './fixtures/slots-react/', renderers: ['@astrojs/renderer-react'] }); | ||
await fixture.build(); | ||
}); | ||
|
||
it('Renders default slot', async () => { | ||
const html = await fixture.readFile('/index.html'); | ||
const $ = cheerio.load(html); | ||
|
||
expect($('#default-self-closing').text().trim()).to.equal('Fallback'); | ||
expect($('#default-empty').text().trim()).to.equal('Fallback'); | ||
expect($('#zero').text().trim()).to.equal('0'); | ||
expect($('#false').text().trim()).to.equal(''); | ||
expect($('#string').text().trim()).to.equal(''); | ||
expect($('#content').text().trim()).to.equal('Hello world!'); | ||
}); | ||
}); |
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 @@ | ||
import { expect } from 'chai'; | ||
import cheerio from 'cheerio'; | ||
import { loadFixture } from './test-utils.js'; | ||
|
||
describe('Slots: Solid', () => { | ||
let fixture; | ||
|
||
before(async () => { | ||
fixture = await loadFixture({ projectRoot: './fixtures/slots-solid/', renderers: ['@astrojs/renderer-solid'] }); | ||
await fixture.build(); | ||
}); | ||
|
||
it('Renders default slot', async () => { | ||
const html = await fixture.readFile('/index.html'); | ||
const $ = cheerio.load(html); | ||
|
||
expect($('#default-self-closing').text().trim()).to.equal('Fallback'); | ||
expect($('#default-empty').text().trim()).to.equal('Fallback'); | ||
expect($('#zero').text().trim()).to.equal('0'); | ||
expect($('#false').text().trim()).to.equal(''); | ||
expect($('#string').text().trim()).to.equal(''); | ||
expect($('#content').text().trim()).to.equal('Hello world!'); | ||
}); | ||
}); |
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 @@ | ||
import { expect } from 'chai'; | ||
import cheerio from 'cheerio'; | ||
import { loadFixture } from './test-utils.js'; | ||
|
||
describe('Slots: Svelte', () => { | ||
let fixture; | ||
|
||
before(async () => { | ||
fixture = await loadFixture({ projectRoot: './fixtures/slots-svelte/', renderers: ['@astrojs/renderer-svelte'] }); | ||
await fixture.build(); | ||
}); | ||
|
||
it('Renders default slot', async () => { | ||
const html = await fixture.readFile('/index.html'); | ||
const $ = cheerio.load(html); | ||
|
||
expect($('#default-self-closing').text().trim()).to.equal('Fallback'); | ||
expect($('#default-empty').text().trim()).to.equal('Fallback'); | ||
expect($('#zero').text().trim()).to.equal(''); | ||
expect($('#false').text().trim()).to.equal(''); | ||
expect($('#string').text().trim()).to.equal(''); | ||
expect($('#content').text().trim()).to.equal('Hello world!'); | ||
}); | ||
}); |
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 @@ | ||
import { expect } from 'chai'; | ||
import cheerio from 'cheerio'; | ||
import { loadFixture } from './test-utils.js'; | ||
|
||
describe('Slots: Vue', () => { | ||
let fixture; | ||
|
||
before(async () => { | ||
fixture = await loadFixture({ projectRoot: './fixtures/slots-vue/', renderers: ['@astrojs/renderer-vue'] }); | ||
await fixture.build(); | ||
}); | ||
|
||
it('Renders default slot', async () => { | ||
const html = await fixture.readFile('/index.html'); | ||
const $ = cheerio.load(html); | ||
|
||
expect($('#default-self-closing').text().trim()).to.equal('Fallback'); | ||
expect($('#default-empty').text().trim()).to.equal('Fallback'); | ||
expect($('#zero').text().trim()).to.equal('0'); | ||
expect($('#false').text().trim()).to.equal(''); | ||
expect($('#string').text().trim()).to.equal(''); | ||
expect($('#content').text().trim()).to.equal('Hello world!'); | ||
}); | ||
}); |
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 |
---|---|---|
@@ -1,4 +1,4 @@ | ||
import { h, render } from 'preact'; | ||
import StaticHtml from './static-html.js'; | ||
|
||
export default (element) => (Component, props, children) => render(h(Component, props, h(StaticHtml, { value: children })), element); | ||
export default (element) => (Component, props, children) => render(h(Component, props, children != null ? h(StaticHtml, { value: children }) : children), element); |
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
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.