diff --git a/.changeset/afraid-moose-matter.md b/.changeset/afraid-moose-matter.md new file mode 100644 index 000000000000..d6be9c8546f7 --- /dev/null +++ b/.changeset/afraid-moose-matter.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: tweak script/style tag parsing/preprocessing logic diff --git a/.changeset/brave-walls-destroy.md b/.changeset/brave-walls-destroy.md new file mode 100644 index 000000000000..86737de23f1b --- /dev/null +++ b/.changeset/brave-walls-destroy.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: use internal `get_descriptors` helper diff --git a/.changeset/brown-spoons-boil.md b/.changeset/brown-spoons-boil.md new file mode 100644 index 000000000000..ba681e7d0547 --- /dev/null +++ b/.changeset/brown-spoons-boil.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +revert: address bug in before/after update diff --git a/.changeset/chilly-dolphins-lick.md b/.changeset/chilly-dolphins-lick.md new file mode 100644 index 000000000000..1941f0a6a0e6 --- /dev/null +++ b/.changeset/chilly-dolphins-lick.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: remove selector api diff --git a/.changeset/clean-eels-beg.md b/.changeset/clean-eels-beg.md new file mode 100644 index 000000000000..2cf079196c74 --- /dev/null +++ b/.changeset/clean-eels-beg.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: emit useful error on invalid binding to derived state diff --git a/.changeset/config.json b/.changeset/config.json index 78f066bcadd9..b56077a9220c 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -5,7 +5,7 @@ "fixed": [], "linked": [], "access": "public", - "baseBranch": "svelte-4", + "baseBranch": "main", "bumpVersionsWithWorkspaceProtocolOnly": true, "ignore": ["!(@sveltejs/*|svelte)"] } diff --git a/.changeset/cuddly-pianos-drop.md b/.changeset/cuddly-pianos-drop.md new file mode 100644 index 000000000000..7993ba6289b9 --- /dev/null +++ b/.changeset/cuddly-pianos-drop.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: improve bundle code size diff --git a/.changeset/curly-lizards-dream.md b/.changeset/curly-lizards-dream.md new file mode 100644 index 000000000000..1f7d32f4846c --- /dev/null +++ b/.changeset/curly-lizards-dream.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: coerce attribute value to string before comparison diff --git a/.changeset/early-ads-tie.md b/.changeset/early-ads-tie.md new file mode 100644 index 000000000000..ee885795ccca --- /dev/null +++ b/.changeset/early-ads-tie.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: rename internal object properties diff --git a/.changeset/eight-steaks-shout.md b/.changeset/eight-steaks-shout.md new file mode 100644 index 000000000000..62dbebafafe4 --- /dev/null +++ b/.changeset/eight-steaks-shout.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: correct update_block index type diff --git a/.changeset/eighty-bikes-camp.md b/.changeset/eighty-bikes-camp.md new file mode 100644 index 000000000000..273e6ad9968e --- /dev/null +++ b/.changeset/eighty-bikes-camp.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: handle private fields in `class` in `.svelte.js` files diff --git a/.changeset/fifty-steaks-float.md b/.changeset/fifty-steaks-float.md new file mode 100644 index 000000000000..b100f215bed8 --- /dev/null +++ b/.changeset/fifty-steaks-float.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: address unowned propagation signal issue diff --git a/.changeset/fresh-weeks-trade.md b/.changeset/fresh-weeks-trade.md new file mode 100644 index 000000000000..224db4c8960e --- /dev/null +++ b/.changeset/fresh-weeks-trade.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: make operations lazy diff --git a/.changeset/funny-wombats-argue.md b/.changeset/funny-wombats-argue.md new file mode 100644 index 000000000000..2d5a707a170a --- /dev/null +++ b/.changeset/funny-wombats-argue.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: allow svelte:self in snippets diff --git a/.changeset/good-pianos-jump.md b/.changeset/good-pianos-jump.md new file mode 100644 index 000000000000..0ae35e5937da --- /dev/null +++ b/.changeset/good-pianos-jump.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: check that snippet is not rendered as a component diff --git a/.changeset/honest-icons-change.md b/.changeset/honest-icons-change.md new file mode 100644 index 000000000000..6791a930d5a6 --- /dev/null +++ b/.changeset/honest-icons-change.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +patch: ensure keyed each block fallback to indexed each block diff --git a/.changeset/hungry-dots-fry.md b/.changeset/hungry-dots-fry.md new file mode 100644 index 000000000000..5c2328f6f92c --- /dev/null +++ b/.changeset/hungry-dots-fry.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: more signal perf tuning diff --git a/.changeset/itchy-lions-wash.md b/.changeset/itchy-lions-wash.md new file mode 100644 index 000000000000..fdd9085d5ec4 --- /dev/null +++ b/.changeset/itchy-lions-wash.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: allow member access on directives diff --git a/.changeset/khaki-mails-draw.md b/.changeset/khaki-mails-draw.md new file mode 100644 index 000000000000..cebc5770f4e4 --- /dev/null +++ b/.changeset/khaki-mails-draw.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: tighten up signals implementation diff --git a/.changeset/kind-deers-lay.md b/.changeset/kind-deers-lay.md new file mode 100644 index 000000000000..fad265dd44a6 --- /dev/null +++ b/.changeset/kind-deers-lay.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: more transition code-golfing diff --git a/.changeset/lazy-spiders-think.md b/.changeset/lazy-spiders-think.md new file mode 100644 index 000000000000..a0e130fc9c7c --- /dev/null +++ b/.changeset/lazy-spiders-think.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: handle dynamic selects with falsy select values diff --git a/.changeset/lucky-schools-hang.md b/.changeset/lucky-schools-hang.md new file mode 100644 index 000000000000..e83a19f3a06e --- /dev/null +++ b/.changeset/lucky-schools-hang.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure dynamic attributes containing call expressions update diff --git a/.changeset/moody-owls-cry.md b/.changeset/moody-owls-cry.md new file mode 100644 index 000000000000..0d94131ee977 --- /dev/null +++ b/.changeset/moody-owls-cry.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: exclude internal props from spread attributes diff --git a/.changeset/odd-needles-joke.md b/.changeset/odd-needles-joke.md new file mode 100644 index 000000000000..94d2f1f585a4 --- /dev/null +++ b/.changeset/odd-needles-joke.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: address intro transition bugs diff --git a/.changeset/poor-eggs-enjoy.md b/.changeset/poor-eggs-enjoy.md new file mode 100644 index 000000000000..2ca830a1de40 --- /dev/null +++ b/.changeset/poor-eggs-enjoy.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: add missing files binding diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 000000000000..846a95f3753a --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,50 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "svelte": "5.0.0-next.0", + "svelte-playgrounds-demo": "0.0.1", + "svelte-playgrounds-sandbox": "0.0.1", + "svelte-5-preview": "0.5.0", + "svelte.dev": "1.0.0" + }, + "changesets": [ + "afraid-moose-matter", + "brave-walls-destroy", + "brown-spoons-boil", + "chilly-dolphins-lick", + "clean-eels-beg", + "cuddly-pianos-drop", + "curly-lizards-dream", + "early-ads-tie", + "eight-steaks-shout", + "eighty-bikes-camp", + "fifty-steaks-float", + "fresh-weeks-trade", + "funny-wombats-argue", + "good-pianos-jump", + "honest-icons-change", + "hungry-dots-fry", + "itchy-lions-wash", + "khaki-mails-draw", + "lazy-spiders-think", + "lucky-schools-hang", + "moody-owls-cry", + "odd-needles-joke", + "poor-eggs-enjoy", + "quiet-camels-mate", + "rich-sheep-burn", + "rotten-buckets-develop", + "sharp-gorillas-impress", + "shiny-shrimps-march", + "small-papayas-laugh", + "soft-geese-learn", + "sour-rules-march", + "strong-lemons-provide", + "tall-shrimps-worry", + "thirty-flowers-sit", + "thirty-ghosts-fix", + "tiny-kings-whisper", + "wicked-doors-train" + ] +} diff --git a/.changeset/quiet-camels-mate.md b/.changeset/quiet-camels-mate.md new file mode 100644 index 000000000000..6e723bd4ab16 --- /dev/null +++ b/.changeset/quiet-camels-mate.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: improve keyblock treeshaking diff --git a/.changeset/rich-sheep-burn.md b/.changeset/rich-sheep-burn.md new file mode 100644 index 000000000000..4a2128d6aa56 --- /dev/null +++ b/.changeset/rich-sheep-burn.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: add top level snippets to instance scope diff --git a/.changeset/rotten-buckets-develop.md b/.changeset/rotten-buckets-develop.md new file mode 100644 index 000000000000..4664f34eaf3d --- /dev/null +++ b/.changeset/rotten-buckets-develop.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +breaking: svelte 5 alpha diff --git a/.changeset/sharp-gorillas-impress.md b/.changeset/sharp-gorillas-impress.md new file mode 100644 index 000000000000..37c74aafa649 --- /dev/null +++ b/.changeset/sharp-gorillas-impress.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: only treat instance context exports as accessors diff --git a/.changeset/shiny-shrimps-march.md b/.changeset/shiny-shrimps-march.md new file mode 100644 index 000000000000..a6920fae3e29 --- /dev/null +++ b/.changeset/shiny-shrimps-march.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: do not propagate global intro transitions diff --git a/.changeset/small-papayas-laugh.md b/.changeset/small-papayas-laugh.md new file mode 100644 index 000000000000..43475946cb58 --- /dev/null +++ b/.changeset/small-papayas-laugh.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +breaking: remove Component type, keep using SvelteComponent instead diff --git a/.changeset/soft-geese-learn.md b/.changeset/soft-geese-learn.md new file mode 100644 index 000000000000..15216a3b0928 --- /dev/null +++ b/.changeset/soft-geese-learn.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: allow setting files binding for `` diff --git a/.changeset/sour-rules-march.md b/.changeset/sour-rules-march.md new file mode 100644 index 000000000000..f948540af742 --- /dev/null +++ b/.changeset/sour-rules-march.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: only escape attribute values for elements, not components diff --git a/.changeset/strong-lemons-provide.md b/.changeset/strong-lemons-provide.md new file mode 100644 index 000000000000..1c8dc17a24be --- /dev/null +++ b/.changeset/strong-lemons-provide.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: handle event attribute spreading with event delegation diff --git a/.changeset/tall-shrimps-worry.md b/.changeset/tall-shrimps-worry.md new file mode 100644 index 000000000000..7f0931130156 --- /dev/null +++ b/.changeset/tall-shrimps-worry.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: add snippet marker symbol to children prop diff --git a/.changeset/thirty-flowers-sit.md b/.changeset/thirty-flowers-sit.md new file mode 100644 index 000000000000..a3d0927788f5 --- /dev/null +++ b/.changeset/thirty-flowers-sit.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: support class exports diff --git a/.changeset/thirty-ghosts-fix.md b/.changeset/thirty-ghosts-fix.md new file mode 100644 index 000000000000..974c82a38be4 --- /dev/null +++ b/.changeset/thirty-ghosts-fix.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: tweak signals for better runtime perf diff --git a/.changeset/tiny-kings-whisper.md b/.changeset/tiny-kings-whisper.md new file mode 100644 index 000000000000..e1e5c3a01dba --- /dev/null +++ b/.changeset/tiny-kings-whisper.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: treat `slot` the same as other props diff --git a/.changeset/wicked-doors-train.md b/.changeset/wicked-doors-train.md new file mode 100644 index 000000000000..28b3271046a4 --- /dev/null +++ b/.changeset/wicked-doors-train.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: add missing visitor for assignments during compilation diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000000..fbab8fbc0d02 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,23 @@ +# NOTE: In general this should be kept in sync with .eslintignore + +**/dist/** +**/config/** +**/build/** +**/playgrounds/sandbox/** +**/npm/** +**/*.js.flow +**/*.d.ts +**/playwright*/** +**/vite.config.js +**/vite.prod.config.js +**/node_modules + +**/tests/** + +# documentation can contain invalid examples +documentation/** + +# contains a fork of the REPL which doesn't adhere to eslint rules +sites/svelte-5-preview/** +# Wasn't checked previously, reenable at some point +sites/svelte.dev/** diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 000000000000..e161e50ef18d --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,54 @@ +module.exports = { + extends: ['@sveltejs'], + + // TODO: add runes to eslint-plugin-svelte + globals: { + $state: true, + $derived: true, + $effect: true, + $props: true + }, + + overrides: [ + { + // scripts and playground should be console logging so don't lint against them + files: ['playgrounds/**/*', 'scripts/**/*'], + rules: { + 'no-console': 'off' + } + }, + { + // the playgrounds can use public naming conventions since they're examples + files: ['playgrounds/**/*'], + rules: { + 'lube/svelte-naming-convention': 'off' + } + }, + { + files: ['packages/svelte/src/compiler/**/*'], + rules: { + 'no-var': 'error' + } + } + ], + + plugins: ['lube'], + + rules: { + 'no-console': 'error', + 'lube/svelte-naming-convention': ['error', { fixSameNames: true }], + // eslint isn't that well-versed with JSDoc to know that `foo: /** @type{..} */ (foo)` isn't a violation of this rule, so turn it off + 'object-shorthand': 'off', + 'no-var': 'off', + + // TODO: enable these rules and run `pnpm lint:fix` + // skipping that for now so as to avoid impacting real work + '@typescript-eslint/array-type': 'off', + '@typescript-eslint/no-namespace': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-unused-vars': 'off', + 'prefer-const': 'off', + 'svelte/valid-compile': 'off', + quotes: 'off' + } +}; diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 49d60aecaab2..a4819f87baa5 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,6 +1,8 @@ -## Svelte compiler rewrite +## Svelte 5 rewrite -Please note that [the Svelte codebase is currently being rewritten](https://svelte.dev/blog/runes). Thus, it's best to hold off on new features or refactorings for the time being. +Please note that [the Svelte codebase is currently being rewritten for Svelte 5](https://svelte.dev/blog/runes). Changes should target Svelte 5, which lives on the default branch (`main`). + +If your PR concerns Svelte 4 (including updates to [svelte.dev.docs](https://svelte.dev/docs)), please ensure the base branch is `svelte-4` and not `main`. ### Before submitting the PR, please make sure you do the following diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2eb842967a45..cf8e96b0ac79 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,7 +1,7 @@ name: CI on: push: - branches: [svelte-4] + branches: [main] pull_request: permissions: contents: read # to fetch code (actions/checkout) @@ -17,11 +17,9 @@ jobs: strategy: matrix: include: - - node-version: 16 - os: ubuntu-latest - - node-version: 16 + - node-version: 18 os: windows-latest - - node-version: 16 + - node-version: 18 os: macOS-latest - node-version: 18 os: ubuntu-latest @@ -47,6 +45,6 @@ jobs: - uses: pnpm/action-setup@v2.2.4 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: pnpm - run: 'pnpm i && pnpm check && pnpm lint' diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml index 952f83a861f8..ce7bf04136ac 100644 --- a/.github/workflows/ecosystem-ci-trigger.yml +++ b/.github/workflows/ecosystem-ci-trigger.yml @@ -61,11 +61,11 @@ jobs: repo: pr.head.repo.full_name } - id: generate-token - uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92 #keep pinned for security reasons, currently 1.8.0 + uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92 #keep pinned for security reasons, currently 1.8.0 with: app_id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }} private_key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }} - repository: "${{ github.repository_owner }}/svelte-ecosystem-ci" + repository: '${{ github.repository_owner }}/svelte-ecosystem-ci' - uses: actions/github-script@v6 id: trigger env: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 999f04d80c9d..24b1229b4296 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -3,7 +3,7 @@ name: Release on: push: branches: - - svelte-4 + - main permissions: {} jobs: diff --git a/.gitignore b/.gitignore index cc2e05ea5f5e..16cac3b27f51 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,25 @@ +# Dependency directories +node_modules/ + +# IDE related .idea -.DS_Store -.vscode/* -!.vscode/launch.json -node_modules + +# Test coverage +coverage +*.lcov + +# Optional eslint cache .eslintcache + +# dotenv environment variables file +.env +.env.test + +# build output +dist +.vercel + +# OS-specific +.DS_Store + +tmp diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000000..36dcaeb08f04 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,39 @@ +# NOTE: In general this should be kept in sync with .eslintignore + +packages/**/dist/*.js +packages/**/build/*.js +packages/**/npm/**/* +packages/**/config/*.js +packages/svelte/tests/**/*.svelte +packages/svelte/tests/**/_expected* +packages/svelte/tests/**/_actual* +packages/svelte/tests/**/expected* +packages/svelte/tests/**/_output +packages/svelte/tests/**/shards/*.test.js +packages/svelte/tests/hydration/samples/*/_before.html +packages/svelte/tests/hydration/samples/*/_before_head.html +packages/svelte/tests/hydration/samples/*/_after.html +packages/svelte/tests/hydration/samples/*/_after_head.html +packages/svelte/types +packages/svelte/compiler.cjs +playgrounds/demo/src +playgrounds/sandbox/input/**.svelte +playgrounds/sandbox/output + +sites/svelte.dev/static/svelte-app.json +sites/svelte.dev/scripts/svelte-app/ +sites/svelte.dev/src/routes/_components/Supporters/contributors.jpg +sites/svelte.dev/src/routes/_components/Supporters/contributors.js +sites/svelte.dev/src/routes/_components/Supporters/donors.jpg +sites/svelte.dev/src/routes/_components/Supporters/donors.js +sites/svelte.dev/src/lib/generated + +**/node_modules +**/.svelte-kit +**/.vercel +.github/CODEOWNERS +.prettierignore +.eslintignore +.changeset +pnpm-lock.yaml +pnpm-workspace.yaml diff --git a/.prettierrc b/.prettierrc index 0ea7a0b1e9fe..c4fd5d9f2f73 100644 --- a/.prettierrc +++ b/.prettierrc @@ -17,7 +17,12 @@ "useTabs": false, "tabWidth": 2 } + }, + { + "files": ["sites/svelte-5-preview/src/routes/docs/content/**/*.md"], + "options": { + "printWidth": 60 + } } - ], - "pluginSearchDirs": ["."] + ] } diff --git a/.vscode/launch.json b/.vscode/launch.json index 2e22a5ab9b7e..41d8017ce29f 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -14,8 +14,14 @@ "name": "Playground: Server", "outputCapture": "std", "program": "start.js", - "cwd": "${workspaceFolder}/packages/playground", + "cwd": "${workspaceFolder}/playgrounds/demo", "cascadeTerminateToConfigurations": ["Playground: Browser"] + }, + { + "type": "node", + "request": "launch", + "name": "Run sandbox", + "program": "${workspaceFolder}/playgrounds/sandbox/run.js" } ], "compounds": [ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000000..3446d68abecb --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "search.exclude": { + "sites/svelte-5-preview/static/*": true + } +} diff --git a/documentation/blog/2023-06-22-svelte-4.md b/documentation/blog/2023-06-22-svelte-4.md index f063c47c00fe..7eb2bd834270 100644 --- a/documentation/blog/2023-06-22-svelte-4.md +++ b/documentation/blog/2023-06-22-svelte-4.md @@ -1,5 +1,5 @@ --- -title: "Announcing Svelte 4" +title: 'Announcing Svelte 4' description: 'Updated performance, developer experience, and site' author: The Svelte team authorURL: https://svelte.dev/ diff --git a/documentation/blog/2023-06-29-svelte-dev-overhaul.md b/documentation/blog/2023-06-29-svelte-dev-overhaul.md index b7782abcc272..a3ffd739bf1e 100644 --- a/documentation/blog/2023-06-29-svelte-dev-overhaul.md +++ b/documentation/blog/2023-06-29-svelte-dev-overhaul.md @@ -31,7 +31,7 @@ We've also taken extra care to ensure that all the links from the old website wi The lack of search functionality could make finding stuff a nuisance as Ctrl+F only returns results in order of occurrence and not order of importance. While Ctrl+F did have its benefits such as not requiring JS, now that the site has multiple pages, it's not an option anymore. -And for that, the new website comes with a search bar, which searches through the docs and the API surface. Hit Ctrl+K (or CMD+F for Mac users) and start searching β€” it even works without JavaScript! +And for that, the new website comes with a search bar, which searches through the docs and the API surface. Hit Ctrl+K (or CMD+K for Mac users) and start searching β€” it even works without JavaScript! ## Lights, TypeScript, Action! diff --git a/documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md b/documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md index afb39a553992..a9134ed5d9c5 100644 --- a/documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md +++ b/documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md @@ -1,6 +1,6 @@ --- title: "What's new in Svelte: July 2023" -description: "Svelte 4.0, new website and a tour around the community" +description: 'Svelte 4.0, new website and a tour around the community' author: Dani Sandoval authorURL: https://dreamindani.com --- @@ -8,6 +8,7 @@ authorURL: https://dreamindani.com Svelte 4 is out and folks have been building! There's a bunch of new showcases, libraries and tutorials to share. So let's get right into it... ## What's new in Svelte + The big news this month was the release of Svelte 4.0! You can read all about it in the [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4). From performance fixes and developer experience improvements to [a brand new site, docs and tutorial](https://svelte.dev/blog/svelte-dev-overhaul)... this new release sets the stage for Svelte 5 with minimal breaking changes. If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](https://svelte.dev/docs/v4-migration-guide) for all the details. @@ -15,7 +16,9 @@ If you're already on Node.js 16, it's possible you won't see any breaking change For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md). ## What's new in SvelteKit + This month there were lots of awesome [bug fixes](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md), so be sure to upgrade to the latest version! There are also a few new features to mention: + - The new `event.isSubRequest` boolean indicates whether this is a same-origin fetch request to one of the app's own APIs during a server request (**1.21.0**, [Docs](https://kit.svelte.dev/docs/types#public-types-requestevent), [#10170](https://github.com/sveltejs/kit/pull/10170)) - A new config option, `config.kit.env.privatePrefix` will set a private prefix on environment variables. This defaults to `''` (**1.21.0**, [Docs](https://kit.svelte.dev/docs/configuration), [#9996](https://github.com/sveltejs/kit/pull/9996)) - `VERSION` is now exported and accessible via `@sveltejs/kit`. This can be used for feature detection or anything else that requires knowledge of the current version of SvelteKit (**1.21.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-version), [#9969](https://github.com/sveltejs/kit/pull/9969)) @@ -27,6 +30,7 @@ For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter` ## Community Showcase **Apps & Sites built with Svelte** + - [Heerdle](https://github.com/DreaminDani/heerdle) is a remake of Spotify's now-defunct Heardle - the daily music guessing game - [Meoweler](https://meoweler.com/) is a travel site filled with cats and helpful facts about popular destinations - [A tech lead from IKEA](https://www.reddit.com/r/sveltejs/comments/13w4zg3/comment/jmaxial/?utm_source=share&utm_medium=web2x&context=3) gave a few more details on the way they build pages (and page template) using Svelte @@ -39,10 +43,12 @@ For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter` - [YABin](https://github.com/Yureien/YABin) is Yet Another Pastebin with some very specific features **Learning Resources** + - [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4) - [svelte.dev: A complete overhaul](https://svelte.dev/blog/svelte-dev-overhaul) _Featuring Svelte Contributors and Ambassadors_ + - [Dev Vlog: June 2023](https://www.youtube.com/watch?v=AOXq89h8saI) - Svelte 4.0 with Rich Harris - [PodRocket: Svelte 4](https://podrocket.logrocket.com/svelte-4) with Geoff - [This Dot Media: Svelte 4 Launch Party](https://www.youtube.com/watch?v=-9gy_leMmcQ) with Simon, Ben, Geoff, and Puru @@ -60,12 +66,13 @@ _Featuring Svelte Contributors and Ambassadors_ - [Svelte Society - London June 2023](https://www.youtube.com/watch?v=EkH0aMgeIKw) - [Using The Svelte Context API With Stores](https://www.youtube.com/watch?v=dp-7NvLDrK4), [Impossible FLIP Layout Animations With Svelte And GSAP](https://www.youtube.com/watch?v=ecP8RwpkiQw) and [Create Beautiful Presentations With Svelte](https://www.youtube.com/watch?v=67lqa5kTQkA) by Joy of Code - _To Watch_ + - [Server-side filtered, paginated and sorted Table in SvelteKit](https://www.youtube.com/watch?v=VgCU0cVWgJE) by hartenfellerdev - [Best Icon Library for Svelte and SvelteKit in 2023](https://www.youtube.com/watch?v=qJP6hC4YIhk) by SvelteRust _To Read_ + - [From Zero to Production with SvelteKit](https://www.okupter.com/events/from-zero-to-production-with-sveltekit) by Justin Ahinon - [Thoughts on Svelte(Kit), one year and 3 billion requests later](https://claudioholanda.ch/en/blog/svelte-kit-after-3-billion-requests/) by Claudio Holanda - [How I published a gratitude journaling app for iOS and Android using SvelteKit and Capacitor](https://khromov.se/how-i-published-a-gratitude-journaling-app-for-ios-and-android-using-sveltekit-and-capacitor/) by Stanislav Khromov @@ -77,8 +84,8 @@ _To Read_ - [Svelte Real‑time Multiplayer Game: User Presence](https://rodneylab.com/svelte-realtime-multiplayer-game/) and [SvelteKit PostCSS Tutorial: use Future CSS Today](https://rodneylab.com/sveltekit-postcss-tutorial/) by Rodney Lab - [SvelteKit’s World of Routing: Unleash power of your app using Dynamic Routes and Parameters](https://www.inow.dev/sveltekits-world-of-routing-unleash-power-of-your-app-using-dynamic-routes-and-parameters/) by Igor Nowosad - **Libraries, Tools & Components** + - [The Vercel AI SDK](https://vercel.com/blog/introducing-the-vercel-ai-sdk) is an interoperable, streaming-enabled, edge-ready software development kit for AI apps built with React and Svelte - [Superforms 1.0](https://superforms.rocks/) has been released. Check out the [migration guide](https://superforms.rocks/migration) and [new feature list](https://superforms.rocks/whats-new-v1) for more details - [Panda CSS](https://panda-css.com/docs/getting-started/svelte) is CSS-in-JS with build time generated styles, RSC compatibility and multi-variant support diff --git a/documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md b/documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md index e7b27d65f779..34a482b266d9 100644 --- a/documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md +++ b/documentation/blog/2023-08-01-whats-new-in-svelte-august-2023.md @@ -1,6 +1,6 @@ --- title: "What's new in Svelte: August 2023" -description: "Extending Custom Element Classes and new +server exports" +description: 'Extending Custom Element Classes and new +server exports' author: Dani Sandoval authorURL: https://dreamindani.com --- @@ -10,6 +10,7 @@ Some sweet new features have dropped in both Svelte and SvelteKit, this month. I More on all that down below... ## What's new in Svelte & Language Tools + There's been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md). The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](https://svelte.dev/docs/custom-elements-api) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info! @@ -17,6 +18,7 @@ The **4.1.0 release** added the ability to further customize the custom element In addition to supporting SvelteKit's new `HEAD` server method, Svelte's language tools now support Prettier v3 (**extensions-107.9.0**) and workspace trust settings are now used to support all settings in workspace (**extensions-107.8.0**). ## What's new in SvelteKit + - The `HEAD` server method is now available in API routes (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server), [#9753](https://github.com/sveltejs/kit/pull/9753)) - Responses with `Vary` headers are now cached, too (except for `Vary: *`) (**1.22.0**, [Docs](https://kit.svelte.dev/docs/routing#server-content-negotiation), [#9993](https://github.com/sveltejs/kit/pull/9993)) - There's now a more helpful error for preview if SvelteKit's build output doesn't exist (**1.22.2**, [#10337](https://github.com/sveltejs/kit/pull/10337)) @@ -28,6 +30,7 @@ For all the patches and performance updates from this month, check out the [Svel ## Community Showcase **Apps & Sites built with Svelte** + - [GitLight](https://github.com/ColinLienard/gitlight) brings GitHub & GitLab notifications to your desktop - [Days](https://github.com/paprikka/days) is paprikka's life in days, inspired by Buster Benson's Life in Weeks - [Mofi](https://mofi.loud.red/) is a content-aware fill and trim for music @@ -37,14 +40,14 @@ For all the patches and performance updates from this month, check out the [Svel - [Maktaba](https://www.maktaba.digital/) is a bookmark manager that "you will actually use" - [Whispering](https://github.com/braden-w/whispering-extension) is a Chrome extension that lets you access OpenAI's Whisper API for fast transcription in the browser (including ChatGPT) - [DocuTalk](https://docutalk.co/) is an AI Customer Support chatbot for your website -- [Krello](https://github.com/iamrishupatel/trello-clone) is a Trello clone built with Svelte, Appwrite and Flowbite +- [Krello](https://github.com/iamrishupatel/trello-clone) is a Trello clone built with Svelte, Appwrite and Flowbite - [Been](https://beeneverywhere.net/) is a map builder with travel stats like visited countries, extreme visited points, etc. - [image-to-social-media-thumbnail](https://brody.fyi/tools/image-to-social-media-thumbnail) lets you convert any image to a social media thumbnail - [Svelte Capacitor Store](https://github.com/sdekna/svelte-capacitor-store) is a persistent store that uses capacitor (preferences) storage on native devices, and localStorage otherwise, making it ideal for multi-platform projects - **Learning Resources** _Featuring Svelte Contributors and Ambassadors_ + - [Exploring Svelte 4 w/ Kevin AK: Performance, Compatibility, & Web Component Support | Modern Web Pod](https://www.youtube.com/watch?v=YOL0HGGVib4) by This Dot Media - [Svelte Sirens Stream Design Systems: Lessons Learned](https://www.youtube.com/live/YHZaiIGSqsE?feature=share) featuring Eric Liu, creator of Carbon Components Svelte and the `sveld` docgen library - This Week in Svelte: @@ -52,8 +55,8 @@ _Featuring Svelte Contributors and Ambassadors_ - [2023 July 7](https://www.youtube.com/watch?v=0tq1ph4DDFA) - Svelte 4.0.5, Kit 1.22.1, Svelte 5, local storage and markdown - [2023 July 21](https://www.youtube.com/watch?v=AG4_3kon3zU) - Svelte 4.1.1, SvelteKit 1.22.3, Progressive enhancement - _To Watch/Hear_ + - [What is The Transitional Web? with Chris Ferdinandi](https://www.smashingmagazine.com/2023/07/smashing-podcast-episode-63/?ref=dailydevbytes.com) by Smashing Podcast - [SvelteKit in 100 seconds](https://www.youtube.com/watch?v=H1eEFfAkIik) by Fireship - [Primo V2 Introduction](https://www.youtube.com/watch?v=ThInVXgxJ1Q) by Primo (a [visual CMS](https://primocms.org/) based on Svelte) @@ -62,8 +65,8 @@ _To Watch/Hear_ - [Markdown in SvelteKit with custom Components: mdsvex](https://www.youtube.com/watch?v=VJFkyGd0FEA) by hartenfellerdev - [How To Add Confetti for Svelte and Sveltekit πŸŽ‰](https://www.youtube.com/watch?v=gXtWSb94704) and [Make Your SvelteKit Code 10x Faster With Rust and WebAssembly](https://www.youtube.com/watch?v=Vn2bIv_J_UE) by SvelteRust - _To Read_ + - [SvelteJS: My ecosystem is bigger than yours](https://hackmd.io/@roguegpu/r1RKQMdt3) by roguegpu - [Avoid shared state on the server in SvelteKit](https://blog.aakashgoplani.in/avoid-shared-state-on-the-server-in-sveltekit) by Aakash Goplani - [SvelteKit Fontaine: Reduce Custom Font CLS](https://rodneylab.com/sveltekit-fontaine/) by Rodney Lab @@ -74,8 +77,8 @@ _To Read_ - [Deploying Sveltekit on IIS](https://dev.to/nnutnonn/deploying-sveltekit-on-iis--5gf6) by Nutchapon Makelai - [Streamlined Authentication and Secrets Management](https://eman.hashnode.dev/streamlined-authentication-and-secrets-management) by Eman - **Libraries, Tools & Components** + - [Melt UI](https://github.com/melt-ui/melt-ui) is a set of headless, accessible component builders for Svelte - [MDsveX](https://github.com/pngwn/MDsveX/releases/tag/mdsvex%400.11.0) has been updated to work with Svelte 4 - [Svelte Sonner](https://github.com/wobsoriano/svelte-sonner) is an opinionated toast component for Svelte @@ -85,7 +88,7 @@ _To Read_ - [better-svelte-writable](https://github.com/tnthung/better-svelte-writable) provides a type-safe writable which gives you more control over the container - [Svetch.ts](https://github.com/Bewinxed/svetch#readme) is a client/types/schema/docs generator for your API endpoints - [sveltekit-localize-url](https://github.com/rinart73/sveltekit-localize-url) handles URL localization and routing -- [elegua](https://github.com/howesteve/elegua) is a small, reactive PWA router for Svelte +- [elegua](https://github.com/howesteve/elegua) is a small, reactive PWA router for Svelte - [Molly](https://github.com/renefournier/molly/tree/main) is a bash script and npm module that helps you clean up unused Svelte components in your project - [sveltekit-bot](https://github.com/begoon/sveltekit-bot) is a Telegram bot made with SvelteKit and Vercel diff --git a/documentation/blog/2023-08-31-view-transitions.md b/documentation/blog/2023-08-31-view-transitions.md index 11d0dc6e5e54..3366955ea458 100644 --- a/documentation/blog/2023-08-31-view-transitions.md +++ b/documentation/blog/2023-08-31-view-transitions.md @@ -133,12 +133,15 @@ We can also customize this page transition using CSS animation. In the style blo } :root::view-transition-old(root) { - animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; + animation: + 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; } :root::view-transition-new(root) { - animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier(0.4, 0, 0.2, 1) both - slide-from-right; + animation: + 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, + 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; } ``` @@ -233,17 +236,15 @@ While this may be the safest option, reduced motion does not necessarily mean no ```css @media (prefers-reduced-motion: no-preference) { :root::view-transition-old(root) { - animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both - slide-to-left; + animation: + 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; } :root::view-transition-new(root) { - animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms cubic-bezier( - 0.4, - 0, - 0.2, - 1 - ) both slide-from-right; + animation: + 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, + 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; } } ``` diff --git a/documentation/blog/2023-09-01-whats-new-in-svelte-september-2023.md b/documentation/blog/2023-09-01-whats-new-in-svelte-september-2023.md index 84d0e410d558..f68241735fff 100644 --- a/documentation/blog/2023-09-01-whats-new-in-svelte-september-2023.md +++ b/documentation/blog/2023-09-01-whats-new-in-svelte-september-2023.md @@ -10,9 +10,11 @@ Happy September y'all! With all the [sneak peeks at what's coming soon in Svelte Before we jump in, a warm welcome to the new Svelte Ambassadors: [@cainux](https://github.com/cainux) and [@grischaerbe](https://github.com/grischaerbe)! Welcome to the crew ⛴️ ## What's new in Svelte & Language Tools + - `svelteHTML` has moved from language-tools into Svelte core so that `svelte/element` types will now load correctly (**4.2.0** in Svelte, **107.10.0** in Language Tools) ## What's new in SvelteKit + - `URL` is now accepted in the `redirect` function (**1.23.0**, [Docs](https://kit.svelte.dev/docs/modules#sveltejs-kit-redirect), [#10570](https://github.com/sveltejs/kit/pull/10570)) - Mistyped route filenames will now throw a warning (**1.23.0**, [#10558](https://github.com/sveltejs/kit/pull/10558)) - The new `onNavigate` lifecycle function enables view transitions - Check out the [blog post](https://svelte.dev/blog/view-transitions) for more info (**1.24.0**, [Docs](https://kit.svelte.dev/docs/modules#app-navigation-onnavigate), [#9605](https://github.com/sveltejs/kit/pull/9605)) @@ -24,6 +26,7 @@ But that's just the new features! For all the patches and performance updates fr ## Community Showcase **Apps & Sites built with Svelte** + - [Planet Of The Bugs](https://planetofthebugs.xyz/) allows developers to practice and hone their skill-sets by exposing them to an endless supply of unique, curated issues and bugs from popular open-source projects on Github - [Minesweeper](https://github.com/ProductionPanic/minesweeper/tree/main) is an Android game built with SvelteKit, Capacitor, TailwindCSS and DaisyUI (check it out on the [Google Play Store](https://play.google.com/store/apps/details?id=com.production.panic.minesweeper&pli=1)) - [Pendor](https://www.pendor.ai/) is an AI component generator for Svelte @@ -36,10 +39,9 @@ But that's just the new features! For all the patches and performance updates fr - [Ubuntu 22.04 in Svelte](https://github.com/manhhungpc/ubuntu2204-svelte) aims to replicate the Ubuntu 22.04 desktop experience on the web - [My Queue](https://www.myqueue.so/) creates a playlist of written articles by turning them into audio stories - - **Learning Resources** _Featuring Svelte Contributors and Ambassadors_ + - [Svelte Society - London August 2023](https://www.youtube.com/watch?v=90Psdk5rAnU) - [Building a Blog using SvelteKit and Nostr as a CMS (Part 1](https://kevinak.se/blog/building-a-blog-using-sveltekit-and-nostr-as-a-cms-part-1-1690807337563)) by Kev - [Mastering SvelteKit with Geoff Rich | JS Drops](https://www.youtube.com/watch?v=MaF8kRbHbi0) by This Dot Media @@ -60,15 +62,15 @@ _Featuring Svelte Contributors and Ambassadors_ - [Medusa and SvelteKit E-Commerce Stack](https://www.youtube.com/watch?v=rVVHxows9dY) with Lacey Pevey - [Design Systems: Lessons Learned](https://www.youtube.com/watch?v=YHZaiIGSqsE) with Eric Liu - _To Watch_ + - [Image optimization in SvelteKit with vite-imagetools](https://www.youtube.com/watch?v=285vSLe9LQ8) by hartenfellerdev -- [Building a Todo App with Rust and SvelteKit: Complete Tutorial](https://www.youtube.com/watch?v=w7is2bCTUg0) and [Stripe Payment In SvelteKit With Dynamic Pricing](https://www.youtube.com/watch?v=o8gvCLgz1vs) by SvelteRust +- [Building a Todo App with Rust and SvelteKit: Complete Tutorial](https://www.youtube.com/watch?v=w7is2bCTUg0) and [Stripe Payment In SvelteKit With Dynamic Pricing](https://www.youtube.com/watch?v=o8gvCLgz1vs) by SvelteRust - [Leaflet maps in SvelteKit like it's 2023 (HowTo)](https://www.youtube.com/watch?v=JFctWXEzFZw) -ShipBit - + ShipBit _To Read_ + - [Internationalization in SvelteKit (Series)](https://blog.aakashgoplani.in/series/i18n-in-sveltekit) by Aakash Goplani - [The easiest Chatbot you will ever build](https://simon-prammer.vercel.app/blog/post/sveltekit-langchain) and [Intro to LangSmithπŸ¦œοΈπŸ› οΈ](https://simon-prammer.vercel.app/blog/post/langsmith) by Simon Prammer - [SvelteKit: How to make code-based router, instead of file-based router [August 2023]](https://dev.to/maxcore/sveltekit-how-to-make-code-based-router-instead-of-file-based-router-august-2023-5f9) by Max Core @@ -81,9 +83,8 @@ _To Read_ - [Type-safe User Authentication in SvelteKit with Lucia, Planetscale, and Upstash Redis](https://upstash.com/blog/lucia-sveltekit) by Chris Jayden - [Document Svelte Projects with HTML and JSDoc Comments](https://blog.robino.dev/posts/doc-comments-svelte) by Ross Robino - - **Libraries, Tools & Components** + - [Carta](https://github.com/BearToCode/carta-md) is a lightweight, fast and extensible Svelte Markdown editor and viewer, based on Marked - [Threlte](https://threlte.xyz/), the 3D framework built from Svelte and Three.js has released version 6 - [vite-plugin-web-extension](https://vite-plugin-web-extension.aklinker1.io/guide/frontend-frameworks.html#svelte-integration) works great with Svelte to make building browser extensions easier diff --git a/documentation/blog/2023-10-01-hacktoberfest.md b/documentation/blog/2023-10-01-hacktoberfest.md index c93f48ecedf8..eafab46c0264 100644 --- a/documentation/blog/2023-10-01-hacktoberfest.md +++ b/documentation/blog/2023-10-01-hacktoberfest.md @@ -1,6 +1,6 @@ --- -title: "Hacktoberfest 2023 with SvelteKit" -description: "SvelteKit joins in the Hacktoberfest event in 2023" +title: 'Hacktoberfest 2023 with SvelteKit' +description: 'SvelteKit joins in the Hacktoberfest event in 2023' author: Willow (GHOST) & Braden Wiggins authorURL: https://ghostdev.xyz --- @@ -21,4 +21,4 @@ It's a good idea to communicate clearly and often about what you're trying to so Join our [Discord](https://svelte.dev/chat) and ask questions in the dedicated `#hacktoberfest` channel. We're happy to help you get started! -We're excited to see what you've got in store for SvelteKit! Happy hacking! πŸŽƒ \ No newline at end of file +We're excited to see what you've got in store for SvelteKit! Happy hacking! πŸŽƒ diff --git a/documentation/blog/2023-10-01-whats-new-in-svelte-october-2023.md b/documentation/blog/2023-10-01-whats-new-in-svelte-october-2023.md index 68c9a8b1075c..6e9df4d1d3ba 100644 --- a/documentation/blog/2023-10-01-whats-new-in-svelte-october-2023.md +++ b/documentation/blog/2023-10-01-whats-new-in-svelte-october-2023.md @@ -1,6 +1,6 @@ --- title: "What's new in Svelte: October 2023" -description: "Reactions to Runes and SvelteKit +server fallbacks" +description: 'Reactions to Runes and SvelteKit +server fallbacks' author: Dani Sandoval authorURL: https://dreamindani.com --- @@ -8,10 +8,12 @@ authorURL: https://dreamindani.com Svelte 5 isn't out yet (you can, however, [preview it now](https://svelte-5-preview.vercel.app/)), but that doesn't mean we don't get a sneak peek! Most notably are [Runes](https://svelte.dev/blog/runes) - a simpler way to manage reactive variables in Svelte code. There's lots of links the showcase section for deeper dives on all things Runes, but let's talk about what else been released this month... ## What's new in Svelte & Language Tools + - [Svelte 4.2.1](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md#421) was released with a bunch of fixes to HTML, CSS and sourcemap compilation - [The latest version of the Svelte language tools](https://github.com/sveltejs/language-tools/releases/tag/extensions-107.11.0) [enhances component references](https://github.com/sveltejs/language-tools/pull/2157) in the "Find All References" command, [fixes a persistent issue with automated types going missing](https://github.com/sveltejs/language-tools/pull/2160) after restarting a project and [adds fallback handling to auto-types](https://github.com/sveltejs/language-tools/issues/2156) (like those found in SvelteKit's `+server.js` files) ## What's new in SvelteKit + - `+server.js` now has a catch-all handler that handles all unimplemented valid server requests. Just export a `fallback` function! (**1.25.0**, [Docs](https://kit.svelte.dev/docs/routing#server-fallback-method-handler), [#9755](https://github.com/sveltejs/kit/pull/9755)) That's all for the new features! If you're looking for other patches and performance updates, check out the [SvelteKit CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md). You can also find adapter-specific CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages). @@ -25,6 +27,7 @@ That's all for the new features! If you're looking for other patches and perform Threlte [is throwing a hackathon](https://threlte.xyz/hackathon) (**motion warning for the landing page** - it will respect Reduce Motion settings). The kickoff event is on Sunday, 15 October 2023 16:00 UTC. **Apps & Sites built with Svelte** + - [game-of-life-svelte](https://github.com/StephenGunn/game-of-life-svelte) is a Conway's Game of Life implementation using SvelteKit tech - [Limey](https://limey.io/) is an easy-to-use website builder for simple sites and landing pages - [Appwrite's new landing page](https://appwrite.io/) is now written with SvelteKit (previously covered was their [console UI](https://github.com/appwrite/console) in Svelte) @@ -34,10 +37,10 @@ Threlte [is throwing a hackathon](https://threlte.xyz/hackathon) (**motion warni - [Dithering](https://www.sigrist.dev/dithering) is a tool to dither photos with plenty of options - [Rocky Mountain Slam](https://www.rockymountainslam.com/) is an interactive map to follow Jason Heyn as he attempts to complete the first ever Rocky Mountain Slam ([code](https://github.com/martyheyn/rocky-mnt-slam)) - **Learning Resources** _Featuring Svelte Contributors and Ambassadors_ + - [Svelte 5: Introducing Runes... with Rich Harris](https://www.youtube.com/watch?v=RVnxF3j3N8U) and its follow-up: [Svelte 5 runes: what's the deal with getters and setters?](https://www.youtube.com/watch?v=NR8L5m73dtE) - [Conditionally stream data in SvelteKit](https://geoffrich.net/posts/conditionally-stream-data/) by Geoff Rich - [Svelte Runes Change How Reactivity Works In Svelte](https://www.youtube.com/watch?v=TOTUXiYZhf4), [Make A 3D GitHub Skyline With Svelte To Flex On Your Peers](https://www.youtube.com/watch?v=f9fd1L1FEts), [Simple Page Transitions Using The View Transitions API With SvelteKit](https://www.youtube.com/watch?v=q_2irZO4SS8) and [Using JavaScript Libraries With Svelte Is Easy](https://www.youtube.com/watch?v=N9OjaQ0XtKQ) by Joy of Code @@ -49,16 +52,16 @@ _Featuring Svelte Contributors and Ambassadors_ - [2023 September 15](https://www.youtube.com/watch?v=qH2FavwhU88) - SvelteKit 1.25.0, deserialize form data, magic is coming - [2023 September 22](https://www.youtube.com/watch?v=ek7KE1EDu2w) - Svelte 5 Runes! - _To Watch_ + - [RUNES - Coming in Svelte v5 | My Take](https://www.youtube.com/watch?v=iCK1coch1wA) by Coding Garden - [Don't Sleep on Svelte 5](https://www.youtube.com/watch?v=DgNWssn2vpc) and [Level Up Your Svelte Stores](https://www.youtube.com/watch?v=-vjNAyL2JCQ) by Huntabyte - [Introduction To Svelte Runes (Every Svelte Rune Explained)](https://www.youtube.com/watch?v=gihSBVfyFbI) by Cooper Codes - [Svelte Runes: Awesome or Awful?](https://www.youtube.com/watch?v=JRZCqUOmFwY) by Jack Herrington - [Let Build A Youtube Clone With SvelteKit (Svelte, Tailwind Css, RapidApi, Shadcn Svelte, Axios, etc)](https://www.youtube.com/watch?v=65yMfpsoH4o) by Lawal Adebola - _To Read_ + - [Create the Perfect Sharable Rune in Svelte](https://dev.to/jdgamble555/create-the-perfect-sharable-rune-in-svelte-ij8) by Jonathan Gamble - [You Don't Need to "Learn" Svelte](https://kaviisuri.com/you-dont-need-to-learn-svelte) by KaviiSuri - [Build Websites with Prismic and SvelteKit](https://prismic.io/blog/sveltekit-prismic-integration) by Angelo Ashmore @@ -67,8 +70,8 @@ _To Read_ - [Integrate Storybook in Svelte: Doing it the Svelte-way](https://mainmatter.com/blog/2023/09/18/integrate-storybook-in-svelte-doing-it-the-svelte-way/) by Oscar Dominguez - [The Sveltekit tutorial: Part 1 | What, why, and how?](https://tntman.tech/posts/sveltekit-guide-part-1) by Suyashtnt - **Libraries, Tools & Components** + - [KitForStartups](https://github.com/okupter/kitforstartups) is an Open Source SvelteKit SaaS boilerplate - [SuperNavigation](https://github.com/0xDjole/super-navigation) is a mobile-like navigation UX for the web - [skeleton-material-theme](https://github.com/plasmatech8/skeleton-material-theme) is a Material theme for the Skeleton UI library diff --git a/documentation/blog/2023-11-01-whats-new-in-svelte-november-2023.md b/documentation/blog/2023-11-01-whats-new-in-svelte-november-2023.md index a0d8c7b4d4ca..420030787afb 100644 --- a/documentation/blog/2023-11-01-whats-new-in-svelte-november-2023.md +++ b/documentation/blog/2023-11-01-whats-new-in-svelte-november-2023.md @@ -1,6 +1,6 @@ --- title: "What's new in Svelte: November 2023" -description: "Svelte Summit on Nov 11 and better DevEx for all!" +description: 'Svelte Summit on Nov 11 and better DevEx for all!' author: Dani Sandoval authorURL: https://dreamindani.com --- @@ -12,10 +12,12 @@ Every month, maintainers within the Svelte ecosystem fix bugs, improve performan Let's take a closer look πŸ‘€... ## What's new in Svelte & Language Tools + - Svelte 4.2.2 cleans up a few element-specific features ([Release Notes](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md#422)) - Extensions 107.12.0 improves block folding for functions, if statements and more ([Release Notes](https://github.com/sveltejs/language-tools/releases/tag/extensions-107.12.0), [PR](https://github.com/sveltejs/language-tools/pull/2169)) ## What's new in SvelteKit + - Route parameter types will now be inferred from the applicable matcher's guard check (**kit@1.26.0**, [Docs](https://kit.svelte.dev/docs/advanced-routing#matching), [#10755](https://github.com/sveltejs/kit/pull/10755)) - The new `invalidateAll` boolean option lets you turn on and off the `invalidateAll()` form function within the `enhance` callback (**kit@1.27.0**, [Docs](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance), [#9476](https://github.com/sveltejs/kit/issues/9476)) - The output of the project creation wizard will now reflect which package manager you're using (**create-svelte@5.1.1**, [#10811](https://github.com/sveltejs/kit/pull/10811)) @@ -27,6 +29,7 @@ For a complete list of bug fixes and performance updates, check out the [SvelteK ## Community Showcase **Apps & Sites built with Svelte** + - [4THSEX](https://4thsex.com/) is a creative website for the producer / creative director with the same name - [Syntax.fm](https://github.com/syntaxfm/website) has been redesigned from the ground up with SvelteKit - [GitContext](https://gitcontext.com/) is an early-access tool to improve the process of reviewing code @@ -38,10 +41,10 @@ For a complete list of bug fixes and performance updates, check out the [SvelteK - [Sessionic](https://github.com/navorite/sessionic) is a web extension to easily save browser sessions and manage them - [Pilink](https://pil.ink/) is a "suckless" link shortener - **Learning Resources** _Featuring Svelte Contributors and Ambassadors_ + - [Wolfensvelte 3D and the Svelte Language Server in the Browser with Jason Bradnick](https://www.svelteradio.com/episodes/wolfensvelte-3d-and-the-svelte-language-server-in-the-browser-with-jason-bradnick) by Svelte Radio - [This Is How You Sveltify Any JavaScript Library](https://www.youtube.com/watch?v=RuM4KHTZqD4), [Svelte Actions Make Svelte The Best JavaScript Framework](https://www.youtube.com/watch?v=LGOqg0Y7sAc) and [How Svelte Stores Make State Management Easy](https://www.youtube.com/watch?v=L3uBfL-4dDM) by Joy of Code - Svelte Society Talks @@ -55,13 +58,14 @@ _Featuring Svelte Contributors and Ambassadors_ - [2023 October 20](https://www.youtube.com/watch?v=O13bGtOV-aA) - Kit 1.26.0, Svelte 4.2.2, dynamically-loaded components _To Watch_ + - [SvelteKit & TailwindCSS Tutorial – Build & Deploy a Web Portfolio](https://www.youtube.com/watch?v=-2UjwQzxvBQ) by freeCodeCamp.org - [Why SvelteKit? [Intro to SvelteKit 1.0, part 1]](https://www.youtube.com/watch?v=FP4AylVsiT8) by Jeffrey Codes Javascript - [Build an AI Chatbot - it's that easy?!](https://www.youtube.com/watch?v=FcDj9_590Xg) by Simon Prammer - [Introduction to SvelteKit | FREE 5 HOUR SVELTE WORKSHOP 2023 | Lessons + Coding Exercises](https://www.youtube.com/watch?v=wWRhX_Hzyf8) by This Dot Media - _To Read_ + - [What we learned from migrating our web app to SvelteKit](https://blog.datawrapper.de/migrating-our-web-app-to-sveltekit/) by Marten Sigwart - [SvelteKit Tutorial: Build a Website From Scratch](https://prismic.io/blog/svelte-sveltekit-tutorial) by Prismic has been updated based on the latest SvelteKit features - [Svelte by Example](https://sveltebyexample.com/) is a succinct, gentle introduction to Svelte & SvelteKit @@ -73,6 +77,7 @@ _To Read_ - [Open Neovim From Your Browser - Integrating nvim with Svelte’s Inspector](https://theosteiner.de/open-neovim-from-your-browser-integrating-nvim-with-sveltes-inspector) by Theo Steiner **Libraries, Tools & Components** + - Work to [support SvelteKit in Deno](https://github.com/denoland/deno/issues/17248) is ongoing and [Deno now supports](https://github.com/denoland/deno/pull/21026) creating SvelteKit projects out-of-the-box! - [Purplix](https://github.com/WardPearce/Purplix.io) is an open-source collection of tools dedicated to user privacy and creating trust with your audience - [Obra Icons](https://github.com/Obra-Studio/obra-icons-svelte-public) is a simple, consistent set of icons, perfect for user interfaces diff --git a/documentation/docs/05-misc/04-v4-migration-guide.md b/documentation/docs/05-misc/04-v4-migration-guide.md index 640feb1f82e9..313c4ffb9231 100644 --- a/documentation/docs/05-misc/04-v4-migration-guide.md +++ b/documentation/docs/05-misc/04-v4-migration-guide.md @@ -18,6 +18,7 @@ If you're a library author, consider whether to only support Svelte 4 or if it's ## Browser conditions for bundlers Bundlers must now specify the `browser` condition when building a frontend bundle for the browser. SvelteKit and Vite will handle this automatically for you. If you're using any others, you may observe lifecycle callbacks such as `onMount` not get called and you'll need to update the module resolution configuration. + - For Rollup this is done within the `@rollup/plugin-node-resolve` plugin by setting `browser: true` in its options. See the [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte/#usage) documentation for more details - For wepback this is done by adding `"browser"` to the `conditionNames` array. You may also have to update your `alias` config, if you have set it. See the [`svelte-loader`](https://github.com/sveltejs/svelte-loader#usage) documentation for more details diff --git a/documentation/examples/06-lifecycle/02-update/App.svelte b/documentation/examples/06-lifecycle/02-update/App.svelte index ac23335899db..afc1b29ea8d9 100644 --- a/documentation/examples/06-lifecycle/02-update/App.svelte +++ b/documentation/examples/06-lifecycle/02-update/App.svelte @@ -31,22 +31,28 @@ const reply = eliza.transform(text); - setTimeout(() => { - comments = comments.concat({ - author: 'eliza', - text: '...', - placeholder: true - }); - - setTimeout(() => { - comments = comments - .filter((comment) => !comment.placeholder) - .concat({ - author: 'eliza', - text: reply - }); - }, 500 + Math.random() * 500); - }, 200 + Math.random() * 200); + setTimeout( + () => { + comments = comments.concat({ + author: 'eliza', + text: '...', + placeholder: true + }); + + setTimeout( + () => { + comments = comments + .filter((comment) => !comment.placeholder) + .concat({ + author: 'eliza', + text: reply + }); + }, + 500 + Math.random() * 500 + ); + }, + 200 + Math.random() * 200 + ); } } diff --git a/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte b/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte index 543a7140d38c..356263a91cc0 100644 --- a/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte +++ b/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte @@ -34,8 +34,8 @@ background-size: 1em 1em; font-weight: bold; cursor: pointer; - border:none; - font-size:14px; + border: none; + font-size: 14px; } .expanded { diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte index 05d0820f9eb3..f43f3bb76743 100644 --- a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte +++ b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte @@ -27,10 +27,10 @@

Immutable

{#each todos as todo} - toggle(todo.id)} />
+ toggle(todo.id)} />
{/each}

Mutable

{#each todos as todo} - toggle(todo.id)} />
+ toggle(todo.id)} />
{/each} diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte index 8044f6be4eeb..72d3d83e6b2a 100644 --- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte +++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte @@ -23,8 +23,8 @@ diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte index f92468ab79f7..fb960ead91bd 100644 --- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte +++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte @@ -21,8 +21,8 @@ diff --git a/documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte b/documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte index 8b1569bffb29..76483b567a9c 100644 --- a/documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte +++ b/documentation/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte @@ -13,6 +13,6 @@ diff --git a/documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte b/documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte index d51ca2e06829..17e7c07312c4 100644 --- a/documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte +++ b/documentation/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte @@ -13,6 +13,6 @@ diff --git a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte b/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte index eb3a6f076dc7..e1b0bd43e742 100644 --- a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte +++ b/documentation/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte @@ -34,7 +34,7 @@ padding: 0.2em 1em 0.3em; text-align: center; border-radius: 0.2em; - color:#333333; + color: #333333; background-color: #ffdfd3; } diff --git a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte b/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte index eb3a6f076dc7..e1b0bd43e742 100644 --- a/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte +++ b/documentation/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte @@ -34,7 +34,7 @@ padding: 0.2em 1em 0.3em; text-align: center; border-radius: 0.2em; - color:#333333; + color: #333333; background-color: #ffdfd3; } diff --git a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte index 1677825de4ab..235b53889f29 100644 --- a/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte +++ b/documentation/tutorial/07-lifecycle/03-update/app-a/App.svelte @@ -31,22 +31,28 @@ const reply = eliza.transform(text); - setTimeout(() => { - comments = comments.concat({ - author: 'eliza', - text: '...', - placeholder: true - }); - - setTimeout(() => { - comments = comments - .filter((comment) => !comment.placeholder) - .concat({ - author: 'eliza', - text: reply - }); - }, 500 + Math.random() * 500); - }, 200 + Math.random() * 200); + setTimeout( + () => { + comments = comments.concat({ + author: 'eliza', + text: '...', + placeholder: true + }); + + setTimeout( + () => { + comments = comments + .filter((comment) => !comment.placeholder) + .concat({ + author: 'eliza', + text: reply + }); + }, + 500 + Math.random() * 500 + ); + }, + 200 + Math.random() * 200 + ); } } diff --git a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte index 644810a35eb5..7afb5eb42776 100644 --- a/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte +++ b/documentation/tutorial/07-lifecycle/03-update/app-b/App.svelte @@ -31,22 +31,28 @@ const reply = eliza.transform(text); - setTimeout(() => { - comments = comments.concat({ - author: 'eliza', - text: '...', - placeholder: true - }); - - setTimeout(() => { - comments = comments - .filter((comment) => !comment.placeholder) - .concat({ - author: 'eliza', - text: reply - }); - }, 500 + Math.random() * 500); - }, 200 + Math.random() * 200); + setTimeout( + () => { + comments = comments.concat({ + author: 'eliza', + text: '...', + placeholder: true + }); + + setTimeout( + () => { + comments = comments + .filter((comment) => !comment.placeholder) + .concat({ + author: 'eliza', + text: reply + }); + }, + 500 + Math.random() * 500 + ); + }, + 200 + Math.random() * 200 + ); } } diff --git a/documentation/tutorial/10-transitions/09-key-blocks/text.md b/documentation/tutorial/10-transitions/09-key-blocks/text.md index 0c3c2995a5f0..4154ce5eb676 100644 --- a/documentation/tutorial/10-transitions/09-key-blocks/text.md +++ b/documentation/tutorial/10-transitions/09-key-blocks/text.md @@ -6,9 +6,9 @@ Key blocks destroy and recreate their contents when the value of an expression c ```svelte {#key number} - - {number} - + + {number} + {/key} ``` diff --git a/documentation/tutorial/14-composition/05-slot-props/app-a/App.svelte b/documentation/tutorial/14-composition/05-slot-props/app-a/App.svelte index 9985963d8370..dcf0dacae517 100644 --- a/documentation/tutorial/14-composition/05-slot-props/app-a/App.svelte +++ b/documentation/tutorial/14-composition/05-slot-props/app-a/App.svelte @@ -17,7 +17,7 @@ padding: 1em; margin: 0 0 1em 0; background-color: #eee; - color: black; + color: black; } .active { diff --git a/documentation/tutorial/14-composition/05-slot-props/app-b/App.svelte b/documentation/tutorial/14-composition/05-slot-props/app-b/App.svelte index 4364e013fad0..024de304dcfc 100644 --- a/documentation/tutorial/14-composition/05-slot-props/app-b/App.svelte +++ b/documentation/tutorial/14-composition/05-slot-props/app-b/App.svelte @@ -37,7 +37,7 @@ padding: 1em; margin: 0 0 1em 0; background-color: #eee; - color: black; + color: black; } .active { diff --git a/package.json b/package.json index 4d22d9642a55..9a15be62e658 100644 --- a/package.json +++ b/package.json @@ -4,31 +4,43 @@ "description": "monorepo for svelte and friends", "private": true, "type": "module", + "license": "MIT", + "packageManager": "pnpm@8.6.12", + "engines": { + "pnpm": "^8.0.0" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/sveltejs/svelte.git" + }, "scripts": { - "test": "pnpm test -r --filter=./packages/*", "build": "pnpm -r --filter=./packages/* build", "build:sites": "pnpm -r --filter=./sites/* build", + "preview-site": "npm run build --prefix sites/svelte-5-preview", "check": "cd packages/svelte && pnpm build && cd ../../ && pnpm -r check", - "lint": "cd packages/svelte && pnpm build && cd ../../ && pnpm -r lint", - "format": "pnpm -r format", + "format": "prettier --write --plugin prettier-plugin-svelte .", + "lint": "prettier --check --plugin prettier-plugin-svelte . && eslint ./", + "test": "vitest run --coverage", + "test-output": "vitest run --reporter=json --outputFile=sites/svelte-5-preview/src/routes/status/results.json", "changeset:version": "changeset version && pnpm -r generate:version && git add --all", "changeset:publish": "changeset publish" }, - "repository": { - "type": "git", - "url": "git+https://github.com/sveltejs/svelte.git" - }, - "license": "MIT", "devDependencies": { "@changesets/cli": "^2.26.1", "@svitejs/changesets-changelog-github-compact": "^1.1.0", - "@typescript-eslint/eslint-plugin": "^5.60.0", - "eslint": "^8.44.0", - "eslint-plugin-svelte": "^2.32.2", - "eslint-plugin-unicorn": "^47.0.0", + "@sveltejs/eslint-config": "^6.0.4", + "@types/node": "^18.18.8", + "@typescript-eslint/eslint-plugin": "^5.22.0", + "@vitest/coverage-v8": "^0.34.6", + "concurrently": "^8.2.0", + "cross-env": "^7.0.3", + "eslint": "^8.49.0", + "eslint-plugin-lube": "^0.1.7", + "jsdom": "22.0.0", "playwright": "^1.35.1", - "prettier": "^2.8.8", - "prettier-plugin-svelte": "^2.10.1" - }, - "packageManager": "pnpm@8.6.3" + "prettier": "^3.0.1", + "prettier-plugin-svelte": "^3.0.3", + "typescript": "^5.2.2", + "vitest": "^0.34.6" + } } diff --git a/packages/svelte/.eslintignore b/packages/svelte/.eslintignore deleted file mode 100644 index 67a89ff12c6d..000000000000 --- a/packages/svelte/.eslintignore +++ /dev/null @@ -1,17 +0,0 @@ -**/_actual.js -**/expected.js -_output -test/*/samples/*/output.js - -# automatically generated -internal_exports.js - -# output files -animate/*.js -esing/*.js -internal/*.js -motion/*.js -store/*.js -transition/*.js -index.js -compiler.js diff --git a/packages/svelte/.eslintrc.cjs b/packages/svelte/.eslintrc.cjs deleted file mode 100644 index e504664b8a61..000000000000 --- a/packages/svelte/.eslintrc.cjs +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - root: true, - extends: ['@sveltejs'], - rules: { - '@typescript-eslint/no-non-null-assertion': 'off' - } -}; diff --git a/packages/svelte/.gitignore b/packages/svelte/.gitignore index 2f5d67e7ded7..faa8892951fb 100644 --- a/packages/svelte/.gitignore +++ b/packages/svelte/.gitignore @@ -1,18 +1,12 @@ -*.map -/src/compiler/compile/internal_exports.js -/compiler.cjs -/scratch/ -/test/*/samples/_ -/test/runtime/shards -_actual*.* -_output /types +/compiler.cjs -action.d.ts -animate.d.ts -compiler.d.ts -easing.d.ts -index.d.ts -motion.d.ts -store.d.ts -transition.d.ts +/action.d.ts +/animate.d.ts +/compiler.d.ts +/easing.d.ts +/index.d.ts +/legacy.d.ts +/motion.d.ts +/store.d.ts +/transition.d.ts diff --git a/packages/svelte/.prettierignore b/packages/svelte/.prettierignore deleted file mode 100644 index fef52b1e8f7e..000000000000 --- a/packages/svelte/.prettierignore +++ /dev/null @@ -1,22 +0,0 @@ -/* -!/elements -!/scripts -!/src -src/compiler/compile/internal_exports.js -src/shared/version.js -!/test -!documentation -!sites -sites/svelte.dev/src/lib/generated/*.js -sites/svelte.dev/.svelte-kit -sites/svelte.dev/.vercel -/test/**/*.svelte -/test/**/_expected* -/test/**/_actual* -/test/**/expected* -/test/**/_output -/test/**/shards/*.test.js -/test/hydration/samples/raw-repair/_after.html -/types -!rollup.config.js -!vitest.config.js diff --git a/packages/svelte/CHANGELOG-pre-5.md b/packages/svelte/CHANGELOG-pre-5.md new file mode 100644 index 000000000000..07edffc2b741 --- /dev/null +++ b/packages/svelte/CHANGELOG-pre-5.md @@ -0,0 +1,2926 @@ +# svelte + +## 4.2.3 + +### Patch Changes + +- fix: improve a11y-click-events-have-key-events message ([#9358](https://github.com/sveltejs/svelte/pull/9358)) + +- fix: more robust hydration of html tag ([#9184](https://github.com/sveltejs/svelte/pull/9184)) + +## 4.2.2 + +### Patch Changes + +- fix: support camelCase properties on custom elements ([#9328](https://github.com/sveltejs/svelte/pull/9328)) + +- fix: add missing plaintext-only value to contenteditable type ([#9242](https://github.com/sveltejs/svelte/pull/9242)) + +- chore: upgrade magic-string to 0.30.4 ([#9292](https://github.com/sveltejs/svelte/pull/9292)) + +- fix: ignore trailing comments when comparing nodes ([#9197](https://github.com/sveltejs/svelte/pull/9197)) + +## 4.2.1 + +### Patch Changes + +- fix: update style directive when style attribute is present and is updated via an object prop ([#9187](https://github.com/sveltejs/svelte/pull/9187)) + +- fix: css sourcemap generation with unicode filenames ([#9120](https://github.com/sveltejs/svelte/pull/9120)) + +- fix: do not add module declared variables as dependencies ([#9122](https://github.com/sveltejs/svelte/pull/9122)) + +- fix: handle `svelte:element` with dynamic this and spread attributes ([#9112](https://github.com/sveltejs/svelte/pull/9112)) + +- fix: silence false positive reactive component warning ([#9094](https://github.com/sveltejs/svelte/pull/9094)) + +- fix: head duplication when binding is present ([#9124](https://github.com/sveltejs/svelte/pull/9124)) + +- fix: take custom attribute name into account when reflecting property ([#9140](https://github.com/sveltejs/svelte/pull/9140)) + +- fix: add `indeterminate` to the list of HTMLAttributes ([#9180](https://github.com/sveltejs/svelte/pull/9180)) + +- fix: recognize option value on spread attribute ([#9125](https://github.com/sveltejs/svelte/pull/9125)) + +## 4.2.0 + +### Minor Changes + +- feat: move `svelteHTML` from language-tools into core to load the correct `svelte/element` types ([#9070](https://github.com/sveltejs/svelte/pull/9070)) + +## 4.1.2 + +### Patch Changes + +- fix: allow child element with slot attribute within svelte:element ([#9038](https://github.com/sveltejs/svelte/pull/9038)) + +- fix: Add data-\* to svg attributes ([#9036](https://github.com/sveltejs/svelte/pull/9036)) + +## 4.1.1 + +### Patch Changes + +- fix: `svelte:component` spread props change not picked up ([#9006](https://github.com/sveltejs/svelte/pull/9006)) + +## 4.1.0 + +### Minor Changes + +- feat: add ability to extend custom element class ([#8991](https://github.com/sveltejs/svelte/pull/8991)) + +### Patch Changes + +- fix: ensure `svelte:component` evaluates props once ([#8946](https://github.com/sveltejs/svelte/pull/8946)) + +- fix: remove `let:variable` slot bindings from select binding dependencies ([#8969](https://github.com/sveltejs/svelte/pull/8969)) + +- fix: handle destructured primitive literals ([#8871](https://github.com/sveltejs/svelte/pull/8871)) + +- perf: optimize imports that are not mutated or reassigned ([#8948](https://github.com/sveltejs/svelte/pull/8948)) + +- fix: don't add accessor twice ([#8996](https://github.com/sveltejs/svelte/pull/8996)) + +## 4.0.5 + +### Patch Changes + +- fix: generate type definition with nullable types ([#8924](https://github.com/sveltejs/svelte/pull/8924)) + +## 4.0.4 + +### Patch Changes + +- fix: claim svg tags in raw mustache tags correctly ([#8910](https://github.com/sveltejs/svelte/pull/8910)) + +- fix: repair invalid raw html content during hydration ([#8912](https://github.com/sveltejs/svelte/pull/8912)) + +## 4.0.3 + +### Patch Changes + +- fix: handle falsy srcset values ([#8901](https://github.com/sveltejs/svelte/pull/8901)) + +## 4.0.2 + +### Patch Changes + +- fix: reflect all custom element prop updates back to attribute ([#8898](https://github.com/sveltejs/svelte/pull/8898)) + +- fix: shrink custom element baseline a bit ([#8858](https://github.com/sveltejs/svelte/pull/8858)) + +- fix: use non-destructive hydration for all `@html` tags ([#8880](https://github.com/sveltejs/svelte/pull/8880)) + +- fix: align `disclose-version` exports specification ([#8874](https://github.com/sveltejs/svelte/pull/8874)) + +- fix: check srcset when hydrating to prevent needless requests ([#8868](https://github.com/sveltejs/svelte/pull/8868)) + +## 4.0.1 + +### Patch Changes + +- fix: ensure identifiers in destructuring contexts don't clash with existing ones ([#8840](https://github.com/sveltejs/svelte/pull/8840)) + +- fix: ensure `createEventDispatcher` and `ActionReturn` work with types from generic function parameters ([#8872](https://github.com/sveltejs/svelte/pull/8872)) + +- fix: apply transition to `` with local transition ([#8865](https://github.com/sveltejs/svelte/pull/8865)) + +- fix: relax a11y "no redundant role" rule for li, ul, ol ([#8867](https://github.com/sveltejs/svelte/pull/8867)) + +- fix: remove tsconfig.json from published package ([#8859](https://github.com/sveltejs/svelte/pull/8859)) + +## 4.0.0 + +### Major Changes + +- breaking: Minimum supported Node version is now Node 16 ([#8566](https://github.com/sveltejs/svelte/pull/8566)) + +- breaking: Minimum supported webpack version is now webpack 5 ([#8515](https://github.com/sveltejs/svelte/pull/8515)) + +- breaking: Bundlers must specify the `browser` condition when building a frontend bundle for the browser ([#8516](https://github.com/sveltejs/svelte/pull/8516)) + +- breaking: Minimum supported vite-plugin-svelte version is now 2.4.1. SvelteKit users can upgrade to 1.20.0 or newer to ensure a compatible version ([#8516](https://github.com/sveltejs/svelte/pull/8516)) + +- breaking: Minimum supported `rollup-plugin-svelte` version is now 7.1.5 ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf)) + +- breaking: Minimum supported `svelte-loader` is now 3.1.8 ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf)) + +- breaking: Minimum supported TypeScript version is now TypeScript 5 (it will likely work with lower versions, but we make no guarantees about that) ([#8488](https://github.com/sveltejs/svelte/pull/8488)) + +- breaking: Remove `svelte/register` hook, CJS runtime version and CJS compiler output ([#8613](https://github.com/sveltejs/svelte/pull/8613)) + +- breaking: Stricter types for `createEventDispatcher` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224)) + +- breaking: Stricter types for `Action` and `ActionReturn` (see PR for migration instructions) ([#7442](https://github.com/sveltejs/svelte/pull/7442)) + +- breaking: Stricter types for `onMount` - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions + (see PR for migration instructions) ([#8136](https://github.com/sveltejs/svelte/pull/8136)) + +- breaking: Overhaul and drastically improve creating custom elements with Svelte (see PR for list of changes and migration instructions) ([#8457](https://github.com/sveltejs/svelte/pull/8457)) + +- breaking: Deprecate `SvelteComponentTyped` in favor of `SvelteComponent` ([#8512](https://github.com/sveltejs/svelte/pull/8512)) + +- breaking: Make transitions local by default to prevent confusion around page navigations ([#6686](https://github.com/sveltejs/svelte/issues/6686)) + +- breaking: Error on falsy values instead of stores passed to `derived` ([#7947](https://github.com/sveltejs/svelte/pull/7947)) + +- breaking: Custom store implementers now need to pass an `update` function additionally to the `set` function ([#6750](https://github.com/sveltejs/svelte/pull/6750)) + +- breaking: Do not expose default slot bindings to named slots and vice versa ([#6049](https://github.com/sveltejs/svelte/pull/6049)) + +- breaking: Change order in which preprocessors are applied ([#8618](https://github.com/sveltejs/svelte/pull/8618)) + +- breaking: The runtime now makes use of `classList.toggle(name, boolean)` which does not work in very old browsers ([#8629](https://github.com/sveltejs/svelte/pull/8629)) + +- breaking: apply `inert` to outroing elements ([#8628](https://github.com/sveltejs/svelte/pull/8628)) + +- breaking: use `CustomEvent` constructor instead of deprecated `createEvent` method ([#8775](https://github.com/sveltejs/svelte/pull/8775)) + +### Minor Changes + +- Add a way to modify attributes for script/style preprocessors ([#8618](https://github.com/sveltejs/svelte/pull/8618)) + +- Improve hydration speed by adding `data-svelte-h` attribute to detect unchanged HTML elements ([#7426](https://github.com/sveltejs/svelte/pull/7426)) + +- Add `a11y no-noninteractive-element-interactions` rule ([#8391](https://github.com/sveltejs/svelte/pull/8391)) + +- Add `a11y-no-static-element-interactions`rule ([#8251](https://github.com/sveltejs/svelte/pull/8251)) + +- Allow `#each` to iterate over iterables like `Set`, `Map` etc ([#7425](https://github.com/sveltejs/svelte/issues/7425)) + +- Improve duplicate key error for keyed `each` blocks ([#8411](https://github.com/sveltejs/svelte/pull/8411)) + +- Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823)) + +- feat: add version info to `window`. You can opt out by setting `discloseVersion` to `false` in the compiler options ([#8761](https://github.com/sveltejs/svelte/pull/8761)) + +- feat: smaller minified output for destructor chunks ([#8763](https://github.com/sveltejs/svelte/pull/8763)) + +### Patch Changes + +- Bind `null` option and input values consistently ([#8312](https://github.com/sveltejs/svelte/issues/8312)) + +- Allow `$store` to be used with changing values including nullish values ([#7555](https://github.com/sveltejs/svelte/issues/7555)) + +- Initialize stylesheet with `/* empty */` to enable setting CSP directive that also works in Safari ([#7800](https://github.com/sveltejs/svelte/pull/7800)) + +- Treat slots as if they don't exist when using CSS adjacent and general sibling combinators ([#8284](https://github.com/sveltejs/svelte/issues/8284)) + +- Fix transitions so that they don't require a `style-src 'unsafe-inline'` Content Security Policy (CSP) ([#6662](https://github.com/sveltejs/svelte/issues/6662)). + +- Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800)) + +- Improve error message when trying to use `animate:` directives on inline components ([#8641](https://github.com/sveltejs/svelte/issues/8641)) + +- fix: export ComponentType from `svelte` entrypoint ([#8578](https://github.com/sveltejs/svelte/pull/8578)) + +- fix: never use html optimization for mustache tags in hydration mode ([#8744](https://github.com/sveltejs/svelte/pull/8744)) + +- fix: derived store types ([#8578](https://github.com/sveltejs/svelte/pull/8578)) + +- Generate type declarations with dts-buddy ([#8578](https://github.com/sveltejs/svelte/pull/8578)) + +- fix: ensure types are loaded with all TS settings ([#8721](https://github.com/sveltejs/svelte/pull/8721)) + +- fix: account for preprocessor source maps when calculating meta info ([#8778](https://github.com/sveltejs/svelte/pull/8778)) + +- chore: deindent cjs output for compiler ([#8785](https://github.com/sveltejs/svelte/pull/8785)) + +- warn on boolean compilerOptions.css ([#8710](https://github.com/sveltejs/svelte/pull/8710)) + +- fix: export correct SvelteComponent type ([#8721](https://github.com/sveltejs/svelte/pull/8721)) + +## 4.0.0-next.3 + +### Patch Changes + +- feat: smaller minified output for destructor chunks ([#8763](https://github.com/sveltejs/svelte/pull/8763)) + +- breaking: use `CustomEvent` constructor instead of deprecated `createEvent` method ([#8775](https://github.com/sveltejs/svelte/pull/8775)) + +- fix: account for preprocessor source maps when calculating meta info ([#8778](https://github.com/sveltejs/svelte/pull/8778)) + +- chore: deindent cjs output for compiler ([#8785](https://github.com/sveltejs/svelte/pull/8785)) + +- feat: add version info to `window`. You can opt out by setting `discloseVersion` to `false` in the compiler options ([#8761](https://github.com/sveltejs/svelte/pull/8761)) + +## 4.0.0-next.2 + +### Patch Changes + +- fix: never use html optimization for mustache tags in hydration mode ([#8744](https://github.com/sveltejs/svelte/pull/8744)) + +- fix: ensure types are loaded with all TS settings ([#8721](https://github.com/sveltejs/svelte/pull/8721)) + +- warn on boolean compilerOptions.css ([#8710](https://github.com/sveltejs/svelte/pull/8710)) + +- fix: export correct SvelteComponent type ([#8721](https://github.com/sveltejs/svelte/pull/8721)) + +## 4.0.0-next.1 + +### Patch Changes + +- fix: export ComponentType from `svelte` entrypoint ([#8694](https://github.com/sveltejs/svelte/pull/8694)) + +- fix: derived store types ([#8700](https://github.com/sveltejs/svelte/pull/8700)) + +- Generate type declarations with dts-buddy ([#8702](https://github.com/sveltejs/svelte/pull/8702)) + +## 4.0.0-next.0 + +### Major Changes + +- breaking: Minimum supported Node version is now Node 16 ([#8566](https://github.com/sveltejs/svelte/pull/8566)) +- breaking: Minimum supported webpack version is now webpack 5 ([#8515](https://github.com/sveltejs/svelte/pull/8515)) +- breaking: Bundlers must specify the `browser` condition when building a frontend bundle for the browser ([#8516](https://github.com/sveltejs/svelte/pull/8516)) +- breaking: Minimum supported vite-plugin-svelte version is now 2.4.1. SvelteKit users can upgrade to 1.20.0 or newer to ensure a compatible version ([#8516](https://github.com/sveltejs/svelte/pull/8516)) +- breaking: Minimum supported `rollup-plugin-svelte` version is now 7.1.5 ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf)) +- breaking: Minimum supported `svelte-loader` is now 3.1.8 ([198dbcf](https://github.com/sveltejs/svelte/commit/198dbcf)) +- breaking: Minimum supported TypeScript version is now TypeScript 5 (it will likely work with lower versions, but we make no guarantees about that) ([#8488](https://github.com/sveltejs/svelte/pull/8488)) +- breaking: Remove `svelte/register` hook, CJS runtime version and CJS compiler output ([#8613](https://github.com/sveltejs/svelte/pull/8613)) +- breaking: Stricter types for `createEventDispatcher` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224)) +- breaking: Stricter types for `Action` and `ActionReturn` (see PR for migration instructions) ([#7442](https://github.com/sveltejs/svelte/pull/7442)) +- breaking: Stricter types for `onMount` - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions (see PR for migration instructions) ([#8136](https://github.com/sveltejs/svelte/pull/8136)) +- breaking: Overhaul and drastically improve creating custom elements with Svelte (see PR for list of changes and migration instructions) ([#8457](https://github.com/sveltejs/svelte/pull/8457)) +- breaking: Deprecate `SvelteComponentTyped` in favor of `SvelteComponent` ([#8512](https://github.com/sveltejs/svelte/pull/8512)) +- breaking: Make transitions local by default to prevent confusion around page navigations ([#6686](https://github.com/sveltejs/svelte/issues/6686)) +- breaking: Error on falsy values instead of stores passed to `derived` ([#7947](https://github.com/sveltejs/svelte/pull/7947)) +- breaking: Custom store implementers now need to pass an `update` function additionally to the `set` function ([#6750](https://github.com/sveltejs/svelte/pull/6750)) +- breaking: Do not expose default slot bindings to named slots and vice versa ([#6049](https://github.com/sveltejs/svelte/pull/6049)) +- breaking: Change order in which preprocessors are applied ([#8618](https://github.com/sveltejs/svelte/pull/8618)) +- breaking: The runtime now makes use of `classList.toggle(name, boolean)` which does not work in very old browsers ([#8629](https://github.com/sveltejs/svelte/pull/8629)) +- breaking: apply `inert` to outroing elements ([#8627](https://github.com/sveltejs/svelte/pull/8627)) + +### Minor Changes + +- Add a way to modify attributes for script/style preprocessors ([#8618](https://github.com/sveltejs/svelte/pull/8618)) +- Improve hydration speed by adding `data-svelte-h` attribute to detect unchanged HTML elements ([#7426](https://github.com/sveltejs/svelte/pull/7426)) +- Add `a11y no-noninteractive-element-interactions` rule ([#8391](https://github.com/sveltejs/svelte/pull/8391)) +- Add `a11y-no-static-element-interactions`rule ([#8251](https://github.com/sveltejs/svelte/pull/8251)) +- Allow `#each` to iterate over iterables like `Set`, `Map` etc ([#7425](https://github.com/sveltejs/svelte/issues/7425)) +- Improve duplicate key error for keyed `each` blocks ([#8411](https://github.com/sveltejs/svelte/pull/8411)) +- Warn about `:` in attributes and props to prevent ambiguity with Svelte directives ([#6823](https://github.com/sveltejs/svelte/issues/6823)) + +### Patch Changes + +- Bind `null` option and input values consistently ([#8312](https://github.com/sveltejs/svelte/issues/8312)) +- Allow `$store` to be used with changing values including nullish values ([#7555](https://github.com/sveltejs/svelte/issues/7555)) +- Initialize stylesheet with `/* empty */` to enable setting CSP directive that also works in Safari ([#7800](https://github.com/sveltejs/svelte/pull/7800)) +- Treat slots as if they don't exist when using CSS adjacent and general sibling combinators ([#8284](https://github.com/sveltejs/svelte/issues/8284)) +- Fix transitions so that they don't require a `style-src 'unsafe-inline'` Content Security Policy (CSP) ([#6662](https://github.com/sveltejs/svelte/issues/6662)). +- Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800)) +- Improve error message when trying to use `animate:` directives on inline components ([#8641](https://github.com/sveltejs/svelte/issues/8641)) + +## 3.59.2 + +- Fix escaping `', - test({ assert, target }) { - const textarea = target.querySelector('textarea'); - assert.ok(textarea.readOnly === false); - } -}; diff --git a/packages/svelte/test/runtime/samples/attribute-boolean-hidden/_config.js b/packages/svelte/test/runtime/samples/attribute-boolean-hidden/_config.js deleted file mode 100644 index 5a6d28c08a5c..000000000000 --- a/packages/svelte/test/runtime/samples/attribute-boolean-hidden/_config.js +++ /dev/null @@ -1,10 +0,0 @@ -export default { - get props() { - return { hidden: true }; - }, - html: '