Merge pull request #605 from tomoam/update-up-to-20240506

2024/05/06 迄の更新に追従

Author: tomoam

documentation/blog/2019-04-20-write-less-code.md

@@ -48,7 +48,7 @@ for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`);
 <div class="max">
 	<iframe
 		title="Simple component example"
-		src="/repl/embed?example=blog-write-less-code"
+		src="/repl/blog-write-less-code/embed?version=3"
 		scrolling="no"
 	></iframe>
 </div>

documentation/blog/2024-03-01-whats-new-in-svelte-march-2024.md

@@ -0,0 +1,83 @@
+---
+title: "What's new in Svelte: March 2024"
+description: 'Nested CSS support and a much cleaner client-side API for Svelte 5'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+This month, the Svelte maintainers made a ton of progress on Svelte 5 and Rich Harris talked to Prismic about how the team is working on making the framework even better.
+
+Lots to showcase too... so let's dive in!
+
+
+## What's new in Svelte
+
+As you may already have heard, [Svelte 5 is in preview](https://svelte-5-preview.vercel.app/docs/introduction). In the meantime, Svelte 4 (`@latest`) has had [one bugfix](https://github.com/sveltejs/svelte/blob/svelte-4/packages/svelte/CHANGELOG.md). The Svelte 5 changelog has quite a few updates, though:
+
+- breaking: `$derived.call` is now `$derived.by` (**5.0.0-next.54**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#$derived-by), [#10445](https://github.com/sveltejs/svelte/pull/10445))
+- Destructuring derived object properties will now keep fine-grain reactivity (**5.0.0-next.55**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#derived), [#10488](https://github.com/sveltejs/svelte/pull/10488))
+- The new `hydrate` method makes hydration-related code treeshakeable (**5.0.0-next.56**, [Docs](https://svelte-5-preview.vercel.app/docs/functions#hydrate), [#10497](https://github.com/sveltejs/svelte/pull/10497))
+- Nested CSS is now supported, along with better support for `:is(...)` and `:where(...)` (**5.0.0-next.57**, [#10490](https://github.com/sveltejs/svelte/pull/10490))
+- breaking: The client-side API has been simplified by removing `createRoot`, adjusting the `mount`/`hydrate` APIs and introducing `unmount` (**5.0.0-next.58**, [Issue#9827](https://github.com/sveltejs/svelte/issues/9827), [#10516](https://github.com/sveltejs/svelte/pull/10497))
+
+For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out [the CHANGELOG on main](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md).
+
+
+## What's new in SvelteKit
+
+Mostly bug fixes, this month. Most notably is a fix to prevent stale values after navigation (**2.5.1**, [#11870](https://github.com/sveltejs/kit/pull/11870)).
+
+Adapters can also now use an `emulate` function to provide dev and preview functionality (**2.5.0**, [Docs](https://kit.svelte.dev/docs/writing-adapters), [#11730](https://github.com/sveltejs/kit/pull/11730)). This will allow for an improved experience developing for Cloudflare in the near future ([11732](https://github.com/sveltejs/kit/pull/11732)).
+
+For all the changes in SvelteKit, check out the [CHANGELOG](https://github.com/sveltejs/kit/blob/main/packages/kit/CHANGELOG.md).
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+
+- [Wishgram](https://www.wishgram.xyz/) is a tool to generate handwritten wishing cards
+- [rfidify](https://github.com/jonathanjameswilliams26/rfidify) is a Raspberry PI RFID reader that plays things on Spotify
+- [listn.fyi](https://listn.fyi/) is a fun and easy way to share what music you're currently into
+- [Meowrite](https://www.meowrite.com/) is an AI writing tool for cover letters, essays and more
+- [Photo Multitool](https://www.photomultitool.com/) is a free set of online tools for manipulating photos
+- [sveltekit-weather-app](https://github.com/maxjerry0107/sveltekit-weather-app) is a gorgeous weather app made with SvelteKit
+
+**Learning Resources**
+
+_Featuring Svelte Contributors and Ambassadors_
+- [How to make a great framework better? - Svelte 5 with Rich Harris](https://www.youtube.com/watch?v=z7n17ajJpCo) by Prismic
+- [Svelte 5 is a beast, but is it worth switching?](https://www.youtube.com/watch?v=KB6zkvYJqoE&lc=UgxFIaNKUG5as18CSzp4AaABAg) by Syntax.FM
+- This Week in Svelte:
+  - 
+
+_To Read/Watch_
+
+- [Upgrading to Svelte 5](https://gitcontext.com/blog/svelte-5-upgrade) by Mike Stachowiak
+- [Building with GPT4 and Svelte](https://kvak.io/meoweler) by Lev Miseri
+- [Mini site for recommending songs using Svelte & Deno](https://blog.bryce.io/mini-site-for-recommending-songs-using-svelte-deno) by Bryce Dorn
+- [Effortlessly Sync Your SvelteKit Frontend with Backend Using OpenAPI: A Step-by-Step Guide to Generating SDKs](https://www.launchnow.pro/blog/sveltekit-openapi-sdk-generation) by Launchnow
+- [How to build an editable website in 15 minutes in 2024](https://www.svelteheadless.com/how-to-build-an-editable-website-in-15-minutes-in-2024) by Svelte Headless
+- [Local-First LiveView Svelte ToDo App](https://liveview-svelte-pwa.fly.dev/) by Tony Dang
+
+
+**Libraries, Tools & Components**
+
+- [PaneForge](https://github.com/svecosystem/paneforge) provides components that make it easy to create resizable panes in your Svelte apps
+- [Svelte UX](https://svelte-ux.techniq.dev/) and [LayerChart](https://www.layerchart.com/) now include theme support via semantic and state classes
+- [Huly Platform](https://github.com/hcengineering/platform) is a robust framework designed to accelerate the development of business applications, such as CRM systems
+- [svelte-marquee](https://github.com/selemondev/svelte-marquee) is a beautiful marquee component for Svelte
+- [Just Ship](https://github.com/ocluf/justship) is a SvelteKit auth boilerplate for Svelte 5
+- [cells](https://github.com/okcontract/cells) is a functional & reactive library for Svelte
+- [Svelte Headless](https://github.com/webuildsociety/svelte-headless) is an example site showing how to create a simple blog site that plugs into a headless CMS
+- [Sugar.css](https://sugar-css.com/) is a semantic, accessible, lightweight CSS framework
+- [apple-svelte](https://github.com/Carza-104/apple-svelte) is a component library for Svelte based on Apple's Human Interface design language
+- [SvelteKit SSE](https://github.com/tncrazvan/sveltekit-sse) provides an easy way to produce and consume server sent events.
+- [Formsnap](https://github.com/huntabyte/formsnap), an accessible wrapper for sveltekit-superforms, got a major rewrite and has improved [its docs](https://formsnap.dev)
+
+
+That's it for this month! 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 month 👋

documentation/blog/2024-04-01-whats-new-in-svelte-april-2024.md

@@ -0,0 +1,86 @@
+---
+title: "What's new in Svelte: April 2024"
+description: 'Svelte Summit Spring on April 27! Plus: reactive `Map`, `Date` and `Set`'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+Spring is just around the corner (for half the globe at least), which means [Svelte Summit Spring](https://www.sveltesummit.com/) is coming soon! The event will be streamed on [the Svelte Society YouTube channel](https://youtube.com/sveltesociety) on April 27.
+
+Also, this month, a ton of new features have been merged into Svelte 5 to make it the best version of Svelte yet. We'll get into them all below, so let's jump right in!
+
+
+## What's new in Svelte
+
+[Svelte 5 is in preview](https://svelte-5-preview.vercel.app/docs/introduction) and gets closer to release every day. Below, you'll find some highlights from its [changelog](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md):
+
+- The new `Map`, `Date` and `Set` classes can now be imported from `svelte/reactivity` and used just like their native counterparts to fit into Svelte's reactivity model (**5.0.0-next.79**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#state-frozen-reactive-map-set-and-date), [#10803](https://github.com/sveltejs/svelte/pull/10803), [#10622](https://github.com/sveltejs/svelte/pull/10622), [#10781](https://github.com/sveltejs/svelte/pull/10781))
+- state/derived/props can be explicitly exported from components again (**5.0.0-next.62**, [#10523](https://github.com/sveltejs/svelte/pull/10523))
+- `bind:value` now allows for a dynamic `type` attribute - fixing issues with common input bindings (**5.0.0-next.66**, [#10608](https://github.com/sveltejs/svelte/pull/10608))
+- `SSR` HTML mismatch validation has been improved and provides clearer error messages (**5.0.0-next.69**, [#10658](https://github.com/sveltejs/svelte/pull/10658))
+- **Breaking:** Slots inside templates with a `shadowrootmode` attribute are now preserved (**5.0.0-next.73**, [#10721](https://github.com/sveltejs/svelte/pull/10721))
+- **Breaking:** The `$props()` no longer accepts a generic type argument. Instead, component authors should type their props like any other variable declaration (**5.0.0-next.76**, [#10694](https://github.com/sveltejs/svelte/pull/10694))
+- The new `$bindable` rune allows parents to `:bind` to a component's prop in addition to using them as regular props ([Docs](https://svelte-5-preview.vercel.app/docs/runes#props-bindable), [#10851](https://github.com/sveltejs/svelte/pull/10851)) 
+- The webkitdirectory DOM boolean attribute is now supported (**5.0.0-next.81**, [#10847](https://github.com/sveltejs/svelte/pull/10847))
+- Form resets are now taken into account for two way bindings (**5.0.0-next.82**, [Docs](https://svelte-5-preview.vercel.app/docs/breaking-changes#other-breaking-changes-bindings-now-react-to-form-resets), [#10617](https://github.com/sveltejs/svelte/pull/10617))
+
+
+## What's new in SvelteKit
+
+- `adapter-vercel` now has Skew Protection which ensures that the client and server stay in sync for any particular deployment (**@sveltejs/adapter-vercel@5.2.0**, [Docs](https://vercel.com/docs/deployments/skew-protection), [#11987](https://github.com/sveltejs/kit/pull/11987))
+- `adapter-vercel`'s build output files now include framework metadata - improving observability on the platform (**@sveltejs/adapter-vercel@5.2.0**, [#11800](https://github.com/sveltejs/kit/pull/11800))
+- `adapter-cloudflare` and `adapter-cloudflare-workers` now implement `adapter.emulate` which allows the adapter to emulate the Cloudflare platform during dev and preview ([#11732](https://github.com/sveltejs/kit/pull/11732))
+- **Breaking:** `adapter-node` now shuts down gracefully and supports the new `IDLE_TIMEOUT` and `SHUTDOWN_TIMEOUT` environment variables (**@sveltejs/adapter-node@5.0.1**, [Docs](https://kit.svelte.dev/docs/adapter-node#environment-variables-shutdown-timeout), [#11653](https://github.com/sveltejs/kit/pull/11653))
+- **Breaking:** The default value of `precompress` in `adapter-node` is now `true` - making sites faster by default (**@sveltejs/adapter-node@5.0.0**, [Docs](https://kit.svelte.dev/docs/adapter-node#options-precompress), [#11945](https://github.com/sveltejs/kit/pull/11945))
+- Google Cloud is now supported in `adapter-auto` without any additional configuration (**@sveltejs/adapter-auto@3.2.0**, [Docs](https://kit.svelte.dev/docs/adapter-auto), [#12015](https://github.com/sveltejs/kit/pull/12015))
+
+For all the changes in SvelteKit, including bug fixes and adapter-specific changes check out the [CHANGELOGs in each of the packages](https://github.com/sveltejs/kit/tree/f1e73c2fe54280d254a1bdfba430a678f4db527a/packages).
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+
+- [notepad](https://www.usenotepad.com/) is a workspace for freelancers. Providing time tracking, tasks, reports, invoices and contacts all in one tool.
+- [Tokenbase](https://github.com/mateoroldos/tokenbase) is a free tool for creating, managing and distributing Design Tokens. Easily create your Design Systems and export them to code in a few clicks.
+- [MelloOS](https://mellobacon.github.io/mello_os/) is a fake OS desktop in the style of Windows 95
+- [PowerHound](https://powderhound.io/) is an app for tracking snow conditions across Colorado's ski resorts and backcountry
+- [ProductSurveys](https://productsurveys.io/) gathers user feedback directly inside your product
+- [WAIfinder](https://github.com/nestauk/dsp_waifinder) is an interactive map shows entities operating in the AI industry in the UK
+- [talkmedown](https://talkmedown.net/) is an emergency landing survival game using SvelteKit UI and Three.js graphics.
+- [Bird Flapping](https://github.com/zonetecde/bird-flapping) is that game with a flapping bird (not to be confused with FlappyBird)
+- [Minesweeper](https://codeberg.org/wires5210/minesweeper-funnymode) FUNNYMODE is minesweeper, but FUNNY
+- [Routickr](https://www.routickr.com/) is a habit-tracking app with Firefox and Chrome extensions
+- [immich](https://immich.app/) is a self-hosted photo and video management solution
+
+
+**Learning Resources**
+
+_Featuring Svelte Contributors and Ambassadors_
+- Svienna (Svelte Society Vienna):
+  - [Domenik Reitzner - A brief history of prototyping](https://www.youtube.com/watch?v=auqkebVQYXE)
+  - [Lukas Stracke - Building an Error and Performance Monitoring SDK for SvelteKit](https://www.youtube.com/watch?v=N8Hs-LVL_f8)
+  - [Jean Yves Couët - Are you on the right route? ](https://www.youtube.com/watch?v=K8sKpMSCOiE)
+  - [Lucas Martin - Using SvelteKit to Build An Interactive Portfolio](https://www.youtube.com/watch?v=wAttcVDP4Ec)
+- This Week in Svelte:
+  - [22 Mar 2024](https://www.youtube.com/watch?v=QiAMLIyM894)
+  - [8 Mar 2024](https://www.youtube.com/watch?v=_vQVkOa5K-s)
+
+_To Read/Watch_
+
+- [How we built our 41kb SaaS Website](https://criticalmoments.io/blog/how_we_built_our_marketing_page) by Critical Moments
+- [Migrating a personal homepage to Svelte](https://jakeout.com/posts/2024-03-04-svelte) by Jake Ouelletee 
+
+
+**Libraries, Tools & Components**
+
+- [Svisualize](https://svisualize.dev/) is a VS Code Extension that visualizes your components as you code
+- [Neel/UI](https://github.com/aidan-neel/neel-ui) is a shadcn-inspired set of customizable components that you can copy and paste into your SvelteKit apps
+- [BLICKCSS](https://blick.netlify.app/) is a small (~30kb) CSS library to build great websites and web apps quickly and easily
+
+
+That's it for this month! 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 month 👋

documentation/blog/2024-04-30-svelte-5-release-candidate.md

@@ -0,0 +1,55 @@
+---
+title: Svelte 5 Release Candidate
+description: We're almost there
+author: The Svelte team
+authorURL: https://svelte.dev/
+---
+
+Svelte 5 is now in the Release Candidate phase. This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped.
+
+It _doesn't_ mean that it's ready for production, or that nothing will change between now and 5.0. But if you've held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out. You can select the 'Try the Svelte 5 preview' option when starting a new SvelteKit project...
+
+```bash
+npm create svelte@latest
+```
+
+...or you can add Svelte 5 to an existing project...
+
+```bash
+npm install --save-dev svelte@next
+```
+
+...or you can tinker in the [Svelte 5 Preview](https://svelte-5-preview.vercel.app) website.
+
+## I'm out of the loop. What's Svelte 5?
+
+For the last several months, we've been hard at work rewriting Svelte from the ground up to be faster, easier to use and more robust, applying the lessons we've collectively learned from several years of building apps with Svelte.
+
+You can learn more about the new features from the [preview documentation](https://svelte-5-preview.vercel.app/docs), and by watching the presentation from the most recent [Svelte Summit](https://www.sveltesummit.com/):
+
+<div class="max">
+<figure style="max-width: 960px; margin: 0 auto">
+<div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/xCeYmdukOKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>What You Can Do For Your Framework</figcaption>
+</figure>
+</div>
+
+The highlights include:
+
+- [runes](/blog/runes), the new signal-powered reactivity API that sits at the heart of Svelte 5 and unlocks _universal, fine-grained reactivity_
+- overhauled event handling with less boilerplate and more flexibility
+- better component composition through [_snippets_](https://svelte-5-preview.vercel.app/docs/snippets)
+- native TypeScript support, including inside your markup
+
+## Will I need to rewrite everything?
+
+Components written for Svelte 4 will continue to work with Svelte 5, with a [handful of exceptions](https://svelte-5-preview.vercel.app/docs/breaking-changes). If you install Svelte 5 in an existing app, the only real change should be that things get faster. If you maintain a Svelte app, we recommend updating to Svelte 5 as soon as it's stable. (In the meantime, if you're currently on Svelte 3 then you should [update to Svelte 4](/docs/v4-migration-guide).)
+
+Eventually — in Svelte 6 or 7 — support for certain Svelte 4 features will be dropped in favour of their modern replacements. Because of that, we do encourage you to incrementally migrate your components (you can mix and match old and new components in the same app). We'll release a command line tool for automating much of this migration, and you can try an experimental version of that tool in the [playground](https://svelte-5-preview.vercel.app) by pasting in some Svelte 4 code and clicking the 'migrate' button.
+
+## When is the stable release?
+
+[When it's done](https://github.com/sveltejs/svelte/milestone/9), and we've updated all the documentation. Bear with us!