mirror of https://github.com/sveltejs/svelte
Do not expose default slot let bindings to named slots (#6049)
* should not extend scope for across slots * disallow named slots inheriting let: scope from default slots * fix tests * fix test * fix * add runtime tests * rename test since it doesn't inherit anymore * fix lint * remove warnings * add compile script * document script * improve warning * fix test * handle renames * fix lint * gather names from all parents instead of just the nearest * remove unused import * add reminder --------- Co-authored-by: gtmnayan <gtmnayan@gmail.com>pull/8654/head svelte@4.0.0-next.0
Tan Li Hau
2 years ago
committed by
GitHub
parent
198dbcf714
commit
5c6d111065
@ -0,0 +1,40 @@
|
||||
// Compile all Svelte files in a directory to JS and CSS files
|
||||
// Usage: node scripts/compile-test.js <directory>
|
||||
|
||||
import { mkdirSync, readFileSync, writeFileSync } from 'fs';
|
||||
import path from 'path';
|
||||
import glob from 'tiny-glob/sync.js';
|
||||
import { compile } from '../src/compiler/index.js';
|
||||
|
||||
const cwd = path.resolve(process.argv[2]);
|
||||
|
||||
const options = [
|
||||
['normal', {}],
|
||||
['hydrate', { hydratable: true }],
|
||||
['ssr', { generate: 'ssr' }]
|
||||
];
|
||||
for (const file of glob('**/*.svelte', { cwd })) {
|
||||
const contents = readFileSync(`${cwd}/${file}`, 'utf-8').replace(/\r/g, '');
|
||||
let w;
|
||||
for (const [name, opts] of options) {
|
||||
const dir = `${cwd}/_output/${name}`;
|
||||
|
||||
const { js, css, warnings } = compile(contents, {
|
||||
...opts,
|
||||
filename: file
|
||||
});
|
||||
|
||||
if (warnings.length) {
|
||||
w = warnings;
|
||||
}
|
||||
|
||||
mkdirSync(dir, { recursive: true });
|
||||
js.code && writeFileSync(`${dir}/${file.replace(/\.svelte$/, '.js')}`, js.code);
|
||||
css.code && writeFileSync(`${dir}/${file.replace(/\.svelte$/, '.css')}`, css.code);
|
||||
}
|
||||
|
||||
if (w) {
|
||||
console.log(`Warnings for ${file}:`);
|
||||
console.log(w);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let promise = new Promise(resolve => resolve(10));
|
||||
</script>
|
||||
|
||||
{#each {length: 3} as _, i}
|
||||
<slot item={i}/>
|
||||
{/each}
|
||||
|
||||
{#await promise then value}
|
||||
<slot {value}/>
|
||||
{/await}
|
||||
@ -0,0 +1,7 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>0 - undefined</div>
|
||||
<div>1 - undefined</div>
|
||||
<div>2 - undefined</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
</script>
|
||||
|
||||
<Nested let:item let:value>
|
||||
<div>{item} - {value}</div>
|
||||
</Nested>
|
||||
@ -0,0 +1,3 @@
|
||||
<slot />
|
||||
<slot thing={2} name="thing"/>
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
html: '<span>undefined</span><span>2</span>'
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
</script>
|
||||
|
||||
<Nested let:thing>
|
||||
<span>{thing}</span>
|
||||
<svelte:fragment slot="thing" let:thing><span>{thing}</span></svelte:fragment>
|
||||
</Nested>
|
||||
@ -1,6 +1,4 @@
|
||||
<script>
|
||||
import { onDestroy } from 'svelte';
|
||||
|
||||
let count = 0;
|
||||
|
||||
function increment() {
|
||||
@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
let count = 42;
|
||||
</script>
|
||||
|
||||
<Nested let:count>
|
||||
@ -0,0 +1,2 @@
|
||||
<slot thing={2} name="thing"/>
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
error: 'thing is not defined'
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
|
||||
</script>
|
||||
|
||||
<Nested let:thing>
|
||||
<svelte:fragment slot="thing"><span>{thing}</span></svelte:fragment>
|
||||
</Nested>
|
||||
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
</script>
|
||||
|
||||
<Nested let:count>
|
||||
<p>
|
||||
count in default slot: {count}
|
||||
</p>
|
||||
<p slot="bar">
|
||||
count in bar slot: {count}
|
||||
</p>
|
||||
</Nested>
|
||||
|
||||
<Nested let:count>
|
||||
<p>
|
||||
count in default slot: {count}
|
||||
</p>
|
||||
<p>
|
||||
count in bar slot: {count}
|
||||
</p>
|
||||
</Nested>
|
||||
|
||||
<Nested let:foo={count}>
|
||||
<p slot="bar">
|
||||
count in bar slot: {count}
|
||||
</p>
|
||||
</Nested>
|
||||
@ -0,0 +1,26 @@
|
||||
[
|
||||
{
|
||||
"code": "missing-declaration",
|
||||
"message": "let:count declared on parent component cannot be used inside named slot",
|
||||
"start": {
|
||||
"column": 22,
|
||||
"line": 10
|
||||
},
|
||||
"end": {
|
||||
"column": 27,
|
||||
"line": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
"code": "missing-declaration",
|
||||
"message": "let:count declared on parent component cannot be used inside named slot",
|
||||
"start": {
|
||||
"column": 22,
|
||||
"line": 25
|
||||
},
|
||||
"end": {
|
||||
"column": 27,
|
||||
"line": 25
|
||||
}
|
||||
}
|
||||
]
|
||||
Loading…
Reference in new issue