diff --git a/.changeset/proud-cycles-hunt.md b/.changeset/proud-cycles-hunt.md deleted file mode 100644 index 5f0f88cb69..0000000000 --- a/.changeset/proud-cycles-hunt.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: align `disclose-version` exports specification diff --git a/.changeset/six-teachers-divide.md b/.changeset/six-teachers-divide.md deleted file mode 100644 index a11f257fef..0000000000 --- a/.changeset/six-teachers-divide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: check srcset when hydrating to prevent needless requests diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c92e8a5355..b8e948b3a4 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,7 +7,7 @@ permissions: contents: read # to fetch code (actions/checkout) env: - # We only install Chromium manually + # We only install Chromium manually PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1' jobs: diff --git a/documentation/blog/2020-07-17-svelte-and-typescript.md b/documentation/blog/2020-07-17-svelte-and-typescript.md index bcca836d4e..a6e07242ec 100644 --- a/documentation/blog/2020-07-17-svelte-and-typescript.md +++ b/documentation/blog/2020-07-17-svelte-and-typescript.md @@ -16,13 +16,9 @@ We think it'll give you a much nicer development experience — one that also sc ## Try it now -You can start a new Svelte TypeScript project using the [normal template](https://github.com/sveltejs/template) and by running `node scripts/setupTypeScript.js` before you do anything else: +You can start a new Svelte TypeScript project using Svelte's official scaffolding CLI by running `npm create svelte@latest` and following the prompts. This sets up a new SvelteKit project for you. -```bash -npx degit sveltejs/template svelte-typescript-app -cd svelte-typescript-app -node scripts/setupTypeScript.js -``` +Alternatively you can run `npm create vite@latest myapp -- --template svelte-ts` to scaffold a Vite project using Svelte and TypeScript. If you're a VS Code user, make sure you're using the (new) [official extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which replaces the popular extension by James Birtles. Later in this blog post, we'll detail the individual steps involved in using TypeScript in an existing Svelte project. 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 new file mode 100644 index 0000000000..afb39a5539 --- /dev/null +++ b/documentation/blog/2023-07-01-whats-new-in-svelte-july-2023.md @@ -0,0 +1,95 @@ +--- +title: "What's new in Svelte: July 2023" +description: "Svelte 4.0, new website and a tour around the community" +author: Dani Sandoval +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. + +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)) + +For adapter-specific changes, check out the CHANGELOGs in each of [the `adapter` directories](https://github.com/sveltejs/kit/tree/master/packages). + +--- + +## 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 +- [The Quest to Replace Passwords](https://notes.ekzhang.com/papers/passwords) features an interactive comparison visualization for all the popular password management tools +- [audiogest](https://audiogest.app/en) lets you turn speech to text & summarize any audio in one click +- [heroify](https://www.heroify.lol/) generates 3D graphics for your website with AI +- [Diesel Legacy: The Brazen Age](https://store.steampowered.com/app/1959140/Diesel_Legacy_The_Brazen_Age/) is a fighting game whose leaderboard and profile pages were all built in Svelte +- [markmyimages](https://www.markmyimages.com/) is a watermarking tool with bulk image resize, rename, effects, and more +- [md.robino.dev](https://github.com/rossrobino/md) is a web based markdown editor +- [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 +- [Exposing Svelte: Between Two Nerds](https://www.youtube.com/watch?v=kAfotLrebhY) is a comedic conversation between Rich Harris and Dax Raad +- [Community Tutorial: Self-hosting SvelteKit with a VPS, Docker, CapRover and GitHub Actions](https://www.youtube.com/watch?v=KbIFRVvdgA8) with Stanislav Khromov +- [SvelteKit and Storybook](https://www.youtube.com/watch?v=1wH7rR7hZlg) with Jeppe Reinhold +- This Week in Svelte: + - [2023 June 2](https://www.youtube.com/watch?v=B2AOYWs6eko) - SvelteKit 1.20.1, Svelte 4 pre-release, Headless UI libraries + - [2023 June 9](https://www.youtube.com/watch?v=OG70PKD0hEU) - Updates, Self-hosting SvelteKit, Passing styles to children + - [2023 June 16](https://www.youtube.com/watch?v=GNEbC5K34Po) - Svelte 4 next.1, how to create a hamburger menu, group layouts + - [2023 June 23](https://www.youtube.com/watch?v=o-qnnbMbmE4) - Svelte 4, Popovers and hover, Real Time requests with SvelteKit +- Svelte Radio + - [SvelteLab - a Svelte REPL for SvelteKit](https://www.svelteradio.com/episodes/sveltelab-a-svelte-repl-for-sveltekit-with-antonio-and-paolo) with Antonio and Paolo + - [Svelte Radio Live - Svelte 4 Summer Special](https://www.youtube.com/watch?v=72TIVhRtyWE) with Simon and Puru +- [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 +- [Learning by doing - Vue devs build a Svelte Single Page App](https://www.blackspike.com/blog/learning-svelte-by-building-a-single-page-application/) by Black Spike +- [Generate Breadcrumb and Navigation in SvelteKit](https://blog.aakashgoplani.in/generate-breadcrumb-and-navigation-in-sveltekit), [SvelteKit Authentication using SvelteKitAuth and OAuth providers: A Comprehensive Guide](https://blog.aakashgoplani.in/sveltekit-authentication-using-sveltekitauth-and-oauth-providers-a-comprehensive-guide) and [SvelteKitAuth with Salesforce OAuth provider](https://blog.aakashgoplani.in/sveltekitauth-with-salesforce-oauth-provider) by Aakash Goplani +- [Instantly find and remove Svelte component orphans](https://node-jz.medium.com/instantly-find-and-remove-svelte-component-orphans-9b2838ea2d99) by Jeremy Zaborowski +- [Migration Guide from Routify to SvelteKit Router](https://blog.aakashgoplani.in/migration-guide-from-routify-to-sveltekit-router) by Aakash Goplani +- [Creating 3D data visualization using Threlte and D3](https://www.datavizcubed.com/) by DataViz Cubed +- [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 +- [svelte-section-list](https://github.com/TIKramer/svelte-section-list) is a headless Svelte npm package that provides drag-and-drop functionality for managing items and sections +- [WebStorm](https://twitter.com/tomblachut/status/1669759906579185681?t=6WzLPUi65wsLtbVvYky7UQ&s=19) is starting to use the Svelte Language Server in its IDE tooling +- [shadcn-svelte](https://www.shadcn-svelte.com/) is an unofficial port of [shadcn/ui](https://github.com/shadcn/ui) to Svelte that makes it easy to build your component library from common base components +- [sveltekit-multibuild](https://github.com/MrNNP/sveltekit-multibuild) is a starter repo to create Android apps, web sites, desktop apps, and Chrome extensions automatically +- [SvelteKit AI Chatbot](https://github.com/jianyuan/sveltekit-ai-chatbot) is an open-source AI chatbot app template built with SvelteKit, the Vercel AI SDK, OpenAI, and Vercel KV. +- [KitAI](https://kit-ai.vercel.app/) provides batteries-included AI templates for SvelteKit and Next.js +- [Svelte Form Builder](https://github.com/pragmatic-engineering/svelte-form-builder-community) is a no-code drag&drop form builder for Svelte + +Thanks for reading! As always, feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte). + +Until next time 👋 diff --git a/documentation/docs/05-misc/04-v4-migration-guide.md b/documentation/docs/05-misc/04-v4-migration-guide.md index 7da5f3e118..cbde43c6f6 100644 --- a/documentation/docs/05-misc/04-v4-migration-guide.md +++ b/documentation/docs/05-misc/04-v4-migration-guide.md @@ -121,7 +121,18 @@ The migration script will do both automatically for you. ([#8512](https://github ## Transitions are local by default -Transitions are now local by default to prevent confusion around page navigations. To make them global, add the `|global` modifier. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686)) +Transitions are now local by default to prevent confusion around page navigations. "local" means that a transition will not play if it's within a nested control flow block (`each/if/await/key`) and not the direct parent block but a block above it is created/destroyed. In the following example, the `slide` intro animation will only play when `success` goes from `false` to `true`, but it will _not_ play when `show` goes from `false` to `true`: + +```svelte +{#if show} + ... + {#if success} +
Success
+ {/each} +{/if} +``` + +To make transitions global, add the `|global` modifier - then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686)) ## Default slot bindings @@ -152,7 +163,7 @@ The order in which preprocessors are applied has changed. Now, preprocessors are - the `inert` attribute is now applied to outroing elements to make them invisible to assistive technology and prevent interaction. ([#8628](https://github.com/sveltejs/svelte/pull/8628)) - the runtime now uses `classList.toggle(name, boolean)` which may not work in very old browsers. Consider using a [polyfill](https://github.com/eligrey/classList.js) if you need to support these browsers. ([#8629](https://github.com/sveltejs/svelte/issues/8629)) -- the runtime now uses the `CustomElement` constructor which may not work in very old browsers. Consider using a [polyfill](https://github.com/theftprevention/event-constructor-polyfill/tree/master) if you need to support these browsers. ([#8775](https://github.com/sveltejs/svelte/pull/8775)) +- the runtime now uses the `CustomEvent` constructor which may not work in very old browsers. Consider using a [polyfill](https://github.com/theftprevention/event-constructor-polyfill/tree/master) if you need to support these browsers. ([#8775](https://github.com/sveltejs/svelte/pull/8775)) - people implementing their own stores from scratch using the `StartStopNotifier` interface (which is passed to the create function of `writable` etc) from `svelte/store` now need to pass an update function in addition to the set function. This has no effect on people using stores or creating stores using the existing Svelte stores. ([#6750](https://github.com/sveltejs/svelte/issues/6750)) - `derived` will now throw an error on falsy values instead of stores passed to it. ([#7947](https://github.com/sveltejs/svelte/issues/7947)) - type definitions for `svelte/internal` were removed to further discourage usage of those internal methods which are not public API. Most of these will likely change for Svelte 5 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 836e573dc6..8b1569bffb 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 @@ -10,3 +10,9 @@ Clicked {count} {count === 1 ? 'time' : 'times'} + + 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 382b2ee9e0..d51ca2e068 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 @@ -10,3 +10,9 @@ Clicked {count} {count === 1 ? 'time' : 'times'} + + diff --git a/documentation/tutorial/05-events/02-inline-handlers/text.md b/documentation/tutorial/05-events/02-inline-handlers/text.md index 2fe1c48e2c..99ae43c429 100644 --- a/documentation/tutorial/05-events/02-inline-handlers/text.md +++ b/documentation/tutorial/05-events/02-inline-handlers/text.md @@ -10,6 +10,4 @@ You can also declare event handlers inline: ``` -The quote marks are optional, but they're helpful for syntax highlighting in some environments. - > 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. diff --git a/package.json b/package.json index 47afc17e58..e0f1bdcfd9 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "build": "pnpm -r --filter=./packages/* build", "build:sites": "pnpm -r --filter=./sites/* build", "check": "cd packages/svelte && pnpm build && cd ../../ && pnpm -r check", - "lint": "pnpm -r lint", + "lint": "cd packages/svelte && pnpm build && cd ../../ && pnpm -r lint", "format": "pnpm -r format", "changeset:version": "changeset version && pnpm -r generate:version && git add --all", "changeset:publish": "changeset publish" diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index ffa517208d..e0881bb865 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,25 @@ # svelte +## 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 diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 0b554d0efa..cc4060a9a8 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "4.0.1", + "version": "4.0.3", "description": "Cybernetically enhanced web apps", "type": "module", "module": "src/runtime/index.js", @@ -74,7 +74,7 @@ "types": "types/index.d.ts", "scripts": { "format": "prettier . --cache --plugin-search-dir=. --write", - "check": "prettier . --cache --plugin-search-dir=. --check", + "check": "tsc --noEmit", "test": "vitest run && echo \"manually check that there are no type errors in test/types by opening the files in there\"", "build": "rollup -c && pnpm types", "generate:version": "node ./scripts/generate-version.js", @@ -82,7 +82,7 @@ "posttest": "agadoo src/internal/index.js", "prepublishOnly": "pnpm build", "types": "node ./scripts/generate-dts.js", - "lint": "eslint \"{src,test}/**/*.{ts,js}\" --cache" + "lint": "prettier . --cache --plugin-search-dir=. --check && eslint \"{src,test}/**/*.{ts,js}\" --cache" }, "repository": { "type": "git", diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/RawMustacheTag.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/RawMustacheTag.js index 11a838ab8e..cc382a9b0b 100644 --- a/packages/svelte/src/compiler/compile/render_dom/wrappers/RawMustacheTag.js +++ b/packages/svelte/src/compiler/compile/render_dom/wrappers/RawMustacheTag.js @@ -26,7 +26,7 @@ export default class RawMustacheTagWrapper extends Tag { render(block, parent_node, _parent_nodes) { const in_head = is_head(parent_node); const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next; - if (can_use_innerhtml) { + if (can_use_innerhtml && !this.renderer.options.hydratable) { /** @param {import('estree').Node} content */ const insert = (content) => b`${parent_node}.innerHTML = ${content};`[0]; const { init } = this.rename_this_method(block, (content) => insert(content)); diff --git a/packages/svelte/src/runtime/internal/Component.js b/packages/svelte/src/runtime/internal/Component.js index a1da213da3..4733b1d745 100644 --- a/packages/svelte/src/runtime/internal/Component.js +++ b/packages/svelte/src/runtime/internal/Component.js @@ -13,7 +13,9 @@ import { start_hydrating, end_hydrating, get_custom_elements_slots, - insert + insert, + element, + attr } from './dom.js'; import { transition_in } from './transitions.js'; @@ -157,23 +159,29 @@ export let SvelteElement; if (typeof HTMLElement === 'function') { SvelteElement = class extends HTMLElement { - $$componentCtor; - $$slots; - $$component; - $$connected = false; - $$data = {}; - $$reflecting = false; - /** @type {Recordhi
-