├── .editorconfig ├── .github └── workflows │ └── test.yml ├── .gitignore ├── .prettierrc.js ├── README.md ├── action.yml ├── cli.js ├── dispatch ├── action.yml ├── dist │ ├── action.js │ └── main.js ├── main.ts └── rollup.config.js ├── dist ├── action.js └── cli.js ├── package.json ├── pnpm-lock.yaml ├── rollup.config.js ├── src ├── action.ts ├── cli.ts ├── format │ ├── code.test.ts │ ├── code.ts │ ├── fixtures │ │ ├── api-docs-html.js │ │ ├── api-docs-markdown.js │ │ └── generate_fixtures.ts │ ├── format.ts │ ├── format_api.test.ts │ ├── format_api.ts │ ├── frontmatter.test.ts │ ├── frontmatter.ts │ ├── headings.test.ts │ ├── headings.ts │ ├── index.ts │ ├── links.test.ts │ ├── links.ts │ ├── slug.test.ts │ ├── slug.ts │ ├── split_view.test.ts │ ├── split_view.ts │ └── types.ts ├── fs │ ├── fixtures │ │ ├── full_docs.ts │ │ ├── generate_fixtures.ts │ │ ├── output-repo-1.js │ │ ├── output-repo-2.js │ │ ├── output-repo-3.js │ │ ├── output-repo-4.js │ │ ├── recursive_output-2.js │ │ ├── recursive_output.js │ │ ├── repo-1 │ │ │ ├── documentation │ │ │ │ └── docs │ │ │ │ │ ├── 01-one.md │ │ │ │ │ ├── 02-two.md │ │ │ │ │ ├── 03-three.md │ │ │ │ │ ├── 04-four.md │ │ │ │ │ └── badfile.boojoo │ │ │ └── packages │ │ │ │ ├── no-package-json │ │ │ │ └── README.md │ │ │ │ ├── no-readme │ │ │ │ └── package.json │ │ │ │ ├── random-extra-files │ │ │ │ ├── README.md │ │ │ │ ├── bipbopboom.whatever │ │ │ │ ├── package.json │ │ │ │ └── src │ │ │ │ │ └── hello.bopbop │ │ │ │ └── standard-package │ │ │ │ ├── README.md │ │ │ │ └── package.json │ │ ├── repo-2 │ │ │ ├── README.md │ │ │ └── package.json │ │ ├── repo-3 │ │ │ ├── documentation │ │ │ │ ├── blog │ │ │ │ │ ├── 2016-11-26-frameworks-without-the-framework.md │ │ │ │ │ ├── 2017-08-07-the-easiest-way-to-get-started.md │ │ │ │ │ ├── 2017-09-06-the-zen-of-just-writing-css.md │ │ │ │ │ └── 2017-12-31-sapper-towards-the-ideal-web-app-framework.md │ │ │ │ ├── docs │ │ │ │ │ ├── 01-one.md │ │ │ │ │ ├── 02-two.md │ │ │ │ │ ├── 03-three.md │ │ │ │ │ ├── 04-four.md │ │ │ │ │ ├── badfile.boojoo │ │ │ │ │ └── xx-security.md │ │ │ │ ├── examples │ │ │ │ │ ├── 00-introduction │ │ │ │ │ │ ├── 00-hello-world │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 01-dynamic-attributes │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 02-styling │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 03-nested-components │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 04-html-tags │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ └── meta.json │ │ │ │ │ ├── 01-reactivity │ │ │ │ │ │ ├── 00-reactive-assignments │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 01-reactive-declarations │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 02-reactive-statements │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ └── meta.json │ │ │ │ │ ├── 02-props │ │ │ │ │ │ ├── 00-declaring-props │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 01-default-values │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 02-spread-props │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ ├── Info.svelte │ │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ └── meta.json │ │ │ │ │ └── 03-logic │ │ │ │ │ │ ├── 00-if-blocks │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 01-else-blocks │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 02-else-if-blocks │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 03-each-blocks │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 04-keyed-each-blocks │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ ├── Thing.svelte │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ ├── 05-await-blocks │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── meta.json │ │ │ │ │ │ └── meta.json │ │ │ │ ├── faq │ │ │ │ │ ├── 100-im-new-to-svelte.md │ │ │ │ │ ├── 200-are-there-any-video-courses.md │ │ │ │ │ ├── 250-are-there-any-books.md │ │ │ │ │ ├── 400-how-can-i-get-syntax-highlighting.md │ │ │ │ │ └── 450-how-do-i-document-my-components.md │ │ │ │ ├── migrating │ │ │ │ │ ├── 01-migrating.md │ │ │ │ │ ├── 02-pkg.md │ │ │ │ │ ├── 03-project-files.md │ │ │ │ │ ├── 04-pages.md │ │ │ │ │ ├── 05-endpoints.md │ │ │ │ │ └── 99-integrations.md │ │ │ │ └── tutorial │ │ │ │ │ ├── 01-introduction │ │ │ │ │ ├── 01-basics │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 02-adding-data │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 03-dynamic-attributes │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 04-styling │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 05-nested-components │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Nested.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Nested.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 06-html-tags │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 07-making-an-app │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ └── meta.json │ │ │ │ │ ├── 02-reactivity │ │ │ │ │ ├── 01-reactive-assignments │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 02-reactive-declarations │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 03-reactive-statements │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 04-updating-arrays-and-objects │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ └── meta.json │ │ │ │ │ ├── 03-props │ │ │ │ │ ├── 01-declaring-props │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Nested.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Nested.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 02-default-values │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Nested.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Nested.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 03-spread-props │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Info.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Info.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ └── meta.json │ │ │ │ │ ├── 04-logic │ │ │ │ │ ├── 01-if-blocks │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 02-else-blocks │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 03-else-if-blocks │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 04-each-blocks │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 05-keyed-each-blocks │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Thing.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ │ └── Thing.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ ├── 06-await-blocks │ │ │ │ │ │ ├── app-a │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ ├── app-b │ │ │ │ │ │ │ └── App.svelte │ │ │ │ │ │ └── text.md │ │ │ │ │ └── meta.json │ │ │ │ │ └── 05-events │ │ │ │ │ ├── 01-dom-events │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ │ ├── 02-inline-handlers │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ │ ├── 03-event-modifiers │ │ │ │ │ ├── app-a │ │ │ │ │ │ └── App.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ └── App.svelte │ │ │ │ │ └── text.md │ │ │ │ │ ├── 04-component-events │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Inner.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── Inner.svelte │ │ │ │ │ └── text.md │ │ │ │ │ ├── 05-event-forwarding │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ ├── Inner.svelte │ │ │ │ │ │ └── Outer.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ ├── Inner.svelte │ │ │ │ │ │ └── Outer.svelte │ │ │ │ │ └── text.md │ │ │ │ │ ├── 06-dom-event-forwarding │ │ │ │ │ ├── app-a │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── CustomButton.svelte │ │ │ │ │ ├── app-b │ │ │ │ │ │ ├── App.svelte │ │ │ │ │ │ └── CustomButton.svelte │ │ │ │ │ └── text.md │ │ │ │ │ └── meta.json │ │ │ └── packages │ │ │ │ ├── no-package-json │ │ │ │ └── README.md │ │ │ │ ├── no-package-or-readme │ │ │ │ └── x.txt │ │ │ │ ├── no-readme │ │ │ │ └── package.json │ │ │ │ ├── random-extra-files │ │ │ │ ├── README.md │ │ │ │ ├── bipbopboom.whatever │ │ │ │ ├── package.json │ │ │ │ └── src │ │ │ │ │ └── hello.bopbop │ │ │ │ ├── standard-package │ │ │ │ ├── README.md │ │ │ │ └── package.json │ │ │ │ └── with-scope │ │ │ │ ├── README.md │ │ │ │ └── package.json │ │ └── repo-4 │ │ │ ├── README.md │ │ │ └── sites │ │ │ └── content │ │ │ ├── blog │ │ │ ├── 2016-11-26-frameworks-without-the-framework.md │ │ │ ├── 2017-08-07-the-easiest-way-to-get-started.md │ │ │ ├── 2017-09-06-the-zen-of-just-writing-css.md │ │ │ └── 2017-12-31-sapper-towards-the-ideal-web-app-framework.md │ │ │ ├── docs │ │ │ ├── 01-one.md │ │ │ ├── 02-two.md │ │ │ ├── 03-three.md │ │ │ ├── 04-four.md │ │ │ └── badfile.boojoo │ │ │ ├── examples │ │ │ ├── 00-introduction │ │ │ │ ├── 00-hello-world │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── meta.json │ │ │ │ ├── 01-dynamic-attributes │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── meta.json │ │ │ │ ├── 02-styling │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── meta.json │ │ │ │ ├── 03-nested-components │ │ │ │ │ ├── App.svelte │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ └── meta.json │ │ │ │ ├── 04-html-tags │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── meta.json │ │ │ │ └── meta.json │ │ │ ├── 01-reactivity │ │ │ │ ├── 00-reactive-assignments │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── meta.json │ │ │ │ ├── 01-reactive-declarations │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── meta.json │ │ │ │ ├── 02-reactive-statements │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── meta.json │ │ │ │ └── meta.json │ │ │ ├── 02-props │ │ │ │ ├── 00-declaring-props │ │ │ │ │ ├── App.svelte │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ └── meta.json │ │ │ │ ├── 01-default-values │ │ │ │ │ ├── App.svelte │ │ │ │ │ ├── Nested.svelte │ │ │ │ │ └── meta.json │ │ │ │ ├── 02-spread-props │ │ │ │ │ ├── App.svelte │ │ │ │ │ ├── Info.svelte │ │ │ │ │ └── meta.json │ │ │ │ └── meta.json │ │ │ └── 03-logic │ │ │ │ ├── 00-if-blocks │ │ │ │ ├── App.svelte │ │ │ │ └── meta.json │ │ │ │ ├── 01-else-blocks │ │ │ │ ├── App.svelte │ │ │ │ └── meta.json │ │ │ │ ├── 02-else-if-blocks │ │ │ │ ├── App.svelte │ │ │ │ └── meta.json │ │ │ │ ├── 03-each-blocks │ │ │ │ ├── App.svelte │ │ │ │ └── meta.json │ │ │ │ ├── 04-keyed-each-blocks │ │ │ │ ├── App.svelte │ │ │ │ ├── Thing.svelte │ │ │ │ └── meta.json │ │ │ │ ├── 05-await-blocks │ │ │ │ ├── App.svelte │ │ │ │ └── meta.json │ │ │ │ └── meta.json │ │ │ ├── faq │ │ │ ├── 100-im-new-to-svelte.md │ │ │ ├── 200-are-there-any-video-courses.md │ │ │ ├── 250-are-there-any-books.md │ │ │ ├── 400-how-can-i-get-syntax-highlighting.md │ │ │ └── 450-how-do-i-document-my-components.md │ │ │ ├── migrating │ │ │ ├── 01-migrating.md │ │ │ ├── 02-pkg.md │ │ │ ├── 03-project-files.md │ │ │ ├── 04-pages.md │ │ │ ├── 05-endpoints.md │ │ │ └── 99-integrations.md │ │ │ └── tutorial │ │ │ ├── 01-introduction │ │ │ ├── 01-basics │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 02-adding-data │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 03-dynamic-attributes │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 04-styling │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 05-nested-components │ │ │ │ ├── app-a │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Nested.svelte │ │ │ │ ├── app-b │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Nested.svelte │ │ │ │ └── text.md │ │ │ ├── 06-html-tags │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 07-making-an-app │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ └── meta.json │ │ │ ├── 02-reactivity │ │ │ ├── 01-reactive-assignments │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 02-reactive-declarations │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 03-reactive-statements │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 04-updating-arrays-and-objects │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ └── meta.json │ │ │ ├── 03-props │ │ │ ├── 01-declaring-props │ │ │ │ ├── app-a │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Nested.svelte │ │ │ │ ├── app-b │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Nested.svelte │ │ │ │ └── text.md │ │ │ ├── 02-default-values │ │ │ │ ├── app-a │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Nested.svelte │ │ │ │ ├── app-b │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Nested.svelte │ │ │ │ └── text.md │ │ │ ├── 03-spread-props │ │ │ │ ├── app-a │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Info.svelte │ │ │ │ ├── app-b │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Info.svelte │ │ │ │ └── text.md │ │ │ └── meta.json │ │ │ ├── 04-logic │ │ │ ├── 01-if-blocks │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 02-else-blocks │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 03-else-if-blocks │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 04-each-blocks │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ ├── 05-keyed-each-blocks │ │ │ │ ├── app-a │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Thing.svelte │ │ │ │ ├── app-b │ │ │ │ │ ├── App.svelte │ │ │ │ │ └── Thing.svelte │ │ │ │ └── text.md │ │ │ ├── 06-await-blocks │ │ │ │ ├── app-a │ │ │ │ │ └── App.svelte │ │ │ │ ├── app-b │ │ │ │ │ └── App.svelte │ │ │ │ └── text.md │ │ │ └── meta.json │ │ │ └── 05-events │ │ │ ├── 01-dom-events │ │ │ ├── app-a │ │ │ │ └── App.svelte │ │ │ ├── app-b │ │ │ │ └── App.svelte │ │ │ └── text.md │ │ │ ├── 02-inline-handlers │ │ │ ├── app-a │ │ │ │ └── App.svelte │ │ │ ├── app-b │ │ │ │ └── App.svelte │ │ │ └── text.md │ │ │ ├── 03-event-modifiers │ │ │ ├── app-a │ │ │ │ └── App.svelte │ │ │ ├── app-b │ │ │ │ └── App.svelte │ │ │ └── text.md │ │ │ ├── 04-component-events │ │ │ ├── app-a │ │ │ │ ├── App.svelte │ │ │ │ └── Inner.svelte │ │ │ ├── app-b │ │ │ │ ├── App.svelte │ │ │ │ └── Inner.svelte │ │ │ └── text.md │ │ │ ├── 05-event-forwarding │ │ │ ├── app-a │ │ │ │ ├── App.svelte │ │ │ │ ├── Inner.svelte │ │ │ │ └── Outer.svelte │ │ │ ├── app-b │ │ │ │ ├── App.svelte │ │ │ │ ├── Inner.svelte │ │ │ │ └── Outer.svelte │ │ │ └── text.md │ │ │ ├── 06-dom-event-forwarding │ │ │ ├── app-a │ │ │ │ ├── App.svelte │ │ │ │ └── CustomButton.svelte │ │ │ ├── app-b │ │ │ │ ├── App.svelte │ │ │ │ └── CustomButton.svelte │ │ │ └── text.md │ │ │ └── meta.json │ ├── get_content.test.ts │ ├── get_content.ts │ └── index.ts ├── transform │ ├── cloudflare.test.ts │ ├── cloudflare.ts │ ├── docs.test.ts │ ├── docs.ts │ ├── fixtures │ │ ├── blog.ts │ │ ├── cloudflare.ts │ │ ├── docs.ts │ │ ├── everything.ts │ │ ├── examples.ts │ │ ├── faq.ts │ │ ├── migrating.ts │ │ └── tutorials.ts │ └── index.ts └── types.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = tabs 8 | indent_size = 2 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | 12 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: test 2 | 3 | on: 4 | push: 5 | branches: main 6 | pull_request: 7 | branches: main 8 | 9 | jobs: 10 | test: 11 | name: test 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v2 15 | - uses: actions/setup-node@v1 16 | with: 17 | node-version: 12 18 | - uses: actions/cache@v2 19 | id: pnpm-store 20 | with: 21 | path: ~/.pnpm-store/v3 22 | key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }} 23 | restore-keys: | 24 | ${{ runner.os }}-pnpm- 25 | - uses: pnpm/action-setup@v1.2.1 26 | with: 27 | version: 5 28 | - run: pnpm i --frozen-lockfile 29 | - run: pnpm ts 30 | - run: pnpm test 31 | - run: pnpm build 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | useTabs: true, 3 | }; 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # action-deploy-docs 2 | 3 | An action to help deploy the svelte docs. This action does the following: 4 | 5 | - Sparsely clones a single branch without much history. As light as I could make it. 6 | - Reads the docs into memory. 7 | - Transforms them with the svelte docs markdown formatter. 8 | 9 | TODO: 10 | 11 | - Transform the transformed docs into the requistive format for CF's batch key write rest API 12 | - Push them up 13 | -------------------------------------------------------------------------------- /action.yml: -------------------------------------------------------------------------------- 1 | name: "Generate Docs" 2 | 3 | description: "Generate docs from markdown" 4 | 5 | inputs: 6 | repo: 7 | description: "the target repo of the docs" 8 | required: true 9 | branch: 10 | description: "the target branch of the docs" 11 | required: true 12 | cf_token: 13 | description: "the cloudflare token to use for deploying the docs" 14 | required: true 15 | docs_path: 16 | description: "the path to your root documentation (without a leading slash)" 17 | required: false 18 | default: "documentation" 19 | pkg_path: 20 | description: "the path to your packages in a monorepo (without a leading slash)" 21 | required: false 22 | default: "packages" 23 | 24 | runs: 25 | using: "node16" 26 | main: "dist/action.js" 27 | -------------------------------------------------------------------------------- /cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require("./dist/cli.js")(); 4 | -------------------------------------------------------------------------------- /dispatch/action.yml: -------------------------------------------------------------------------------- 1 | name: "Generate Docs" 2 | 3 | description: "Generate docs from markdown" 4 | 5 | inputs: 6 | repo: 7 | description: "the target repo of the docs" 8 | required: true 9 | branch: 10 | description: "the target branch of the docs" 11 | required: true 12 | docs_path: 13 | description: "the path to your root documentation (without a leading slash)" 14 | required: false 15 | default: "documentation" 16 | pkg_path: 17 | description: "the path to your packages in a monorepo (without a leading slash)" 18 | required: false 19 | default: "packages" 20 | token: 21 | description: "github PAT with permissions to trigger this workflow" 22 | required: true 23 | 24 | runs: 25 | using: "node12" 26 | main: "dist/action.js" 27 | -------------------------------------------------------------------------------- /dispatch/main.ts: -------------------------------------------------------------------------------- 1 | import core from "@actions/core"; 2 | import github from "@actions/github"; 3 | 4 | async function run(): Promise { 5 | try { 6 | const token = core.getInput("token"); 7 | const repo = core.getInput("repo"); 8 | const branch = core.getInput("branch"); 9 | const docs_path = core.getInput("docs_path"); 10 | const pkg_path = core.getInput("pkg_path"); 11 | 12 | console.log(token.length); 13 | 14 | const octokit = github.getOctokit(token); 15 | 16 | const dispatchResp = await octokit.rest.actions.createWorkflowDispatch({ 17 | owner: "sveltejs", 18 | repo: "sites", 19 | workflow_id: "docs-deploy-trigger.yml", 20 | ref: "master", 21 | inputs: { 22 | repo, 23 | branch, 24 | docs_path, 25 | pkg_path, 26 | }, 27 | }); 28 | core.info(`API response status: ${dispatchResp.status} 🚀`); 29 | } catch (error) { 30 | core.setFailed(error.message); 31 | } 32 | } 33 | 34 | run(); 35 | -------------------------------------------------------------------------------- /dispatch/rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from "@rollup/plugin-node-resolve"; 2 | import cjs from "@rollup/plugin-commonjs"; 3 | import sucrase from "@rollup/plugin-sucrase"; 4 | import json from "@rollup/plugin-json"; 5 | import { terser } from "rollup-plugin-terser"; 6 | 7 | export default [ 8 | { 9 | plugins: [ 10 | cjs(), 11 | resolve(), 12 | json(), 13 | sucrase({ transforms: ["typescript"] }), 14 | ], 15 | input: "src/action.ts", 16 | output: [ 17 | { 18 | file: "dist/action.js", 19 | format: "cjs", 20 | sourcemap: false, 21 | }, 22 | ], 23 | }, 24 | { 25 | plugins: [ 26 | cjs(), 27 | resolve(), 28 | json(), 29 | sucrase({ transforms: ["typescript"] }), 30 | ], 31 | input: "src/cli.ts", 32 | output: [ 33 | { 34 | file: "dist/cli.js", 35 | format: "cjs", 36 | sourcemap: false, 37 | interop: false, 38 | }, 39 | ], 40 | }, 41 | ]; 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "action-deploy-docs", 3 | "version": "1.0.0", 4 | "description": "github action for the svelte org to deploy documentation to the svelte api", 5 | "main": "dist/cli.js", 6 | "bin": "cli.js", 7 | "scripts": { 8 | "test": "uvu -r ts-node/register src test.ts$", 9 | "build": "rollup -c", 10 | "ts": "tsc --noEmit", 11 | "generate:format": "node -r ts-node/register src/format/fixtures/generate_fixtures.ts", 12 | "generate:fs": "node -r ts-node/register src/fs/fixtures/generate_fixtures.ts" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/sveltejs/action-deploy-docs.git" 17 | }, 18 | "keywords": [], 19 | "author": "", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/sveltejs/action-deploy-docs/issues" 23 | }, 24 | "files": [ 25 | "cli.js", 26 | "dist/" 27 | ], 28 | "homepage": "https://github.com/sveltejs/action-deploy-docs#readme", 29 | "devDependencies": { 30 | "@actions/core": "^1.2.6", 31 | "@actions/exec": "^1.0.4", 32 | "@rollup/plugin-commonjs": "^17.1.0", 33 | "@rollup/plugin-json": "^4.1.0", 34 | "@rollup/plugin-node-resolve": "^11.2.0", 35 | "@rollup/plugin-sucrase": "^3.1.0", 36 | "@sindresorhus/slugify": "^1.1.0", 37 | "@types/js-yaml": "^4.0.0", 38 | "@types/marked": "^2.0.0", 39 | "@types/prismjs": "^1.16.4", 40 | "cheap-watch": "^1.0.3", 41 | "js-yaml": "^4.0.0", 42 | "marked": "^2.0.1", 43 | "mdast-util-to-hast": "^10.2.0", 44 | "mdast-util-to-string": "^2.0.0", 45 | "polka": "^1.0.0-next.14", 46 | "prettier": "^2.2.1", 47 | "prism-svelte": "^0.4.7", 48 | "prismjs": "^1.23.0", 49 | "rehype-stringify": "^8.0.0", 50 | "remark-frontmatter": "^3.0.0", 51 | "remark-parse": "^9.0.0", 52 | "remark-rehype": "^8.0.0", 53 | "rollup": "^2.41.2", 54 | "ts-node": "^9.1.1", 55 | "typescript": "^4.2.3", 56 | "unified": "^9.2.1", 57 | "unist-builder": "^2.0.3", 58 | "unist-util-visit": "^2.0.3", 59 | "uvu": "^0.5.1", 60 | "vfile": "4", 61 | "vfile-message": "^2.0.4" 62 | }, 63 | "dependencies": { 64 | "@actions/github": "^4.0.0", 65 | "@polka/send": "^1.0.0-next.12", 66 | "httpie": "^1.1.2", 67 | "remark-gfm": "1" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from "@rollup/plugin-node-resolve"; 2 | import cjs from "@rollup/plugin-commonjs"; 3 | import sucrase from "@rollup/plugin-sucrase"; 4 | import json from "@rollup/plugin-json"; 5 | 6 | export default [ 7 | { 8 | plugins: [ 9 | cjs(), 10 | resolve(), 11 | json(), 12 | sucrase({ transforms: ["typescript"] }), 13 | ], 14 | input: "src/action.ts", 15 | output: [ 16 | { 17 | file: "dist/action.js", 18 | format: "cjs", 19 | sourcemap: false, 20 | }, 21 | ], 22 | }, 23 | { 24 | plugins: [ 25 | cjs(), 26 | resolve(), 27 | json(), 28 | sucrase({ transforms: ["typescript"] }), 29 | ], 30 | input: "src/cli.ts", 31 | output: [ 32 | { 33 | file: "dist/cli.js", 34 | format: "cjs", 35 | sourcemap: false, 36 | interop: false, 37 | }, 38 | ], 39 | }, 40 | { 41 | plugins: [ 42 | cjs(), 43 | resolve(), 44 | json(), 45 | sucrase({ transforms: ["typescript"] }), 46 | ], 47 | input: "dispatch/main.ts", 48 | output: [ 49 | { 50 | file: "dispatch/dist/action.js", 51 | format: "cjs", 52 | sourcemap: false, 53 | interop: false, 54 | }, 55 | ], 56 | }, 57 | ]; 58 | -------------------------------------------------------------------------------- /src/format/code.ts: -------------------------------------------------------------------------------- 1 | import type { Transformer } from "unified"; 2 | import type { Code, HTML } from "mdast"; 3 | 4 | import visit from "unist-util-visit"; 5 | import PrismJS from "prismjs"; 6 | import "prismjs/components/prism-bash.js"; 7 | import "prismjs/components/prism-diff.js"; 8 | import "prismjs/components/prism-typescript.js"; 9 | 10 | import "prism-svelte"; 11 | 12 | export type language = keyof typeof LanguageMap; 13 | 14 | enum LanguageMap { 15 | bash = "bash", 16 | env = "bash", 17 | html = "markup", 18 | sv = "svelte", 19 | js = "javascript", 20 | css = "css", 21 | diff = "diff", 22 | ts = "typescript", 23 | "" = "", 24 | } 25 | 26 | /** 27 | * Custom highlighting for code blocks using PrismJS. 28 | */ 29 | export function highlight(source: string, lang?: language): string { 30 | const plang = lang === "" ? "" : LanguageMap[lang]; 31 | const highlighted = plang 32 | ? PrismJS.highlight(source, PrismJS.languages[plang], lang) 33 | : source.replace( 34 | /[&<>]/g, 35 | (c) => ({ "&": "&", "<": "<", ">": ">" }[c]) 36 | ); 37 | 38 | return `
${highlighted}
`; 39 | } 40 | 41 | /** 42 | * Custom highlighting for code blocks using PrismJS. 43 | */ 44 | export function highight_code_block(): Transformer { 45 | return function transformer(tree) { 46 | visit(tree, "code", (node: Code) => { 47 | node.value = highlight(node.value, node.lang as language); 48 | //@ts-ignore 49 | node.data = {}; 50 | // data.code_block is set so we can differentiate between code blocks and other raw nodes 51 | // this is utilised in a rehype plugin later in the pipeline (split-view) 52 | // retaining this metadata requires a custom handler for raw nodes when converting MDAST -> HAST 53 | node.data.code_block = true; 54 | ((node as unknown) as HTML).type = "html"; 55 | }); 56 | }; 57 | } 58 | -------------------------------------------------------------------------------- /src/format/fixtures/generate_fixtures.ts: -------------------------------------------------------------------------------- 1 | import { promises as fs } from "fs"; 2 | import * as path from "path"; 3 | import { format } from "../format_api"; 4 | import markdown from "./api-docs-markdown"; 5 | 6 | const output_path = path.join( 7 | process.cwd(), 8 | "src", 9 | "format", 10 | "fixtures", 11 | "api-docs-html.js" 12 | ); 13 | // const input = path.join(dir, "api-docs-markdown.js"); 14 | 15 | async function run() { 16 | const { contents } = await format({ 17 | file: "./api-docs.md", 18 | markdown, 19 | project: "svelte", 20 | docs_type: "docs", 21 | dir: "docs", 22 | level: 3, 23 | }); 24 | await fs.writeFile(output_path, `export default ${JSON.stringify(contents)}`); 25 | } 26 | 27 | run(); 28 | -------------------------------------------------------------------------------- /src/format/format.ts: -------------------------------------------------------------------------------- 1 | import unified from "unified"; 2 | import markdown from "remark-parse"; 3 | import remark2rehype from "remark-rehype"; 4 | import html from "rehype-stringify"; 5 | 6 | var processor = unified().use(markdown).use(remark2rehype).use(html); 7 | 8 | // export const format_docs = { 9 | // docs: format_api, 10 | // faq: format_faq, 11 | // migrating: format_api, 12 | // blog: format_blog, 13 | // tutorials: format_tutorials, 14 | // examples: format_examples, 15 | // }; 16 | 17 | export interface Docs { 18 | docs?: unknown; 19 | faq?: unknown; 20 | migrating?: unknown; 21 | blog?: unknown; 22 | tutorials?: unknown; 23 | examples?: unknown; 24 | } 25 | -------------------------------------------------------------------------------- /src/format/format_api.test.ts: -------------------------------------------------------------------------------- 1 | import { suite } from "uvu"; 2 | import * as assert from "uvu/assert"; 3 | 4 | import { format } from "./format_api"; 5 | 6 | import api from "./fixtures/api-docs-markdown.js"; 7 | import api_output from "./fixtures/api-docs-html.js"; 8 | 9 | const _format = suite("transform docs"); 10 | 11 | // format.skip("formats the api docs", () => { 12 | // const output = format_api("./api-docs.md", api, "docs"); 13 | 14 | // assert.equal(output, api_output); 15 | // }); 16 | 17 | // this is because we concat the api docs 18 | // separate md files become a single html page 19 | // duplicate slugs are bad 20 | 21 | // format.skip("duplicate slugs should throw an error", () => { 22 | // assert.throws(() => { 23 | // format_api("./api-docs.md", api, "docs"); 24 | // format_api("./api-docs.md", api, "docs"); 25 | // }, /Duplicate slug Template_syntax/); 26 | // }); 27 | 28 | _format("formats", async () => { 29 | const md = `### hello 30 | 31 | This is some paragraph text 32 | 33 | ___ 34 | 35 | this is more text 36 | 37 | and this 38 | 39 | \`\`\`js 40 | console.log('boo') 41 | \`\`\` 42 | 43 | `; 44 | const x = await format({ 45 | file: "boo.md", 46 | markdown: md, 47 | project: "svelte", 48 | docs_type: "docs", 49 | dir: "docs/boo", 50 | level: 3, 51 | }); 52 | 53 | // console.log(x); 54 | }); 55 | 56 | _format("formats", async () => { 57 | const md = `### Table 58 | 59 | | Branch | Commit | 60 | | ------- | ---------------- | 61 | | main | 0123456789abcdef | 62 | | staging | fedcba9876543210 |`; 63 | 64 | const x = await format({ 65 | file: "boo.md", 66 | markdown: md, 67 | project: "svelte", 68 | docs_type: "docs", 69 | dir: "docs/boo", 70 | level: 3, 71 | }); 72 | 73 | assert.equal(x.contents, `

Table

74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
BranchCommit
main0123456789abcdef
stagingfedcba9876543210
`); 92 | }); 93 | 94 | _format.run(); 95 | -------------------------------------------------------------------------------- /src/format/frontmatter.test.ts: -------------------------------------------------------------------------------- 1 | import { suite } from "uvu"; 2 | import * as assert from "uvu/assert"; 3 | 4 | import unified from "unified"; 5 | import markdown from "remark-parse"; 6 | import extract_frontmatter from "remark-frontmatter"; 7 | import rehype from "remark-rehype"; 8 | import stringify from "rehype-stringify"; 9 | 10 | import { parse_frontmatter } from "./frontmatter"; 11 | 12 | const processor = unified() 13 | .use(markdown) 14 | .use(extract_frontmatter) 15 | .use(parse_frontmatter) 16 | .use(rehype) 17 | .use(stringify); 18 | 19 | const frontmatter = suite("extract-frontmatter"); 20 | 21 | frontmatter("extracts and parses yaml metadata from frontmatter", async () => { 22 | const src = `--- 23 | name: one 24 | secondname: two 25 | --- 26 | 27 | # hello 28 | 29 | --- 30 | 31 | `; 32 | 33 | const output = await processor.process(src); 34 | 35 | assert.equal((output.data as any).frontmatter, { 36 | name: "one", 37 | secondname: "two", 38 | }); 39 | assert.equal(output.contents, "

hello

\n
"); 40 | }); 41 | 42 | frontmatter("extracts and parses yaml metadata from frontmatter", async () => { 43 | const src = `--- 44 | names: 45 | - 1 46 | - 2 47 | - 3 48 | secondname: 49 | hello: friend 50 | goodbye: friend 51 | --- 52 | 53 | # hello 54 | 55 | --- 56 | 57 | `; 58 | 59 | const output = await processor.process(src); 60 | 61 | assert.equal((output.data as any).frontmatter, { 62 | names: [1, 2, 3], 63 | secondname: { hello: "friend", goodbye: "friend" }, 64 | }); 65 | assert.equal(output.contents, "

hello

\n
"); 66 | }); 67 | 68 | frontmatter.run(); 69 | -------------------------------------------------------------------------------- /src/format/frontmatter.ts: -------------------------------------------------------------------------------- 1 | import type { Transformer } from "unified"; 2 | import type { YamlNode } from "remark-frontmatter"; 3 | import type { custom_vfile } from "./types"; 4 | 5 | import yaml from "js-yaml"; 6 | import Message from "vfile-message"; 7 | import visit from "unist-util-visit"; 8 | import { make_session_slug_processor } from "./slug"; 9 | 10 | const make_slug = make_session_slug_processor({ 11 | preserve_unicode: false, 12 | separator: "-", 13 | }); 14 | 15 | /** 16 | * Parse the frontmatter contained with markdown files. This frontmatter is available on the 17 | * `data.frontmatter` property of the returned `vFile`. 18 | */ 19 | export function parse_frontmatter(): Transformer { 20 | return function transformer(tree, vFile: custom_vfile) { 21 | visit(tree, "yaml", (node: YamlNode) => { 22 | try { 23 | const data = yaml.load(node.value) as Record; 24 | if (data) { 25 | // @ts-ignore 26 | vFile.data.frontmatter = data; 27 | 28 | if (!vFile.data.section_slug) { 29 | vFile.data.section_slug = make_slug( 30 | //@ts-ignore 31 | 32 | vFile.data.frontmatter.title, 33 | vFile.data.seen_slugs 34 | ); 35 | } 36 | 37 | if (!vFile.data.section_title) { 38 | //@ts-ignore 39 | vFile.data.section_title = 40 | vFile.data.docs_type === "faq" 41 | ? //@ts-ignore 42 | vFile.data.frontmatter.question 43 | : //@ts-ignore 44 | vFile.data.frontmatter.title; 45 | } 46 | } 47 | } catch (e) { 48 | vFile.messages.push(new Message("YAML failed to parse", e)); 49 | } 50 | }); 51 | }; 52 | } 53 | -------------------------------------------------------------------------------- /src/format/index.ts: -------------------------------------------------------------------------------- 1 | export { format } from "./format_api"; 2 | -------------------------------------------------------------------------------- /src/format/links.test.ts: -------------------------------------------------------------------------------- 1 | import { suite } from "uvu"; 2 | import * as assert from "uvu/assert"; 3 | 4 | import { Root, Paragraph } from "mdast"; 5 | import unified from "unified"; 6 | import markdown from "remark-parse"; 7 | import rehype from "remark-rehype"; 8 | import stringify from "rehype-stringify"; 9 | 10 | import { set_link_attributes } from "./links"; 11 | 12 | const { process } = unified() 13 | .use(markdown) 14 | .use(rehype) 15 | .use(set_link_attributes) 16 | .use(stringify); 17 | 18 | const _links = suite("links"); 19 | 20 | _links("renders link", async () => { 21 | const src = `[a link](/local/path/to/file)`; 22 | const output = await process(src); 23 | 24 | assert.is( 25 | output.contents, 26 | '

a link

' 27 | ); 28 | }); 29 | 30 | _links("renders link with title attribute", async () => { 31 | const src = `[a link](/local/path/to/file "about my link")`; 32 | const output = await process(src); 33 | 34 | assert.is( 35 | output.contents, 36 | '

a link

' 37 | ); 38 | }); 39 | 40 | _links("renders external links with target _blank: no title", async () => { 41 | const src = `[a link](https://google.com)`; 42 | const output = await process(src); 43 | 44 | assert.is( 45 | output.contents, 46 | '

a link

' 47 | ); 48 | }); 49 | 50 | _links("renders external links with target _blank: title", async () => { 51 | const src = `[a link](https://google.com "a search engine")`; 52 | const output = await process(src); 53 | 54 | assert.is( 55 | output.contents, 56 | '

a link

' 57 | ); 58 | }); 59 | 60 | _links("renders links containing multiple child nodes", async () => { 61 | const src = 62 | "[CommonJS packages in `noExternal`](https://github.com/vitejs/vite/issues/2579)"; 63 | const output = await process(src); 64 | 65 | assert.is( 66 | output.contents, 67 | '

CommonJS packages in noExternal

' 68 | ); 69 | }); 70 | 71 | _links.run(); 72 | -------------------------------------------------------------------------------- /src/format/links.ts: -------------------------------------------------------------------------------- 1 | import type { Transformer } from "unified"; 2 | import type { Node } from "unist"; 3 | import type { Link, HTML, Parent } from "mdast"; 4 | 5 | import visit from "unist-util-visit"; 6 | 7 | interface Element extends Node { 8 | properties: { 9 | href?: string; 10 | target?: string; 11 | rel?: string; 12 | }; 13 | } 14 | /** 15 | * All links must have `rel="noopener noreferrer"` and external attributes 16 | * must open in a new window. 17 | */ 18 | export function set_link_attributes(): Transformer { 19 | return function transformer(tree) { 20 | visit(tree, "element", (node) => { 21 | if (node.tagName === "a") { 22 | if (node.properties.href && node.properties.href.startsWith("http")) { 23 | node.properties.target = "_blank"; 24 | } 25 | 26 | node.properties.rel = "noopener noreferrer"; 27 | } 28 | }); 29 | }; 30 | } 31 | -------------------------------------------------------------------------------- /src/format/slug.ts: -------------------------------------------------------------------------------- 1 | import slugify from "@sindresorhus/slugify"; 2 | 3 | export const SLUG_PRESERVE_UNICODE = false; 4 | export const SLUG_SEPARATOR = "-"; 5 | 6 | interface ProcessorOptions { 7 | separator: string; 8 | } 9 | 10 | interface Chunk { 11 | type: "pass" | "process"; 12 | string: string; 13 | } 14 | 15 | interface ProcessedParts { 16 | chunks: Chunk[]; 17 | current: Chunk; 18 | } 19 | 20 | export function url_safe_processor( 21 | url: string, 22 | opts?: ProcessorOptions 23 | ): string { 24 | const { separator = SLUG_SEPARATOR } = opts || {}; 25 | 26 | return slugify(url, { 27 | customReplacements: [ 28 | // runs before any other transformations 29 | ["$", "DOLLAR"], // `$destroy` & co 30 | ["-", "DASH"], // conflicts with `separator` 31 | ], 32 | separator, 33 | decamelize: false, 34 | lowercase: true, 35 | }) 36 | .replace(/DOLLAR/gi, "$") 37 | .replace(/DASH/gi, "-"); 38 | } 39 | 40 | const alpha_num_regex = /[a-zA-Z0-9]/; 41 | const unicode_regex = /\p{Letter}/u; 42 | 43 | const is_non_alpha_num_unicode = (string: string) => 44 | !alpha_num_regex.test(string) && unicode_regex.test(string); 45 | 46 | export function unicode_safe_processor( 47 | url: string, 48 | opts?: ProcessorOptions 49 | ): string { 50 | const { separator = SLUG_SEPARATOR } = opts || {}; 51 | 52 | return url 53 | .split("") 54 | .reduce( 55 | (accum, char, index, array) => { 56 | const type = is_non_alpha_num_unicode(char) ? "pass" : "process"; 57 | 58 | if (index === 0) { 59 | accum.current = { type, string: char }; 60 | } else if (type === accum.current.type) { 61 | accum.current.string += char; 62 | } else { 63 | accum.chunks.push(accum.current); 64 | accum.current = { type, string: char }; 65 | } 66 | 67 | if (index === array.length - 1) { 68 | accum.chunks.push(accum.current); 69 | } 70 | return accum; 71 | }, 72 | { chunks: [], current: { type: "process", string: "" } } 73 | ) 74 | .chunks.reduce((accum, chunk) => { 75 | const processed = 76 | chunk.type === "process" 77 | ? url_safe_processor(chunk.string) 78 | : chunk.string; 79 | 80 | processed.length > 0 && accum.push(processed); 81 | 82 | return accum; 83 | }, []) 84 | .join(separator) 85 | .toLowerCase(); 86 | } 87 | 88 | export function make_session_slug_processor({ 89 | preserve_unicode = SLUG_PRESERVE_UNICODE, 90 | separator = SLUG_SEPARATOR, 91 | }) { 92 | const processor = preserve_unicode 93 | ? unicode_safe_processor 94 | : url_safe_processor; 95 | 96 | return function (url: string, seen_slugs: Map) { 97 | const slug = processor(url, { separator }); 98 | let count; 99 | if ((count = seen_slugs.get(slug))) { 100 | throw new Error( 101 | `Found duplicate slug: "${slug}" when slugifying: "${url}". 102 | Duplicate slugs are not allowed. You need to take yourself outside and have a word with yourself.` 103 | ); 104 | } else { 105 | seen_slugs.set(slug, 1); 106 | return slug; 107 | } 108 | }; 109 | } 110 | -------------------------------------------------------------------------------- /src/format/split_view.ts: -------------------------------------------------------------------------------- 1 | import type { Transformer } from "unified"; 2 | import type { Parent } from "unist"; 3 | import { custom_vfile } from "./types"; 4 | import visit from "unist-util-visit"; 5 | 6 | /** 7 | * The svelte docs have a special two-column display for code examples. This 8 | * allows arbitrary content to appear alongside a highlighted code example. 9 | * 10 | * This formatting starts at `***` (a `hr`) and ends with the next fenced code block. All 11 | * of this content is wrappeed in `
`. then there 12 | * are two nested divs `
` which contains the arbirtary 13 | * content *up to* the code block and `
` which contains 14 | * the code block itself. 15 | */ 16 | export function split_view(): Transformer { 17 | return function (tree, vFile: custom_vfile) { 18 | if (vFile.data.docs_type !== "docs") return; 19 | 20 | visit(tree, "element", (node, i, parent) => { 21 | if (node.tagName === "hr") { 22 | const left: Parent = { 23 | type: "element", 24 | tagName: "div", 25 | properties: { className: "copy" }, 26 | children: [], 27 | }; 28 | 29 | const right: Parent = { 30 | type: "element", 31 | tagName: "div", 32 | properties: { className: "code" }, 33 | children: [], 34 | }; 35 | 36 | // starting from the current node, we iterate the children of the parent 37 | // when we find the next code block (which is a `raw` node at this point) 38 | // we stop, as we have all of the content 39 | for (let index = i + 1; index < parent.children.length; index++) { 40 | const _node = parent.children[index]; 41 | 42 | if (!_node) break; 43 | 44 | // data.code_block is set as meta data when highlight code blocks in another transform 45 | if (_node.data && _node.data.code_block) { 46 | const parts = parent.children.splice(i + 1, index - i); 47 | 48 | left.children = parts; 49 | right.children.push(parts.pop()); 50 | break; 51 | } 52 | } 53 | 54 | node.tagName = "div"; 55 | node.properties = { className: "side-by-side" }; 56 | node.children = [left, right]; 57 | } 58 | }); 59 | }; 60 | } 61 | -------------------------------------------------------------------------------- /src/format/types.ts: -------------------------------------------------------------------------------- 1 | import type { VFile } from "vfile"; 2 | 3 | import { section } from "../types"; 4 | 5 | export type docs_type = 6 | | "docs" 7 | | "faq" 8 | | "migrating" 9 | | "examples" 10 | | "tutorials" 11 | | "blog"; 12 | 13 | export type custom_vfile = VFile & { 14 | data: { 15 | sections: section[]; 16 | section_stack: section[][]; 17 | base_level: number; 18 | prev_level: number; 19 | section_title: string; 20 | section_slug: string; 21 | dir: string; 22 | slugs: string[]; 23 | seen_slugs: Map; 24 | docs_type: docs_type; 25 | file_type: "readme" | "other"; 26 | frontmatter: Record 27 | }; 28 | }; 29 | -------------------------------------------------------------------------------- /src/fs/fixtures/generate_fixtures.ts: -------------------------------------------------------------------------------- 1 | import { promises as fs } from "fs"; 2 | import * as path from "path"; 3 | import { rc_read_file, transform_files } from "../get_content"; 4 | 5 | const base_path = path.join(process.cwd(), "src", "fs", "fixtures"); 6 | const repo_names = ["repo-1", "repo-2", "repo-3", "repo-4"]; 7 | 8 | async function run() { 9 | const repos = await Promise.all( 10 | repo_names.map((repo) => rc_read_file(path.join(base_path, repo))) 11 | ); 12 | 13 | await Promise.all( 14 | repos.map((files, i) => 15 | fs.writeFile( 16 | path.join(base_path, `output-${repo_names[i]}.js`), 17 | `export default ${JSON.stringify(files)}` 18 | ) 19 | ) 20 | ); 21 | 22 | const output = transform_files( 23 | repos[3], 24 | "packages", 25 | "sites/content", 26 | "svelte" 27 | ); 28 | 29 | await fs.writeFile( 30 | path.join(base_path, `full_docs.ts`), 31 | `export default ${JSON.stringify(output)}` 32 | ); 33 | } 34 | 35 | run(); 36 | -------------------------------------------------------------------------------- /src/fs/fixtures/output-repo-1.js: -------------------------------------------------------------------------------- 1 | export default {"name":"repo-1","is_dir":true,"content":[{"name":"documentation","is_dir":true,"content":[{"name":"docs","is_dir":true,"content":[{"name":"01-one.md","is_dir":false,"content":"file-one\n"},{"name":"02-two.md","is_dir":false,"content":"file-two\n"},{"name":"03-three.md","is_dir":false,"content":"file-three\n"},{"name":"04-four.md","is_dir":false,"content":"file-four\n"},{"name":"badfile.boojoo","is_dir":false,"content":""}]}]},{"name":"packages","is_dir":true,"content":[{"name":"no-package-json","is_dir":true,"content":[{"name":"README.md","is_dir":false,"content":"no-package-json\n"}]},{"name":"no-readme","is_dir":true,"content":[{"name":"package.json","is_dir":false,"content":"{\n\t\"name\": \"no-readme\"\n}\n"}]},{"name":"random-extra-files","is_dir":true,"content":[{"name":"README.md","is_dir":false,"content":"random-extra-files\n"},{"name":"bipbopboom.whatever","is_dir":false,"content":""},{"name":"package.json","is_dir":false,"content":"{\n\t\"name\": \"random-extra-files\"\n}\n"},{"name":"src","is_dir":true,"content":[{"name":"hello.bopbop","is_dir":false,"content":""}]}]},{"name":"standard-package","is_dir":true,"content":[{"name":"README.md","is_dir":false,"content":"standard-package\n"},{"name":"package.json","is_dir":false,"content":"{\n\t\"name\": \"standard-package\"\n}\n"}]}]}]} -------------------------------------------------------------------------------- /src/fs/fixtures/output-repo-2.js: -------------------------------------------------------------------------------- 1 | export default {"name":"repo-2","is_dir":true,"content":[{"name":"README.md","is_dir":false,"content":"repo-2 docs\n"},{"name":"package.json","is_dir":false,"content":"{\n\t\"name\": \"standard-package\"\n}\n"}]} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/documentation/docs/01-one.md: -------------------------------------------------------------------------------- 1 | file-one 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/documentation/docs/02-two.md: -------------------------------------------------------------------------------- 1 | file-two 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/documentation/docs/03-three.md: -------------------------------------------------------------------------------- 1 | file-three 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/documentation/docs/04-four.md: -------------------------------------------------------------------------------- 1 | file-four 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/documentation/docs/badfile.boojoo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/action-deploy-docs/2a11a888494aac2a254edd371006a22198559135/src/fs/fixtures/repo-1/documentation/docs/badfile.boojoo -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/packages/no-package-json/README.md: -------------------------------------------------------------------------------- 1 | no-package-json 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/packages/no-readme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "no-readme" 3 | } 4 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/packages/random-extra-files/README.md: -------------------------------------------------------------------------------- 1 | random-extra-files 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/packages/random-extra-files/bipbopboom.whatever: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/action-deploy-docs/2a11a888494aac2a254edd371006a22198559135/src/fs/fixtures/repo-1/packages/random-extra-files/bipbopboom.whatever -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/packages/random-extra-files/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "random-extra-files" 3 | } 4 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/packages/random-extra-files/src/hello.bopbop: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/action-deploy-docs/2a11a888494aac2a254edd371006a22198559135/src/fs/fixtures/repo-1/packages/random-extra-files/src/hello.bopbop -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/packages/standard-package/README.md: -------------------------------------------------------------------------------- 1 | standard-package 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-1/packages/standard-package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "standard-package" 3 | } 4 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-2/README.md: -------------------------------------------------------------------------------- 1 | repo-2 docs 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "standard-package" 3 | } 4 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/docs/01-one.md: -------------------------------------------------------------------------------- 1 | file-one 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/docs/02-two.md: -------------------------------------------------------------------------------- 1 | file-two 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/docs/03-three.md: -------------------------------------------------------------------------------- 1 | file-three 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/docs/04-four.md: -------------------------------------------------------------------------------- 1 | file-four 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/docs/badfile.boojoo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/action-deploy-docs/2a11a888494aac2a254edd371006a22198559135/src/fs/fixtures/repo-3/documentation/docs/badfile.boojoo -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/docs/xx-security.md: -------------------------------------------------------------------------------- 1 | asdasd 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/00-hello-world/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Hello {name}!

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/00-hello-world/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hello world" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/01-dynamic-attributes/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | {name} dancing -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/01-dynamic-attributes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Dynamic attributes" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/02-styling/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

Styled!

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/02-styling/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Styling" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/03-nested-components/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 |

These styles...

14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/03-nested-components/Nested.svelte: -------------------------------------------------------------------------------- 1 |

...don't affect this element

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/03-nested-components/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Nested components" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/04-html-tags/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{@html string}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/04-html-tags/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "HTML tags" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/00-introduction/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Introduction" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/01-reactivity/00-reactive-assignments/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/01-reactivity/00-reactive-assignments/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive assignments" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/01-reactivity/01-reactive-declarations/App.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 |

{count} * 2 = {doubled}

18 |

{doubled} * 2 = {quadrupled}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/01-reactivity/01-reactive-declarations/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive declarations" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/01-reactivity/02-reactive-statements/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/01-reactivity/02-reactive-statements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive statements" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/01-reactivity/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactivity" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/00-declaring-props/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/00-declaring-props/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/00-declaring-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Declaring props" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/01-default-values/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/01-default-values/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/01-default-values/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Default values" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/02-spread-props/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/02-spread-props/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/02-spread-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Spread props" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/02-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Props" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/00-if-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/00-if-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "If blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/01-else-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {:else} 14 | 17 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/01-else-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Else blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/02-else-if-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else if 5 > x} 8 |

{x} is less than 5

9 | {:else} 10 |

{x} is between 5 and 10

11 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/02-else-if-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Else-if blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/03-each-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 11 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/03-each-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Each blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/04-keyed-each-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 |
22 |
23 |

Keyed

24 | {#each things as thing (thing.id)} 25 | 26 | {/each} 27 |
28 | 29 |
30 |

Unkeyed

31 | {#each things as thing} 32 | 33 | {/each} 34 |
35 |
36 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/04-keyed-each-blocks/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

10 | initial 11 | current 12 |

13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/04-keyed-each-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Keyed each blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/05-await-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | 24 | {#await promise} 25 |

...waiting

26 | {:then number} 27 |

The number is {number}

28 | {:catch error} 29 |

{error.message}

30 | {/await} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/05-await-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Await blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/examples/03-logic/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Logic" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/faq/100-im-new-to-svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: I'm new to Svelte. Where should I start? 3 | --- 4 | 5 | We think the best way to get started is playing through the interactive [Tutorial](tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser. 6 | 7 | Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/faq/200-are-there-any-video-courses.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: Are there any video courses? 3 | --- 4 | 5 | Rich Harris, the creator of Svelte, taught a course: 6 | 7 | - [Frontend Masters](https://frontendmasters.com/courses/svelte/) 8 | 9 | There are also a number of third-party courses: 10 | 11 | - [Egghead](https://egghead.io/browse/frameworks/svelte) 12 | - [Udemy](https://www.udemy.com/courses/search/?q=sveltejs+svelte) 13 | 14 | Note that Udemy very frequently has discounts over 90%. 15 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/faq/250-are-there-any-books.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: Are there any books? 3 | --- 4 | 5 | There are a few books: 6 | 7 | - [Svelte Handbook](https://flaviocopes.com/page/download-svelte-handbook/) by Flavio Copes 8 | - [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/) by Alessandro Segala 9 | - [Svelte and Sapper in Action](https://www.manning.com/books/svelte-and-sapper-in-action) by R. Mark Volkmann 10 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/faq/400-how-can-i-get-syntax-highlighting.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: How can I get VS Code to syntax-highlight my .svelte files? 3 | --- 4 | 5 | There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). 6 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/faq/450-how-do-i-document-my-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: How do I document my components? 3 | --- 4 | 5 | In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments. 6 | 7 | ````svelte 8 | 12 | 13 | 25 |
26 |

27 | Hello, {name} 28 |

29 |
30 | ```` 31 | 32 | Note: The `@component` is necessary in the HTML comment which describes your component. 33 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/migrating/01-migrating.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Migrating from Sapper 3 | --- 4 | 5 | SvelteKit is the successor to Sapper and shares many elements of its design. 6 | 7 | If you have an existing Sapper app that you plan to migrate to SvelteKit, however, there are a number of changes you will need to make. You may find it helpful to view the [examples](https://github.com/sveltejs/kit/tree/master/examples) while migrating. 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/migrating/02-pkg.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: package.json 3 | --- 4 | 5 | ### type : "module" 6 | 7 | Add `"type": "module"` to your `package.json` 8 | 9 | ### dependencies 10 | 11 | Remove `polka` or `express`, if you're using one of those, and any middleware such as `sirv` or `compression`. 12 | 13 | ### devDependencies 14 | 15 | Remove `sapper` from your `devDependencies` and replace it with `@sveltejs/kit`, `vite`, and whichever [adapter](/docs#adapters) you plan to use (see [next section](#project-files-configuration)). 16 | 17 | ### scripts 18 | 19 | Any scripts that reference the `sapper` binary should be updated: 20 | 21 | * `sapper build` or `sapper export` should become [`svelte-kit build`](/docs#command-line-interface-svelte-kit-build) 22 | * `sapper dev` should become [`svelte-kit dev`](/docs#command-line-interface-svelte-kit-dev) 23 | 24 | Additionally, [`svelte-kit start`](/docs#command-line-interface-svelte-kit-start) replaces any command that invokes your Sapper-built server. 25 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/migrating/03-project-files.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project files 3 | --- 4 | 5 | The bulk of your app, in `src/routes`, can be left where it is, but several project files will need to be moved or updated. 6 | 7 | ### Configuration 8 | 9 | Your `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.cjs`, as documented [here](/docs#configuration). Svelte preprocessor options should be moved to `config.preprocess`. 10 | 11 | You will need to add an [adapter](/docs#adapters). `sapper build` is roughly equivalent to [adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) while `sapper export` is roughly equivalent to [adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to. 12 | 13 | If you were using plugins for filetypes that are not automatically handled by [Vite](https://vitejs.dev), you will need to find Vite equivalents and add them to the [Vite config](/docs#configuration-vite). 14 | 15 | ### src/client.js 16 | 17 | This file has no equivalent in SvelteKit. Any custom logic (beyond `sapper.start(...)`) should be expressed in your `$layout.svelte` file, inside an `onMount` callback. 18 | 19 | ### src/server.js 20 | 21 | This file also has no direct equivalent, since SvelteKit apps can run in serverless environments. You can, however, use the [hooks module](/docs#hooks) to implement session logic. 22 | 23 | ### src/service-worker.js 24 | 25 | Most imports from `@sapper/service-worker` have equivalents in [`$service-worker`](/docs#modules-service-worker): 26 | 27 | - `timestamp` is unchanged 28 | - `files` is unchanged 29 | - `shell` is now `build` 30 | - `routes` has been removed 31 | 32 | ### src/template.html 33 | 34 | The `src/template.html` file should be renamed `src/app.html`. 35 | 36 | Remove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%svelte.head%` and `%sapper.html%` with `%svelte.body%`. 37 | 38 | The `
` is no longer necessary, though you can continue mounting the app to a wrapper element by specifying it with the [`target`](/docs#configuration-target) config option. 39 | 40 | ### src/node_modules 41 | 42 | A common pattern in Sapper apps is to put your internal library in a directory inside `src/node_modules`. This doesn't work with Vite, so we use [`src/lib`](/docs#modules-lib) instead. 43 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/migrating/04-pages.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pages and layouts 3 | --- 4 | 5 | ### Renamed files 6 | 7 | Your custom error page component should be renamed from `_error.svelte` to `$error.svelte`. Any `_layout.svelte` files should likewise be renamed `$layout.svelte`. The `_` prefix now exclusively denotes your _own_ 'private' components and modules, as opposed to those with a special meaning to SvelteKit. 8 | 9 | ### Imports 10 | 11 | The `goto`, `prefetch` and `prefetchRoutes` imports from `@sapper/app` should be replaced with identical imports from [`$app/navigation`](/docs#modules-app-navigation). 12 | 13 | The `stores` import from `@sapper/app` should be replaced — see the [Stores](#pages-and-layouts-stores) section below. 14 | 15 | Any files you previously imported from directories in `src/node_modules` will need to be replaced with [`$lib`](/docs#modules-lib) imports. 16 | 17 | ### Preload 18 | 19 | As before, pages and layout components can export a function that allows data to be loaded before rendering takes place. 20 | 21 | This function has been renamed from `preload` to [`load`](/docs#loading), and its API has changed. Instead of two arguments — `page` and `session` — there is a single argument that includes both, along with `fetch` (which replaces `this.fetch`) and a new `context` object. 22 | 23 | There is no more `this` object, and consequently no `this.fetch`, `this.error` or `this.redirect`. Instead of returning props directly, `load` now returns an object that _contains_ `props`, alongside various other things. 24 | 25 | Lastly, if your page has a `load` method, make sure to return something otherwise you will get `Not found`. 26 | 27 | ### Stores 28 | 29 | In Sapper, you would get references to provided stores like so: 30 | 31 | ```js 32 | import { stores } from '@sapper/app'; 33 | const { preloading, page, session } = stores(); 34 | ``` 35 | 36 | The `page` and `session` stores still exist; `preloading` has been replaced with a `navigating` store that contains `from` and `to` properties. 37 | 38 | You access them differently in SvelteKit. `stores` is now `getStores`, but in most cases it is unnecessary since you can import `navigating`, `page` and `session` directly from [`$app/stores`](/docs#modules-app-stores). 39 | 40 | ### Routing 41 | 42 | Regex routes are no longer supported. Instead, use [fallthrough routes](/docs#routing-advanced-fallthrough-routes). 43 | 44 | ### URLs 45 | 46 | In Sapper, all relative URLs were resolved against the base URL — usually `/`, unless the `basepath` option was used — rather than against the current page. 47 | 48 | This caused problems and is no longer the case in SvelteKit. Instead, URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. 49 | 50 | ### <a> attributes 51 | 52 | - `sapper:prefetch` is now `sveltekit:prefetch` 53 | - `sapper:noscroll` is now `sveltekit:noscroll` 54 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/migrating/05-endpoints.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Endpoints 3 | --- 4 | 5 | In Sapper, 'server routes' — now referred to as [endpoints](/docs#routing-endpoints) — received the `req` and `res` objects exposed by Node's `http` module (or the augmented versions provided by frameworks like Polka and Express). 6 | 7 | SvelteKit is designed to be agnostic as to where the app is running — it could be running on a Node server, but could equally be running on a serverless platform or in a Cloudflare Worker. For that reason, you no longer interact directly with `req` and `res`. Your endpoints will need to be updated to match the new signature. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/migrating/99-integrations.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Integrations 3 | --- 4 | 5 | See [sveltejs/integrations](https://github.com/sveltejs/integrations#sveltekit) for examples of setting up popular tools like PostCSS, Tailwind CSS, mdsvex, Firebase, GraphQL, and Bulma. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/01-basics/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

Hello world!

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/01-basics/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Basics 3 | --- 4 | 5 | Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily. 6 | 7 | You can also consult the [API docs](docs) and the [examples](examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](blog/the-easiest-way-to-get-started). 8 | 9 | 10 | ## What is Svelte? 11 | 12 | Svelte is a tool for building fast web applications. 13 | 14 | It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces. 15 | 16 | But there's a crucial difference: Svelte converts your app into ideal JavaScript at *build time*, rather than interpreting your application code at *run time*. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads. 17 | 18 | You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework. 19 | 20 | 21 | ## How to use this tutorial 22 | 23 | You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte. 24 | 25 | As you progress through the tutorial, you'll be presented with mini exercises designed to illustrate new features. Later chapters build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the dropdown above (click 'Introduction / Basics'). 26 | 27 | Each tutorial chapter will have a 'Show me' button that you can click if you get stuck following the instructions. Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor. 28 | 29 | 30 | ## Understanding components 31 | 32 | In Svelte, an application is composed from one or more *components*. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The 'hello world' example in the code editor is a simple component. 33 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/02-adding-data/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

Hello world!

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/02-adding-data/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Hello {name.toUpperCase()}!

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/02-adding-data/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding data 3 | --- 4 | 5 | A component that just renders some static markup isn't very interesting. Let's add some data. 6 | 7 | First, add a script tag to your component and declare a `name` variable: 8 | 9 | ```html 10 | 13 | 14 |

Hello world!

15 | ``` 16 | 17 | Then, we can refer to `name` in the markup: 18 | 19 | ```html 20 |

Hello {name}!

21 | ``` 22 | 23 | Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {name} dances. 7 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/03-dynamic-attributes/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dynamic attributes 3 | --- 4 | 5 | Just like you can use curly braces to control text, you can use them to control element attributes. 6 | 7 | Our image is missing a `src` — let's add one: 8 | 9 | ```html 10 | 11 | ``` 12 | 13 | That's better. But Svelte is giving us a warning: 14 | 15 | > A11y: <img> element should have an alt attribute 16 | 17 | When building web apps, it's important to make sure that they're *accessible* to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup. 18 | 19 | In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one: 20 | 21 | ```html 22 | A man dances. 23 | ``` 24 | 25 | We can use curly braces *inside* attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the ` 4 | 5 | 12 | 13 |

This is a paragraph.

14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 |

This is another paragraph.

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/05-nested-components/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nested components 3 | --- 4 | 5 | It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements. 6 | 7 | Add a ` 13 | ``` 14 | 15 | ...then add it to the markup: 16 | 17 | ```html 18 |

This is a paragraph.

19 | 20 | ``` 21 | 22 | Notice that even though `Nested.svelte` has a `

` element, the styles from `App.svelte` don't leak in. 23 | 24 | Also notice that the component name `Nested` is capitalised. This convention has been adopted to allow us to differentiate between user-defined components and regular HTML tags. 25 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/06-html-tags/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{string}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/06-html-tags/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{@html string}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/06-html-tags/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTML tags 3 | --- 4 | 5 | Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning. 6 | 7 | But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML. 8 | 9 | In Svelte, you do this with the special `{@html ...}` tag: 10 | 11 | ```html 12 |

{@html string}

13 | ``` 14 | 15 | > Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. In other words, if you use this feature it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks. 16 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/07-making-an-app/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

What now?

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/07-making-an-app/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Making an app 3 | --- 4 | 5 | This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor. 6 | 7 | First, you'll need to integrate Svelte with a build tool. There are officially maintained plugins for [Rollup](https://rollupjs.org) and [webpack](https://webpack.js.org/)... 8 | 9 | * [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) 10 | * [svelte-loader](https://github.com/sveltejs/svelte-loader) 11 | 12 | ...and a variety of [community-maintained ones](https://github.com/sveltejs/integrations#bundler-plugins). 13 | 14 | Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](blog/svelte-for-new-developers), which walks you through the process. 15 | 16 | You'll also want to configure your text editor. If you're using VS Code, install the [Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), otherwise follow [this guide](blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting. 17 | 18 | Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`: 19 | 20 | ```js 21 | import App from './App.svelte'; 22 | 23 | const app = new App({ 24 | target: document.body, 25 | props: { 26 | // we'll learn about props later 27 | answer: 42 28 | } 29 | }); 30 | ``` 31 | 32 | You can then interact with `app` using the [component API](docs#Client-side_component_API) if you need to. 33 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/01-introduction/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Introduction" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/01-reactive-assignments/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Assignments 3 | --- 4 | 5 | At the heart of Svelte is a powerful system of *reactivity* for keeping the DOM in sync with your application state — for example, in response to an event. 6 | 7 | To demonstrate it, we first need to wire up an event handler. Replace line 9 with this: 8 | 9 | ```html 10 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |

{count} doubled is {doubled}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/02-reactive-declarations/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Declarations 3 | --- 4 | 5 | Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from *other* parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change. 6 | 7 | For these, we have *reactive declarations*. They look like this: 8 | 9 | ```js 10 | let count = 0; 11 | $: doubled = count * 2; 12 | ``` 13 | 14 | > Don't worry if this looks a little alien. It's [valid](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back. 15 | 16 | Let's use `doubled` in our markup: 17 | 18 | ```html 19 |

{count} doubled is {doubled}

20 | ``` 21 | 22 | Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable when you need to reference them multiple times, or you have values that depend on *other* reactive values. 23 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/03-reactive-statements/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Statements 3 | --- 4 | 5 | We're not limited to declaring reactive *values* — we can also run arbitrary *statements* reactively. For example, we can log the value of `count` whenever it changes: 6 | 7 | ```js 8 | $: console.log(`the count is ${count}`); 9 | ``` 10 | 11 | You can easily group statements together with a block: 12 | 13 | ```js 14 | $: { 15 | console.log(`the count is ${count}`); 16 | alert(`I SAID THE COUNT IS ${count}`); 17 | } 18 | ``` 19 | 20 | You can even put the `$:` in front of things like `if` blocks: 21 | 22 | ```js 23 | $: if (count >= 10) { 24 | alert(`count is dangerously high!`); 25 | count = 9; 26 | } 27 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

{numbers.join(' + ')} = {sum}

12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

{numbers.join(' + ')} = {sum}

12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Updating arrays and objects 3 | --- 4 | 5 | Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the button doesn't do anything. 6 | 7 | One way to fix that is to add an assignment that would otherwise be redundant: 8 | 9 | ```js 10 | function addNumber() { 11 | numbers.push(numbers.length + 1); 12 | numbers = numbers; 13 | } 14 | ``` 15 | 16 | But there's a more idiomatic solution: 17 | 18 | ```js 19 | function addNumber() { 20 | numbers = [...numbers, numbers.length + 1]; 21 | } 22 | ``` 23 | 24 | You can use similar patterns to replace `pop`, `shift`, `unshift` and `splice`. 25 | 26 | Assignments to *properties* of arrays and objects — e.g. `obj.foo += 1` or `array[i] = x` — work the same way as assignments to the values themselves. 27 | 28 | ```js 29 | function addNumber() { 30 | numbers[numbers.length] = numbers.length + 1; 31 | } 32 | ``` 33 | 34 | A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. For example this... 35 | 36 | ```js 37 | const foo = obj.foo; 38 | foo.bar = 'baz'; 39 | ``` 40 | 41 | ...won't update references to `obj.foo.bar`, unless you follow it up with `obj = obj`. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/02-reactivity/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactivity" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/01-declaring-props/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/01-declaring-props/app-a/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/01-declaring-props/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/01-declaring-props/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/01-declaring-props/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Declaring props 3 | --- 4 | 5 | So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component. 6 | 7 | In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare *properties*, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component: 8 | 9 | ```html 10 | 13 | ``` 14 | 15 | > Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/02-default-values/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/02-default-values/app-a/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/02-default-values/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/02-default-values/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/02-default-values/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Default values 3 | --- 4 | 5 | We can easily specify default values for props in `Nested.svelte`: 6 | 7 | ```html 8 | 11 | ``` 12 | 13 | If we now add a second component *without* an `answer` prop, it will fall back to the default: 14 | 15 | ```html 16 | 17 | 18 | ``` 19 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/03-spread-props/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/03-spread-props/app-a/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/03-spread-props/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/03-spread-props/app-b/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

-------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/03-spread-props/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Spread props 3 | --- 4 | 5 | If you have an object of properties, you can 'spread' them onto a component instead of specifying each one: 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | > Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases. 12 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/03-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Props" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/01-if-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/01-if-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/01-if-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: If blocks 3 | --- 4 | 5 | HTML doesn't have a way of expressing *logic*, like conditionals and loops. Svelte does. 6 | 7 | To conditionally render some markup, we wrap it in an `if` block: 8 | 9 | ```html 10 | {#if user.loggedIn} 11 | 14 | {/if} 15 | 16 | {#if !user.loggedIn} 17 | 20 | {/if} 21 | ``` 22 | 23 | Try it — update the component, and click on the buttons. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/02-else-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/02-else-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {:else} 14 | 17 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/02-else-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Else blocks 3 | --- 4 | 5 | Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block: 6 | 7 | ```html 8 | {#if user.loggedIn} 9 | 12 | {:else} 13 | 16 | {/if} 17 | ``` 18 | 19 | > A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else} 8 | {#if 5 > x} 9 |

{x} is less than 5

10 | {:else} 11 |

{x} is between 5 and 10

12 | {/if} 13 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else if 5 > x} 8 |

{x} is less than 5

9 | {:else} 10 |

{x} is between 5 and 10

11 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/03-else-if-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Else-if blocks 3 | --- 4 | 5 | Multiple conditions can be 'chained' together with `else if`: 6 | 7 | ```html 8 | {#if x > 10} 9 |

{x} is greater than 10

10 | {:else if 5 > x} 11 |

{x} is less than 5

12 | {:else} 13 |

{x} is between 5 and 10

14 | {/if} 15 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/04-each-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 11 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/04-each-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 11 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/04-each-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Each blocks 3 | --- 4 | 5 | If you need to loop over lists of data, use an `each` block: 6 | 7 | ```html 8 | 15 | ``` 16 | 17 | > The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`. 18 | 19 | You can get the current *index* as a second argument, like so: 20 | 21 | ```html 22 | {#each cats as cat, i} 23 |
  • 24 | {i + 1}: {cat.name} 25 |
    • 26 | {/each} 27 | ``` 28 | 29 | If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | {#each things as thing} 22 | 23 | {/each} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    10 | initial 11 | current 12 |

    13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | {#each things as thing (thing.id)} 22 | 23 | {/each} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    10 | initial 11 | current 12 |

    13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/05-keyed-each-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Keyed each blocks 3 | --- 4 | 5 | By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want. 6 | 7 | It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice that it's removing `` components from the end and updating the `color` for those that remain. Instead, we'd like to remove the first `` component and leave the rest unaffected. 8 | 9 | To do that, we specify a unique identifier for the `each` block: 10 | 11 | ```html 12 | {#each things as thing (thing.id)} 13 | 14 | {/each} 15 | ``` 16 | 17 | The `(thing.id)` tells Svelte how to figure out what changed. 18 | 19 | > You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server. 20 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/06-await-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | 24 | 25 |

    {promise}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/06-await-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | 24 | {#await promise} 25 |

    ...waiting

    26 | {:then number} 27 |

    The number is {number}

    28 | {:catch error} 29 |

    {error.message}

    30 | {/await} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/06-await-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Await blocks 3 | --- 4 | 5 | Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to *await* the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup: 6 | 7 | ```html 8 | {#await promise} 9 |

    ...waiting

    10 | {:then number} 11 |

    The number is {number}

    12 | {:catch error} 13 |

    {error.message}

    14 | {/await} 15 | ``` 16 | 17 | > Only the most recent `promise` is considered, meaning you don't need to worry about race conditions. 18 | 19 | If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves: 20 | 21 | ```html 22 | {#await promise then value} 23 |

    the value is {value}

    24 | {/await} 25 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/04-logic/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Logic" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/01-dom-events/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
    15 | The mouse position is {m.x} x {m.y} 16 |
    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/01-dom-events/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
    15 | The mouse position is {m.x} x {m.y} 16 |
    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/01-dom-events/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM events 3 | --- 4 | 5 | As we've briefly seen already, you can listen to any event on an element with the `on:` directive: 6 | 7 | ```html 8 |
    9 | The mouse position is {m.x} x {m.y} 10 |
    11 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/02-inline-handlers/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
    15 | The mouse position is {m.x} x {m.y} 16 |
    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/02-inline-handlers/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 |
    10 | The mouse position is {m.x} x {m.y} 11 |
    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/02-inline-handlers/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inline handlers 3 | --- 4 | 5 | You can also declare event handlers inline: 6 | 7 | ```html 8 |
    9 | The mouse position is {m.x} x {m.y} 10 |
    11 | ``` 12 | 13 | The quote marks are optional, but they're helpful for syntax highlighting in some environments. 14 | 15 | > In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/03-event-modifiers/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/03-event-modifiers/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/03-event-modifiers/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Event modifiers 3 | --- 4 | 5 | DOM event handlers can have *modifiers* that alter their behaviour. For example, a handler with a `once` modifier will only run a single time: 6 | 7 | ```html 8 | 13 | 14 | 17 | ``` 18 | 19 | The full list of modifiers: 20 | 21 | * `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example. 22 | * `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element 23 | * `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so) 24 | * `nonpassive` — explicitly set `passive: false` 25 | * `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture)) 26 | * `once` — remove the handler after the first time it runs 27 | * `self` — only trigger handler if event.target is the element itself 28 | 29 | You can chain modifiers together, e.g. `on:click|once|capture={...}`. 30 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/04-component-events/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/04-component-events/app-a/Inner.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/04-component-events/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/04-component-events/app-b/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/04-component-events/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Component events 3 | --- 4 | 5 | Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`: 6 | 7 | ```html 8 | 19 | ``` 20 | 21 | > `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/05-event-forwarding/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/05-event-forwarding/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/05-event-forwarding/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Event forwarding 3 | --- 4 | 5 | Unlike DOM events, component events don't *bubble*. If you want to listen to an event on some deeply nested component, the intermediate components must *forward* the event. 6 | 7 | In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](tutorial/component-events), but there's now an `Outer.svelte` component that contains ``. 8 | 9 | One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it: 10 | 11 | ```html 12 | 22 | 23 | 24 | ``` 25 | 26 | But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'. 27 | 28 | ```html 29 | 32 | 33 | 34 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/06-dom-event-forwarding/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM event forwarding 3 | --- 4 | 5 | Event forwarding works for DOM events too. 6 | 7 | We want to get notified of clicks on our `` — to do that, we just need to forward `click` events on the ` 13 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/documentation/tutorial/05-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Events" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/no-package-json/README.md: -------------------------------------------------------------------------------- 1 | no-package-json 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/no-package-or-readme/x.txt: -------------------------------------------------------------------------------- 1 | hi -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/no-readme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "no-readme" 3 | } 4 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/random-extra-files/README.md: -------------------------------------------------------------------------------- 1 | random-extra-files 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/random-extra-files/bipbopboom.whatever: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/action-deploy-docs/2a11a888494aac2a254edd371006a22198559135/src/fs/fixtures/repo-3/packages/random-extra-files/bipbopboom.whatever -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/random-extra-files/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "random-extra-files" 3 | } 4 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/random-extra-files/src/hello.bopbop: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/action-deploy-docs/2a11a888494aac2a254edd371006a22198559135/src/fs/fixtures/repo-3/packages/random-extra-files/src/hello.bopbop -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/standard-package/README.md: -------------------------------------------------------------------------------- 1 | standard-package 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/standard-package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "standard-package" 3 | } 4 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/with-scope/README.md: -------------------------------------------------------------------------------- 1 | @sveltejs/with-scope 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-3/packages/with-scope/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sveltejs/standard-package" 3 | } 4 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/action-deploy-docs/2a11a888494aac2a254edd371006a22198559135/src/fs/fixtures/repo-4/README.md -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/docs/01-one.md: -------------------------------------------------------------------------------- 1 | file-one 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/docs/02-two.md: -------------------------------------------------------------------------------- 1 | file-two 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/docs/03-three.md: -------------------------------------------------------------------------------- 1 | file-three 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/docs/04-four.md: -------------------------------------------------------------------------------- 1 | file-four 2 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/docs/badfile.boojoo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sveltejs/action-deploy-docs/2a11a888494aac2a254edd371006a22198559135/src/fs/fixtures/repo-4/sites/content/docs/badfile.boojoo -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/00-hello-world/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    Hello {name}!

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/00-hello-world/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Hello world" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/01-dynamic-attributes/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | {name} dancing -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/01-dynamic-attributes/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Dynamic attributes" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/02-styling/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    Styled!

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/02-styling/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Styling" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/03-nested-components/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 |

    These styles...

    14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/03-nested-components/Nested.svelte: -------------------------------------------------------------------------------- 1 |

    ...don't affect this element

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/03-nested-components/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Nested components" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/04-html-tags/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    {@html string}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/04-html-tags/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "HTML tags" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/00-introduction/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Introduction" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/01-reactivity/00-reactive-assignments/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/01-reactivity/00-reactive-assignments/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive assignments" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/01-reactivity/01-reactive-declarations/App.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 |

    {count} * 2 = {doubled}

    18 |

    {doubled} * 2 = {quadrupled}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/01-reactivity/01-reactive-declarations/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive declarations" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/01-reactivity/02-reactive-statements/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/01-reactivity/02-reactive-statements/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactive statements" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/01-reactivity/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactivity" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/00-declaring-props/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/00-declaring-props/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    The answer is {answer}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/00-declaring-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Declaring props" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/01-default-values/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/01-default-values/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    The answer is {answer}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/01-default-values/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Default values" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/02-spread-props/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/02-spread-props/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

    9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/02-spread-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Spread props" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/02-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Props" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/00-if-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/00-if-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "If blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/01-else-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {:else} 14 | 17 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/01-else-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Else blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/02-else-if-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

    {x} is greater than 10

    7 | {:else if 5 > x} 8 |

    {x} is less than 5

    9 | {:else} 10 |

    {x} is between 5 and 10

    11 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/02-else-if-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Else-if blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/03-each-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    The Famous Cats of YouTube

    10 | 11 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/03-each-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Each blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/04-keyed-each-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 |
    22 |
    23 |

    Keyed

    24 | {#each things as thing (thing.id)} 25 | 26 | {/each} 27 |
    28 | 29 |
    30 |

    Unkeyed

    31 | {#each things as thing} 32 | 33 | {/each} 34 |
    35 |
    36 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    10 | initial 11 | current 12 |

    13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/04-keyed-each-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Keyed each blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/05-await-blocks/App.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | 24 | {#await promise} 25 |

    ...waiting

    26 | {:then number} 27 |

    The number is {number}

    28 | {:catch error} 29 |

    {error.message}

    30 | {/await} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/05-await-blocks/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Await blocks" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/examples/03-logic/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Logic" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/faq/100-im-new-to-svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: I'm new to Svelte. Where should I start? 3 | --- 4 | 5 | We think the best way to get started is playing through the interactive [Tutorial](tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser. 6 | 7 | Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/faq/200-are-there-any-video-courses.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: Are there any video courses? 3 | --- 4 | 5 | Rich Harris, the creator of Svelte, taught a course: 6 | 7 | - [Frontend Masters](https://frontendmasters.com/courses/svelte/) 8 | 9 | There are also a number of third-party courses: 10 | 11 | - [Egghead](https://egghead.io/browse/frameworks/svelte) 12 | - [Udemy](https://www.udemy.com/courses/search/?q=sveltejs+svelte) 13 | 14 | Note that Udemy very frequently has discounts over 90%. 15 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/faq/250-are-there-any-books.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: Are there any books? 3 | --- 4 | 5 | There are a few books: 6 | 7 | - [Svelte Handbook](https://flaviocopes.com/page/download-svelte-handbook/) by Flavio Copes 8 | - [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/) by Alessandro Segala 9 | - [Svelte and Sapper in Action](https://www.manning.com/books/svelte-and-sapper-in-action) by R. Mark Volkmann 10 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/faq/400-how-can-i-get-syntax-highlighting.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: How can I get VS Code to syntax-highlight my .svelte files? 3 | --- 4 | 5 | There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). 6 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/faq/450-how-do-i-document-my-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | question: How do I document my components? 3 | --- 4 | 5 | In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments. 6 | 7 | ````svelte 8 | 12 | 13 | 25 |
    26 |

    27 | Hello, {name} 28 |

    29 |
    30 | ```` 31 | 32 | Note: The `@component` is necessary in the HTML comment which describes your component. 33 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/migrating/01-migrating.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Migrating from Sapper 3 | --- 4 | 5 | SvelteKit is the successor to Sapper and shares many elements of its design. 6 | 7 | If you have an existing Sapper app that you plan to migrate to SvelteKit, however, there are a number of changes you will need to make. You may find it helpful to view the [examples](https://github.com/sveltejs/kit/tree/master/examples) while migrating. 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/migrating/02-pkg.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: package.json 3 | --- 4 | 5 | ### type : "module" 6 | 7 | Add `"type": "module"` to your `package.json` 8 | 9 | ### dependencies 10 | 11 | Remove `polka` or `express`, if you're using one of those, and any middleware such as `sirv` or `compression`. 12 | 13 | ### devDependencies 14 | 15 | Remove `sapper` from your `devDependencies` and replace it with `@sveltejs/kit`, `vite`, and whichever [adapter](/docs#adapters) you plan to use (see [next section](#project-files-configuration)). 16 | 17 | ### scripts 18 | 19 | Any scripts that reference the `sapper` binary should be updated: 20 | 21 | * `sapper build` or `sapper export` should become [`svelte-kit build`](/docs#command-line-interface-svelte-kit-build) 22 | * `sapper dev` should become [`svelte-kit dev`](/docs#command-line-interface-svelte-kit-dev) 23 | 24 | Additionally, [`svelte-kit start`](/docs#command-line-interface-svelte-kit-start) replaces any command that invokes your Sapper-built server. 25 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/migrating/03-project-files.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project files 3 | --- 4 | 5 | The bulk of your app, in `src/routes`, can be left where it is, but several project files will need to be moved or updated. 6 | 7 | ### Configuration 8 | 9 | Your `webpack.config.js` or `rollup.config.js` should be replaced with a `svelte.config.cjs`, as documented [here](/docs#configuration). Svelte preprocessor options should be moved to `config.preprocess`. 10 | 11 | You will need to add an [adapter](/docs#adapters). `sapper build` is roughly equivalent to [adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node) while `sapper export` is roughly equivalent to [adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static), though you might prefer to use an adapter designed for the platform you're deploying to. 12 | 13 | If you were using plugins for filetypes that are not automatically handled by [Vite](https://vitejs.dev), you will need to find Vite equivalents and add them to the [Vite config](/docs#configuration-vite). 14 | 15 | ### src/client.js 16 | 17 | This file has no equivalent in SvelteKit. Any custom logic (beyond `sapper.start(...)`) should be expressed in your `$layout.svelte` file, inside an `onMount` callback. 18 | 19 | ### src/server.js 20 | 21 | This file also has no direct equivalent, since SvelteKit apps can run in serverless environments. You can, however, use the [hooks module](/docs#hooks) to implement session logic. 22 | 23 | ### src/service-worker.js 24 | 25 | Most imports from `@sapper/service-worker` have equivalents in [`$service-worker`](/docs#modules-service-worker): 26 | 27 | - `timestamp` is unchanged 28 | - `files` is unchanged 29 | - `shell` is now `build` 30 | - `routes` has been removed 31 | 32 | ### src/template.html 33 | 34 | The `src/template.html` file should be renamed `src/app.html`. 35 | 36 | Remove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%svelte.head%` and `%sapper.html%` with `%svelte.body%`. 37 | 38 | The `
    ` is no longer necessary, though you can continue mounting the app to a wrapper element by specifying it with the [`target`](/docs#configuration-target) config option. 39 | 40 | ### src/node_modules 41 | 42 | A common pattern in Sapper apps is to put your internal library in a directory inside `src/node_modules`. This doesn't work with Vite, so we use [`src/lib`](/docs#modules-lib) instead. 43 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/migrating/04-pages.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Pages and layouts 3 | --- 4 | 5 | ### Renamed files 6 | 7 | Your custom error page component should be renamed from `_error.svelte` to `$error.svelte`. Any `_layout.svelte` files should likewise be renamed `$layout.svelte`. The `_` prefix now exclusively denotes your _own_ 'private' components and modules, as opposed to those with a special meaning to SvelteKit. 8 | 9 | ### Imports 10 | 11 | The `goto`, `prefetch` and `prefetchRoutes` imports from `@sapper/app` should be replaced with identical imports from [`$app/navigation`](/docs#modules-app-navigation). 12 | 13 | The `stores` import from `@sapper/app` should be replaced — see the [Stores](#pages-and-layouts-stores) section below. 14 | 15 | Any files you previously imported from directories in `src/node_modules` will need to be replaced with [`$lib`](/docs#modules-lib) imports. 16 | 17 | ### Preload 18 | 19 | As before, pages and layout components can export a function that allows data to be loaded before rendering takes place. 20 | 21 | This function has been renamed from `preload` to [`load`](/docs#loading), and its API has changed. Instead of two arguments — `page` and `session` — there is a single argument that includes both, along with `fetch` (which replaces `this.fetch`) and a new `context` object. 22 | 23 | There is no more `this` object, and consequently no `this.fetch`, `this.error` or `this.redirect`. Instead of returning props directly, `load` now returns an object that _contains_ `props`, alongside various other things. 24 | 25 | Lastly, if your page has a `load` method, make sure to return something otherwise you will get `Not found`. 26 | 27 | ### Stores 28 | 29 | In Sapper, you would get references to provided stores like so: 30 | 31 | ```js 32 | import { stores } from '@sapper/app'; 33 | const { preloading, page, session } = stores(); 34 | ``` 35 | 36 | The `page` and `session` stores still exist; `preloading` has been replaced with a `navigating` store that contains `from` and `to` properties. 37 | 38 | You access them differently in SvelteKit. `stores` is now `getStores`, but in most cases it is unnecessary since you can import `navigating`, `page` and `session` directly from [`$app/stores`](/docs#modules-app-stores). 39 | 40 | ### Routing 41 | 42 | Regex routes are no longer supported. Instead, use [fallthrough routes](/docs#routing-advanced-fallthrough-routes). 43 | 44 | ### URLs 45 | 46 | In Sapper, all relative URLs were resolved against the base URL — usually `/`, unless the `basepath` option was used — rather than against the current page. 47 | 48 | This caused problems and is no longer the case in SvelteKit. Instead, URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. 49 | 50 | ### <a> attributes 51 | 52 | - `sapper:prefetch` is now `sveltekit:prefetch` 53 | - `sapper:noscroll` is now `sveltekit:noscroll` 54 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/migrating/05-endpoints.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Endpoints 3 | --- 4 | 5 | In Sapper, 'server routes' — now referred to as [endpoints](/docs#routing-endpoints) — received the `req` and `res` objects exposed by Node's `http` module (or the augmented versions provided by frameworks like Polka and Express). 6 | 7 | SvelteKit is designed to be agnostic as to where the app is running — it could be running on a Node server, but could equally be running on a serverless platform or in a Cloudflare Worker. For that reason, you no longer interact directly with `req` and `res`. Your endpoints will need to be updated to match the new signature. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/migrating/99-integrations.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Integrations 3 | --- 4 | 5 | See [sveltejs/integrations](https://github.com/sveltejs/integrations#sveltekit) for examples of setting up popular tools like PostCSS, Tailwind CSS, mdsvex, Firebase, GraphQL, and Bulma. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/01-basics/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

    Hello world!

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/01-basics/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Basics 3 | --- 4 | 5 | Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily. 6 | 7 | You can also consult the [API docs](docs) and the [examples](examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](blog/the-easiest-way-to-get-started). 8 | 9 | 10 | ## What is Svelte? 11 | 12 | Svelte is a tool for building fast web applications. 13 | 14 | It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces. 15 | 16 | But there's a crucial difference: Svelte converts your app into ideal JavaScript at *build time*, rather than interpreting your application code at *run time*. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads. 17 | 18 | You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework. 19 | 20 | 21 | ## How to use this tutorial 22 | 23 | You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte. 24 | 25 | As you progress through the tutorial, you'll be presented with mini exercises designed to illustrate new features. Later chapters build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the dropdown above (click 'Introduction / Basics'). 26 | 27 | Each tutorial chapter will have a 'Show me' button that you can click if you get stuck following the instructions. Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor. 28 | 29 | 30 | ## Understanding components 31 | 32 | In Svelte, an application is composed from one or more *components*. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The 'hello world' example in the code editor is a simple component. 33 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

    Hello world!

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    Hello {name.toUpperCase()}!

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/02-adding-data/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding data 3 | --- 4 | 5 | A component that just renders some static markup isn't very interesting. Let's add some data. 6 | 7 | First, add a script tag to your component and declare a `name` variable: 8 | 9 | ```html 10 | 13 | 14 |

    Hello world!

    15 | ``` 16 | 17 | Then, we can refer to `name` in the markup: 18 | 19 | ```html 20 |

    Hello {name}!

    21 | ``` 22 | 23 | Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {name} dances. 7 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/03-dynamic-attributes/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dynamic attributes 3 | --- 4 | 5 | Just like you can use curly braces to control text, you can use them to control element attributes. 6 | 7 | Our image is missing a `src` — let's add one: 8 | 9 | ```html 10 | 11 | ``` 12 | 13 | That's better. But Svelte is giving us a warning: 14 | 15 | > A11y: <img> element should have an alt attribute 16 | 17 | When building web apps, it's important to make sure that they're *accessible* to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup. 18 | 19 | In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one: 20 | 21 | ```html 22 | A man dances. 23 | ``` 24 | 25 | We can use curly braces *inside* attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the ` 4 | 5 | 12 | 13 |

    This is a paragraph.

    14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 |

    This is another paragraph.

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/05-nested-components/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nested components 3 | --- 4 | 5 | It would be impractical to put your entire app in a single component. Instead, we can import components from other files and include them as though we were including elements. 6 | 7 | Add a ` 13 | ``` 14 | 15 | ...then add it to the markup: 16 | 17 | ```html 18 |

    This is a paragraph.

    19 | 20 | ``` 21 | 22 | Notice that even though `Nested.svelte` has a `

    ` element, the styles from `App.svelte` don't leak in. 23 | 24 | Also notice that the component name `Nested` is capitalised. This convention has been adopted to allow us to differentiate between user-defined components and regular HTML tags. 25 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    {string}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    {@html string}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/06-html-tags/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTML tags 3 | --- 4 | 5 | Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning. 6 | 7 | But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML. 8 | 9 | In Svelte, you do this with the special `{@html ...}` tag: 10 | 11 | ```html 12 |

    {@html string}

    13 | ``` 14 | 15 | > Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. In other words, if you use this feature it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks. 16 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte: -------------------------------------------------------------------------------- 1 |

    What now?

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/07-making-an-app/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Making an app 3 | --- 4 | 5 | This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor. 6 | 7 | First, you'll need to integrate Svelte with a build tool. There are officially maintained plugins for [Rollup](https://rollupjs.org) and [webpack](https://webpack.js.org/)... 8 | 9 | * [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) 10 | * [svelte-loader](https://github.com/sveltejs/svelte-loader) 11 | 12 | ...and a variety of [community-maintained ones](https://github.com/sveltejs/integrations#bundler-plugins). 13 | 14 | Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](blog/svelte-for-new-developers), which walks you through the process. 15 | 16 | You'll also want to configure your text editor. If you're using VS Code, install the [Svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), otherwise follow [this guide](blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting. 17 | 18 | Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`: 19 | 20 | ```js 21 | import App from './App.svelte'; 22 | 23 | const app = new App({ 24 | target: document.body, 25 | props: { 26 | // we'll learn about props later 27 | answer: 42 28 | } 29 | }); 30 | ``` 31 | 32 | You can then interact with `app` using the [component API](docs#Client-side_component_API) if you need to. 33 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/01-introduction/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Introduction" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/01-reactive-assignments/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Assignments 3 | --- 4 | 5 | At the heart of Svelte is a powerful system of *reactivity* for keeping the DOM in sync with your application state — for example, in response to an event. 6 | 7 | To demonstrate it, we first need to wire up an event handler. Replace line 9 with this: 8 | 9 | ```html 10 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |

    {count} doubled is {doubled}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/02-reactive-declarations/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Declarations 3 | --- 4 | 5 | Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from *other* parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change. 6 | 7 | For these, we have *reactive declarations*. They look like this: 8 | 9 | ```js 10 | let count = 0; 11 | $: doubled = count * 2; 12 | ``` 13 | 14 | > Don't worry if this looks a little alien. It's [valid](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back. 15 | 16 | Let's use `doubled` in our markup: 17 | 18 | ```html 19 |

    {count} doubled is {doubled}

    20 | ``` 21 | 22 | Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable when you need to reference them multiple times, or you have values that depend on *other* reactive values. 23 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/03-reactive-statements/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Statements 3 | --- 4 | 5 | We're not limited to declaring reactive *values* — we can also run arbitrary *statements* reactively. For example, we can log the value of `count` whenever it changes: 6 | 7 | ```js 8 | $: console.log(`the count is ${count}`); 9 | ``` 10 | 11 | You can easily group statements together with a block: 12 | 13 | ```js 14 | $: { 15 | console.log(`the count is ${count}`); 16 | alert(`I SAID THE COUNT IS ${count}`); 17 | } 18 | ``` 19 | 20 | You can even put the `$:` in front of things like `if` blocks: 21 | 22 | ```js 23 | $: if (count >= 10) { 24 | alert(`count is dangerously high!`); 25 | count = 9; 26 | } 27 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

    {numbers.join(' + ')} = {sum}

    12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

    {numbers.join(' + ')} = {sum}

    12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Updating arrays and objects 3 | --- 4 | 5 | Because Svelte's reactivity is triggered by assignments, using array methods like `push` and `splice` won't automatically cause updates. For example, clicking the button doesn't do anything. 6 | 7 | One way to fix that is to add an assignment that would otherwise be redundant: 8 | 9 | ```js 10 | function addNumber() { 11 | numbers.push(numbers.length + 1); 12 | numbers = numbers; 13 | } 14 | ``` 15 | 16 | But there's a more idiomatic solution: 17 | 18 | ```js 19 | function addNumber() { 20 | numbers = [...numbers, numbers.length + 1]; 21 | } 22 | ``` 23 | 24 | You can use similar patterns to replace `pop`, `shift`, `unshift` and `splice`. 25 | 26 | Assignments to *properties* of arrays and objects — e.g. `obj.foo += 1` or `array[i] = x` — work the same way as assignments to the values themselves. 27 | 28 | ```js 29 | function addNumber() { 30 | numbers[numbers.length] = numbers.length + 1; 31 | } 32 | ``` 33 | 34 | A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. For example this... 35 | 36 | ```js 37 | const foo = obj.foo; 38 | foo.bar = 'baz'; 39 | ``` 40 | 41 | ...won't update references to `obj.foo.bar`, unless you follow it up with `obj = obj`. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/02-reactivity/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Reactivity" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/01-declaring-props/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    The answer is {answer}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/01-declaring-props/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    The answer is {answer}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/01-declaring-props/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Declaring props 3 | --- 4 | 5 | So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component. 6 | 7 | In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare *properties*, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component: 8 | 9 | ```html 10 | 13 | ``` 14 | 15 | > Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/02-default-values/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/02-default-values/app-a/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    The answer is {answer}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/02-default-values/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/02-default-values/app-b/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    The answer is {answer}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/02-default-values/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Default values 3 | --- 4 | 5 | We can easily specify default values for props in `Nested.svelte`: 6 | 7 | ```html 8 | 11 | ``` 12 | 13 | If we now add a second component *without* an `answer` prop, it will fall back to the default: 14 | 15 | ```html 16 | 17 | 18 | ``` 19 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/03-spread-props/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/03-spread-props/app-a/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

    9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/03-spread-props/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/03-spread-props/app-b/Info.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

    9 | The {name} package is {speed} fast. 10 | Download version {version} from npm 11 | and learn more here 12 |

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/03-spread-props/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Spread props 3 | --- 4 | 5 | If you have an object of properties, you can 'spread' them onto a component instead of specifying each one: 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | > Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases. 12 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/03-props/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Props" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/01-if-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: If blocks 3 | --- 4 | 5 | HTML doesn't have a way of expressing *logic*, like conditionals and loops. Svelte does. 6 | 7 | To conditionally render some markup, we wrap it in an `if` block: 8 | 9 | ```html 10 | {#if user.loggedIn} 11 | 14 | {/if} 15 | 16 | {#if !user.loggedIn} 17 | 20 | {/if} 21 | ``` 22 | 23 | Try it — update the component, and click on the buttons. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {/if} 14 | 15 | {#if !user.loggedIn} 16 | 19 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | {#if user.loggedIn} 10 | 13 | {:else} 14 | 17 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/02-else-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Else blocks 3 | --- 4 | 5 | Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block: 6 | 7 | ```html 8 | {#if user.loggedIn} 9 | 12 | {:else} 13 | 16 | {/if} 17 | ``` 18 | 19 | > A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

    {x} is greater than 10

    7 | {:else} 8 | {#if 5 > x} 9 |

    {x} is less than 5

    10 | {:else} 11 |

    {x} is between 5 and 10

    12 | {/if} 13 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

    {x} is greater than 10

    7 | {:else if 5 > x} 8 |

    {x} is less than 5

    9 | {:else} 10 |

    {x} is between 5 and 10

    11 | {/if} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/03-else-if-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Else-if blocks 3 | --- 4 | 5 | Multiple conditions can be 'chained' together with `else if`: 6 | 7 | ```html 8 | {#if x > 10} 9 |

    {x} is greater than 10

    10 | {:else if 5 > x} 11 |

    {x} is less than 5

    12 | {:else} 13 |

    {x} is between 5 and 10

    14 | {/if} 15 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    The Famous Cats of YouTube

    10 | 11 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    The Famous Cats of YouTube

    10 | 11 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/04-each-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Each blocks 3 | --- 4 | 5 | If you need to loop over lists of data, use an `each` block: 6 | 7 | ```html 8 | 15 | ``` 16 | 17 | > The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`. 18 | 19 | You can get the current *index* as a second argument, like so: 20 | 21 | ```html 22 | {#each cats as cat, i} 23 |
  • 24 | {i + 1}: {cat.name} 25 |
    • 26 | {/each} 27 | ``` 28 | 29 | If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | {#each things as thing} 22 | 23 | {/each} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    10 | initial 11 | current 12 |

    13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | 21 | {#each things as thing (thing.id)} 22 | 23 | {/each} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    10 | initial 11 | current 12 |

    13 | 14 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/05-keyed-each-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Keyed each blocks 3 | --- 4 | 5 | By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want. 6 | 7 | It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice that it's removing `` components from the end and updating the `color` for those that remain. Instead, we'd like to remove the first `` component and leave the rest unaffected. 8 | 9 | To do that, we specify a unique identifier for the `each` block: 10 | 11 | ```html 12 | {#each things as thing (thing.id)} 13 | 14 | {/each} 15 | ``` 16 | 17 | The `(thing.id)` tells Svelte how to figure out what changed. 18 | 19 | > You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server. 20 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | 24 | 25 |

    {promise}

    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | 24 | {#await promise} 25 |

    ...waiting

    26 | {:then number} 27 |

    The number is {number}

    28 | {:catch error} 29 |

    {error.message}

    30 | {/await} -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/06-await-blocks/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Await blocks 3 | --- 4 | 5 | Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to *await* the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup: 6 | 7 | ```html 8 | {#await promise} 9 |

    ...waiting

    10 | {:then number} 11 |

    The number is {number}

    12 | {:catch error} 13 |

    {error.message}

    14 | {/await} 15 | ``` 16 | 17 | > Only the most recent `promise` is considered, meaning you don't need to worry about race conditions. 18 | 19 | If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves: 20 | 21 | ```html 22 | {#await promise then value} 23 |

    the value is {value}

    24 | {/await} 25 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/04-logic/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Logic" 3 | } -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/01-dom-events/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
    15 | The mouse position is {m.x} x {m.y} 16 |
    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/01-dom-events/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
    15 | The mouse position is {m.x} x {m.y} 16 |
    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/01-dom-events/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM events 3 | --- 4 | 5 | As we've briefly seen already, you can listen to any event on an element with the `on:` directive: 6 | 7 | ```html 8 |
    9 | The mouse position is {m.x} x {m.y} 10 |
    11 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | 14 |
    15 | The mouse position is {m.x} x {m.y} 16 |
    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 |
    10 | The mouse position is {m.x} x {m.y} 11 |
    -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/02-inline-handlers/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inline handlers 3 | --- 4 | 5 | You can also declare event handlers inline: 6 | 7 | ```html 8 |
    9 | The mouse position is {m.x} x {m.y} 10 |
    11 | ``` 12 | 13 | The quote marks are optional, but they're helpful for syntax highlighting in some environments. 14 | 15 | > In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/03-event-modifiers/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Event modifiers 3 | --- 4 | 5 | DOM event handlers can have *modifiers* that alter their behaviour. For example, a handler with a `once` modifier will only run a single time: 6 | 7 | ```html 8 | 13 | 14 | 17 | ``` 18 | 19 | The full list of modifiers: 20 | 21 | * `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example. 22 | * `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element 23 | * `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so) 24 | * `nonpassive` — explicitly set `passive: false` 25 | * `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture)) 26 | * `once` — remove the handler after the first time it runs 27 | * `self` — only trigger handler if event.target is the element itself 28 | 29 | You can chain modifiers together, e.g. `on:click|once|capture={...}`. 30 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/04-component-events/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/04-component-events/app-a/Inner.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/04-component-events/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/04-component-events/app-b/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/04-component-events/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Component events 3 | --- 4 | 5 | Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`: 6 | 7 | ```html 8 | 19 | ``` 20 | 21 | > `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance. -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/05-event-forwarding/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Event forwarding 3 | --- 4 | 5 | Unlike DOM events, component events don't *bubble*. If you want to listen to an event on some deeply nested component, the intermediate components must *forward* the event. 6 | 7 | In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](tutorial/component-events), but there's now an `Outer.svelte` component that contains ``. 8 | 9 | One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it: 10 | 11 | ```html 12 | 22 | 23 | 24 | ``` 25 | 26 | But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'. 27 | 28 | ```html 29 | 32 | 33 | 34 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/06-dom-event-forwarding/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: DOM event forwarding 3 | --- 4 | 5 | Event forwarding works for DOM events too. 6 | 7 | We want to get notified of clicks on our `` — to do that, we just need to forward `click` events on the ` 13 | ``` -------------------------------------------------------------------------------- /src/fs/fixtures/repo-4/sites/content/tutorial/05-events/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Events" 3 | } -------------------------------------------------------------------------------- /src/fs/index.ts: -------------------------------------------------------------------------------- 1 | export { get_docs, DocFiles, SimpleFile } from "./get_content"; 2 | -------------------------------------------------------------------------------- /src/transform/cloudflare.test.ts: -------------------------------------------------------------------------------- 1 | import { suite } from "uvu"; 2 | import * as assert from "uvu/assert"; 3 | import { 4 | base, 5 | cf_full, 6 | cf_contents_keyby_slug, 7 | cf_contents_keyby_file, 8 | cf_list, 9 | cf_full_next, 10 | cf_contents_keyby_slug_next, 11 | cf_list_next, 12 | } from "./fixtures/cloudflare"; 13 | 14 | import { transform_cloudflare } from "./cloudflare"; 15 | 16 | const cf_transform = suite("transform_cloudflare"); 17 | 18 | cf_transform("transforms docs", () => { 19 | const transformed = transform_cloudflare(base, { 20 | project: "svelte", 21 | type: "docs", 22 | keyby: "slug", 23 | }); 24 | 25 | assert.equal( 26 | transformed[0], 27 | [cf_full, ...cf_contents_keyby_slug, cf_list][0], 28 | "full content correctly transformed" 29 | ); 30 | assert.equal( 31 | transformed[1], 32 | [cf_full, ...cf_contents_keyby_slug, cf_list][1], 33 | "individual content items correctly transformed" 34 | ); 35 | assert.equal( 36 | transformed[transformed.length - 1], 37 | [cf_full, ...cf_contents_keyby_slug, cf_list][transformed.length - 1], 38 | "list content correctly transformed" 39 | ); 40 | 41 | assert.equal( 42 | transformed, 43 | [cf_full, ...cf_contents_keyby_slug, cf_list], 44 | "list content correctly transformed" 45 | ); 46 | }); 47 | 48 | cf_transform("individual listings can be keyed by any property", () => { 49 | const transformed = transform_cloudflare(base, { 50 | project: "svelte", 51 | type: "docs", 52 | keyby: "file", 53 | }); 54 | 55 | assert.equal(transformed, [cf_full, ...cf_contents_keyby_file, cf_list]); 56 | }); 57 | 58 | cf_transform("individual listings can be keyed by any object property", () => { 59 | const transformed = transform_cloudflare(base, { 60 | project: "svelte", 61 | type: "docs", 62 | keyby: "slug", 63 | version: "next", 64 | }); 65 | 66 | assert.equal( 67 | transformed, 68 | [cf_full_next, ...cf_contents_keyby_slug_next, cf_list_next], 69 | "list content correctly transformed" 70 | ); 71 | }); 72 | 73 | cf_transform.run(); 74 | -------------------------------------------------------------------------------- /src/transform/cloudflare.ts: -------------------------------------------------------------------------------- 1 | interface Transform_Options { 2 | project: string; 3 | type: string; 4 | keyby: string; 5 | version?: string; 6 | } 7 | 8 | export interface CF_Key { 9 | key: string; 10 | value: string; 11 | } 12 | 13 | export interface Docs { 14 | list: Array>; 15 | full: Array>; 16 | } 17 | 18 | export function transform_cloudflare( 19 | docs: Docs, 20 | { project, type, keyby, version = "latest" }: Transform_Options 21 | ) { 22 | const keys: CF_Key[] = [ 23 | { 24 | key: `${project}@${version}:${type}:content`, 25 | value: JSON.stringify(docs.full), 26 | }, 27 | ]; 28 | 29 | for (let i = 0; i < docs.full.length; i++) { 30 | // const { content, ...rest } = docs[i]; 31 | 32 | const item_key = docs.full[i][keyby]; 33 | 34 | keys.push({ 35 | key: `${project}@${version}:${type}:${item_key}`, 36 | value: JSON.stringify(docs.full[i]), 37 | }); 38 | } 39 | 40 | keys.push({ 41 | key: `${project}@${version}:${type}:list`, 42 | value: JSON.stringify(docs.list), 43 | }); 44 | 45 | return keys; 46 | } 47 | -------------------------------------------------------------------------------- /src/transform/fixtures/everything.ts: -------------------------------------------------------------------------------- 1 | import { blog_out_full, blog_out_list } from "./blog"; 2 | import { docs_full_out, docs_list_out } from "./docs"; 3 | import { examples_out_full, examples_out_list } from "./examples"; 4 | import { faq_out_full, faq_out_list } from "./faq"; 5 | import { migrating_out_full, migrating_out_list } from "./migrating"; 6 | import { tutorials_out_list, tutorials_out_full } from "./tutorials"; 7 | 8 | // @ts-nocheck 9 | export const everything = [ 10 | { 11 | content: { 12 | list: docs_list_out, 13 | full: docs_full_out, 14 | }, 15 | project: "svelte", 16 | type: "docs", 17 | }, 18 | { 19 | content: { 20 | list: tutorials_out_list, 21 | full: tutorials_out_full, 22 | }, 23 | project: "svelte", 24 | type: "tutorial", 25 | }, 26 | { 27 | content: { 28 | list: blog_out_list, 29 | full: blog_out_full, 30 | }, 31 | project: "svelte", 32 | type: "blog", 33 | }, 34 | { 35 | content: { 36 | list: examples_out_list, 37 | full: examples_out_full, 38 | }, 39 | project: "svelte", 40 | type: "examples", 41 | }, 42 | { 43 | content: { 44 | list: faq_out_list, 45 | full: faq_out_full, 46 | }, 47 | project: "svelte", 48 | type: "faq", 49 | }, 50 | { 51 | content: { 52 | list: migrating_out_list, 53 | full: migrating_out_full, 54 | }, 55 | project: "svelte", 56 | type: "migrating", 57 | }, 58 | ]; 59 | -------------------------------------------------------------------------------- /src/transform/fixtures/faq.ts: -------------------------------------------------------------------------------- 1 | export const faq_in = [ 2 | { 3 | name: "100-im-new-to-svelte.md", 4 | content: 5 | "---\nquestion: I'm new to Svelte. Where should I start?\n---\n\nWe think the best way to get started is playing through the interactive [Tutorial](tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.\n\nFive to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.", 6 | }, 7 | { 8 | name: "200-are-there-any-video-courses.md", 9 | content: 10 | "---\nquestion: Are there any video courses?\n---\n\nRich Harris, the creator of Svelte, taught a course:\n\n- [Frontend Masters](https://frontendmasters.com/courses/svelte/)\n\nThere are also a number of third-party courses:\n\n- [Egghead](https://egghead.io/browse/frameworks/svelte)\n- [Udemy](https://www.udemy.com/courses/search/?q=sveltejs+svelte)\n\nNote that Udemy very frequently has discounts over 90%.\n", 11 | }, 12 | ]; 13 | 14 | export const faq_out_full = [ 15 | { 16 | title: "I'm new to Svelte. Where should I start?", 17 | slug: "im-new-to-svelte", 18 | file: "100-im-new-to-svelte.md", 19 | content: 20 | '

    We think the best way to get started is playing through the interactive Tutorial. Each step there is mainly focused on one specific aspect and is easy to follow. You\'ll be editing and running real Svelte components right in your browser.

    \n

    Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.

    ', 21 | }, 22 | { 23 | title: "Are there any video courses?", 24 | slug: "are-there-any-video-courses", 25 | file: "200-are-there-any-video-courses.md", 26 | content: 27 | '

    Rich Harris, the creator of Svelte, taught a course:

    \n\n

    There are also a number of third-party courses:

    \n\n

    Note that Udemy very frequently has discounts over 90%.

    ', 28 | }, 29 | ]; 30 | 31 | export const faq_out_list = [ 32 | { 33 | title: "I'm new to Svelte. Where should I start?", 34 | slug: "im-new-to-svelte", 35 | file: "100-im-new-to-svelte.md", 36 | }, 37 | { 38 | title: "Are there any video courses?", 39 | slug: "are-there-any-video-courses", 40 | file: "200-are-there-any-video-courses.md", 41 | }, 42 | ]; 43 | -------------------------------------------------------------------------------- /src/transform/index.ts: -------------------------------------------------------------------------------- 1 | export { transform_cloudflare } from "./cloudflare"; 2 | export { transform as transform_docs } from "./docs"; 3 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | // Docs, FAQs, Migrating 2 | export type section = { slug: string; title: string; sections: section[] }; 3 | 4 | export type BlogMeta = { 5 | title: string; 6 | slug: string; 7 | file: string; 8 | date: { 9 | pretty: string; 10 | numeric: string; 11 | }; 12 | }; 13 | 14 | export type Blog = BlogMeta & { 15 | content: string; 16 | }; 17 | 18 | export type FaqMeta = { 19 | title: string; 20 | slug: string; 21 | file: string; 22 | }; 23 | 24 | export type Faq = FaqMeta & { 25 | content: string; 26 | }; 27 | 28 | export type DocMeta = { 29 | title: string; 30 | slug: string; 31 | file: string; 32 | sections: section[]; 33 | }; 34 | 35 | export type Doc = DocMeta & { 36 | content: string; 37 | }; 38 | 39 | // file for repl 40 | export type File = { 41 | name: string; // filepath 42 | type: string; 43 | content: string; 44 | }; 45 | 46 | // Tutorials 47 | export type TutorialMeta = { 48 | name: string; 49 | slug: string; 50 | }; 51 | // single tutorial 52 | export type Tutorial = TutorialMeta & { 53 | dir: string; 54 | content: string; 55 | initial: File[]; 56 | complete: File[]; // not a feature for every tutorial 57 | }; 58 | 59 | export type TutorialCategory = { 60 | name: string; 61 | tutorials: TutorialMeta[]; 62 | }; 63 | 64 | export type tutorials = TutorialCategory[]; 65 | 66 | // Examples 67 | export type ExampleMeta = { 68 | name: string; 69 | slug: string; 70 | }; 71 | 72 | // single example 73 | export type Example = { 74 | name: string; 75 | files: File[]; 76 | }; 77 | 78 | export type ExampleCategory = { 79 | name: string; 80 | examples: ExampleMeta[]; 81 | }; 82 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "ts-node": { 3 | "transpileOnly": true, 4 | "compilerOptions": { 5 | "module": "commonjs", 6 | "esModuleInterop": true, 7 | "sourceMap": true 8 | } 9 | }, 10 | "compilerOptions": { 11 | "target": "esnext", 12 | "module": "esnext", 13 | "noImplicitAny": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "allowSyntheticDefaultImports": true, 16 | "moduleResolution": "node", 17 | "removeComments": true, 18 | "sourceMap": false, 19 | "allowJs": true, 20 | "noEmit": true 21 | }, 22 | "include": ["src"], 23 | "exclude": ["node_modules"] 24 | } 25 | --------------------------------------------------------------------------------