diff --git a/site/content/docs/02-template-syntax/06-special-elements.md b/site/content/docs/02-template-syntax/06-special-elements.md index 3920ac6f84..688495f1ad 100644 --- a/site/content/docs/02-template-syntax/06-special-elements.md +++ b/site/content/docs/02-template-syntax/06-special-elements.md @@ -41,7 +41,7 @@ Note: If you want to render regular `` element, You can use `` element, You can use ``. -### +### `` Named slots allow consumers to target specific areas. They can also have fallback content. @@ -105,7 +105,7 @@ Note that explicitly passing in an empty named slot will add that slot's name to ``` -### +### `` Slots can be rendered zero or more times and can pass values _back_ to the parent using props. The parent exposes the values to the slot template using the `let:` directive. diff --git a/sites/svelte.dev/src/routes/docs/+page.js b/sites/svelte.dev/src/routes/docs/+page.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/sites/svelte.dev/src/routes/docs/+page.svelte b/sites/svelte.dev/src/routes/docs/+page.svelte index a2b21408d5..2b2ed429e0 100644 --- a/sites/svelte.dev/src/routes/docs/+page.svelte +++ b/sites/svelte.dev/src/routes/docs/+page.svelte @@ -3,23 +3,216 @@ import { page } from '$app/stores'; import { onMount } from 'svelte'; - /** @type {import('./$types').PageData} */ - export let data; + const OLD_IDs = [ + 'before-we-begin', + 'getting-started', + 'component-format', + 'component-format-script', + 'component-format-script-1-export-creates-a-component-prop', + 'component-format-script-2-assignments-are-reactive', + 'component-format-script-3-$-marks-a-statement-as-reactive', + 'component-format-script-4-prefix-stores-with-$-to-access-their-values', + 'component-format-script-context-module', + 'component-format-style', + 'template-syntax', + 'template-syntax-tags', + 'template-syntax-attributes-and-props', + 'template-syntax-text-expressions', + 'template-syntax-comments', + 'template-syntax-if', + 'template-syntax-each', + 'template-syntax-await', + 'template-syntax-key', + 'template-syntax-html', + 'template-syntax-debug', + 'template-syntax-const', + 'template-syntax-element-directives', + 'template-syntax-element-directives-on-eventname', + 'template-syntax-element-directives-bind-property', + 'template-syntax-element-directives-bind-group', + 'template-syntax-element-directives-bind-this', + 'template-syntax-element-directives-class-name', + 'template-syntax-element-directives-style-property', + 'template-syntax-element-directives-use-action', + 'template-syntax-element-directives-transition-fn', + 'template-syntax-element-directives-in-fn-out-fn', + 'template-syntax-element-directives-animate-fn', + 'template-syntax-component-directives', + 'template-syntax-component-directives-on-eventname', + 'template-syntax-component-directives---style-props', + 'template-syntax-component-directives-bind-property', + 'template-syntax-component-directives-bind-this', + 'template-syntax-slot', + 'template-syntax-slot-slot-name-name', + 'template-syntax-slot-$$slots', + 'template-syntax-slot-slot-key-value', + 'template-syntax-svelte-self', + 'template-syntax-svelte-component', + 'template-syntax-svelte-element', + 'template-syntax-svelte-window', + 'template-syntax-svelte-document', + 'template-syntax-svelte-body', + 'template-syntax-svelte-head', + 'template-syntax-svelte-options', + 'template-syntax-svelte-fragment', + 'run-time', + 'run-time-svelte', + 'run-time-svelte-onmount', + 'run-time-svelte-beforeupdate', + 'run-time-svelte-afterupdate', + 'run-time-svelte-ondestroy', + 'run-time-svelte-tick', + 'run-time-svelte-setcontext', + 'run-time-svelte-getcontext', + 'run-time-svelte-hascontext', + 'run-time-svelte-getallcontexts', + 'run-time-svelte-createeventdispatcher', + 'run-time-svelte-store', + 'run-time-svelte-store-writable', + 'run-time-svelte-store-readable', + 'run-time-svelte-store-derived', + 'run-time-svelte-store-get', + 'run-time-svelte-store-readonly', + 'run-time-svelte-motion', + 'run-time-svelte-motion-tweened', + 'run-time-svelte-motion-spring', + 'run-time-svelte-transition', + 'run-time-svelte-transition-fade', + 'run-time-svelte-transition-blur', + 'run-time-svelte-transition-fly', + 'run-time-svelte-transition-slide', + 'run-time-svelte-transition-scale', + 'run-time-svelte-transition-draw', + 'run-time-svelte-transition-crossfade', + 'run-time-svelte-animate', + 'run-time-svelte-animate-flip', + 'run-time-svelte-easing', + 'run-time-svelte-register', + 'run-time-client-side-component-api', + 'run-time-client-side-component-api-creating-a-component', + 'run-time-client-side-component-api-$set', + 'run-time-client-side-component-api-$on', + 'run-time-client-side-component-api-$destroy', + 'run-time-client-side-component-api-component-props', + 'run-time-custom-element-api', + 'run-time-server-side-component-api', + 'compile-time', + 'compile-time-svelte-compile', + 'compile-time-svelte-parse', + 'compile-time-svelte-preprocess', + 'compile-time-svelte-walk', + 'compile-time-svelte-version', + 'accessibility-warnings', + 'accessibility-warnings-a11y-accesskey', + 'accessibility-warnings-a11y-aria-activedescendant-has-tabindex', + 'accessibility-warnings-a11y-aria-attributes', + 'accessibility-warnings-a11y-autofocus', + 'accessibility-warnings-a11y-click-events-have-key-events', + 'accessibility-warnings-a11y-distracting-elements', + 'accessibility-warnings-a11y-hidden', + 'accessibility-warnings-a11y-img-redundant-alt', + 'accessibility-warnings-a11y-incorrect-aria-attribute-type', + 'accessibility-warnings-a11y-invalid-attribute', + 'accessibility-warnings-a11y-interactive-supports-focus', + 'accessibility-warnings-a11y-label-has-associated-control', + 'accessibility-warnings-a11y-media-has-caption', + 'accessibility-warnings-a11y-misplaced-role', + 'accessibility-warnings-a11y-misplaced-scope', + 'accessibility-warnings-a11y-missing-attribute', + 'accessibility-warnings-a11y-missing-content', + 'accessibility-warnings-a11y-mouse-events-have-key-events', + 'accessibility-warnings-a11y-no-redundant-roles', + 'accessibility-warnings-a11y-no-interactive-element-to-noninteractive-role', + 'accessibility-warnings-a11y-no-noninteractive-element-to-interactive-role', + 'accessibility-warnings-a11y-no-noninteractive-tabindex', + 'accessibility-warnings-a11y-positive-tabindex', + 'accessibility-warnings-a11y-role-has-required-aria-props', + 'accessibility-warnings-a11y-role-supports-aria-props', + 'accessibility-warnings-a11y-structure', + 'accessibility-warnings-a11y-unknown-aria-attribute', + 'accessibility-warnings-a11y-unknown-role' + ]; + + /** @type {Map}*/ + const pages_regex_map = new Map([ + // Basic ones + [/before-we-begin$/i, 'introduction'], + [/getting-started$/i, 'introduction'], + [/component-format$/i, 'component-format'], + [/template-syntax$/i, 'template-syntax-basics'], + [/run-time$/i, 'svelte'], + [/compile-time$/i, 'svelte-compiler'], + [/accessibility-warnings$/i, 'accessibility-warnings'], + + // component-format- + [/(component-format)-(style)$/i, '$1#$2'], + [/(component-format)-(script)/i, '$1#$2'], + [/(component-format)-(script)(?:-?(.*))$/i, '$1#$3'], + + // template-syntax + [/template-syntax-(element-directives)-?(.*)/i, '$1#$2'], + [/template-syntax-(component-directives)-?(.*)/i, '$1#$2'], + [/template-syntax-slot/i, 'special-elements#slot'], + [/template-syntax-(slot)-?(.*)/i, 'special-elements#$2'], + [/template-syntax-(if|each|await|key)/i, 'logic-blocks#$1'], + [/template-syntax-(const|debug|html)/i, 'special-tags#$1'], + // !!!! This one should stay at the bottom of `template-syntax`, or it may end up hijacking logic blocks and special tags + [/template-syntax-(.+)/i, 'template-syntax-basics#$1'], + + // run-time + [/run-time-(svelte-store)-?(.*)/i, '$1#$2'], + [/run-time-(svelte-motion)-?(.*)/i, '$1#$2'], + [/run-time-(svelte-transition)-?(.*)/i, '$1#$2'], + [/run-time-(svelte-animate)-?(.*)/i, '$1#$2'], + [/run-time-(svelte-easing)/i, '$1'], + [/run-time-(client-side-component-api)-?(.*)/i, '$1#$2'], + [/run-time-(server-side-component-api)/i, '$1'], + [/run-time-(custom-element-api)/i, '$1'], + [/run-time-(svelte-register)/i, '$1'], + // Catch all, should be at the end or will include store, motion, transition and other modules starting with svelte + [/run-time-(svelte)(?:-(.+))?/i, '$1#$2'], + + // Compile time + [/compile-time-?(.*)/i, 'svelte-compiler#$1'], + + // Accessibility warnings + [/(accessibility-warnings)-?(.+)/i, '$1#$2'] + ]); + + function get_old_new_ids_map() { + /** @type {Map} */ + const new_ids = new Map(); + + old_id_block: for (const old_id of OLD_IDs) { + for (const [regex, replacement] of pages_regex_map) { + if (regex.test(old_id)) { + new_ids.set( + old_id, + old_id + .replace(regex, replacement) + .replace(/#$/, '') // Replace trailing # at the end + .replace('---', '-') // have to do the -- replacement because of --style-props in old being style-props in new + ); + continue old_id_block; + } + } + } + + return new_ids; + } function getURlToRedirectTo() { - const section = data.sections.find((val) => - $page.url.hash.replace('#', '').startsWith(val.path.split('/').at(-1)) - ); + const hash = $page.url.hash.replace(/^#/i, ''); + + if (!hash) return '/docs/introduction'; - if (!section) return '/docs/introduction'; + const old_new_map = get_old_new_ids_map(); - // Remove the section name from hash, then redirect to that - const hash = $page.url.hash.replace(`#${section.path.split('/').at(-1)}-`, ''); + // ID doesn't match anything, take the user to intro page only + if (!old_new_map.has(hash)) return '/docs/introduction'; - return `${section.path}#${hash}`; + return `/docs/${old_new_map.get(hash)}`; } - onMount(() => { - goto(getURlToRedirectTo(), { replaceState: true }); - }); + onMount(() => goto(getURlToRedirectTo(), { replaceState: true }));