docs: remove type property from special elements tutorial (#4715)

Instead, determine type based on the existence of the files property. Removes console warnings
pull/6455/head
Simon Scharf 3 years ago committed by GitHub
parent f9b796cabe
commit f99deeb67b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -3,39 +3,35 @@
let root = [
{
type: 'folder',
name: 'Important work stuff',
files: [
{ type: 'file', name: 'quarterly-results.xlsx' }
{ name: 'quarterly-results.xlsx' }
]
},
{
type: 'folder',
name: 'Animal GIFs',
files: [
{
type: 'folder',
name: 'Dogs',
files: [
{ type: 'file', name: 'treadmill.gif' },
{ type: 'file', name: 'rope-jumping.gif' }
{ name: 'treadmill.gif' },
{ name: 'rope-jumping.gif' }
]
},
{
type: 'folder',
name: 'Goats',
files: [
{ type: 'file', name: 'parkour.gif' },
{ type: 'file', name: 'rampage.gif' }
{ name: 'parkour.gif' },
{ name: 'rampage.gif' }
]
},
{ type: 'file', name: 'cat-roomba.gif' },
{ type: 'file', name: 'duck-shuffle.gif' },
{ type: 'file', name: 'monkey-on-a-pig.gif' }
{ name: 'cat-roomba.gif' },
{ name: 'duck-shuffle.gif' },
{ name: 'monkey-on-a-pig.gif' }
]
},
{ type: 'file', name: 'TODO.md' }
{ name: 'TODO.md' }
];
</script>
<Folder name="Home" files={root} expanded/>
<Folder name="Home" files={root} expanded/>

@ -16,7 +16,7 @@
<ul>
{#each files as file}
<li>
{#if file.type === 'folder'}
{#if file.files}
<!-- show folder -->
{:else}
<File {...file}/>
@ -49,4 +49,4 @@
li {
padding: 0.2em 0;
}
</style>
</style>

@ -3,39 +3,35 @@
let root = [
{
type: 'folder',
name: 'Important work stuff',
files: [
{ type: 'file', name: 'quarterly-results.xlsx' }
{ name: 'quarterly-results.xlsx' }
]
},
{
type: 'folder',
name: 'Animal GIFs',
files: [
{
type: 'folder',
name: 'Dogs',
files: [
{ type: 'file', name: 'treadmill.gif' },
{ type: 'file', name: 'rope-jumping.gif' }
{ name: 'treadmill.gif' },
{ name: 'rope-jumping.gif' }
]
},
{
type: 'folder',
name: 'Goats',
files: [
{ type: 'file', name: 'parkour.gif' },
{ type: 'file', name: 'rampage.gif' }
{ name: 'parkour.gif' },
{ name: 'rampage.gif' }
]
},
{ type: 'file', name: 'cat-roomba.gif' },
{ type: 'file', name: 'duck-shuffle.gif' },
{ type: 'file', name: 'monkey-on-a-pig.gif' }
{ name: 'cat-roomba.gif' },
{ name: 'duck-shuffle.gif' },
{ name: 'monkey-on-a-pig.gif' }
]
},
{ type: 'file', name: 'TODO.md' }
{ name: 'TODO.md' }
];
</script>
<Folder name="Home" files={root} expanded/>
<Folder name="Home" files={root} expanded/>

@ -16,7 +16,7 @@
<ul>
{#each files as file}
<li>
{#if file.type === 'folder'}
{#if file.files}
<svelte:self {...file}/>
{:else}
<File {...file}/>
@ -49,4 +49,4 @@
li {
padding: 0.2em 0;
}
</style>
</style>

@ -7,7 +7,7 @@ Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allo
It's useful for things like this folder tree view, where folders can contain *other* folders. In `Folder.svelte` we want to be able to do this...
```html
{#if file.type === 'folder'}
{#if file.files}
<Folder {...file}/>
{:else}
<File {...file}/>
@ -17,7 +17,7 @@ It's useful for things like this folder tree view, where folders can contain *ot
...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:
```html
{#if file.type === 'folder'}
{#if file.files}
<svelte:self {...file}/>
{:else}
<File {...file}/>

Loading…
Cancel
Save