mirror of https://github.com/sveltejs/svelte
Simon Holthausen
7 months ago
parent
c9c4b9d50b
commit
2dc2085d0d
@ -0,0 +1,108 @@
|
|||||||
|
export async function load({ url }) {
|
||||||
|
if (url.pathname === '/docs') {
|
||||||
|
return {
|
||||||
|
sections: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const { get_docs_data, get_docs_list } = await import('../docs/render.js');
|
||||||
|
|
||||||
|
const sections = get_docs_list(await get_docs_data('./src/routes/docs-new/content', 'docs-new'));
|
||||||
|
sections.push(
|
||||||
|
{
|
||||||
|
title: 'Reference - Runes',
|
||||||
|
pages: [
|
||||||
|
{ title: '$state' },
|
||||||
|
{ title: '$derived' },
|
||||||
|
{ title: '$effect' },
|
||||||
|
{ title: '$props' },
|
||||||
|
{ title: '$inspect' },
|
||||||
|
{ title: '$host' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Reference - Imports',
|
||||||
|
pages: [
|
||||||
|
{ title: 'svelte' },
|
||||||
|
{ title: 'svelte/reactivity' },
|
||||||
|
{ title: 'svelte/server' },
|
||||||
|
{ title: `svelte/elements` },
|
||||||
|
{ title: `svelte/store` },
|
||||||
|
{ title: `svelte/actions` },
|
||||||
|
{ title: `svelte/transition` },
|
||||||
|
{ title: `svelte/animate` },
|
||||||
|
{ title: `svelte/motion` },
|
||||||
|
{ title: `svelte/easing` },
|
||||||
|
{ title: `svelte/compiler` }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Reference - Other',
|
||||||
|
pages: [{ title: 'Warnings' }, { title: 'Errors' }]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
sections
|
||||||
|
// sections: /** @type {Array<{title: string; pages: Array<{title: string }>}>} */ ([
|
||||||
|
// { title: 'Introduction', pages: [{ title: 'Overview' }, { title: 'Getting started' }] },
|
||||||
|
// {
|
||||||
|
// title: 'Template syntax',
|
||||||
|
// pages: [
|
||||||
|
// { title: 'Component fundamentals' },
|
||||||
|
// { title: 'Basic markup' },
|
||||||
|
// { title: 'Control flow' },
|
||||||
|
// { title: 'Snippets' },
|
||||||
|
// { title: 'Styles & Classes' },
|
||||||
|
// { title: 'Transitions & Animations' },
|
||||||
|
// { title: 'Bindings' },
|
||||||
|
// { title: 'Actions' },
|
||||||
|
// { title: 'Special elements' }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Runes',
|
||||||
|
// pages: [{ title: 'State' }, { title: 'Side effects' }]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Runtime',
|
||||||
|
// pages: [
|
||||||
|
// { title: 'Stores' },
|
||||||
|
// { title: 'Context' },
|
||||||
|
// { title: 'Lifecycle hooks' },
|
||||||
|
// { title: 'Imperative component API' }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Misc',
|
||||||
|
// pages: [
|
||||||
|
// { title: 'Debugging' },
|
||||||
|
// { title: 'Testing' },
|
||||||
|
// { title: 'TypeScript' },
|
||||||
|
// { title: 'Custom elements API' },
|
||||||
|
// { title: 'Legacy syntax' },
|
||||||
|
// { title: 'Reactivity indepth' },
|
||||||
|
// { title: 'Svelte 5 migration guide' }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// // {
|
||||||
|
// // title: 'Reference',
|
||||||
|
// // pages: [
|
||||||
|
// // { title: 'Runes' },
|
||||||
|
// // { title: 'svelte' },
|
||||||
|
// // { title: 'svelte/reactivity' },
|
||||||
|
// // { title: 'svelte/server' },
|
||||||
|
// // { title: `svelte/elements` },
|
||||||
|
// // { title: `svelte/store` },
|
||||||
|
// // { title: `svelte/actions` },
|
||||||
|
// // { title: `svelte/transition` },
|
||||||
|
// // { title: `svelte/animate` },
|
||||||
|
// // { title: `svelte/motion` },
|
||||||
|
// // { title: `svelte/easing` },
|
||||||
|
// // { title: `svelte/compiler` },
|
||||||
|
// // { title: 'Warnings' }
|
||||||
|
// // ]
|
||||||
|
// // },
|
||||||
|
// ])
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { DocsContents } from '@sveltejs/site-kit/docs';
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
|
||||||
|
$: pageData = $page.data.page;
|
||||||
|
|
||||||
|
$: title = pageData?.title;
|
||||||
|
$: category = pageData?.category;
|
||||||
|
console.log(data.sections);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="toc-container" style="order: 1">
|
||||||
|
<DocsContents contents={data.sections} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page content">
|
||||||
|
{#if category}
|
||||||
|
<p class="category">{category}</p>
|
||||||
|
{/if}
|
||||||
|
{#if title}
|
||||||
|
<h1>{title}</h1>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
--sidebar-menu-width: 28rem;
|
||||||
|
--sidebar-width: var(--sidebar-menu-width);
|
||||||
|
--ts-toggle-height: 4.2rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
|
||||||
|
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page :global(:where(h2, h3) code) {
|
||||||
|
all: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
font: 700 var(--sk-text-s) var(--sk-font);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
margin: 0 0 0.5em;
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 832px) {
|
||||||
|
.content {
|
||||||
|
padding-left: calc(var(--sidebar-width) + var(--sk-page-padding-side));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container {
|
||||||
|
background: var(--sk-back-3);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 832px) {
|
||||||
|
.toc-container {
|
||||||
|
display: block;
|
||||||
|
width: var(--sidebar-width);
|
||||||
|
height: calc(100vh - var(--sk-nav-height));
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: var(--sk-nav-height);
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: calc(var(--sidebar-width) - 1px);
|
||||||
|
border-right: 1px solid var(--sk-back-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding-left: calc(var(--sidebar-width) + var(--sk-page-padding-side));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container {
|
||||||
|
--sidebar-width: max(28rem, 23vw);
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
--on-this-page-display: block;
|
||||||
|
padding: var(--sk-page-padding-top) calc(var(--sidebar-width) + var(--sk-page-padding-side));
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: var(--sk-line-max-width);
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import { redirect } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
export function load() {
|
||||||
|
redirect(307, '/docs-new/overview');
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { error } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
export async function entries() {
|
||||||
|
const { get_docs_data } = await import('../../docs/render.js');
|
||||||
|
|
||||||
|
const data = await get_docs_data('./src/routes/docs-new/content', 'docs-new');
|
||||||
|
return data[0].pages.map((page) => ({ slug: page.slug }));
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function load({ params }) {
|
||||||
|
const { get_docs_data, get_parsed_docs } = await import('../../docs/render.js');
|
||||||
|
|
||||||
|
const data = await get_docs_data('./src/routes/docs-new/content', 'docs-new');
|
||||||
|
const processed_page = await get_parsed_docs(data, params.slug);
|
||||||
|
|
||||||
|
if (!processed_page) error(404);
|
||||||
|
|
||||||
|
return { page: processed_page };
|
||||||
|
}
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { copy_code_descendants } from '@sveltejs/site-kit/actions';
|
||||||
|
import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
|
||||||
|
$: pages = data.sections.flatMap((section) => section.pages);
|
||||||
|
$: index = pages.findIndex(({ path }) => path === $page.url.pathname);
|
||||||
|
$: prev = pages[index - 1];
|
||||||
|
$: next = pages[index + 1];
|
||||||
|
|
||||||
|
setupDocsHovers();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{data.page?.title} • Docs • Svelte 5 preview</title>
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="{data.page.title} • Docs • Svelte 5 preview" />
|
||||||
|
<meta name="twitter:description" content="{data.page.title} • Svelte 5 preview documentation" />
|
||||||
|
<meta name="Description" content="{data.page.title} • Svelte 5 preview documentation" />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="text" id="docs-content" use:copy_code_descendants>
|
||||||
|
<DocsOnThisPage details={data.page} />
|
||||||
|
|
||||||
|
{@html data.page.content}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<div>
|
||||||
|
<span class:faded={!prev}>previous</span>
|
||||||
|
|
||||||
|
{#if prev}
|
||||||
|
<a href={prev.path}>{prev.title}</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class:faded={!next}>next</span>
|
||||||
|
{#if next}
|
||||||
|
<a href={next.path}>{next.title}</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.controls {
|
||||||
|
max-width: calc(var(--sk-line-max-width) + 1rem);
|
||||||
|
border-top: 1px solid var(--sk-back-4);
|
||||||
|
padding: 1rem 0 0 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
margin: 6rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls > :first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls > :last-child {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls span {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls span.faded {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: Overview
|
||||||
|
---
|
||||||
|
|
||||||
|
- Short intro to what Svelte is and why it's the best ever
|
||||||
|
- A few code examples to have a very rough understanding of how Svelte code looks like
|
||||||
|
- Jump off points to tutorial, SvelteKit etc
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Getting started
|
||||||
|
---
|
||||||
|
|
||||||
|
- `npm create svelte@latest`, describe that it scaffolds SvelteKit project
|
||||||
|
- `npm create vite@latest`, describe that it scaffolds Svelte SPA powered by Vite
|
||||||
|
- mention `svelte-add`
|
||||||
|
- Jump off points to tutorial, SvelteKit etc
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Introduction"
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: Component fundamentals
|
||||||
|
---
|
||||||
|
|
||||||
|
- script (module) / template / style (rough overview)
|
||||||
|
- `$props` / `$state` (in the context of components)
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
title: Basic markup
|
||||||
|
---
|
||||||
|
|
||||||
|
- [basically what we have in the Svelte docs today](https://svelte.dev/docs/basic-markup)
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Control flow
|
||||||
|
---
|
||||||
|
|
||||||
|
- if
|
||||||
|
- each
|
||||||
|
- await (or move that into some kind of data loading section?)
|
||||||
|
- NOT: key (move into transition section, because that's the common use case)
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
title: Snippets
|
||||||
|
---
|
||||||
|
|
||||||
|
Better title needed?
|
||||||
|
|
||||||
|
- `#snippet`
|
||||||
|
- `@render`
|
||||||
|
- how they can be used to reuse markup
|
||||||
|
- how they can be used to pass UI content to components
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
title: Styles & Classes
|
||||||
|
---
|
||||||
|
|
||||||
|
- style scoping
|
||||||
|
- `:global`
|
||||||
|
- `style:`
|
||||||
|
- `class:`
|
||||||
|
- `--css` props
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
title: Transitions & Animations
|
||||||
|
---
|
||||||
|
|
||||||
|
- how to use (template syntax)
|
||||||
|
- when to use
|
||||||
|
- global vs local
|
||||||
|
- easing & motion
|
||||||
|
- mention imports
|
||||||
|
- key block
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: Actions
|
||||||
|
---
|
||||||
|
|
||||||
|
- template syntax
|
||||||
|
- how to write
|
||||||
|
- typings
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: Bindings
|
||||||
|
---
|
||||||
|
|
||||||
|
- how for dom elements
|
||||||
|
- list of all bindings
|
||||||
|
- how for components
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
title: Special elements
|
||||||
|
---
|
||||||
|
|
||||||
|
- [basically what we have in the docs today](https://svelte.dev/docs/special-elements)
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Template syntax"
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
title: State
|
||||||
|
---
|
||||||
|
|
||||||
|
- `$state` (.frozen)
|
||||||
|
- `$derived` (.by)
|
||||||
|
- using classes
|
||||||
|
- getters/setters (what to do to keep reactivity "alive")
|
||||||
|
- universal reactivity
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: Side effects
|
||||||
|
---
|
||||||
|
|
||||||
|
- `$effect` (.pre)
|
||||||
|
- when not to use it, better patterns for what to do instead
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Runes"
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: Stores
|
||||||
|
---
|
||||||
|
|
||||||
|
- how to use
|
||||||
|
- how to write
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: Context
|
||||||
|
---
|
||||||
|
|
||||||
|
- get/set/hasContext
|
||||||
|
- how to use, best practises (like encapsulating them)
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Lifecycle hooks
|
||||||
|
---
|
||||||
|
|
||||||
|
- onMount/onDestroy
|
||||||
|
- mention that `$effect` might be better for your use case
|
||||||
|
- beforeUpdate/afterUpdate with deprecation notice?
|
||||||
|
- or skip this entirely and only have it in the reference docs?
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
title: Imperative component API
|
||||||
|
---
|
||||||
|
|
||||||
|
better title needed?
|
||||||
|
|
||||||
|
- mount
|
||||||
|
- unmount
|
||||||
|
- render
|
||||||
|
- hydrate
|
||||||
|
- how they interact with each other
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Runtime"
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: Debugging
|
||||||
|
---
|
||||||
|
|
||||||
|
- `@debug`
|
||||||
|
- `$inspect`
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Testing
|
||||||
|
---
|
||||||
|
|
||||||
|
- component testing basics
|
||||||
|
- rune testing basics
|
||||||
|
- vitest setup
|
||||||
|
- e2e
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
title: TypeScript
|
||||||
|
---
|
||||||
|
|
||||||
|
- [basically what we have today](https://svelte.dev/docs/typescript)
|
||||||
|
- built-in support, but only for type-only features
|
||||||
|
- generics
|
||||||
|
- using `Component` and the other helper types
|
||||||
|
- using `svelte-check`
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
title: Custom elements API
|
||||||
|
---
|
||||||
|
|
||||||
|
- [basically what we have today](https://svelte.dev/docs/custom-elements-api)
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
title: Reactivity indepth
|
||||||
|
---
|
||||||
|
|
||||||
|
- how to think about Runes ("just JavaScript" with added reactivity, what this means for keeping reactivity alive across boundaries)
|
||||||
|
- signals
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
title: Svelte 5 migration guide
|
||||||
|
---
|
||||||
|
|
||||||
|
- the stuff from the preview docs and possibly more
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Misc"
|
||||||
|
}
|
||||||
Loading…
Reference in new issue