Svelte blog

What’s new in Svelte: October 2025

Dani Sandoval — Wed, 01 Oct 2025 00:00:00 GMT

There were lots of improvements to remote functions this month - including new batching tools and improved performance via lazy discovery. For more info, check out the Docs and PR links in each bullet. Async SSR is also available for those who would like to try it out while it’s still experimental. It’s included when the config option in svelte.config.js has the compilerOptions.experimental.async setting enabled.

We’ve got a hefty showcase this month too, so let’s dive in!

What’s new in Svelte, SvelteKit and Svelte CLI (sv)

The event property is now included on popstate, link and form navigation (kit@2.40.0, #14307)
The %sveltekit.version% placeholder can now be used in app.html to easily include the current SvelteKit version in the output (kit@2.41.0, Docs, #12132)
You can now create projects from the Svelte playground with npx sv create --from-playground <url> (sv@0.9.5, #662)
Experimental async SSR is available in Svelte v5.39.3 and SvelteKit v2.43.0 or higher. You can opt-in via the experimental.async option. When this is enabled, it’s possible to use await anywhere in your app, without wrapping it in a boundary with a pending snippet. You can find more information in the SvelteKit PR (#14447, Svelte PR is #16748)

Remote Functions

The remote set() function can now be called on server queries and query.refresh() promises will now be automatically resolved on the server (kit@2.37.0, Docs, #14304, #14332)
The new query.batch remote function lets you batch requests that happen within the same macrotask (kit@2.38.0, Docs, #14272)
Lazy discovery of remote functions improves detection and tree shaking for functions defined in node_modules (kit@2.39.0, #14293)
The form remote function has been enhanced with schema support, input and issues properties (kit@2.42.0, Docs, #14383)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Windframe generates designs with AI or prebuilt templates to export as Tailwind CSS code for React, Vue, Svelte or HTML.
pgpad is a straightforward cross-platform database client
Zippywords is a burst-typing game that’s configurable with different languages (including the Svelte 5 syntax!)
CBFC Watch is a data visualisation project with a searchable database of over 100K film censorship records in India (GitHub)

Spotted in the Wild

Learning Resources

Featuring Svelte Contributors and Ambassadors

Introducing SvelteKit Remote Functions and SvelteKit Remote Functions tips: Auth guards, managing async, query.batch by Simon Holthausen
The Complete Svelte 5 Course For The Most Loved JavaScript Framework by Joy of Code (3+ hours of excellent content). Text version available here
Translate your Svelte and SvelteKit applications the easy way - full tutorial by Code with Stanislav
How and why I built an MCP server for Svelte by Stanislav Khromov
Svelte Radio is back! Feat. Kevin, Brittney and Antony

This Week in Svelte

Ep. 115 — Changelog review
Ep. 116 — e18e.dev and NPM’s supply chain attack
Ep. 117 — Formisch
Ep. 118 — Changelog review

Svelte London - September 2025

You can watch the full video on YouTube or skip to the specific talks below:

Svelte on Cloudflare: Tips and guide by Mark Ridge and Connor Adams
Ultra-low Latency in SvelteKit by Scott Phillips

To Read

Sharing some custom components that handle async state with less boilerplate in Svelte 5 by u/geokidev
Rendering emails with Svelte by Gautier Ben Aïm
Integrate Keystatic CMS with SvelteKit to render Markdoc Content with Interactive Svelte Components by Samuel Plumppu

To Watch

Svelte Under The Hood by ~/in-depth

Libraries, Tools & Components

UI / UX

SVAR Svelte v2.3 now has TypeScript definitions to all its open-source Svelte UI components
@dnd-kit is a lightweight React-like library for building performant and accessible drag and drop experiences
svelte-overflow-fade is a Svelte action and attachment for adding beautiful fade effects to overflowing content
scratch-to-reveal-svelte is a simple and customizable scratch-to-reveal component for Svelte
Svelte Streamdown is a Svelte port of Streamdown by Vercel - an all in one markdown renderer, designed specifically for AI-powered streaming applications
USAL JS is the “Ultimate Scroll Animation Library”

Frameworks and Data Tools

PrevelteKit is a lightweight, high-performance web application framework built on Svelte 5, featuring Server-Side Pre Rendering (SSPR) using Rsbuild and jsdom
Apollo Runes is an Apollo Client for Svelte 5
Formisch is a schema-based, headless form library for JS frameworks
Conformal helps you work with native FormData by providing type-safe form submissions for the modern web
Astro, already supporting async Svelte out of the box, added support for server-rendered async Svelte in the 5.14 release
LayerChart had a packed update and introduced (among other things) a “vanilla CSS” (Tailwind opt-in) mode and support for other UI frameworks, and now also works in the Svelte REPL / playground
keystatic-sveltekit is a convenient way to integrate the open source Git-based Keystatic CMS with SvelteKit, featuring Markdoc content with interactive Svelte components and a modern editing UX

Dev Tools and Vite Plugins

wuchale is a compile-time internationalization (i18n) toolkit that requires zero code changes
SV Floating Console is a floating console for Svelte applications that only appears in development mode
magicons is a fast, typesafe Icon wrapper that fixes bundling issues with large barrel exports in icon libraries
Svelte-pops is a performant and easy to use popover manager for creating dialog and tooltips
vite-plugin-svelte-inline-component lets you write tiny Svelte components straight inside your JavaScript / TypeScript tests using tagged‑template literals
vite-plugin-sveltekit-decorators is a powerful Vite plugin that automatically decorates SvelteKit functions with customizable wrappers for logging, analytics, error handling, and more

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

What’s new in Svelte: September 2025

Dani Sandoval — Mon, 01 Sep 2025 00:00:00 GMT

In case you missed it, the main Svelte blog covered how to use SvelteKit’s new OpenTelemetry traces to reliably set up observability instrumentation using instrumentation.server.ts. This month’s round up covers that release and a few other features that rolled out before and after it.

Plenty in the showcase, as well, so let’s dive in!

What’s new in Svelte and Svelte CLI (sv)

await is now allowed inside @const declarations (svelte@5.38.0, Docs, #16542)
The sv add command has been updated to remove the --no-preconditions and add --no-git-check. With this new flag, even if some files are dirty, no prompt will be shown (sv@0.9.0, Docs, #650)

What’s new in SvelteKit and its adapters

Deno is now supported as a supported package manager (sveltejs/adapter-auto@6.1.0, #14163)
A new instrumentation.server.ts adds tracing and observability setup (sveltejs/adapter-node@5.3.0, Docs, #13899)
The --preserve-output flag prevents deletion of the output directory before packaging (sveltejs/package@2.5.0, Docs, #13055)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Pollinate provides accurate forecasts designed for allergy sufferers who want to plan their day, or vacation, around pollen levels (Check out the Reddit post on how it was built)
Ferndesk is a help center that is kept up to date automatically (the creator shared their demo on the Svelte Reddit)
Wplace lets you paint whatever you want on a map of the world
Domain Watcher is a domain availability monitor and expiration tracker built with SvelteKit & Cloudflare Workers
Motley is a local-first bookmarking/moodboard app
TallyHo is a simple time tracking for freelancers
MenuScan lets you take a picture of any restuarant menu and get access to the calorie and macro counts for each item
Vibe Check provides quick, honest diagnostics for AI‑built apps
Joyful is a simple way to write, design, and send beautiful newsletters
Eagle Cite lets you highlight, organize, and search your citations in one place
Volkara is a set of ADHD-Friendly Productivity Tools
Simple Man Archive is an ASCII art archive where anyone can contribute by creating unique ASCII art
Thirty is an open-source AI calendar built on familiar foundations
Timezones quickly shows and converts timezones across many locations

Learning Resources

Featuring Svelte Contributors and Ambassadors

Compile Svelte 5 in your head by Tan Li Hau
Introducing SvelteKit Remote Functions by Simon Holthausen
The Svelte MCP server now allows you to directly reference documentation sections, and prompt templates

This Week in Svelte

Ep. 112 — Storybook for Svelte Part 1
Ep. 113 — Storybook for Svelte Part 2 - Docs
Ep. 114 — Changelog Review

To Read

Securing the supply chain at scale: Starting with 71 important open source projects by GitHub
Epicenter (YC S25) is sponsoring Svelte maintainers to spend their time half pushing local-first OSS forward with Epicenter and half building their dream projects
Project Two: Creating Mobile app using Tauri + Svelte by Kaspar Minosiants
Ways to use Anime.js with Svelte by Brandon Ma
Svelte, Markdown, and the Magic of Web Components by Shajid Hasan

To Watch

SvelteKit Remote Functions are INSANE! Type-Safe Full Stack in Minutes by Tyler Codes
Deploy a SvelteKit Application to Cloudflare Workers with Drizzle & D1 by Jilles Soeters

Libraries, Tools & Components

EXE is a build tool to distribute your full-stack web app as a single executable binary with zero runtime dependencies
Svelte Sortable List is a comprehensive package for creating accessible, sortable lists in Svelte applications
Markdown UI turns static docs into interactive experiences - instantly
Tark UI provides beautiful UI components built with Ark UI and Tailwind
Uniface Element is a comprehensive enterprise-grade UI component library built with Svelte 5, designed for modern web applications
microfolio is a modern static portfolio generator featuring a file-based content management system using folders and Markdown files
Keycloakify is a tool for creating custom Keycloak themes, enabling you to modify the appearance and behavior of Keycloak’s user interfaces
PDJsonEditor is a powerful JSON visualization and editing tool with both a code editor and interactive graph views
Show & Svelte lets you create fully interactive presentations with Svelte
wuchale is a compile-time internationalization (i18n) toolkit that requires zero code changes
svelte-overflow-fade is a Svelte action and attachment for adding beautiful fade effects to overflowing content
formshape is a type-safe form validation for SvelteKit Remote Functions using Standard Schema compatible validators
vite-plugin-svelte-inline-component lets you write tiny Svelte components straight inside your JavaScript / TypeScript tests using tagged‑template literals.
vite-plugin-sveltekit-decorators is a Vite plugin that automatically decorates SvelteKit functions with customizable wrappers for logging, analytics, error handling, and more
jetbrains-svelte-templates is a compact collection of Live Templates for JetBrains IDEs (like WebStorm and IntelliJ IDEA Ultimate) designed to speed up your Svelte & SvelteKit development

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

Introducing integrated observability in SvelteKit

Elliott Johnson — Mon, 18 Aug 2025 00:00:00 GMT

Understanding how your SvelteKit application behaves in production — from request flows to performance bottlenecks — is crucial for building reliable user experiences. SvelteKit now has first-class support for observability: built-in OpenTelemetry tracing, and a dedicated instrumentation setup file that ensures your monitoring tools work seamlessly.

To opt in, upgrade SvelteKit and your adapter and add the following to your svelte.config.js:

svelte.config

export default {
	kit: {
    experimental: {
        tracing: {
 server: boolean;
        };
        instrumentation: {
 server: boolean;
        };
    };
}kit: {
		experimental: {
    tracing: {
        server: boolean;
    };
    instrumentation: {
        server: boolean;
    };
}experimental: {
			tracing: {
    server: boolean;
}tracing: {
				server: booleanserver: true
			},
			instrumentation: {
    server: boolean;
}instrumentation: {
				server: booleanserver: true
			}
		}
	}
};

First-party OpenTelemetry traces

SvelteKit can now emit OpenTelemetry traces for the following:

handle hook (handle functions running in a sequence will show up as children of each other and the root handle hook)
load functions (includes universal load functions when they run on the server)
Form actions
Remote functions

The emitted spans include attributes describing the current request, such as http.route, and surrounding context, such as the +page or +layout file associated with a load function. If there are additional attributes you think might be useful, please file an issue on the SvelteKit GitHub issue tracker.

A convenient home for all of your instrumentation

Emitting traces alone is not enough: You also need to collect them and send them somewhere. Under normal circumstances, this can be a bit challenging. Because of the nature of observability instrumentation, it needs to be loaded prior to loading any of the code from your app. To aid in this, SvelteKit now supports a src/instrumentation.server.ts file which, assuming your adapter supports it, is guaranteed to be loaded prior to your application code.

In Node, your instrumentation might look something like this:

import { import NodeSDKNodeSDK } from '@opentelemetry/sdk-node';
import { import getNodeAutoInstrumentationsgetNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node';
import { import OTLPTraceExporterOTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
import { import createAddHookMessageChannelcreateAddHookMessageChannel } from 'import-in-the-middle';
import { function register<Data = any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<Data>): void (+1 overload)Register a module that exports hooks that customize Node.js module
resolution and loading behavior. See
Customization hooks.
@sincev20.6.0, v18.19.0
@paramspecifier Customization hooks to be registered; this should be
the same string that would be passed to import(), except that if it is
relative, it is resolved relative to parentURL.
@paramparentURL f you want to resolve specifier relative to a base
URL, such as import.meta.url, you can pass that URL here.register } from 'module';

const { const registerOptions: anyregisterOptions } = import createAddHookMessageChannelcreateAddHookMessageChannel();
register<any>(specifier: string | URL, parentURL?: string | URL, options?: Module.RegisterOptions<any> | undefined): void (+1 overload)Register a module that exports hooks that customize Node.js module
resolution and loading behavior. See
Customization hooks.
@sincev20.6.0, v18.19.0
@paramspecifier Customization hooks to be registered; this should be
the same string that would be passed to import(), except that if it is
relative, it is resolved relative to parentURL.
@paramparentURL f you want to resolve specifier relative to a base
URL, such as import.meta.url, you can pass that URL here.register('import-in-the-middle/hook.mjs', import.meta.ImportMeta.url: stringThe absolute file: URL of the module.
url, const registerOptions: anyregisterOptions);

const const sdk: anysdk = new import NodeSDKNodeSDK({
	serviceName: stringserviceName: 'my-sveltekit-app',
	traceExporter: anytraceExporter: new import OTLPTraceExporterOTLPTraceExporter(),
	instrumentations: any[]instrumentations: [import getNodeAutoInstrumentationsgetNodeAutoInstrumentations()]
});

const sdk: anysdk.start();

If you’re deploying to Vercel, it would look something like this:

import { import registerOTelregisterOTel } from '@vercel/otel';

import registerOTelregisterOTel({
	serviceName: stringserviceName: 'my-sveltekit-app'
});

Consult your platform’s documentation for specific instrumentation instructions. As of now, all of the official SvelteKit adapters with a server component (sorry, adapter-static) support instrumentation.server.ts.

Acknowledgements

A huge thank-you to Lukas Stracke, who kicked us off on this adventure with his excellent talk at Svelte Summit 2025 and his initial draft PR for instrumentation.server.ts. Another thank-you to Sentry for allowing him to spend his working hours reviewing and testing our work.

What’s new in Svelte: August 2025

Dani Sandoval — Fri, 01 Aug 2025 00:00:00 GMT

With Async Svelte and its companion Remote Functions officially out in the world, there’s a lot of updates to share!

Be sure to check out the showcase for videos from Rich, Paolo, and Stanislav about all the brand new features in Svelte.

Let’s dive into the highlights...

What’s new in Svelte, SvelteKit, Language Tools and CLI (sv)

Remote functions can be called anywhere in your app, but always run on the server, and as such can safely access server-only modules containing things like environment variables and database clients (kit@2.27.0, Docs, #13986)
getAbortSignal returns an AbortSignal that aborts when the current derived or effect re-runs or is destroyed (svelte@5.35.0, Docs, #16266)
A new parent property has been added to the __svelte_meta properties that are added to elements at dev time - useful for debugging nested hierarchies (svelte@5.35.1, #16255)
await is now supported in components when using the experimental.async compiler option (svelte@5.36.0/extensions@109.10.0, Docs, #15844)
There are now types for the params prop and page attributes in page/layout components (kit@2.24.0, kit@2.26.0 & extensions@109.10.0, #13999 / #13864)
SvelteKit’s read now works in edge environments where fs.readFile isn’t available such as in Cloudflare’s workers, Netlify, and Vercel’s edge functions (kit@2.25.0, #13859)
The resolve(...) and asset(...) helpers have been added for resolving paths (kit@2.26.0, #13864)
Support for modern SvelteKit prop typings has been added to VS Code snippets (extensions-109.10.0, #2796)
The new vite.addPlugin simplifies adding a plugin on various vite config styles (sv@0.8.20, #633)
vite-plugin-svelte is out with support for vite7, rolldown-vite and more

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Logitech’s new site is built in Svelte 🎉
hend.world is a language learning application that surrounds you with comprehensible input: compelling stories, articles, and videos that match your level
Amgiflol is a Figma-like Layout Inspector For Web
Formcord is a Google Forms alternative built specifically for Discord communities
Freq is a community-based social media platform for groups of music listeners to share, talk about, and enjoy music together
Salora is a salon booking application (de)
Animal Well Shrine is an low-spoiler egg tracker for the video game, Animal Well
TypingGym is a typing practice site with automatic difficulty adjustment

Learning Resources

Featuring Svelte Contributors and Ambassadors

promise.then(...) by Rich Harris - what’s next now that Svelte is Async
Asynchronous Svelte with Rich Harris by CodeTV (Jason Lengstorf)
Remote Functions are coming to SvelteKit - and they are amazing! by Code with Stanislav
Svelte London - June 2025 feat. “Svelte, svelte everywhere” by Paolo Ricciuti and “Testing your Svelte app in an actual browser” by Willow / Scott

This Week in Svelte

Ep. 108 — Svelte Flow
Ep. 109 — Ark UI
Ep. 110 — Neodrag v3
Ep. 111 — Best LLMs for Svelte 5 tested, MCP server, llms.txt

Svienna (Svelte Society Vienna)

Lightning talk 10 tips in 5 mins! by Jean Yves Couet
Using SvelteKit and MIT appinventor to inspire young girls for tech by Domenik Reitzner
Adding full to your full stack SvelteKit app by Jean Yves Couet
ZeeltePHP (Svelte + PHP) by derharry
Svelte at Geizhals by Martin Grubinger

To Watch/Read

Build a SvelteKit Admin App with Drizzle, Tailwind & Postgres by Tyler Codes
Master Svelte in 15 Minutes: From React Dev to Svelte Pro by Neuronfire
Simple but Effective Skeleton Loaders by Mat Simon
Building Smart Intervals with Svelte 5 by Puru VJ

Libraries, Tools & Components

Svelte Interval is a comprehensive Svelte utility package for managing intervals with reactive durations, synchronization, and advanced control features
@hvniel/svelte-router is a Svelte 5 port of React Router
@hvniel/vite-plugin-svelte-inline-component lets you write tiny Svelte components straight inside your JavaScript / TypeScript tests using tagged‑template literals
wuchale is a non-invasive, normal code based compile-time internationalization (i18n) toolkit
SSGOI brings native app-like page transitions to the web
Svelte Form Builder is a modern, drag-and-drop form builder built with Svelte 5
Svelte persistent runes provides a Svelte reactive rune that keep its value through pages and reloads
gositemap is a fast, test-driven sitemap.xml generator for static SvelteKit sites

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

What’s new in Svelte: July 2025

Dani Sandoval — Tue, 01 Jul 2025 00:00:00 GMT

Whether you’re trying out Vite 7, vitest browser mode or remote functions, there’s lots of experimental features to try this month.

Want some Svelte swag while you’re chatting on Discord? With the new sv ⚡ server tag, you do just that. While signed into Discord, you can adopt our tag via profile settings.

There’s a bunch to cover, from blog posts to new libraries, so let’s dive in...

What’s new in Svelte and SvelteKit

$inspect.trace now includes source name logging to make it easy to find which file the log came from (svelte@5.34.0, Docs, #16060)
The latest version of SvelteKit now supports Vite 7 and Rolldown. Compilation should be faster using Rolldown, but with larger bundle sizes until additional tree-shaking is implemented in Rolldown (kit@2.22.0, Docs, #13747)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

What’s new in the CLI and Language Tools

The sv CLI now supports Vite’s browser mode in Vitest - allowing you to run your tests in the browser natively (cli@0.8.12, Docs, #588)
The language server now makes it easier to search for symbol names (Ctrl + T in VSCode). Some of the handling is also synced to the Svelte TypeScript plugin so that it’s more consistent, which also means vscode can better deduplicate the results from both tsserver and Svelte language server (extensions@109.9.0, #2769)

Community Showcase

Apps & Sites built with Svelte

Planet Poster is an interactive art work inspired by a poster of, you guessed it, planets
roomy-worlds lets you create small 3d worlds and share/edit with your community
Prodcast lets you discover products curated from your favorite podcasts
Distill automates company and industry monitoring with all news, updates, and summarized insights in one place
thom.chat is an open-source alternative/clone to T3 Chat
Visual Source is a GUI for managing your projects design tokens

Learning Resources

Featuring Svelte Contributors and Ambassadors

Type-Safe Persistence and Auto-Theming in Svelte 5 by Puru VJ
$effect is fine but proxies are better and How to build Web Components with Svelte by Paolo Ricciuti

This Week in Svelte

Ep. 106 — Changelog
Ep. 107 — svelte-lexical

To Watch/Read

Sveltest is a guide to set up testing for Svelte 5 applications using the experimental vitest-browser-svelte library
A Playful Onboarding: Your first interactive animation from A to Z by Director.design
Migrating from @testing-library/svelte to vitest-browser-svelte by Scott Spence
Why Silicon Valley CTOs Are Secretly Moving Away from React by Freedium
Async Local Storage by Ross Robino
Mainmatter has a bunch of Svelte workshops in July so be sure to check those out!

Libraries, Tools & Components

shadcn-svelte v1 - after 11 months in pre-release (@next), shadcn-svelte has officially hit v1.0. Congrats!
Quaff is a component library for Svelte that follows the Material Design 3 guidelines
Neodrag v3 Alpha is out with multi-framework adapters, event delegation and more
Svelte Polaris is port of Shopify’s design system to build Shopify apps
Origin UI is a collection of copy-and-paste components for quickly build application UIs
Svelte 5 MCP Server is a specialized Model Context Protocol (MCP) server for Svelte 5 frontend development
Frizzante is a minimalistic and opinionated web server framework written in Go that uses Svelte to render pages
Storybook 9 is out now and includes updates to the Svelte CSF story format to support Svelte 5
Sheepdog supplies a simple way to introduce cancellable concurrency into your app
Flowbite Svelte now has datatable and text editor (WYSIWYG) components
Ark UI, a headless UI library, now has a Svelte version
SVAR Svelte Filter helps you add complex filtering UI and logic to data-heavy apps like admin panels or dashboards

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

What’s new in Svelte: June 2025

Dani Sandoval — Sun, 01 Jun 2025 00:00:00 GMT

In addition to advancing the work on Async Svelte, the maintainers have been hard at work introducing long requested features like Attachments.

This month, we’ll share a bit about the new API along with a huge showcase of apps/sites built with Svelte...

Let’s dive in!

What’s new in Svelte and SvelteKit

Attachments are essentially a more flexible and modern version of actions. Read more about their use-cases and improvements over actions in the PR (#1500) or in the Svelte docs (svelte@5.29.0, language-tools@109.7.0)
Do you have actions you love and want to use them as attachments? The fromAction utility lets you convert actions into attachments (svelte@5.32.0, #15933)
Generics are now allowed on snippets - improving typing and type hints (svelte@5.30.0, language-tools@109.8.0, #15915)
The Svelte extension will now allow you to add missing imports on save (language-tools@109.6.0, #2744)
State fields can now be declared inside class constructors (svelte@5.31.0, #15820)
Svelte is now XHTML compliant and the new fragments: 'html' | 'tree' option adds wider CSP compliance (svelte@5.33.0, #15538)
Client-side code is now allowed to run at the top-level of universal pages/layouts when SSR is disabled and page options are only boolean or string literals (kit@2.21.0, #13684)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Whimsy is a small game engine and a fantasy console for making interactive stories
DASHBOT is a 1v1 Space Robot Sprint Battle game for two players - with local and online modes
Kraa is a web-based markdown editor that does things a little differently
Shovel AI is a batch tool for interacting with large amounts of a text data with AI models
md.uy is a collaborative, local-first, peer-to-peer markdown editor
BringYourAI is a browser extension that provides instant codebase context on any AI chat website
Joe Malatesta figured out a way to present his film photos in a digital environment
Notion Avatar is a Notion-style avatar editor with Svelte 5 Runes
ORBITS is your second brain for who you know and who you meet

Learning Resources

Featuring Svelte Contributors and Ambassadors

In case you missed it, all the videos from Svelte Summit are released over the course of the next few days on Svelte Society YouTube. More on how that happened in last month’s blog post
Svelte Attachments Are Here And They’re Awesome by Joy of Code
SvelteBench (from Stanislav Khromov) shows how different AI models perform out of the box on Svelte 5 syntax - now updated with Anthropic’s new Claude 4 models
First look at GitHub Copilot Coding Agent - The $40/month AI developer that actually works! by Stanislav Khromov (video)
Truly Native Apps with Svelte? by Paolo Ricciuti

This Week in Svelte

Ep. 102 — Svelte+Lynx and Async Svelte
Ep. 103 — Attachments
Ep. 104 — Skeleton v3.0
Ep. 105 — Changelog

To Watch/Read

Svelte’s Next Big Change? (server components soon?) by Better Stack
I spent some time using Better-Auth and Polar with SvelteKit and this is what I think by elansx
Building md.uy - Peer-to-Peer Markdown Editor by mateor

Libraries, Tools & Components

Bits UI v2 released - with support for attachments, $props.id(), Shadow DOM, and more
Composably is a content processing plugin for Vite and SvelteKit with typed content + dynamic Svelte components at build time
Svelte Flow is now 1.0 - with Svelte 5 support, TSDoc and a bunch of new features to make interactive flow charts even better
fox ui is a collection UI components built with Tailwind 4 and Svelte 5 - now with a rich text editor
fluid-dnd is a drag and drop library for Vue, React and Svelte
sveltekit-password-protect is a simple utility to add a layer of protection to your websites
sveltekit-image-optimize is a simple utility that helps you create an endpoint of your svelte app that optimizes your images
svelte-inspect-value@0.7.0 introduces Panels - a fixed-position resizable panel / drawer that separates the debugging UI from flow of your website
nuqs-svelte is an unnoficial Svelte port of nuqs library - a type-safe search params state manager
sv-router is a type-safe SPA router with file-based or code-based routing
svelte-textcircle displays text in a circular layout with customizable animations and styling

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

Bringing Svelte Summit to the whole community

The Svelte team — Wed, 21 May 2025 00:00:00 GMT

This month’s Svelte Summit in Barcelona was a glorious celebration of the community. We had lively conversations, delightful dinners, and funny, imaginative and thought-provoking talks.

For everyone who couldn’t make it there in person, the conference also sold virtual tickets to the livestream, which give on-demand access to the talks. These ticket sales make it possible to (for example) hire AV technicians and ensure that the stream is reliable and high-quality. Running a conference is extremely difficult and time-consuming, and we’re very grateful to Svelte Society (Kevin in particular), Mainmatter, and everyone who bought a ticket for making the event a reality.

But we’ve heard from many of you that the talks should be freely available so that they can be shared with the widest possible audience and... we agree!

So the Svelte team has decided to sponsor the release of the talks, beginning this weekend. We’re able to do this because of the generous financial support so many of you have given us via opencollective.com/svelte, which also funds important development work on the project.

Subscribe to the Svelte Society YouTube account to be the first to know when the videos are released.

What’s new in Svelte: May 2025

Dani Sandoval — Thu, 01 May 2025 00:00:00 GMT

Only a week until Svelte Summit Spring 2025! If you can’t make it in-person to Barcelona, you can purchase a virtual ticket here.

But before that, we’ve got a few updates to highlight...

What’s new in Svelte and SvelteKit

The Svelte maintainers have been hard at work building out Asynchronous Svelte this month, but still found the time to ship some helpful features. If you’re interested in trying out the async branch, or just want to follow along with the development, check out feat: allow await in components #15844

Certain expressions will now be partially evaluated to improve runtime performance (svelte@5.27.0/5.28.0, #15494/#15781)
The Svelte CLI (sv) has added a --install <package-manager> flag to create and add to specify which package manager to use when running (cli@0.8.1, #531)
The two separate CloudFlare adapters have been merged into one: adapter-cloudflare (adapter-cloudflare@7.0.0, #13634)
adapter-vercel will now create symlink functions for each route, for better observability (adapter-vercel@5.7.0, #13679)

There were a number of fixes in SvelteKit too - including an improvement to the HandleServerError hook to give it access to getRequestEvent! (#13666)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here. Interested in all the new fixes in language tools? You can find them here.

Community Showcase

Apps & Sites built with Svelte

TableSlayer is an open source software for managing in person RPG games with digital displays (check out the video demo on Reddit)
Iconia is a free tool that understands natural language and responds with relevant icons from famous icon libraries
CMSDocs transforms your Google Docs into Blog CMS
Svelte Changelog v2 is out now and is a reimagined way of staying up to date on all the new changes in the Svelte ecosystem
Hookah UI is a visual configuration builder for the Hookah project
mockiapi is a mock API server that allows you to define endpoints, return custom JSON responses, and simulate real-world API behavior
soarSQL is an SQL editor made for analytical processing on Postgres, MySQL, and CSVs - powered by duckDB
Persona Simulator helps you practice your communication skills by chatting with different personas
Typo is a web-based markdown editor with formatting in codeblocks and typescript execution
FernOS is a lightweight operating system running inside your browser

Learning Resources

Featuring Svelte Contributors and Ambassadors

SvelteKit is the best way to build single page apps - and it just got even better! by Stanislav Khromov (Video)
Svelte London - April 2025
- Building cross-platform browser extensions with Svelte by Oliver Turner (10:52)
- Kioko: Coding CAD by Armel de Montgros and Soloman Azizi (43:00)

This Week in Svelte

Ep. 100 — Q&A with Rich Harris
Ep. 101 — Changelog

To Read

Graphite - an open source 2D procedural graphics editor built with Svelte - has released a product update blog post
Cloudflare Workers & SvelteKit: BetterAuth, Custom Domain, Google OAuth, OTP & Email - Securing Your Application by Jilles Soeters
Building a Real-time Dashboard with Flask and Svelte by Amir Tadrisi
Copying Nuxt’s useState in Qwik and Svelte by Jonathan Gamble

Libraries, Tools & Components

diaper is an advanced bottom sheet component for Svelte 5
mcp-svelte-docs is an MCP server that lets you search and access Svelte documentation with built-in caching
Version 4 of Anime.js - a popular JS animation library - has been released
DeepWiki has created a comprehensive introduction to the Svelte framework repository
Vite Static Assets Plugin is a Vite plugin that automatically scans your static assets directory, generates a type-safe TypeScript module with all asset paths to help during build or development time
Mode Watcher v1 provides simple light/dark mode management, now rewritten with first-class Svelte 5 support

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

What’s new in Svelte: April 2025

Dani Sandoval — Tue, 01 Apr 2025 00:00:00 GMT

With a couple minor releases of SvelteKit in the last month and a few more from Svelte itself, there’s a lot to be excited about this month. From new helper functions to new configuration options, we’ve got a lot to cover...

So let’s dive in!

What’s new in Svelte

The new idPrefix option for render makes client-side ID generation more reliable in the rare cases that multiple Svelte runtimes exist on a page (5.22.0, Docs, #15428)
State created in deriveds/effects can now be written/read locally without self-invalidation - reducing the number of “unsafe read”s significantly (5.24.0, #15553)
Derived statements are now writable (5.25.0/5.25.2, Docs, #15570 and #15581)
The Svelte CLI also got an upgrade to its code generation for more intuitive formatting (0.7.0, #380)
eslint-plugin-svelte v3 has been released. The main update is improved support for Svelte 5. Check out the CHANGELOG for more details.

There were also quite a few fixes to the language tools earlier in the month - so be sure to keep your plugins up to date!

What’s new in SvelteKit

reroute can now be called async - with an option to fetch if you need to pass along cookies or other request context (2.18.0/2.19.0, Docs, #13520 and #13549)
The new normalizeUrl helper provides people a way to normalize a raw URL that could contain SvelteKit-internal data (2.18.0, Docs, #13539)
getRequestEvent is a new function in $app/server that returns the current RequestEvent (2.20.0, Docs, #13582)
Updates to the cloudflare-adapter brings Wrangler 4 support, improved _headers and _redirects files, and support for specifically building for Cloudflare Workers Static Assets (5.1.0-7.0.0, CHANGELOG)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Fusion is a lightweight, self-hosted friendly RSS aggregator and reader
Brooks’ Law simulator visualizes how communication complexity grows as team size grows
ai-chatbot-svelte is a full-featured, hackable SvelteKit AI chatbot built by Vercel
raymarching-webgpu is a ray marching implementation using WebGPU and Svelte 5, shaders written in WGSL
Eurlexa lets you access and search EU regulations and directives instantly
Lars is the Wall Street Journal’s AI Tax Bot - built with Svelte and embedded into a React frontend
RT is a lightweight, ad-free Twitch frontend built with Tauri, Rust & SvelteKit
Atom Clicker is an engaging incremental game where you’ll build your own atomic empire
peasy provides modern web analytics without the clutter
svelte-lexical is a rich-text editor for Svelte and SvelteKit
sveltekit-epub-writer is an ergonomic book editor that lets you export to EPUB in one click

Learning Resources

Featuring Svelte Contributors and Ambassadors

Why re-renders hurt performance and how you can fix them in Svelte 5 by Stanislav Khromov
Runes and Global state: do’s and don’ts by Paolo Ricciuti
Learn How To Make Interactive 3D Apps With Svelte And Threlte by Joy of Code
Svelte London - March 2025 featuring:
- SvelteKit and SST by Andrico Karoulla
- Mythbusters! Svelte Ecosystem Edition by Willow (GHOST)

This Week in Svelte

Ep. 96 — durable objects
Ep. 97 — stick to botton
Ep. 97 — Changelog
Ep. 99 — Custom Select

To Watch

Deploying Svelte Kit on DigitalOcean App Platform (awesome Vercel alternative) + Tailwind by Elans Builds

To Read

Recursive Svelte Components by Martin Brandenburg
Building a Real-time Dashboard with FastAPI and Svelte by Amir Tadrisi Amir Tadrisi
A short guide to Async Components in Svelte 5 by Abdullah Bashir
SvelteKit 5: How to make code-based router, instead of file-based router by Max Core
Integrating tRPC with SvelteKit by Robert Soriano

Libraries, Tools & Components

Bun has added official support for Svelte as a frontend framework for their bundler
Skeleton v3.0 is now available - including Svelte 5 support, Tailwind 4 and a more modular structure
SaapsUI is a comprehensive Svelte component library designed for creating responsive, accessible, and beautiful user interfaces with minimal effort
SVAR Svelte v2.1 has added new UI components - including DataGrid and Gantt charts
cnblocks provides 50+ UI & Marketing blocks using Svelte 5, Tailwind CSS v4 and Shadcn Svelte
Edra is a Headless & ShadCN-Powered Rich Text Editor for Svelte Developers
Paraglide, the i18n library for supporting multiple languages in your Svelte app, release their 2.0 version
oRPC helps you build type-safe APIs for Svelte and TanStack Svelte Query
Sveltepress is a content centered site build tool, built on top of Sveltekit
Konva.js is a declarative 2D Canvas for Svelte apps
Svelte Inspect Value is a “JSON tree”-like value inspector
Svelte 5 Snippets offers reusable code templates to accelerate development and ensure consistent coding practices in VS Code

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

What’s new in Svelte: March 2025

Dani Sandoval — Sat, 01 Mar 2025 00:00:00 GMT

SvelteHack 2024 has ended and the winners were announced on February 9th. Congrats to all the winners who you’ll also find listed in the “Community Showcase” below.

But before we dive into that, let’s get to some updates!

What’s new in Svelte and SvelteKit

Native support for Websockets in SvelteKit is now available for testing! You can install the version of SvelteKit from the PR using pkg.pr.new and the PR number (How To Install, PR/Docs)
$props.id() provides SSR-safe ID generation - unique for each instance of a component (Svelte@5.20.0, Docs, #15185)
SvelteKit now supports an option for server-side route resolution. This means that instead of loading the whole routing manifest in the client, and doing the route resolution there, the server runtime is invoked for each route request (Kit@2.17.0, docs, pull request)
The values for cache-control and content-type headers are now validated in dev mode to help catch invalid values early (2.17.0, #13114)

For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs here and here.

Community Showcase

Apps & Sites built with Svelte

Faviconizer is a simple, functional favicon (.ico) converter made with SvelteKit
stocknear is an open source stock analysis & community platform (congrats on 2 years of development!)
Workouts is a simple and private app for tracking your strength training workouts
Perplexity Fast Chat is a modern web interface to interact with Perplexity AI and OpenAI models, featuring a unique deep research mode
exiftool-web is an exif data inspector tool, in the browser (via WebAssembly!)
Weekend Scanner helps you find long weekends by combining your weekends and holidays
Linklink is a link management tool for organising and sharing links
Multiplayer Globe App displays website visitor locations in real-time using Astro, Cloudflare and Redis
Mathesar is an intuitive spreadsheet-like interface that lets users of all technical skill levels view, edit, query, and collaborate on Postgres data directly
Squash lets you compress and convert your images to AVIF, JPEG, JPEG XL, PNG, or WebP
Segment Anything 2 in WebGPU is a WebGPU implementation of Facebook Research’s model

Svelte Hack Wizzbangery Wizard Winners

kunkun is an open source, cross-platform, extensible app launcher (like Raycast) - it’s also the winner of SvelteHack 2024 🏆
Infinite Turtles is a card game made with Threlte
Svudoku is a modern-looking Sudoku application that lets you enjoy solving both Classic and Killer Sudoku puzzles
Svelte Space is a TowerDefence clicker game made with Svelte 5, without canvas. Playable on different screens, Mobile or Desktop.
Haunted house is an old-school arcade game where you explore a haunted mansion full of ghosts. Control plasma bullets, use your wits and clear the whole house! Created only with Svelte 5.

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte Hack 2024 Winners Announcement Livestream featuring GHOST, Paulo and Dominik
20 Svelte Features You Missed During Advent Of Svelte by Joy of Code
Use any JavaScript or TypeScript Library in Svelte 5 (The Right Way) by Stanislav Khromov
Svelte London - February 2025

This Week in Svelte

Ep. 92 — Changelog and Showcase
Ep. 93 — Changelog, dynamic layouts with snippets
Ep. 94 — Go + Svelte as a hybrid SPA/MPA application
Ep. 95 — Changelog

To Watch

GitHub Copilot: the agent awakens uses SvelteKit as their example project 🙌🏼
Full Stack E-Commerce + Dashboard: Svelte 5, Cloudflare, Tailwind, Drizzle, Sqlite, 2025 by Lawal Adebola

To Read

How to Protect Your SvelteKit Routes by Yuki Ishii
Sharing Runes in Svelte 5 with the Rune Class by Jonathan Gamble
Mixed Signals with Svelte 5 from the FullMeasure Blog
Did Svelte 5 Get Runed with Complexity? by sobPilot
Background Jobs in SvelteKit with BullMQ by Ranjan Purbey

Libraries, Tools & Components

Svelte Form Builder helps you create forms with Shadcn-Svelte, Superforms and schema within minutes
shadcn-svelte-enhancements is a collection of additional components designed specifically for Shadcn-Svelte
lomer-ui provides standalone components for Svelte powered by Tailwind CSS
Vite Plugin Svelte Anywhere empowers developers to define reusable custom elements directly within their Svelte components
Svelte 5 + SvelteKit Sage is a custom GPT to get the best answers out of ChatGPT
ModalFileManager and PersonalKanban have been updated to work with Svelte 5 (and fix a large number of bugs)
components-pack provides photos-related UI components for Svelte 5, Vue 3, Astro 5 and vanilla JS

Svelte Hack Rune Ritualist Winners

SyncroState brings Svelte 5 reactivity DX to the multiplayer level. Built on top of Yjs, it’s a typesafe, efficient and dead simple way to manage multiplayer state. It is just like a normal $state but synchronised in realtime.
Twoslash Svelte is an extension of twoslashes/twoslash which supports Svelte. This will be beneficial for adding type hints to code blocks on any documentation website targeting Svelte.
svisx is a port of Airbnb’s visx to Svelte, bringing the power of D3 visualizations to the Svelte ecosystem.
Svelte Value Inspect is a “json tree”-like inspector inspired by the likes of react-json-view, and svelte-json-tree.
Flexiboards provides headless, reactive drag and drop components for Svelte 5.

Svelte Hack Migration Magician Winners

Svelte MapLibre GL lets you build interactive web maps effortlessly with MapLibre GL JS and Svelte 5.
svelte-ux is a collection of Svelte components, actions, stores, and utilities to build highly interactive applications.
rokkit is a data-driven, configurable, and themeable UI library built for use with Svelte. Rokkit controls are designed to be easily themeable, so you can match the look and feel of your project with minimal effort.
Svelte MiniApps is a collection of user-friendly tools rebuilt with Svelte 5 for enhanced speed and reliability
Roguelighter Engine is a free, open-source, easy-to-use game engine for 2D game development.

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

What’s new in Svelte: February 2025

Dani Sandoval — Sat, 01 Feb 2025 00:00:00 GMT

The Svelte developer experience got a huge upgrade this month with more exported types and better syntax highlighting in VS Code. Combine that with the huge releases from Storybook, Tailwind and Threlte... and you’ve got a pretty big month!

Let’s dive in 🐬

What’s new in Svelte

Non-numeric values can now be tweened by snapping immediately to the new value (5.17.0, Docs, #14941)
const tags are now allowed inside of a svelte:boundary (5.17.5, Docs, #14993)
<template> elements are now allowed to contain any child elements (5.18.0, Docs, #15007)
ClassValue is now exposed from svelte/elements (5.19.0, Docs), #15035)

What’s new in SvelteKit and Language Tools

Custom identifiers can now be invalidated on goto() navigation (2.16.0, Docs, #13256)
The postinstall script has been removed to support pnpm 10 (2.16.0, #13304)
- users should add "prepare": "svelte-kit sync" to their package.json in order to avoid the a warning upon first running Vite
PageProps and LayoutProps types are now provided (2.16.0, #13308)
The generics attribute is now supported for JSDoc (svelte2tsx-0.7.32/svelte-check-4.1.2, #2624)
Semantic document highlighting makes the document highlights based on semantic/syntactic meaning instead of the current word-based default by VSCode (language-server-0.17.9, Docs, #1408)

Community Showcase

Apps & Sites built with Svelte

Daily Tokki is daily personalized Korean learning delivered right to your inbox
svelte-tower-defence is a tower defense clicker game built with Svelte 5, without canvas, using only CSS transitions and the Runes
PraccJS lets you practice JavaScript with real-time code execution
Invoice-r calculates what you’re owed from the information you give and makes your invoice look good
Carry Fit is an online carry-on luggage compliance checker
Fiddle (currently in waitlist stage) lets you design, collaborate and experiment in code
Kener is a modern status page with batteries included
Open TLC is a free, open source CAT (Computer-Assisted Translation) tool
Mathesar is a secure, spreadsheet-like tool for Postgres data
Pile Commander is an open-source file manager for creative people
Hetzner Auction Browser is a better way to find the perfect server in Hetzner’s Server-Bidding marketplace

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte 5 And The Future Of Frameworks: A Chat With Rich Harris by Frederick O’Brien
Use any JavaScript or TypeScript Library in Svelte 5 (The Right Way) by Stanislav Khromov

Svelte Radio

This Week in Svelte

Ep. 89 — Sailkit
Ep. 90 — Svelte Radar VS Code Extension
Ep. 91 — Threlte 8

To Read

Dockerize SvelteKit with adapter-static and Nginx, Analyze and optimize your Vite bundle and End-to-end type safety with Svelte 5 and SvelteKit 2 by Hugo Sum

Libraries, Tools & Components

Svelte Radar is a VS Code extension that provides a visual overview of your project’s routing structure
Threlte 8 is out and is more performant, flexible and aligned with Svelte 5
Storybook 8.5 includes Svelte Storybook Test support - improving testing in Svelte CSF stories
SVAR for Svelte provides feature-rich Svelte UI Components
Tailwind CSS v4.0 has been released - with a new engine, simpler installation and more
Frizzante is a procedural, minimalistic and opinionated web server that uses Svelte to render web pages
svelte-5-dashboard is a boilerplate for Svelte 5 dashboards. Including alerts, avatars, custom formatting and more
dnd-kit-svelte is a Svelte 5 dnd-kit port
youva provides pagination, debounced search, sorting, filtering and caching for SvelteKit

That’s it for the review of Svelte’s first month of 2025! Let us know if we missed anything on Reddit or Discord.

Until next time 👋🏼!

What’s new in Svelte: January 2025

Dani Sandoval — Wed, 01 Jan 2025 00:00:00 GMT

From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there’s even more to look forward to... like the 10th Svelte Summit! Join the Svelte community online or in-person in Barcelona: May 8th and 9th.

Now let’s get to the news 👀

What’s new in Svelte

Snippets can now be exported from module scripts (5.5.0, Docs, #14315)
defaultValue and defaultChecked are now supported for inputs (5.6.0, Docs, #14289)
The loose parser mode creates a more modern AST for developer tools to consume (5.13.0, Docs, #14691)
A new “worker” exports condition helps better support bundling for worker-based environments (5.15.0, #14779)
The class attribute can now be an object or array, using clsx (5.16.0, Docs, #14714)

New/Updated Syntax

<svelte:boundary> is a new special element that can capture errors that occur from within its subtree during client rendering (5.3.0, Docs, #14211)
#each is now supported without as (5.4.0, Docs, #14396)
The new Spring and Tween classes in svelte/motion make it even easier to build custom animation (5.8.0, Docs, #11519)
The new outro option in unmount will play transitions before the component is removed from the DOM. (5.13.0, Docs, #14540)
The $inspect.trace rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (5.14.0, Docs, #14290)

Reactivity APIs

createSubscriber creates reactive values that depend on subscriptions (5.7.0, Docs, #14422)
The reactive MediaQuery class creates a media query and provides a current property that reflects whether or not it matches (5.7.0, Docs, #14422)
Getters and setters can now be bound to with bind (5.9.0, Docs, #14307)
The svelte/reactivity/window module exports reactive versions of various window values, each of which has a reactive current property that you can reference in reactive contexts (5.11.0, Docs, #14660)

What’s new in SvelteKit, Svelte CLI and Language Tools

The new init hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (2.10.0, Docs, #13103)
The new transport hook allows you to encode/serialize and decode/deserialize custom non-POJOs across the server/client boundary (2.11.0, #13149)
The new $app/state module replaces the existing $app/stores module but using Svelte 5 state. The migrate tool in the CLI/language tools have been updated to match (2.12.0, Docs, #13140)
bundleStrategy lets you choose between 'split', 'single' and 'inline' output options for JS and CSS files (2.13.0 and 2.15.0, Docs, #13173 and #13193)
The new sveltekit-adapter add-on for the Svelte CLI (sv) installs and replaces existing SvelteKit adapters (Docs, #346)
The language tools extensions will now make use of loose Svelte parser and provide better intellisense (109.4.0, #2631)

Adapter Updates

adapter-auto has added support for the bun language server (3.3.0, #12854)
adapter-cloudflare-workers now supports wrangler.json config files (2.7.0, #13151)
adapter-cloudflare will now generate an .assetsignore file for use with Cloudflare Workers Static Assets (4.9.0, #13109)

Community Showcase

Apps & Sites built with Svelte

Tokeko is an educational platform designed to help users understand and learn about different types of parsers, grammar structures, and parsing techniques
QuickFlags is a fast paced, simple, flag knowledge game
Hotspotter is an incentivized crowdsensing system that collects, maps, and visualizes WiFi and cellular data to pinpoint hotspots and dead zones for the effective visualization of network coverage
Writastic is an AI social media writing assistant to optimize your content with the best strategies of successful creators
Walle is a macOS chatbot app that lets you interact with Claude, GPT, and Gemini simultaneously
Fli.so is a free, modern open-source link shortener
VRDB is a comprehensive database for Meta Quest Store, App Lab, and VR games
sv-resize-image resizes images using just the browser
WickGPT is an online tool to generate fake clips of chatGPT responses
other.supply is a virtual vinyl shop that simulates the record-flipping experience

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte at Bloomberg (feat Julian Burgess) and Scott Tolinski on Svelte 5 Local First Development by Svelte Radio
Rich Harris’ North Star at JSNation US 2024
Perfect Svelte 5 code completion for any LLM - Claude, ChatGPT and GitHub Copilot by Stanislav Khromov
Svelte 5 Is Here! and View Transitions Are More Powerful Than You Think by Syntax

This Week in Svelte

Ep. 86 — Tabs component
Ep. 87 — GPU rendered components with svader
Ep. 88 — Live coding local storage

To Read

Building accessible sites with SvelteKit: seven practical tips by Antonio Sarcevic
How to Fix Unexpected Logout Issues in SvelteKit Caused by data-sveltekit-preload-data by Yuki Ishii
Svelte Job’s Svelte Salaries Report shows average and median salaries across remote, non-remote positions, locations, and seniority levels

To Watch

Build & Launch a Svelte Website in Just 15 Minutes! by NAD LABS
The Magic of Svelte by Jürg Hunziker, Vendure Conf 2024

Libraries, Tools & Components

The Svelte docs are now available in an LLM-friendly format (shout out to Stanislav Khromov for svelte-llm)
svelte-mainloop is awrapper for MainLoop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component (Reddit)
bsky-comments-svelte is a simple customizable component to add comments to your website using Bluesky
Svelte Mini Router is a declarative, minimal SPA router for Svelte 5, without SvelteKit
svelte-firebase-state simplifies Firebase integration in Svelte/Sveltekit applications by providing easy-to-use reactive state classes for managing Firestore and Realtime Database data
monoco-svelte lets you create custom (squircle) corners and borders for Svelte components
svelte-audio-waveform transforms an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more
Svader creates GPU-rendered Svelte components with WebGL and WebGPU fragment shaders

That’s it for this huge month in Svelte! Let us know if we missed anything on Reddit or Discord.

Happy new year! 🥳

What’s new in Svelte: December 2024

Dani Sandoval — Sun, 01 Dec 2024 00:00:00 GMT

I can’t believe it’s already the last newsletter of the year! So much has happened in the Svelte community - from two great Svelte Summits to the release Svelte 5 🎉

As we look forward to the next year and watch the Svelte team do 24 features in 24 days, let’s dive into what’s new in the past month...

What’s new in Svelte

The bugfix versions in 5.1.x and 5.2.x addressed a bunch of issues reported by the community. So if you’re noticing anything weird, make sure you upgrade to the latest version and, as always, check out the CHANGELOG for all the bug fixes.

The features since last month can be found below:

ContentVisibilityAutoStateChangeEvent has been added to element definitions (5.2.5, MDN Docs, #14373)

What’s new in SvelteKit, Svelte CLI and Language Tools

isActionFailure is a new helper method to check if a variable is an instanceof ActionFailure - helpful for debugging parsing of user input (2.8.0, #12878)
const load = ... declarations will now be typed automatically (svelte2tsx-0.7.23, #2540)
The CLI will now include a jsconfig.json in the ‘no type checking’ template (0.6.2, #290)
When installing dependencies, the CLI will display the package manager’s output (0.6.3, #305)
A short description will now be shown for each add-on in the CLI menu (0.6.5, #299)
Instance types will now be provided automatically in Svelte 5 (svelte2tsx-0.7.23, #2553)
A code lens indicator for “runes mode” will now appear atop a file when detected - “legacy mode” when not (language-server-0.17.4, #2554)

Community Showcase

Apps & Sites built with Svelte

Unsubscribe is an interactive site that makes fun of how hard it is to unsubscribe from things on the internet these days
Dealcrane helps technology shoppers find discounts across popular internet shopping sites
Raw Web is a search engine for indexing the content of independent, especially personal, websites
Jovian Moon’s personal site features an interactive rocket ship to fly you straight to Jupiter (or anywhere else you want to go)
Font Preview makes it easy to analyze and explore font characters in the browser
Dunks & Threes is a professional basketball analysis platform that provides data-driven NBA predictions
AdresseDuBien is a small utility to find addresses for real estate ads (for France) with a Libre Map implementation
PixelAttack takes an image, pixelizes it and makes the pixels fight each other
NeoHtop is a modern, process monitoring tool that combines the power of terminal-based system monitors with a clean, desktop-native UI
WebVM is a Linux virtual machine that runs in your browser
Sveltris is Tetris built entirely in the Svelte REPL

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte 🧡 is a Bluesky feed to keep up to date on Svelte news in that application
SvelteKit Streaming: The Complete Guide by Stanislav Khromov
Remote Workshop: Svelte 5 & Runes is taking place February 6-7th, 2025 and taught by Paolo Ricciuti
Svelte 5: In Action | Build A Tasks App by Syntax
Svelte Society London - featuring Paolo with his talk, Herd your async tasks!

This Week in Svelte

Ep. 83 — You might not need an effect
Ep. 84 — manifest.build
Ep. 85 — @sheepdog/svelte

To Read

Web software development (2024) is a self-study course for all things web development and features Svelte heavily
Async Fetching in Svelte 5 by Jonathan Gamble
Cross-Origin-Isolation with SvelteKit, Vite, and Firebase by Captain Codeman
The $effect.tracking rune by Matt Simon

Libraries, Tools & Components

Component Libraries

shadcn-svelte now supports Svelte 5 and has brand new docs to go with the update
Zag now supports Svelte 5
Skeleton V3 is now in beta (and, as expected, supports Svelte 5)
Storybook 8.4 now supports Svelte 5 and CSF natively with component testing built-in

Icon Libraries

svelicon converts Iconify SVG icons to type-safe components with one command
moving icons is a collection of animated icons based on the lucide icon library
Monicon is an all-in-one icon library that provides 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome

Everything Else

Svelte Multitone Image is a simple image renderer to apply multitone effects for Svelte
number-flow is a component to transition, format, and localize numbers
sveltednd is a lightweight, flexible drag and drop library for Svelte 5 applications
ShadEditor is a highly extensible text editor for svelte made with TipTap and ShadCN UI
Tipex is an advanced rich text editor based on Tiptap and Prosemirror
svelte-bundle is a tool for bundling Svelte components into a single HTML file
svelte5-router is an SPA router that allows you to divide & conquer your app with nested routers
@sheepdog/svelte is a library to manage async tasks and concurrency with ease.

That’s it for this huge month in Svelte! Let us know if we missed anything on Reddit or Discord.

Until next ~~time~~ year! 👋

Advent of Svelte

The Svelte team — Sun, 01 Dec 2024 00:00:00 GMT

Last December, Svelte Society presented an advent calendar’s worth of festive Svelte-themed code challenges.

This year, we’re turning it around: you get to relax while we take on a challenge. We’ve set ourselves a goal of releasing one thing a day from here until Christmas, whether it’s a new feature in Svelte or SvelteKit or an improvement to the website.

Follow @svelte.dev and @sveltesociety.dev and check back every day to see what we’ve been cooking up.

Day 1: error boundaries

This is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering.

Day 2: each without as

If you just want to render something in an {#each ...} block n times, and don’t care about the value, you can now omit the as part.

docs
demo

Day 3: exported snippets

You can now export snippets from a component’s <script module>, for use in other components, as long as those snippets don’t reference anything belonging to the component instance.

docs
demo

Day 4: form control default values

When you reset a form, the value of each <input> element reverts to its defaultValue. This is normally the empty string, but you can now control it directly in your template.

docs
demo

Day 5: MediaQuery, prefersReducedMotion and createSubscriber

It’s a three-in-one kind of day. new MediaQuery(...) gives you an object with a reactive current property that’s true when the media query matches. prefersReducedMotion is an instance of MediaQuery that matches if the user has expressed a preference for reduced motion, helping you build accessible apps. Under the hood, both are using the createSubscriber mechanism, which gives you an easy way to set up event listeners when a value is read inside an effect.

Day 6: Spring and Tween

We now have modern state-based alternatives to the spring and tweened stores of old. Smooth!

A lot of you disliked the dropdown navigation for the tutorial — essentially a giant, unwieldy <select> element — so we’ve replaced it with a hierarchical menu. Because it’s all just <details> and <a> elements, we get accessibility features for free. You can even navigate the tutorial with JavaScript disabled!

tutorial

Day 8: function bindings

You can now do bind:value={get, set} to validate and transform bound values. This works for all bindings, even on components.

docs
demo

Day 9: error and warning documentation

When Svelte emits a warning or error (whether at build time, when the compiler is running, or when the app is running on the server or in the browser) it will now be accompanied by a link to the corresponding entry in the documentation containing a description (which is omitted from production builds, to save bytes) and — in some cases, with more to come — more details on why it happened and what you can do to fix it.

demo

Day 10: SvelteKit init hooks

A lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an init function from hooks.server.js and hooks.client.js that will be awaited before any other stuff happens.

docs

Day 11: svelte/reactivity/window

Today we added a whole new module. svelte/reactivity/window exports a variety of reactive values like innerWidth, innerHeight, scrollX, scrollY and so on. Like the MediaQuery introduced on day 5 and Spring and Tween from day 6, these are class instances with a reactive current property that you can use in your template and in deriveds/effects. Behind the scenes, Svelte handles all the event listener stuff.

docs
demo

Day 12: custom type transport in SvelteKit

A load function that runs on the server in your SvelteKit app isn’t restricted to returning things that can be serialized as JSON. You can return Maps, Sets, Dates, objects with cyclical references, even Promises, and SvelteKit will handle the serialization on the server and deserialization in the browser.

As of today, you can also return things that aren’t built in to the language, such as classes containing state, or classes returned by your database ORM library, or whatever — just export a transport object from your hooks.js that provides an encode and decode function.

docs
demo

Day 13: rise of the robots

For those of you using LLMs to help you write code — via Cursor or Copilot or Claude or Bolt or v0 or some other interface — we now publish the documentation in a selection of robot-friendly llms.txt files. This is experimental and will evolve over time, but by way of example here’s a snake game built by Sonnet 3.5 with no additional prompting.

Thanks to Didier Catz and Stanislav Khromov for building this!

docs

Day 14: unmount with outros

Now, if you need to programmatically mount and unmount a component, you can now pass an outro: true option to unmount to play transitions before it is removed from the DOM.

docs
demo

Day 15: debugging superpowers

The new $inspect.trace(...) rune gives you detailed information about which state changes caused a derived or effect to re-run.

docs
demo

Day 16: $app/state

SvelteKit’s $app/stores module, which gives you a way to access information about (for example) the current page, now has a modern Svelte 5 state-based counterpart: $app/state. It exposes all the same information, but using fine-grained state, and without the clunky $ prefix. $app/stores is now deprecated, and will be removed in SvelteKit 3 next year.

You can migrate automatically by running the following command in your SvelteKit app:

npx sv migrate app-state

Day 17: better IntelliSense

The parser used by the language tools that power things like the Svelte for VS Code extension is the same one used by the Svelte compiler. Until today, it would fail if it encountered a syntax error, making it hard to provide things like autocomplete while you were in the middle of writing code.

We just fixed that. Install the latest version of Svelte in your project, make sure your extensions are up to date, and feel the wind in your hair as you write your components.

demo video

Day 18: playground hovers

If you’ve ever wondered how the Svelte compiler works, today’s update is for you. If you go to the playground and open the AST output tab, you’ll see the abstract syntax tree that the compiler operates on. As of today, hovering over code in the editor will highlight the corresponding section of the AST and vice versa. Clicking on a piece of code will expand the tree and scroll to the AST.

The JS and CSS output tabs have also been upgraded — they now use sourcemaps to highlight the output code that corresponds to a given piece input, where applicable, and vice versa. We plan to use this to improve the sourcemaps themselves, which over time will result in smoother debugging when you’re building Svelte apps.

Day 19: single-file SvelteKit bundles

By default, SvelteKit uses a technique called code-splitting so that you only load the JavaScript and CSS you need for the page you’re currently on. This helps make sure your app loads fast even if it grows very large.

In some situations, code-splitting is unhelpful — what you really want is a single .js file and a single .css file for your entire app. SvelteKit now supports this with the output.bundleStrategy option.

docs
example

Day 20: Vim mode

The playground had a secret Vim mode that you could activate by appending ?vim=true to the URL, but it was buggy. We’ve fixed it, and added a toggle to the playground and the tutorial that remembers your preference between visits. But don’t worry: unlike normal Vim, you can quit by turning it off again (or closing the tab).

Day 21: hash-based routing

SvelteKit now supports hash-based routing, in addition to the default pathname-based routing. This can be useful for purely client-side apps (including those you might build with Electron or Tauri), or situations where you don’t control the webserver and need to put everything on a single page.

It comes with caveats — you can’t use server-rendering (or any server logic), and you need to make sure all your internal links start with /#/ or they won’t work. Other than, it’s just like any other SvelteKit app.

docs
demo

Day 22: self-contained apps

Following the introduction of the bundleStrategy option on day 19, and hash-based routing yesterday, we now have the ability to generate fully self-contained apps with the bundleStrategy: 'inline' option. Together with Vite’s assetsInlineLimit option, it’s possible to put an entire SvelteKit app — code, styles, fonts, images, audio and everything else — inside a single .html file that you can share with people on a floppy disk.

Day 23: download from playground

We’ve added a ‘download app’ option to the toolbox in the playground — selecting it will zip up the app, along with any packages you’ve imported, and download it to your machine so you can continue working on it in your editor of choice.

playground

Day 24: clsx built in

Svelte now uses clsx to parse class attributes, meaning you can use objects and arrays to conditionally add and remove classes. It’s much more powerful and flexible than the class: directive, and — since this is Svelte — you still get dead code elimination of unused CSS. This feature is particularly useful for all you Tailwind-heads.

And that’s a wrap! Thanks for following along, everyone, and Merry Christmas to all who celebrate.

What’s new in Svelte: November 2024

Dani Sandoval — Fri, 01 Nov 2024 00:00:00 GMT

In case you missed the announcement post, the brand new omnisite or the maintainers shipping it LIVE during Svelte Summit... Svelte 5 is out!

Also announced at Svelte Summit was SvelteHack 2024: A Svelte Hackathon (with not-so-svelte prizes). The submission period ends January 9 and only projects started after October 18th are eligible. So get those $s ready and start hacking!

Since the release of Svelte 5, there’s already been one minor version to introduce a couple of helpful features. We’ll dive into those - along with a number of updates across the CLI, SvelteKit and more - in this month’s roundup...

What’s new in Svelte

If you’ve only recently migrated to Svelte 5, check out the last few months of updates for all the features that have gone into this release. For this month, you’ll see some marked -next.XXX. These changes were in the 5.0 release.

Snippets can now be used to fill slots (5.0.0-next.262, #13427)
hidden until-found and beforematch are now available on DOM elements (5.0.0-next.266, MDN Docs, #13612)
Breaking: State mutations are not allowed in logic block expressions (5.0.0-next.269, #13625)
getContext() is now allowed within $derived runes (5.1.0, Docs, #13830)

To see all the amazing work that has gone into making the Svelte compiler better - including everything that went into making migrations easier - check out the CHANGELOG.

What’s new in SvelteKit, Svelte CLI and Language Tools

adapter-auto now supports the Bun package manager (3.3.1, #12854)
The Svelte CLI now supports a number of add-ons for new and existing projects. You can find the entire list of add ons in the CLI Repository or by running npx sv create from your command line.
The Svelte extension now provides a Svelte 5 component migration command (extensions-109.1.0)

Community Showcase

Apps & Sites built with Svelte

DocumentCloud is an all-in-one platform used by newsrooms around the world to manage primary source documents
Chord is an app for recording podcasts and interviews in high quality
Monokai.pro uses Svelte 5 now (See the Reddit Post for more details)
svelte audio visualizations are useful for visualizing voice input and output
avi12’s YouTube extensions are great examples of how Svelte can be used in Chrome extensions
Multy is a simple tool that allows you to create a list of URLs, and share it with a single link
BlackJack is a card game built with Svelte 5, showcasing Svelte features for educational and demonstration purposes

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte Summit Fall 2024 was a blast! Keep an eye out on this playlist to see all the talks split up into individual videos
Svelte 5 Basics - Complete Svelte 5 Course for Beginners by Syntax
Reduce your SvelteKit & Svelte 5 bundle sizes with server load functions by Stanislav Khromov

This Week in Svelte

Ep. 79 — Changelog, Global/shared state, Kampsy-ui
Ep. 80 — Changelog, formgator
Ep. 81 — Changelog, Inertia.js
Ep. 82 — Changelog, Migration guide

To Read

Speed of Svelte reactive bindings vs keyboard events by Zell Liew
SvelteKit + Passkeys by Passlock
Local-First Web Development with Replicache: Building smooth user experiences by Shootmail
10 game-changing tools that level up Svelte developers in 2025 by Sébastien Conejo

To Watch

Svelte 5 Is Like React, But Better by Theo - t3․gg
JavaScript framework reinvents itself… Did “runes” just ruin Svelte? by Fireship

Libraries, Tools & Components

Svelte 5 testing example is a good example project demonstrating how to test Svelte 5 applications with Vitest
Origin UI - Svelte is an extensive collection of copy-and-paste components for quickly building app UIs
Cancellable is a building block adds three reactive attributes to button and anchor elements to create a more consistent user experience across browsers and platforms
svelte-simple-router is a client-side router made for Svelte 5
svelte-openai-realtime-api is a Svelte component for using the OpenAI realtime api
FlyonUI is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins
Svelte-Next automates Svelte version updates
SvelteKit Dynamic Component Load demo shows how you can dynamically load different Svelte components depending on what content your backend API delivers
Tzezar’s datagrid is an easy to use, easy to customize, datagrid made in Svelte 5
svelte-bundle is a tool for bundling Svelte components into single HTML files (with SSR!)
svelte-virtuallists keeps your tables and lists efficient and fast: only render the visible items, instead of displaying all your data in large lists
Sveltick is a lightweight traffic-tracking library for your Svelte apps

That’s it for this huge month in Svelte! Let us know if we missed anything on Reddit or Discord.

Until next time 👋

Introducing the new Svelte CLI

Ben McCann — Thu, 24 Oct 2024 00:00:00 GMT

We’ve just released sv, a new Command Line Interface (CLI) for creating, enhancing, and upgrading Svelte projects.

One of the most common question we hear is “how do I set up Tailwind on my new project?”. Tailwind has SvelteKit documentation, but it lists eight steps. While the community-led svelte-add project could automate the process, few knew about it.

Introducing sv at Svelte Summit Fall 2024

Now, we’re offering that functionality via our own CLI, directly within the project creation screen. And not just for Tailwind — we have built-in add-ons for formatting, linting, testing, setting up databases and auth and i18n and more. Just run npx sv create and follow the prompts:

$ npx sv create

┌  Welcome to the Svelte CLI! (v0.5.8)
│
◇  Where would you like your project to be created?
│  my-new-app
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◆  What would you like to add to your project? (use arrow keys / space bar)
│  ◻ prettier (https://prettier.io)
│  ◻ eslint
│  ◻ vitest
│  ◻ playwright
│  ◻ tailwindcss
│  ◻ drizzle
│  ◻ lucia
│  ◻ mdsvex
│  ◻ paraglide
│  ◻ storybook
└

You can also run npx sv add to apply add-ons to existing projects. In the near future, we will also be supporting add-ons contributed by the community within sv. If you’re interested in building one, please subscribe to the issue in the CLI repository to be notified when third party add-ons are supported.

It doesn’t stop there. Over time, Svelte has accumulated a handful of CLIs: svelte-check type-checks your project from the command line, npx svelte-migrate helps you upgrade to new major versions, and in the future we might have even more capabilities. Remembering the package name of each tool is cumbersome, which is why we unify the experience under one roof, sv. That means you can now run sv migrate svelte-5 to upgrade your Svelte 4 projects to Svelte 5. (The migration functionality can also be found in Svelte for VS Code as well as in the playground.)

A huge thank you to Christopher Brown (chbrown) who donated the sv package name on npm to make this CLI possible. This package merges the previous create-svelte and community-led svelte-add tools into a single package. Thank you to Manuel (manuel3108) and Adrian (CokaKoala) who recently took over maintenance of the svelte-add project and have joined as the newest Svelte maintainers in making this project an official part of Svelte. Also thank you to J (babichjacob) for creating the svelte-add project and successfully stewarding it for years as an important part of the Svelte community.

To see the CLI in action, check out this demo from Ben Davis and t3.gg...

Introducing sv at Svelte Summit Fall 2024

...or run npx sv to try it out yourself.

Svelte 5 誕生

The Svelte team — Tue, 22 Oct 2024 00:00:00 GMT

およそ18ヶ月の開発を経て、そしてたくさんのコントリビューターによる数千ものコミットによって、ついに Svelte 5 は安定版(stable)になりました。

このプロジェクトの歴史上、最も重要なリリースとなります。Svelte 5 は根本から書き直されました: あなたのアプリはより高速に、よりサイズが小さく、そしてより信頼性が高くなります。あなたはより一貫性があり、よりイディオマティックなコードを書くことができます。Svelte を使用したことがない方からすると、学ぶべきことがより少なくなりました。

それにもかかわらず、Svelte はほぼ完全に Svelte 4 と後方互換性があります。ユーザーの多くは、最初のアップグレードを完全にシームレスに行うことができるでしょう:

{
	"devDependencies": {
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"svelte": "^4",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"svelte": "^5",
		// …
	}
}

What is Svelte?

Svelte is a framework for building user interfaces on the web. It uses a compiler to convert declarative component code, based on HTML, CSS and JavaScript, into tightly optimised JavaScript.

Because the compiler shifts a lot of the work out of the browser and into npm run build, Svelte apps are small and fast. But beyond that, Svelte is designed to be an enjoyable and intuitive way to build apps: it prioritises getting stuff done.

The team behind Svelte also maintains SvelteKit, an application framework that handles routing and data loading and server-side rendering and all the gory details that go into building modern websites and apps.

What changed, and why?

For one thing, we’ve overhauled our website. You can read more about that here.

As for Svelte itself, we’ll cover the why first. We’re not fans of change for change’s sake — in fact, Svelte changed less than any other major framework between 2019 (when we launched Svelte 3) and now, which is an eon in front end development. And people really liked Svelte 3 and 4 — it routinely tops developer surveys of satisfaction.

So when we make changes, we don’t make them lightly.

With more and more people building more and bigger applications with Svelte, the limitations of some of our original design decisions started to become more apparent. For example, in Svelte 4, reactivity is driven entirely by the compiler. If you change a single property of a reactive object in Svelte 4, the entire object is invalidated, because that’s all the compiler can realistically do. Meanwhile, other frameworks have adopted fine-grained reactivity based on signals, leapfrogging Svelte’s performance.

Equally, component composition is more awkward in Svelte 4 than it should be, largely because it treats event handlers and ‘slotted content’ as separate concepts, distinct from the props that are passed to components. This is because in 2019 it seemed likely that web components would become the primary distribution mechanism for components, and we wanted to align with the platform. This was a mistake.

And while the $: construct for reactively re-running statements is a neat trick, it turned out to be a footgun. It conflated two concepts (derived state and side-effects) that really should be kept separate, and because dependencies are determined when the statement is compiled (rather than when it runs), it resists refactoring and becomes a magnet for complexity.

Svelte 5 removes these inconsistencies and footguns. It introduces runes, an explicit mechanism for (among other things) declaring reactive state:

let count = 0;
let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);

Interacting with state is unchanged: with Svelte — unlike other frameworks — count is just a number, rather than a function, or an object with a value property, or something that can only be changed with a corresponding setCount:

function function increment(): voidincrement() {
	let count: numbercount += 1;
	var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
@sincev0.1.100log({ count: numbercount });
}

Runes can be used in .svelte.js and .svelte.ts modules in addition to .svelte components, meaning you can create reusable reactive logic using a single mechanism.

Event handlers are now just props like any other, making it easy to (for example) know whether the user of your component supplied a particular event handler (which can be useful for avoiding expensive setup work), or to spread arbitrary event handlers onto some element — things that are particularly important for library authors.

And the slot mechanism for passing content between components (together with the confusing let: and <svelte:fragment> syntax) has been replaced with {#snippet …}, a much more powerful tool.

Beyond these changes are countless improvements: native TypeScript support (no more preprocessors!), many bugfixes, and performance and scalability improvements across the board.

How do I upgrade?

If you’re currently on Svelte 3, begin by migrating to Svelte 4.

From there, you can update your package.json to use the newest version of svelte and ancillary dependencies like vite-plugin-svelte.

You don’t have to update your components immediately — in almost all cases, your app will continue working as-is (except faster). But we recommend that you begin to migrate your components to use the new syntax and features. You can migrate your entire app with npx sv migrate svelte-5, or — if you’re using VS Code with the Svelte extension — you can migrate components one at a time by selecting ‘Migrate Component to Svelte 5 Syntax’ in your command palette.

Svelte has a large and robust ecosystem of component libraries that you can use in your applications such as shadcn-svelte, Skeleton, and Flowbite Svelte. But you don’t have to wait for these libraries to upgrade to Svelte 5 in order to upgrade your own application.

Eventually, support for Svelte 4 syntax will be phased out, but this won’t happen for a while and you’ll have plenty of warning.

For more details, see the comprehensive Svelte 5 migration guide.

Our new CLI

Along with a new version of Svelte, we have a new Command Line Interface (CLI), sv, to go with it. You can learn all about it in the announcement blog post.

What’s next?

We plan to release a new version of SvelteKit in the near future that takes advantage of the new Svelte 5 features. In the meantime, you can use Svelte 5 with SvelteKit today, and npx sv create will create a new SvelteKit project with Svelte 5 installed alongside it.

After that, we have a laundry list of ideas we want to implement in Svelte itself. This release is the foundation for many improvements that would have been impossible to build on top of Svelte 4, and we can’t wait to roll up our sleeves.

The Omnisite

Rich Harris — Mon, 21 Oct 2024 00:00:00 GMT

Launching Svelte 5 and the brand new sv CLI wasn’t enough: we’ve also released a brand new website. You’re looking at it.

Up until now, we’ve maintained multiple different sites under the svelte.dev domain — the main site, for Svelte itself, along with kit.svelte.dev and learn.svelte.dev. This had some minor benefits, but was mostly a nuisance:

inability to search across sites
subtly different navigation
potential for broken links (at build time, SvelteKit automatically validates that every internal link is correct, but links to other sites are a different matter)
preferences such as dark mode are not shared between sites
navigating between (for example) documentation and the tutorial involves a full page reload

From an implementation perspective, keeping multiple sites in sync proved to be a headache.

Having everything under a single roof means you’ll have an easier time finding the information you need. Right now, the site includes documentation for Svelte and SvelteKit; soon, it will also cover the CLI and additional packages like vite-plugin-svelte.

New look

We’ve also given the site a facelift. Our logo and hero artwork (‘the machine’), designed by the brilliant Achim Vedam, are unchanged — these, and the Svelte orangey-red colour, are still the cornerstones of our visual identity.

But many other aspects of the site have been cleaned up, starting with the five Bs — boxes, backgrounds, borders, box-shadows, bold text — which are tempting to overuse when organising information on a page. By getting rid of most of these and simplifying our colour palette, the site is calmer, more cohesive and less cramped.

We’ve also updated our button styles so that they actually look like buttons (a radical concept in modern UI design, unfortunately).

What the font?

Of course, the most salient difference is the typography. Previously, we used Overpass for everything except code — logo, headers, UI elements and body copy. It’s surprisingly versatile given its origins as an adaptation of Highway Gothic (the typeface used on road signs in the US since 1948, aside from a brief flirtation with Clearview), but it’s really not meant to be used for everything. We found ourselves making all sorts of ad hoc adjustments (tweaking colours, casing, line heights, spacing, weights and so on) and breaking other design rules (misaligning copy, adding unnecessary borders) to create hierarchy and reduce monotony. We needed a change.

At the same time, we couldn’t bring ourselves to look the same as every other documentation site. Modern web design is stiflingly anodyne: everything is boxes, purple glowy nonsense, and the same handful of sans serif typefaces.

We should find that last part strange. Open any book or magazine and it’s overwhelmingly likely that it will have been set in a serif typeface. There’s a reason for that: serifs make individual letters more distinct, aiding readability, and help to define the type’s personality.

On screens, serif type is less common. That’s partly for historical and technological reasons: on the lower resolution screens of yore, particularly on Windows with its inferior font rendering, serifs lack definition and make readability worse. But most users today have much sharper screens, making this less of an issue. Indeed, most newspaper and magazine websites, and many blogs, use serifs for their body copy.

I suspect the real reason is mostly cultural: because we’ve come to associate serif type with the printed word, it is viewed as less modern. Conversely, sans serif type is associated with digital products.

I don’t know about you, but I’ve come to associate digital products with unreliability: with bugs, cookie banners, exploitative business models, a disregard for privacy, planned obsolescence, and the many other sins of the technology industry.

I want the things I use to have analog sensibilities. I like things that feel weighty, that have an almost physical presence. (Svelte’s HTML-first design, and ‘the machine’, are, in a way, manifestations of this, even though we are inescapably a digital product.)

Above all, I want a web that isn’t so damn homogeneous.

So our new site uses a selection of typefaces:

DM Serif Display for headings
EB Garamond for body copy, falling back to Georgia on low-resolution screens
Fira Sans for UI elements
Fira Mono for code

We know this is a controversial choice! Many people today engage with the written word almost exclusively through screens, and so the sight of serif typefaces might seem offensively strange. It may take some getting used to. We also recognise that there may be some legitimate readability concerns for some people with some combinations of operating system/screen/dark mode preference, and so we beg your understanding while we get everything just so.

Contributing

As with any big update, there are a few details that still need polish, some of which may have escaped our notice until now. The codebase is now open source, and we welcome your contributions.

What’s new in Svelte: October 2024

Dani Sandoval — Tue, 01 Oct 2024 00:00:00 GMT

It’s October! Which can only mean one thing... Svelte Summit Fall is only 19 days away! Stay up to date with the latest Svelte Summit news by subscribing to its official newsletter or follow along during the stream on the Discord.

Thanks to the number of folks who have been trying the Svelte 5 release candidates, the maintainers have been hard at work in addressing bugs and implementing performance improvements for the upcoming release. This month, we’ll cover the most notable changes along with the many apps, resources and libraries that the community has created over the last few weeks.

What’s new in Svelte

Have you been wanting to migrate your project to Svelte 5? Want to test out the migration tool and give the team feedback? Then you should give the svelte-migrate tool a try! npx svelte-migrate svelte-5 is all you need to get started. If you run into any problems, please file an issue.

Here’s what else is new...

Legacy components can now be manually instantiated asynchronously with the sync option (5.0.0-next.237, #12970)
The each block is now much better in SSR mode - removing an unnecessary declaration and caching the length of the array before iterating over it (5.0.0-next.242, #13060)
A callstack will now appear if an infinite loop is detected - with the last ten effects printed out - in development mode (5.0.0-next.246, #13231)
Projects that use @sveltejs/enhanced-img should see a much smaller bundle thanks to module variables being inlined into the template (5.0.0-next.246, #13075)
There are now a11y warnings for <button> / <a> elements that are missing an aria-label and content (5.0.0-next.250, #13130)
Animations now take into account zoom when calculating transforms (5.0.0-next.254, #13317)
<svelte:self> is now deprecated in runes mode. It’s not necessary since components can now import themselves (5.0.0-next.256, #13333)
svelte-check, the CLI is used by almost every Svelte project, is now much smaller (repo, post)

Curious to see all that the maintainers have been up to in getting Svelte 5 production ready? Check out the CHANGELOG to see all the fixes - big and small!

What’s new in SvelteKit and Language Tools

SvelteKit now suports typed arrays in load functions. It’s “not something to over-use, since it uses base64 encoding which is 33% larger than the raw data, but useful when you need it”(2.6.0, #12716)
Components typed through Svelte 5’s Component interface get proper intellisense (extensions-109.0.1)

Community Showcase

Apps & Sites built with Svelte

svelte0.dev lets you generate Svelte UIs using shadcn/ui via a text prompt
Mini Spreadsheet Component is a great introduction to how reactivity works in Svelte
Poof is a self-destructing notes app that includes features like an optional to do list, email alerts and deleting after a specific date
kunft is a cloud platform for deploying docker containers and apps directly from GitHub
quickprompt is a browser extension to make saving and retrieving ChatGPT prompts easy
Dither is a lo-fi GIF chat app inspired by Return of the Obra Dinn and Meatspac.es
cobalt helps you save anything from your favorite websites: video, audio, photos or gifs
YouTube Looper is a custom loops extension for Youtube videos
LeetLink is a linktree-a-like with customizable themes
WhatChord is a chord finder for piano
AIUI is a web UI for OAI-Compatible APIs

Learning Resources

Featuring Svelte Contributors and Ambassadors

Dockerizing Your SvelteKit Applications: A Practical Guide by Stanislav Khromov
Is Local First the future of web development?, The hidden benefit of upgrading to Svelte 5 - smaller bundle sizes and SvelteKit Streaming Explained: When and How to Use It - Videos by Stanislav Khromov
Svelte 5 - everything about the new APIs with Simon Holthausen at CITYJS CONFERENCE
Learn How To Use Svelte 5 Snippets by Joy of Code
Svelte London - September 2024 feat. maya with “The Joy of Side Projects ✨”

This Week in Svelte

Ep. 74 — Changelog, race and maybeStream, svelte:component obsolete
Ep. 75 — Changelog, $props, $state
Ep. 76 — Changelog, svelte-fsm, script module, trailing slash
Ep. 77 — Changelog, Context API, JSX and Single FIle Components
Ep. 78 — Changelog, Indeterminate checkbox, classes and actions

Svienna 09/2024

How to embrace Zod in your SvelteKit by Sasan Jaghori
Dates an intersection of a romantic story and Dates in JS by Domenik Reitzner
Svelte 5: Why the hell did you do that by Simon Holthausen

To Read

My thoughts on upgrading a ~15,000 LOC project to Svelte 5 by /u/practisingdeeplurk
How to Publish an Unbundled Svelte Package to npm by Matthew Davis
Migrating YouTube Looper to Svelte 5 by Wilker Lucio
Breaking out of Svelte’s reactive statements by Zell Liew
Data Visualizations using Svelte and D3 by DataVizSvelte

To Watch

Sveltekit Data Fetching in 2024 Explained by Ben Davis
DB or not DB? and Github issues as CMS? by With Svelte
Crash course on Sveltekit Superforms and Build a Full-stack Ecommerce Platform with Sveltekit, Vendure, Houdinigql, Shadcn-svelte by Lawal Adebola

Libraries, Tools & Components

Tzezar’s Datagrid is an easy to use and easy to customize datagrid component
SparklePost is a demo application that implements interface patterns commonly found in native iOS and Android apps, using modern and performant web development techniques
tipex is a customizable rich text editor for SvelteKit; based on TipTap

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: September 2024

Dani Sandoval — Sun, 01 Sep 2024 00:00:00 GMT

A bunch of updates to Svelte dropped in the last few weeks, plus a few quality of life improvements in the Svelte language tools.

Let’s take a look...

What’s new in Svelte and Language Tools

$state.frozen has been replaced with $state.raw (5.0.0-next.218, Docs, #12808)
$state.is has been removed. RIP, little guy (#12916)
svelte:options now lets you set the css: "inject" compiler option on a per-component basis (5.0.0-next.209, #12660)
<svelte:component> is now unnecessary in runes mode and therefore is deprecated (5.0.0-next.203/217, #12646 and #12694)
:global is now allowed in more places - making it easier to use in <style> tags and fixing issues with Tailwind’s @apply (5.0.0-next.199, Docs, #12560)
Svelte’s typescript definition generator that comes with @sveltejs/package will now warn when its diagnostics detect that a d.ts file was not generated (svelte2tsx@0.7.14, #2428)
You can now specify a tsconfig in emitDts - helpful when working in a monorepo (svelte2tsx@0.7.16, #2454)

Not covered in this list are a ton of efficiency and performance improvements across css and javascript compilation. If you’re interested, check out the CHANGELOG for more on how destructuring, state proxies and actions/styles/classes have all improved since last month.

Community Showcase

Apps & Sites built with Svelte

Apple Podcasts for the web now uses Svelte
UCLA Student Affairs has created their website with SvelteKit
tidytube is a browser extension to declutter Youtube’s UI
Graphite is an open source 2D procedural graphics editor
My Yogi is a yoga sequence builder and manager
Mark Of Destiny is a multiplayer online strategy game where you are the ruler of a small developing kingdom
Dungeons and Jacks is a game mixing blackjack and roguelite elements
YT Desk is a standalone player for YouTube and Youtube Music with a miniplayer, Discord “Rich Presence” and global shortcuts
Synapsis is an AI-based learning platform
SvelteCareers is a new Svelte job site that posts job alerts every Monday

Learning Resources

Featuring Svelte Contributors and Ambassadors

React VS Svelte - Which one should you choose in 2024?, Svelte 5 Runes - How to talk to the compiler and Creating your JavaScript framework? by Prismic (featuring Rich Harris)
Local First with Replicache - How to Build a Full Stack App with Data Syncing Part 1 by Syntax
Avoid Using Effects To Derive Values In Svelte and Understanding Effects In Svelte And When To Use Them by Joy of Code
Svelte Dev Vlog (with Simon) — July 2024
Svelte London - August: Svelte’s Boundary Areas and Prototyping Tools (in Svelte!)
This Week in Svelte:
- Ep. 71 — Listening to object updates using $effect, IntelliJ, Icons
- Ep. 72 — Changelog, using AI with Svelte 4 and 5, Icon components
- Ep. 73 — Changelog, OptimistiKit, database options

To Read

Svelte 5 signals fix its glitchy and inconsistent reactivity by webdevladder
Why Svelte is a game changer for IIoT development by Peter Repukat
Local First with Cloud Sync using Firestore and Svelte 5 Runes by Captain Codeman
SvelteKit - Potential Information Leakage from the State by Yuki Ishii
Fine-Grained Reactivity in Svelte 5 by Frontend Masters
Broadcasting messages on Chrome extensions by Wilker Lucio
Everything you need to know about: Svelte by Jeo Carlo Lubao

To Watch

Svelte 4 vs Svelte 5 🎇. what are the difference by Lawal Adebola
How to deploy your Sveltekit application with Firebase Hosting and Firebase Functions (adapter-node) by Melchisedek Dulcio

Libraries, Tools & Components

This gooey tooltip is fluid and satisfying
select-kit is a one-stop solution for all your select/combobox/autocomplete needs
ssgoi is a page transition library thats support animated page transition with every browser - including Safari
@svelte-put/preaction is a proof-of-concept Svelte preprocessor that allows usage of “preaction” - an extension to Svelte action with the ability to add static attributes on server-side
svelte-standalone is a series of configurations that aims to process any svelte widget to a single standalone javascript file
svelte-cartesian is a single component that helps with rendering all prop combinations of a provided component for visual regression testing

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: August 2024

Dani Sandoval — Thu, 01 Aug 2024 00:00:00 GMT

The ramp up to the Svelte 5 release has led to a bunch of huge improvements to both performance and customizability. Also in this month’s round-up: some minor SvelteKit updates and a return of the Svelte Dev Vlog.

Let’s dive in!

What’s new in Svelte

Below, you’ll find the highlights from the Svelte 5 release notes (currently in Release Candidate):

Breaking: The names of the svelte/reactivity helpers have been updated to include a Svelte prefix (5.0.0-next.169, Docs #12248)
Branch effects now have better DOM boundaries - reducing bugs in {#each} blocks and during DOM manipulation (5.0.0-next.171 and 5.0.0-next.182, #12215, #12258, #12383)
Single-pass hydration has reduced DOM size and significantly improved hydration speed (5.0.0-next.179, #12335, #12339)
Breaking: Transitions now play on mount by default (5.0.0-next.177, #12351)
CSS can now be included in the <head> when the css: 'injected' compiler option is enabled. This makes it trivial to include styles when rendering things like emails and OG cards, as well as massively simplifying toy setups where you can’t be bothered to figure out how to get CSS from the compiler into your server-rendered HTML (5.0.0-next.180, Docs, #12374)
Svelte will now warn in dev on {@html ...} block hydration mismatches (5.0.0-next.182, #12396)
The new warningFilter compiler option lets you disable certain warnings for the whole application without having to add svelte-ignore comments everywhere (5.0.0-next.186, #12296)
The new createRawSnippet API, allows low-level creation of programmatic snippets outside of Svelte templates (5.0.0-next.189, Docs, #12425)

What’s new in SvelteKit and beyond

The HTML attributes enctype and formenctype are now respected for forms with use:enhance (plus, some other bug fixes in the CHANGELOG)
The cloudflare, cloudflare-workers, netlify and vercel adapters have all been updated to copy .eot, .otf, .ttf, .woff, and .woff2 font files when bundling (CHANGELOGs)
svelte-preprocess, the tool used in nearly every Svelte project, is now dependency free! The team has gradually reduced it from 44 dependencies in 5.0.0 down to zero in the latest release (Tweet)
prerendered redirects will now be appended to the _redirects file in the Cloudflare Pages adapter (adapter-cloudflare@4.7.0, #12199)

Community Showcase

Apps & Sites built with Svelte

The StackOverflow 2024 Developer Survey results site was built using Svelte. Even better, the results show that 73% of developers that used it want to keep working with Svelte (More info in this tweet)
azigy is a live, multiplayer quiz and trivia application
on-device-transcription is a ready-to-use, minimal app that converts any speech into text
Whispering is an open-source transcription application that provides global speech-to-text functionality
Frogment is an OpenAPI specification editor
SticAI Glance summarizes reddit post to actionable insights
Over Rice tracks the best halal carts around New York City
earbetter is an ear trainer and tools for playing and programming music and audio
Moonglow is a deep planetary simulation using GPGPU
opml-editor is an online OPML editor tailored for managing subscription lists more easily
Praxis is an AI-powered trading journal that analyzes your trades and uncovers patterns
Lokal lets you share your localhost with Public and https .local Address
formcrafts lets you create incredible forms like application forms, lead generation forms, surveys, payment forms, and more
Shootmail is a template-first mail platform with scheduling and analytics
Supersaw is Open Source Web Based Digital Audio Workstation (DAW)

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte Dev Vlog (with Rich) — June 2024 on Svelte Society YouTube
Svelte London — July 2024
Svelte Meets Vite: A Deep Dive with Matias Capeletto (patakdev) by Svelte Radio
Unleashing the Power of Claude Artifacts with Svelte and Sonnet 3.5 and Perfect AI development setup for any programming language with Sonnet 3.5 and Claude Projects by Stanislav Khromov
Local First from Scratch - How to make a web app with local data by Syntax.
This Week in Svelte:
- Ep. 67 — Changelog, Popover API, starting-style, resetting file inputs
- Ep. 68 — Changelog, EATView, Capacitor
- Ep. 69 — Changelog, socket activation, open source support
- Ep. 70 — Changelog, Taiwind CSS and Svelte Motion, when tu use $derived

To Read

From React To Svelte - Our Experience as a Dev Shop by gimp3695
Authentication in SvelteKit using SvelteKitAuth by Aakash Goplani
SvelteKit (Svelte 5) and Supabase by the spatula
Firebase signInWithRedirect, localhost, and SvelteKit, Dealing with Dialogs in Svelte and Build a Docker Container from a pnpm monorepo by Captain Codeman
Introducing Svelte 5 by Frontend Masters

To Watch

Introduction to Sveltekit (#1) Parahack’s Let learn Sveltekit, image optimization in sveltekit and Deploy your sveltekit app to cloudflare pages by Lawal Adebola
How Svelte runes syntax is better than plain JavaScript with signals by webdevladder

Libraries, Tools & Components

Sveaflet is an open-source Map component library
Svelte Magic UI are componetns built using Tailwind CSS, Tweened, Spring and Svelte Motion
Figblocks is an open-source UI component library for building Figma plugins with Svelte
VS Code Supports Custom Tab Labels (a good reminder for folks who haven’t sent it up yet)
Storybook did a prerelease of @storybook/addon-svelte-csf with support for Svelte v5. If you’re using it, share your feedback on their RFC: storybookjs/addon-svelte-csf#191
sveltekit-search-params released v3.0.0 with better types
optimistikit got revamped to fully support runes in v1.0.0 while keeping the @legacy tag if you still can’t update from stores

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next month 👋

What’s new in Svelte: July 2024

Dani Sandoval — Mon, 01 Jul 2024 00:00:00 GMT

This month, we got a bunch of new features in the Svelte 5 release candidate, Rich Harris explained to Prismic’s CEO how Svelte optimizes for vibes and Geoff Rich shared even more about this philosophy at CascadiaJS 2024.

Let’s jump in!

What’s new in Svelte

Below, you’ll find the highlights from the Svelte 5 release notes (now in Release Candidate):

You can now declare props in runes mode more succinctly using let props = $props() (5.0.0-next.167, #12201)
The new on import from svelte/events allows you to preserve the order in which event handlers are called in more situations (5.0.0-next.152, Docs, #11912)
The Component type now represents the new shape of Svelte components (5.0.0-next.143, #11775)
<svelte:document> has new activeElement and pointerLockElement bindings (5.0.0-next.150, #11879)
<svelte:element>, CSS custom property wrappers and string normalization have all been simplified and made more performant (5.0.0-next.152, #11773, #11948, #11954, #11792, #11949)
render, mount and hydrate options are now actually optional if no properties are required (5.0.0-next.163, Docs, #12111)

What’s new in SvelteKit

The node and Cloudflare adapters got a few upgrades this month:

The BODY_SIZE_LIMIT environment variable adds unit suffixes support to the adapter-node - making it easier to write and comprehend large byte values (adapter-node@5.2.0, Docs, #11680)
Node servers can now listen to the sveltekit:shutdown event (replacing the more abrupt exit) that is emitted after the HTTP server has closed all connections (adapter-node@5.1.0, Docs, #12153)
The Cloudflare adapter will now only throw a _routes.json error when the file exists but there are no configured routes in svelte.config (adapter-cloudflare@4.5.0, #12360)

Community Showcase

Apps & Sites built with Svelte

Shootmail is an email template and content creation tool
wplatest automates your WordPress plugin updates across multiple websites
Svelte-MiniApps is a collection of bite-sized, user-friendly tools built with SvelteKit
Interior Render AI redesigns your interior with AI in seconds

Learning Resources

Featuring Svelte Contributors and Ambassadors

Prismic 🧡 Svelte: Meetup with Rich Harris, creator of Svelte! by Prismic
How Svelte and RSCs are Changing Web Development with Rich Harris, Creator of Svelte by This Dot Media
Learn Why JavaScript Frameworks Love Signals By Implementing Them and The Svelte 5 Reactivity Guide For The Modern Developer and Crafting Magical Spells Using Svelte’s Powerful Reactivity by Joy Of Code
Practical Svelte 5 - Shopping Cart by Huntabyte
CascadiaJS 2024: Optimize for vibes by Geoff Rich (Livestream of Geoff’s talk starts at 1:08:30)
This Week in Svelte - deep dives into the Svelte changelog and new learnings from the week:
- Ep. 66 - adapter-node, new SvelteKit docs, Debugging Event modifiers in Svelte 5
- 7 Jun - Validation libraries, $effect.active() usage
- 31 May - Floating UI, StartStopNotifier
Svelte Society Vienna
- Ermin Celikovic — Building Web Components using Svelte
- Domenik Reitzner — Svelte 5 Runes explained for Vue devs
Svelte London — June 2024
Svelte Dev Vlog — June 2024 with Rich Harris

To Read

Lessons using sveltekit to build a dataviz platform by DNLBLN on Reddit
Frontend Frameworks in 2024 for eCommerce by Crystallize
Using Unplugin Icons in SvelteKit: A Step-by-Step Guide by Rishi Raj Jain
Migrating Tronic247 from WordPress to SvelteKit and Methods to Load Data in Svelte and SvelteKit by tronic247

To Watch

The Easiest Way to Build Web Apps and 13 Svelte Concepts you Need to Know by Awesome
SvelteKit Form Validation with Zod by Ross Robino
Bringing together Auth and Payments with AirBadge by Stripe Developers
Svelte 4 vs. Svelte 5 – Runes and Snippets by SvelteRust

Libraries, Tools & Components

svelte5-commenter is a component demonstration for the common comments section
SSC (Speedy Svelte Compiler) is a super-fast Svelte compiler written in Rust

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next month 👋

What’s new in Svelte: June 2024

Dani Sandoval — Sat, 01 Jun 2024 00:00:00 GMT

The maintainers have been hard at work getting the Svelte 5 Release Candidate ready for release. In this month’s newsletter, you’ll find highlights from the pre-release CHANGELOG and a host of items from our community showcase.

Let’s dive in!

What’s new in Svelte

bind: is now disallowed on component exports in runes mode and has much better types to tell if a prop is $bindable (5.0.0-next.113, 114 and 125, Docs, #11238, #11225 and #11498)
Tons of work on the migrate tool to make migrating to Svelte 5 syntax easier (5.0.0-next.116, 136 and 137, Docs, #11334, #11659, #11704)
MathML is now supported (5.0.0-next.120, Docs, #11387)
The Svelte Inspector is now supported (5.0.0-next.125, Docs, #11514)
The $state.is rune lets you compare values or check if an object exists within a deeply reactive object/array (5.0.0-next.134, Docs, #11613)
The rootDir compiler option makes filenames relative to simplify development in monorepos or complex folder structures (5.0.0-next.135, #11627)

Community Showcase

Apps & Sites built with Svelte

Onlook is a chrome extension that enables designers to contribute to their team’s UI codebase
Fluid Type Generator is a modern fluid type generator built with Svelte 5
LCH Palette Generator is a tool that allows you to easily create and save gradient palettes to be used in UI design
Typepost is a simple text post generator for social media
Equimake is a collaborative real-time 3D platform for learners, gamers, artists, and coders
svelte.dev-machine is a physical based animation to replicate the Svelte machine on the svelte.dev homepage

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte 5: Compiler, Signals, and Web App Performance by JSJ 627 with Rich Harris
Svelte London - May 2024
This Week in Svelte - deep dives into the Svelte changelog and new learnings from the week:
- 3 May
- 10 May
- 17 May
- 24 May

To Read

Securing Your SvelteKit App and Prevent Waterfalls from Multiple SvelteKit Server Hooks in sequence by Captain Codeman
Svelte 5 Todo App with Firebase by Jonathan Gamble

To Watch

Svelte 5 Runes Demystified by Peter Makes Websites Ltd
How to Build an eCommerce Store with SvelteKit by Crystallize

Libraries, Tools & Components

Floating UI Svelte is a library for positioning floating elements and handling interaction
Svelte Animated Pixels provides an easy way to create pixelated canvas animations by just declaring maps of pixels a strings
SvelteKit Passkey Template is a SvelteKit template project featuring Passkey authentication, Google sign in and mailbox verification
svelte-infinite is an infinite scrolling library designed for Svelte 5 with runes
svelte-next attempts to automated Svelte library updates

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next month 👋

What’s new in Svelte: May 2024

Dani Sandoval — Wed, 01 May 2024 00:00:00 GMT

Svelte Summit was last week - featuring a number of fantastic talks from across the community. In the final talk, What You Can Do For Your Framework, Rich Harris (with a little help from PuruVJ’s neoconfetti library) announced that Svelte 5 is now in the “Release Candidate”.

Lots of pre-release changes to cover in this post and a host of community showcase items... so let’s dive in!

Highlights from Svelte Summit Spring 2024

Below, you’ll find links to all the talks in the livestream version of Svelte Summit.

Simple and Sustainable web development in academic libraries with Svelte
Building a SaaS module for SvelteKit
Intro To LayerChart
Spatial Programming with Threlte Studio
Convex (Sponsored talk)
Kitbook: Easily Build, Document, Inspect & Test Svelte Components
Fullstack Testing
What You Can Do For Your Framework - also covers a ton of the new features listed below

These will all get broken up into more sharable (and rewatchable) videos over time, so make sure you subscribe to the Svelte Society YouTube channel to keep up to date.

What’s new in Svelte

Svelte 5 is officially in the Release Candidate stage and gets closer to release every day. Below, you’ll find some highlights from its pre-release changelog:

Hot module reloading is now supported in Svelte 5 (5.0.0-next.97 and 101, #11106, #11132)
It is now possible to define global (or child global) styles in a block (5.0.0-next.111, #11276)
Compiled code is even more efficient for if blocks, each blocks and attribute updates (5.0.0-next.83-85, #10906, #10937 and #10917)
The built-ins from svelte/reactivity are now re-exported to be available on the server (5.0.0-next.88, Docs, #10973)
A new reactive URL object is now available in svelte/reactivity (5.0.0-next.103, Docs, #11157)
HTML tags are now faster with more efficient hydration markers (5.0.0-next.90-91, #10986 and #11019)
The new $host rune retrieves the this reference of the custom element that contains a component - removing the need for createEventDispatcher (5.0.0-next.96, Docs, #11059)

Community Showcase

Apps & Sites built with Svelte

Collabwriting just raised $1.2M and launched a new product - Collabwriting for Teams. Congrats!
Skypix is a music library that allows users to create playlists, add songs to their library, and share their music with friends
Jonze is an open-source but managed tool for managing member information. It features attendance tracking and membership plans
midi-note-trainer is a music notation trainer app built with Web MIDI
Easy-Rd is a free tool for coding-based ER diagram creation
Gamera is a simple site analytics tool for a privacy-first world
Collecta lets you collect your internet in a single space - organize images, bookmarks, inspiration, and share your vibe with friends
ColdCraft writes for you by turning bullet points and LinkedIn profiles into effective cold emails
Fourplay is a multiplayer word game written with Rust and Svelte
how-long-is-a-click is a site that measures how long exactly a click is on the web

Learning Resources

Featuring Svelte Contributors and Ambassadors

Preprocessors Are The Most Powerful Svelte Feature No One Talks About, How To Make A Custom Markdoc Renderer and Responsive CSS Grid Layout In One Line Of Code by JoyOfCode
Phoenix LiveView and Svelte with Wout De Puysseleir by Svelte Radio
Svelte London - April 2024:
- Auth in SvelteKit, the hard & easy ways by Ajit Krishna
- 3 stories of walking in the fire with my SvelteKit project by Rowan Aldean
This Week in Svelte:
- 29 Mar - Superforms
- 5 Apr - When to go serverless?
- 12 Apr - svelte-api-keys with Captain Codeman
- 19 Apr - Multiple Action Forms
- 26 Apr - Service Workers

To Read

LiveView is best with Svelte by Anthony Accomazzo
Optimizing My SvelteKit Blog by refac0r
Why Lucia might be the best authentication library for SvelteKit by Justin Ahinon
Deploying a Svelte App with Docker and Node.js: A Developer’s Guide by Klevert Opee
SvelteKit Todo App with Firebase Admin by Jonathan Gamble
Dependency injection in Svelte for fun and profit by Kyle Nazario
Don’t Lazy-Load Translations by Loris Sigrist
View Transitions in SvelteKit by Mattias Tomas Bobo Lindvall
Why is Svelte better? by Zack Webster
Mocking SvelteKit Stores in Storybook by Tyler Gaw
Deploy SvelteKit to AWS Amplify: A Step-by-Step Guide by Rishi Raj Jain
SvelteKit and Stripe demo by the spatula
SvelteKit Turso Fly.io App Guide by Scott Spence

To Watch

Build a Animated Website with SvelteKit, GSAP & Prismic by Prismic
Svelte 5: What’s New by Simon Holthausen
Build the Ultimate Learning Platform with SvelteKit, PocketBase & TailwindCSS! and Lets Build A Filtering System with Svelte 5 , Sveltekit 2, Tailwind, Upstash by Lawal Adebola
Porting a vanilla JavaScript library to Svelte 5 by Stanislav Khromov

Libraries, Tools & Components

sk-seo is a dead simple, no dependencies, svelte component that automates a lot of the annoying SEO parts for you
Svelte Lib Helpers is a utility package designed to streamline various tasks when developing Svelte libraries
skitsa is a simple yet fully fledged operational demonstration of SvelteKit Magic Links using SST, hosted on AWS, as a Lambda application
svelte-zoomable-circles is a Svelte component for displaying and browsing hierarchical data using zoomable circles

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next month 👋

Svelte 5 Release Candidate

The Svelte team — Tue, 30 Apr 2024 00:00:00 GMT

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...

npm create svelte@latest

...or you can add Svelte 5 to an existing project...

npm install --save-dev svelte@next

...or you can tinker in the Svelte 5 Preview 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, and by watching the presentation from the most recent Svelte Summit:

What You Can Do For Your Framework

The highlights include:

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
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. 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.)

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 by pasting in some Svelte 4 code and clicking the ‘migrate’ button.

When is the stable release?

When it’s done, and we’ve updated all the documentation. Bear with us!

What’s new in Svelte: April 2024

Dani Sandoval — Mon, 01 Apr 2024 00:00:00 GMT

Spring is just around the corner (for half the globe at least), which means Svelte Summit Spring is coming soon! The event will be streamed on the Svelte Society YouTube channel 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 and gets closer to release every day. Below, you’ll find some highlights from its changelog:

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, #10803, #10622, #10781)
state/derived/props can be explicitly exported from components again (5.0.0-next.62, #10523)
bind:value now allows for a dynamic type attribute - fixing issues with common input bindings (5.0.0-next.66, #10608)
SSR HTML mismatch validation has been improved and provides clearer error messages (5.0.0-next.69, #10658)
Breaking: Slots inside templates with a shadowrootmode attribute are now preserved (5.0.0-next.73, #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)
The new $bindable rune allows parents to :bind to a component’s prop in addition to using them as regular props (Docs, #10851)
The webkitdirectory DOM boolean attribute is now supported (5.0.0-next.81, #10847)
Form resets are now taken into account for two way bindings (5.0.0-next.82, Docs, #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, #11987)
adapter-vercel’s build output files now include framework metadata - improving observability on the platform (@sveltejs/adapter-vercel@5.2.0, #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)
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, #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, #11945)
Google Cloud is now supported in adapter-auto without any additional configuration (@sveltejs/adapter-auto@3.2.0, Docs, #12015)

For all the changes in SvelteKit, including bug fixes and adapter-specific changes check out the CHANGELOGs in each of the packages.

Community Showcase

Apps & Sites built with Svelte

notepad is a workspace for freelancers. Providing time tracking, tasks, reports, invoices and contacts all in one tool.
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 is a fake OS desktop in the style of Windows 95
PowerHound is an app for tracking snow conditions across Colorado’s ski resorts and backcountry
ProductSurveys gathers user feedback directly inside your product
WAIfinder is an interactive map shows entities operating in the AI industry in the UK
talkmedown is an emergency landing survival game using SvelteKit UI and Three.js graphics.
Bird Flapping is that game with a flapping bird (not to be confused with FlappyBird)
Minesweeper FUNNYMODE is minesweeper, but FUNNY
Routickr is a habit-tracking app with Firefox and Chrome extensions
immich is a self-hosted photo and video management solution

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svienna (Svelte Society Vienna):
This Week in Svelte:
- 22 Mar 2024
- 8 Mar 2024

To Read/Watch

How we built our 41kb SaaS Website by Critical Moments
Migrating a personal homepage to Svelte by Jake Ouelletee

Libraries, Tools & Components

Svisualize is a VS Code Extension that visualizes your components as you code
Neel/UI is a shadcn-inspired set of customizable components that you can copy and paste into your SvelteKit apps
BLICKCSS 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 or Discord.

Until next month 👋

What’s new in Svelte: March 2024

Dani Sandoval — Fri, 01 Mar 2024 00:00:00 GMT

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. In the meantime, Svelte 4 (@latest) has had one bugfix. The Svelte 5 changelog has quite a few updates, though:

breaking: $derived.call is now $derived.by (5.0.0-next.54, Docs, #10445)
Destructuring derived object properties will now keep fine-grain reactivity (5.0.0-next.55, Docs, #10488)
The new hydrate method makes hydration-related code treeshakeable (5.0.0-next.56, Docs, #10497)
Nested CSS is now supported, along with better support for :is(...) and :where(...) (5.0.0-next.57, #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, #10516)

For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out the CHANGELOG on main.

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).

Adapters can also now use an emulate function to provide dev and preview functionality (2.5.0, Docs, #11730). This will allow for an improved experience developing for Cloudflare in the near future (11732).

For all the changes in SvelteKit, check out the CHANGELOG.

Community Showcase

Apps & Sites built with Svelte

Wishgram is a tool to generate handwritten wishing cards
rfidify is a Raspberry PI RFID reader that plays things on Spotify
listn.fyi is a fun and easy way to share what music you’re currently into
Meowrite is an AI writing tool for cover letters, essays and more
Photo Multitool is a free set of online tools for manipulating photos
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 by Prismic
Svelte 5 is a beast, but is it worth switching? by Syntax.FM

This Week in Svelte:

To Read/Watch

Upgrading to Svelte 5 by Mike Stachowiak
Building with GPT4 and Svelte by Lev Miseri
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 by Launchnow
How to build an editable website in 15 minutes in 2024 by Svelte Headless
Local-First LiveView Svelte ToDo App by Tony Dang

Libraries, Tools & Components

PaneForge provides components that make it easy to create resizable panes in your Svelte apps
Svelte UX and LayerChart now include theme support via semantic and state classes
Huly Platform is a robust framework designed to accelerate the development of business applications, such as CRM systems
svelte-marquee is a beautiful marquee component for Svelte
Just Ship is a SvelteKit auth boilerplate for Svelte 5
cells is a functional & reactive library for Svelte
Svelte Headless is an example site showing how to create a simple blog site that plugs into a headless CMS
Sugar.css is a semantic, accessible, lightweight CSS framework
apple-svelte is a component library for Svelte based on Apple’s Human Interface design language
SvelteKit SSE provides an easy way to produce and consume server sent events.
Formsnap, an accessible wrapper for sveltekit-superforms, got a major rewrite and has improved its docs

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next month 👋

What’s new in Svelte: February 2024

Dani Sandoval — Thu, 01 Feb 2024 00:00:00 GMT

Since SvelteKit 2.0 released late last year, there’s been a bunch of new features to make the Kit dev experience even better! Meanwhile the Svelte team has been hard at work making Svelte 5 a reality.

In case you missed it, Rich also posted Tenets, “an attempt to articulate the Svelte philosophy — our bedrock principles, that guide our design decisions.”

So let’s dive in to check out what’s new and see what the rest of the community has been up to...

What’s new in SvelteKit

The client router is now tree shakeable (2.1.0, #11340)
$env/static/public is now exposed in service workers (2.2.0, Docs, #10994)
style-src-elem is now supported in environments with a Content Security Policy (2.2.1, Docs, #11562)
The new reroute hook allows you to change how URLs are translated into routes (2.3.0, Docs, #11537)
The read function is now available in the $app/server module - allowing you to read assets from the filesystem (2.4.0, Docs, #11649)
Adapters can now emulate the prod environment for dev and preview servers by implementing the corresponding functions. This is useful for providing access to e.g. KV namespaces in development (2.5.0, Docs, #11730)

What’s new in Svelte

In case you missed it, Svelte 5 is in preview. In the meantime, Svelte 4 (@latest) has had one bugfix release. There’s just one new feature to highlight from the Svelte 5 changelog:

Snippets can now take multiple arguments (5.0.0-next.42, Docs, #9988)

For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out the CHANGELOG on main.

Community Showcase

Apps & Sites built with Svelte

Sprite Fusion is a free level design tool to craft beautiful 2D tilemaps right in your browser using any tileset
TypeMeUp a typing website that teaches you how to type faster
Pathfinding Algorithm Visualizer is an interactive pathfinding algorithm visualizer with player functionality
Roch Dog ranks businesses and hotels based on how dog-friendly they are
highlight.cool is a free, customizable, and real-time highlighting tool for your blog
Nola Devs is a vibrant and inclusive software developers group nestled in the heart of New Orleans. This site aggregates all their events across groups
Startup Funding Simulator is a tool to help founders understand how modern fundraising (with safes) works, and how much dilution you can expect when raising money.

Learning Resources

Featuring Svelte Contributors and Ambassadors

New SvelteKit feature: import { read } from '$app/server' by Rich Harris
Reading assets on the server in SvelteKit by Geoff Rich
Tan Li Hau’s new book, Real-World Svelte is out now
Svelte Society San Diego - January 2024: Attila covers the latest updates on Svelte 5 and also SvelteKit.
Svelte London - January 2024: featuring talks from both Rich Harris and pngwn
Svelte 5: Speed, Simplicity & Size by Syntax.FM
This Week in Svelte:
- 12 Jan 2024: A deep dive into the SvelteKit Changelog
- 19 Jan 2024: Showcasing a new library from Paolo Ricciuti
- 26 Jan 2024: Featuring “Cells” - a functional and reactive programming library

To Read

Customise font in TailwindCSS with SvelteKit by Launchnow
Svelte from the perspective of an Angular developer (for Svelte devs) and How to create a sitemap for your SvelteKit blog by Kyle Nazario
Get Up and Running with Svelte on the Internet Computer by Roland BOLE
SvelteKit + Socket.io server deployed on deno by Devr

Libraries, Tools & Components

Lucia - an auth library written in TypeScript that abstracts away the complexity of handling sessions - has just released its 3.0 version
Paraglide JS Adapter SvelteKit is a SvelteKit integration for ParaglideJS - a tool for i18n routing

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

See ya next month!

What’s new in Svelte: January 2024

Dani Sandoval — Mon, 01 Jan 2024 00:00:00 GMT

Happy New Year! It’s been a busy month for the Svelte maintainers - with tons of new features dropping in the Svelte 5 preview and the release of SvelteKit 2!

You can find all the new features in both projects below, along with a bunch of resources and sites built with Svelte in the Community Showcase.

Let’s jump in...

What’s new in SvelteKit (2.0 and more!)

With its 2.0 release, SvelteKit is now more capable than ever. Be sure to check out the docs links in each update for more info on how to use each feature as well as the new Performance page - which explains how SvelteKit works to make your applications as performant as possible.

resolvePath has been replaced by resolveRoute in $app/paths. Use it to populate a route ID with params to resolve a pathname (1.29.0, Docs, #11261)
response.arrayBuffer() will now be inlined during SSR (1.30.0, Docs, #10535)
SvelteKit 2.0.0 adds:
- untrack to load to opt-out of invalidation (Docs, #11311)
- shallow routing to create history entries without navigating (Docs, #11307)
- html typings (#11222)
- redacted internal stack traces when reporting config errors (#11292)
- fine grained invalidation of search params (Docs, #11258)

You can find a migration guide for SvelteKit 2.0 on the SvelteKit docs. Things should be pretty seamless with the svelte-migrate command doing much (if not all) for you!

What’s new in Svelte

With Svelte 5 in preview, Svelte 4 (@latest) has only been getting bug fixes - with its current version at 4.2.8. The updates below are from version 5’s preview branch:

The new $inspect rune is like console.log except that it will re-run whenever its argument changes (5.0.0-next.16, Docs, #9705)
$state is now proxied to make reactivity nested by default. This is a response to user feedback with plenty of context in the PR - so check it out if you’re interested on how the syntax has improved during the preview (5.0.0-next.18, Docs/Examples, #9739)
Fallback values for bindings are disallowed in runes mode since they’re confusing, and a source of bugginess and implementation complexity (5.0.0-next.19, #9784)
Fallback props are now readonly (unless used with bind:). By extension, default values should also be readonly (5.0.0-next.19, #9789)
The new unstate function allows you to remove reactivity from objects and arrays created with $state (5.0.0-next.19, Docs, #9776)
GamepadEventHandlers for window.addEventListener (gamepadconnected and gamepaddisconnected) have been added (5.0.0-next.23, Docs, #9861)
{@const} can now be used inside snippet blocks (5.0.0-next.24, #9904)
The new $state.frozen rune lets you access a read-only version of $state that cannot be mutated. This is useful if you want to work with data using immutable patterns rather than mutable patterns (5.0.0-next.27, Docs, #9851)

For all the release notes going forward, check out the CHANGELOG on main.

Community Showcase

Apps & Sites built with Svelte

eCourse is a sleek and customizable website template designed for effortless self-hosting of your online course
Typogram is a brand design tool with “a sprinkle of AI”
calcium is a browser extension for devs with fuzzy-find on browser tabs, bookmarks, history and common developer docs
hintable is an exciting word guessing game
domian.io retrieves a list of the most likely misspellings for your domain, their availability, and an easy way to register them
Story Scroller is a REPL showcasing how Svelte can be used to make a scrollable cards list
The Atlas of Sustainable Development Goals 2023 presents interactive storytelling and data visualizations about the 17 Sustainable Development Goals.
Lingotrack is a social platform for you as a language learner to track your progress and find engaging new media
Lofi Flow lets you save your best-loved YouTube lofi live radios and videos in one spot

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte in dynamic e-commerce widgets with Jacob Stordahl and Slicing Svelte with Sam Littlefair and Prismic from Svelte Radio
I already love SvelteKit v2 by Huntabyte
14 Awesome Real World Projects That Use Svelte by Joy of Code
Building a SvelteKit Adapter for WinterJS with Willow and Kev
Progressive Splash Screen by Quang Phan (Svelte Vietnam)
This Week in Svelte:
- 2023 Dec 1 - Svelte 4.2.8, reusing searchParams, peerDependencies!
- 2023 Dec 8 - validating forms UX, suppress ESLint warnings, bound functions
- 2023 Dec 15 - SvelteKit 2.0
- 22 Dec 2023 - SvelteKit 2.0.6, handling peerDependencies, action params
- 29 Dec 2023

To Watch/Hear

Let’s Build A Dropbox clone With SvelteKit And Firebase 🔥, Tailwind css, Shad-cn svelte etc 😁 by Lawal Adebola
“App-like” List → Detail View Transitions 🦸 with SvelteKit by Johnny Magrippis
Learn SvelteKit · Build a Modern Landing Page w. SvelteKit & TailwindCSS by Smoljames

To Read

Deploy a SvelteKit App to GitHub Pages by Captain Codeman
A Practical Guide to Mocking Svelte Stores with Vitest by Ben Tilling
Svelte 5 is good, but runes need improvement by Kyle Nazario
Shader Park and 2D by Untested

Libraries, Tools & Components

Routify, the popular routing library used in many Svelte apps, has its first Release Candidate for version 3
Superforms v2 is out now - supporting all validation libraries
SvelteKit-Design-Pattern is a template showcase Kreonovo’s SvelteKit MVC Design patterns (more info in the Reddit post)
Shadcn’s Svelte VSCode extension helps you install and use Shadcn components directly without leaving your IDE
SGSG is an alternative “full-stack application” template based on Svelte, Go, SQLite and gRPC
mistral-kit is a prompt-to-code site using mistral-7b and ollama
svelte-browser-import provides functions to import and render a Svelte App/Component (.svelte files) directly inside a browser without a build step.
progressbar-svelte is a Svelte package for customizable progress bars
MdCraft is an open-source web app that serves as an in-browser Markdown editor and previewer

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Have a great year 🥳

Announcing SvelteKit 2

The Svelte team — Thu, 14 Dec 2023 00:00:00 GMT

Version 2.0 of SvelteKit, the official framework for building apps with Svelte, is now available. It is an incremental release that adds support for the newly-released Vite 5 along with a bevy of small improvements and one much-requested feature.

If you’ve been paying close attention to Svelte in recent months, you’ll know that we’ve been hard at work on Svelte 5, which is possibly the most anticipated release in the project’s history. Upgrading to SvelteKit 2 will smooth the path for Svelte 5 when it is released in 2024, and we encourage all users to upgrade when you get a chance.

We recommend updating to the most recent 1.x release first, along with Svelte 4, in order to address any deprecation warnings. Then, upgrade to SvelteKit 2 by running the automated migration tool:

npx svelte-migrate sveltekit-2

The migration guide has more details about what’s new.

Shallow routing

Way back in the mists of time — May, to be precise — we teased a new feature that allows you to associate state with a history entry without causing navigation. It’s very useful for creating modals that you can dismiss by swiping back, or pop-up views of routes you don’t want to do a full navigation to.

That feature is called shallow routing, and this week we finally dusted off the pull request and added it to the framework. We’re excited to see what you use it for.

One year of SvelteKit

Today is the one year anniversary of SvelteKit’s launch and we’re excited to celebrate how far SvelteKit has come. SvelteKit has been quickly embraced by the web development community:

Tweet from @flaviocopes

In the past year, we’ve seen a number of open source projects like Storybook, Tailwind, and Playwright officially support SvelteKit as well as a number of commercial entities like Prismic, Sentry, and InLang.

SvelteKit continues to benefit from the Svelte community, which has developed numerous great UI libraries like Skeleton, shadcn-svelte, Melt UI, Flowbite Svelte, daisyUI, and many more. And our first ever hackathon saw winners from amazing Svelte projects like Superforms, Threlte, and SvelteLab.

Finally, we’ve also launched major supporting projects like a new Svelte DevTools (chrome web store, GitHub, talk), Svelte Inspector (docs, talk), and experimental image optimization support (docs, talk).

Upcoming

In addition to the ongoing image work, we’ll be working to improve support for Svelte 5 and internationalization in upcoming releases. The first parts of that work have already landed in SvelteKit 2, which includes improved support for prerendering URLs with optional path segments often used to specify a language. Thank you to the team from InLang who contributed this improvement.

What’s new in Svelte: December 2023

Dani Sandoval — Fri, 01 Dec 2023 00:00:00 GMT

Svelte Summit Fall 2023 was epic! Featuring talks from across the ecosystem and the launches from the core team of new Svelte Dev Tools, image optimization, and a preview version of Svelte 5.0! The whole talk can be found here (timestamps below):

0:00 Hype music!
18:20 Exploring Svelte DevTools - Ignatius B (4 minutes)
25:27 How does SvelteKit fare as a SPA Framework - Henry Lie (25 minutes)
53:00 enhanced:img - Ben McCann (6 minutes)
1:03:44 inlang-paraglide JS for SvelteKit i18n - Samuel Stroschein (10 minutes)
1:17:32 How Svelte & GraphQL plays well together - Jean-Yves Couet (31 minutes)
1:53:10 svelte-ecosystem-ci - Dominik G (10 minutes)
2:23:06 Svelte for Creative Development - Steven Stavrakis (10 minutes)
2:35:33 Translating the docs - Romain I’Ourson (11 minutes)
2:49:48 ENHANCE! - Paolo Ricciuti (25 minutes)
3:18:25 Accessibility tips with Svelte solutions - Enrico Sacchetti (25 minutes)
3:49:11 svelte@next - Rich Harris (18 minutes)

Today is also the first day of Advent of Svelte: A Svelte challenge for each day of December. Join the festivities and participate in a daily frontend challenge using Svelte!

Now let’s dive into the updates...

What’s new in Svelte (5.0 Preview!)

Svelte 5 preview is now available at svelte@next while Svelte 4’s current version (@latest) is 4.2.7. All the changes below are from the preview’s branch:

TypeScript is now supported natively via acorn-typescript (5.0.0-next.9, #9482)
The new $effect.active rune returns a boolean to indicate if an effect is active. This lets you set up subscriptions when a value is read (in an effect, or in the template) but also read values without creating subscriptions (5.0.0-next.10, Docs, #9591)
The new $effect.root rune creates a non-tracked scope that doesn’t auto-cleanup. This is useful for nested effects that you want to manually control (5.0.0-next.14, Docs, #9638)

For all the release notes going forward, check out the CHANGELOG on main. For the highlights, take a look below!

What’s new in SvelteKit

Creating a new SvelteKit project will now ask if you want to try the Svelte 5 beta (#11026)
Prettier 3 and prettier-plugin-svelte 3 are now the default versions when creating new SvelteKit projects (#10410)
nodejs20.x is now supported via the Vercel adapter (#11067)
@sveltejs/enhanced-img makes serving different sizes of images easy, thanks to pre-processing (Docs, #10788)

For a complete list of bug fixes and performance updates, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

What’s new in Language Tools

The latest version of language tools adds best-effort fallback typings to $props() rune (extensions-108.1.0)
Language tools better supports the @render tag by using the Snippet type (extensions-108.0.0)
The Svelte ESLint plugin has been updated to support the Svelte 5 preview (v2.36.0-next.2)

Community Showcase

Apps & Sites built with Svelte

MobileView is a Chrome Extension for real-time, cross-device website simulation
ClassroomIO is an Open Source Platform for Tech Bootcamps
sshx is a secure web-based, collaborative terminal
ToneShift lets you clone any voice, create music, and join a community of voices
CanvasGPT is Autonomous Mind Maps. Powered by AI
Wordplay is a new educational, accessible, and language-inclusive programming language for creating playful, interactive typography (Blog Post)
CodeFlow is a roadmap for programmers to learn, think and code better
Teller is a comprehensive Minecraft backup solution designed to facilitate both local backups and interfacing with the ChunkVault Backend
Sudoku is a board created with SvelteKit, Typescript and Tailwind

Learning Resources

Featuring Svelte Contributors and Ambassadors

View Transitions in SvelteKit and beyond with Geoff Rich and Melting UIs with Thomas G. Lopes by Svelte Radio
Making The Best Svelte SVG Animation Library, How To Publish Your JavaScript Code To Npm With SvelteKit, and What’s New In Svelte 5? (Runes, Events, Snippets) by Joy of Code
Svelte Society Talks
- Svelte Society - San Diego November 2023
- Building a SvelteKit Adapter for WinterJS with Willow and Kev
This Week in Svelte:
- 2023 October 27 - SvelteKit 1.27.1, the pillars of a component library
- 2023 November 3 - SvelteKit 1.27.2, choosing a database, preprocessors
- 2023 November 10 - SvelteKit 1.27.4, Svelte 4.2.3, closing modals
- 2023 Nov 17 - SvelteKit 1.27.6, Svelte 4.2.5, new Svelte 5 features!
- 2023 Nov 24 - Svelte 4.2.7, TypeScript in markup, websockets in SvelteKit

To Watch/Hear

Why Stack Overflow is embracing Svelte by The Stack Overflow Podcast
Building a Twitter Clone with Svelte, SvelteKit, ,Firebase, Tailwind Css, Shad-cn Svelte etc by Lawal Adebola
SvelteKit Crash Course: Build a Full Website in 90 min! - 2023 Tutorial by Prismic

To Read

Hands-On Experience: How to Build an eCommerce Store with SvelteKit? by Bård Farstad
Productive Dark Mode with SvelteKit, PostCSS, and TailwindCSS (Behind the Screen) by Quang Phan
Setting up OAuth with Auth.js in a SvelteKit Project by Andrey Mikhaylov
SvelteKit 🤝 Storybook by Paolo Ricciuti
Integrate Storybook in Svelte: Doing it the Svelte-way by Óscar Domínguez Celada
Drizzle ORM with Sveltekit and Sveltekit — Streaming SSR by Mohammed Anas
Svelte & WordPress Full Stack Course by Artneo Web Design on udemy
Add a loading indicator to a Form Action in SvelteKit by Useful Snippets (Stanislav Khromov)

Libraries, Tools & Components

sveltekit-view-transition provides a simplified view-transition-api for Sveltekit
T18S aims to provide the best internationalization experience for SvelteKit, delivering typesafety, performance, and ease of use
Svelte Flow is a customizable Svelte component for building node-based editors and interactive diagrams
Super Sitemap is a SvelteKit sitemap focused on ease of use and making it impossible to forget to add your paths
Svelte UX is a Tailwind-based component library to simplify creating highly interactive and visual applications
CanIKit provides a simple way to add authorization to your SvelteKit application
Svelte Toggles manages light & dark mode interactions and preference storage
Baselime now supports SvelteKit for the edge-logger package

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: November 2023

Dani Sandoval — Wed, 01 Nov 2023 00:00:00 GMT

Mark your calendars! Svelte Summit Fall is on November 11th. Join us on YouTube and in the Discord for hours of Svelte-focused fun 🎥

Every month, maintainers within the Svelte ecosystem fix bugs, improve performance and bring new features to Svelte, SvelteKit and the tooling around them. This month’s releases brings an improved developer experience with better block folding, inferred types and configuration for use:enhance.

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)
Extensions 107.12.0 improves block folding for functions, if statements and more (Release Notes, PR)

What’s new in SvelteKit

Route parameter types will now be inferred from the applicable matcher’s guard check (kit@1.26.0, Docs, #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, #9476)
The output of the project creation wizard will now reflect which package manager you’re using (create-svelte@5.1.1, #10811)

For a complete list of bug fixes and performance updates, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

4THSEX is a creative website for the producer / creative director with the same name
Syntax.fm has been redesigned from the ground up with SvelteKit
GitContext is an early-access tool to improve the process of reviewing code
Lunier is a site to browse and buy handbags (site is in French)
Feldman Architecture is a portfolio set for the architects of the same name
Formulator is a faster way to iterate, experiment, & build user interfaces
Dwarf is a relaxed domain name marketplace for domain hoarders
Teek is a simple, free time tracker for developers with an hourly rate
Sessionic is a web extension to easily save browser sessions and manage them
Pilink 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 by Svelte Radio
This Is How You Sveltify Any JavaScript Library, Svelte Actions Make Svelte The Best JavaScript Framework and How Svelte Stores Make State Management Easy by Joy of Code
Svelte Society Talks
This Week in Svelte:
- 2023 September 29 - Svelte 4.2.1, SvelteKit 1.25.1, Runes FAQ, data mocking
- 2023 October 6 - Ordering attribs, client hints, async custom store with runes
- 2023 October 13 - SvelteKit 1.25.2, How Melt UI works
- 2023 October 20 - Kit 1.26.0, Svelte 4.2.2, dynamically-loaded components

To Watch

SvelteKit & TailwindCSS Tutorial – Build & Deploy a Web Portfolio by freeCodeCamp.org
Why SvelteKit? [Intro to SvelteKit 1.0, part 1] by Jeffrey Codes Javascript
Build an AI Chatbot - it’s that easy?! by Simon Prammer
Introduction to SvelteKit | FREE 5 HOUR SVELTE WORKSHOP 2023 | Lessons + Coding Exercises by This Dot Media

To Read

What we learned from migrating our web app to SvelteKit by Marten Sigwart
SvelteKit Tutorial: Build a Website From Scratch by Prismic has been updated based on the latest SvelteKit features
Svelte by Example is a succinct, gentle introduction to Svelte & SvelteKit
The Comprehensive Guide to Locals in SvelteKit by Stanislav Khromov
How to build a blog, the hard way by Curtis Parfitt-Ford
How to make a full-content RSS feed for your SvelteKit blog by Kyle Nazario
A simple hash-routed dialog system with Svelte by Jamie Perkins
When and Where to Render and One Less Reason to Build a Native App by Ross Robino
Open Neovim From Your Browser - Integrating nvim with Svelte’s Inspector by Theo Steiner

Libraries, Tools & Components

Work to support SvelteKit in Deno is ongoing and Deno now supports creating SvelteKit projects out-of-the-box!
Purplix is an open-source collection of tools dedicated to user privacy and creating trust with your audience
Obra Icons is a simple, consistent set of icons, perfect for user interfaces
svelte-chat-langchain is a minimal version of “Chat LangChain” implemented with SvelteKit, Vercel AI SDK and of course Langchain
Cloudinary just released an official Svelte SDK (GitHub)

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: October 2023

Dani Sandoval — Sun, 01 Oct 2023 00:00:00 GMT

Svelte 5 isn’t out yet (you can, however, preview it now), but that doesn’t mean we don’t get a sneak peek! Most notably are 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 was released with a bunch of fixes to HTML, CSS and sourcemap compilation
The latest version of the Svelte language tools enhances component references in the “Find All References” command, fixes a persistent issue with automated types going missing after restarting a project and adds fallback handling to auto-types (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, #9755)

That’s all for the new features! If you’re looking for other patches and performance updates, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Svelte Summit Fall is happening on Nov 11, 2023. The 7th Virtual Svelte Conference is open for proposals until October 15 - anyone can submit!

Threlte is throwing a 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 is a Conway’s Game of Life implementation using SvelteKit tech
Limey is an easy-to-use website builder for simple sites and landing pages
Appwrite’s new landing page is now written with SvelteKit (previously covered was their console UI in Svelte)
PlaceIt is a game about numbers and places
Sveltroid is a fan-made recreation of Metroid Prime: Remastered (code)
Bolighub is a Denmark housing search portal
Dithering is a tool to dither photos with plenty of options
Rocky Mountain Slam is an interactive map to follow Jason Heyn as he attempts to complete the first ever Rocky Mountain Slam (code)

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte 5: Introducing Runes... with Rich Harris and its follow-up: Svelte 5 runes: what’s the deal with getters and setters?
Conditionally stream data in SvelteKit by Geoff Rich
Svelte Runes Change How Reactivity Works In Svelte, Make A 3D GitHub Skyline With Svelte To Flex On Your Peers, Simple Page Transitions Using The View Transitions API With SvelteKit and Using JavaScript Libraries With Svelte Is Easy by Joy of Code
Modern Web Podcast S11E2 - Exploring Svelte, Open Source, and Discord Bots with Willow (GHOST)
We are back! Svelte 5, Transitions, What’s New?! by Svelte Radio
This Week in Svelte:
- 2023 September 1 - SvelteKit 1.24.0, View Transitions API, AbortController
- 2023 September 8 - SvelteKit 1.24.1, Capacitor walkthrough, reusing prop types
- 2023 September 15 - SvelteKit 1.25.0, deserialize form data, magic is coming
- 2023 September 22 - Svelte 5 Runes!

To Watch

RUNES - Coming in Svelte v5 | My Take by Coding Garden
Don’t Sleep on Svelte 5 and Level Up Your Svelte Stores by Huntabyte
Introduction To Svelte Runes (Every Svelte Rune Explained) by Cooper Codes
Svelte Runes: Awesome or Awful? by Jack Herrington
Let Build A Youtube Clone With SvelteKit (Svelte, Tailwind Css, RapidApi, Shadcn Svelte, Axios, etc) by Lawal Adebola

To Read

Create the Perfect Sharable Rune in Svelte by Jonathan Gamble
You Don’t Need to “Learn” Svelte by KaviiSuri
Build Websites with Prismic and SvelteKit by Angelo Ashmore
How to embed Svelte apps inside PHP? by Justin Ahinon
Using Web Browser’s Indexed DB in SvelteKit by Shivam Meena
Integrate Storybook in Svelte: Doing it the Svelte-way by Oscar Dominguez
The Sveltekit tutorial: Part 1 | What, why, and how? by Suyashtnt

Libraries, Tools & Components

KitForStartups is an Open Source SvelteKit SaaS boilerplate
SuperNavigation is a mobile-like navigation UX for the web
skeleton-material-theme is a Material theme for the Skeleton UI library
better-i18n-for-svelte is a SEO focused library for multi-language SvelteKit sites
uico is a Tailwind plugin that provides utility classes for basic UI elements
svelte-maskify is a action wrapper for AlpineJS masks
sveltekit-capacitor is a template for building a SvelteKit SPA with Capacitor
router-gen.ts is a type-safe router for SvelteKit

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

Hacktoberfest 2023 with SvelteKit

Willow (GHOST) & Braden Wiggins — Sun, 01 Oct 2023 00:00:00 GMT

Sveltekit 🧡 Hacktoberfest

We’re excited to announce SvelteKit’s participation in this year’s Hacktoberfest! Hacktoberfest is a global event that takes place every October, during which developers are encouraged to contribute to open-source projects like SvelteKit. The goal is to foster a vibrant open-source community, celebrate shared knowledge, and make the world of coding more accessible to all. You can find other participating repositories by searching the hacktoberfest topic on github.

Getting Started

The first step is to register for Hacktoberfest. Once you’ve registered, any PRs submitted to Sveltekit will count towards your participation in the event!

Contributing

If you need inspiration when looking for an issue to fix, check out the low hanging fruit, contributions-welcome, ready to implement, or documentation tags.

It’s a good idea to communicate clearly and often about what you’re trying to solve or take on. You can do this by commenting on the issues you intend to take on. This helps avoid duplicate work and ensures that your contribution is in line with the project’s goals. Nobody likes to have their work rejected, so it’s best to ask questions early and often!

Join our Discord 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! 🎃

Rune 導入 (Introducing runes)

The Svelte team — Wed, 20 Sep 2023 00:00:00 GMT

2019 年、Svelte 3 は JavaScript をリアクティブな言語に変えました。Svelte はコンパイラを使用する web UI フレームワークで、このような宣言的なコンポーネントを…

App

<script>
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
</button>

<script lang="ts">
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
</button>

…count のようなステートが変化したときに document を更新する、タイトに最適化された JavaScript に変換します。コンパイラは count が参照されている場所を ‘把握’ することができるので、生成されるコードは非常に効率的です。また、扱いにくい API を使用するのではなく、let や = などの構文をジャックしているため、コード量を減らすことができます。

私たちがよく受けるフィードバックとして、’JavaScript をすべてこのように書けたらいいのに’ というものがあります。コンポーネント内のものが魔法のように更新されることに慣れていると、退屈で古い手続き型のコードに戻ることは、まるでカラーから白黒に戻るように感じられます。

Svelte 5 では、rune によって全てを変え、ユニバーサルできめ細やかなリアクティビティ(universal, fine-grained reactivity) を実現します。

Rune 導入

前書き

内部の動作を変更しているのですが、Svelte 5 はほとんどの方の場合ドロップインで置き換えられるはずです。この新機能はオプトインであるため、既存のコンポーネントを引き続き使用することができます。

Svelte 5 のリリース日はまだ決まっていません。ここでお見せするものはまだ作業中のものであり、変更される可能性があります！

Rune とは

rune /ro͞on/ noun

神秘的で魔法的なシンボルとして使用される文字、またはマーク。

Rune は Svelte コンパイラに働きかけるシンボルです。現在の Svelte では let、=、export キーワード、そして $: ラベルを特殊なものとして意味するように使用するのに対し、rune は同様のことを 関数の構文(function syntax) で実現します。

例えば、リアクティブなステートを宣言するには、$state という rune を使用します:

App

<script>
	let count = 0;
	let count = $state(0);

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
</button>

<script lang="ts">
	let count = 0;
	let count = $state(0);

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
</button>

一見すると、これは後退しているように見えるかもしれません。Svelte らしくない(un-Svelte-like)、と。デフォルトで let count がリアクティブであるほうが良いのではないか？と。

いいえ、それは違います。実際、アプリケーションが複雑になってくるにつれ、どの値がリアクティブでどの値がリアクティブでないのか判別するのが難しくなってくるのです。また、このヒューリスティックはコンポーネントのトップレベルにある let 宣言でのみ機能するため、混乱を招く可能性があります。コードの振る舞いが .svelte ファイル内と .js で異なっていると、コードのリファクタリングが難しくなります。例えば、何かを store にして複数の場所で使えるようにする必要がある場合などです。

コンポーネントを越えて

rune を使うと、リアクティビティが .svelte ファイルの境界を越えて拡がっていきます。counter のロジックをコンポーネント間で再利用できるようにカプセル化したいとします。現在は、custom store を .js や .ts ファイルで使用することになるでしょう:

counter

import { function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>Create a Writable store that allows both updating and reading by subscription.
@paramvalue initial valuewritable } from 'svelte/store';

export function function createCounter(): {
    subscribe: (this: void, run: Subscriber<number>, invalidate?: () => void) => Unsubscriber;
    increment: () => void;
}createCounter() {
	const { const subscribe: (this: void, run: Subscriber<number>, invalidate?: () => void) => UnsubscriberSubscribe on value changes.
subscribe, const update: (this: void, updater: Updater<number>) => voidUpdate value using callback and inform subscribers.
update } = writable<number>(value?: number | undefined, start?: StartStopNotifier<number> | undefined): Writable<number>Create a Writable store that allows both updating and reading by subscription.
@paramvalue initial valuewritable(0);

	return {
		subscribe: (this: void, run: Subscriber<number>, invalidate?: () => void) => Unsubscribersubscribe,
		increment: () => voidincrement: () => const update: (this: void, updater: Updater<number>) => voidUpdate value using callback and inform subscribers.
@paramupdater callbackupdate((n: numbern) => n: numbern + 1)
	};
}

これは ストアコントラクト(store contract) を実装しているため、戻り値には subscribe メソッドがあり、store の名前の先頭に $ を付けることでその store の値を参照することができます:

App

<script>
	import { createCounter } from './counter.js';

	const counter = createCounter();
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
<button on:click={counter.increment}>
	clicks: {$counter}
</button>

<script lang="ts">
	import { createCounter } from './counter.js';

	const counter = createCounter();
	let count = 0;

	function increment() {
		count += 1;
	}
</script>

<button on:click={increment}>
	clicks: {count}
<button on:click={counter.increment}>
	clicks: {$counter}
</button>

動作しますが、かなり奇妙です！ store API は、複雑なことをやり始めるとかなり扱いにくくなることがわかりました。

rune を使えば、もっとシンプルになります:

counter.svelte

import { writable } from 'svelte/store';

export function function createCounter(): {
    readonly count: number;
    increment: () => number;
}createCounter() {
	const { subscribe, update } = writable(0);
	let let count: numbercount = function $state<0>(initial: 0): 0 (+1 overload)
namespace $stateDeclares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);

	return {
		subscribe,
		increment: () => update((n) => n + 1)
		get count: numbercount() { return let count: numbercount },
		increment: () => numberincrement: () => let count: numbercount += 1
	};
}

App

<script>
	import { createCounter } from './counter.svelte.js';

	const counter = createCounter();
</script>

<button on:click={counter.increment}>
	clicks: {$counter}
	clicks: {counter.count}
</button>

<script lang="ts">
	import { createCounter } from './counter.svelte.js';

	const counter = createCounter();
</script>

<button on:click={counter.increment}>
	clicks: {$counter}
	clicks: {counter.count}
</button>

rune は、.svelte コンポーネント以外だと .svelte.js モジュールと .svelte.ts モジュールでのみ使うことができます。

戻り値のオブジェクトで get property を使用しているため、counter.count はこの関数が呼ばれたときの値ではなく、常に現在の値を指すことにご留意ください。

Runtime reactivity

現在、Svelte は コンパイル時のリアクティビティ(compile-time reactivity) を使用しています。これはつまり、依存しているものが変更されたときに自動的に再実行されるよう $: ラベルを使用しているコードがある場合において、それらの依存関係 (dependencies) は Svelte がコンポーネントをコンパイルするときに決定される、ということです:

<script>
	export let width;
	export let height;

	// コンパイラは、`width` や `height` のどちらかが変更されると
	// `area` を再計算する必要があることをわかっています…
	$: area = width * height;

	// …そして、`area` の値が変更されたときに
	// ログ出力することもわかっています…
	$: console.log(area);
</script>

これは上手く機能します…が、上手くいかないこともあります。上記のコードをリファクタリングしたとしましょう:

const const multiplyByHeight: (width: any) => numbermultiplyByHeight = (width) => width: anywidth * height;

$: area = const multiplyByHeight: (width: any) => numbermultiplyByHeight(width);

この $: area = ... の宣言では、width しか ‘把握’ することができないため、height が変更されても再計算されなくなります。結果として、コードをリファクタリングするのが難しくなり、複雑さがあるレベルを越えてくると Svelte がいつどの値を更新するのか、ということを理解するのが難しくなってきます。

Svelte 5 では $derived rune と $effect rune が導入され、評価されるときにその式の依存関係(dependencies)が決定されるようになります:

<script>
	let { width, height } = $props(); // instead of `export let`

	const area = $derived(width * height);

	$effect(() => {
		console.log(area);
	});
</script>

$state と同様、$derived と $effect も .js ファイルや .ts で使用することができます。

Signal boost

他のすべてのフレームワークと同じように、私たちは Knockout が正しかったことに気が付きました。

Svelte 5 のリアクティビティは signal によってもたらされており、これは本質的には Knockout が 2010年に行っていたことです。最近では、signal は Solid によって普及し、そして他の多くのフレームワークにも採用されています。

しかし、私たちの方法は少し異なります。Svelte 5 では、signal は直接操作をするものではなく、内部実装の詳細です。これにより、同様の API の設計上の制約がないため、効率とエルゴノミクスの両方を最大化することができます。例えば、関数呼び出しで値にアクセスすることによって発生する型の絞り込み(type narrowing)の問題を避けることができ、また、サーバーサイドレンダリングーモードでコンパイルする際には signal を完全に取り除くことができます (サーバー上では signal はオーバーヘッドだからです)。

Signal は きめ細やかなリアクティビティ(fine-grained reactivity) を実現し、それはつまり (例えば) 大きいリストの中にある値を変更しても、そのリストの他のメンバーを最新化(invalidate)する必要がないということです。そのため、Svelte 5 はとてつもなく高速です。

よりシンプルな時代の到来

Rune は付加的な機能ですが、既存のコンセプトの多くを不要なものにします:

コンポーネントのトップレベルにある let とそれ以外の場所にある let の違い
export let
$: と、これに付随する風変わりなもの全て
<script> と <script context="module"> の振る舞いの違い
$$props と $$restProps
ライフサイクル関数 (onMount などは $effect 関数で良いでしょう)
store API と $ 接頭辞 (store は不要になりますが、非推奨ではありません)

すでに Svelte を使用している方々にとっては、新たに学ぶことがありますが、これが Svelte アプリの構築とメンテナンスをより簡単になればと思っています。これから Svelte を使う方は、全てを学習する必要はありません。ドキュメントに ‘old stuff’ というタイトルのセクションがあるだけになるでしょう。

これはまだ始まりに過ぎません。今後のリリースに向けて、Svelte をよりシンプルで高機能にするアイデアでいっぱいの長いリストがあります。

Try it!

まだ Svelte 5 をプロダクションで使用することはできません。私たちは今現在作業中で、いつあなたのアプリで使えるようになるのかお伝えすることができません。

しかし、私たちはみなさんを待たせたままにしたくありませんでした。プレビューサイトを作成し、新機能の詳細な説明と、インタラクティブな playground を用意しました。また、Svelte Discord の #svelte-5-runes チャンネルでより詳しく学ぶこともできます。みなさんのフィードバックをお待ちしております！

What’s new in Svelte: September 2023

Dani Sandoval — Fri, 01 Sep 2023 00:00:00 GMT

Happy September y’all! With all the sneak peeks at what’s coming soon in Svelte 5, we thought it’d be best to look back at the last month to see what’s shipped and what the community is building with Svelte.

Before we jump in, a warm welcome to the new Svelte Ambassadors: @cainux and @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, #10570)
Mistyped route filenames will now throw a warning (1.23.0, #10558)
The new onNavigate lifecycle function enables view transitions - Check out the blog post for more info (1.24.0, Docs, #9605)

But that’s just the new features! For all the patches and performance updates from this month, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

Planet Of The Bugs 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 is an Android game built with SvelteKit, Capacitor, TailwindCSS and DaisyUI (check it out on the Google Play Store)
Pendor is an AI component generator for Svelte
Avatars Pro is a social proof widget made for the web
Pomodoro Focus is a pomodoro timer browser extension
memegen is a Firefox web extension that allows users to generate memes using various templates
Resgen is a Chrome extension that tailors resumes based on job descriptions and your experiences
Icono Search is an AI-powered video search engine
digital-paper is a writing app with no backspace or undo
Ubuntu 22.04 in Svelte aims to replicate the Ubuntu 22.04 desktop experience on the web
My Queue creates a playlist of written articles by turning them into audio stories

Learning Resources

Featuring Svelte Contributors and Ambassadors

Svelte Society - London August 2023
Building a Blog using SvelteKit and Nostr as a CMS (Part 1) by Kev
Mastering SvelteKit with Geoff Rich | JS Drops by This Dot Media
Using GitHub Contributions To Flex On The Normies, Learn Svelte By Making A Matching Game and Who Needs API Permission When You Can Use Web Scraping by Joy of Code
The missing guide to understanding adapter-static in SvelteKit by Stanislav Khromov
This Week in Svelte:
- 2023 July 28 - Screen reader market share, Svelte to plain JS, Web Components
- 2023 Aug 4 - Svelte 4.1.2, SvelteKit 1.22.4, ES Modules, Types in markup
- 2023 August 11 - Svelte 4.2.0, SvelteKit 1.22.5, How to create Toggle Switches
- 2023 August 18 - SvelteKit 1.22.6, accessible form error summaries
- 2023 August 25 - SvelteKit 1.23.0, Bun and SvelteKit, Enhanced search
Svienna (Svelte Society Vienna) Sessions
Sirens Sessions
- Prismic Slice Machines & SvelteKit with Sam Littlefair
- Medusa and SvelteKit E-Commerce Stack with Lacey Pevey
- Design Systems: Lessons Learned with Eric Liu

To Watch

Image optimization in SvelteKit with vite-imagetools by hartenfellerdev
Building a Todo App with Rust and SvelteKit: Complete Tutorial and Stripe Payment In SvelteKit With Dynamic Pricing by SvelteRust
Leaflet maps in SvelteKit like it’s 2023 (HowTo) ShipBit

To Read

Internationalization in SvelteKit (Series) by Aakash Goplani
The easiest Chatbot you will ever build and Intro to LangSmith🦜️🛠️ by Simon Prammer
SvelteKit: How to make code-based router, instead of file-based router [August 2023] by Max Core
SvelteKit Hydration Gotcha by Captain Codeman
Automatically generate sitemap.xml in SvelteKit by Alex Schnabl
Discovering Svelte: Things I Learned While Using Svelte by Posandu Mapa
Typed fetch with Sveltekit and Hono using RPC by Subhendu Pratap Singh
Svelte Context Module Scripts Explained by raqueebuddin aziz
Building with GPT4 and Svelte by levmiseri
Type-safe User Authentication in SvelteKit with Lucia, Planetscale, and Upstash Redis by Chris Jayden
Document Svelte Projects with HTML and JSDoc Comments by Ross Robino

Libraries, Tools & Components

Carta is a lightweight, fast and extensible Svelte Markdown editor and viewer, based on Marked
Threlte, the 3D framework built from Svelte and Three.js has released version 6
vite-plugin-web-extension works great with Svelte to make building browser extensions easier
Salvia-kit Svelte Dashboards contains 10 free dashboard templates for SvelteKit
drab is an Unstyled Svelte component library
svelte-img-previewer is a tool for displaying images from input file types in Svelte
sveltekit-search-params describes itself as the fastest way to read AND write from query search params in SvelteKit

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

Unlocking view transitions in SvelteKit 1.24

Geoff Rich — Thu, 31 Aug 2023 00:00:00 GMT

The view transitions API has been sweeping the web development world lately, and for good reason. It streamlines the process of animating between two page states, which is especially useful for page transitions.

However, until now, you couldn’t easily use this API in a SvelteKit app, since it was difficult to slot into the right place in the navigation lifecycle. SvelteKit 1.24 brought a new onNavigate lifecycle hook to make view transitions integration much easier – let’s dive in.

How view transitions work

You can trigger a view transition by calling document.startViewTransition and passing a callback that updates the DOM somehow. For our purposes today, SvelteKit will update the DOM as the user navigates. Once the callback finishes, the browser will transition to the new page state — by default, it does a crossfade between the old and the new states.

var document: DocumentMDN Reference
document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback): ViewTransitionMDN Reference
startViewTransition(async () => {
	await const domUpdate: () => Promise<void>domUpdate(); // mock function for demonstration purposes
});

Behind the scenes, the browser does something really clever. When the transition starts, it captures the current state of the page and takes a screenshot. It then holds that screenshot in place while the DOM is updating. Once the DOM has finished updating, it captures the new state, and animates between the two states.

While it’s only implemented in Chrome (and other Chromium-based browsers) for now, WebKit is also in favor of it. Even if you’re on an unsupported browser, it’s a perfect candidate for progressive enhancement since we can always fall back to a non-animated navigation.

It’s important to note that view transitions is a browser API, not a SvelteKit one. onNavigate is the only SvelteKit-specific API we’ll use today. Everything else can be used wherever you write for the web! For more on the view transitions API, I highly recommend the Chrome explainer by Jake Archibald.

How onNavigate works

Before learning how to write view transitions, let’s highlight the function that makes it all possible: onNavigate.

Until recently, SvelteKit had two navigation lifecycle functions: beforeNavigate, which fires before a navigation starts, and afterNavigate, which fires after the page has been updated following a navigation. SvelteKit 1.24 introduces a third: onNavigate, which will fire on every navigation, immediately before the new page is rendered. Importantly, it will run after any data loading for the page has completed – since starting a view transition prevents any interaction with the page, we want to start it as late as possible.

You can also return a promise from onNavigate, which will suspend the navigation until it resolves. This will let us wait to complete the navigation until the view transition has started.

function function delayNavigation(): Promise<any>delayNavigation() {
	return new var Promise: PromiseConstructor
new <any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise<any>Creates a new Promise.
@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.Promise((res: (value: any) => voidres) => function setTimeout(callback: (_: void) => void, delay?: number): NodeJS.Timeout (+2 overloads)MDN Reference
setTimeout(res: (value: any) => voidres, 100));
}

onNavigate(async (navigation) => {

	// do some work immediately before the navigation completes

	// optionally return a promise to delay navigation until it resolves
	return function delayNavigation(): Promise<any>delayNavigation();
});

With that out of the way, let’s see how you can use view transitions in your SvelteKit app.

Getting started with view transitions

The best way to see view transitions in action is to try it yourself. You can spin up the SvelteKit demo app by running npm create svelte@latest in your local terminal, or in your browser on StackBlitz. Make sure to use a browser that supports the view transitions API. Once you have the app running, add the following to the script block in src/routes/+layout.svelte.

import { function onNavigate(callback: (navigation: import("@sveltejs/kit").OnNavigate) => MaybePromise<void | (() => void)>): voidA lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.
If you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.
If a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.
onNavigate must be called during a component initialization. It remains active as long as the component is mounted.
onNavigate } from '$app/navigation';

function onNavigate(callback: (navigation: import("@sveltejs/kit").OnNavigate) => MaybePromise<void | (() => void)>): voidA lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.
If you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.
If a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.
onNavigate must be called during a component initialization. It remains active as long as the component is mounted.
onNavigate((navigation: OnNavigatenavigation) => {
	if (!var document: DocumentMDN Reference
document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback): ViewTransitionMDN Reference
startViewTransition) return;

	return new var Promise: PromiseConstructor
new <void | (() => void)>(executor: (resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => void, reject: (reason?: any) => void) => void) => Promise<void | (() => void)>Creates a new Promise.
@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.Promise((resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => voidresolve) => {
		var document: DocumentMDN Reference
document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback): ViewTransitionMDN Reference
startViewTransition(async () => {
			resolve: (value: void | (() => void) | PromiseLike<void | (() => void)>) => voidresolve();
			await navigation: OnNavigatenavigation.NavigationBase.complete: Promise<void>A promise that resolves once the navigation is complete, and rejects if the navigation
fails or is aborted. In the case of a willUnload navigation, the promise will never resolve
complete;
		});
	});
});

With that, every navigation that occurs will trigger a view transition. You can already see this in action – by default, the browser will crossfade between the old and new pages.

How the code works
This code may look a bit intimidating – if you’re curious, I can break it down line-by-line, but for now it’s enough to know that adding it will allow you to interact with the view transitions API during navigation.

As mentioned above, the onNavigate callback will run immediately before the new page is rendered after a navigation. Inside the callback, we check if document.startViewTransition exists. If it doesn’t (i.e. the browser doesn’t support it), we exit early.

We then return a promise to delay completing the navigation until the view transition has started. We use a promise constructor so that we can control when the promise resolves.
return new var Promise: PromiseConstructor
new <any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise<any>Creates a new Promise.
@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.Promise((resolve: (value: any) => voidresolve) => {
	var document: DocumentMDN Reference
document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback): ViewTransitionMDN Reference
startViewTransition(async () => {
		resolve: (value: any) => voidresolve();
		await navigation.complete;
	});
});
Inside the promise constructor, we start the view transition. Inside the view transition callback we resolve the promise we just returned, which indicates to SvelteKit that it should finish the navigation. It’s important that the navigation waits to finish until > after we start the view transition – the browser needs to snapshot the old state so it can transition to the new state.

Finally, inside the view transition callback we wait for SvelteKit to finish the navigation by awaiting navigation.complete. Once navigation.complete resolves, the new page has been loaded into the DOM and the browser can animate between the two states.

It’s a bit of a mouthful, but by not abstracting it we allow you to interact with the view transition directly and make any customizations you require.

Customizing the transition with CSS

We can also customize this page transition using CSS animation. In the style block of your +layout.svelte, add the following CSS rules.

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes slide-from-right {
	from {
		transform: translateX(30px);
	}
}

@keyframes slide-to-left {
	to {
		transform: translateX(-30px);
	}
}

: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;
}

: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;
}

Now when you navigate between pages, the old page will fade out and slide to the left, and the new page will fade in and slide from the right. These particular animation styles come from Jake Archibald’s excellent Chrome Developers article on view transitions, which is well worth a read if you want to understand everything you can do with this API.

Note that we have to add :root before the ::view-transition pseudoelements – these elements are only on the root of the document, so we don’t want Svelte to scope them to the component.

You might have noticed that the entire page slides in and out, even though the header is the same on both the old and new page. To make for a smoother transition, we can give the header a unique view-transition-name so that it is animated separately from the rest of the page. In src/routes/Header.svelte, find the header CSS selector in the style block and add a view transition name.

header {
	display: flex;
	justify-content: space-between;
	view-transition-name: header;
}

Now, the header will not transition in and out on navigation, but the rest of the page will.

Fixing the types

Since startViewTransition is not supported by all browsers, your IDE may not know that it exists. To make the errors go away and get the correct typings, add the following to your app.d.ts:

declare global {
	// preserve any customizations you have here
	namespace App {
		// interface Error {}
		// interface Locals {}
		// interface PageData {}
		// interface Platform {}
	}

	// add these lines
	interface ViewTransition {
		updateCallbackDone: Promise<void>;
		ready: Promise<void>;
		finished: Promise<void>;
		skipTransition: () => void;
	}

	interface Document {
		startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
	}
}

export {};

Transitioning individual elements

We just saw how giving an element a view-transition-name separates it out from the rest of the page’s animation. Setting a view-transition-name also instructs the browser to smoothly animate it to its new position after the transition completes. The view-transition-name acts as a unique identifier so the browser can identify matching elements from the old and new states.

Let’s see what that looks like – our demo app’s navigation has a small triangle indicating the active page. Right now, it abruptly appears in the new position after we navigate. Let’s give it a view-transition-name so the browser animates it to its new position instead.

Inside src/routes/Header.svelte, find the CSS rule creating the active page indicator and give it a view-transition-name:

li[aria-current='page']::before {
	/* other existing rules */
	view-transition-name: active-page;
}

By adding that single line, the indicator will now smoothly slide to its new position instead of jumping.

(It might be easy to miss the difference – look at the small moving triangle indicator at the top of the screen!)

Reduced motion

It’s important to respect our users’ motion preferences while implementing animation on the web. Just because you can implement an extreme page transition doesn’t mean you should. To disable all page transitions for users who prefer reduced motion, you can add the following to the global styles.css:

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

While this may be the safest option, reduced motion does not necessarily mean no animation. Instead, you could consider your view transitions on a case-by-case basis. For instance, maybe we disable the sliding animation, but leave the default crossfade (which doesn’t involve motion). You can do so by wrapping the ::view-transition rules you want to disable in a prefers-reduced-motion: no-preference media-query:

@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;
	}

	: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;
	}
}

What’s next?

As you can see, SvelteKit doesn’t abstract a whole lot about how view transitions work – you’re interacting directly with the browser’s built-in document.startViewTransition and ::view-transition APIs, rather than framework abstractions like those found in Nuxt and Astro. We’re eager to see how people end up using view transitions in SvelteKit apps, and whether it makes sense to add higher level abstractions of our own in future.

Resources

You can find the demo code from this post on GitHub and the live version deployed to Vercel. Here are some other view transitions resources you may find helpful:

What’s new in Svelte: August 2023

Dani Sandoval — Tue, 01 Aug 2023 00:00:00 GMT

Some sweet new features have dropped in both Svelte and SvelteKit, this month. It’s also great to see how many products and side projects have launched using Svelte as their core technology!

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.

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 or the PR for more info!

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, #9753)
Responses with Vary headers are now cached, too (except for Vary: *) (1.22.0, Docs, #9993)
There’s now a more helpful error for preview if SvelteKit’s build output doesn’t exist (1.22.2, #10337)

For all the patches and performance updates from this month, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

GitLight brings GitHub & GitLab notifications to your desktop
Days is paprikka’s life in days, inspired by Buster Benson’s Life in Weeks
Mofi is a content-aware fill and trim for music
JSON Bucket stores your JSON data so you can access it anywhere through generated API routes
Soggy Planet is an interactive map of Earth where sea levels rise and fall and the lights of civilization shine through the night (Source)
PaperClip is a Chrome extension that makes it easy to memorize details from papers in machine learning, computer vision, and natural language processing.
Maktaba is a bookmark manager that “you will actually use”
Whispering is a Chrome extension that lets you access OpenAI’s Whisper API for fast transcription in the browser (including ChatGPT)
DocuTalk is an AI Customer Support chatbot for your website
Krello is a Trello clone built with Svelte, Appwrite and Flowbite
Been is a map builder with travel stats like visited countries, extreme visited points, etc.
image-to-social-media-thumbnail lets you convert any image to a social media thumbnail
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 by This Dot Media
Svelte Sirens Stream Design Systems: Lessons Learned featuring Eric Liu, creator of Carbon Components Svelte and the sveld docgen library
This Week in Svelte:
- 2023 June 30 - Svelte 4.0.1, SK 1.21, lists, screen readers, loading
- 2023 July 7 - Svelte 4.0.5, Kit 1.22.1, Svelte 5, local storage and markdown
- 2023 July 21 - Svelte 4.1.1, SvelteKit 1.22.3, Progressive enhancement

To Watch/Hear

What is The Transitional Web? with Chris Ferdinandi by Smashing Podcast
SvelteKit in 100 seconds by Fireship
Primo V2 Introduction by Primo (a visual CMS based on Svelte)
Understanding Svelte (vs React) by Kodaps Academy
Is it thàt simple? - Mastering SvelteKit by Threeveloper
Markdown in SvelteKit with custom Components: mdsvex by hartenfellerdev
How To Add Confetti for Svelte and Sveltekit 🎉 and Make Your SvelteKit Code 10x Faster With Rust and WebAssembly by SvelteRust

To Read

SvelteJS: My ecosystem is bigger than yours by roguegpu
Avoid shared state on the server in SvelteKit by Aakash Goplani
SvelteKit Fontaine: Reduce Custom Font CLS by Rodney Lab
A Simple Guide to Redirects in Svelte Kit by Justin Golden
React vs Svelte (Q3 2023) by Gee
SvelteKit Page Reaction Component with Upstash Redis by Scott Spence
Building a privacy-friendly, self-hosted application architecture with SvelteKit and Building a privacy-friendly, self-hosted application architecture with SvelteKit by Stanislav Khromov
Deploying Sveltekit on IIS by Nutchapon Makelai
Streamlined Authentication and Secrets Management by Eman

Libraries, Tools & Components

Melt UI is a set of headless, accessible component builders for Svelte
MDsveX has been updated to work with Svelte 4
Svelte Sonner is an opinionated toast component for Svelte
WebExtensionTemplate lets you skip the boilerplate and write a Web Extension with TypeScript and Svelte or React
svelte-rust lets you run Rust code in your Svelte app
SvelteKit SSE provides an easy way to produce and consume server sent events
better-svelte-writable provides a type-safe writable which gives you more control over the container
Svetch.ts is a client/types/schema/docs generator for your API endpoints
sveltekit-localize-url handles URL localization and routing
elegua is a small, reactive PWA router for Svelte
Molly is a bash script and npm module that helps you clean up unused Svelte components in your project
sveltekit-bot is a Telegram bot made with SvelteKit and Vercel

Thanks for reading! As always, feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋

What’s new in Svelte: July 2023

Dani Sandoval — Sat, 01 Jul 2023 00:00:00 GMT

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. From performance fixes and developer experience improvements to a brand new site, docs and tutorial... 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 for all the details.

For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.

What’s new in SvelteKit

This month there were lots of awesome bug fixes, 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, #10170)
A new config option, config.kit.env.privatePrefix will set a private prefix on environment variables. This defaults to '' (1.21.0, Docs, #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, #9969)

For adapter-specific changes, check out the CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

Heerdle is a remake of Spotify’s now-defunct Heardle - the daily music guessing game
Meoweler is a travel site filled with cats and helpful facts about popular destinations
A tech lead from IKEA gave a few more details on the way they build pages (and page template) using Svelte
The Quest to Replace Passwords features an interactive comparison visualization for all the popular password management tools
audiogest lets you turn speech to text & summarize any audio in one click
heroify generates 3D graphics for your website with AI
Diesel Legacy: The Brazen Age is a fighting game whose leaderboard and profile pages were all built in Svelte
markmyimages is a watermarking tool with bulk image resize, rename, effects, and more
md.robino.dev is a web based markdown editor
YABin is Yet Another Pastebin with some very specific features

Learning Resources

Featuring Svelte Contributors and Ambassadors

Dev Vlog: June 2023 - Svelte 4.0 with Rich Harris
PodRocket: Svelte 4 with Geoff
This Dot Media: Svelte 4 Launch Party with Simon, Ben, Geoff, and Puru
Exposing Svelte: Between Two Nerds is a comedic conversation between Rich Harris and Dax Raad
Community Tutorial: Self-hosting SvelteKit with a VPS, Docker, CapRover and GitHub Actions with Stanislav Khromov
SvelteKit and Storybook with Jeppe Reinhold
This Week in Svelte:
- 2023 June 2 - SvelteKit 1.20.1, Svelte 4 pre-release, Headless UI libraries
- 2023 June 9 - Updates, Self-hosting SvelteKit, Passing styles to children
- 2023 June 16 - Svelte 4 next.1, how to create a hamburger menu, group layouts
- 2023 June 23 - Svelte 4, Popovers and hover, Real Time requests with SvelteKit
Svelte Radio
- SvelteLab - a Svelte REPL for SvelteKit with Antonio and Paolo
- Svelte Radio Live - Svelte 4 Summer Special with Simon and Puru
Svelte Society - London June 2023
Using The Svelte Context API With Stores, Impossible FLIP Layout Animations With Svelte And GSAP and Create Beautiful Presentations With Svelte by Joy of Code

To Watch

Server-side filtered, paginated and sorted Table in SvelteKit by hartenfellerdev
Best Icon Library for Svelte and SvelteKit in 2023 by SvelteRust

To Read

From Zero to Production with SvelteKit by Justin Ahinon
Thoughts on Svelte(Kit), one year and 3 billion requests later by Claudio Holanda
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 by Black Spike
Generate Breadcrumb and Navigation in SvelteKit, SvelteKit Authentication using SvelteKitAuth and OAuth providers: A Comprehensive Guide and SvelteKitAuth with Salesforce OAuth provider by Aakash Goplani
Instantly find and remove Svelte component orphans by Jeremy Zaborowski
Migration Guide from Routify to SvelteKit Router by Aakash Goplani
Creating 3D data visualization using Threlte and D3 by DataViz Cubed
Svelte Real‑time Multiplayer Game: User Presence and SvelteKit PostCSS Tutorial: use Future CSS Today by Rodney Lab
SvelteKit’s World of Routing: Unleash power of your app using Dynamic Routes and Parameters by Igor Nowosad

Libraries, Tools & Components

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 has been released. Check out the migration guide and new feature list for more details
Panda CSS is CSS-in-JS with build time generated styles, RSC compatibility and multi-variant support
svelte-section-list is a headless Svelte npm package that provides drag-and-drop functionality for managing items and sections
WebStorm is starting to use the Svelte Language Server in its IDE tooling
shadcn-svelte is an unofficial port of shadcn/ui to Svelte that makes it easy to build your component library from common base components
sveltekit-multibuild is a starter repo to create Android apps, web sites, desktop apps, and Chrome extensions automatically
SvelteKit AI Chatbot is an open-source AI chatbot app template built with SvelteKit, the Vercel AI SDK, OpenAI, and Vercel KV.
KitAI provides batteries-included AI templates for SvelteKit and Next.js
Svelte Form Builder 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 or Discord.

Until next time 👋

svelte.dev: A complete overhaul

Puru Vijay — Thu, 29 Jun 2023 00:00:00 GMT

When the initial version of Svelte v3 was released four years ago, it included the single-page documentation that folks have been familiar with. That documentation structure had stayed the same as Svelte’s API surface increased steadily and more details were added. As a result, the single page got larger and larger to the point where it was becoming difficult to find things. The community had been asking for a revamp, and now it’s here!

Meet the new svelte.dev — a complete overhaul of the old website.

Multi-page docs

The table of contents had grown to be quite large and you had to scroll across half a dozen screens to see the whole thing. We heard you! The docs are all split up into multiple pages now and all pages list their sections in the righthand sidebar.

All modules exposed by Svelte are also listed in the sidebar under the Runtime section:

svelte/compiler is under Compiler and API section

We’ve also taken extra care to ensure that all the links from the old website will be redirected to the correct new page.

Search

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+K for Mac users) and start searching — it even works without JavaScript!

Lights, TypeScript, Action!

The new website comes with a JavaScript / TypeScript toggle, so you can view the docs in your preferred flavour. Every module’s exported types are listed at the bottom of the page for easy reference. The types are automatically generated from Svelte’s source code, so they’re always up to date.

All the JavaScript and TypeScript code snippets have type hints available. Just hover over the variable to see its type. This allows the docs to be type checked at build time, which ensures they’re never out of date.

We also (finally!) added documentation for Actions. Svelte Actions are a way to interact with the DOM, and are a great way to add interactivity to your app. The docs for Actions are also available in TypeScript.

<script lang="ts">
	import type { Action } from 'svelte/action';

	const foo: Action = (node) => {
		// the node has been mounted in the DOM

		return {
			destroy() {
				// the node has been removed from the DOM
			}
		};
	};
</script>

<div use:foo />

Dark mode

After many years of users asking for dark mode on the website so they can read the docs for their night-time coding sessions, we finally added it! The website now has a dark mode toggle, which is also synced with your OS’s dark mode settings. It can be toggled from the top navbar (bottom navbar on mobile).

Updated REPL

The REPL has been rewritten from scratch to be fully typesafe and comes with features like dark mode. It was reimplemented to upgrade to CodeMirror 6 which comes with many accessibility improvements, multi-select mode, performance improvements, tree-shaking, and many more features.

Redesigned homepage

Is it a website redesign if the homepage doesn’t get the same amount of love? 🙃

The homepage has also been updated to align with kit.svelte.dev and features the beautiful Svelte Machine by @vedam.

We sent out a tweet about experimenting with bottom navigation bar on mobile rather than the conventional top navbar. The response was overwhelmingly positive, so we went ahead and added it! This makes it easier to navigate the website on mobile with just one hand. We also made sure that you’ll get to where you want with as few interactions as possible. If you’re in the docs section of the site, you’ll likely want to browse other documentation pages, which is why the navbar will show these by default when opening it with the option to go one level up to the general site navigation.

If you’re on mobile, you can already see it at the bottom. If you’re on desktop, you can see it by resizing your browser window to a smaller size.

Unification of Svelte websites

Now svelte.dev, kit.svelte.dev, and learn.svelte.dev all use the same design system and are more consistent with each other. This makes it easier to navigate between the websites and also makes it easier to maintain them. We have a package shared across the sites called @sveltejs/site-kit, which went through rigorous changes over last 4 months as we have been moving all common code into this package.

For example, we implemented the dark mode toggle in @sveltejs/site-kit. We then simply updated the package on learn.svelte.dev and kit.svelte.dev and those sites got the dark mode toggle automatically (this is also the reason why those sites got the dark mode toggle before the svelte.dev relaunch).

What’s next

We have many more things planned to do post-launch. Some of them are:

Redesigned blog page
Improved search
Playground: a unified REPL and Examples page
Unify the infrastructure of the Svelte REPL and the tutorial by creating a webcontainer-based REPL with rollup as a fallback
Address any feedback

Svelte 4 発表

The Svelte team — Thu, 22 Jun 2023 00:00:00 GMT

数ヶ月の開発期間を経て、Svelte 4 の安定版リリースを発表できることを嬉しく思います。

光陰矢の如し - Svelte 3 がリリースされたのはもう4年以上前です！ JavaScript フレームワークの時間としては、それは大昔のことです。Svelte のフレッシュさはずっと保たれたままでしたが、その間に Node.js とブラウザの API は進化しており、その改善点を取り入れるため、今日、私たちは Svelte を更新します。Svelte 4 は主にメンテナンスリリースであり、要求される最小バージョンを上げ、特定エリアの設計を強化しました。これは、次世代の Svelte、つまり Svelte 5 のための基盤となります - きっとあなたにも気に入って頂けると思います。

If you haven’t tried Svelte yet, take it for a spin in our interactive tutorial, on StackBlitz, or locally with npm create svelte@latest. Svelte lets you easily put together web UIs leveraging the power of HTML, CSS, JS, and the Svelte compiler. Watch Svelte Radio Live to learn more about this release.

What’s new

Performance

このリリースにより、ハイドレーションコードが小さくなり、高速になりました。そのインパクトが見たければ、SvelteKit ユーザーなら .svelte-kit/output/client/_app/immutable/nodes フォルダを調べてみればコンパイル後の出力サイズが小さくなっていることがわかります。例えば、kit.svelte.dev のサイト全体で生成された JS は 12.7% 削減されました (126.3 kB から 110.2 kB になりました)。

Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%.

Svelte の dependencies の数は 61 から 16 に大幅に削減されました。つまり、ユーザーにとってはダウンロードが速くなるとともに、サプライチェーンアタックのリスクも低くなったということです。SvelteKit の最新バージョンでも、dependencies の数を少し減らせました。

Developer experience

Svelte 4 では Svelte でのオーサリング・エクスペリエンスが、より一貫性があり直感的になりました: トランジションでは |local がデフォルトとなったことでアニメーションがページトランジションをブロックしないようになり、プリプロセッサは書くのがより簡単になり、またいくつかの修正によって CSP の設定と使用が簡単になりました。

web components のユーザーにとって、最も大きい変更点は Svelte で custom elements を作成する方法がオーバーホールされたことでしょう。生成方法が変わったことにより、あらゆるバグや不整合が取り除かれました。

最後に、IDE のオーサリングエクスペリエンスの改善もいくつか行いました:

svelte モジュールで cmd+click すると、.d.ts ファイルではなく実装に移動するようになりました
svelte/internal からのインポートが非表示になり、オートコンプリート候補がきれいになりました
auto-imports がより確実に動作するようになりました

Updated site, docs, and tutorial

The official svelte.dev site has gotten an overhaul. It’s now split into multiple pages with improved mobile nav, overhauled typescript docs, dark mode, and an enhanced REPL. The SvelteKit site is also being updated to match. And we’ve updated all the tutorial links to point to our new tutorial experience.

近日、サイトの全ての変更点についてより詳細なブログ記事を掲載しますので、乞うご期待！

Migrating

Svelte 3 と互換性のあるアプリやライブラリのほとんどは、Svelte 4 にも互換性があるでしょう。ライブラリの作者の方は、もし peerDependencies に svelte が指定されている場合は version range に Svelte 4 を含めるように更新する必要があります。アプリケーションの作者の方は、新しくなった最小バージョンの要求 (Node.js 16 など) を満たすようにツールを更新する必要があるでしょう。その他多くの移行ステップは、npx svelte-migrate@latest svelte-4 で処理できます。

完全な詳細についてはマイグレーションガイドをお読みください。

Svelte 5: the next generation of Svelte

Svelte 5 では Svelte コンパイラとランタイムの書き換えを行う予定です。Svelte 4 の主な目的は、古いバンドラーなの様々なテクノロジーのレガシーバージョンをドロップし、モダンなツールを取り入れ、将来の改善のための土台を整えることでした。これらの変更により、Svelte 5 と Svelte 4 のコードベースを比較するのが簡単になり、新しい実装に対して既存のテストを実行することができるようになり、様々なことが便利になります。Svelte 5 では、大きい新機能とパフォーマンスの改善を予定しています。変更についてはまだ作成中で、まだ共有できる段階ではありませんが、ご期待ください！

Changelog

変更点の完全なリストについては changelog をご参照ください。

Acknowledgements

何よりもまず、このリリースを可能にしてくれた Svelte のメンテナー、コントリビューターの皆さまに感謝したいと思います。このリリースに対する複数の PR をコントリビュートしてくれた開発者は @dummdidumm、@gtm-nayan、@benmccann、@tanhauhau、@Karlinator、@ngtr6788 です。また、the Svelte OpenCollective に寄付してくれたコミュニティメンバーにも感謝したいと思います。この寄付で、PuruVJ によるサイトのオーバーホールと、@gtm-nayan の多数の修正をスポンサーすることができました。

最後に、このリリースの準備を助けてくれたエコシステムの多くのライブラリメンテナーにも感謝します。新しいバージョンの aria-query や axobject-query のリリースを助けてくれた @jessebeach、Storybook との互換性を確保してくれた @jreinhold、svelte-testing-library をアップデートしてくれた @yanick、ありがとうございました。また、様々なものが動作していることを確認するために、@dominikg がセットアップしてくれた svelte-ecosystem-ci は、彼が Vite のために行ってくれた同様の作業をモデルにしており、エコシステム内の主要なプロジェクトに対するテストを継続的に支援しています。

What’s new in Svelte: 2023年6月

Dani Sandoval — Thu, 01 Jun 2023 00:00:00 GMT

6月になりましたね。まず、SvelteHack の全カテゴリーの受賞者の皆さま、おめでとうございます！受賞者は5月6日の Svelte Summit で発表されました 🎉

Summit のプレイリストは、the Svelte Society YouTube channel からご覧いただけます (各講演ごとに動画がビデオが分割されています)。まだ見ていない場合は、チェックしてみてください。

今月のニュースレターは、Svelte と Kit の改善点をたくせんお届けします…

What’s new in Svelte

Svelte 4.0 の最初のプレリリースバージョンである Svelte 4.0.0-next.0 が公開されました！このリリースの変更点、改善点、目的に関する説明は GitHub のリリースページでご確認いただけます。Svelte の未来を先行して知りたければ、チェックしてみてください。移行ガイドも含まれておりますので、ごくわずかな破壊的変更・非推奨事項についてもご確認いただけます。

Svelte 3.59.0 も公開され、新機能がたくさん追加されています:

スプレッド構文 (...) による配列の再構築が正しく処理されるようになりました (3.59.0, #8552, #8554)
新たに追加された a11y-autocomplete-valid 警告は、autocomplete 属性が HTML の仕様に従って使用されていない場合に警告を出します (3.59.0, Examples, #8520)
fullscreenElement と visibilityState バインディングが <svelte:document> 要素で使用できるようになりました (3.59.0, #8507)
devicePixelRatio バインディングが <svelte:window> 要素で使用できるようになりました (3.59.0, #8285)
ResizeObserver のバインディング contentRect / contentBoxSize/borderBoxSize/devicePixelContentBoxSize が、bind: で使用できるようになりました (3.59.0, #8022)

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

What’s new in SvelteKit

Route-level entry generators allow exporting an entries function from +page, +page.server, and +server files to supply possible values for params for prerendering (1.16.0, Docs, #9571)
URLs in <meta> tags are now crawled to make programmatic social-images much easier (1.17.0, Docs, #9900)
data and form have been renamed to formData and formElement respectively in the enhance function. Using them through the old names will log a deprecation warning and they’ll be removed in a future version. (1.17.0, Docs, #9902)
Link options can now be set to true and false (1.19.0, Docs, #10039)
The new resolvePath export can be used to build relative paths from route IDs and parameters (1.19.0, #9949)

Community Showcase

Apps & Sites built with Svelte

a-maze is a simple maze generator (using DFS) with any dimensions between 5 cells and 75 cells
Windows 11 in Svelte attempts to replicate the Windows 11 desktop experience on web
JsonCrunch is a JSON viewing, transformation and querying tool meant for quickly manipulating small to medium size pieces of JSON data
Typepost is a simple text post generator for social media
tall.ly is a website for sharing bookmarks (example)
bbchallenge is a collaborative environment to prove or disprove the Busy Beaver conjecture
Reddit Map is a project of computer, data, and social scientists to explore and visualize Reddit
WeWatch allows watching videos together in sync
Wonderplan is an AI-Powered Trip Planner tailored to your preferences and covering all aspects of your trip
CodingView.io is an online coding interview tool
MeatGPT is an art-site that promptly ignores your prompt
Vim Ninja is an interactive Vim course in the browser
prcl is a Pastebin-alternative focused on speed and simplicity
md is a web based markdown editor

Learning Resources

Featuring Svelte Contributors and Ambassadors

This Week in Svelte:
- 2023 April 28 - SK 1.15.9, colour contrast, SK reusable types, path aliases
- 2023 May 5 - SvelteKit 1.16.0, reactive statement lifecycle, custom stores
- 2023 May 12 - Svelte 4.0 preview, SvelteKit 1.16.3, Svelte 3.59.1
- 2023 May 19 - SvelteKit 1.18.0, accessible HTML tables, CSS nesting
- 2023 May 26 - SvelteKit 1.19.0, choosing a UI library, breakpoint debugging
Svelte Radio
- Svelte Summit Hypisode (May 4, 2023)
- A primer on AI for developers with Swyx from Latent Space (May 11, 2023 | Video Version)

To Watch

Build a Blazing Fast SvelteKit Markdown Blog, Page Versus Standalone Endpoints In SvelteKit and Learn How Data Flows In Your SvelteKit App by Joy of Code
Build a ChatGPT Plugin with SvelteKit by SuperMilkDaddy
Svelte makes Drag And Drop API easy! and Simple native-like App in SvelteKit! by Antonio Sarcevic
Let’s Learn Svelte.js in 60 Minutes (fun speed run). by developedbyed

To Read

Bridging Vue 2 and Svelte by Alexis Faizeau
Write Once, Run Anywhere by Ross Robino
Reflections on Migrating my SaaS To SvelteKit by SvelteKitSaaS
Authentication system using rust (actix-web) and SvelteKit by John Owolabi Idogun
SvelteKit Forms: Grammar Check App, SvelteKit Ably: Sqvuably Real‑Time Game and Svelte Login Form Example: Best Practices by Rodney Lab
The Correct Way to Use Stores in SvelteKit and Rich Harris is NOT Getting Rid of TS Support in Svelte by Jonathan Gamble
How to add a basic SEO component to SvelteKit by Thilo Maier
SvelteKit Contact Form Example with Airtable by Scott Spence
Performant Reactivity with Svelte-Kit by Erxk
Svelte stores: the curious parts by Valdimir Klepov

Libraries, Tools & Components

svelte-svg-transform is a tiny library that makes it easier for you to add SVGs and transform them in your Svelte project
sirens is a visualization of active air raid sirens in Ukraine by DER SPIEGEL
Sveltronics is a collection of Svelte utility functions for your project
Prompta is yet another interface for chatting with ChatGPT (or GPT-4)
Colibri is a lightweight, customizable component library for Svelte apps
Svelte Smart Doc is a natural language interface to search the Svelte Svelte documentation
Tailwind Elements now has a Svelte Integration

お読みくださりありがとうございました！いつも通り、見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。

また次回お会いしましょう 👋

What’s new in Svelte: 2023年5月

Dani Sandoval — Mon, 01 May 2023 00:00:00 GMT

最新情報に飛び込む前に、まず最初に特別なアナウンスがあります:

New Svelte Ambassadors

このニュースレターでも定期的にフィーチャーされている、素晴らしい Svelte コンテンツのクリエーターである JoyOfCode と HuntaByte が Svelte アンバサダーに任命されました。Svelte のアンバサダーの方々はその親切さと貢献がよく知られており、そして Svelte がフレンドリーで歓迎されるコミュニティであるという評判を維持してくれていて、私たちはアンバサダーの方々に深く感謝しています。

SvelteHack winners will be announced May 6th

2/17から4/17にかけて開催された SvelteHack の優勝者があと数日で発表されます。あなたが好きなプロジェクトが選ばれたかどうか、5/6 の Svelte Summit をご覧ください 👀

今月のショーケースにはたくさんのハッカソンへの応募作品を紹介しています… でもまずは、最新情報を見ていきましょう！

What’s new in Svelte

style ブロックで CSS @container クエリがサポートされました (3.58.0)
bind:innerText が contenteditable 要素でサポートされました (3.58.0)
新たなアクセシビリティ警告 a11y-interactive-supports-focus は、インタラクティブな要素がフォーカスできないようになっているときに警告してくれます (3.58.0)

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

What’s new in SvelteKit

ホットモジュールリローディング (HMR) が有効なとき、エラーが修正されたあとにページがリロードされるようになりました (1.14.0, #9497)
同じ html ページにロードされた2つのアプリを、”embedded” モードで同時に読み込めるようになりました (1.15.7, #9610)
Vite のコンパイルで、標準の Vite resolve ではなく svelte フィールドを使用して Svelte ファイルの resolve を行うパッケージに対し、警告のログを出力するようになりました (vite-plugin-svelte@2.1.0, kit@1.15.8)

What’s new in Language Tools

<svelte:document> がサポートされ (#1958)、新たなバインディング向けのインテリセンスレポートがサポートされました (#1957) (107.3.0)
“Quick fix...” の新たな fix-all メニューオプションで、”Add all missing imports” や other detected errors が簡単にできるようになりました (107.3.0, #1939)
公式の ESLint plugin が新しく、より良くなりました！これまでの ESLint の Svelte に対するサポートは、テンプレートの AST をうまく扱えず、偽陽性/偽陰性になってしまったり、カスタムの ESLint ルールを作成するのに高い障壁がありました。この新しい公式バージョンは ota-meshi の svelte-eslint-parser がベースとなっており、すぐにお使いいただけます。トライしてみて、フィードバックをシェアしてください！

Community Showcase

Apps & Sites built with Svelte

Sound of War is a storytelling data visualization project to help understand the scale of destruction in Ukraine
Syntax FM’s swag shop is now built with SvelteKit, PlanetScale and Prisma
Appreciation Jar is your own private space where you can send encouraging and appreciative messages to your partner
Japanese Jouzu is a Japanese sound and symbol learning app
MarkMyImages is a tool to bulk watermark, image resize, rename, effects, and more - all on-device for speed and privacy
Immich is a self-hosted photo and video backup solution directly from your mobile phone
Earbetter is an ear training game and tools for playing and programming music and audio
Tune Twisters is a guessing game for songs... in reverse
ResponseHunt is a mystery game based on browser requests - use your programming skills to get to the “golden” response
Wolfensvelte 3D is a Svelte “port” of Wolfenstein 3D
Code Solving teaches how to solve problems with code
Make Bookmarklets is a quick way to create JavaScript bookmarklets with linting, intellisense and auto-minification
GeniePM is an AI tool to help Product Managers write user stories and requirements
Bitesized News is an AI that delivers news digests and responds to questions via chat
Open Tunings is a place to explore alternative guitar tunings without having to retune your guitar
BlinkSMS is a text alert tool for Stockholm Student Housing to help with booking laundry times
Dev Links helps dev showcase multiple links in a single place - similar to Linktree and Kofi
Audiogest is a tool to convert speech to text & summarize any audio
MineSweep is a rendition of Minesweeper built with Svelte and JavaScript
Biolytics lets you import your lab tests to see all your lab tests in one place
Zero share is a secure P2P file sharing using WebRTC
Svelte lab is a sandbox for creating and sharing SvelteKit projects

Learning Resources

Featuring Svelte Contributors and Ambassadors

Dev Vlog: April 2023 - TypeScript vs JSDoc, Transitions API, Dominic Gannaway joins Svelte team
Rich Harris on frameworks, the web, and the edge. from Vercel’s Svelte Meetup in NYC
Svelte & SvelteKit taught by Rich Harris on Frontend Masters
This Week in Svelte:
Svelte Radio

To Watch

The Complete SvelteKit Course For Building Modern Web Apps and Simple SvelteKit Page Transitions by Joy of Code
Svelte For React Developers | Your Next JavaScript Framework? by Cretezy
Svelte & SvelteKit: The Complete Guide by Ali Alaa on Udemy
ChatGPT-4 with SvelteKit 🤖 Generative AI on the EDGE 🌍 by Johnny Magrippis

To Read

Headless WordPress with GraphQL and SvelteKit and How to fix the duplicate meta tags issue in SvelteKit by Justin Ahinon
How to setup tRPC in a SvelteKit project by Raqueebuddin Aziz
Better Data Visualizations with Svelte by newline
Offline App with SvelteKit + SQLite Part 1: Setup WebAssembly SQLite by hartenfellerdev

Libraries, Tools & Components

Sveltris lets you intermix UI primitives like components, and state primitives like hooks between frameworks, without even noticing
SwiftMarket is an E-Commerce solution built with SvelteKit, Pocketbase as a database and Stripe for payments
Svelegante is a Classy writable store for Svelte
Table Generator lets you create, design and customize your own tables tables online using a graphical editor
Svelte Animated Headline is an animated headline component that can grab attention in an informative way
SvelteKit Music App Example demonstrates how to connect and process data as well as some practical examples of how to develop frontend components with TailwindCSS
Socio is a WebSocket Real-Time Communication (RTC) API framework to connect your front-end logic to a back-end database reactively
Flowbite Svelte is an official Flowbite component library for Svelte
Wundergraph, a backend for frontend framework, just released their Svelte Query client
Lucia just reached 1.0 for their simple and flexible auth library for SvelteKit
svelte-stepper is a simple library for building animated stepper flows with Svelte

いつも通り、見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。

また次回お会いしましょう！

What’s new in Svelte: 2023年4月

Dani Sandoval — Sat, 01 Apr 2023 00:00:00 GMT

Happy April、みなさん！今月は、Svelte コンパイラの全ての新機能や、SvelteKit における QOL の改善、そしてたくさんのショーケースを見ていきますよ (いつものようにね)。

コアチームのニュースとしては、Dominic Gannaway が Vercel にジョインし、フルタイムで Svelte に取り組むことになりました！ Dominic は javascript エンジンのパフォーマンスや、DOM、リアクティビティ、アクセシビリティなどのワールドクラスのエキスパートです！ UI フレームワークの Inferno や Meta の WYSIWYG エディタである Lexical の作者としても知られています。彼の才能が Svelte エコシステムで発揮されたら、とても素晴らしい未来が待っているでしょう🌱

こちらもお忘れなく！ 6回目となる Svelte のバーチャルカンファレンス、Svelte Summit Spring が 5月6日に開催されます。また、SvelteHack の締め切りまであと2週間です… あなたの作品をコミュニティにシェアする素晴らしい機会ですし、もしかしたら賞品を獲得できるかも！

それでは、今月の更新を見ていきましょう…

What’s new in Svelte

A bunch of new features are now available as of 3.56.0!
- Add |stopImmediatePropagation event modifier for on:eventname (#5085, Docs)
- Add axis parameter to slide transition (#6182, Docs)
- Add readonly utility to convert writable store to readonly (#6518, Docs)
- Add readyState binding for media elements (#6666, Docs)
- Add naturalWidth and naturalHeight bindings to images (#7771, Docs)
Support  on components (#8082)
Inputs in a bind:group will clear when their value is set to undefined (3.56.0, #8214)
<input> values will now persist when swapping elements with spread attributes in an {#each} block (3.56.0, #7578)
Better warnings across the board - from noreferrer to aria rules (3.56.0)
Add svelte:document (3.57.0, #3310)
The style: directive will now take precedence over a style= attribute (3.57.0, #7475)
CSS units are now supported in the fly and blur transitions (3.57.0, #7623, Docs)

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

What’s new in SvelteKit

You can now get all cookies for a request with cookies.getAll (1.10.0, #9287, Docs)
Easily manage the submission status of (multiple) forms with the new exposed submitter parameter in use:enhance (1.12.0, #9425, Docs)
The default error page now has dark mode styles (1.13.0, #9460)
You can now omit types on all methods and variables with special meaning to SvelteKit and still benefit from full type safety! Read more about it in the announcement blog post

Community Showcase

Apps & Sites built with Svelte

Peerbeer lets you share files peer-to-peer (p2p) without any third parties or data limits
unplaneted is an interface for exploring very large space images
PokeBook is a digital notebook for writing poetry that provides a beautiful distraction-free environment and autosave
papi lets you create prompts for AI models and share them with others with a unique link
Mathesar is a straightforward open source tool that provides a spreadsheet-like interface to a PostgreSQL database
SQLite Playground lets you learn how SQLite runs and stores data in the browser
svgl is a beautiful library with SVG logos
Swehl is an eCommerce store, community and tutorial site for breastfeeding mothers
Codeverter is a GPT-powered code converter, allowing you to convert between different languages and frameworks
Game On Or Not is a free web app that helps you organize sports with your friends
Sveltia CMS is a Git-based lightweight headless CMS

Learning Resources

Featuring Svelte Contributors and Ambassadors

Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich on the svelte.dev Blog
Dev Vlog: Rich Harris shows us what’s new in Svelte and Kit, March 2023 from Svelte Society
- If you missed this one live, check out the next one - scheduled for April 5th
Svelte Society - London February 2023
Svelte Radio episodes from this month:
This Week In Svelte videos:

To Watch or Hear

Full Stack SvelteKit App Deployment Using Vercel And Supabase For $0 by Joy of Code
Why Is Svelte.js so Popular? by Prismic
Interactive Tables in SvelteKit with TanStack Table by hartenfellerdev
SvelteKit + GraphQL with Houdini by Aftab Alam

To Read

Thoughts on Svelte by Ty Hopp
Storybook on why (and how) it supports SvelteKit
Svelte Authentication Tutorial with Authorizer by The Thinks
Use Zod to Validate Forms on the Server with SvelteKit by Ross Robino
Do I need a sitemap for my SvelteKit app, and how do I create it? and Complement zero-effort type safety in SvelteKit with Zod for even more type safety and Configuring Turborepo for a SvelteKit monorepo by Thilo Maier
Adding page transitions in SvelteKit by Josh Collinsworth
E2E testing with SvelteKit and Playwright and Why you should use TypeScript in your next SvelteKit projects by Justin Ahinon
Understanding the structure of a SvelteKit project by Igor Nowosad
Secure Authentication in Svelte using Hooks by Brewhouse Digital

Libraries, Tools & Components

@vavite/node-loader is a Node ESM loader that uses Vite to transpile modules to enable sourcemap and breakpoints support in SvelteKit (or any Vite) project
Inlang is building i18n for SvelteKit and is looking for feedback
Skeleton - the UI toolkit for Svelte and Tailwind - is now 1.0 🎉
SvelteKit-integrated-WebSocket provides first-class support for WebSockets within SvelteKit by attaching a WebSocket server to the global state
Svelte Legos is a collection of essential Svelte Composition Utilities
svelte-stored-writable is a drop-in extension of Svelte’s writable that additionally stores and restores its contents using localStorage.
svelte-virtual provides Svelte components for efficiently rendering large lists.
ChatGPT Clones and Starters
- chatwithme.chat is an open source ChatGPT UI
- SlickGPT is a light-weight “use-your-own-API-key” web client for the OpenAI API written in Svelte
- AI Chat Bestie is an unofficial ChatGPT app
- chatgpt-svelte is a simple UI for the ChatGPT Open AI API

お読みいただきありがとうございました！あと、Svelte Hackathon にも是非チャレンジしてみてください 🧑‍💻

いつも通り、見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。

また次回お会いしましょう！

Zero-effort type safety

Simon Holthausen — Thu, 09 Mar 2023 00:00:00 GMT

SvelteKit アプリに型アノテーションをたくさん書くと、ネットワークをまたいでも完全な型安全性が手に入ります — あなたのページの data には、その data を生成する load 関数の戻り値から推論された型があり、明示的に何かを宣言する必要はありません。これなしで今までどうやって生活してきたのだろう、と考えさせられるようなことの1つです。

でも、型アノテーションが不要になったとしたら？ load と data はフレームワークの一部ですし、フレームワークが私たちのために型付けできないものでしょうか？これは結局、コンピューターが何のためにあるのか、ということです — 退屈なことをやってくれるから、私たちはクリエイティブなことに集中することができるのです。

そして今日現在、それができるようになりました。

VSCode をお使いでしたら、Svelte extension を最新バージョンにアップグレードするだけです。これでもう今後、load 関数や data プロパティにアノテーションを付ける必要はありません。他のエディタ向けの Extension でも、それが Language Server Protocol と TypeScript plugin をサポートしていればこの機能を使うことができます。CLI 診断ツール svelte-check の最新バージョンでも動作します！

詳細に入る前に、SvelteKit の型安全性の仕組みについておさらいしましょう。

Generated types

SvelteKit では、load 関数でページの data を取得します。@sveltejs/kit から ServerLoadEvent をインポートして、この event に型を付けることができます:

src/routes/blog/[slug]/+page.server

import type { interface ServerLoadEvent<Params extends LayoutParams<"/"> = Record<string, string>, ParentData extends Record<string, any> = Record<string, any>, RouteId extends RouteId | null = string | null>ServerLoadEvent } from '@sveltejs/kit';

export async function function load(event: ServerLoadEvent): Promise<{
    post: string;
}>load(event: ServerLoadEvent<Record<string, string>, Record<string, any>, string | null>event: interface ServerLoadEvent<Params extends LayoutParams<"/"> = Record<string, string>, ParentData extends Record<string, any> = Record<string, any>, RouteId extends RouteId | null = string | null>ServerLoadEvent) {
	return {
		post: stringpost: await const database: {
    getPost(slug: string | undefined): Promise<string>;
}database.function getPost(slug: string | undefined): Promise<string>getPost(event: ServerLoadEvent<Record<string, string>, Record<string, any>, string | null>event.RequestEvent<Record<string, string>, string | null>.params: Record<string, string>The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object.
params.stringpost)
	};
}

動作しますが、もっと良くすることができます。このコード例では、パラメーターは post ではなく slug (ファイル名に [slug] とあるため) ですが、誤って event.params.post と書いてしまっていることにお気付きでしょうか。ServerLoadEvent にジェネリクスの型引数を追加して自分で params に型付けすることもできますが、柔軟性がなく壊れやすいです。

そこで、自動型生成の出番です。全てのルート(route)ディレクトリには、それぞれのルート固有(route-specific)の型を持つ $types.d.ts という隠しファイルがあります:

src/routes/blog/[slug]/+page.server

import type { ServerLoadEvent } from '@sveltejs/kit';
import type { import PageServerLoadEventPageServerLoadEvent } from './$types';

export async function function load(event: PageServerLoadEvent): Promise<{
    post: any;
}>load(event: PageServerLoadEventevent: import PageServerLoadEventPageServerLoadEvent) {
	return {
		post: await database.getPost(event.params.post)
		post: anypost: await database.getPost(event: PageServerLoadEventevent.params.slug)
	};
}

これによって params.post プロパティにアクセスしようとするとエラーとなり、打ち間違い(typo)がわかるようになります。パラメーターの型を絞り込むだけでなく、await event.parent() の型や、server load 関数や universal load 関数から渡される data の型も絞り込むことができます。LayoutServerLoadEvent と区別するため、PageServerLoadEvent を使用していることにご注意ください。

data をロードしたあと、それを +page.svelte で表示したいと思います。同じ型生成メカニズムが、data の型が正しいことを保証します:

src/routes/blog/[slug]/+page

<script lang="ts">
	import type { PageData } from './$types';

	export let data: PageData;
</script>

<h1>{data.post.title}</h1>

<div>{@html data.post.content}</div>

Virtual files

開発サーバー(dev server)、またはビルド(build)を実行しているときに、型が自動で生成されます。ファイルシステムベースルーティングのおかげで、SvelteKit はルートツリー(route tree)をトラバースし、正しいパラメーターや親の data を推論することができます。各ルート(route)ごとに1つの $types.d.ts ファイルが出力されますが、大体以下のようになります:

$types.d

import type * as module "@sveltejs/kit"Kit from '@sveltejs/kit';

// types inferred from the routing tree
type type RouteParams = {
    slug: string;
}RouteParams = { slug: stringslug: string };
type type RouteId = "/blog/[slug]"RouteId = '/blog/[slug]';
type type PageParentData = {}PageParentData = {};

// PageServerLoad type extends the generic Load type and fills its generics with the info we have
export type type PageServerLoad = (event: Kit.ServerLoadEvent<RouteParams, PageParentData, string | null>) => MaybePromise<"/blog/[slug]">PageServerLoad = module "@sveltejs/kit"Kit.type ServerLoad<Params extends LayoutParams<"/"> = Record<string, string>, ParentData extends Record<string, any> = Record<string, any>, OutputData extends Record<string, any> | void = void | Record<string, any>, RouteId extends RouteId | null = string | null> = (event: Kit.ServerLoadEvent<Params, ParentData, RouteId>) => MaybePromise<OutputData>The generic form of PageServerLoad and LayoutServerLoad. You should import those from ./$types (see generated types)
rather than using ServerLoad directly.
ServerLoad<type RouteParams = {
    slug: string;
}RouteParams, type PageParentData = {}PageParentData, type RouteId = "/blog/[slug]"RouteId>;

// The input parameter type of the load function
export type type PageServerLoadEvent = Kit.ServerLoadEvent<RouteParams, PageParentData, string | null>PageServerLoadEvent = type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : neverObtain the parameters of a function type in a tuple
Parameters<type PageServerLoad = (event: Kit.ServerLoadEvent<RouteParams, PageParentData, string | null>) => MaybePromise<"/blog/[slug]">PageServerLoad>[0];

// The return type of the load function
export type type PageData = Kit.ReturnType<any>PageData = module "@sveltejs/kit"Kit.type Kit.ReturnType = /*unresolved*/ anyReturnType<
	typeof import('../src/routes/blog/[slug]/+page.server.js').load
>;

$types.d.ts を実際に src ディレクトリに書き込んでいるわけではありません — ちょっとごちゃごちゃしますし、ごちゃごちゃしたコードが好きな人はいません。代わりに、TypeScript の rootDirs という機能を使用し、‘virtual’ ディレクトリを実際のディレクトリにマップします。rootDirs に、プロジェクトの root (デフォルト) と、さらに .svelte-kit/types (全ての generated types の出力フォルダ) を設定し、その中でルート構造(route structure)をミラーリングすることで、この挙動を実現しています:

// on disk:
.svelte-kit/
├ types/
│ ├ src/
│ │ ├ routes/
│ │ │ ├ blog/
│ │ │ │ ├ [slug]/
│ │ │ │ │ └ $types.d.ts
src/
├ routes/
│ ├ blog/
│ │ ├ [slug]/
│ │ │ ├ +page.server.ts
│ │ │ └ +page.svelte

// what TypeScript sees:
src/
├ routes/
│ ├ blog/
│ │ ├ [slug]/
│ │ │ ├ $types.d.ts
│ │ │ ├ +page.server.ts
│ │ │ └ +page.svelte

Type safety without types

自動型生成のおかげで、高度な型安全性を実現しています。ただ、もし型を書くのをすべて省略できるようになったとしたら素晴らしいと思いませんか？今日現在、まさにそれができるようになりました:

src/routes/blog/[slug]/+page.server

import type { PageServerLoadEvent } from './$types';

export async function function load(event: any): Promise<{
    post: any;
}>load(event: anyevent: PageServerLoadEvent) {
	return {
		post: anypost: await database.getPost(event: anyevent.params.post)
	};
}

src/routes/blog/[slug]/+page

<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
	export let data;
</script>

これはとても便利ですが、それだけではありません。より 正しい のです: コードをコピーペーストするときに、例えば PageServerLoadEvent と LayoutServerLoadEvent と PageLoadEvent のような、似ているが少し違う型を混同してしまうことがよくあります。Svelte の主な考え方は、コードを宣言的に書くことで、機械が私たちのためにほとんどの作業を、それも正しく効率的にやってくれる、というものでした。これも同じです — +page ファイルのような強いフレームワークの規約を活用すれば、間違いをするのが難しくなり、正しいことをするほうが簡単になるのです。

これは SvelteKit ファイル (+page、+layout、+server、hooks、params など) からのすべての export と、+page/layout.svelte ファイルの data、form、snapshot プロパティで動作します。

VS Code でこの機能を使用するには、Svelte for VS Code extension の最新バージョンをインストールしてください。他の IDE では、Svelte language server と Svelte TypeScript plugin の最新バージョンを使用してください。エディタ以外では、コマンドラインツール svelte-check でも、バージョン 3.1.1 以降であればこれらのアノテーションを追加する方法が組み込まれています。

How does it work?

この機能を実現するには、(Svelte ファイルのインテリセンスを行ってくれる) language server と、(TypeScript に .ts/js ファイルの内部から Svelte ファイルを理解させる) TypeScript plugin の両方を変更する必要がありました。両方とも、正しい型を正しいポジションに自動挿入し、オリジナルの型付けされていないファイルではなく拡張された仮想ファイルを使用するよう TypeScript に指示します。生成されたファイルのポジションとオリジナルファイルのポジションを前後にマッピングして組み合わせることで、これを実現しています。svelte-check は language server の一部を再利用しているため、調整することなくこの機能が使えます。

この機能は Next.js チームからインスパイアされました。Next.js チームに感謝します。

What’s next

将来的には、SvelteKit のさらに多くの領域を型安全にすることを検討したいと思っています — 例えばリンクは、HTML の中や、プログラム的に goto を呼び出していますよね。

TypeScript は JavaScript の世界を席巻しています — 私たちはそれに夢中です！私たちは SvelteKit のファーストクラスの型安全性に深く取り組んでおり、TypeScript を使用するか JSDoc で型付けされた JavaScript を使用するかに関わらず、より大規模な Svelte コードベースにも美しくスケールすることができる、できる限り開発体験をスムーズにするツールを提供します。

What’s new in Svelte: 2023年3月

Dani Sandoval — Wed, 01 Mar 2023 00:00:00 GMT

1.0 ローンチ後、SvelteKit にエッセンシャルな機能が多く追加されたため、ホットな3月になっています。詳細は先週のブログ記事をチェックしてみてください。

Svelte Society は先月、$12,000 以上の賞金がかかっている SvelteHack を立ち上げました - 新旧すべての Svelte デベロッパーたちに、何か素晴らしいものを作ってもらえるよう呼びかけています。期限は4月17日！

そして、まだご存知でない方もいらっしゃるかもしれませんが、次回の Svelte Summit が開催する予定です！ SvelteSummit.com にアクセスして、ニュースレターに登録するとイベントの最新情報を受け取ることができます📬

それでは今月の最新情報を見ていきましょう…

What’s new in SvelteKit

$app/paths can now be used without an app - making things like component testing with Vitest, using Storybook, etc. easier (1.4.0, #8838)
Adapters can now be configured at the route level (1.5.0, Docs, #8740)
The new snapshot mechanism preserves ephemeral DOM state even after navigation and page reloads (1.5.0,Docs, #8710)
OPTIONS are now available within the server method (1.6.0, Docs, #8731)
Richer error messages have been added for invalid exports (1.7.0, #9055)
Streaming promises are now available for server load functions (1.8.0, Docs, #8901)
A new configuration option, preloadStrategy, helps tune preloading to avoid import ‘waterfalls’ on certain browsers (1.8.4, Docs, #9179)
The new paths.relative option can control interpretation of paths.assets and paths.base (1.9.0, Docs, #9220)

What’s new in Svelte and Language Tools

svelte.dev の REPL が、package.json の exports フィールドをサポートしました (#445)
新たな呼び出し階層(Call Hierarchy)機能により、どこの関数やクラスが呼び出されたのか確認し、コールスタックをたどることができるようになりました (extensions-107.1.0, #1889)
declarationMap のサポートが Svelte extension に追加されました。ライブラリに declaration map がある場合、.svelte ファイル上で “go to definition” を押すとソースコードに移動します (extensions-107.1.0, #1878)
TypeScript Inlay Hints のサポートが Svelte Extension で使えるようになりました。javascript.inlayHints.* や typescript.inlayHints.* で有効化してください (extensions-107.1.0, #1855)

*Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

Community Showcase

Apps & Sites built with Svelte

win32.run is a version of Windows XP in the browser - with a File System, programs, XP-style File Picker and Saver dialogs, 3rd-party programs, and more
Svelte Radial Menu is a radial menu experiment - based on Rauno’s radial menu
apod color search lets you search for astronomy picture of the day (APO) photos by color
SvHighlight is a code highlighter for SvelteKit and TailwindCSS with blur and focus blocks
Limey lets you create beautiful one-page websites in minutes
a/links is an extension for short, composable bookmarks
Sprint Cards is a design challenge generator
Plought is a tool to reduce noise in decision making
ArcOS-Frontend is a rewrite of the Arc operating system’s frontend in Svelte
Poxi is powering the user-made web with a drag-and-drop, drawable website editor that’s easy to collaborate in
demo-threlte-scroller-rocinante is a “scrolly telling” proof-of-concept that combines svelte-sequence with Threlte
Phonics + Stuff is a set of resources for learning & teaching phonics

Learning Resources

Featuring Svelte Contributors and Ambassadors

Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich (on the Svelte Blog)
View Transition Experiments with Svelte and Native Page Transitions in SvelteKit (updated for 2023) by Geoff Rich
Ron Au’s story and how to be whimsical! by Svelte Radio
SvelteKit 1.0 with Rich Harris by PodRocket
Svelte Society Africa has formally launched!
SvelteKit overview with Simon and Dominik by Frontend RheinMain

To Watch or Hear

Delightful Web Development with SvelteKit is a workshop from This Dot Labs - taking place on April 13th.
Have More Control Over Layouts With Group Layouts In SvelteKit and Learn SvelteKit Hooks Through 6 Examples by Joy of Code
Svelte Kit Creating Popup Modals with Tailwind CSS and SvelteKit: Creating Dynamic Tables with Tailwind CSS by Abdul Rehman 2050

To Read

Svelte Language Server Example by VolarJS
How I Made My App 2.4x Faster Switching to Svelte by Erik Verduin
Smooth Page Transitions with SvelteKit and How to Build a Static SvelteKit Site by Phil Kruft
Blazing fast PWAs with SEO power using SvelteKit and Ionic by Tommertom
Svelte Stores Tutorial: Share Data Between Multiple Components by Vincent Widerberg
A Business Case for SvelteKit by Chris Ellis
How to set up a new Svelte project with SvelteKit by Igor Nowosad
How to type Events, Slots, and Props in Svelte by Raqueebuddin Aziz
Use TypeScript with SvelteKit and Supabase by Ross Robino
Invoking Svelte components from your Ember apps by Rajasegar Chandran
Add a sitemap to your server-rendered SvelteKit website and State in URL: the SvelteKit approach by Justin Ahinon
Display crypto data real-time in a chart using Sveltekit, Chart.js & coincap.io by Hessel

Libraries, Tools & Components

UI Kits and Components

Pink is a framework agnostic design system from Appwrite
quick-pick is a simple search tool where you control the search catalog
Grail UI offers a set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience
svelte-image-comparison is a Svelte component to compare image or canvas elements
simple-font-select is a simple font select component that exposes all local fonts as CSS font families
svelte-datatables-net is a Svelte component that turns data into an interactive HTML table
svelte-flextable is a toolkit for creating server-side processing datatable components with Svelte
svelte-algolia-instantsearch is a community-developed wrapper around instantsearch.js for Svelte
svelte-deep-zoom is a Svelte component to render interactive Deep Zoom images (tiled image pyramids)
SVoast is a simple toast component for Svelte
svelte-otp is a simple lightweight OTP input component for svelte
trace-svelte is a line by line highlighter for Svelte
Svelte Auth UI is a set of authentication components for Svelte
KitDocs is a documentation integration for SvelteKit - a VitePress alternative for Svelte
svelte-signature-pad is a Svelte action to capture smoothed signatures as SVG paths using the excellent perfect-freehand library

Helpers, Stores and Actions

SvelteKit-Document is a tiny utility for SvelteKit that lets you change the <html>, <head>, and <body> tags from any page or layout - with full SSR support
SvelteKit Form Data is an automatic SvelteKit form data parser middleware
sveltekit-superforms supercharges your SvelteKit forms with a bunch of quality of life features. Purports to be a “powerhouse of a library”
Houdini - the “disappearing” GraphQL client for the SvelteKit - is now 1.0
sveltekit-modal-langchain is an example SvelteKit project using sveltekit-modal, showing how easy it is to write Python endpoints in SvelteKit
mdsvex-excerpt allows you to show only a portion of document in certain layouts
Svelte Action Balancer is a simple Svelte action that makes titles more readable
svelte-object helps create and maintain objects using components. Values are stores and can therefore be intuitively subscribed to and updated
svelte-relative-time is a tiny Svelte action and component to render relative times
svelte-disable-preload is a simple action to apply no-op event listeners to an element that prevent the document-level SvelteKit event handlers being invoked
SvelteKit Static Sitemap generates a sitemap.xml for your page during build
svelte-intersection-observer-action is a Svelte action for element position notifications using IntersectionObserver
svelte-sequence provides custom stores to compose tweened motion sequences over multiple steps
@svelte-put/inline-svg is a Svelte action for inlining dynamic SVGs (fetched from network)

Other cool tools

sveltekit-modal lets you write Python endpoints in SvelteKit using Modal
svelte-kit-bot-block is a server hook to handle spam requests with SvelteKit
Svelte Email lets you write and design email templates with Svelte and render them to HTML or plain text
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers
svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
React in Svelte is a library that enables you to use React components in Svelte
SvelteKit Redis Session Manager is a Redis integration in SvelteKit for Session Management

Thanks for reading! Don’t forget to try your hand at the Svelte Hackathon!

Feel free to let us know if we missed anything on Reddit or Discord

Streaming、snapshots、その他 SvelteKit 1.0 以降の新機能

Geoff Rich, Rich Harris — Tue, 21 Feb 2023 00:00:00 GMT

The Svelte team has been hard at work since the release of SvelteKit 1.0. Let’s talk about some of the major new features that have shipped since launch: streaming non-essential data, snapshots, and route-level config.

Stream non-essential data in load functions

SvelteKit uses load functions to retrieve data for a given route. When navigating between pages, it first fetches the data, and then renders the page with the result. This could be a problem if some of the data for the page takes longer to load than others, especially if the data isn’t essential – the user won’t see any part of the new page until all the data is ready.

これを回避する方法もありました。具体的には、コンポーネント自体で遅いデータを取得することができるので、まず load で取得したデータでレンダリングし、そのあとで遅いデータの取得を開始します。しかしこれは理想的ではありませんでした: クライアントがレンダリングするまでデータの取得を開始しないため、データはさらに遅延しますし、SvelteKit の load の規約を破ることにもなります。

今回、SvelteKit 1.8 において、新たなソリューションを提供します: server load 関数からネストした promise を返すと、SvelteKit はそれが解決する前にページのレンダリングを開始します。ネストした promise は完了し次第、その結果がページにストリーミングされます。

例えば、次の load 関数について考えてみましょう:

export const const load: PageServerLoadload: PageServerLoad = () => {
	return {
		post: anypost: fetchPost(),
		streamed: {
    comments: any;
}streamed: {
			comments: anycomments: fetchComments()
		}
	};
};

SvelteKit は自動的にこの fetchPost の呼び出しを await してからページのレンダリングを開始します。なぜならそれがトップレベルだからです。しかし、ネストした fetchComments の呼び出しが完了するのは待ちません – ページはレンダリングされ、data.streamed.comments はリクエストが完了すると解決する promise となります。+page.svelte で、Svelte の await block を使用してロード中の状態を表示することもできます:

<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
</script>

<article>
	{data.post}
</article>

{#await data.streamed.comments}
	Loading...
{:then value}
	<ol>
		{#each value as comment}
			<li>{comment}</li>
		{/each}
	</ol>
{/await}

この streamed プロパティに特別なものはありません – この動作をトリガーするのに必要なのは、戻り値のオブジェクトのトップレベル以外の場所にある promise だけです。

SvelteKit は、アプリのホスティングプラットフォームがストリーミングをサポートしている場合にのみ、レスポンスをストリーミングすることができます。一般的には、AWS Lambda を中心に構築されたプラットフォーム (例えば serverless functions) はストリーミングをサポートしていませんが、従来の Node.js サーバーや edge ベースのランタイムはサポートしています。プロバイダーのドキュメントで確認してみてください。

プラットフォームがストリーミングをサポートしていない場合でも、データは利用可能です。その場合レスポンスはバッファリングされ、すべてのデータが取得されるまでページのレンダリングは開始されません。

How does it work?

データを server load 関数からブラウザに送信するには、データを シリアライズ する必要があります。SvelteKit は devalue というライブラリを使用しています。これは JSON.stringify のようなものですが、より優れています — JSON では扱うことができない値 (例えば date や正規表現など) も扱うことができ、自身をその中に含むような (またはそのデータの中に何度も現れるような) オブジェクトもそのアイデンティティを破壊することなくシリアライズすることができ、そして XSS 脆弱性から保護することができます。

ページをサーバーでレンダリングする際、promise を、deferred(遅延) を作成する function call としてシリアライズするよう devalue に指示します。これは SvelteKit がページに追加するコードを簡略化したものです。

const const deferreds: Map<any, any>deferreds = new var Map: MapConstructor
new () => Map<any, any> (+3 overloads)Map();

module window
var window: Window & typeof globalThisMDN Reference
window.defer = (id) => {

	return new var Promise: PromiseConstructor
new <any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise<any>Creates a new Promise.
@paramexecutor A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.Promise((fulfil: (value: any) => voidfulfil, reject: (reason?: any) => voidreject) => {
		const deferreds: Map<any, any>deferreds.Map<any, any>.set(key: any, value: any): Map<any, any>Adds a new element with a specified key and value to the Map. If an element with the same key already exists, the element will be updated.
set(id: anyid, { fulfil: (value: any) => voidfulfil, reject: (reason?: any) => voidreject });
	});
};

module window
var window: Window & typeof globalThisMDN Reference
window.resolve = (id, data, error) => {



	const const deferred: anydeferred = const deferreds: Map<any, any>deferreds.Map<any, any>.get(key: any): anyReturns a specified element from the Map object. If the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the Map.
@returnsReturns the element associated with the specified key. If no element is associated with the specified key, undefined is returned.get(id: anyid);
	const deferreds: Map<any, any>deferreds.Map<any, any>.delete(key: any): boolean@returnstrue if an element in the Map existed and has been removed, or false if the element does not exist.delete(id: anyid);

	if (error: anyerror) {
		const deferred: anydeferred.reject(error: anyerror);
	} else {
		const deferred: anydeferred.fulfil(data: anydata);
	}
};

// devalue converts your data into a JavaScript expression
const const data: {
    post: {
        title: string;
        content: string;
    };
    streamed: {
        comments: any;
    };
}data = {
	post: {
    title: string;
    content: string;
}post: {
		title: stringtitle: 'My cool blog post',
		content: stringcontent: '...'
	},
	streamed: {
    comments: any;
}streamed: {
		comments: anycomments: module window
var window: Window & typeof globalThisMDN Reference
window.defer(1)
	}
};

このコードは、サーバーレンダリングされた一部の HTML と一緒にブラウザにすぐに送信されますが、コネクションは開いたままになっています。その後、promise が解決すると、SvelteKit は追加の HTML チャンクをブラウザにプッシュします:

<script>
	window.resolve(1, {
		data: [{ comment: 'First!' }]
	});
</script>

クライアントサイドナビゲーションの場合は、少し異なるメカニズムを使用します。サーバーからのデータは newline delimited JSON としてシリアライズされ、SvelteKit は devalue.parse で似たような遅延メカニズムを使用してその値を再構築します:

// this is generated immediately — note the ["Promise",1]...
[{"post":1,"streamed":4},{"title":2,"content":3},"My cool blog post","...",{"comments":5},["Promise",6],1]

// ...then this chunk is sent to the browser once the promise resolves
[{"id":1,"data":2},1,[3],{"comment":4},"First!"]

このように promise はネイティブにサポートされているため、load から返されるデータのどこにでも置くことができます (トップレベルは除く。トップレベルは自動的に await するからです)。そして devalue がサポートするあらゆるタイプのデータを解決することができます — もちろんさらに多くの promise も！

注意事項: この機能には JavaScript が必要です。そのため、重要でないデータのみ、ストリーミングすることを推奨します。すべてのユーザーがエクスペリエンスのコアを利用できるようにするためです。

この機能の詳細については、ドキュメントをご覧ください。デモは sveltekit-on-the-edge.vercel.app (ロケーションデータをわざと遅延させ、ストリーミングしています) でご覧頂けますし、ご自身で Vercel にデプロイすることもできます。Vercel では Edge Functions と Serverless Functions のどちらもストリーミングをサポートしています。

私たちは、Qwik、Remix、Solid、Marko、React などの、このアイデアの先行実装からインスピレーションを受けました。深く感謝します。

Snapshots

以前までの SvelteKit アプリでは、フォームに入力を開始したあとで移動して、そのあと戻ってくるとフォームの state は復元されず、デフォルトの値でフォームが再作成されていました。場合によっては、ユーザーはフラストレーションが溜まるかもしれません。SvelteKit 1.5 以降は、これに対応するための方法が組み込まれています: それが snapshots です。

現在、+page.svelte や +layout.svelte で snapshot オブジェクトをエクスポートすることができます。このオブジェクトには、capture と restore という2つのメソッドがあります。capture 関数は、ユーザーがページを離れたときにどの state を保存するかを定義します。SvelteKit はその state を現在の履歴エントリに関連付けます。ユーザがページに戻った場合は、以前に設定した state を引数に取って restore 関数が呼び出されます。

こちらは textarea の値を capture し、restore する方法の例です:

<script lang="ts">
	import type { Snapshot } from './$types';

	let comment = '';

	export const snapshot: Snapshot = {
		capture: () => comment,
		restore: (value) => (comment = value)
	};
</script>

<form method="POST">
	<label for="comment">Comment</label>
	<textarea id="comment" bind:value={comment} />
	<button>Post comment</button>
</form>

フォームの input の値やスクロールポジションなどは一般的な例で、JSON-serializable なデータならなんでも snapshot に保存することができます。snapshot のデータは sessionStorage に保存されるので、ページがリロードされたときや、ユーザーがまったく別のサイトに移動したときにも保持されます。sessionStorage に保存されるため、サーバーサイドレンダリング中にアクセスすることはできません。

詳細は、ドキュメントをご覧ください。

Route-level deployment configuration

SvelteKit はプラットフォームごとに固有の adapter を使用してプロダクションへのデプロイ用にアプリのコードを変換しています。これまでは、デプロイメントの設定をアプリ全体レベルで行わなければなりませんでした。例えば、アプリを edge function としてデプロイするか、serverless function としてデプロイするか、どちらか一方は可能でしたが、両方同時に行うことはできませんでした。これでは、アプリの一部だけを edge にするというメリットを得ることができません – もし Node API を必要とするルート(route)がある場合、アプリ全体を edge にデプロイすることができないのです。リージョンの選択やメモリ割り当てなど、デプロイ設定の他の側面についても同様です: アプリ全体、すべてのルート(route)に適用される1つの値を選択しなければならなかったのです。

そしてこの度、config オブジェクトを +server.js、+page(.server).js、+layout(.server).js ファイルでエクスポートすることができるようになり、これらのルート(route)をどうやってデプロイするかコントロールできるようになりました。+layout.js でこれを行うと、そのすべての子ページに設定が適用されます。config の型は、デプロイ先の環境に依存するため、各 adapter ごとにユニークです。

import type { import ConfigConfig } from 'some-adapter';

export const const config: Configconfig: import ConfigConfig = {
	runtime: stringruntime: 'edge'
};

Config はトップレベルでマージされるため、レイアウトで設定された値をツリーのさらに下のページで上書きすることができます。詳細はドキュメントをご覧ください。

Vercel にデプロイする場合、最新バージョンの SvelteKit と adapter をインストールすることでこの機能のメリットを享受することができます。ルートレベル(route-level)の config をサポートする adapter は SvelteKit 1.5 以降が必要であるため、adapter のバージョンを大幅にアップグレードする必要があるかもしれません。

npm i @sveltejs/kit@latest
npm i @sveltejs/adapter-auto@latest # or @sveltejs/adapter-vercel@latest

今現在は、Vercel adapter のみがルート固有(route-specific)の config を実装していますが、他のプラットフォーム向けでもこれを実装するためのビルディングブロックがあります。もしあなたが adapter の作者なら、この PR の変更点を参照し、要求事項を確認してください。

Incremental static regeneration on Vercel

ルートレベル(Route-level)の config では、もう1つ要望の多かった機能も使えるようになりました – Vercel にデプロイされる SvelteKit アプリで、incremental static regeneration (ISR) が使用できるようになりました。ISR は、プリレンダリングされたコンテンツにおけるコストとパフォーマンスの優位性と、動的なレンダリングコンテンツの柔軟性の両方を提供します。

ISR をルート(route)に追加するには、config オブジェクトに isr プロパティを追加します:

export const const config: {
    isr: {};
}config = {
	isr: {}isr: {
		// 必須のオプションについては Vercel adapter のドキュメントをご覧ください
	}
};

And much more...

OPTIONS method が +server.js ファイルでサポートされました。
別のファイルに属するものをエクスポートしたときや、+layout.svelte にslot を置くのを忘れたときのエラーメッセージが改善されました。
app.html でパブリックな環境変数にアクセスできるようになりました
レスポンスを作成する新たな text ヘルパーが追加されました
そしてたくさんのバグフィックス – リリースノートの全文についてはchangelogをご覧ください。

SvelteKit にコントリビュートしてくれた皆様、SvelteKit をプロジェクトで使ってくださっている皆様、ありがとうございます。以前にもお伝えしましたが、Svelte はコミュニティプロジェクトであり、皆様のフィードバックやコントリビューションがなくては成り立たないものです。

What’s new in Svelte: 2023年2月

Dani Sandoval — Wed, 01 Feb 2023 00:00:00 GMT

先月から、Svelte と SvelteKit のマイナーバージョンのリリースがあり、たくさんの教育コンテンツが 1.0 リリースをサポートし、そして State of JS survey の結果は…

Svelte は今回も、満足度、興味、ともに上昇しました。投票してくださった皆さんに感謝します！

それではアップデートを見てみましょう…

What’s new in SvelteKit

Work in the Svelte ecosystem this month has been focused on SvelteKit bug fixes and addressing feedback from the 1.0 launch. One of the more awaited bug fixes to SvelteKit’s base path support landed, which means that you can now create SvelteKit projects on remote development environments. There have been several new releases with these fixes as well as a handful of new features such as:

The submitter’s value will now be included automatically when progressively enhancing
(1.0.3, #8273)
Added an error in dev mode if global fetch is used with relative URL (1.0.8, #8370)
A warning will now indicated that hydration may break if comments are removed from HTML (1.0.11, #8423)
A warning will occur when of page options are used in .svelte files or a missing <slot /> in layout is detected (1.1.0, #8475)
The new text(...) helper makes it easy to generate text responses (1.2.0, #8371)
The public env can now be accessed within app.html (1.2.0, Docs, #8449)
An error will now be thrown if cookie exceeds size limit (1.2.1, #8591)
The generated tsconfig can now be modified (1.3.0, #8606)

What’s new in Svelte and Language Tools

VS Code HTML language service の html.customData に対するサポートが追加されました (extensions-107.0.0, #1824)
インポートが必要な store のオートコンプリート (#1823) と object/class メンバーのスニペット (#1817) が Svelte extension に追加されました (extensions-107.0.0)
関数の型の promise の検知が改善されました (Svelte 3.55.1, #8162)
グローバルな part 属性と on:submit に、それぞれ不足している型とプロパティが追加されました (Svelte 3.55.1, #8181)
多くのパフォーマンス改善とバグフィックス (Svelte 3.55.1* and extensions-107.0.x)

*Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、 CHANGELOG をご確認ください。

Community Showcase

Apps & Sites built with Svelte

Titowest.com is a series of photographic films by the writer & photographer, Tito West
Verve is a lightweight and blazingly fast launcher for accessing and opening applications, files and documents
Round The World is an interactive guide to the travels of Andrew Carnegie
Linear Regression is an interactive blog post visual introduction to (almost) everything you should know about linear regression
Flotes is a free note taking app enhanced with flashcard features
nomie is a Daily Journal for short attention spans
nocode.gallery is a collection of stunning websites made with no code
Whom to Follow helps you find accounts you’ll love by searching the network of accounts you already follow
poker-simulator is a poker simulation and evaluation tool
Pixelicious converts your images into pixel art
Apple Music is now built with Svelte (proof)

Learning Resources

Featuring Svelte Contributors and Ambassadors

SvelteKit | Rich Harris | ViteConf 2022
Talking Gradio and AI with pngwn 🐧 from Svelte Radio
Progressively enhancing the Marvel By Year filter and Advent of SvelteKit 2022: my favorite demos by Geoff Rich
EP 13: Contributing more to open source + a Svelte Newsletter showcase rewind ⏪ by Dani Sandoval

To Watch or Hear

I built a $5 chat app with Pocketbase & Svelte. Will it scale? by Fireship
The Comprehensive Introduction To SvelteKit, What Svelte UI Library Should You Use? and Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes) by Joy of Code
Progressive Enhancement in SvelteKit (use:enhance), Are Your Routes Actually Protected? and 10X Your SvelteKit Developer Experience in VSCode by Huntabyte
The easiest realtime app I’ve ever built by Beyond Fireship
Angular developers can learn Svelte so fast... by Joshua Morony
SvelteKit + PocketBase Integration: User Login and Registration by Jian Yuan Lee
Marvels Of Using Svelte and SvelteKit - JSJ 566 with Tracey Lee and Adam L Barrett

To Read

A practical first look at the Svelte framework by Daniel Beer
State Modeling in Svelte with XState is the port of the Frontend Masters React + XState workshop written in Svelte and built with SvelteKit!
🚀 Code your SvelteKit website faster with Stylify CSS by Stylify CSS
🎮 Five Svelte Games To Learn How To Code by Tom Smykowski
How to make declarative (code-based) router instead of file-based router in SvelteKit by Dev Punk
How to import tailwindcss custom config in JS/TS parts of a SvelteKit app by 0gust1
SvelteKit Internals: Load function and Svelte and CSS by Justin Ahinon
Internationalization Formatting with Intl + SSR + SvelteKit by Captain Codeman
Typesafe i18n with SvelteKit by Andreas Söderlund
Authorization in your SvelteKit app by Adam Barrett
Validate your form using Sveltekit, Tailwindcss, Felte and Yup by Hessel
SvelteKit Form Actions bound to TypeScript class + Validation (yup) w/dynamic array by Hekili Tech
Smooth Page Transitions with SvelteKit by Phil Kruft
Redis Integration in SvelteKit: A Game-Changer for Session Management by Shivam Meena
SvelteKit and GitHub Pages by Andrew Lester
Tailwind + Sveltekit in 2023 by Mitch Gent
Svelte Stores Tutorial: Share Data Between Multiple Components by Vincent Widerberg

Libraries, Tools & Components

Sveltepress is a simple, easy to use, content centered site build tool with the full power of SvelteKit
Svelte Form Helper is a lightweight helper for form validation with Svelte
Dapper UI is a sleek and modern UI component library for Svelte, offering full TypeScript support and extensive documentation
TeilUI is a better way to build design systems with Svelte
Neodrag is an SSR-friendly, multi-framework draggable library
Svelvet, a UI library for Svelte, is now 5.0 (read more here)
Svelte Inview is a Svelte action that monitors an element enters or leaves the viewport/parent element
html2svelte makes it easy to convert HTML to Svelte components in a snap

お読みいただきありがとうございます！見落としなどございましたら Reddit や Discord にてお気軽にお知らせください。

What’s new in Svelte: 2023年1月

Dani Sandoval — Sun, 01 Jan 2023 00:00:00 GMT

SvelteKit 1.0 のリリースからちょうど2週間が経ちました！もしまだなら、livestream、新しい web サイトをチェックし、SvelteKit の全機能を段階的に学ぶなら tutorial をチェックしてみてください。

それでは詳細を見ていきましょう…

What’s new in SvelteKit

@sveltejs/kit 1.0 is out! All future releases will follow semver and changes will be listed as major/minor/patch in the CHANGELOG.
Improved support for Storybook and Histoire (#7990). Work is ongoing to fully support those tools (storybook#20239).
vitePreprocess is now the default preprocessor. Please see the docs for differences between vitePreprocess and svelte-preprocess (#8036).

Breaking changes:

Unknown exports (except when starting with an underscore) are no longer allowed from +(layout|page)(.server)?.js and +server.js files (#7878)
__data.json is now stripped from URL (#7979)
sveltekit() will now return a promise for an array of Vite plugins (#7994)
A new embedded option, turned off by default, helps with link clicks when embedding SvelteKit (docs, #7969)
Automatic fallback generation has been replaced with builder.generateFallback(fallback) (#8013)
invalid() is now fail() and ValidationError is now ActionFailure (#8012)
SvelteKit will now throw an error on invalid load response (#8003)
SvelteKit is now using Vite 4 and requires a Svelte peerDependency of ^3.54.0 (#7543)
Shells are now prerendered when ssr is false and prerender is not false - ensure prerender is false when ssr is also false (#8131)
Warnings and errors about removed/changed APIs have been removed (#8019)

What’s new in Svelte

options.direction 引数を、カスタムのトランジション関数に渡せるようになりました (3.54.0, #3918)
@const で宣言した関数から、変数を更新できるようになりました (3.54.0, #7843)
svelte/elements に、Svelte/HTML の型定義が追加されました (3.55.0, #7649)

What’s new in Language Tools

Svelte extension と language tools が要求するミニマムバージョンが新しくなりました:

Node のバージョンは 16 になりました
TypeScript のバージョンは 4.9 になりました
Svelte のバージョンは 3.55 になりました

以下の機能がリリースされました:

missing handler quick fix (#1731)
add Svelte anchor missing attribute code action (#1730)
better commit characters handling (#1742)
add --preserveWatchOutput option (#1715)
enhance Quickfixes to include Svelte Stores (#1789)
only show SvelteKit files context menu in SvelteKit projects (#1771)
use the satisfies operator if possible (#1770)

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

Community Showcase

Apps & Sites built with Svelte

Svelte Recipes 🧑‍🍳 provides code snippets for common data visualization problems
Everything Svelte is a new course teaching everything you need to know to build a modern web application
CSS Timeline is a Timeline of the history and evolution of CSS
GitBar is a system tray app for showing your pull requested reviews
Texture Lab generates instant textures for games from any text
Totems is a studio creating custom-made stands and supports
PeopletoNotion is a Chrome Extension that adds LinkedIn profiles to Notion in one click
DeckDev is a deck builder for Magic: The Gathering
Default Shortcuts is a tool for searching keyboard shortcuts across browsers.

Learning Resources

From Svelte Society

Svelte Society - London December 2022 featuring two talks by Antony and Rich, respectively. Rich’s talk, “Mistakes were made” is a SvelteKit 1.0 retrospective.
SvelteKit with Netlify Edge Functions by Brittney Postma
Sirens Stream: Skeleton - A fully featured UI Toolkit with Chris Simmons and Brittney Postma
Sirens: SvelteKit for Enterprise - Lacey Pevey joins the Sirens to talk through using SvelteKit at the Enterprise level
Sirens: Form Actions - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev

To Watch

SvelteKit is my mistress by Fireship
Sveltekit 1.0 in under 3 minutes by Gui Bibeau
What Svelte UI Library Should You Use? and The Best Icon Library For Svelte (Iconify) by Joy of Code

To Read

Rendering emails with Svelte by Gautier Ben Aïm
Now That React is Dead, What’s the Next Big Thing? by Somnath Singh
What is SvelteKit? And Why Should You Care? by Tila
Sveltekit API endpoints by Jef Meijvis
Chart.js 4.0 has been released, with updated Svelte support
Creating A Custom Svelte Media Query Store by Rik Schennink

Libraries, Tools & Components

Konsta UI is a library of pixel perfect mobile UI components built with Tailwind CSS for React, Vue & Svelte
probablykasper/modal-svelte is a modal component for Svelte
deepcrayon/scrolltron is a news ticker overlay for OBS Studio
JetBrains WebStorm 2022.3 now has built-in support for Svelte
NextAuth.js is now available for SvelteKit
SvelteKit CAS authentication is a set of functions to ease usage of a CAS/SSO in SvelteKit
@macfja/sveltekit-session is an easy way to do session management for SvelteKit
@svelte-plugins/tooltips is a basic tooltip component written in Svelte
tRPC-SvelteKit provides end-to-end typesafe APIs for your SvelteKit applications
SvelteKit Tailwind Blog Starter is an easily configurable and customizable blog starter for SvelteKit + Tailwind CSS
Free Svelte Accelerators is a list of Svelte and Sveltekit open source code to jump start your project

ハッピーニューイヤー 🎆 見落としなどございましたら Reddit や Discord にてお知らせください。

SvelteKit 1.0 発表

The Svelte team — Wed, 14 Dec 2022 00:00:00 GMT

2年間の開発を経て、SvelteKit はついに 1.0 に到達しました。今日現在において、SvelteKit はあらゆる形・サイズの Svelte アプリを構築する場合に推奨されます。

このリリースを皆さんに共有できることがとても嬉しいです。Svelte コアチームと広いコミュニティによる何千時間もの作業の集大成であり、小さなプロジェクトに取り組む単独の開発者であれ、大きなチームの一員であれ、本番レベル(production-grade)の Web を構築するのに最も楽しい方法だと思います。

To get started, run npm create svelte@latest, and visit the docs and (experimental!) interactive tutorial.

Svelte Radio Live: the Christmas special

What is SvelteKit?

SvelteKit は web アプリケーションを開発するためのフレームワークで、そのパフォーマンスと使いやすさから開発者から最も愛されている UI コンポーネントフレームワークである Svelte 上に構築されています。 Svelte のようなコンポーネントフレームワークを使ったことがあれば、DOM を直接操作するより、こういったフレームワークを使用したほうがユーザーインターフェースの構築がずっと簡単になることをご存知でしょう。しかし、多くの疑問が残っています:

ソースコードの構造はどうすればいいですか?
サーバーサイドレンダリングを追加するには?
サーバーでもブラウザでも動作するルーティングを追加するには?
クライアントサイドルーティングをアクセシブルにするには?
データを取得(fetch)はどうすればいいですか?
データを変更(mutate)するには?
エラーを処理するには?
プロダクション向けにビルドを最適化するには?
環境変数を賢くセキュアに扱うには?
CSP ヘッダーと CSRF 保護を追加するには?
service worker を追加するには? 何をどうキャッシュさせられる?
アプリケーションをデプロイするにはどんな準備を?

アプリケーションフレームワークは、これらの質問に応えられるよう設計されています。SvelteKit は、大勢のベータテスター (その多くは SvelteKit をプロダクションで運用しています — その勇気に敬意を表するとともに、貴重なフィードバックに感謝しています) の現実世界のニーズと、Next.js や Remix を含む他のアプリケーションフレームワークから得たベストなアイデアを反映した設計になっています。

How is it different?

Web 開発者にとって、魅力的な選択肢が多いという現在の状況は贅沢な悩みでしょう。前述のフレームワーク以外にも、Astro や、Rails・Laravel といったプロダクションでの実績があるフレームワーク、そして数多くの静的サイトジェネレーターがあります。全て素晴らしいツールなので、選ぶのが楽しいはずです。

ただ、SvelteKit は一味違います:

従来の ‘マルチページアプリ’、MPA フレームワークと違い、 最初にサーバーレンダリングされたページをロードしたあとは、デフォルトでクライアントサイドナビゲーションになります。これにより、高速なページ遷移、ページ間での状態の永続化(例えばサイドバーのスクロールポジション)、より少ないデータ使用量などが可能となります。また、サードパーティースクリプト(例えば analytics)が各ページのロードのたびに再実行されることを防ぎます。

従来のサーバーフレームワークと違い、 単一の言語を使用することができます。密結合した2つのアプリ (1つは HTML の生成、1つはクライアントサイドインタラクションの処理) を持つことはありません。SvelteKit は JavaScript が動作する場所ならどこでも実行できるので、従来の Node サーバーとして、あるいはエッジを含むサーバーレス関数を使ってアプリをデプロイすることができます。

静的サイトジェネレーターと違い、 パーソナライズされたデータまたは動的なデータを使用するアプリを構築することができます。しかも、パフォーマンスを犠牲にすることもありませんし、ページロード後にブラウザからデータを取得することによって発生するレイアウトシフトもありません。

SvelteKit によって、柔軟性を得られます。多くのフレームワークでは、アプリを構築する正しい方法は1つであると仮定していますが、現実はもっと微妙です。例えば、静的ページのプリレンダリングは単なるお手軽な cache-control ではありません — ビルド時のバリデーションや、エッジ関数がアクセスできないファイルシステムからのデータのレンダリングを可能にし、不安定なデータベースに対するヘッジとして機能します。全てのページにサーバーサイドレンダリングが必要だ、というのも正しくありません — 堅牢でハイパフォーマンスアプリと、優れた SEO を実現したいのであれば、それは正しいデフォルトですが、数え切れないほどの例外があります。

SvelteKit アプリでは、これらの選択を必要なだけきめ細やかに行うことができます — 例えば、あなたが今見ているこのページはプリレンダリングされたものですが、REPL では動的なデータがレンダリングされています。この2つの挙動は、1行のコードで切り替えることができます。このようなアプローチで構築されたアプリを、私たちは ‘transitional apps’ と呼んでいます。

What can I use with SvelteKit?

SvelteKit は高速なビルドツールである Vite を使用しているので、ホットモジュールリロード(hot module reloading)、TypeScript、その他開発者が必要とするものをすぐに利用することができます。Vite と Rollup の広大なエコシステムからプラグインをインストールすることで、他のツールのサポートを追加することができます。

SvelteKit プロジェクトを作成するとき、TypeScript、ESLint、Prettier、Playwright (for end-to-end browser tests)、Vitest (for unit tests) を追加するか選択できます。例えば、Tailwind や Supabase など、多くのポピュラーなプロジェクトにはすでにインテグレーションガイドがあります。コンポーネントストーリー(component stories) には Storybook や Histoire を使用することができます。コミュニティがメンテナンスしている svelte-add を使用すれば、コマンド1つでどんどん増えているインテグレーションの数々を追加することができます。

もちろん、npm が提供するものすべてにアクセスできます。(一部のパッケージは Node.js が必要なため、それを使う場合はデプロイ先が Node ベースのプラットフォームに限定されることにご注意ください。)

Where can I deploy my apps?

どこでも! SvelteKit CLI にはローカルにインストールされた Node.js が必要ですが、フレームワーク自体にはどんなプラットフォームにも依存しません。つまり、JavaScript が動作する場所であれば、どこにでもデプロイすることができます。

This is made possible by adapters. The default adapter, adapter-auto, provides zero-config support for Vercel, Netlify, Cloudflare Pages and Azure Static Web Apps, with more platforms coming in the future. Community-provided adapters add support for Deno, Bun, Firebase, App Engine, AWS Lambda and many others.

adapter-node を使えばアプリを Node.js サーバーとしてデプロイすることもできます。

アプリ全体がプリレンダリングに適している場合や、シングルページアプリ (SPA) である場合、adapter-static (これによって SvelteKit は静的サイトジェネレーターになります) を GitHub Pages を含むあらゆる Web サーバー向けに使用することができます。

Acknowledgements

このリリースは、とても多くの人々のハードワークによって実現されました。何よりもまず最初に、洞察に満ちたフィードバックや大小様々な幾千ものコントリビュートをしてくれた Svelte コミュニティに感謝したいと思います。彼らのおかげで、私たちは誇りを持って、このプロジェクトを web 開発者の広いコミュニティに共有できるものにすることができました。

また、Svelte Society とコミュニティのアンバサダーにも感謝しています。Svelte Summit や Svelte Sirens でイニシアチブを取り、オンラインでもオフラインでも、Svelte 開発者のために活気に満ちた友好的なスペースを作り上げてくれました。

コンテンツクリエーターがとても多いので、漏れのないように名前を挙げることはできませんが、SvelteKit 周辺の講座をリリースしたり、教育コンテンツを制作してくださった皆様、ありがとうございました。

2021年の初頭、Vite を採用したとき、私たちは Vite を採用した初めてのメジャーなアプリケーションフレームワークでした。当時はリスキーな賭けでしたが、その賭けが報われたことに今は感動しています。Vite は JavaScript の世界で向かうところ敵なしの勢力に成長し、そして Vite チームは本当に素晴らしい、親切なパートナーです。

Vercel、Netlify、Cloudflare それぞれのチームから素晴らしいサポートを受け、これらのプラットフォームへのデプロイメントをゼロコンフィグにすることができました。

StackBlitz の友人たちは、私たちにとって初となる WebContainer を使用したインタラクティブなチュートリアルである learn.svelte.dev (日本語版: learn.svelte.jp) を実現するために熱心に取り組んでくれました。

最後に、このプロジェクトは資金支援者の方々がいなければ実現できなかったことをお伝えします。そこには、Open Collective の数百名の支援者の方々、二人のコア開発者 (Rich と Simon) を雇用し、フルタイムで Svelte に取り組ませてくれた Vercel、その他様々な方法 (例えば Steph の Beginner SvelteKit コースなど) でプロジェクトを支援してくれた方々も含まれます。

Migrating

SvelteKit のプレリリースバージョンで構築したアプリをお持ちの場合、1.0 にアップグレードする前に、プレリリースの最終バージョン — @sveltejs/kit@1.0.0-next.588 — にアップグレードすることをおすすめします。安定(stable)バージョンではプレリリースバージョン間の移行に使われていたエラーや警告が削除されているからです。特に、1.0.0-next-406 より古いバージョンを使用している場合は、このマイグレーションガイドを参照することをおすすめします。

What’s next?

SvelteKit 1.0 は始まりであり、終わりではありません。今日はプロダクションで使用する準備は整っていますが、まだ始まったばかりです。ロードマップには、ビルトインの i18n サポート、incremental static regeneration、デプロイメントリージョンとランタイムのきめ細やかなコントロール、イメージ最適化(image optimisation)、その他多くの改善があります。また、来年には Svelte 4 の取り組みを始める予定です — 詳細はまた今度。

But don’t let us have the final word. Svelte is a community project, and many of our best ideas aren’t really ours at all — they’re yours. Subscribe to Svelte Society on BlueSky and YouTube to stay up to date, and join us in our Discord server and on GitHub to contribute back.

あなたが作ったものを見るのが待ちきれません。

What’s new in Svelte: 2022年12月

Dani Sandoval — Thu, 01 Dec 2022 00:00:00 GMT

SvelteKit 1.0 はもう間近です！マイルストーンにあるイシューの99%が完了したので、先月のたくさんの変更点をカバーしなければなりません…

それでは参りましょう！

What’s new in SvelteKit

Use the willUnload property to find out if the navigation will result the app being unloaded (full page reload/closing/leaving to another page). (#6813)
__data.json requests now allows for caching while ensuring we cache matching responses for all invalidation scenarios (#7532)
Linking to <a name="hash"> tags is now supported (#7596)
Throwing redirects in the handle hook is now supported (#7612)
A fallback component will now be added automatically for layouts without one (#7619)
The new preload function within the resolve hook determines what files should be added to the tag to preload it (Docs, #4963, #7704)
version is now available via $app/environment (#7689, #7694)
handleError can now return a promise (#7780)

Breaking changes:

routeId が route.id になりました (#7450)
beforeNavigate メソッドと afterNavigate メソッドの ‘load’ は ‘enter’ に、’unload’ は ‘leave’ にリネームされました。外部へのナビゲーションの際に、beforeNavigate は type ‘leave’ を引数にとって一回だけ呼び出され、リダイレクトの際には実行されなくなりました (#7502, #7529, #7588)
redirect ヘルパーは、リダイレクト時はステータスコードの 300-308 のみを許可し、error ステータスコードの場合は 400-599 のみを許可するようになりました (#7767) (#7615, #7767)
ルート(route)ディレクトリ名の特殊文字は、hex/unicode のエスケープシーケンスでエンコードされるようになりました (#7644)
action data の(デ)シリアライズに devalue が使用されるようになりました - これは、use:enhance を使わずに直接 action を fetch する方にとっては breaking change です (#7494)
trailingSlash が configuration ではなく page option になりました (#7719)
クライアントサイドのルーターは、%sveltekit.body% の外にあるリンクを無視するようになりました (#7766)
prerendering は building にリネームされ、config.kit.prerender.enabled は削除されました (#7762)
getStaticDirectory() は builder API から削除されました (#7809)
format オプションが generateManifest(...) から削除されました (#7820)
data-sveltekit-prefetch は -preload-code と -preload-data に置き換えられ、prefetch は preloadData になり、prefetchRoutes は preloadCode になりました (#7776, #7776)
SubmitFunction は $app/forms から @sveltejs/kit に移動しました (#7003)

New in Svelte

css コンパイラオプションの css: false と css: true は、'external' | 'injected' | 'none' 設定に置き換えられ、ssr ビルド向けのコンパイルが高速化し、わかりやすさが改善されました (3.53.0)

Svelte compiler に対する全ての変更については、まだ未リリースの変更も含め、CHANGELOG をご確認ください。

Community Showcase

Apps & Sites built with Svelte

Appwrite’s new console makes its secure backend server for web, mobile & Flutter developers available in the browser
RepoMagic is a search and analytics tool for GitHub
Podman Desktop is a graphical tool for developing on containers and Kubernetes
Ballerine is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations
Budget Pen is a Codepen-like browser code editor with Tailwind included
doTogether helps you keep track of stuff you have get done via a List of recurring Tasks
Webscraped College Results is a collection of visualizations for data from r/collegeresults
Let’s premortem helps avoid lengthy, frustrating post-mortems after a project fails
BLKMARKET.COM is an illustration library for commercial and personal use
Sigil is a canvas for anything with spaces organized by the most-voted content
corpus-activity-streams is an unofficial ActivityStreams 2.0 vocabulary data set and alternative docs
nodeMyAdmin is an alternative to phpMyAdmin written with SvelteKit
Image to Pattern Conversion is a cross-stitch pattern conversion tool with a list of pre-made patterns to start with
Verbums is an English vocabulary trainer to improve language comprehension
SVGPS removes the burden of working with a cluster of SVG files by converting your icons into a single JSON file
This 3D retro-themed asteroid shooter was made with threlte

Learning Resources

To Hear

Catching up after Svelte Summit and 3D, WebGL and AI by Svelte Radio

To Watch

Domenik Reitzner - The easy way, an introduction to Sveltekit from Svelte Society Vienna
Sirens: Form Actions - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev
Introduction To 3D With Svelte (Threlte), How To Use Global Styles In SvelteKit and Progressive Form Enhancement With SvelteKit by Joy of Code

To Read

Building tic-tac-toe with Svelte by Geoff Rich
Speed up SvelteKit Pages With a Redis Cache by Captain Codeman
Understanding environment variables in SvelteKit, Form validation with SvelteKit and Zod and Build a SvelteKit application with Docker by Justin Ahinon
Why I failed to create the “Solid.js’s store” for Svelte, and announcing svelte-store-tree v0.3.1 by YAMAMOTO Yuji
Create an offline-first and installable PWA with SvelteKit and workbox-precaching by Antonio Sarcevic

Libraries, Tools & Components

Skeleton is a UI toolkit to build fast and reactive web interfaces using Svelte + Tailwind CSS
svelte-svg-spinners is a collection of SVG Spinners components
Svelte Floating UI enables floating UIs with actions - no wrapper components or component bindings required
at-html lets you use {@html } tags with slots in Svelte apps
html-svelte-parser is a HTML to Svelte parser that works on both the server (Node.js) and the client (browser)
svelte-switcher is a fully customisable, touch-friendly, accessible and tiny toggle component
sveltkit-hook-html-minifier is a hook that wrapps html-minifier
sveltekit-hook-redirect is a hook that makes redirects easy
sveltekit-video-meet is a video calling web app built with SvelteKit and SocketIO
svelte-colourpicker is a lightweight opinionated colour picker component for Svelte
Svelte-HeadlessUI is an unofficial implementation of Tailwind HeadlessUI for Svelte
svelte-lazyimage-cache is a Lazy Image component with IntersectionObserver and cache action
threlte v5.0 is a completely new developer experience that is faster, more powerful, and incredibly flexible

今月はこれでおしまいです！見落としなどございましたら Reddit や Discord にてお知らせください。

それではまた来年 🎆

What’s new in Svelte: 2022年11月

Dani Sandoval — Tue, 01 Nov 2022 00:00:00 GMT

10月は Svelte コミュニティにとって忙しい月でした。SvelteKit では use:enhance と高度なルート(Advanced Routes) が大きく改善され、Svelte コンパイラは日々の開発体験が改善されたマイナーバージョンがリリースされました。

そして 巨大な ショーケースもカバーしなければ… それでは参りましょう！

What’s new in SvelteKit

The new update method for use:enhance lets you easily get back the default form behavior while augmenting it with your own logic (docs, #7083 and #7326)
[[optional]] parameters are now available for routing (docs, #7051)
goto now has invalidateAll to (re-)run all load functions belonging to the new active page (docs, #7407)
config.kit.paths.base is now used in adapters looking for static assets - fixing 404 issues across adapter-netlify, adapter-vercel, adapter-cloudflare, and adapter-cloudflare-workers (#4448)

Breaking changes:

ルート(routes)がコンフリクトしたとき、エラーがスローされるようになりました (#7051)
プリレンダリング時の、グローバルな fetch オーバーライドが削除されました (#7318)
Route ID の先頭に / が付与されるようになりました (#7338)

Svelte changes

New accessibility warnings, a11y-click-events-have-key-events and a11y-no-noninteractive-tabindex, will now warn when your components lack required key events or tabindex. While a11y-role-has-required-aria-props will no longer warn when elements match their semantic role (3.51.0)
--style-props are now supported on <svelte:component> and <svg> (3.51.0, Component Example: Before and After, SVG Example: Before and After)
“nullish” values for component event handlers are now supported (3.51.0, Example)
Scoped styles can now be applied to <svelte:element> (3.51.0, Example)
You can now use important in inline style tags: style:foo|important (3.52.0, #7365)
A warning will now be thrown when using <a target="_blank"> without rel="noreferrer" (3.52.0, #6188)

Tom Smykowski さんが 3.52.0 の全変更点のグレートなサマリを書いてくれました！Svelte コンパイラの全変更点と、今後の変更については、こちらの CHANGELOG をご確認ください！

Community Showcase

Apps & Sites built with Svelte

AttendZen is an event management and marketing platform for in-person, virtual or hybrid events
Gram Jam is a challenging daily word game using SvelteKit
Collabwriting is an actionable knowledge base for your team
Dazzle is a Puzzle Game made with Svelte & DallE
Figma Autoname plugin automatically names your Figma layers in one click
DECK is powerful and high performant local web development studio for MacOS, Ubuntu and Windows
Asm editor is a webapp to write and run m68k assembly code
Nucleus is a text editor featuring a clean and easy to use user interface inspired by Visual Studio Code, Atom, Fleet, and others
Observer is a frontend for Arth Panel, an open-source & self-hosted minecraft server panel
.PLAN is a cloud-based notetaking app with markdown and section support
Stablecog is a simple, free & open source AI image generator
FreeSpeech AAC is a free and open-source assistive communication app written in TypeScript
sqrdoff is a dots and boxes to enjoy playing with friends
itty is a fresh take on the traditional link-shortener
splits lets you track your splits, calculate your race pace, become a better athlete
Weaver is an application for creating weave drafts

Learning Resources

To Watch

Starting With Svelte - Brittney Postma by fitcevents
Learn Svelte from scratch with Geoff Rich: A Svelte tutorial by Kelvin Omereshone
How To Connect to MongoDB in Svelte Kit by LevelUpTuts
SvelteKit Authentication Using Cookies, Make A Typing Game With Svelte and SvelteKit Tailwind CSS Setup With Automatic Class Sorting by Joy of Code
Authentication with SvelteKit & PocketBase and Form Actions in SvelteKit (+page) by Huntabyte
Sybil - Episode 1 - Rust knowledge management with SurrealDB by Raphael Darley

To Read

4 things I miss from Svelte after working in React and Create dynamic social card images with Svelte components by Geoff Rich
First-class Vite support in Storybook 7.0 (Svelte and SvelteKit included) by Ian VanSchooten
Better Svelte support is coming to WebStorm from JetBrains
Dark Mode Toggle by pyronaur
HeadlessUI Components with Svelte by Captain Codeman
Using Sequelize with SvelteKit by MetaZebre
Implementing Maintenance mode on a SvelteKit site by Andreas Söderlund
ActionStore: Real-time Svelte stores for Rails by Stefan Buhrmester
Svelte CSS Image Slider: with Bouncy Overscroll and SvelteKit Local Edge Functions: Edge on Localhost by Rodney Lab
Creating a Svelte Tabs component with Slot props by Shinichi Okada
Sky Cart: An Open Source, cloud-agnostic shopping cart using Stripe Checkout by Mike Bifulco for Stripe

Libraries, Tools & Components

Threlte is a component library for Svelte to build and render three.js scenes declaratively and state-driven in Svelte apps. It’s being featured again to highlight the new “Playground” button in its examples
Svelte Turnstile is a library to integrate Cloudflare’s Turnstile (a new CAPTCHA alternative) into a Svelte app
ActionStore allows you to push data directly into Svelte stores via ActionCable
SvelteKit + <is-land> is an experiment with partial hydration in SvelteKit using @11ty/is-land
Svelte Color Select is an Okhsv Color Selection component for Svelte using OKLab perceptual colorspace
svelte-awesome-color-picker is a highly customizable color picker component library
rx-svelte-forms creates reactive Svelte forms inspired by Angular reactive forms
svelte-wc-bind enables two way data binding in Svelte web components
svelte-preprocess-style-child-component allows you to style elements inside a child component using similar syntax as CSS Shadow Parts
unplugin-svelte-components allows for on-demand components auto importing for Svelte
sveltekit-search-params aims to be the fastest way to read AND WRITE from query search params in SvelteKit
svelte-crop-window is a crop window component for images and videos that supports touch gestures (pinch zoom, rotate, pan), as well as mousewheel zoom, mouse-dragging the image, and rotating on right mouse button
Open Graph Image Generation lets you generate open graph images dynamically from HTML/CSS without a browser in SvelteKit
Svelte Tap Hold is a minimalistic tap and hold component for Svelte/SvelteKit
svelte-copy’s new version lets you customize the events that cause text to be copied to the clipboard

UI Kits, Integrations and Starters

SvelteKit Statiko is a multi-featured assistant for SvelteKit static projects
Svelte-TailwindCSS UI (STWUI) is a Tailwind-based UI that is currently in pre-release beta
KitBase is a starter template for SvelteKit and PocketBase
UnoCSS Vite Plugin (svelte-scoped) is a scoped-CSS utility for Vite/SvelteKit
SvelteKit Auth App is an example of how we can create an authentication system with SvelteKit using JsonWebToken and Prisma
SvelteKit Supabase Dashboard is a simple dashboard inspired by Supabase UI made with SvelteKit as frontend and Supabase as backend
Supakit is a Supabase auth helper for SvelteKit
@bun-community/sveltekit-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
hooks-as-store lets you use React custom hooks in Svelte Apps

Fun ones

svelte-typewriter-store is the simplest way to get a rotating typewriter effect in Svelte
Aksel is the seagull you needed on your site
Svelte-Dodge makes components dodge the pointer

今月はこれでおしまいです！見落としなどございましたら Reddit や Discord にてお知らせください。

それではまた来月 👋

What’s new in Svelte: 2022年10月

Dani Sandoval — Sat, 01 Oct 2022 00:00:00 GMT

今月は更新がいっぱいあります… Svelte と SvelteKit の新機能から 2日間の サミット まで! それに加えて、Svelte の extension に追加された便利な新機能、新しいアクセシビリティ (a11y) の警告、そして Tan Li Hau による Svelte と Svelte スプレッドシートの構築方法についての講座もございます 😎

What happened at Svelte Summit?

コンテンツが盛り沢山です! それぞれのライブストリームから、タイムスタンプで全ての講演をご覧いただけます。分割されたビデオは近日中に Svelte Society のチャンネルに追加される予定ですので、まだの方はチャンネル登録をお忘れなく!

Day One

12:31 - How to get Svelte adopted at work
33:21 - Animating Data Visualization in Svelte
2:20:36 - Red flags & code smells
2:53:42 - Enhance your DX
4:42:41 - Svelte in UBS’ knowledge graph
5:06:42 - How to migrate react libraries to svelte
5:45:27 - DX magic in the world of Svelte
7:25:39 - Data visualizations powered by Svelte
7:59:38 - Partial Hydration in Svelte for Increased Performance
8:20:49 - Building the future, faster

Day Two

24:09 - Scrollytell me why: Ain’t nothing but a piece of cake
2:02:40 - I told you my dog wouldn’t run
2:29:43 - 10Xing Svelte
3:04:56 - Svemix? Re-svmix? Re-svelte?: Bringing Svelte to Remix Router
5:09:39 - Having fun with stores: an interactive demo of Svelte’s built in state management library
5:37:06 - When Keeping it Svelte Goes Wrong. An Analysis of Some of the Worst Svelte I Have Ever Coded
7:22:05 - Getting started with Hooks
7:38:14 - Special Announcement*

*サミットの最後のトークでは、Rich Harris が SvelteKit の最初のリリース候補版(Release Candidate)を発表しました! 破壊的変更は行われなくなる予定で、チームはバグ潰しと 1.0 に向けた残りの機能の追加に懸命に取り組んでいます…

More SvelteKit Updates

use:enhance is the easiest way to progressively enhance a form (Docs, #6633, #6828, #7012)
The demo app has been updated to add the Sverdle game, which Rich demoed at Svelte Summit and demonstrates use:enhance (#6979)
Cloudflare Pages _routes.json specification is now supported by adapter-cloudflare (#6530)
Improved build performance by running asset and page compression in parallel (#6710)

Breaking changes:

Node 16.14 is now the minimum version to run SvelteKit (#6388)
App.PrivateEnv and App.PublicEnv have been removed in favour of generated types (#6413)
%sveltekit.message% has been replaced with %sveltekit.error.message% (6659)
App.PageError is now App.Error - check for it in your hooks (Docs, #6963)
externalFetch is now handleFetch and will run for all fetch calls in load that run on the server (#6565)

変更の全リストは、SvelteKit の CHANGELOG をご確認ください。

Svelte Updates

新たな a11y warning として incorrect-aria-attribute-type、no-abstract-role、interactive-element-to-noninteractive-role、role-has-required-aria-props が追加されました。no-noninteractive-tabindex と click-events-have-key-events も間もなくです! (3.50.0)
ComponentEvents and SveltePreprocessor (3.50.0)
新たな型として ComponentEvents と SveltePreprocessor が追加されました (3.50.0)
ホワイトスペースの大きいブロックが含まれている場合においてパースのスピードが改善されました (3.50.0)
全てのグローバルな JavaScript オブジェクトと関数が、既知のグローバルなものとして認識されるようになりました (3.50.1)

Svelte コンパイラに対する全ての変更や、今後の変更については、CHANGELOG をご確認ください。

New in Language Tools

エディタが提案するコードフォーマットが改善されました (106.0.0, #1598)
SvelteKit の route ファイルが、コンテキストメニューやコマンドパレットから簡単に作成できるようになりました (106.1.0, #1620)

Ask Questions in the Svelte Discord

発表を見逃してしまった方、Svelte Discord にエキサイティングな更新があるんです… それはフォーラムです! 新しい questions channel は、Discord の新しいフォーラム機能を利用し、質問とその発見、そして回答をするためのより良いコミュニティとなることを支援します!

Svelte や SvelteKit を使って実現したいことや、コミュニティのライブラリ、ツールなど、なんにでもお使いいただけます。お気軽にどうぞ!

Community Showcase

Apps & Sites built with Svelte

Timeflow is a smart calendar & task manager that dynamically schedules your tasks between your events
GeoQuest is an open source geography game
Houses Of is a project showcasing charismatic houses around the world
Greenfield Brewery is a tool for quickly installing a lot of homebrew casks
Gram Jam is a word puzzle game inspired by match three games and Scrabble
Beatbump is a privacy-respecting alternative frontend for YouTube Music
RoomOS Device Widgets is an app for demoing RoomOS device capabilities in Kiosk/PWA mode
World Seed is a full blown online multiplayer game
Lirify is a song lyrics writing web app tool made in Latvia
Splet Tech Konferencija is a tech conference in Serbia with a very fancy website
Unbounded is an open-source variable font - funded by blockchain (and an awesome-looking website)
Porter’s Paints is an eCommerce site for (you guessed it) paints built with Svelte
CRAN/E is a search engine for modern R-packages

Learning Resources

Starring the Svelte team

Upgrading SvelteKit by Svelte Sirens (with Brittney, Kev, and GHOST!)
Build your own Svelte by lihautan
Native Page Transitions in SvelteKit: Part 1 by Geoff Rich
Build a cross platform app with Tauri by GHOST

To Watch

How To Use Future CSS In Svelte and Master Animation With Svelte by Joy of Code
Svelte Kit Form Actions 101 - New Svelte Kit API and Svelte Kit Form Actions - Real World Examples - Q&A by LevelUpTuts

To Read

What’s new in svelte-kit, 1.0.0-next.445: (group) layout by Parables
Handling breaking changes in SvelteKit pre-1.0 by Thilo Maier
Svelte Custom Stores Demystified by Raqueebuddin Aziz
Sveltekit Changes: Advanced Layouts, Form Actions and Progressive Enhancement and Cookies and Authentication by Shivam Meena
How to add an Emoji Picker to Sveltekit by Xavier Coiffard
Get Started with SvelteKit Headless WordPress by Rodney Lab
Speed up SvelteKit Pages With a Redis Cache and How to await Firebase Auth with SvelteKit by Captain Codeman
Deploying SvelteKit with NodeJS to a Server Using GitLab and PM2 by A Byte of Coding
Quality of Life Tips when using SvelteKit in VS Code by doa-doa

Libraries, Tools & Components

Svelte Fit is an extremely simple, no dependency fit text library
svelte-switch-case is a switch case syntax for your Svelte components
svelte-canvas-confetti uses a single canvas to render full-screen confetti
@slidy/svelte is a simple, configurable & reusable carousel component built with Svelte - based on @slidy/core
svelte-currency-input is a form input that converts numbers to localized currency formats as you type
Adria is a super simple form validation library, with autocomplete and value/type checking
Canopy is a Svelte debugging app for the Chrome devtools panel
MenuFramework is a menu framework written for alt:V
whyframe gives iframes superpowers, making it easy to render anything in isolation
@svelte-put/modal is a solution to async, declarative, type-safe modals in Svelte
Kitty is a collection of libraries and handlers for developing secure frontend apps
svelte-turnstile is a component for Cloudflare Turnstile, the privacy focused CAPTCHA replacement

UI Kits and Starters

QWER is a blog starter built with SvelteKit
SvelteKit Zero API provides type-safety between the frontend and backend - creating a structure for easy APIs
sveltekit-monorepo is monorepo starter with 2022 tech
svelte-component-test-recipes uses vitest, @testing-library/svelte, and svelte-htm to test Svelte components that seemed to be hard to test

Whew! 更新が盛り沢山でしたね。何か見逃していることがあれば Reddit や Discord でお知らせください!

それではまた来月 👋

What’s new in Svelte: 2022年9月

Dani Sandoval — Thu, 01 Sep 2022 00:00:00 GMT

今月やりたいことをまだお探しですか? Svelte Summit Stockholm のチケットを手に入れる最後のチャンスです! 9月8-9日です、ご参加ください 🎉

先月、再設計された SvelteKit のファイルシステムベースルーターがマージされ、今月は、移行スクリプトから新しいブログ記事の数々、ビデオ、チュートリアルまで、コンテンツが盛り沢山です。

しかし、SvelteKit の新機能は新しいルーティングだけではありません…

What’s new in SvelteKit

HTTP ヘッダーの Link がサポートされ、Cloudflare の Automatic Early Hints がすぐに使えるようになりました (1.0.0-next.405, PR)
機密性の高い値がディスクに書き込まれるのを防ぐため、$env/static/* は仮想化(virtual)されました (1.0.0-next.413, PR)
$app/stores がブラウザのどこからでも使用できるようになりました (1.0.0-next.428, PR)
config.kit.env.dir は .env ファイルを探すディレクトリを設定する新しいコンフィグです (1.0.0-next.430, PR)

Breaking changes:

The filesystem-based router and load API improves the way routes are managed. Before installing version @sveltejs/kit@1.0.0-next.406 or later, follow this migration guide (PR, Issue)
event.session has been removed from load along with the session store and getSession. Use event.locals instead (1.0.0-next.415, PR)
Named layouts have been removed in favor of (groups) (1.0.0-next.432, Docs, PR & Migration Instructions)
event.clientAddress is now event.getClientAddress() (1.0.0-next.438, PR)
$app/env has been renamed to $app/environment, to disambiguate with $env/... (1.0.0-next.445, PR)

変更の全リストは、kit の CHANGELOG をご確認ください。

Updates to language tools

TypeScript が SvelteKit の $types をうまく解決できませんでしたが、Svelte の language tools の最新バージョンではそれが改善されました (105.21.0, #1592)

Community Showcase

Apps & Sites built with Svelte

canno is a simple interactive 3d physics game with adjustable gravity, cannon power, and debug visualizer - made with threlte
straw.page is an extremely simple website builder that lets you create unique websites straight from your phone
Patra lets you share short notes just with a link. No database. No storage
promptoMANIA is an AI art community with an online prompt builder
Album by Mood lets you listen to music based on your mood
Daily Sumeiro is a daily game to test your math and logic skills
Lofi and Games - play relaxing, casual games right from your browser
Pitch Pipe is a digital pitch pipe with a frequency analyser and just-intonation intervals
classes.wtf is a custom, distributed search engine written in Go and Svelte to make searching for Harvard courses much quicker than the standard course catalog
Scrumpack is a set of tools to help agile/scrum teams with their ceremonies like Planning Poker and Retrospectives

Learning Resources

Starring the Svelte team

Learning the new SvelteKit routing

Migrating Breaking Changes in SvelteKit by Brittney Postma (Netlify)
Major Svelte Kit API Change - Fixing load, and tightening up SvelteKit’s design before 1.0 - Video by LevelUpTuts
SvelteKit Is Never Going To Be The Same - Video by Joy of Code
Let’s learn SvelteKit by building a static Markdown blog from scratch by Josh Collinsworth (updated Aug 26th to keep up with the new changes)

To Watch

Svelte Guide For React Developers and Svelte State Management Guide by Joy of Code
What Is Bookit? The Svelte Kit Storybook Killer and What Is @type{import In Svelte Kit - JSDoc Syntax by LevelUpTuts
TWF Yet another JS Framework... or not? Svelte! by TWF meetup

To Read

Creating a Figma Plugin with Svelte by Lennart
Svelte Video Blog: Vlog with Mux from your own SvelteKit Site and Svelte Shy Header: Peekaboo Sticky Header with CSS by Rodney Lab

Libraries, Tools & Components

@svelte-plugins/tooltips is a simple tooltip action and component designed for Svelte
Lucia is a simple authentication library for SvelteKit that connects your SvelteKit app to your database
remix-router-svelte is a Svelte implementation of the react-router-dom API (driven by @remix-run/router)
MKRT is a CLI to help you create SvelteKit routes, fast
Histoire is a tool to generate stories applications - scenarios where you showcase components for specific use cases
sveltekit-flash-message is a Sveltekit library that passes temporary data to the next request, usually from endpoints
svelte-particles is a lightweight TypeScript library for creating particles
svelte-claps adds clap button (like Medium) to any page for your SvelteKit apps
Neon Flicker is a Svelte component to make your text flicker in a cyberpunk style
ComboBox is a search input to help users select from a large list of items
@svelte-put is useful svelte stuff to put in your projects
vite-plugin-svelte-bridge lets you write Svelte components and use them from React & Vue

UI Kits and Starters

Svelte-spectre is a UI-kit based on spectre.css and powered by Svelte
Skeleton allows you to build fast and reactive web UI using the power of Svelte + Tailwind
iconsax-svelte brings the popular icon kit to Svelte
laravel-vite-svelte-spa-template is a Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios, & TypeScript starter template
neutralino-svelte-boilerplate-js is a cross platform desktop template for Neutralino and Svelte
figma-plugin-svelte-vite is a boilerplate for creating Figma plugins using Svelte, Vite and Typescript
Urara is a sweet & powerful SvelteKit blog starter
SvelteKit Commerce is an all-in-one starter kit for high-performance e-commerce sites built with SvelteKit by Vercel

Did we miss anything? Let us know on Reddit or Discord!

See ya next month!

What’s new in Svelte: 2022年8月

Dani Sandoval — Mon, 01 Aug 2022 00:00:00 GMT

今月は盛り沢山です… 1.0 が完了する前に、SvelteKit の設計に大きな変更があります。まだご存知ないようでしたら、Rich さんの Discussion Fixing load, and tightening up SvelteKit’s design before 1.0 #5748 をチェックしてみてください。

また、@dummdidumm (Simon H) 氏が Vercel に加わり、フルタイムで Svelte に取り組むことになりました。そして @tcc-sejohnson 氏が SvelteKit メンテナーのグループに加わりました! Svelte と SvelteKit の開発に専念できるメンテナーが増え、すでに大きなインパクトを与えています。7月には、SvelteKit の開始以来、3番目に大きな変更がありました!

それではアップデートの残りを見ていきましょう…

What’s new in SvelteKit

Dynamically imported styles are now included during SSR (#5138)
Improvements to routes and prop updates to prevent unnecessary rerendering (#5654, #5671)
Lots of improvements to error handling (#4665, #5622, #5619, #5616)
Custom Vite modes are now respected in SSR builds (#5602)
Custom Vite config locations are now supported (#5705)
Private environment variables (aka “secrets”) are now much more secure. Now if you accidentally import them to client-side code, you’ll see an error (#5663, Docs)
Vercel’s v3 build output API is now being used in adapter-vercel (#5514)
vite-plugin-svelte has reached 1.0 and now supports Vite 3. You’ll notice new default ports for dev (port 5173) and preview (port 4173) (#5005, vite-plugin-svelte CHANGELOG)

Breaking changes:

mode, prod and server are no longer available in $app/env (#5602)
svelte-kit CLI commands are now run using the vite command and vite.config.js is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook (#5332, Docs)
endpointExtensions is now moduleExtensions and can be used to filter param matchers (#5085, Docs)
Node 16.9 is now the minimum version for SvelteKit (#5395)
%-encoded filenames are now allowed. If you had a % in your route, you must now encode it with %25 (#5056)
Endpoint method names are now uppercased to match HTTP specifications (#5513, Docs)
writeStatic has been removed to align with Vite’s config (#5618)
transformPage is now transformPageChunk (#5657, Docs)
The prepare script is no longer needed in package.json (#5760)
adapter-node no longer does any compression while we wait for a bug fix in the compression library (#5560)

変更の全リストは、kit の CHANGELOG をご覧ください。

What’s new in Svelte & Language Tools

@layer CSS at-rule が Svelte コンポーネントでサポートされました (3.49.0, PR)
inert HTML 属性が Svelte の language tool とプラグインでサポートされました (105.20.0, PR)
Svelte プラグインは、利用可能な場合は、SvelteComponentTyped の型付けを使用するようになりました (105.19.0, PR)

Community Showcase

Apps & Sites built with Svelte

PocketBase is an open source Go backend with a single file and an admin dashboard built with Svelte
Hondo is a word guessing game with multiple rounds
Hexapipes is a site for playing hexagonal pipes puzzle
Mail Must Move is an email made for those who want to get more done
Jot Down is a Visual Studio Code extension for quick and simple note taking
Kadium is an app for staying on top of YouTube channels’ uploads
Samen zjin we #1metS10 is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
On Writing Code is an interactive website to learn programming design patterns
Svelte-In-Motion lets you create Svelte-animated videos in your browser
Svelte Terminal is a terminal-like website
Bulletlist is a simple tool with a single purpose: making lists
Remind Me Again is an app for toggleable reminders on Mac, Linux and Windows
Heyweek is a timetracking app built for freelancers craving that extra pizzazz

Learning Resources

Starring the Svelte team

The Svelte Documentary is out! on Svelte Radio
Beginner SvelteKit by Vercel
Challenge: Explore Svelte by Building a Bubble Popping Game by Brittney Postma
Let’s write a Client-side Routing Library with Svelte by lihautan
Svelte Sirens July Talk - Testing in Svelte with Jess Sachs

To Watch

10 Awesome Svelte UI Component Libraries by LevelUpTuts
Learn How SvelteKit Works and SvelteKit Endpoints by Joy of Code
SvelteKit using TS, and Storybook setup by Jarrod Kane
Building Apps with Svelte! by Simon Grimm
SvelteKit authentication, the better way - Tutorial by Pilcrow

To Read

Some assorted Svelte demos by Geoff Rich
Three ways to bootstrap a Svelte project by Thilo Maier
Design & build an app with Svelte by Hugo
Define routes via JS in SvelteKit by Max Core
Integrating Telegram api with SvelteKit by Shivam Meena
SvelteKit SSG: how to Prerender your SvelteKit Site by Rodney Lab
ADEO Design System: Building a Web Component library with Svelte and Rollup by Mohamed Mokhtari
The Svelte Handbook by The Valley of Code
Test Svelte Component Using Vitest & Playwright by David Peng
Transitional Apps with Phoenix and Svelte by Nathan Cahill

Tech Demos

Bringing the best GraphQL experience to Svelte by The Guild
Style your Svelte website faster with Stylify CSS by Stylify
Revamped Auth Helpers for Supabase (with SvelteKit support) by Supabase

Libraries, Tools & Components

Lucia is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
Skeleton is a UI component library for use with Svelte + Tailwind
pass-composer helps you compose your postprocessing passes for threlte scenes
@crikey/stores-* is a collection of libraries to extend Svelte stores for common use-cases
Svelte Chrome Storage is a lightweight abstraction between Svelte stores and Chrome extension storage
Svelte Schema Form is a form generator for JSON schema
svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view
Snap Layout and universal-title-bar bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a .svelte module or as a web component
svelte-adapter-bun is an adapter for SvelteKit apps that generates a standalone Bun server
json2dir converts JSON objects into directory trees
Svelte Command Palette is a drop-in command palette component
svelte-use-drop-outside is a Svelte action to drop an element outside an area
PowerTable is a JavaScript component that turns JSON data into an interactive HTML table
svelte-slides is a slide show template for Svelte using Reveal.js
Svelte Theme Light is a Visual Studio Code theme based on the Svelte REPL

もし見落としがありましたら、Reddit か Discord にどうぞ!

9月に何かやりたいことをお探しでしたら、ストックホルムで開催される Svelte Summit に参加してみませんか! チケットはこちらです。

また来月!

What’s new in Svelte: 2022年7月

Dani Sandoval — Fri, 01 Jul 2022 00:00:00 GMT

SSR の高速化から SvelteKit における Vitest と Storybook のサポートまで、今月のニュースレターは盛り沢山です…

それでは見ていきましょう!

OpenCollective funding drives Svelte forward

Svelte の支援者の方々は、約 $80,000 を OpenCollective のプロジェクトに寄付してくれました。この資金が、Svelte を有意義に前進させるために使用されていることを、私たちは嬉しく思っています。@gtm-nayan 氏は SvelteKit を 1.0 レベルに安定させるため、プロジェクトの paid contributor として先月から issue のトリアージと修正を行っています! @gtm-nayan はずっと長い間 Svelte コミュニティのアクティブなメンバーであり、私たちの Discord サーバーの運営を助ける bot を書いていることでも知られています。今回の資金提供により、彼がより多くの時間を Svelte に使えるようになったことを嬉しく思います。

また、OpenCollective の資金を活用して、Svelte のコアメンテナーが秋の Svelte Summit に現地参加できるようにする予定です。寄付してくださった皆様、ありがとうございます!

What’s new in Svelte & Language Tools

The tutorial is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
Faster SSR is coming in the next Svelte release. A PR two years in the making, resulting in up to 3x faster rendering in some benchmarking tests! (PR)
“Find File References” (0.14.28) and “Find Component References” (0.14.29) in the latest versions of the Svelte extension shows where Svelte files and components have been imported and used (Demo)
The Svelte extension now supports CSS path completion (0.14.29)

What’s new in SvelteKit

Vitest や Storybook などの、Vite エコシステムの他のツールと SvelteKit の総合運用を可能にする @sveltejs/kit/experimental/vite が作成されました (#5094)。この機能を experimental から外して全てのユーザーに対して vite.config.js を必須にするか検討するため、この機能が動作するか、役に立つかどうか、フィードバックをお願いします
エンドポイントで Streaming がサポートされました (#3419)。これは Undici の fetch 実装に切り替えることで可能になりました (#5117)
開発環境において、静的なアセットをシンボリックリンクできるようになりました (#5089)
server と prod 環境変数が利用できるようになりました。これは browser と dev にそれぞれ対応するものです (#5251)

Community Showcase

Apps & Sites built with Svelte

Virtual Maker lets you make interactive 3D and VR scenes in your browser
Apple Beta Music appears to have been written in some combination of Svelte and web components
Itatiaia, the largest radio station in the country of Brazil just relaunched its news portal in SvelteKit
Pronauns helps you learn pronunciation online with IPA to speak better and sound more native
Immich is an open source, high performance self-hosted backup solution for videos and photos on your mobile phone
Pendek is a link shortener built with SvelteKit, Prisma and PlanetScale
Grunfy is a set of guitar tools - recently migrated to SvelteKit
Radiant: The Future of Radio is a personal radio station app built with Svelte and Capacitor
Imperfect Reminders is a todo list for things that are only sort of time sensitive
Periodic Table is a dynamic Periodic Table component written in Svelte
Svelvet is a lightweight Svelte component library for building interactive node-based diagrams
publint lints for packaging errors to ensure compatibility across environments
Playlistr helps manage and create Spotify playlists
Geoff Rich’s page transitions demo shows how SvelteKit’s beforeNavigate / afterNavigate hooks can make smooth document transitions in the latest Chrome Canary
Menger Sponge is a fractal built with Threlte

Want to contribute to a site using the latest SvelteKit features? Help build the Svelte Society site!

Learning Resources

Starring the Svelte team

Svelte Origins: A JavaScript Documentary by OfferZen Origins
Full Stack Documentation (announcing learn.svelte.dev) by Rich Harris @ JSNation 2022
All About the Sirens by Svelte Radio

To Watch

SvelteKit Page Endpoints, Named Layouts and Passing data from page component to layout component with $page.stuff by lihautan
🍞 & 🧈: Magically load data with SvelteKit Endpoints by Johnny Magrippis
Svelte for React developers by frontendtier
Learn Svelte JS || JavaScript Compiler for Building Front end Applications by Code with tsksharma
SvelteKit Authentication by Joy of Code
Svelte + websockets: Build a real-time Auction app by Evgeny Maksimov

To Read

Up-To-Date Analytics on a Static Website and Fast, Lightweight Fuzzy Search using Fuse.js by paullj
Use SvelteKit as a handler in the ExpressJs project by Tran Chien
Creating a desktop application with Tauri and SvelteKit by Stijn-B
List of awesome Svelte stores by samuba
SvelteKit Content Security Policy: CSP for XSS Protection by Rodney Lab
SvelteKit Hooks. Everything You Need To Know by Lucretius K. Biah
3 tips for upgrading the performance of your Svelte stores by Mathias Picker

Libraries, Tools & Components

Svend3r is a plug and play D3 charting library for Svelte
Svelte Hover Draw SVG is a lightweight Svelte component to draw SVG on hover
Svelte French Toast provides buttery smooth toast notifications that are lightweight, customizable, and beautiful by default
SVooltip is a basic Svelte tooltip directive, powered by Floating UI
Svelte Brick Gallery is a masonry-like image gallery component for Svelte
use-vest is a Svelte action for Vest - a library that makes it easy to validate forms and show errors when necessary
Svelidate is a simple and lightweight form validation library for Svelte with no dependencies
Svve11 is an “accessibility-first” component library for Svelte
Slidy is a simple, configurable & reusable carousel sliding action script with templates & some useful plugins
Svelte Component Snippets is a VS Code extension with access to common Svelte snippets
Svelte Confetti adds a little bit of flair to your app with some confetti 🎊

もし見落としがありましたら、Reddit や Discord で教えてください。

ストックホルムで開催される Svelte Summit に現地参加することもできますので、お忘れなく! Svelteの素晴らしいコンテンツでいっぱいの2日間に是非加わってください! チケットはこちらです。

また来月お会いしましょう!

What’s new in Svelte: 2022年6月

Dani Sandoval — Wed, 01 Jun 2022 00:00:00 GMT

先月 Svelte Summit があったので、私たちは学んだことすべてをこの6月に適用する準備ができています! また、createEventDispatcher、@const 宣言などの QOL を上げてくれる変更や、SvelteKit 1.0 に向けた大量の進捗があります。

それでは見ていきましょう!

What’s new in Svelte

Custom events can now be cancelled in the createEventDispatcher function (3.48.0, Docs, PR)
The {@const} tag can now be used in {#if} blocks to conditionally define variables (3.48.0, Docs, PR)
Lots of bug fixes across <svelte:element>, animations and various DOM elements. Check out the CHANGELOG for a deeper dive!

What’s new in SvelteKit

Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever (Vite 3.0 Milestone)
config.kit.alias lets you more easily declare a custom alias to replace values in import statements (Docs, PR)
Pages marked for prerendering will now fail during SSR at runtime (PR)

Breaking Changes

Node 14 is no longer supported (PR)
Requests to /favicon.ico will no longer be suppressed and will instead be handled as a valid route (PR)
AMP support has been moved to a separate @sveltejs/amp package (Docs, PR)
Generated types are now written to _types directories - update your imports accordingly (PR)
%svelte.head% and %svelte.body% are now %sveltekit.head% and %sveltekit.body% in app.html (PR)
LoadInput is now LoadEvent
Dropped support for Wrangler 1 in favor of Wrangler 2 (PR)

Community Showcase

Apps & Sites built with Svelte

Plantarium は、3D の植物を手続き的に生成するためのツールです。
SPATULA は、lamina と threejs を使用するプロジェクトであればコードマテリアルとしてポータブルなシェーディングマテリアルを構築するためのツールです。
Waaard は、様々な SSO プロバイダーでリンクを保護できるようにし、それを送信することができます
Magidoc は、高速かつ高いカスタマイズ性を備えた GraphQL ドキュメントジェネレーターです
myMarkmap は、マークアップ向けのカスタムエディタで、SvelteKit で構築されています
PassShare では、あなたのパスワードをあなたの友人に、安全かつ効率的に共有することができます
DashingOS は、(Notion + CodeSandbox のような)ツールで、プロトタイプと文書化を一箇所で、素早く簡単に行うことができます
worker-kit-email は、通常の SvelteKit のルート(routes)を使用して、トランザクショナルな email を開発するのに便利です
kaios-weather-svelte は、KaiOS 向けのとても親しみやすい天気アプリです
svelte-gantt は、軽量で高速かつインタラクティブなガントチャート/リソースブッキングコンポーネントです
Miru は、cats 向けの BitTorrent ストリーミングソフトウェアです

素晴らしい SvelteKit Web サイトに貢献してみませんか? Svelte Society のサイトの構築を手伝っていただけませんか!

Learning Resources

To Read

Component party is a site that compares common patterns in different frameworks
Quick tip: style prop defaults by Geoff Rich
Working with reduced motion in Svelte by GHOST
Building a Musical Instrument with the Web Audio API by Tania Rascia
Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices and Svelte-Cubed: Loading Your glTF Models by Alex Warnes

To Watch

From Svelte Society:

The Svelte Summit Spring 2022 stream recording has been updated with chapter markers to make it easy to watch again and again
The full recording of Svelte London, April 2022 is up! Check out the amazing talks from across the Svelte London community
Persian Svelte Society is making Persian-language videos about Svelte
Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
- SvelteKit + Sanity.io: a match made in heaven on May 13
- Slicing up your Svelte Sites with Prismic on May 20
- Rendering your Svelte apps on Render on May 24
- The story behind the (unofficial) Svelte newsletter on May 27

Across the Web:

Building vite-plugin-svelte-inspector, What is Singleton? and What is Navigation? by lihautan
Auto Import Components In Svelte Kit - Weekly Svelte by LevelUpTuts
🧪 Test SvelteKit with TDD & VITEST 🧪 by Johnny Magrippis
Google Analytics With SvelteKit, Using WebSockets With SvelteKit, SvelteKit Authentication Using Cookies and Svelte Headless UI Component Library by Joy of Code
Named Layouts In Nested Routes in SvelteKit by The Svelte Junction
SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks and Svelte Capsize Styling: Typography Tooling by Rodney Lab

To Hear

Svelte Radio has been putting out weekly episodes:
Svelte and the Future of Frontend Development (feat. Rich Harris) from The New Stack

Libraries, Tools & Components

vite-plugin-svelte-console-remover is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don’t leak into production
Svelte Headless Tables is an unopinionated and extensible data tables for Svelte
y-presence is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
Svelcro is a component performance tracker for Svelte applications
Svelte-Splitpanes lets you create dynamic and predictable view panels to layout an application
svelte-miniplayer is a lightweight, fast, resizable and draggable miniplayer for media
svelte-keybinds is a minimalistic keybinding interface, with rebinding and saving
svelte-speech-recognition converts speech from the microphone to text and makes it available to your Svelte components

Special Feature: Svelte Stores

There were lots of Svelte stores released this month from a number of authors...

svelte-mutable-store is a Svelte store for mutable values with the immutable compiler option
svelte-damped-store is a derived writable store that can suspend updates while svelte-lens-store is a functional lens over Svelte stores
svelte-persistent-store is a writable svelte store that saves and loads data from Window.localStorage or Window.sessionStorage.

もし見落としがありましたら、Reddit や Discord で教えてください。

また来月お会いしましょう!

What’s new in Svelte: 2022年5月

Dani Sandoval — Sun, 01 May 2022 00:00:00 GMT

昨日 Svelte Summit があったので、シェアするニュースがたくさんあります！Svelte Society YouTube Channel のレコーディングをチェックしてみてください。それでは、今月の更新情報をどうぞ…

What’s new in Svelte

The <svelte:element> element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the docs or the tutorial for more info (3.47.0)!

Language Tools updates

svelte:element と sveltekit:reload がサポートされました
無効な Svelte インポートパスが自動的に検知されるようになりました。以前の動作に戻したい場合は PR をご確認ください (#1448)
source.sortImports によって、未使用のインポートを削除することなくインポートをソートできるようになりました (#1338)
HTML 属性にカーソルを合わせたときに、TS のホバー情報ではなく HTML のホバー情報が表示されるようになり、より便利な情報が見られるようになりました (#1447)
VS Code で、Insert Snippet コマンドを使って既存のコードブロックをコントロールフロータグでラップできるようになりました (#1373)

What’s new in SvelteKit

Files and directories can now be named __tests__ and __test__ in the routes directory (#4438)
Netlify Edge Functions (#4657) and the Vercel build output API (#4663) are now supported
Custom load dependencies, array of strings representing URLs the page depends on, are now available when loading routes (Docs, #4536)

Breaking Changes

Validators are now called “matchers” (Docs, #4358)
__layout.reset has been replaced by named layouts - which have much configurability for shared layout elements (Docs, #4388)
Prerendering is now skipped for rel="external" links (#4545)
maxage is now cache in LoadOutput (#4690)

Community Showcase

Apps & Sites built with Svelte

polySpectra AR は、AR のファイルを渡すことで 3D プリントを早くプロトタイプすることができます (video demo)
Pixel Art Together は、複数人で使用できるフリーのピクセルアートエディタです。Liveblocks を使用しています
Tooling Manager では、あなたの JavaScript の技術スタックと、業界の標準的なボイラープレートを比較することができます
Easy Portfolio は、あなたの GitHub プロフィールをもとにポートフォリオを生成します
FLOAT は、イベント用の出席管理プログラムです
The Coin Perspective は暗号通貨の価格トラッカー兼ポートフォリオ管理ツールです
Locutionis は、修辞的表現法の小さなオンラインリファレンスです (フランス語)
ASM Editor は、M68K と MIPS 向けのオールインワンなエディタです
Otium はフリーでオープンソースのブックマネージャーであり、ブックシェルフオーガナイザーです。あなたの本や読みたい本を管理するのに役立ちます
Sinwaver は正弦波の SVG を生成するジェネレーターです

モダンな SvelteKit webサイトに貢献してみたいですか？Svelte Society のサイト構築を手伝っていただけませんか!

Learning Resources

To Read

4 tips for cleaner Svelte components by Geoff Rich
Building a Clubhouse clone with Svelte and 100ms By Seun Taiwo
SvelteKit uvu Testing: Fast Component Unit Tests by Rodney Lab
SvelteKit JWT authentication tutorial by pilcrowOnPaper
Converting a Rollup-based Svelte SPA to SvelteKit by Simon H
Add Commitint, Commitizen, Standard Version, and Husky to SvelteKit Project by David Peng

To Watch or Hear

Rich Harris - The Road to SvelteKit 1.0 (Svelte Society NYC) by Svelte Society
Svelte Fundamentals - Intro to Svelte by Coding Cat
Svelte Components Using Custom Markdown Renderers - Weekly Svelte by LevelUpTuts
Implementing {@const} in if block by lihautan
Svelte and Contributing to Open-Source with Geoff Rich by 20minJS

Libraries, Tools & Components

KitDocs は SvelteKit 向けのドキュメントのインテグレーションです。Svelte にとっての VitePress のようなものです。
Svelte Copy は、クリック/タップで簡単にクリップボードにコピーすることができるライブラリです
Svend3r は D3 のパワーを活用した美しいビジュアライゼーションを提供してデータに命を吹き込み、それだけでなく、命令形のコードを抽象化できます
Svelte Hamburgers は Svelte 向けの簡単に使えるハンバーガーメニューコンポーネントです
Svelte Droplet は Svelte 向けのファイルドロップゾーンです
Svelte MP3 は Svelte 向けの、軽量で高速かつシンプルでミニマルなオーディオプレーヤーです
SvelteUI は高機能でアクセシブルな Web アプリケーションをより速く構築するためのコンポーネントライブラリです
svelte-spotlight はヘッドレスな spotlight コンポーネントで、短時間でサイト全体の検索ボックスを構築するのに役立ちます
svelte-pdf-simple は PDF を表示するためのシンプルな Svelte ライブラリで、コントロールがカスタマイズ可能です
persistent-svelte-store は永続化のための汎用的な書き込み可能なストア(writable store)です。TypeScriptでスクラッチで構築されており、Svelte のストアコントラクト(store contract)に準拠しています
svelte-exmarkdown は markdown を動的にレンダリングするための Svelte コンポーネントです
Bookit は storybook ライクなコンポーネントレンダリング環境です。SvelteKit プロジェクトで動作するように細かくチューニングされています

この続きは Reddit や Discord で！

オフラインでのコミュニティ参加を待ち望んでいた方に朗報です。ついに Svelte Summit がリアルワールドに移行します。是非、素晴らしい Svelte コンテンツでいっぱいの2日間にご参加ください！チケットはこちら！

また来月お会いしましょう！

What’s new in Svelte: 2022年4月

Dani Sandoval — Fri, 01 Apr 2022 00:00:00 GMT

今月は、SvelteKit のページプロパティの扱い方に変更がありました。フォールスルールート(fallthrough routes)を必要とするユースケースの最後の難関「パラメータプロパティの検証」が、より具体的なソリューションに置き換えられました。

より詳細な情報と、その他 Svelte の新機能について見ていきましょう…

What’s new in SvelteKit

Param matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose (Docs, #4334)
Explicit redirects can now be handled directly from endpoints (#4260)
svelte-kit sync (#4182), TypeScript 4.6 (#4190) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team (#4468)

New Config Options

outDir fixes path issues in monorepos and other situations where the desired output directory is outside the project directory (Docs, #4176)
endpointExtensions prevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions (Docs, #4197)
prerender.default lets you prerender every page without having to write export const prerender = true in every page file (Docs, #4192)

Breaking Changes

フォールスルールート(Fallthrough routes)が削除されました。マイグレーションのための tips については、PR を確認してみてください (#4330)
tabindex="-1" がナビゲーションの間 <body> にのみ追加されるようになります (#4140、#4184)
Adapter は getClientAddress 関数を提供する必要があります (#4289)
InputProps と OutputProps は、生成される Load において別々に型付けされるようになりました (#4305)
\$ 文字が動的なパラメータとして使えなくなりました (#4334)
svelte-kit package が experimental としてマークされ、Kit 1.0 以降に変更があっても breaking と見なされません (#4164)

New across the Svelte ecosystem

Svelte: TypeScript、Svelte plugin ユーザー向けに新しい型が多く追加されました。style: ディレクティブや Svelte Actions も含まれます (3.46.4、3.46.5)
Language Tools: Svelte のプロジェクトファイルを、TS ファイルでインポートしていなくても参照(reference)からインポート/検索できるようになりました (105.13.0)
Language Tools: html で、  /  で折りたたみができるようになりました (105.13.0)

Community Showcase

Apps & Sites built with Svelte

Launcher はオープンソースのアプリランチャーです。SvelteKit、Prisma、Tailwind を使用しています
Paaster は end to end で暗号化された pastebin で、デフォルトで安全です。Svelte、Vite、TypeScript、Python、Starlette、rclone、Docker で構築されています
Simple AF Video Converter は ffmpeg.wasm の Electron ラッパーです。フォーマット間の動画変換を簡単に行うことができます。
Streamchaser は、一元化されたエンターテイメントテクノロジープラットフォームを通じて、映画やシリーズ、ドキュメンタリーなどの検索をシンプルにすることを追求しています
Svelte Color Picker はシンプルなカラーピッカーで、Svelteで構築されています
ConcertMash は、Spotify API を使用してあなたが参加する予定のコンサートに基づいた新しいプレイリストを生成する小さな web サイトです
Modulus はデザイン+コードのシンクタンクで、デザインとテクノロジーを進化させることを主なミッションとしています。
Multiply はカルチャーのスピードに合わせた PR とソーシャルの総合エージェンシーです
yia! はニュージーランドの Young Innovator Award コンペティションです
Write to Russia は、パブリックな .ru のメールアドレスとやり取りするためのコミュニティメール作成プラットフォームです
Markdown Playground は、markdown 色々試してみるのに特化したオンラインの playground です
RatherMisty は装飾を省いた天気予報アプリで、Open-Meteo の気象データを使用しています
Minecraft Profile Pic (MCPFP) は Minecraft のプロフィール画像を簡単に生成できるサイトです
WebGL Fluid Simulation は様々な設定が可能な流体シミュレーションで、Svelte と WebGL で構築されています
この @NobelPeaceOslo の展示は、プリントグラフィックス、プロジェクションモーショングラフィックス、パーティクルアニメーション、ジェネレーティブサウンドデザインを用いて構築されています

モダンな SvelteKit webサイトに貢献してみたいですか？Svelte Society のサイト構築を手伝っていただけませんか!

Learning Resources

To Attend

Svelte Summit: Spring が2022年4月30日に開催されます！YouTube と Discord で、5回目のバーチャルな Svelte カンファレンスに是非ご参加ください 🍾

To Read

Svelte(Kit) TypeScript Showcase + general TypeScript tips by Hofer Ivan
Local constants in Svelte with the @const tag by Geoff Rich
Design Patterns for Building Reusable Svelte Components by Eric Liu
Svelte is better than React by Hamilton Greene
Making Visualizations Literally with Svelte and D3 by Connor Rothschild
Coordinating Multiple Elements with Svelte Deferred Transitions by Daniel Imfeld
Animate on scroll with Svelte Inview - Little Bits by Maciek Grzybek
Lazy-Loading Firebase with SvelteKit and HeadlessUI Components with Svelte by Captain Codeman
SvelteKit Accessibility Testing: Automated CI A11y Tests by Rodney Lab
Getting Started with KitQL and GraphCMS by Scott Spence
React ⇆ Svelte Cheatsheet は、2つのライブラリの類似点と相違点のリストです - by Joshua Nussbaum

To Watch

Svelte Extravaganza | Async by pngwn
6 Svelte Packages You Should Know and Basic React To Svelte Conversion by LevelUpTuts
Page/Shadow Endpoint in SvelteKit by WebJeda
Custom Svelte Store: Higher Order Store by lihautan
SvelteKit For Beginners (Playlist) by Joy of Code - follow along with the blog guide
Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄 by Johnny Magrippis
Firebase Authentication in SvelteKit! Full Stack App by Ryan Boddy

Libraries, Tools & Components

SvelTable は多機能なデータテーブルコンポーネントで、Svelteで構築されています
svelte-cyberComp はパワフルで軽量な Svelte コンポーネントで、Svelte と TypeScript で書かれています
Flowbite Svelte は Svelte 向けの非公式な Flowbite コンポーネントライブラリです
Svelte-Tide-Project は、フロントエンドに Svelte、バックエンドに Rust の Tide を使ったスターター・テンプレートです
Fetch Inject は非同期な JavaScript の依存関係を管理するためのパフォーマンス最適化の実装で、Svelte をサポートし始めました
svelte-utterances は GitHub issues をベースにした軽量なコメントウィジェットです
Liquivelte は、Svelte ライクなコンポーネントで Shopify のテーマを構築することができます
@storyblok/svelte は、Storyblok API を使用するのに必要な Svelte SDK で、リアルタイムでビジュアル編集が可能となります
@svelte-on-solana/wallet-adapter は Solana/Anchor アプリケーション向けのモジュラーな TypeScript wallet adapter と UI コンポーネントで、フレームワークとして SvelteJS を使用しています
svelte-lookat は、その子要素がマウスカーソル(モバイルの場合はユーザーの顔)に追従するような div を作成します

この続きは Reddit や Discord で！

また来月お会いしましょう！

What’s new in Svelte: 2022年3月

Dani Sandoval — Tue, 01 Mar 2022 00:00:00 GMT

発表: Svelte Summit Spring が 2022 年 4 月 30 日に開催されます。5 回目となるバーチャルな Svelte カンファレンスでは、発表者とスポンサーを募集中です。プロポーザルを書いてみませんか！

また、長らく待ち望まれていたいくつかの機能が今月 SvelteKit に追加されました…それにはページエンドポイントも含まれています！これは load 関数の動作を変えるもので、これにより、ベーシックなページにおけるデータの取得や、POST レスポンスからのリダイレクト、404 やその他のエラーのハンドリングなどがより簡単になります。

他にも新機能やバグフィックスがございます、以下をご覧ください！

What’s new in SvelteKit

The docs are now searchable and multipage with type definitions and hoverable code examples - Check them out at svelte.dev/docs/kit
Page endpoints significantly decrease the boilerplate needed when loading a page (Issue, PR, Docs)
Application versioning and update detection support lets you determine what to do when a route fails to load after an app update (Issue, PR, Docs)
A new option in npm init svelte@next will now set up Playwright automatically for testing (PR)

Breaking Changes

The target option is no longer available. Instead, the init script hydrates its parentNode (#3674)
App-level types now live in the App namespace which allows you to type global types like Stuff or Session (#3670)
JSONString is now JSONValue (#3683)
createIndexFiles has been removed — it is now controlled by the trailingSlash option (#3801)
SvelteKit will no longer exclude root-relative external links from prerendering, which will cause 404s if these URLs are intended to be served by a separate app. Use a custom prerender.onError handler if you need to ignore them (#3826)

New in Language Tools

Svelte の language tool で、マークアップのプロパティへのアクセスが改善されました (105.12.0)。オートコンプリートに関するいくつかの既知の issue が解決します (#538 / #1302)

Community Showcase

Apps & Sites

SvelteStorm is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application
Supachat is a real-time chat app using Svelte and Supabase
Radicle is a peer-to-peer stack for building software together
The Making Known is a narrated encounter with posters designed by the Nazi German government to communicate with the occupied nations of Belgium, France, and Luxembourg during the Second World War
Svelte Kanban is a simple Svelte Kanban made in pure CSS
fngrng is a typing trainer focussed on accuracy over speed
Generative grids is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
LifeHash is a method of hash visualization that creates beautiful, deterministic icons
TypedWebhook.tools is a webhook testing tool for checking payloads, with automatic type generation
Speedskating is an animation widget to show olympic speedskating runs. Built with Svelte, D3 and regl
Web tail is a web application to view lines from file on local system or on remote server

SvelteKit のサイトを一緒に作るのに興味がありますか？ Svelte Society のサイトにコントリビュートしてみましょう！

Learning Resources

To Read

Svelte Components as Web Components by Matias Meno
Simple Svelte Routing with Reactive URLs by Bjorn Lu
Leveling Up my Sveltekit / Sanity.io Blog Content with Featured Videos and Syntax Highlighting by Ryan Boddy
How This Blog Makes the Most of GitHub by paullj
FullStack JWT Auth: Introducing SvelteKit by John Idogun
Svelte-Cubed: Adding Motion to 3D Scenes by Alex Warnes
Creating a RSS feed with Sanity and Svelte Kit by GHOST
How to use Svelte’s style directive by Geoff Rich
SvelteKit and the “Client pattern” by Julian Laubstein

To Watch

~~Shadow~~ Page Endpoints In Svelte Kit - Weekly Svelte by LevelUpTuts
Testing For Beginners (Playlist) by Joy of Code
KitQL - The native SvelteKit library for GraphQL by Jean-Yves COUËT

Libraries, Tools & Components

gosvelte は、Svelte が生成するページを Go 言語の HTTP サーバーでサーブし、Svelte コンポーネントにサーバーデータを props として送信する概念実証(proof of concept)です
svelte-ethers-store は ethers.js ライブラリを使用した、Svelte・Sapper・SvelteKit 向けの読み取り可能なストアのコレクションです
Fluid Grid は未来の web のための CSS グリッドシステムです
stirstack は、Svelte.js、TailwindCSS、InertiaJS、Ruby on Rails を組み合わせたオピニオネイテッドなフレームワークです。
OATHqr は 2FA/MFA と他の OAUTH 対応アプリを使用するためのセキュリティクレデンシャルを作るのに便利です。Aegis や YubiKey などのワンタイムパスワード認証アプリ向けのスキャン可能な QR コードを生成するのに使用します
svelte-GridTiles はドラッグアンドドロップでサイズ変更可能なタイルライブラリで、レスポンシブグリッド上に構築されています
Miscellaneous Svelte Components は、alex-knyaz がよく使用する様々な svelte コンポーネントのコレクションです
walk-and-graph-svelte-components は、svelte と js ファイルを走査し、依存関係(imports)を美しい JPG に描画する CLI node script です
Felte は Svelte 向けのシンプルに使えるフォームライブラリです
svelte-use-tooltip は tooltip を表示するための Svelte action です
persistent-svelte-store は汎用的に使える書き込み可能な永続化ストアです。Svelte の store contract に従って TypeScript でスクラッチで開発されました

なにか見落としがありましたか？ Reddit や Discord に参加してください、お話を伺いましょう。

また来月お会いしましょう！

What’s new in Svelte: 2022年2月

Dani Sandoval — Tue, 01 Feb 2022 00:00:00 GMT

Happy February, everyone! ここ1か月ほどで、Svelte と SvelteKit の開発が加速し、Reddit、GitHub、Discord で新しいコミュニティのルールができ、そしてかなりの数の素晴らしいアプリ、チュートリアル、ライブラリがリリースされました。

それでは見ていきましょう…

Highlights from the Svelte changelog

3.45.0 brought a new a11y warning a11y-no-redundant-roles, destructuring and caching fixes
3.46.0 added the much requested {@const} tag and style: directive
Check out 3.46.1 - 3.46.3 for fixes to the {@const} tag and style: directive, along with a number of fixes to animations
AST output is now available in the Svelte REPL

What’s new in SvelteKit

inlineStyleThreshold allows you to specify where inline stylesheets are inserted into the page (Docs, #2620)
beforeNavigate / afterNavigate lifecycle functions lets you add functionality before or after a page navigation (Docs, #3293)
Platform context can now be passed from adapters (Docs, #3429)
Hooks now have an ssr parameter in resolve to make it easier to skip SSR, when needed (Docs, #2804)
$page.stuff provides a mechanism for pages to pass data ‘upward’ to layouts (Docs, #3252)
Fallthrough routes let you specify where to route when an route can’t be loaded (#3217)

New configs

Content Security Policy (CSP) is now supported for increased security when using inline javascript or stylesheets (Docs, #3499)
kit.routes config allows you to customise public/private modules during build (#3576)
prerender.createIndexFiles config lets you prerender index.html files as their subfolder’s name (#2632)
HTTP methods can now be overridden using kit.methodOverride (Docs, #2989)

Config changes

config.kit.hydrate and config.kit.router are now nested under config.kit.browser (3578)

Breaking change

エンドポイント(endpoints) と Hooks で、Request オブジェクトと Response オブジェクトが使われるようになりました (#3384)

Community Showcase

Apps & Sites

timb(re) は、ライブミュージックプログラミング環境です
Music for Programming は、${task} 中に聴くことで脳を集中させやる気を起こすことを目的としてミックスシリーズです
Team Tale は、1つのストーリーを2人の執筆者がタッグを組むような形で書くことができます
Puzzlez は、数独と Wordle をオンラインでプレイできます
Closed Caption Creator は、Windows、Mac、Google Chrome で、あなたのビデオに簡単に字幕を付けられます
SC3Lab は、svelte-cubed and three.js を使用した実験的なコードジェネレーターです
Donkeytype は、Monkeytype にインスパイアされた、ミニマルで軽量なタイピングテストです
Above は、ADHD/自閉症の方のために作られたビジュアル・ルーティーン・タイマーです
base.report は、本格的な投資家向けのモダンなリサーチプラットフォームです
String は、あなたのスマートフォンをセキュアでポータブルなオーディオレコーダーに変身させ、個人的なメモ、家族の思い出、講義などを記録して共有するのを簡単にしてくれます
The Raytracer Challenge REPL は、シーンのレイトレーシングを設定してそれをレンダリングするライブ・エディター・インタフェースで、モダンなブラウザで動作します
awesome-svelte-kit は、SvelteKit の素晴らしい example のリストです
Map Projection Explorer は、様々な地図の投影法を調べ、その違いを明白にすることができます
Rubiks はルービックキューブのシミュレーターです
Pianisto は、SVG と ToneJS と多くの忍耐によって作られた、実際に動くピアノです

みんなで SvelteKit サイトに取り組んでみたいなら、Svelte Society のサイトへのコントリビュートにトライしてみてください!

Learning and Listening

To Read

Accelerating Svelte’s Development by Ben McCann
Storybook for Vite
Let’s learn SvelteKit by building a static Markdown blog from scratch by Josh Collinsworth
Building an iOS app with Svelte, Capacitor and Firebase by Harry Herskowitz
Mutating Query Params in SvelteKit Without Page Reloads or Navigations and Workaround for Bubbling Custom Events in Svelte by Mohamad Harith
How to build a full stack serverless application with Svelte and GraphQL by Shadid Haque
How to Deploy SvelteKit Apps to GitHub Pages
Creating a dApp with SvelteKit by Anthony Riley
Comparing Svelte Reactivity Options by Steve Lee

To Watch

Integrating Storybook with SvelteKit and Integrating FaunaDB with Svelte by the Svelte Sirens
SvelteKit Crash Course Tutorial by The Net Ninja
Svelte for Beginners by Joy of Code
SvelteKit For Beginners | Movie App Tutorial by Dev Ed
SvelteKit $app/stores by lihautan
Sveltekit - Get All Routes/Pages by WebJeda

To Listen To

New Year, New Svelte!? from Svelte Radio
So much Sveltey goodness (featuring Rich Harris) from JS Party
The Other Side of Tech: A Documentarian Perspective (with Stefan Kingham) from Purrfect.dev

Libraries, Tools & Components

threlte は Svelte 向けの three.js コンポーネントライブラリ
svelte-formify は、フォームの管理とバリデーションを行うライブラリで、デコレーターを使用してバリデーションを定義します
gQuery は、SvelteKit 向けの GraphQL Fetcher & Cache です
Unlock-protocol は、MetaMask、Firebase、paywall のユーザーのログインを支援するインテグレーションです
AgnosticUI は、クリーンな HTML と CSS で構成されている UI プリミティブのセットです
Vitebook は、高速で軽量な Storybook の代替で、Vite を使用しています
SwyxKit は、SvelteKit + Tailwind + Netlify を使用したオピニオネイテッドなブログ・スターターです。2022年に向け新しくなりました！
svelte-themes は、SvelteKit アプリのテーマを抽象化したものです
svelte-transition は、CSS クラスベースのトランジションを簡単にする Svelte コンポーネントです - TailwindCSS と一緒に使用するのが望ましいです
Svelte Inview は、viewport/親要素への要素の出入りを監視する Svelte アクションです
svelte-inline-compile は、Jest と @testing-library/svelte を使って Svelte コンポーネントをテストする際に、より快適な体験を得るための Babel transform です
@feltcoop/svelte-mutable-store は、immutable コンパイラオプションでもミュータブルな値を扱える Svelte ストアです
headless-svelte-ui は、Svelte アプリを構築する際に使用できるヘッドレスコンポーネント(headless components)集です

なにか見落としがありましたか？Svelte でアイデアを実現するのに助けが必要ですか？ Reddit または Discord にご参加ください。

また来月お会いしましょう！

Svelte の開発を加速する (Accelerating Svelte’s Development)

Ben McCann — Thu, 13 Jan 2022 00:00:00 GMT

Svelte は高速でリアクティブな Web アプリを少ないコード量で構築するためのフロントエンドフレームワークです。初めての方は、チュートリアルや examples をチェックし、感触を掴んでみてください。

Svelte は 5年前に立ち上がり、それから大きな発展を遂げました。2021年には利用者が2倍以上に増え、2つの調査で、最も愛されているフレームワーク、開発者が最も満足しているフレームワークにそれぞれ選出されました。Svelte は、The New York Times、Apple、Spotify、Square、楽天、Bloomberg、ロイター、IKEA、Brave、その他数え切れないほどの有名な企業で、ホビープロジェクトから組込みシステムのインタフェースまで、あらゆるものを動かすために使用されています。

開発者が難しい部分に悩むことなく、機能が充実したアプリケーションを Svelte で開発できるよう、SvelteKit というアプリケーションフレームワークを開発しています。SvelteKit は既に100万回以上ダウンロードされており、アーリーアダプターの方々の協力を得て早く stable 1.0 リリースに到達できるよう活動しております。

チームの拡大 (Scaling the team)

Svelte の作者である Rich Harris が Svelte にフルタイムで取り組むために Vercel にジョインしました。Rich の Svelte に対する関わりのレベルがさらに上がり、彼が Svelte を未来へと導く役目となったことに、私たちはとてもわくわくしています。

Svelte は大規模で献身的なコミュニティの活動によって支えられてきました。Svelte はパンデミックの期間中に多数のコアメンテナーが加わり、この1週間でも3名の方が加わりました。アルファベット順です:

benmccann - 2021年の大半において、SvelteKit の主要なメンテナー
bluwy - SvelteKit、vite-plugin-svelte、Vite のメジャーなコントリビューター
dominikg - vite-plugin-svelte の作者
dummdidumm - VS Code extension と svelte-check を含む、language-tools のメンテナー
ehrencrona - SvelteKit のコントリビューターであり、Svelte を業務で使用している
geoffrich - Svelte のサイトやドキュメントのアクセシビリティの改善を推進
GrygrFlzr - SvelteKit と Vite の両方のメンテナーというユニークなステータスを持つ
Halfnelson - svelte-native の作者
ignatiusmb - 常連の SvelteKit コントリビューターで、特に TypeScript サポートに貢献している
jasonlyu123 - VS Code extension と svelte-check を含む、language-tools のメンテナー
kaisermann - svelte-preprocess の作者
RedHatter - Svelte Devtools の作者
rixo - svelte-hmr の作者

Svelte では昨年から OpenCollective で寄付の受付を開始し、現在までに $60,000 以上の寄付を頂いており、本日 Cohere からも $10,000 の寄付を頂きました。この資金によって既存のメンテナーがより多くの時間を Svelte に費やすことができるように、または、パートタイムもしくは契約ベースで Svelte のサポートができるようになることを望んでおり、今後も検討を続けていく予定です。

パートナーシップ (Partnerships)

複数のメジャーなクラウドベンダーが、SvelteKit アプリケーションをどこでもシームレスにデプロイできるよう取り組んでいます。Rich の新しい仕事の結果として、SvelteKit は間もなく Vercel Edge Functions で実行できるようになります。Netlify は SvelteKit の Netlify adapter に大きなコントリビュートをしてくれて、また、SvelteKit をより良くサポートするために彼らの zip-it-and-ship-it ツールをアップデートしてくれました。最近の Cloudflare Pages の発表では、SvelteKit を初日のパートナーとして取り上げており、Svelte のメンテナーである pngwn と lukeed (後者は2021年に Cloudflare にジョイン) が書いた新しい adapter が使われています。Begin は SvelteKit の adapter を Architect アプリ向けに作成しました。そしてコミュニティメンバーは Firebase や Deno といった環境用の adapter にコントリビュートしており、JavaScript が動作する場所であればどこでも動作する SvelteKit の力を示しています。

また、SvelteKit ユーザーが発見した SSR の問題を解決するため、私たちは Vite チームと密接に連携しています。Vite は SvelteKit の開発者体験(developer experience)を実現してくれているビルドツールで、様々なフレームワークの代表者たちを含むコントリビューターのハードワークのおかげで、最近のリリースでは、 SvelteKit 1.0 のリリースブロッカーとして追跡していた問題点のほとんどを解決することができました。

コミュニティの成長 (A growing community)

SvelteSociety just hosted the 4th Svelte Summit — read a summary here — and Kevin Åberg Kultalahti is going full-time to lead SvelteSociety. In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the Svelte Radio podcast, the SvelteSociety YouTube channel, and the Svelte subreddit. SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of sveltesociety.dev, which has been redesigned and rebuilt in SvelteKit. In October Brittney Postma, Willow aka GHOST, Steph Dietz, and Gen Ashley founded Svelte Sirens, a group for women & non-binary community members and their allies.

Svelte Discord には毎週数百人の開発者が新たに加入し、Svelte についてチャットしています。お気づきかもしれませんが、最近、サーバーの一部のメンバーの名前が紫色になっています。そのメンバーはアンバサダーで、アンバサダーという役割は、コミュニティの重要メンバーを認知させ、急成長するコミュニティの要求を管理し助けるために作られました。Svelte のアンバサダーの方々はその親切さと貢献がよく知られており、そして Svelte がフレンドリーで歓迎されるコミュニティであるという評判を維持してくれていて、私たちはアンバサダーの方々に深く感謝しています。初期のアンバサダーはアルファベット順で以下の通りです。

また、SvelteKit のリポジトリで GitHub discussions を試しており、フィードバックが良好であれば Svelte organization の他のリポジトリにも導入する可能性があります。

注目ポイント (Things to watch)

SvelteKit は 1.0 に向けて進行中で、先週だけでも、client-only renderingの改善、routing hooks、子コンポーネントからレイアウトにデータを渡す機能 (例: <meta> タグの簡易な管理をサポート)などの主要な機能が追加されました。現在は、ストリーミングやファイルアップロードなどの機能に関する API デザインや、近々リリースされる Vite 2.8 へのコントリビューションなど、優先度の高い項目に取り組んでいます。

最近は SvelteKit に注力していますが、エコシステム全体も進化し続けています。Svelte 3.46.0 はここ最近の中では大きなリリースで、2つの大きな機能が追加されました: constants in markup と style directives です。

Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the blog via RSS or check monthly to be the first to get them.

What’s new in Svelte: 2022年1月

Dani Sandoval — Sat, 01 Jan 2022 00:00:00 GMT

Happy new year, Svelte Community! Svelte、SvelteKit、Language Tools、 Showcase にまたがって共有することがたくさんあります。Svelte を使って2021年を素晴らしい年にしてくれた全ての方に感謝します。今年も楽しみにしています 🚀

What’s new in SvelteKit

SvelteKit の @sveltejs/adapter-static に precompress オプションが追加され、アセットとページの brotli 圧縮が簡単にできるようになりました (#3079)
SvelteKit の Concurrency mode はページを並行してプリレンダリングするようになりました (#3120)。1.0.0-next.205 以降ではデフォルトで有効になります
CSS が自動的に JS より前にインクルードされるようになり、ページのパフォーマンスが向上します (d13efe)
新しい設定オプションによって service worker の登録を無効にできるようになり、カスタムで独自の登録を行うことができます (#2988)
SSR のルート分割(route-splitting)の導入 - モノリシックなビルドをより小さなピースに分割し、起動とルーティングのパフォーマンスを向上させます (#2931)
request.origin/path/query は request.url になりました - 設定とページの load 関数がシンプルになりました (#3126)
Vite 2.7 へのアップデート後、SvelteKit ユーザーから大幅なパフォーマンスの向上が報告されており、SSRでのサードパーティライブラリのロードも大幅に改善されました
設定ファイルの変更時、SvelteKit サーバーが自動的に再起動するようになりました (vite-plugin-svelte#237)

Other new bits from svelte/*

Svelte 3.44.3 is out with a few bug fixes in the binding and loop code
Svelte Language Tools has introduced support for the then/catch shorthands from Svelte 3.41 and TypeScript’s “go to” functionality (105.8.0 and later)
The Svelte REPL got a nice upgrade as well - letting you delete saved REPLs. Try it out by logging in at svelte.dev/apps

Community Showcase

Apps & Sites

Discover Twitter Spaces は Twitter Spaces を探すのに便利なツールです
Modern Fluid Typography Editor は CSS clamp を使用して美しい fluid typography の作成を手助けしてくれます
Unnwhiteboard は “ホワイトボード” 面接を行わない企業(またはチーム)のための job board です
Secret Santa は手軽さを重視して開発されたギフトコーディネートアプリです
LogSnag は、プロジェクトのイベントを通知し、タイムラインを提供することで、重要なことが起こったときにそれを記録することができます
Version 0.2 of Tangent はSvelteベースのノートアプリで、ベータ版になりました
Intl Explorer は Intl に対応する全てのフォーマッターの出力を見るためのツールです

A lot of work this month has gone into migrating the Svelte main website and Svelte REPL to live in the https://github.com/sveltejs/sites repository - including a brand new homepage for svelte.dev. Thanks to all the contributors who made this possible!

もし何か作業できる楽しいSvelteKitプロジェクトをお探しなら、Svelte Society サイトの書き直しに貢献できます 💅

Learning and Listening

To Read

Mutating Query Params in SvelteKit Without Page Reloads or Navigations by Mohamad Harith
Svelte for Reactaholics : A guide for React developers by Puru Vijay
Svelte’s lifecycle methods can be used anywhere and The many meanings of $ in Svelte by Geoff Rich
Vercel and Svelte: A Perfect Match for Web Developers by Darryl K. Taft
User-defined TailwindCSS Color Scheme with Svelte Stores by jeremy zaborowski
Ionic 6 + Svelte 🚀 by Raymond Boswel
What happened in #Svelte language tools this year by Simon H

To Watch

The Future of Svelte (Interview with Rich Harris) by Lee Robinson, Director of Developer Relations at Vercel
Svelte is becoming the go-to framework for Obsidian plugin developers
Sveltekit WordPress Headless Blog by WebJeda
Getting started with SvelteKit by Lihau Tan
Deploy a full-stack SvelteKit app on Cloudflare Pages by 1nf

To Listen To

Libraries, Tools & Components

svelte-headlessui は Headless UI コンポーネントライブラリの、アンオフィシャルなSvelte向けの完全移植版です
svelte-forms v2 がリリースされました - 作者はフィードバックを募集中です
Percival は宣言的なデータクエリと視覚化言語(visualization language)です
Svelte FlatList はモバイルフレンドリーで、シンプルで、カスタマイズ可能なドラッグメニューです
svelte-keyed はオブジェクトと配列向けの writable derived store です
Svemix は Svelte 向けの Remix です - Svelte コンポーネント/ルート内にサーバースクリプトを配置し、それがエンドポイントに変換されます

ショーケースに追加したいものがありますか？Svelte でアイデアを実現するのに助けが必要ですか？ Reddit または Discord にご参加ください！

また来月お会いしましょう！

What’s new in Svelte: 2021年12月

Dani Sandoval — Wed, 01 Dec 2021 00:00:00 GMT

SvelteKit が日に日に stable に近づいてきて、バグフィックス以外のコード変更の観点では取り上げられることがなくなってきました… そのため、今月のニュースレターでは、Svelte Summit Fall 2021 を取り上げます！

もしこの1か月間のバグフィックスを深く知りたければ、Svelte と SvelteKit の changelogs をそれぞれチェックしてみてください。

What happened at Svelte Summit?

もし Svelte Summit を見逃したなら、全ての配信を YouTube で視聴できますし、Discord の #svelte-summit チャンネルで要約をチェックできます。

ハイライトはこちら:

Rich Harris は Svelte の歴史ツアーを案内し、Vercel への入社を発表しました - 今後は Svelte のメンテナンスをフルタイムで行います！(20:00)
Steph Dietz は、なぜSvelteのシンプルな抽象化が、初心者から上級者まで、JavaScriptを学び使うのを(それもボイラープレートなしで)簡単にできるのか説明しました (29:00)
Kevin Bridges は、Svelte のリアクティビティロジックを ReflectiveCounter によって可視化し、必要に応じて “微調整” する方法を見せてくれました。プレゼンテーションの完全な “シラバス” Kevin のサイトで入手できます (42:55)
Mateo Morris は Primo を立ち上げました。これは静的サイトを構築しビルドするのに役立つ all-in-one の SvelteKit CMS です (1:12:34)
Guillermo Rauch は、Vercel の Svelte に対するコミットメント、Rich をチームに迎え入れたことが何を意味するか、今後の展望について説明しました… (1:21:54)
Geoff Rich は、Svelte のモーションとトランジションを、Webの全てのユーザーにとってアクセシブルなものになるように改善する様々な方法を紹介しました。講演のスライドと文字起こしの全文は Geoff のサイトから入手できます。 (1:32:30)
Dean Fogarty は、Svelteのメカニズムを使用し、データを storage に、または storage から変換するカスタムストアの様々なユースケースをデモしました。文字起こしとコードは Dean の GitHub から入手できます。 (1:43:06)
Kellen Mace は、コンテンツ制作者が WordPress を使い続けながら、フロントエンドで Svelte を活用し、素晴らしいユーザーエクスペリエンスを提供する方法についてシェアしました (1:49:30)
Ben Holmes は、”islands” アーキテクチャと、11ty + Slinkity によってどんな HTML テンプレートにも islands をもたらすことができる方法について説明しました (2:17:15)
Scott Tolinski は、React ベースの LevelUpTutorials を Svelte で書き換えて得た教訓と、”開発者の至福を発見” したことをシェアしました (3:16:35)
Svelte Sirens は、女性とノンバイナリーとその味方のための新しい Svelte コミュニティとして発表されました。最初のイベントは11月29日で、今後のイベントはすべて Svelte Sirens の website で見つけることができます (3:50:45)
Rich Harris は、SvelteKit を使ったライブラリ作成、開発時のパッケージへのリンクのより良い方法、SvelteKit が最新の JavaScript ライブラリ開発で役立つ方法について話しました (3:56:00)
Ken Kunz は、有限状態機械(及び svelte-fsm ライブラリ) によって、Svelte コンポーネントの状態などをより管理しやすくする方法について説明しました。講演の例は Ken の GitHub で入手できます。 (4:07:18)
Austin Crim は、Webでコードを学ぶことを楽器の演奏方法を学ぶことになぞらえています。学習者に早く成功体験を与え、現実世界のアプリを通して基礎を紹介することで、Svelte (及びその下地となる基礎) を学ぶことが簡単になります (4:21:50)
Jesse Skinner は、React (さらには jQuery) プロジェクトで Svelte コンポーネントを使用(及び再利用)する方法について説明し、レガシーアプリを未来に導きました (4:32:30)
Jim Fisk と Stephanie Luz は、Svelte サイトをより早く構築するための Plenti とそのテーマ設定ツールを紹介しました (4:59:00)
Evyatar Alush は、Vest というパワフルなバリデーションライブラリを使用することでよりよいフォームを作成(そして維持)することができると教えてくれました (5:08:55)
Dominik G. は、アイコンライブラリに関するフレッシュな見解をプレゼンしました - それはアプリケーションのバンドルサイズを減らし、Svelteアプリで Iconfy ライブラリ全てが使用できる、というものです (5:30:04)

このような素晴らしいイベントを開催して頂き、Kevin と Svelte Society のボランティアの皆様に感謝いたします！エキサイティングなことに、イベント終了後に Kevin が今後 Svelte Society にフルタイムで取り組むことが発表されました！この Svelte Society の YouTube Playlist で、個々のビデオに分割された全ての講演をチェックすることができます。

Svelte Summit にフィードバックがあれば、Kev が Svelte subreddit でフィードバックを募集しています 👀

Community Showcase

Apps & Sites

pixeldrain は無料で使えるファイル共有プラットフォームです
LifeHash は、Blockchain Commons から美しいビジュアルハッシュを生成します
simple-cloud-music は、モダンブラウザ向けの軽量なサードパーティーの NetEase cloud ミュージックプレーヤーです (Chrome でのみ動作するようです)
palette.rocks はコントラストチェック機能を備えたカラーパレットジェネレーターです
Kadium は、YouTubeチャンネルのアップロードを常に把握するためのアプリです
Multi-Monitor Calculator は、マルチモニターのセットアップを計画するためのツールです
Your Home は、Facebook のプライバシー設定のインタラクティブなオーバービューです
Svelte Crush は、Candy Crush スタイルの match-3 ゲームです
100.000 Corona deaths in Germany は、Spiegel Gesundheit のために作られたビジュアライゼーションです

何か取り組める Svelte プロジェクトをお探しですか？ Web における Svelte のプレゼンスを高めることに興味がありますか？ もし Svelte Society を SvelteKit に置き換えることに貢献したいなら、open issue のリストをチェックしてみてください。

Videos, Blogs and Podcasts

Libraries, Tools & Components

svelte-cubed は Svelte 向けの Three.js コンポーネントライブラリです - Rich Harris によって開発され、Svelte Summit Fall 2021 の彼の講演でプレゼンされました
svelte-fsm は、小さく、シンプルで、表現力があり、プラグマティックな有限状態機械(Finite State Machine (FSM))ライブラリで、Svelte に最適化されています
bromb は、Web サイトや Web アプリ向けのフィードバックウィジェットで、小さく、インテグレーション/セルフホストが簡単です
Spaper は Svelte 向けの PaperCSS コンポーネントのセットです
svelte-intl-precompile は Svelte 向けの i18n ライブラリで、ビルド時に翻訳を解析します
svelte-preprocess-svg は Svelte コンポーネントにある inline svg を自動的に最適化し、ファイルサイズを減らしより良いパフォーマンスをもたらします
svelte-subcomponent-preprocessor は、Svelte ファイルに1つ以上のコンポーネントを書くことができるようにしてくれます
svelte-pdfjs は、Svelte の PDF viewer コンポーネントのおおまかな実装です
svelte-inview は、viewport/親要素への要素の出入りを監視する Svelte action です
sveltekit-adapter-wordpress-shortcode は、アプリを wordpress shortcode にする SvelteKit のアダプター(adapter) です
svelte-websocket-store は、websocket をバックエンドにした Svelte ストアです
Svelte Auto Form は、柔軟性よりも使いやすさを重視した、高速で楽しいフォームライブラリです
set-focus は、<a> や <button> 要素がマウントされるとすぐに focus をセットする Svelte action で、なんらかのケースやテストに便利です

SvelteKit に関するアイデアをお持ちですか？Svelte リポジトリの新しい GitHub Discussions をチェックしてみてください。また、Reddit や Discord にもご参加いただけます。

また来月来年お会いしましょう！

What’s new in Svelte: 2021年11月

Dani Sandoval — Mon, 01 Nov 2021 00:00:00 GMT

SvelteKitの完成度が80%を超え、GitHubで5000スターを超え、Sapperよりも多くの利用者がいる現在、SvelteKitを試すには絶好の機会です。コミュニティの多くの人が試しているので、今月はかなり大きなショーケースになっています…。

また、11月20日には、世界各国のスピーカーが参加するSvelte Summitも開催されますので、お見逃しなく。お住まいの地域で開催されるウォッチパーティーにもご注目ください👀

続いては新機能です！

New in Svelte and SvelteKit

svelte.dev now runs on SvelteKit alongside sveltesociety.dev. svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKit
A new compiler option, enableSourcemap, provides more control over the compiler output for JS and CSS sourcemaps (3.44.0). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables in .svelte templates (See sveltejs/kit#720 and sveltejs/vite-plugin-svelte#201)
The Svelte Language Tools now support reading the configuration of the VS Code CSS settings (#1219)
vite-plugin-svelte added a new experimental.prebundleSvelteLibraries option that makes it much faster to load Svelte libraries with many components like icon libraries and UI frameworks. The option can be set in the root of svelte.config.js. Please test it out and give us feedback!
SvelteKit will only route endpoints on the client, unless marked as rel="external" - reducing the size of the client JS and making it easier to refactor the router in the future (2656)
SvelteKit no longer supports Node 12 (2604)
SvelteKit was upgraded from Vite 2.6.0 to Vite 2.6.12 fixing an issue where Vite would corrupt the Svelte runtime (https://github.com/vitejs/vite/issues/4306). It also included two fixes from the SvelteKit team to avoid or make diagnosing Vite issues in SvelteKit templates easier (https://github.com/vitejs/vite/pull/5192 and https://github.com/vitejs/vite/pull/5193). Vite 2.7 is currently available in beta with additional fixes for SSR

To see all updates to Svelte and SvelteKit, check out the Svelte and SvelteKit changelog, respectively.

Community Showcase

Apps & Sites

Tangentは、クリーンでパワフルなMac & Windows用のメモアプリです。
The Puddingは、文化の中で議論されているアイデアをビジュアル・エッセイで説明するデジタル出版物です - SvelteKitで再構築されました。
Power Switcherは、エネルギー源がよりクリーンなものに移行していく中で、スイスの電力供給の発展をインタラクティブに紹介しています。
Subliveは、世界中のミュージシャンを低レイテンシーかつ高品質なオーディオネットワークで繋ぎ、新しい音楽の作り方を提案します。
Vibifyは、Spotifyの再生履歴を利用して、音楽の中に隠れたプレイリストを見つけることができます。
Browse Marvel Unlimited by YearはSveltekitサイトで、Marvel Unlimitedで入手可能な発行物を年ごとに探すことができます。
Filesは、Windows用の最新のファイルエクスプローラーです。SvelteKitで再構築された新しいサイトを公開しています。
lil-hashは、覚えやすく、話しやすい短縮URLを生成するシンプルなURL短縮ツールです。
PWA Havenは、OSのネイティブアプリを置き換える、小さく、速く、シンプルなPWAのコレクションです。
DottoBitは、URL共有機能を備えたマルチカラーの16bitドローイングプログラムです。
Former Fast Document for Printは、美しいデザイン、国際言語対応、自動計算機能を備えた請求書作成ソフトです。
Helvetikonは、スイス・ドイツ語のコミュニティが運営する辞書です。
Palitra Appは、検索ベースのカラーパレットジェネレータです。

Podcasts Featuring Svelte

Svelte Radioでは、先日リリースされたSvelte Summitのウェブサイトを支える技術や、その他の楽しいことをたくさん紹介しています！
PodRocketは、LogRocketのポッドキャストで、Rich HarrisとともにSvelteについて話しています。
また、PodRocketではさらに、Elder.jsについてNick Reeseとともに掘り下げています。
PodRocket also dove deep Nick Reeseと一緒にElder.jsに導入しました。
Web Rushとリッチ・ハリスが、SPAとMPAの違い、サーバーレンダリングが果たす役割、クライアントサイドハイドレーションとは何か、SPAやMPAを開発するための最新ツールの状況などについて語ります。
devtools.fmでは、魅力的なデータビジュアライゼーションの開発とツール構築の将来について、リッチ・ハリスと語り合っています。

Educational Content

Have Single-Page Apps Ruined the Web? 今年のJamstack Confで、リッチ・ハリスが論争の的となった質問に答えました。
Svelte vs SvelteKit - What’s The Difference? LevelUpTutsでは、この2つのプロジェクトの関係を説明するクイックガイドを提供しています。Scott Tolinski氏によるSvelteに関するガイドの残りの部分は、彼の新シリーズである“Weekly Svelte”でチェックできます。
WebJedaのSvelteKit Hooksシリーズは、今月も第3回「クッキーセッション認証」をお届けします。
Writing Context Aware Styles in a Svelte Appは、親に動的に適応することができる自己完結型のコンポーネントを書くためのガイドです。
A Beginner’s Guide to SvelteKitでは、SvelteとSvelteKitの両方を初心者向けに説明し、架空のユーザーのプロフィールページを表示するシンプルなウェブアプリを構築しています。
Svelte vs React: Ending the Debateは、昔からある議論を歴史的に捉えたものです。
Svelte Snacks | Custom Events for Modal Actionsでは、Svelteの便利なカスタムイベントシステムのしっかりとした実装を紹介しています。
What Svelte’s accessibility warnings won’t tell youでは、Svelteのa11y警告がどのように機能するのか、また、アプリケーションをアクセシブルにするために警告をあてにしてはいけない理由を説明しています。

Libraries, Tools & Components

svelte-adapter-azure-swは、動的なサーバーレンダリングにAzure関数を使用してAzure Static Web Appを作成するSvelteアプリ用のアダプタです。
Inlangは、SvelteKitに対応したローカリゼーション・国際化ツールキットです。
svelte-translate-tools ビルド時にSvelteアプリの翻訳ファイルを抽出/生成/コンパイルします。
@egjs/svelte-infinitegridでは、サイズの異なるカード要素で構成された様々なグリッドを実装することができます。
svelte-reactive-css-preprocessは、コンポーネントの状態が変化するたびに、css変数の値を簡単に更新することができます。
Sveltegenは、アクション、コンポーネント、ルートをシンプルかつ簡単に作成するためのCLIです。
svelte-advanced-multistep-formは、レンダリングされるコンポーネントにスタイルを渡すフォーム要素をラップするのに役立ち、また、各フォームステップを順序立ててスタイリッシュに表示します。
gQueryは、SvelteKit用のGraphQL Fetcher & Cacheです。
date-picker-svelteは、Svelte用の日付と時間のピッカーです。
TwelveUIは、アクセシビリティを内蔵したSvelteのコンポーネントライブラリです。
svelte-outclickは、outclickイベントを提供することで、要素の外側でクリックをリッスンすることができるSvelteコンポーネントです。
svelte-zero-apiでは、SvelteKit APIをクライアント関数のように使用することができます - TypeScriptをサポートしています。
svelte-recaptcha-v2は、Svelte SPA、SSR、sveltekitの静的サイト用のGoogle reCAPTCHA v2の実装です。
Svelte Bodyは、SvelteKitやRoutifyと連携して、ルートのボディにスタイルを適用することができます。
svelte-debug-consoleは、Svelte SPA、SSR、sveltekitの静的サイトのためのdebug.jsの実装で、デバッグ文をブラウザ上で確認することができます。
SVEOは、SvelteKitページのメタデータを宣言するための、依存性のないアプローチです。
@svelte-drama/suspenseは、Reactの<Suspense>のコアアイデアを実装したSvelteコンポーネントです。また、SWR for Svelteをチェックすると、リフェッチがさらに簡単になります。
sveltekit-adapter-browser-extensionは、アプリをクロスプラットフォームのブラウザ拡張にするSvelteKit用のアダプタです。

コミュニティサイト sveltesociety.devでは、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。

もっと更新情報をお探しですか？ RedditまたはDiscord にご参加ください！

What’s new in Svelte: 2021年10月

Dani Sandoval — Fri, 01 Oct 2021 00:00:00 GMT

やぁみんな👋 Svelteブログに「What’s new in Svelte」を掲載し始めてから1年が経ちました。いつも読んでくださっている皆さん、そして毎月投稿してくださっている皆さんにこの場を借りて感謝の気持ちをお伝えしたいと思います。メンテナから、DiscordやRedditに投稿してくれる皆さんまで、Svelteコミュニティを素晴らしいものにするための努力を目の当たりにするのは素晴らしいことです。

皆さん、これからもがんばっていきましょう！それでは、今月のニュースに飛び込んでみましょう…

New around Svelte

Svelteのエクスポートマップに新たな機能が追加され、SSRのライフサイクル関数のno-opバージョンが公開されるようになりました (Svelte 3.43.0)
src属性を持つカスタムコンポーネントが、svelte-nativeのビルドを崩さなくなりました (Svelte 3.42.4)
TypeScriptプラグインを有効にしていないSvelteプラグインのユーザは、TypeScriptプラグインを有効にするよう促されるようになりました。TypeScriptプラグインはSvelteファイルを取り扱うためのインテリセンスを追加し、TypeScriptとJavaScriptのファイルを強化します。使用されている方は、フィードバックをお願いします (Svelte extensions 105.4.0)
イベントモディファイヤがインテリセンスに追加され、オートコンプリートされたりホバーで情報が表示されたりするようになりました (Svelte extensions 105.4.0)
Svelteバージョン3.39以降とsvelte-preprocessバージョン4.9.5以降を使用している場合、TypeScriptユーザは型のインポートと値のインポートを厳密に分ける必要がなくなりました。つまり、import type { MyInterface } from './somewhere'; import { myValue } from './somewhere'の代わりに、import { MyInterface, myValue } from './somewhere'と書くことができるようになりました。主にこの機能を実装したコミュニティメンバの@SomaticIT氏に厚く感謝します！

機能やバグフィックスの全リストは、SvelteのChangelogをご覧ください。

SvelteKit Updates

先月も100近いPRがコミットされましたが、まだまだやるべきことはたくさんあり、SvelteメンテナはSvelteKitを1.0にするための支援を求めています。Antonyは、この問題に関する最近のコメントの中で、このように言っていました:

もし自分がコントリビュートできないほどのドシロートだと思うなら（そんなことはありませんが）、テストを追加するか、追加したい機能のテストを書いてから追加してください！小さく始めて、その方法でコードベースを学びましょう。

貢献したい方は、「help wanted」とラベル付けされた1.0へのマイルストーンのIssueのいずれかに取り組むことをご検討ください。

今月のSvelteKitの注目すべき改善点は…

サービスワーカーが$libエイリアスを使用してファイルにアクセスできるようになりました (#2326)
SvelteのライブラリがViteの設定なしですぐに動作するようになりました (#2343)
package exportsフィールドの改善 (#2345と #2327)
[重要]prerender.pages設定オプションの名称がprerender.entriesに変更されました (#2380)
フックからのBodyの型付けを可能にするために、新しいジェネリック引数が追加されました (#2413)
packageコマンドの実行時にpackage.jsonにsvelteフィールドが追加されるようになりました (#2431)
[重要]load関数のcontextパラメータがstuffに改名されました (#2439)
adapter-nodeを使ってカスタムサーバを構築するときのために、entryPointオプションを追加しました (#2414)
vite-plugin-svelteは、SvelteコンポーネントのTypeScript、PostCSS、Scssなどの自動プリプロセッサにViteを使用するuseVitePreprocessのサポートを改善しました (#173)

SvelteKitのすべての更新を確認するには、SvelteKitのChangelogをご覧ください。

Community Showcase

Apps & Sites

radiofranceは、ウェブサイトをSvelteKitに移行しました
FLAYKSは、SvelteKit、Sanity、Anime.jsで作られたFélix Péaultのポートフォリオサイトです
hirehiveは、求職者と仕事のトラッキングサイトです
Microsocialは、実験的なPeer-to-Peerソーシャルプラットフォームです
Dylan Ipsumは、lorem ipsumをBob Dylanの歌詞に置き換えるランダムテキストジェネレータです
Chip8 Svelteは、CHIP8 TypeScriptの上に構築されたCHIP-8エミュレータのフロントエンドです

**Svelteのプロジェクトをお探しですか？ウェブ上でのSvelteの存在感を高めることに興味がありますか？**SvelteKitでのSvelte Societyの書き換えに貢献したい方は、オープンなIssueのリストをチェックしてください。

Podcasts Featuring Svelte

Syntax Podcast: From React to SvelteKit ReactからSvelteKitへ Level Up TutorialsをReactからSvelteKitに移行した理由、方法、利点、注意すべき点などについて、ScottとWesが語ります！
Web Rush Podcast: Svelte Tools and Svelte Society Kevin Åberg Kultalahtiが、Svelte Societyとは何か、Svelteに期待していること、製品にとってドキュメントがいかに重要であるか、などなどについて語ります
Svelte: The Compiled Future of Front Endでは、コンポーネントベースのフロントエンドの歴史と、コンパイラがどのようにすべてを変えるかについて詳しく説明しています
Svelte Radio: Contributing to Svelte with Martin ‘Grygrflzr’ Krisnanto Putra Grygrflzrがメンテナになるまでの道のりや、React、Vite、その他多くのことについての見解を語っています
Svelte Radio: Routify 3 with Jake and Willow Svelte RadioクルーがRoutifyのメンテナと一緒に、リリースされたばかりのRoutify 3について語ります
JS Party: 1Passwordがページ内提案にSvelteを使用していることに言及している、The Changelog’s JS Partyの最新エピソードです

Educational Content

How I built a blog with Svelte and SvelteKitは、Svelte、SvelteKit、プログレッシブ・エンハンスメントについて、コード例を交えて紹介しています
I built a decentralized chat dappは、GUNのような一般的なweb3技術を使って、分散型ウェブアプリ（dapp）を構築する方法についてのチュートリアルです
Writing a Svelte Store with TypeScriptは、TypeScriptを使ってSvelteストアを書くことについて、深く掘り下げています
How Svelte scopes component stylesでは、クラスを使用やより複雑なCSS指定子を使用したスコープの作り方について説明しています。
SvelteKit Hooksでは、Sveltekitでのhooks.jsの使用方法を説明しています。終わったら、パート2をご覧ください
An early look at SvelteKitは、Infoworld社がSvelteKitの機能とオンボーディングについて解説した記事です

Libraries, Tools & Components

sveltekit-netlify-cmsは、Netlify CMSで使用するために構成されたSvelteKitスケルトンアプリです
SvelteFireTSは、Fireship.ioにインスパイアされた、SvelteKit + TypeScript + Firebaseライブラリです
stores-xは、vueXのようにSvelteストアを使用することができます
sveltekit-snippetsは、SvelteKitとVanilla Svelteの共通パターンのスニペットを提供するVSCode拡張です
svelte-xactorは、xactorマシンをストアコントラクトを実装したグローバルストアに簡単に変換することができるミドルウェアです
vite-plugin-pages-svelteは、ファイルシステムベースの自動ルーティングのためのviteプラグインです
sveltioは、proxy-stateライブラリであるvaltioのSvelteラッパーです
svelte-transition-classesは、CSSクラスを追加および交換するためのSvelteカスタムトランジションです
Svelte-Boring-Avatarsは、人気の高いReactプロジェクト「Boring Avatars」のSvelte移植版です
Svelte DataTablesは、データを簡単に表形式で表示できるJavaScriptライブラリDataTableをSvelteプロジェクトに移植したものです
focus-svelteは、依存関係をもたないSvelte用のフォーカストラップです
filedrop-svelteは、Svelte用のファイルドロップゾーンのアクションとコンポーネントです

コミュニティサイトsveltesociety.devには、Svelteエコシステムのテンプレート、アダー、アダプタが多数掲載されていますので、ぜひご覧ください。

Before you go, answer the call for speakers!

Svelte Summit Fall 2021（2021年11月20日開催）では、講演者を募集しています。10月30日までにトークプロポーザルを提出してください…どなたでも発表や参加が可能です。

More info on the sessionize site

サミットまで待てませんか？RedditやDiscordにご参加ください！

What’s new in Svelte: 2021年9月

Dani Sandoval — Wed, 01 Sep 2021 00:00:00 GMT

今月は、SvelteがStackOverflowの最も愛されているWebフレームワークに選ばれたり、Tan Li Hau氏がSvelteのYouTubeチャンネルについてSvelte Radioに出演したり、SvelteKitが1.0リリースに向けてさらに進化したりしました。

New in Svelte

use:actionsが<svelte:body>で使用できるようになりました。(3.42.0)
HTMLElement, SVGElement (3.42.2) および BigInt (3.42.3) はグローバルに追加されました。
3.42.2 では以下の点が改善され、Svelteの出力に含まれるコードが少なくなりました。
- クラスおよびスタイル属性で空白が折りたたまれるようになりました。
- ハイドレートを含んだコンポーネントは、コンポーネント内に存在する要素の種類を作成する際にヘルパーのみに依存するように更新されました。
スケーリングが flip アニメーションで考慮されるようになりました。 (3.42.2)
<select> の中のすべての <option> が、バインドされた値がそれらのどれにも一致しないときに、選択解除されるようになりました。 (3.42.2)

機能やバグフィックスの全リストは、Svelte changelogをご覧ください。

SvelteKit Updates

SvelteのメンテナはSvelteKitを1.0にする手助けを探しています 1.0のマイルストーンにあった100以上の問題を解決しました。残りは数十個しかありませんが、そのリストを少しでも短くするために手を貸していただきたいと思っています。ご協力いただける方は、1.0 milestone issuesのいずれかの作業をご検討ください。

この1か月間は、あらゆる問題を解決することに注力し、100件以上のPRを統合しました。いくつかの新機能も追加されました…

SvelteKit will now detect if a prerendered app is trying to access a query parameter and return an error instead of failing silently (#2104)
adapter-node now lets you add the Kit middleware to your own server for use with other middleware. You can also add middleware in dev mode with more improvements to come in this area
The new sequence helper lets you chain together multiple handle calls
A new handleError hook gives you the option to send data to an error tracking service, or to customise the formatting before printing the error to the console.
adapter-node can now listen on socket path (#2048)

To see all updates to SvelteKit, check out the SvelteKit changelog.

Community Showcase

Apps & Sites

macos-web by @puruvjdev は、Svelteを使って、一から作り直しました。詳細はこのTwitter スレッドをご覧ください。
Brave Search は、Svelteを使用しています。
exatorrent は、GoとSvelteで書かれた、セルフホスティング可能で使いやすく、軽量で機能豊富なtorrentクライアントです。
json2TsTypes は、JSONをTypeScriptのTypes/Interfacesに変換するシンプルなツールです。
Histogram.dev は、CSVの各機能のヒストグラムを生成します。
cybernetic.dev は、Svelteの学習中に行われたデータ中心のUI実験のコレクションです。
LunaNotes は、YouTube動画のメモを取るのに役立つChrome拡張機能です。
theia.gamesに内蔵された3D環境エディタで、Svelteに組み込まれたメニューでVRの世界を作ることができます。
Ferrum は、Mac、Windows、Linuxで利用可能な音楽ライブラリとプレーヤーです。
Fluid Earth は、地球の大気や海洋を可視化するためのインタラクティブなWebGLアプリケーションです。

作業するSvelteプロジェクトを探していますか？ SvelteKitでのSvelte Societyの書き換えに貢献したい方は、the list of open issuesをご覧ください。

Educational Content

Tauri with Standard Svelte or SvelteKit は、クロスプラットフォームのハイブリッドデスクトップアプリケーションを開発するための新しい軽量フレームワークであるTauriでSvelteをセットアップする方法を説明しています。
Svelte - Web App Development Reimagined [An Intro to Svelte] は、goto; conferenceでの素晴らしいイントロトークです。
LevelUpTuts - Even More 5 Things I Like More In Svelte Than React は、リファレンス(必要ありません) 、メタタグなどのSvelteのアプローチを紹介しています。
State Management in Svelte Applications は、Svelteアプリケーションの状態を管理するために、Svelteの状態管理ストアを使用する方法についてのチュートリアルです。
Migrating from Sapper to SvelteKit は、ShipBitのSapperからの移行の評価と振り返りです。

Libraries, Tools & Components

svelte-stripe-js は、あなたのSvelteプロジェクトにStripeを追加するために必要なすべてです。100% SvelteKit互換
svelte-steps は、Svelteで書かれたカスタマイズ可能なステップコンポーネントです。
simple-optics-module は、幾何学的光学の実験と教育のための、オンラインのオープンソース光学ツールです。
inlang は、SvelteKitアプリ用の国際化(i18n)ツールです。
Sveno は、ReactコンポーネントをSvelteコンポーネントに変換するコンポーネントトランスファイラーです。
svelte-useactions は、アクションをコンポーネントに渡すための完全に型付けされたライブラリです。
Svelte-Element-Query は、322bのエレメントクエリ用のライブラリ/アクションです。
svelte-meta-tags は、SvelteプロジェクトでSEO管理を容易にするプラグインです。
svelte-domtree では、DOMを視覚化することができます。Chrome DevToolsのDOMツリーに似ています。
クロスフレームワークの状態管理ライブラリであるDiffx は、Svelteのサポートが追加されました。
svelte-ionic-starter は、ライブリロードとiOS/Androidビルドターゲットを備えたSvelte + Ionic + CapacitorJSアプリ用のプロジェクトテンプレートです。
demo-sveltekit-sanity は、オープンソースのReactCMSであるSvelteKitおよびSanityのスターターキットです。

コミュニティサイト sveltesociety.dev では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。

See you next month!

もっと更新情報が欲しいですか？ Reddit or Discord に参加してください！

What’s new in Svelte: 2021年8月

Dani Sandoval — Sun, 01 Aug 2021 00:00:00 GMT

Changelog（JS Party Ep. 182）から Svelte Radio（エピソード 29 と 30）まで、今月は Svelte のことを話さずにはいられなかったようですね。また、Svelte では、shadow DOM のサポートと、新たに export や await 機能が追加されました。

New in Svelte

7月は、未解決の PR の数を減らすために本当に努力し、Svelte 3.39.0、3.40.0、3.41.0がリリースされたように、Svelte コアリポジトリにとって2019年後半から最も活発な月でした。大量のバグ修正に加えて、以下の新機能が追加されました。

イベント修飾子 |trusted は、イベントが呼び出される前に、そのイベントが信頼できるかどうかをチェックすることができます（#6137）。
SvelteKit SSR の改善作業をサポートする新しい svelte/ssr パッケージです（#6416）。
TypeScript ファイルの前処理を改善するための新しい errorMode コンパイラオプション（#6194）。
コンポーネント作成時に target として ShadowRoot を指定できるようになり、Svelte コンポーネントを shadow DOM 内でレンダリングできるようになりました（#5869）。
export { ... } from（#2214）、export let { ... } =（#5612）と {#await ... then/catch}（#6270）の構文がすべて Svelte コンポーネントでサポートされました。

機能とバグ修正の全リストは、Svelte の Changelog をご覧ください。

SvelteKit Updates

prerender.force が prerender.onError になり、ビルドに失敗するエラーと失敗しないエラーを微調整できるようになりました（#2007）。
esbuild の設定が SvelteKit adapters で使用できるようになりました（#1914）。
一般的な設定エラー（#1910）やコンパイラエラー（#1827）のエラーメッセージがより分かりやすくなりました。
対象となるホストが SvelteKit アプリケーションと同じか、より特定のサブドメインである場合にのみ Cookie がパスされるようになりました（#1847）。
より良い imports のために、パッケージング時に index.js の exports がディレクトリの exports に変更されるようになりました（#1905）。
Vite.js の mode が $app/env から公開されるようになりました（#1789）。
全般的に types が向上（#1778、#1791、#1646）。

SvelteKit のすべてのアップデートを確認するには、SvelteKit の Changelog をご覧ください。

Features & bug fixes from around svelte/*

言語ツールが “Workplace Trust” 機能をより適切にサポートするようになりました（VS Code の使用において）。
svelte2tsx では、JS 出力の修正によって、ambient タイプの宣言の名前が変更され、将来的に宣言が衝突しないようになりました。ユーザーは ambient タイプの定義を自分で提供できることが期待されています。
Sapper は v0.29.2 をリリースしました。このバージョンでは、正規表現のルート、ディレクトリ要求時のステータスコード、ユーザーが base タグを提供していない場合の exports を修正しています（changelog）。

Community Showcase

Apps & Sites

Parsnip は、モバイルファーストのプログレッシブウェブアプリで、家庭料理を学ぶのに役立ちます。詳しくは、Reddit の記事をご覧ください。
Central Bank Digital Currency (CBDC) tracker は、世界各国でどのようにデジタル通貨を導入しているかを記録したサイトです。
Svelte Commerce は、Sveltekit をベースにした、Eコマースのための先進的なフロントエンドプラットフォームです。
neovimcraft は neovim プラグインに特化した SvelteKit 製サイトです。

Svelte のプロジェクトをお探しですか？ウェブ上での Svelte の存在感を高めることに興味がありますか？ SvelteKit での Svelte Society の書き換えに貢献したい方は、未解決の Issue のリストをチェックしてください。

Educational Content

How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust は、Cloudflare 社の Svelte メンテナおよび Developer Advocate である Luke Edwards 氏のブログ記事です。
How to Create a Blog with SvelteKit and Strapi は、Strapi の Aarnav Pai 氏による段階的なチュートリアルです。
Sveltekit Markdown Blog は、WebJeda 氏による YouTube のチュートリアルシリーズです。
Using Custom Elements in Svelte Geoff Rich 氏による Custom Elements の紹介です。
learn / graphql / svelte は、Hasura の2時間で学べる無料の GraphQL 講座です。
How to add Magic Link to a SvelteKit application は、もっとも知られているパスワードレスのログインパターンを解説しています。

Libraries, Tools & Components

Svelte-Capacitor は、v2.0.0 をリリースしました。Svelte と Capacitor を使用して、ネイティブに近いパフォーマンスで iOS と Android 用のハイブリッドモバイルアプリケーションをより簡単に構築することができます。
svelte-remixicon は、Remix Icon をベースにした Svelte 用のアイコンライブラリで、2000種類以上のアイコンが収録されています。
SveltePress は、SvelteKit 上に構築されたドキュメントツールです。
Svelte Starter Kit は、Supabase を利用した Auth と User Profiles により、Svelte を迅速に立ち上げるためのボイラプレートです。
Kahi UI はダークモードが組み込まれた Svelte 初の UI Kit です。
typesafe-i18n は、 TypeScript や JavaScript プロジェクトのための、独断的で、完全に型安全な軽量ローカリゼーションライブラリで、外部依存はありません。

コミュニティサイト sveltesociety.dev では、Svelte エコシステム全体からの templates、adders、adapters をご覧いただけます。

See you next month!

もっと更新情報が欲しいですか？ Reddit or Discord に参加してください！

What’s new in Svelte: 2021年7月

Dani Sandoval — Thu, 01 Jul 2021 00:00:00 GMT

北半球が暑くなる中、 Svelte はパフォーマンス向上やバグ修正、 TypeScript のサポート強化、エコシステム全体から多くの新しいコンポーネントやツールの追加などで涼しさを保ちました。ちょっと覗いてみましょう。 👀

New in SvelteKit

adapter-node gzip と brotli を使ってアセットを事前に圧縮するようになりました。 (#1693)
TypeScript トランスパイルのサポートが svelte-kit package ツールに追加されました。 (#1633)
adapter-node デフォルトのキャッシングを改善しました。 (#1416)
Rollup の出力オプションを設定可能に。 (#1572)
HMR での SSL の使い方を修正。 (#1517)

Features & bug fixes from around svelte/*

Svelte 3.38.3 (released June 22) には、ハイドレーションの最適化、バブリングイベントでの this の保存など、多くのパフォーマンス改善とバグ修正が含まれています。
最新の Svelte Language Tools のリリースでは、コンポーネント外部での prop 名変更サポート、 PostCSS の構文文法、 Svelte ファイルから型定義を作成するのに使用できる svelte2tsx の .d.ts 出力ターゲットが追加されました。
また、 Svelte Language Tools では、 TypeScript のサポートを強化するための待望の実験的機能が追加されました。 - コンポーネントのイベントやスロットに明示的に型を付与することや、ジェネリックを使用することなどです。詳細は the RFC をご覧いただき、お使いの方は this issue にフィードバックをお願いします。
svelte-scroller 2.0.7 では、 quality-of-life をいくつか修正しました。初期の幅に関するバグを修正し、index をより控えめに更新しました。

Coming soon to Svelte

マークアップにおける定数 - (RFC) ローカル定数を定義する新しい {@const ...} タグを追加しました (PR)

Community Showcase

Apps & Sites

SvelteThemes svelte, sveltekit, elderjs, routify などを使用して構築された Svelte テーマとテンプレートの厳選されたリストです。
Beatbump は、Svelte/SvelteKit を用いて作成された、 YouTube Music 代替のフロントエンドツールです。
Sveltuir はギターのフレットボードを覚えるのに役立つアプリです。

Educational Content

Svelte Radio: A Jolly Good Svelte Summer は、 Svelte の最新情報や Svelte Radio 1周年を祝うトークです。
Class properties in Svelte は、 React から Svelte に乗り換える開発者のために、 class の力を再確認します。
Sveltekit Tutorial for Beginners は、 WebJeda による SvelteKit を学ぶためのビデオプレイリストです。
How To Cache Dynamic Pages On Demand With A Service Worker In SvelteKit は、 SvelteKit でオンデマンドキャッシングに使用されるサービスワーカーの力を説明します。
Vue vs Svelte: Comparing Framework Internals は、 Vue と Svelte の違いを内側から深く掘り下げます。
Setting up a development environment for SvelteKit with Docker and Docker Compose は、どんなデバイスでコードを実行しても、再利用可能な開発環境を作るために Docker を使用する方法を説明します。
Scalable Scripts は今月、 Docker 化された Svelte アプリを AWS, Azure, Google Cloud にデプロイする方法を説明した3つのビデオを公開しました。
Render Katex with Svelte from zero to hero は、 Svelte プロジェクトに Katex を導入する方法を紹介します。
Using Custom Elements in Svelte では、 Svelte サイトで custom elements を使用する際に注意すべき点を紹介しています。

Libraries, Tools & Components

svelte-pipeline は、 Svelte Store として、 REPL や Editor などにカスタムの JavaScript コンテキストと Svelte Compiler を提供します。
Sveltotron はあなたの Svelte アプリを検査するために作られた Electron ベースのアプリです。
svelte-qr-reader-writer は、QRコードからのデータの読み取りと書き込みを支援する Svelte コンポーネントです。
svelte-stack-router Stacks との連携により、 Svelte アプリをよりネイティブに近づけることを目的としています。
svelte-typed-context では、 getContext や setContext に提供されると、より厳密な型が可能になるインターフェースを提供しています。
svelte-modals は、シンプルで柔軟性が高く、 zero-dependency のモーダルマネージャです。

コンポーネントを投稿したいですか？ Svelte を Web 上で存在感を高めることに興味がありますか？ コンポーネントを Svelte Society サイトに提出するには、 a PR to this file を作成してください。 SvelteKit で Svelte Society の書き直しに貢献したい場合は、 the list of open issues をチェックしてください。

See you next month!

もっと更新情報が欲しいですか？ Reddit or Discord に参加してください！

What’s new in Svelte: 2021年6月

Dani Sandoval — Tue, 01 Jun 2021 00:00:00 GMT

今月は、SvelteKit とそのドキュメントに多くの貢献がありました。language tools にもいくつか新機能が追加され、特に注目すべきは JavaScript または TypeScript ファイルと Svelte ファイルの深い統合です。それではアップデートに参りましょう…

New in SvelteKit

svelte.config.js コンフィグファイルが ESM フォーマットでロードされるようになりました (.cjs ではなく .js).
AMP ページでレンダリングされた CSS が使われるようになります
svelte-check が TypeScript テンプレートに追加されました (sveltejs/kit#1556)
https キーペアのサポート sveltejs/kit#1456
現在は SvelteKit に Vite をバンドルし、アップグレードしたバージョンを使用しています。もし package.json に Vite がある場合は、それを削除します
バイナリレスポンスのための Etag sveltejs/kit#1382
$layout から __layout、$error から __error にリネームしました
getContext を削除し、代わりに request.locals を使用します
出力ディレクトリを .svelte から .svelte-kit にリネームしました。適宜 .gitignore を更新してください。
trailingSlash: 'never' | 'always' | 'ignore' がコンフィグで使用できるようになりました。これにより、index.html ページの末尾にスラッシュをつけることを前提とした静的ホスティングプロバイダで動作するサイトの構築が簡単になり、より複雑な動作を必要とする人向けのエスケープハッチが提供されることになります。

Notable bug fixes in SvelteKit

adapter-netlify が sveltejs/kit#1467 で修正され、readme に新しいドキュメントが作成されました。
アプリが所有していないURLのナビゲーションをルーターがインターセプトしなくなりました。これにより、同じオリジンでベースパスを共有していない <a> 要素をページに持つアプリのクラッシュが修正されました。
ハッシュのみの変更がルーターによって処理されるようになり、ある状況でハッシュ変更中にブラウザの”戻る”ナビゲーションが実行されてしまうことが修正されました。

New in Svelte & Language Tools

Svelte 3.38.1 と 3.38.2 ではハイドレーションで要素の重複が発生する問題が修正されました。もしこの問題が発生している場合は最新のバージョンにアップデートしてください！
新しい TypeScriptプラグインは、JavaScriptやTypeScriptファイルとSvelteファイルのより深い統合を提供します。これには変数の診断、参照、名前変更などが含まれます。このプラグインは VS Code extension にパッケージされていますが、現在はデフォルトでオフになっています。こちらの設定で有効にすることができます。是非お試しいただき、フィードバックをお寄せください
最新バージョンの svelte-check は tsconfig.json や jsconfig.json のパスを指定できるようになりました。例: svelte-check --tsconfig "./tsconfig.json"。これにより、そのコンフィグで参照されているファイルに対してのみ診断が行われます。また、JavaScriptやTypeScriptのファイルに対しても診断が実行されるため、Svelte 以外のファイルに対して (tsc --noEmit のような) 別のチェックを実行する必要がなくなります (svelte-check version 1.6.0)
VS Code extension と svelte-check が新しくメジャーリリースされました。以前は、イニシャライザを持たないプロパティ (export let foo;) は、ユーザが TypeScript を使用していて、かつ strict モードを有効にしている場合にのみ必須とされました。これが変更されました。TypeScriptを使用している場合や、JavaScriptでも checkJs を使用している場合は、これらのプロパティが常に必須としてマークされるようになりました (svelte-check version 2.0.0, extension version 105.0.0)

Community Showcase

Apps & Sites

vidu はミニマルな Web アナリティクスコレクターとダッシュボードです
River Runner は川の流れを仮想的に追うことができ、 Mapbox と Svelte で構築されています。
JSDoc Type Generator は有効なJSONの JSDoc 型定義を生成します。
pagereview.io は Webサイトのフィードバックツールで、レビューするサイトに直接コメントを残すことができます。
gamesroom.io はビデオチャットが組み込まれているオンラインボードゲームプラットフォームです。
Greedy Goblin はオールドスクールな Runescape プレイヤーのためのレシピアプリです。
hashbrown.geopjr.dev は GNOME-shell にインスパイアされたWebページで、ソースコードについて学んだり、調べたり、Hashbrown GTK アプリをダウンロードすることができます (ソースのリンク)。

Libraries, Tools & Components

svelte-image-crop は、Web APIを利用したシンプルなクリック＆ドラッグ式の画像切り抜きライブラリです。
svelte-datepicker は、Svelteで構築された軽量で包括的な date picker です。
svelte-regex-router は、Svelteアプリケーションでルーティングを簡単に扱うための、シンプルで軽量なライブラリです。
Svelte Micro は、Svelte向けの軽量かつリアクティブな単一コンポーネントルーターです。
svelte-entity-store は、エンティティオブジェクトのコレクションを保存するためのシンプルで汎用的なソリューションを提供します。
svelte-animation-store は、Svelteのトゥイーンストアをベースにしたストアで、トゥイーンの一時停止、継続、リセット、リプレイ、リバース、スピード調整などを行うことができます。

あなたが作成したコンポーネントをコントリビュートしたいですか? あなたが作成したコンポーネントを Svelte Society のサイトから提出して頂ければ、パッケージのリストに追加することができます。

See you next month!

なにかご意見がありますか？ Svelte Society、Reddit、Discordにジョインしてください！

What’s new in Svelte: 2021年5月

Dani Sandoval — Sat, 01 May 2021 00:00:00 GMT

先週、Svelte Summitの大量のコンテンツにとても感激しました！フルレコーディングをご覧いただけますし、音声のみの(プ)レビューをSvelte Radioでお聞きいただけます。それでは今月のニュースに参りましょう…

New features in the Svelte Compiler

:global() is now supported as part of compound CSS selectors (3.38.0, Example)
CSS custom properties can now be passed to components for use cases such as theming (3.38.0, Docs coming soon)

New in SvelteKit

kit.svelte.dev has a fresh new look and the SvelteKit Demo Site got a fresh set of paint. Check it out by running npm init svelte@next
You can now use @sveltejs/adapter-static to create a single-page app or SPA by specifying a fallback page (PR, Docs)
Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis (PR)
Error messages thrown during pre-rendering are now much more informative and readable (PR, Docs)
Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation (PR, Docs)
fetch in SvelteKit code will now use the environment-provided implementation, whenever possible. If fetch is unavailable, it will be polyfilled by adapters (PR, Docs)

New in Svelte & Language Tools

svelte-preprocess が tsconfig.json の “extends” フィールドをサポートしました (4.7.2)
HTML の style 属性に hover と auto-complete が追加されました。Foreign namespaces と ESM configs が Svelte language server と extension でサポートされました
Svelte language tools は slot/event にジェネリックな関係が定義されている場合にそれらのプロパティから型を推測できるようになりました (原文: The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined)

Community Showcase

Apps & Sites

gitpod.io は最近 SvelteKit でサイトを書き直しました
highlight eel はあらゆるYoutubeビデオのお気に入りの部分をマークしてクリップし、誰とでも共有できるWebベースのエディターです
The Far Star Mission は、Apotheus のアルバム「The Far Star」に付属する対話型のオーディオブックです。
JavaScript quiz は解答をローカルに保存できる小さなクイズアプリケーションです
ExtensionPay を使用すると、バックエンドのサーバーコードなしで、ブラウザ拡張機能で安全な支払いを受け取ることができます。
mk48.io は SvelteKitで作られた海軍戦艦のゲームです
Frog Safety は African Dwarf Frogs と API freshwater master kit のガイドです
Stardew Valley Character Preview Stardew Valley のセーブファイルからキャラクターの属性をロードし、様々な服、色、アクセサリーで遊ぶことができます

Demos, Libraries, Tools & Components

svelte-parallax はSvelte向けのスプリングベースのパララックスコンポーネントです
@svelte-plugins/viewable は要素の視認性をトラッキングするためのシンプルなルールベースのアプローチです
Sveltekit-JUI は Svelte および SvelteKit と組み合わせて使用するUIコンポーネントキットです
EZGesture は、シンプルなネイティブDOMイベントでジェスチャー機能を簡単に追加することができます

Starters

How to use Vercel Analytics with SvelteKit では、ユーザーのデバイス間で Web Vitals をトラッキングする方法を説明しています
Asp.NETCore + Svelte + Vite は3つのフレームワークを SpaCliMiddleware (VS2019) で接続します
Add CoffeeScript to Svelte は、SvelteKit プロジェクトや Vite を使用している Svelte アプリに CoffeeScript を追加する実験的なコマンドです
Adds Supabase to Svelte は、SvelteKit プロジェクトに Spabase を追加する実験的なコマンドです
svelte-babylon はリアクティブな Svelte コンポーネントを通して BabylonJS を A-Frame のように使用することができます

特定のスターターをお探しですか？ svelte-adders や、その他多数のテンプレート例をコミュニティサイト sveltesociety.dev からチェックしてみてください。

Learning Resources

Amazing macOS Dock animation in Svelte では Svelte と popmotion の相性の良さを示しています
Solving the Tower of Hanoi with recursive Svelte templates では、<svelte:self> 要素を一般的なコンピュータサイエンスの問題に組み込んでいます
DIY SvelteKit CDK adapter は SvelteKit と AWS CDK を統合します
Fireshipの Svelte in 100 Seconds は Svelte のコアコンセプトをすばやく簡単に紹介しています
Tech Downtime は、Svlete の起動と実行、デバッグまで深く掘り下げているプレイリストです
lihautan の Svelte 101 と Svelte Store の最新ビデオは、slots、store、context と、それをいつどこで使用するかを説明しています
DavidParkerW は、Svelte、Sapper、SvelteKitをいくつかの実世界のシナリオで探求しています。例えば、APIからブログポストのリストを表示する、などです。

See you next month!

なにかご意見がありますか？ Svelte Society、Reddit、Discordにジョインしてください！

What’s new in Svelte: 2021年4月

Dani Sandoval — Thu, 01 Apr 2021 00:00:00 GMT

数ヶ月(数年)かけて進めてきた2つのプロジェクトが公開されました。SvelteKitは現在パブリックベータとなり、slotted components はSvelteで使えるようになりました！

SvelteKitはどう？(What’s up with SvelteKit?)

SvelteKit - SSR、サーバーレスアプリケーション、SPAなどを構築するためのSvelteの汎用的なフレームワーク - が正式にパブリックベータになりました。バグがあるかも！　詳細は最新のブログ記事をご覧ください。1.0がいつリリースされるか知りたいですか？ githubのマイルストーンをチェックしてみてください。

始め方、Sapperとの違い、新しい機能や移行方法を学びたいですか？　今週のSvelte Radioのエピソードで、AntonyとKevとSwyxが深く掘り下げているのでチェックしてみてください。

SvelteとLanguageツールの新着情報(New in Svelte & Language Tools)

Slotted components (<svelte:fragment slot="...">を含む) を使用すると、コンポーネントの利用者が特定のスロットにリッチなコンテンツを割り当てることができます (Svelte 3.35.0, Language Tools 104.5.0)
Linked editing がSvelteファイル内のHTMLで機能するようになりました (Language Tools, 104.6.0)
型定義 svelte.d.ts が正常に解決されるようになり、ライブラリの作成者がSvelteコンポーネントと一緒に型定義を配布できるようになりました (Language Tools, 104.7.0)
ViteでSvelteを使用するのに vite-plugin-svelte が利用可能になりました。npm init @vitejs/app はこのプラグインを使用したSvelteオプションが含まれています。

Community Showcase

アプリ & サイト

Nagato はポピュラーなタイムトラッキングツールやToDoツールを1箇所につなげられるタスク管理ツールです。
type-kana は日本の文字であるひらがな (hiragana) とカタカナ (katakana) を学ぶのに役に立つクイズアプリです。
Pittsburgh Steps はペンシルベニア州ピッツバーグにある800以上の公共の屋外階段のインタラクティブなマップです。
Music Mode Wheels は音楽のモードをインタラクティブなホイールとして表示するWebサイトです。
Critical Notes はゲームマスターとプレイヤーがロールプレイングゲームのキャンペーンやアドベンチャーを記録するのに役立ちます。
Svelte Game of Life はコンウェイのライフゲームの教育向けの実装で、TypeScriptとSvelteで書かれています。
foxql はブラウザ上で動作するピアツーピアの全文検索エンジンです。

デモ、ライブラリ、ツール & コンポーネント

svelte-nodegui はパフォーマンスの良いネイティブでクロスプラットフォームなデスクトップアプリケーションをNode.jsとSvelteで構築する方法です。
Svelte Story Format は、Svelteの構文でStorybookの “ストーリー(stories)” を書くことができます。詳しくは Storybook blog をご覧ください。
SelectMadu は検索、複数選択、非同期データロードなどをサポートする、セレクトメニューの代替です。
Svelte Checklist はSvelteで構築されたカスタマイズ可能なチェックリストです。
Suspense for Svelte はReactの<Suspense>の中核となるアイデアを実装したSvelteコンポーネントです。
MiniRx はSvelteとTypeScriptで使える RxJS Redux Store です。
svelte-formly はSvelteとSapper向けに動的なフォームを生成します。
7ty はSvelteを使用した静的サイトジェネレーターで、コンポーネントの部分的なハイドレーションをサポートし、Sapperや11tyに似たファイルベースルーティングを使用します。

スターター(Starters)

sveltekit-electron はSvelteKitを使ったElectronのスターターキットです。
sveltekit-tailwindcss-external-api はTailwindCSSと外部のAPIを使用するSvelteプロジェクトを構築するために必要なことが全て揃っており、create-svelteで作られました。
Sapper Netlify は Netlify functions 上で動作するSapper Projectです。

学習リソース

How to Build a Website with Svelte and SvelteKit は新しいSvelteKitのセットアップを順を追って説明するチュートリアルです。
A Svelte store for prefers-reduced-motion では、ユーザーがモーションの軽減を要求しているかどうかを示す値を持つカスタムのSvelte storeを作成して、アクセシビリティを向上させる方法について説明しています。
TypeScript support in Svelte はSvelteでTypeScriptを使う方法についてのMDNのガイドです。
How to merge cells with svelte-window は、テーブルのセルをマージする人気ツール react-window の移植版である svelte-window の解説をしています。この移行の詳細については from react-window 1:1 to svelte-window をご覧ください。
Easy-to-Embed Svelte Components では、Rollupとscriptタグを使ってSvelteコンポーネントを任意の場所に埋め込む方法を説明しています。
Convert Svelte project from Rollup to Snowpack は一般的な移行パターンについてビデオで解説しています。
How to internationalize routing in Svelte & Sapper では、leaf.cloud がどのようにサイトをオランダ語に翻訳したかを説明しています。
Svelte Store: Reactive context using Svelte Store は “どうやって[a]context の値をリアクティブにするのか” という質問に答えているビデオです。
Creating Social Sharing Images with Cloudinary and Svelte はJAMstackのWebサイト向けのOpen GraphのイメージやTwitterカードを動的に開発する方法を説明するCloudinaryのビデオです。

また来月お会いしましょう！(See you next month!)

なにかご意見がありますか？ Svelte Society、Reddit、Discordにジョインしてください！

SvelteKitがpublic betaに到達しました(SvelteKit is in public beta)

Rich Harris — Tue, 23 Mar 2021 00:00:00 GMT

お待たせしました。5か月という期間、何百ものコミットを経て、ついにSvelteKitのベータ版をお試し頂けるようになりました。まだ完成はしていません — いくつか既知のバグや、不足している機能がありますが — 私たちは出来栄えにとても満足しており、皆様に試して頂くのが待ちきれません。

新しいプロジェクトの開始は簡単です:

# プロジェクト作成
mkdir my-app
cd my-app
npm init svelte@next

# 依存関係をインストール
npm install

# 開発サーバを開始してブラウザタブを開く
npm run dev -- --open

ドキュメントは svelte.dev/docs/kit にあります。もし Sapper アプリをSvelteKitに移行したい場合は、svelte.dev/docs/kit/migrating に解説がございます。

ソースコードは github.com/sveltejs/kit で公開しています。issueとpull requestは整理が完了するまで無効にしておりますが、近い将来、完全に公開する予定です。

待って、SvelteKitって何？(Wait, what is SvelteKit?)

Svelteにとっての Next のようなものだとお考えください。Svelteでアプリを構築するためのフレームワークであり、サーバーサイドレンダリング、ルーティング、JSやCSSのコード分割、様々なサーバーレスプラットフォームへのアダプターなどが完備されています。

Sapper に精通されている方にとっては、SvelteKitはSapperの後継です。

SnowpackからViteに(From Snowpack to Vite)

Snowpack について熱弁を振るったアナウンスビデオの後では驚かれるかもしれませんが、SvelteKitは内部で Vite を使用しています。SvelteKitがどんな構成をとるべきか考え始めた頃に Snowpack を試したのですが、一目惚れでした。

Snowpack は開発ツールの完全に新しいカテゴリーを生み出しました。ここ数年の webpack や Rollup のように開発中のアプリを バンドル するのではなく、Snowpack はブラウザのネイティブな import を使用して、動作中にSvelteコンポーネントなどを 1:1 で変換する バンドルしない開発サーバー です。その結果、迅速な起動、シンプルなキャッシング、即時のホットモジュールリロードを実現しています。一度この方法を経験すると、もう今までの方法に戻りたくなくなります。

Vite は Snowpack と同じカテゴリーに属します。Vite 1 はVue中心 (ViteとVueはどちらも Evan You が開発しています) でサーバーサイドレンダリングが難しかったためSvelteKitには適していませんでしたが、Vite 2 はフレームワークにとらわれず、SSRを中心に設計されています。また、CSSのコード分割など、以前は自分たちで実装しなければならなかった強力な機能を備えています。2つのテクノロジーを並べて評価したところ、ViteのほうがSvelteKitの要件にマッチしており、私たちが考えているフレームワークを実現できる可能性が高いと結論づけざるを得ませんでした。

開発の初期段階に緊密に協力してくれたこと、また、今後数年のWeb開発の道筋を示してくれたことの両方について、Snowpackチームに深い感謝の意を表します。とても素晴らしいツールなので、是非試してみてください。

エクストリームスポーツとしてのドッグフーディング(Dogfooding as extreme sport)

SvelteKit はまだベータ版ですが、プロダクションで使われていないわけではありません。

私の本業は New York Times で、過去12か月のほとんどを coronavirus tracker の開発に費やしてきました。これは Times のグラフィックの大半を担うワークフローのカスタマイズバージョンを使用していますが、大規模な複数ページのプロジェクト向けには設計されていません。昨年末、アメリカの~3,000もの郡ごとにページを作成することを決めたとき、プロジェクトを完全に再構築する必要があると気付きました。

SvelteKitは、まだ完成していないにもかかわらず、私たちの難解な要件にマッチする唯一のフレームワークでした(ニュースルームで働き、CMSと格闘したことが有る人なら、私が言っていることがわかると思います)。現在では、county risk pages にも使用されており、既存のページをSvelteKitアプリに移行しているところです。

何百万人もの人に見てもらうアプリを作るのに未完成のソフトウェアを使用するのはリスクがありますし、一般的にはおすすめできません。しかし、これによってアプリの開発を大幅に速くすることができましたし、フレームワーク自体も以前よりずっと強固になりました。

1.0に向けたロードマップ(The road to 1.0)

1.0マイルストーンの未解決のissueは issue tracker で確認できます。その作業に加えて、ドキュメントをアップグレードし、adapters を追加する予定です。

最も重要なことは、私たちが最高のアプリケーションフレームワークを作るためには、皆さんからのフィードバックが必要であるということです。実際に使ってみて、足りない部分を教えてください。

‘here be dragons’ という警告や、ドキュメントの不足にもかかわらず、SvelteKitを試してくださった皆様に感謝します。バックチャンネルのフィードバックは非常に貴重でした。特に、非公式のドキュメントと不足していたWindowsサポートを追加したフォークをメンテしてくれた GrygrFlzr と、 Svite でSvelteKitのViteインテグレーションの重要な基礎を築いた dominikg に感謝したいと思います。この度、両名ともチームに迎え入れられました。

What’s new in Svelte: March 2021

Dani Sandoval — Mon, 01 Mar 2021 00:00:00 GMT

Lots to cover this month with releases from across the Svelte ecosystem. Most importantly, Svelte Summit Spring 2021 has an Open Call for Speakers. The deadline is March 14 so if you have an idea for a talk, submit it now!

Let’s dive into the news 🐬

What’s new in sveltejs/svelte

SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (3.31.2, see custom stores and Server-side component API )
Multiple instances of the same action are now allowed on an element (3.32.0, example)
The new foreign namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (3.32.0, more info)
Support for inline comment sourcemaps in code from preprocessors (3.32.0)
Destructured defaults are now allowed to refer to other variables (3.33.0, example)
Custom elements will now call onMount functions when connecting and clean up when disconnecting (3.33.0, checkout this PR for an interesting conversation on how folks are using Svelte with Web Components)
A cssHash option has been added to the compiler options to control the classname used for CSS scoping (3.34.0, docs)
Continued improvement to TypeScript definitions

For a complete list of changes, including bug fixes and links to PRs, check out the CHANGELOG

New from sveltejs/language-tools

For language server clients that don’t support didChangeWatchedFiles, a fallback file watcher will be used instead
New highlighting rules for store accessors and element directives (like bind: and class:)
HTML tags can now be renamed together
Mustache tags parsing is now more robust and will provide better intellisense in more situations

Haven’t tried the language-tools yet? Check out Svelte Extension for VSCode or find a plugin for your favorite IDE!

Other changes from sveltejs/*

eslint-plugin-svelte3 now supports TypeScript as of 3.1.0
prettier-plugin-svelte released a number of minor versions to address whitespace and comment trimming issues.
svelte-preprocess bug fixes this month include fixes to postcss transformations and support for both v2 and v3 of postcss-load-config
sapper’s 0.29.1 release fixes some bad imports in type definitions, updates typings to be compatible with express/polka, and restores hashing of all CSS file names.

Community Showcase

Apps & Sites

Tracking the Coronavirus from NYTimes is an example of SvelteKit in production
Budibase is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools 50x faster on their own infrastructure.
Track the Parcel is a one-stop tool for tracking parcel status with all major package shippers.
Memo is a replacement for email that uses Svelte for modern messaging
Userscripts Safari is an open-source userscript editor for Safari... a native Svelte app for Mac OS!
SVGX is “the desktop SVG asset manager designers and developers wished they had.”
Armoria is a procedural heraldry generator and editor
FictionBoard is a virtual table top (VTT) platform that just released fillable and responsive character sheets
Castles & Crusades Treasure Generator is a treasure generator for the table top RPG: Castles and Crusades.
NESBit Studio is a toolkit to help the development of homebrew NES games
ElectroBlocks is an online Arduino IDE with a built-in simulator (Chrome Only)
Goblin.life is a 3D world builder whose UI is built with Svelte
farmbox is a UAE-based grocery delivery services
heroeswearmasks.fun is a client-side machine learning tool that determines whether or not you’re wearing a mask.
weatherify is a very pretty (and open source) weather app
DSN Live lets you monitor connections between NASA/JPL and interplanetary spacecraft missions in real time.

Demos, Libraries, Tools & Components

spc is a special characters picker component for the web
svelte-injector lets you inject Svelte components in React, Angular, Vue, jQuery, Vanilla JS.
Felte is a form library for Svelte with simple validation reporting.
svelte-use-form is form library that “is easy to use and has 0 boilerplate.”
Formula provides “Zero Configuration Reactive Forms for Svelte.”
Houdini is “the disappearing GraphQL client built for Sapper and Sveltekit.”
svelte-split-pane is a draggable split pane component
svelte-virtualized-auto-sizer is a high-order component that automatically adjusts the width and height of a single child.
svelte-window are components for efficiently rendering large, scrollable lists and tabular data.
Svelte Persistent store is a Svelte store that keep its value through pages and reloads
Svelte Dark is a VSCode theme inspired by the svelte.dev REPL
Import Cost has been updated to support Svelte libraries and help developers keep their bundle size under control.
Tree-sitter-svelte provides tree-sitter grammar for svelte
Svelte Ripple is a Material Design ripple effect that doesn’t depend on @material/ripple (made by @karakara in the Svelte Discord)
Analog SVG Clock is a great example of easing functions (made by @tonmcg in the Svelte Discord)
Console Log Styler lets you generate a styled console log using pseudo HTML and CSS (made by @EmNudge in the Svelte Discord)
svelte-heroicons is a handy wrapper for the Heroicons icon library
supabase-ui-svelte are UI components for Supabase authentication

Have your own Svelte Component to share? Submit your own component to the list of packages on the Svelte Society site.

Learning Resources & Starters

The unofficial SvelteKit docs were built using SvelteKit and are open for contributions
📦 Svelte Store course by lihautan covers the basics of Svelte Stores and best practices.
Svelte Events by WebJeda explains how directives like on: can be used to listen to DOM events.
How to Set Up Protected Routes in Your Svelte Application describes how to authenticate your users to access your routes
Using Fauna’s streaming feature to build a chat with Svelte demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte
Using TakeShape with Sapper demonstrates how to connect the TakeShape CMS with Sapper
YastPack is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack
S2T2 is a Snowpack + Svelte + TailwindCSS + TypeScript template
tonyketcham/sapper-tailwind2-template is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier

See you next month!

Got something to add? Join us on Svelte Society, Reddit and Discord!

What’s new in Svelte: February 2021

Dani Sandoval — Mon, 01 Feb 2021 00:00:00 GMT

With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month – from big changes in svelte-loader, prettier-plugin-svelte, rollup-plugin-svelte, and language-tools to steady progress in Sapper and svelte-preprocess. Meanwhile, lots of folks have been busy integrating Svelte with other popular frameworks.

New compiler features

Aria roles from the WAI-ARIA Graphics Module are now recognized as valid aria roles in Svelte components (3.31.1)
Compiler warnings for the common React attributes, className and htmlFor, now make it easier to port React components to Svelte (3.31.1)

Have a suggestion for a compiler feature or want to help implement new features/bug fixes? Check out the “triage: good first issue” tag for Svelte

New bits in language-tools

User disabled auto import suggestions no longer show in VS Code (103.0.0)
Renaming a variable is now safer with smart additions of a prefix/suffix to renamed variables (104.0.0)
Semantic (token) highlighting for TypeScript users lets theme makers apply semantic styling in their themes, if they support it (104.0.0)
“Extract Component” has been added to the context menu - allowing you to extract components out of files without having to open the command window to type “Svelte: Extract Component” (104.0.0)
The VS Code extension now listens to JavaScript/TypeScript file changes - you no longer need to save the files for the changes to be noticed (104.1.0)

For the complete list of changes, check out the language-tools Releases page.

A great way to try the language tools is to download the Svelte Extension for VSCode. This extension provides syntax highlighting and rich intellisense for Svelte components in VS Code, using the svelte language server. Check your editor’s extension sources to see if there’s a Svelte plugin for your IDE or build your own (see coc-svelte for example)!

Big improvements across the Svelte ecosystem

svelte-loader released a major version, 3.0.0 - featuring Webpack 5 and Node 14 support, better hot reloading, and new compilerOptions to match rollup-plugin-svelte. Breaking changes include dropping Svelte 2 and Node 8 support. More info in the changelog
rollup-plugin-svelte is now at version 7.x - with support for relative filenames, better handling of sourcemaps, and consistent compilerOptions. Be sure to checkout the changelog for breaking changes when upgrading
svelte-preprocess iterated through some 4.6.x releases this month to improve postcss and scss handling and fix sourcemap transformation for typescript users. More info in the changelog
Sapper got some improvements in scroll tracking and handling encoding query parameters. Dynamic imports also now work as expected in browsers that don’t support ES modules. These changes from 0.29.0 and a step-by-step migration guide can be found in the changelog
prettier-plugin-svelte version 2 was released. It received an overhaul and comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. Better defaults for svelteBracketNewLine and options-scripts-markup-styles should now match how the majority of users like to order the code blocks. Additionally, Prettier’s htmlWhitespaceSensitivity setting is now supported. More info in the changelog

New changes to the Svelte Society website include a new cheat sheet for easy access to useful code patterns and some smaller visual fixes across the site. Want to help make the Svelte Society website ready for prime time? Checkout the GitHub repo to get started!

Community Showcase

Apps & Sites

The official German vaccination dashboard tracks the current COVID vaccine rollout and features some well-done dataviz.
La neuva era de la educatión conectada is a Vodaphone site that highlights the ways that technology and COVID-19 has changed the education landscape
sho.rest is a self-hostable url shortener
night.fm is a cyberpunk-themed radio station

Demos, Libraries & Components

Svelte Reactive Debugger is a way to monitor Svelte reactive statements in Firefox devtools
svelte-actions is a set of prototype Svelte actions for inclusion into official actions in future. See RFC and Discuss High Level Policy.
This css grid gallery made by @joja (in the Svelte Discord) features grid transitions based on a user’s mouse position
Patchcab is a modular Eurorack style synthesizer made with Web Audio.
svelte-knob is a knob control to help with speedometer-style visualization
descent-ripple is a highly customizable javascript ripple animation for buttons
makeItSnow is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component (Demo)
svelte-video-player is a customizable VideoPlayer component
svelte-readonly is a very small store that exposes only a readable interface.

New Integrations & Starters

svelte-derver-starter is a starter for creating full-stack applications with the client based on Svelte and the server powered by Derver.
eleventy-plugin-embed-svelte makes it easy to embed Svelte components into an 11ty site.
svelte-tailwind-extension-boilerplate is a good foundation for a Chrome extension using either JavaScript or TypeScript, Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system.
snowpack-ui lets you run & manage Snowpack projects from the browser instead of the terminal
Svelte for Appwrite explains how to integrate with Appwrite, a self-hosted Firebase alternative GitHub Repo
here-maps-svelte makes it easy to include HERE maps in a Svelte app
p5-svelte is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project
svelte-windicss-preprocess is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler
MitzaCoder/svelte-boilerplate features configurations for TypeScript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.

Want to share your Svelte Component with the world? Submit your own component to the list of packages on the Svelte Society site.

Learning Resources

lihautan’s Svelte Actions Playlist teaches how actions work and how they can help solve common problems when developing Svelte applications
One-click Portfolio/Personal blog generator from dev.to API walks through creating a Sapper site that also fetches your articles from DEV.to using the API
How to Code a VSCode Extension features Svelte as a way to render a custom UI within VSCode
This YouTube series on Plenti walks through the new static site generator in detail

See you next month!

Want to add your work to the Showcase? Want to contribute to Svelte? Check out the Svelte Society, Reddit and Discord to get involved!

What’s new in Svelte: January 2021

Dani Sandoval — Fri, 01 Jan 2021 00:00:00 GMT

Happy new year from Svelte! In the last month we made progress on Sapper’s upcoming release, fine-tuned our SvelteComponent typings, and have seen some amazing apps, sites, and libraries coming out in the showcase.

What’s changed in Svelte?

A new minor release replaces the SvelteComponent class with a SvelteComponentTyped class. This renaming should help with backwards compatibility. We’ve updated last month’s blog post to avoid any confusion with the name change.

If you’re using SvelteComponent or the new SvelteComponentTyped in your project or library, let us know what you’re using it for and we’ll add it to the showcase!

What’s going on in Sapper?

More quality of life features are landing in the upcoming release every day. 0.29.0 will include new TypeScript definitions, fixes to scroll tracking and prefetching behavior, and improvements to the runtime router to support encoded query parameters.

If you’re upgrading from 0.28.x, check out the migration guide for steps on updating to Sapper 0.29.

Is SvelteKit ready yet?

To avoid too much churn during development, SvelteKit is still being worked on in a private repo. There will be an announcement on the Discord, blog and Twitter when it’s ready for a larger group of users and contributors.

In the meantime, you can explore the current build by running npm init svelte@next from your command line.

As cautioned in What’s the deal with SvelteKit?, there are no docs or support available yet... So use at your own risk / for your own enjoyment!

Community Showcase

Apps & Sites

manitu.me is a background sound / pomodoro timer for focus and relaxation
Answer Socrates helps you find trending questions on the internet so that you can write the most relevant blog post, tweet, or billboard
multris is a multiplayer Tetris game. You can read about its development here
weather-ab compares the archive of weather in different cities of the world. Indispensable for people thinking about migration
Game Nibs is a platform for gamers to find and share concise bite-sized bits of gaming advice, tips, tricks, screenshots, builds, and much more
Ora is an open source website tracking and limiting tool for Chrome and Firefox
vscode-dms is a group direct messaging chat app for VSCode
Zero.2 is a math-based challenge game where you try to get to zero as quickly as possible
Octave Compass is a chord table and scale explorer for many popular musical scales
Infinite Walking Bass Generator 2 is an online music player that generates a unique walking bass line
ListenAddict is a site that notifies you whenever a person has a new talk/interview on podcast

Demos, Libraries & Components

svelte-tiny-virtual-list speeds up long lists by only rendering visible items
svelte-query is a collection of helpful hooks for managing, caching and syncing asynchronous and remote data
svelte-previous is a svelte store to remember previous values - helpful for transitions or a quick undo stack
Let’s Build a Confetti Cannon explains how to build a particle system and integrate a Canvas based animation into a larger application
svelte-micro is a one-component router
svelte-standalone-router is a standalone router with an API based on standalone-router
svelte-datepicker is a datepicker component with variations for time selection, date ranges and responsive themes
svelte-slimscroll is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar.
Svelte Zoomable is a custom transition with a nice zoom effect

Have a component you’d like to share? Submit your own component to the list of packages on the Svelte Society site.

Learning Resources

Using Svelte to create a scroll video effect showcases how the bind command can be used to create a cool scroll video effect with very little code
How to make a flappybird game in svelte and typescript is a video tutorial including docs and code for reference
Accessible Svelte Transition walks through prefers-reduced-motion to make svelte transitions more accessible
Svelte’s module scripts explained is a great introduction to the module context, a common Sapper pattern
Awesome Svelte is a curated list of Svelte resources
.NET Core and Svelte explains how to get Svelte up and running with .NET Core
A la découverte de Svelte JS is a svelte tutorial series in French!
Svelte for React Developers explains Svelte’s core concepts to folks who are used to React
Building a Svelte Static Website with Smooth Page Transitions shows how to build a static website with Svelte and add smooth page transitions using Three.js and GSAP.
Using Apollo Client in Sapper explains the “simplest” solutions to integrate the Apollo query client into Sapper
Reactive web apps with Crystal + Svelte explores how to build full-stack, server-rendered Svelte apps with a Crystal backend

Snowpack’s v3 release candidate is out now in preparation for a January 6 release date. Check out the Getting Started with Svelte for more info on how to use Snowpack.
Uppy, the open source file uploader, announced Svelte support in its new version 1.24

See you next month!

Want to add your work to the Showcase? Want to contribute to Svelte? Check out the Svelte Society, Reddit and Discord to get involved!

What’s new in Svelte: December 2020

Dani Sandoval — Tue, 01 Dec 2020 00:00:00 GMT

It’s the last “What’s new in Svelte” of the year and there’s lots to celebrate! This month’s coverage includes updates from rollup-plugin-svelte, Sapper and SvelteKit and a bunch of showcases from the Svelte community!

New features & impactful bug fixes

$$props, $$restProps, and $$slots are all now supported in custom web components (3.29.5, Example) and slot components now support spread props: <slot {...foo} /> (3.30.0)
A new hasContext lifecycle function makes it easy to check whether a key has been set in the context of a parent component (3.30.0 & 3.30.1, Docs)
There is now a new SvelteComponentTyped class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {} (3.31.0, RFC)
Transitions within {:else} blocks should now complete successfully (3.29.5, Example)
Svelte now includes an export map, which explicitly states which files can be imported from its npm package (3.29.5 with some fixes in 3.29.6, 3.29.7 and 3.30.0)
rollup-plugin-svelte had a new 7.0.0 release. The biggest change is that the css option was removed. Users who were using that option should add another plugin like rollup-plugin-css-only as demonstrated in the template

What’s going on in Sapper?

Lots of new TypeScript definition improvements to make editing Sapper apps even easier! CSS for dynamic imports also should now work in client.js files. (Unreleased)

What’s the deal with SvelteKit?

We’re glad you asked! If you didn’t catch Rich’s blog post from early last month, you can find it here!

For all the features and bugfixes see the CHANGELOGs for Svelte and Sapper.

Community Showcase

Apps & Sites

narration.studio (Chrome Only) is an automatic in-browser audio recording & editing platform for voice over narration.
Vippet is a video recording and editing tool for the browser.
Pattern Monster is a simple online pattern generator to create repeatable SVG patterns.
Plant-based diets is a website from the World Wildlife Foundation (WWF) built with Svelte.
johnells.se is a Swedish fashion e-commerce site, built with Crown - a Svelte-powered framework.
sentence-length is a learning and analysis tool to show how some authors play with different lengths, while others stick with one.
svelte-presenter lets you quickly make good looking presentations using Svelte and mdsvex.

Demos

u/loopcake got SSR working in Java Spring Boot for all the Java shops out there looking to render Svelte server-side.
svelte-liquid-swipe shows off a fancy interaction pattern using svg paths.
Crossfade Link Animation demonstrates how to animate between navigation links using a crossfade (made by Blu, from the Discord community)
Clip-Path Transitions showcases how to use clip paths and custom transitions to create magical in-and-out transitions (made by Faber, from the Discord community)

Learning Resources

lihautan has been making easy-to-follow videos to share his in-depth knowledge of Svelte.
Lessons From Building a Static Site Generator shares the backstory and thinking behind Elder.js - and the design decision made along the way.
Svelte Tutorial and Projects Course is a udemy course by John Smilga where students learn Svelte.js by building interesting projects.
Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS explains how to make a distributed pastebin-like application.

Components, Libraries & Tools

svelte-crossword is a customizable crossword puzzle component for Svelte.
svelte-cloudinary makes it easy to integrate Cloudinary with Svelte (including TypeScript and SSR support)
Svelte Nova extends the new Nova editor to support Svelte
saos is a small svelte component to animate your elements on scroll.
Svelte-nStore is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features.
svelte-slimscroll is a Svelte Action that transforms any div into a scrollable area with a nice scrollbar.
svelte-typewriter is a simple and reusable typewriter effect for your Svelte applications
svelte-store-router is a store-based router for Svelte that suggests that routing is just another global state and History API changes are just an optional side-effects of this state.
Routify just released version 2 of its Svelte router.
svelte-error-boundary provides a simple error boundary component for Svelte that can be can be used with both DOM and SSR targets.
svelte2dts generates d.ts files from svelte files, creating truly shareable and well typed components.

See you next month!

Got an idea for something to add to the Showcase? Want to get involved more with Svelte? We’re always looking for maintainers, contributors and fanatics... Check out the Svelte Society, Reddit and Discord to get involved!

That’s all for the year, folks! See you in January 😎

SvelteKitとは (What’s the deal with SvelteKit?)

Rich Harris — Thu, 05 Nov 2020 00:00:00 GMT

先月の Svelte Summit に参加していたなら、私の講演「Futuristic Web Development」をご覧になったかもしれません。この講演で、Svelte に関する FAQ の中で最も頻繁に寄せられる「Sapper がバージョン1.0に到達するのはいつですか？」という質問にようやく答えました。

答え: 到達しません。

これはちょっとした皮肉で、この講演で説明したように、実際には Sapper の書き換えとリブランドが行われています。しかし、コミュニティからは新しい質問が多く寄せられるようになり、Sapper の後継である SvelteKit にはどんなことが期待できるのかもう少し明確にする時が来ました。

'Futuristic Web Development' from Svelte Summit

What’s Sapper?

Sapper は アプリケーションフレームワーク (または ‘メタフレームワーク’) で、Svelte (コンポーネント フレームワーク) の上に構築されています。その目的は、サーバーサイドレンダリング (SSR) やコード分割など、最新のベストプラクティスをすべて備えた Svelte アプリの構築を簡単にすること、そして開発が生産的かつ楽しくなるようなプロジェクト構造を提供することです。ファイルシステムベースのルーティング (Next によって普及し、他の多くのフレームワークでも採用されていますが、いくつか機能を強化しています) を使用しており、プロジェクトのファイル構造がアプリ自体の構造を反映しています。

Svelte のホームページやドキュメントでは degit と sveltejs/template リポジトリを使ってアプリの構築を始めることが推奨されていますが、Sapper は長い間、アプリ構築をするための私達のお勧めの方法でした。このブログ記事も(執筆時点では) Sapper によってレンダリングされています。

Why are we migrating to something new?

まず最初に、sveltejs/template と sveltejs/sapper-template の区別は混乱を招きます、特に Svelte を初めて利用する人には。Svelte でアプリを構築し始めるのに、推奨する方法が1つであれば、大きなメリットがもたらされるでしょう。オンボーディングをシンプルにし、メンテナンスとサポートの負担を減らし、潜在的には予測しやすいプロジェクト構造によって解き放たれる新しい可能性を探り始めることができます。(最後の部分は、その可能性を完全に理解するには時間がかかるため、意図的に曖昧にしています)

それはさておき、私たちはしばらくの間 Sapper を書き直すという考えに惹かれていました。長年に渡りコードベースが少し荒れてきたというのもありますが (Sapper は2017年にスタート)、大きな理由は、ここ最近 Web に多くの変化があったからで、基本的な前提をいくつか再考する時期が来ています。

How is this new thing different?

基本的な前提の1つは、アプリをビルドするのに webpack や Rollup のようなモジュールバンドラーを使う必要があるということです。これらのツールはアプリケーションの依存関係グラフをトレースし、解析し、コードを変換 (例えば、Svelte コンポーネントを JS モジュールに変換するなど) して、どこでも実行できるコードのバンドルを作成します。私は Rollup の最初の作者として、これが驚くほど複雑な問題で厄介なエッジケースがあると証言できます。

確かにここ数年はバンドラーが必要でした。ブラウザーが import キーワードをネイティブにサポートしていなかったからです。しかし今日ではそれほど当てはまりません。現在では、 バンドルしない 開発ワークフローが台頭しており、これは根本的にシンプルです。アプリをバンドルする代わりに、開発サーバーが (必要に応じて JavaScript に変換された) モジュールを オンデマンド でサーブします。つまり、アプリが大きくなったとしても基本的にはすぐに起動できることを意味します。

Snowpack はこのムーブメントの先駆者であり、SvelteKit の原動力です。驚くほど高速で、素晴らしい開発体験(ホットモジュールリロード、エラーオーバーレイなど)を備えており、私達は SSR などの機能で Snowpack チームと緊密に連携しています。ホットモジュールリロードは特に、Sapper と Rollup (最も効率的なアウトプットを優先し、ファーストクラスのHMRサポートを持たないアーキテクチャ) を使用することに慣れている方にとっては新たな発見があります。

バンドラーを完全に捨てるわけではありません。アプリをプロダクション向けに最適化することは依然として不可欠で、SvelteKit は Rollup を使用してアプリを可能な限り速く小さいものにします (これには、静的な .css ファイルへの style の抽出なども含まれます) 。

他の基本的な前提としては、サーバーレンダリングされたアプリには、サーバーが必要である、というものがあります。Sapper には事実上2つのモードがあります。Nodeサーバー上で実行されるスタンドアローンアプリを作る sapper build と、アプリを GitHub Pages のようなサービスでのホスティングに適した静的ファイルのコレクションに仕上げる sapper export です。

静的ファイルはどこにでも置くことができますが、Node サーバーの実行 (とモニタリング/スケーリングなど) はそれほど簡単ではありません。今日では、サーバーレスプラットフォームへの移行を目にします。サーバーレスプラットフォームでは、アプリの作者はコードが実行されているサーバーやそれに伴う複雑さについて考える必要がありません。vercel-sapper などのおかげで Sapper アプリをサーバーレスプラットフォームで実行することができますが、確かに慣用的であるとは言えません。

SvelteKit はサーバーレスパラダイムを完全に取り入れており、メジャーなサーバーレスプロバイダを全てサポートする予定です。公式には対応していないプラットフォームをターゲットにするための ‘adapter’ API も用意されます。さらに、部分的なプリレンダリングも可能になるでしょう。つまり、静的なページはビルド時に生成することができ、動的なページはオンデマンドでレンダリングするということです。

When can I start using it?

勇気がある方は、今すぐ始められます。

npm init svelte@next

これによって新しいプロジェクトが作成され、@sveltejs/kit CLI がインストールされてアプリの開発とビルドのためのツールが提供されます。

ですが推奨はしません！ドキュメントはありませんし、どんな形式のサポートも提供できないでしょう。また、頻繁に壊れる可能性もあります。

私達はまだ探索モードなので、プライベートなモノレポで作業を進めています。私たちの計画では、いくつかの Issue を解決したら、パブリックベータを準備し、ここで発表します。その時点ではリポジトリをプライベートなままにしておく予定ですが、皆様からのフィードバックを集める場を設ける予定です。その後で、1.0 リリースに向けて作業を進め、リポジトリを公開する予定です。

私は約束を破るのが好きではないので、時期について確固たる約束はできません。しかし、数ヶ月ではなく数週間の話だと考えています。

What if I don’t want to use SvelteKit?

使用する必要はありません。Svelte をスタンドアローンパッケージとして、または rollup-plugin-svelte のようなバンドラーインテグレーションを介して使用することは常に可能です。どんなに難解なワークフローであってもそれにフィットするよう柔軟に対応できることや、Elder.js、Routify、Plenti、Crown、JungleJS などのサードパーティのアプリケーションフレームワークを使えることが重要だと考えています。

TypeScript?

心配しないで、TypeScript をフルにサポートせずにローンチするつもりはありません。

How can I migrate my existing Sapper apps?

ほとんどの場合、Sapper のコードベースを移行するのは比較的簡単なはずです。

いくつかの避けられない変更があり (サーバーレスプラットフォームで実行できるようにするということは、カスタムの server.js ファイルと (req, res) => {...} 関数をよりポータブルなもので置き換える必要があるということを意味します) 、この機会にいくつかの設計上の欠点を修正していますが、全体的には SvelteKit アプリは Sapper ユーザーにとって非常に馴染みのあるものになっています。

詳細な移行ガイドは 1.0 と一緒に提供されるでしょう。

How can I contribute?

パブリックベータのローンチやリポジトリの公開の時期に関する発表をお見逃しなく。(また、ブログ記事に書く予定ですが、私たちは OpenCollective を開始しており、もしこのプロジェクトがあなたにとって価値がある場合に財政的な貢献ができることをお伝えしておかなければなりません。すでに寄付してくださった方々にはとても、とても感謝しています)

Where can I learn more?

BlueSky で svelte.dev と sveltesociety.dev をフォローしてください。また、svelte.dev/chat にお越しください。また、Svelte Radio を購読してください。次回のエピソードでKevinと共同ホストがこのプロジェクトについて私に質問する予定です (今から来週の収録までの間に、質問があればこのTwitterのスレッドに返信してください)。

What’s new in Svelte: November 2020

Dani Sandoval — Sun, 01 Nov 2020 00:00:00 GMT

Welcome back to the “What’s new in Svelte” series! This month, we’re covering new features & bug fixes, last month’s Svelte Summit and some stand-out sites and libraries...

New features & impactful bug fixes

Destructuring Promises now works as expected by using the {#await} syntax (3.29.3, Example)
Slot forwarding (released in 3.29.0) should no longer hang during compilation (3.29.3, Example)
Better typings for the get function in svelte/store and on lifecycle hooks (3.29.1)

What’s going on in Sapper?

Sapper got some new types in its preload function, which will make typing easier if you are using TypeScript. See the Sapper docs on how to use them. There also were fixes to preload links in exported sites. Route layouts got a few fixes too - including ensuring CSS is applied to nested route layouts. You can also better organize your files now that extensions with multiple dots are supported. (0.28.10)

For all the features and bugfixes see the CHANGELOGs for Svelte and Sapper.

Svelte Summit was Svelte-tacular!

Rich Harris demoed the possible future of Svelte development in a talk titled “Futuristic Web Development”. The not-yet-public project is called SvelteKit (name may change) and will bring a first-class developer experience and more flexibility for build outputs. If you want to get the full sneak-peek, check out the video.
17 speakers made the best of the conference’s virtual format... From floating heads to seamless demos, Svelte developers from every skill level will find something of interest in this year’s YouTube playlist

Community Showcase

Svelte Lab showcases a variety of components, visualizations and interactions that can be achieved in Svelte. You can click into any component to see its source or edit it, using the site’s built-in REPL
svelte-electron-boilerplate is a fast way to get up and running with a Svelte app built in the desktop javascript framework, Electron
React Hooks in Svelte showcases examples of common React Hooks ported to Svelte.
gurlic is a social network and internet experiment that is super snappy thanks to Svelte
Interference 2020 visualizes reported foreign interference in the 2020 U.S. elections. You can learn more about how it was built in YYY’s talk at Svelte Summit
jitsi-svelte lets you easily create your own custom Jitsi client by providing out-of-the-box components built with Svelte
Ellx is part spreadsheet, part notebook and part IDE. It’s super smooth thanks to Svelte 😎
This New Zealand news site breaks down the results of the 2020 Parliamentary elections using Svelte
Budibase is a no-code app builder, powered by Svelte
Svelt-yjs combines the collaborative, local-first technology of Yjs with the power of Svelte to enable multiple users across the internet to stay in sync.
tabler-icons-svelte is a Svelte wrapper for over 850 free MIT-licensed high-quality SVG icons for you to use in your web projects.

See you next month!

What’s new in Svelte: October 2020

Dani Sandoval — Thu, 01 Oct 2020 00:00:00 GMT

Welcome to the first edition of our “What’s new in Svelte” series! We’ll try to make this a monthly blog post in which you’ll find out about new features, bug fixes, and a showcase of Svelte projects from around the community.

New features

use:obj.method allows functions defined within objects to be used within actions (Example, 3.26.0, warning removed in 3.27.0)
_ is now supported as a “numerical separator”, similar to a . or , (Example, 3.26.0)
import.meta now works in template expressions (Example, 3.26.0)
CSS Selectors with ~ and + combinators are now supported (Example, 3.27.0, with a compiler fix in 3.29.0)
The {#key} block is now available to key arbitrary content on an expression. Whenever the expression changes, the contents inside the {#key} block will be destroyed and recreated. For an in-depth explanation and to find out how it’s implemented, check out the new blog post of Svelte Team member Tan Li Hau. (More info, 3.29.0)
Slots can now be forwarded through child components! This used to only be possible by adding extra wrapper <div>s (More info, 3.29.0)
When using TypeScript, you can now type the createEventDispatcher method:

<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher<{
		/**
		 * you can also add docs
		 */
		checked: boolean; // Will translate to `CustomEvent<boolean>`
		hello: string;
	}>();

	// ...
</script>

This will make sure that you can invoke dispatch only with the specified event names and its types. The Svelte for VS Code extension was also updated to deal with this new feature. It will provide strong typings for these events as well as autocompletion and hover information.

New from Sapper!

Sapper 0.28.9 just came out. The highlights from it include much better support for CSP nonces, asset preload support for exported pages, and error details are now available in the $page store on error pages.

In addition, Sapper’s CSS handling has been rewritten over the course of recent releases in order to fix existing CSS handling bugs, refactor the CSS handling to occur entirely within a Rollup plugin, and remove the need internally to register CSS in the routing system. Congrats and thank you to the folks working on Sapper for all their solid work!

Impactful bug fixes

CSS compilation will no longer remove rules for the open attribute on <details> elements (Example, 3.26.0)
prettier-plugin-svelte will do a better job now at dealing with whitespaces, especially around inline elements. It will also preserve formatting inside <pre> tags and will no longer format languages which are not supported by Prettier, like SASS, Pug or Stylus.

Coming up

Svelte Summit, Svelte’s second global online conference, is taking place on October 18! Sign up for free to get reminders and talk updates!

For all the features and bugfixes see the CHANGELOG for Svelte and Sapper.

Svelte Showcase

This CustomMenu example demos how to replace the OS right-click menu
GitHub Tetris lets you play a Tetris-like game in a git commit history
Who are my representatives? is a website built with Svelte to help US residents get more info on their congressional representatives
Pick Palette is a color palette manager made with Svelte!

In-depth learning:

Svelte 3 Up and Running is a new book about building production-ready static web apps with Svelte 3
Sapper Tutorial (Crash Course) walks through the ins-and-outs of Sapper, the Svelte-powered application framework
Svelte Society Day France happened September 27th featuring a wide variety of topics all in French! You can find the full recording here.

Plug-and-play components:

svelte-zoom brings “nearly native” pan-and-zoom to images on desktop and mobile
svelte-materialify is a Material component library for Svelte with over 50 components
svelte-undoable makes it easy to introduce undo and redo functionality using bind:
This Tilt component implements a common UX pattern where the hovered element tilts to follow the mouse

Lots of examples of how use JS tech came out this month:

Reminder: There’s a Svelte integrations repo that demonstrates ways to incorporate Svelte into your stack (and vice versa). If you’ve got questions on how to use a particular piece of tech with Svelte, you may find your answer there... and if you’ve gotten something to work with Svelte, consider contributing!

For more amazing Svelte projects, check out the Svelte Society, Reddit and Discord… and be sure to post your own!

See you next month!

By the way, Svelte now has an OpenCollective! All contributions and all expenses are published in our transparent public ledger. Learn who is donating, how much, where that money is going, submit expenses, get reimbursed and more!

Svelte <3 TypeScript

Orta Therox — Fri, 17 Jul 2020 00:00:00 GMT

以前から最も多く要望をもらっていた機能がついに実現しました、Svelte は正式に TypeScript をサポートします。

これにより、より良い開発体験が得られると考えています。 -- また、より大きな Svelte コードベースにも美しくスケールします -- TypeScript と JavaScript のどちらを使用していても。

Image of TypeScript + Svelte in VS Code (theme is Kary Pro.)

今すぐ試してみてください(Try it now)

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.

Alternatively you can run npm create vite@latest myapp -- --template svelte-ts to scaffold a Vite project using Svelte and TypeScript.

VS Code ユーザーの方は、(新しい) 公式の拡張機能を使用していることを確認してください。これは James Birtles による人気の高い拡張機能に取って代わるものです。この記事の後半では、既存の Svelte プロジェクトで TypeScript を使用するための個々のステップについて詳しく説明します。

Svelte の TypeScript サポートとは何を意味しますか？(What does it mean to support TypeScript in Svelte?)

Svelte で TypeScript に対応することはかなり前から可能でしたが、多くの異なるツールを組み合わせ、それぞれを個別に動作するようにしなければなりませんでした。今日では、これらのツールのほぼすべてが Svelte の組織の下にあり、パイプライン全体に責任を持ち、共通の目標を持った人たちによってメンテナンスされています。

COVID がパンデミックと宣言される前の週、私は類似の開発エコシステムによる最高の Svelte 用のツールとアイデアの統合を提案し、ファーストクラスの TypeScript サポートを得るための一連のステップを提供しました。それ以来、多くの人たちが協力してくれて、そこにたどり着くためのコードを書いてくれました。

Svelte が TypeScript をサポートするようになったということは、いくつかの異なる意味を持っています。

<script> ブロックの中で TypeScript を使うことができます -- lang="ts" 属性を追加するだけです。
TypeScript を持つコンポーネントは svelte-check コマンドでタイプチェックを行うことができます。
コンポーネントを書いているときに、マークアップ内の式でも自動補完のヒントや型チェックを得ることができます。
TypeScript ファイルは Svelte コンポーネント API を理解しています -- .ts モジュールに .svelte ファイルをインポートしても、赤い四角い線はもうありません。

どのような仕組みになっていますか？(How does it work?)

TypeScript のサポートの 2 つの主要な部分を理解するために、TypeScript が開発ツールを提供するために使用している技術と比較してみましょう。それはコマンドラインで実行し *.ts を *.js に変換する tsc コンパイラと、テキストエディタからのリクエストに応答するノードAPI である TSServer です。TSServer は、コーディング中のエディタに JavaScript と TypeScript のリアルタイムイントロスペクションを提供するもので、その中にコンパイラのコードのほとんどが含まれています。

一方 Svelte には、Svelte コンパイラと、Language Server Protocol standard を介してテキストエディタの呼び出しに応答する svelte-language-server があります。ファーストクラスの TypeScript サポートというのは、これらの両方のシステムが TypeScript コードをうまく扱えることを意味しています。

TypeScript のための Svelte コンパイラのサポートは、Christian Kaisermann の svelte-preprocess が担当しており、現在では公式の Svelte プロジェクトとなっています。

エディタについては、Pine’s による Vue エコシステムの Vetur からインスピレーションを得ました。Vetur は LSP、VS Code 拡張機能、CLI を提供します。Svelteも現在、LSP、VS Code 拡張機能、CLI を提供しています。

.svelte イントロスペクション(.svelte Introspection)

公式の Svelte VS Code 拡張機能では、James Birtles 氏がUnwrittenFun/svelte-vscode と UnwrittenFun/svelte-language-server で作成した基盤を基に構築しました。

Simon Holthausen と Lyu, Wei-Da は、JavaScript と TypeScript のイントロスペクションを改善する素晴らしい仕事をしてくれました。またコードベース内のコンポーネントの props を理解する力を強化する @halfnelson の svelte2tsx を統合しました。

既存のプロジェクトにTypeScriptを追加する(Adding TypeScript to an existing project)

はじめる前に、依存関係を追加します。

npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check

1. Typescriptのコンパイル(Compiling TypeScript)

まず最初に、<script lang="ts"> ブロックの内容を TypeScript コンパイラに渡す svelte-preprocess を設定する必要があります。

Rollupプロジェクトでは、次のようになります -- Rollupが .ts ファイルを扱えるように @rollup/plugin-typescript をインストールする必要があることに注意してください。

import const autoPreprocess: ({ aliases, markupTagName, sourceMap, ...rest }?: AutoPreprocessOptions) => AutoPreprocessGroup@deprecatedUse the named export instead: import { sveltePreprocess } from 'svelte-preprocess'autoPreprocess from 'svelte-preprocess';
import import typescripttypescript from '@rollup/plugin-typescript';

export default {
	// ...,
	plugins: any[]plugins: [
		svelte({
			preprocess: PreprocessorGrouppreprocess: function autoPreprocess({ aliases, markupTagName, sourceMap, ...rest }?: AutoPreprocessOptions): AutoPreprocessGroup@deprecatedUse the named export instead: import { sveltePreprocess } from 'svelte-preprocess'autoPreprocess()
		}),
		import typescripttypescript({ sourceMap: booleansourceMap: !production })
	]
}

他の環境のための説明はこちら.

TypeScriptを設定するには、プロジェクトのルートに tsconfig.json を作成する必要があります。

{
	"extends": "@tsconfig/svelte/tsconfig.json",

	"include": ["src/**/*", "src/node_modules"],
	"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

include / exclude はあなたのプロジェクトによって異なります。-- これらは、ほとんどの Svelte プロジェクトで動作するデフォルト値です。

2. エディタサポート(Editor Support)

LSPを使用しているエディタであれば、どのようなエディタでも対応可能です。VS Code 拡張機能は、私たちが最も優先してきたものです。しかし、Atom上では作業が進行中で、coc-svelte 経由の Vim は最新の LSPでアップデートされています。

これらのエディタ拡張機能は、JavaScript だけを使っていてもコーディング体験を向上させてくれます。エディタはエラーを提供してくれませんが、推論やリファクタリングツールを提供してくれます。JavaScript を使って <script> タグの先頭に // @ts-check を追加すると、インフラの変更なしでより良いエラーメッセージを得ることができます。

<script> を TypeScript を使うように切り替えるには、<script lang="ts"> を使ってください。願わくば、赤い四角い線の海を見ることがないことを願っています。

3. CIでのチェック(CI Checks)

赤い四角いマークがあるのは素晴らしいことですが、まあ、ちょっとしたことです。しかし、長期的には、コードにエラーがないことを確認できるようにしたいものです。プロジェクトにエラーがないことを確認するには、CLI ツールの svelte-check を使うことができます。これはエディタのように動作し、すべての .svelte ファイルに対してエラーを確認します。

依存関係をプロジェクトに追加し、CI に追加することができます。

❯ npx svelte-check

Loading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-app
Getting Svelte diagnostics...
====================================

/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2
Error: Type '123' is not assignable to type 'string'. (ts)

====================================
svelte-check found 1 error
error Command failed with exit code 1.

SapperプロジェクトのTypeScriptについてはどうなってますか？(What about TypeScript in Sapper projects?)

TypeScriptのサポートは 0.28 で Sapper に追加されましたので、古いバージョンをお使いの場合はアップグレードをお勧めします。

どうすれば貢献できますか？(How can I contribute?)

ご質問ありがとうございます。作業は sveltejs/language-tools リポジトリと Svelte Discord の #language-tools チャンネルで行われています。問題を報告したり、修正を提出したり、新しいエディタのための拡張機能の開発を手伝ったりしたい場合は、こちらで作業を行っていますので、そこでお会いしましょう！

Svelte 3: リアクティビティ再考

Rich Harris — Mon, 22 Apr 2019 00:00:00 GMT

あとほんの数ヶ月後には、Svelte 3 の安定版リリースを発表することができ、大変嬉しく思っています。これは、Svelteコミュニティの多くの人々による数百時間の作業を表す巨大なリリースです。これには、あらゆる段階で設計の形成に貢献したベータテスターからの貴重なフィードバックが含まれます。

私たちはあなたがそれを気に入ってくれると思います。

Svelte とは何か？

Svelteはコンポーネントフレームワーク — React や Vue のような — ですが、重要な違いがあります。従来のフレームワークでは、宣言的な state 駆動型のコードを書くことができますが、ペナルティがあります。ブラウザは宣言的な構造を DOM 操作に変換するために余分な作業をしなければならず、仮想 DOM の差分更新技術のようなものはフレーム予算を食い荒らし、ガベージコレクタに課税します。

その代わり、Svelteは ビルド時 に実行され、あなたのコンポーネントを DOM の更新を行う非常に効率的な 命令的 コードに変換します。その結果、優れたパフォーマンス特性を持つ野心的なアプリケーションを書くことができます。

Svelte の最初のバージョンは仮説を検証することがすべてでした -- これは、専用のコンパイラが優れたユーザーエクスペリエンスを提供する強固なコードを生成することができることを示しています。2つ目は、物事を少し片付けた小さなアップグレードでした。

バージョン3は大幅なオーバーホールです。この5、6か月間、私たちの焦点は、優れた 開発者体験 を提供することにありました。今では、他の場所で見かけるものよりも大幅に少ないボイラープレートでコンポーネントを書くことができるようになりました。真新しいチュートリアルを試してみて、私たちが何を言っているのか確認してください — 他のフレームワークに慣れている人なら、きっと驚くと思います。

それを可能にするためには、まず、現代のUIフレームワークの中心となるコンセプト、リアクティビティを再考する必要がありました。

'Rethinking Reactivity' from You Gotta Love Frontend Code Camp

リアクティビティを言語にする

昔の Svelte では、this.set メソッドを呼び出すことで state が変わったことをコンピュータに伝えることができました。

const { const count: anycount } = this.get();
this.set({
	count: anycount: const count: anycount + 1
});

これはコンポーネントが react(反応) する原因になります。そういえば、this.set は古典的な (hooks 以前の) React で使われている this.setState メソッドとほぼ同じです。

const { const count: anycount } = this.state;
this.setState({
	count: anycount: const count: anycount + 1
});

いくつかの重要な技術的な違いがありますが（上の動画で説明したように、React はリアクティブではありません）、概念的には同じものです。

それはフックの登場ですべてが変わりました。多くのフレームワークがフックの独自の実装を実験し始めましたが、私たちはすぐにそれは私たちが望んでいる方向ではないと結論付けました。フックには魅力的な特性がありますが、不自然なコードを含んでいたり、ガベージコレクタのために不必要な作業が発生したりします。組込みデバイスやアニメーションを多用するインタラクティブな環境で使用されているフレームワークでは、それは良いことではありません。

そこで、私たちは一歩下がって、どのようなAPIが私たちにとって機能するのかを自問自答しました…そして、最高のAPIは全くAPIがないことに気付きました。私たちはただ 言語を使う ことができます。いくつかの count 値の更新 -- そしてそれに依存するすべてのもの -- は、このように簡単であるべきです。

count += 1;

コンパイラなので、裏で代入にタグ付けすることでそれが可能になります。

count += 1; $$invalidate('count', count);

重要なことは、プロキシやアクセサを使用する際のオーバーヘッドや複雑さを伴わずに、これらのことをすべて行うことができるということです。ただの変数です。

新しい Svelte

改修されているのはコンポーネントだけではありません。svelte.technology から svelte.dev(訳注:日本語版) に移行した新しいロゴとウェブサイトを作成した AchimVedam の素晴らしいデザイン作業のおかげで、Svelte 自体はまったく新しいルックアンドフィールになっています。

また、私たちはキャッチフレーズを「魔法のように消える UI フレームワーク」から「サイバネティックに強化されたウェブアプリ」に変更しました。Svelte には様々な側面があります。-- 卓越した性能、小さなバンドル、アクセシビリティ、組み込みのスタイルカプセル化、宣言的な遷移、使いやすさ、コンパイラであることなど -- その中のどれか1つに焦点を当てることは、他のものに不公平感を与えるような気がします。「Cybernetically enhanced」は、私たちのツールは私たち自身の知能の拡張として機能するべきだという Svelte の包括的な哲学を思い起こさせるようにデザインされています -- 願わくばレトロでウィリアム・ギブソン風のひねりを加えて。

バージョン2からのアップグレード

もしあなたが既存の Svelte 2 ユーザーであれば、手動でのアップグレードが必要になると思います。近日中に移行ガイドと svelte-upgrade の更新版をリリースする予定です。これは作業を自動化するためにできる限りのことをしてくれます。しかし、これは大きな変化であり、すべてが自動的に処理できるわけではありません。

私たちはこれを軽視していません、Svelte 3 を体験してもらえれば、なぜ過去と決別する必要があると感じたのか理解してもらえると思います。

これから

<<<<<<< HEAD このリリースは大変なものでしたが、まだ完成には至っていません。よりスマートでコンパクトなコードと長い機能のウィッシュリストを生成するためのアイデアがたくさんあります。Next.js スタイルのアプリフレームワークである Sapper は、Svelte 3 を使用するためのアップデートの真っ最中です。Svelte Native のコミュニティプロジェクトは、Svelte で Android や iOS アプリを書くことができるようになり、順調に進んでいますが、コアからのより完全なサポートが必要です。他のフレームワークが持っているようなエディタ拡張機能、シンタックスハイライター、コンポーネントキット、devtools などの豊富な機能はまだありません。私たちは 本当に ファーストクラスの TypeScript サポートを追加したいと思っています。

しかし、それらを待つ間でも Svelte 3 は Web アプリを構築するための最良の方法だと考えています。1時間ほどかけてチュートリアルを読んでみてください。いずれにしても、Discord チャットルームや GitHub でお待ちしています。-- 誰でも歓迎します、特にあなたは。

But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the tutorial and we hope to convince you of the same. Either way, we’d love to see you in our Discord chatroom and on GitHub — everyone is welcome, especially you.

sveltejs/main

コード量を減らす(Write less code)

Rich Harris — Sat, 20 Apr 2019 00:00:00 GMT

全てのコードにはバグが存在する可能性があります(All code is buggy)。したがって、書かなければいけないコードが多ければ多いほど、アプリケーションがバグだらけになるのは理にかなっています。

多くのコードを書くには多くの時間がかかるので、他のこと(例えば最適化や、良い機能を開発すること、またはPCの前に座らずに外出することなど)に充てられる時間は少なくなります。

実際、プロジェクトの開発時間とバグ件数はコードベースのサイズに対して直線的ではなく 二次関数的 に増加することが広く知られています。これは私たちの直感と一致しています : 10行のプルリクエストは、100行のプルリクエストだと有り得ないレベルで精査されるでしょう。また、モジュールが1つの画面に収まりきらないほど大きくなると、それを理解するために必要な認知的努力が著しく増大します。リファクタリングし、コメントを追加することでこの問題に対応しようとしますが、ほとんどの場合コードがもっと増加してしまいます。悪循環です。

しかし、私たちはパフォーマンスの数値やバンドルサイズ、その他計測できるものはなんでも気にかける一方で、書いているコードの量に注意を払うことはほとんどありません。

重要なのは読みやすさ(Readability is important)

巧妙なトリックを使って読みやすさを犠牲にしてでもできるだけコードをコンパクトにするべきだ、と主張しているわけではありません。また、コードの行数を減らすことこそが価値のある目標であると主張しているわけでもありません、このような主張は、例えば次のような読みやすいコードを…

for (let let i: numberi = 0; let i: numberi <= 100; let i: numberi += 1) {
	if (let i: numberi % 2 === 0) {
		var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
@sincev0.1.100log(`${let i: numberi} is even`);
	}
}

…次のように解析がより難しいものに変えるよう促してしまいます:

for (let let i: numberi = 0; let i: numberi <= 100; let i: numberi += 1) if (let i: numberi % 2 === 0) var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
@sincev0.1.100log(`${let i: numberi} is even`);

代わりに、自然とコードが少なくなるような言語とパターンを好むべきだと主張します。

はい、Svelteについて話しています

書かなければいけないコードの量を減らすことは、Svelteの明確な目標です。説明のために、React、Vue、Svelteでそれぞれ実装されたシンプルなコンポーネントを見てみましょう。まずはSvelteのバージョンです:

これをReactで構築するには？　おそらく次のようになるでしょう:

import import ReactReact, { import useStateuseState } from 'react';

export default () => {
	const [const a: anya, const setA: anysetA] = import useStateuseState(1);
	const [const b: anyb, const setB: anysetB] = import useStateuseState(2);

	function function (local function) handleChangeA(event: any): voidhandleChangeA(event: anyevent) {
		const setA: anysetA(+event: anyevent.target.value);
	}

	function function (local function) handleChangeB(event: any): voidhandleChangeB(event: anyevent) {
		const setB: anysetB(+event: anyevent.target.value);
	}

	return (
		<div>
			<input type: stringtype="number" value: anyvalue={const a: anya} onChange: (event: any) => voidonChange={function (local function) handleChangeA(event: any): voidhandleChangeA} />
			<input type: stringtype="number" value: anyvalue={const b: anyb} onChange: (event: any) => voidonChange={function (local function) handleChangeB(event: any): voidhandleChangeB} />

			<p>
				{const a: anya} + {const b: anyb} = {const a: anya + const b: anyb}
			</p>
		</div>
	);
};

Vueで同等のことをやると次のようになります:

<template>
	<div>
		<input type="number" v-model.number="a">
		<input type="number" v-model.number="b">

		<p>{{a}} + {{b}} = {{a + b}}</p>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				a: 1,
				b: 2
			};
		}
	};
</script>

つまり、Svelteだと145文字でできることが、Reactだと442文字、Vueだと263文字かかります。Reactバージョンは文字通り3倍大きいです！

ここまで差がつくのは中々珍しいケースです - 私の経験では、ReactコンポーネントはSvelteの同等のコンポーネントより大体約40%ほど大きいです。では、アイデアを簡潔に表現することを可能にするSvelteの設計の特徴を見ていきましょう。

トップレベル要素(Top-level elements)

Svelteでは、1つのコンポーネントに好きなだけトップレベル要素を含めることができます。ReactやVueは、1つのコンポーネントには単一のトップレベル要素しか含めることができません - Reactの場合、コンポーネント関数から2つのトップレベル要素を返そうとすると構文的に誤ったコードになります。(<div> の代わりに <>を使用できますが、基本的な考え方は同じで、インデントが余分に発生します)

Vueの場合、<template>要素でラップしなければなりません、これは冗長です。

バインディング(Bindings)

Reactでは、自分で入力イベントに対応しなければなりません。

function function handleChangeA(event: any): voidhandleChangeA(event: anyevent) {
	setA(+event: anyevent.target.value);
}

これは退屈で画面上に余分なスペースを取るだけでなく、余分なバグを生みかねません。概念的には、入力の値は a の値と結びついており、その逆も同様ですが、この関係が綺麗に表現されていません - その代わり、緊密に結合しているものの物理的には分離しているコードのチャンク(イベントハンドラと value={a} prop) になります。それだけでなく、+ 演算子で文字列の値が強制(coerce)されることも忘れないようにしないといけません( 訳注 : JavaScriptでは暗黙的に型が変換されるケースがあります。詳しくは Type coercion (型強制) - MDN Web Docs をご参照ください )。さもないと、2 + 2 が 4 ではなく 22 になってしまいます。

Svelteと同様、Vueにはバインディングを表現する方法があります - v-model属性です。ただし、数値入力であっても v-model.number を使うように気をつけなければなりません。

State

Svelteでは、ローカルコンポーネントのstateを代入演算子で更新します。

let let count: numbercount = 0;

function function increment(): voidincrement() {
	let count: numbercount += 1;
}

Reactでは、useStateフックを使用します。

const [const count: anycount, const setCount: anysetCount] = useState(0);

function function increment(): voidincrement() {
	const setCount: anysetCount(const count: anycount + 1);
}

これは かなりノイジー(much noisier) です。全く同じ概念を表現していますが文字が60%も多いです。コードを読む際に、その意図を理解するためにより多くの労力をかける必要があります。

一方Vueでは、デフォルトのエクスポートに data関数があり、ローカルのstateに対応するプロパティを持つオブジェクトリテラルを返します。ヘルパー関数や子コンポーネントなどは単純にインポートしてテンプレートで使用することはできません、デフォルトのエクスポートの正しい部分にアタッチして’登録’する必要があります。

ボイラープレートに終焉を(Death to boilerplate)

これらは、最小限の手間でユーザーインタフェースを構築するのにSvelteが役立つことの、ほんの一部に過ぎません。他には、例えばreactive declarations はReactのuseMemo、useCallback、useEffectにあたる動作をボイラープレート(あるいは、stateが変化するたびにインライン関数と配列を作成するのに伴うガベージコレクションのオーバーヘッド)なしで本質的に行います。

どうやって？別の制約セットを選択します。Svelteはコンパイラなので、JavaScriptの特性に縛られません : 言語のセマンティクスに合わせるのではなく、コンポーネントのオーサリングエクスペリエンスを設計できます。逆説的に言えば、結果としてよりイディオムなコードが可能になります - 例えば、プロキシやフックを経由するのではなく、自然に変数を使用することができます - しかも、よりパフォーマンスの高いアプリを提供することができます。

Svelte for new developers

Rich Harris — Tue, 16 Apr 2019 00:00:00 GMT

This short guide is designed to help you — someone who has looked at the tutorial and wants to start creating Svelte apps, but doesn’t have a ton of experience using JavaScript build tooling — get up and running.

If there are things that don’t make sense, or that we’re glossing over, feel free to raise an issue or suggest edits to this page that will help us help more people.

If you get stuck at any point following this guide, the best place to ask for help is in the chatroom.

First things first

You’ll be using the command line, also known as the terminal. On Windows, you can access it by running Command Prompt from the Start menu; on a Mac, hit Cmd and Space together to bring up Spotlight, then start typing Terminal.app. On most Linux systems, Ctrl-Alt-T brings up the command line.

The command line is a way to interact with your computer (or another computer! but that’s a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to-day.

Once on the command line, you can navigate the filesystem using ls (dir on Windows) to list the contents of your current directory, and cd to change the current directory. For example, if you had a Development directory of your projects inside your home directory, you would type

cd Development

to go to it. From there, you could create a new project directory with the mkdir command:

mkdir svelte-projects
cd svelte-projects

A full introduction to the command line is out of the scope of this guide, but here are a few more useful commands:

cd .. — navigates to the parent of the current directory
cat my-file.txt — on Mac/Linux (type my-file.txt on Windows), lists the contents of my-file.txt
open . (or start . on Windows) — opens the current directory in Finder or File Explorer

Installing Node.js

Node is a way to run JavaScript on the command line. It’s used by many tools, including Svelte. If you don’t yet have it installed, the easiest way is to download the latest version straight from the website.

Once installed, you’ll have access to three new commands:

node my-file.js — runs the JavaScript in my-file.js
npm [subcommand] — npm is a way to install ‘packages’ that your application depends on, such as the svelte package
npx [subcommand] — a convenient way to run programs available on npm without permanently installing them

Installing a text editor

To write code, you need a good editor. The most popular choice is Visual Studio Code or VSCode, and justifiably so — it’s well-designed and fully-featured, and has a wealth of extensions (including one for Svelte, which provides syntax highlighting and diagnostic messages when you’re writing components).

Creating a project

We’re going to use the Svelte + Vite template. You don’t have to use a project template, but it means you have to do a lot less setup work.

On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you’ll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):

npm create vite@latest my-svelte-project -- --template svelte
cd my-svelte-project
npm install

You can replace --template svelte with --template svelte-ts, if you prefer TypeScript.

This creates a new directory, my-svelte-project, adds files from the create-vite/template-svelte template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app’s ‘source code’ lives in the src directory, while the files your app can load are in public.

In the package.json file, there is a section called "scripts". These scripts define shortcuts for working with your application — dev, build and preview. To launch your app in development mode, type the following:

npm run dev

Running the dev script starts a program called Vite. Vite’s job is to take your application’s source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.

Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local web server (hence ‘localhost’) on port 5173.

Try changing src/App.svelte and saving it. The application will update with your changes.

Building your app

In the last step, we were running the app in ‘development mode’. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app’s JavaScript is compressed.

When you share your app with the world, you want to build it in ‘production mode’, so that it’s as small and efficient as possible for end users. To do that, use the build command:

npm run build

Your dist directory now contains an optimised version of your app. You can run it like so:

npm run preview

Svelte on The Changelog

Rich Harris — Thu, 31 Jan 2019 00:00:00 GMT

Earlier this month, I had the privilege of appearing on The Changelog, a podcast about software development. We had a fun (for me) and wide-ranging conversation:

life as a coder inside a newsroom
the big compilers-as-frameworks trend
scalability
the Great Divide

...and, most importantly, Svelte 3.

Unless you hang out in our Discord server or follow @sveltejs on BlueSky, you might not know that Svelte 3 is just around the corner, and it’s going to be a huge release. We’ve rethought the developer experience from the ground up, and while it will be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you’re going to love it.

On the podcast Adam, Jerod and I talk about some of the changes and why we’re making them. You can listen here or on the podcast page.

The Changelog 332: A UI framework without the framework – Listen on Changelog.com

仮想DOMは純粋なオーバーヘッド(Virtual DOM is pure overhead)

Rich Harris — Thu, 27 Dec 2018 00:00:00 GMT

ここ数年でJavaScriptフレームワークを使ったことがある人なら、’仮想DOMは速い’ というフレーズを聞いたことがあるでしょう、これはしばしば、実際のDOMよりも速い、という意味で言われることがあります。これは驚くほどしぶといミームです — 例えば、どうやってSvelteは仮想DOMを使わずに高速にできるのかを尋ねられることがありました。

では、じっくり見ていきましょう。

仮想DOMとは？

多くのフレームワークで、render()関数を作ってアプリを構築します。例えばシンプルな React コンポーネントでは:

function function HelloMessage(props: any): anyHelloMessage(props: anyprops) {
	return (
		<div className: stringclassName="greeting">
			Hello {props: anyprops.name}
		</div>
	);
}

JSXを使わずに同じことをするなら…

function function HelloMessage(props: any): anyHelloMessage(props: anyprops) {
	return React.createElement('div', { className: stringclassName: 'greeting' }, 'Hello ', props: anyprops.name);
}

…しかし、結果は同じで — ページがどのように見えるかを表現するオブジェクトになります。このオブジェクトは仮想DOMです。アプリのstateが更新されるたびに(例えば name prop が変わったとき)、これが新たに作成されます。フレームワークの仕事は、新しいオブジェクトと古いオブジェクトを調整し、どのような変更が必要か把握して、実際のDOMにそれを適用することです。

このミームはどう始まった？

仮想DOMのパフォーマンスに関する誤解された主張は、Reactの立ち上げまで遡ります。元ReactコアチームメンバーのPete Hunt氏による2013年の発展的な講演 Rethinking Best Practices で、私たちは次のことを学びました。

これは実際には非常に高速で、主な理由は、ほとんどのDOM操作は遅くなる傾向があるからです。DOMには多くのパフォーマンス作業がありますが、ほとんどのDOM操作はフレームをドロップする傾向があります。
※原文 : This is actually extremely fast, primarily because most DOM operations tend to be slow. There’s been a lot of performance work on the DOM, but most DOM operations tend to drop frames.

Screenshot from Rethinking Best Practices at JSConfEU 2013

しかし、ちょっと待ってください！　仮想DOMの操作は、実際のDOMに対する最終的な操作に 加えて 行われます。これを高速だと主張するには、より非効率なフレームワークと比較するか(2013年にはたくさんありました)、もしくは、実際には誰もやらないような架空の代替案に対して反論するしかありません。

onEveryStateChange(() => {
	var document: DocumentMDN Reference
document.Document.body: HTMLElementSpecifies the beginning and end of the document body.
MDN Reference
body.Element.innerHTML: stringMDN Reference
innerHTML = renderMyApp();
});

Peteはすぐ後に明確にしました…

Reactは魔法ではありません。C言語でアセンブラを使用してCコンパイラに勝つことができるのと同様に、必要に応じて生のDOMとDOM APIを使えばReactに勝つことができます。しかし、C や Java、JavaScript を使うと、プラットフォームの詳細について心配する必要がなくなるため、パフォーマンスが桁違いに向上します。Reactを使うことで、パフォーマンスを気にすることなくアプリケーションを構築することができますし、デフォルトの state は高速です。
※原文 : React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don’t have to worry...about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.

…しかし、それは行き詰まった部分ではありません。

それで…仮想DOMは遅い？

その表現は正しくありません。’仮想DOMは大抵、十分に速い’というほうがより近いですが、いくつかの注意点があります。

Reactの当初の約束は、パフォーマンスを心配することなく、state が1つ変更されるたびにアプリ全体を再レンダリングできる、というものでした。実際には、それは正確ではないと思います。もしそうなら、shouldComponentUpdate (コンポーネントを安全にスキップできるときにReactに伝える方法) のような最適化は必要ないはずです。

shouldComponentUpdate を使ったとしても、アプリ全体の仮想DOMを一度に更新するのは大変な作業です。しばらく前に、ReactチームはReact Fiberと呼ばれるものを導入し、更新をより小さなチャンクに分割できるようになりました。これは (とりわけ) 更新によってメインスレッドが長時間ブロックされないことを意味しますが、総作業量や更新にかかる時間が減るわけではありません。

オーバーヘッドはどこから？

ほぼ間違いなく、差分検出のコストはゼロではありません(原文 : diffing isn’t free)。まず仮想DOMとその直前のスナップショットの比較をしないと、変更を実際のDOMに適用できません。先ほどの HelloMessage の例で言えば、name propが ‘world’ から ‘everybody’ に変わったとします。

どちらのスナップショットにも単一の要素が含まれています。どちらの場合もそれは <div> であり、同じ DOM ノードを維持できることを意味します。
古い <div> と新しい <div> のすべての属性を列挙して、変更、追加、削除する必要があるか調べます。どちらも、値が "greeting" の className 属性だけがあります。
要素に降りていくと、テキストが変更されていることがわかるので、実際のDOMを更新する必要があります。

この3つのステップのうち、今回のケースでは3番目のステップだけが価値を持ちます、というのも — ほとんどの更新がそうであるように — アプリの基本構造は変わっていないからです。3番目のステップに直接進むことができれば、より効率的です:

if (changed.name) {
	text.data = const name: void@deprecatedname;
}

(これはSvelteが生成する更新のコードとほぼ同じです。従来のUIフレームワークとは異なり、Svelteは、 実行時 にこの作業をするのを待つのではなく、どのように変更されるか ビルド時 にわかるコンパイラです)

差分検出だけではありません

Reactや他の仮想DOMフレームワークで使われている差分検出アルゴリズムは高速です。議論の余地はありますが、より大きなオーバーヘッドはコンポーネント自体にあります。こんなコードは普通書かないと思います…

function function StrawManComponent(props: any): anyStrawManComponent(props: anyprops) {
	const const value: anyvalue = expensivelyCalculateValue(props: anyprops.foo);

	return <p>the value is {const value: anyvalue}</p>;
}

…なぜなら、props.foo が変更されたかどうかに関わらず、更新のたびに不注意に value を再計算してしまうからです。しかし、もっと無害に見える方法で、不必要な計算やアロケーションが行われてしまうことは非常に一般的です:

function function MoreRealisticComponent(props: any): anyMoreRealisticComponent(props: anyprops) {
	const [const selected: anyselected, const setSelected: anysetSelected] = useState(null);

	return (
		<div>
			<p>Selected {const selected: anyselected ? const selected: anyselected.name : 'nothing'}</p>

			<ul>
				{props: anyprops.items.map((item: anyitem) => (
					<li>
						<button onClick: () => anyonClick={() => const setSelected: anysetSelected(item: anyitem)}>{item: anyitem.name}</button>
					</li>
				))}
			</ul>
		</div>
	);
}

ここでは、props.items が変化したかどうかに関わらず、仮想的な <li> 要素の新しい配列（それぞれがインラインのイベントハンドラを持つ）をそれぞれの状態が変化するたびに生成しています。よっぽどパフォーマンスにこだわっていない限り、これを最適化することはないでしょう。意味がありません。これで十分に速いのですから。しかし、さらに速い方法がわかりますか？ こうしないことです 。

デフォルトで不必要な作業を行うことは危険で、たとえその作業が些細なものであっても、最適化の際に明確なボトルネックがないためにアプリがやがて ‘じわじわと破滅に向かう’(原文 : death by a thousand cuts)ことに屈してしまいます。

Svelteは、そのような状況に陥らないよう明示的に設計されています。

では、なぜフレームワークは仮想DOMを使うのか？

重要なのは、仮想DOMは 機能ではない ということです。それは目的を達成するための手段であり、その目的とは宣言的で状態駆動型のUI開発です。仮想DOMは、状態遷移を考えることなくアプリケーションを開発できるようにし、 一般的には十分な パフォーマンスを得られるという点で価値があります。つまり、バグを減らし、退屈な作業ではなく創造的な作業に多くの時間を費やすことができるようになります。

しかし、仮想DOMを使用せずに同様のプログラミングモデルを実現できることがわかりました — つまりSvelteの登場です。

Using CSS-in-JS with Svelte

Rich Harris — Wed, 26 Dec 2018 00:00:00 GMT

CSS is a core part of any web app. By extension, a UI framework that doesn’t have a built-in way to add styles to your components is unfinished.

That’s why Svelte allows you to add CSS in a component’s <style> tag. Co-locating your CSS with your markup means we can solve the biggest problems developers face when writing CSS without introducing new ones, all while providing a rather nice development experience.

But Svelte’s style handling does have some limitations. It’s too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library.

For example

Here, we’re using Emotion to generate scoped class names that can be used across multiple components:

It’s important to note that most CSS-in-JS libraries have a runtime library, and many don’t support statically extracting styles out into a separate .css file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it’s necessary for your application!

Note that you can mix-and-match — you can still use Svelte’s built-in CSS handling alongside a CSS-in-JS library.

Svelte v2 is out!

Rich Harris — Wed, 18 Apr 2018 00:00:00 GMT

Almost a year after we first started talking about version 2 on the Svelte issue tracker, it’s finally time to make some breaking changes. This blog post will explain what changed, why it changed, and what you need to do to bring your apps up to date.

tl;dr

Each of these items is described in more depth below. If you get stuck, ask for help in our friendly Discord chatroom.

Install Svelte v2 from npm
Upgrade your templates with svelte-upgrade
Remove calls to component.observe, or add the observe method from svelte-extras
Rewrite calls to component.get('foo') as component.get().foo
Return destroy from your custom event handlers, rather than teardown
Make sure you’re not passing numeric string props to components

New template syntax

The most visible change: we’ve made some improvements to the template syntax.

A common piece of feedback we heard was ‘ewww, Mustache’ or ‘ewww, Handlebars’. A lot of people who used string-based templating systems in a previous era of web development really dislike them. Because Svelte adopted the {{curlies}} from those languages, a lot of people assumed that we somehow shared the limitations of those tools, such as weird scoping rules or an inability to use arbitrary JavaScript expressions.

Beyond that, JSX proved that double curlies are unnecessary. So we’ve made our templates more... svelte, by adopting single curlies. The result feels much lighter to look at and is more pleasant to type:

<h1>Hello {name}!</h1>

There are a few other updates. But you don’t need to make them manually — just run svelte-upgrade on your codebase:

npx svelte-upgrade v2 src

This assumes any .html files in src are Svelte components. You can specify whichever directory you like, or target a different directory — for example, you’d do npx svelte-upgrade v2 routes to update a Sapper app.

To see the full set of changes, consult the svelte-upgrade README.

Computed properties

Another thing that people often found confusing about Svelte is the way computed properties work. To recap, if you had a component with this...

export default {
	computed: {
    d: (a: any, b: any, c: any) => any;
}computed: {
		d: (a: any, b: any, c: any) => anyd: (a: anya, b: anyb, c: anyc) => (a: anya = b: anyb + c: anyc)
	}
};

...then Svelte would first look at the function arguments to see which values d depended on, and then it would write code that updated d whenever those values changed, by injecting them into the function. That’s cool, because it allows you to derive complex values from your component’s inputs without worrying about when they need to recomputed, but it’s also... weird. JavaScript doesn’t work that way!

In v2, we use destructuring instead:

export default {
	computed: {
    d: ({ a, b, c }: {
        a: any;
        b: any;
        c: any;
    }) => any;
}computed: {
		d: ({ a, b, c }: {
    a: any;
    b: any;
    c: any;
}) => anyd: ({ a: anya, b: anyb, c: anyc }) => (a: anya = b: anyb + c: anyc)
	}
};

The Svelte compiler can still see which values d depends on, but it’s no longer injecting values — it just passes the component state object into each computed property.

Again, you don’t need to make this change manually — just run svelte-upgrade on your components, as shown above.

Sorry, IE11. It’s not you, it’s... well actually, yeah. It’s you

Svelte v1 was careful to only emit ES5 code, so that you wouldn’t be forced to faff around with transpilers in order to use it. But it’s 2018 now, and almost all browsers support modern JavaScript. By ditching the ES5 constraint, we can generate leaner code.

If you need to support IE11 and friends, you will need to use a transpiler like Babel or Bublé.

New lifecycle hooks

In addition to oncreate and ondestroy, Svelte v2 adds two more lifecycle hooks for responding to state changes:

export default {
	function onstate({ changed, current, previous }: {
    changed: any;
    current: any;
    previous: any;
}): voidonstate({ changed: anychanged, current: anycurrent, previous: anyprevious }) {
		// this fires before oncreate, and
		// whenever state changes
	},

	function onupdate({ changed, current, previous }: {
    changed: any;
    current: any;
    previous: any;
}): voidonupdate({ changed: anychanged, current: anycurrent, previous: anyprevious }) {
		// this fires after oncreate, and
		// whenever the DOM has been updated
		// following a state change
	}
};

You can also listen to those events programmatically:

component.on('state', ({ changed: anychanged, current: anycurrent, previous: anyprevious }) => {
	// ...
});

component.observe

With the new lifecycle hooks, we no longer need the component.observe(...) method:

// before
export default {
	function oncreate(): voidoncreate() {
		this.observe('foo', foo: anyfoo => {
			var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
@sincev0.1.100log(`foo is now ${foo: anyfoo}`);
		});
	}
};

// after
export default {
	function onstate({ changed, current }: {
    changed: any;
    current: any;
}): voidonstate({ changed: anychanged, current: anycurrent }) {
		if (changed: anychanged.foo) {
			var console: ConsoleThe console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
@sincev0.1.100log(`foo is now ${current: anycurrent.foo}`);
		}
	}
};

This shrinks the amount of code Svelte needs to generate, and gives you more flexibility. For example, it’s now very easy to take action when any one of several properties have changed, such as redrawing a canvas without debouncing several observers.

However, if you prefer to use component.observe(...), then you can install it from svelte-extras:

import { import observeobserve } from 'svelte-extras';

export default {
	methods: {
    observe: any;
}methods: {
		observe: anyobserve
	}
};

component.get

This method no longer takes an optional key argument — instead, it always returns the entire state object:

// before
const const foo: anyfoo = this.get('foo');
const const bar: anybar = this.get('bar');

// after
const { const foo: anyfoo, const bar: anybar } = this.get();

This change might seem annoying initially, but it’s the right move: among other things, it’s likely to play better with type systems as we explore that space more fully in future.

event_handler.destroy

If your app has custom event handlers, they must return an object with a destroy method, not a teardown method (this aligns event handlers with the component API).

No more type coercion

Previously, numeric values passed to components were treated as numbers:

<Counter start="1" />

That causes unexpected behaviour, and has been changed: if you need to pass a literal number, do so as an expression:

<Counter start={1} />

Compiler changes

In most cases you’ll never need to deal with the compiler directly, so this shouldn’t require any action on your part. It’s worth noting anyway: the compiler API has changed. Instead of an object with a mish-mash of properties, the compiler now returns js, css, ast and stats:

const { const js: anyjs, const css: anycss, const ast: anyast, const stats: anystats } = svelte.compile(source, options);

js and css are both { code, map } objects, where code is a string and map is a sourcemap. The ast is an abstract syntax tree of your component, and the stats object contains metadata about the component, and information about the compilation.

Before, there was a svelte.validate method which checked your component was valid. That’s been removed — if you want to check a component without actually compiling it, just pass the generate: false option.

My app is broken! Help!

Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren’t mentioned here, swing by Discord chatroom or raise an issue on the tracker.

Sapper: 理想の Web アプリケーションフレームワークを目指して

Rich Harris — Sun, 31 Dec 2017 00:00:00 GMT

せっかちな人のためのクイックスタート: Sapper のドキュメント、スターターテンプレート

もし完璧な Node.js の Web アプリケーションフレームワークの特徴を挙げるとしたら、次のようなものを思いつくでしょう:

最初の読み込みの高速化や SEO 対策に支障をきたさないために、サーバーサイドレンダリングを行う
当然の結果として、アプリケーションのコードベースは普遍的である — サーバーとクライアント共通で1度だけコードを書く
クライアントサイドのアプリは、サーバーでレンダリングされた HTML を再レンダリングすると言うより既存の要素にイベントリスナ（などなど）をアタッチして ハイドレート する
瞬時に次のページに移動できる
オフラインや、その他のプログレッシブウェブアプリの特徴をすぐにサポートしている
最初のページに必要な JavaScript と CSS のみが最初に読み込まれる。つまり、フレームワークはルートレベルで自動的にコード分割を行い、より細かい手動制御のために動的な import(...) をサポートしている
パフォーマンスに妥協がない
ホットモジュールリローディングやその他痒い所に手が届く様々な機能など、最高の開発環境を提供している
出来上がったコードベースは、理解しやすくメンテナンス性が高い
システムのあらゆる側面を理解し、カスタマイズをすることができる — webpack の設定をフレームワークの中に閉じ込めず、できるだけ隠された「配管」を少なくしている
フレームワーク全体を1時間以内に学習することは、経験豊富な開発者でなくても簡単にできる

Next.js はこの理想に近いです。もし Next.js に出会ったことがないなら、 learnnextjs.com でチュートリアルを見てみることを強くおすすめします。 Next は素晴らしいアイディアをご紹介します: あなたのアプリケーションの全ページは your-project/pages ディレクトリにあるファイルで、それらのファイルのそれぞれが React のコンポーネントです。

それ以外のことについては、この画期的な設計の方針に基づいています。「コンポーネント名推測ゲーム」をして遊ぶわけではなくファイルシステムを見るだけでいいので、特定のページを受け持つコードを見つけるのは簡単です。プロジェクトの構造のことで無駄に細かいことを考える必要がある時代は終わりました。また、 SSR（サーバーサイドレンダリング）とコード分割の組み合わせは (React Router チームが「サーバーでレンダリングされ、コード分割されたアプリに挑戦する人たちに神の祝福あれ」と言って断念したものではありますが) 些細なことです。

それでも、完璧なわけではありません。 とても素晴らしいもの の粗探しをするのは無粋かもしれませんが、いくつか挙げられます:

Next は「ルートマスキング」と呼ばれる機能を使ってイケてる URL を生成します (例えば /post?slug=hello-world の代わりに /blog/hello-world)。これは、アプリケーションの構造に対するディレクトリ構造の保証を損なうものであり、2つの構造の形式の間で変換する設定を維持する必要があります。
全てのルーティングは普遍的な「ページ」であると想定されます。しかしながら、 301 redirect やページにデータを提供する API エンドポイントのような、サーバーでのみレンダリングされるルーティングが必要になることは一般的にあることで、 Next はこれに関して良い解決策を持っていません。こういったケースを処理するために server.js ファイルにロジックを追加することはできますが、これはページの宣言的なアプローチに相反するものです。
クライアントサイドのルーティングを利用する場合、リンクに標準的な <a> タグを使うことができません。代わりに、例えば本ブログ記事のようなマークダウンコンテンツでは利用不可能な、フレームワーク固有の <Link> コンポーネントを使わなければいけません

しかしながら、実際の問題として、これらのような良い機能には代償が伴います。もっともシンプルな Next のアプリケーションは、 — 静的なテキストを表示する「hello world」ページですが — 66kb の圧縮された JavaScript を含みます。解凍すると 204kb になりますが、これは、パフォーマンスがユーザーの定着率を左右する重要な要素であるときに、モバイルデバイスが一度に解析するには大きく問題のあるコードの量です。そして、これが ベースライン になります。

私たちなら、もっとより良くできます！

フレームワークパラダイムシフトとしてのコンパイラ

Svelte は根本的な思想を紹介しています: UIフレークワークがフレームワークではなく、コンポーネントをスタンドアロンな JavaScript モジュールに変換するコンパイラだったらどうですか？React や Vue のような、アプリのことを何も知らず無難なソリューションにならざるを得ないライブラリを使う代わりに、私たちは高度に最適化された純粋な JavaScript を送り出すことができます。アプリケーションに必要なコードだけで、仮想DOMをベースとしたソリューションのようなメモリやパフォーマンスのオーバーヘッドはありません。

JavaScript の世界はこのモデルに向かっています。 Stencil は Ionic のチームによる Svelte からインスピレーションを受けたフレームワークで、 Web コンポーネントにコンパイルされます。 Glimmer はスタンドアロンな JavaScript にコンパイル するわけではありませんが (その長所と短所については、別のブログの記事にしたいと思います)、このチームはテンプレートをバイトコードにコンパイルすることについての興味深い研究を行なっています。 (React はこのような動きに足を踏み入れていますが、彼らの現在の研究は JSX で書かれたアプリケーションのコードを最適化することに焦点を当てており、これは間違いなく Angular、 Ractive、そして Vue がここ数年で行なっている事前最適化によく似たものです)

私たちがこの新しいモデルを出発点として用いるとどうなるのでしょうか？

Sapper の紹介

Sapper はその問いへの答えです。 Sapper は Next.js スタイルのフレームワークで、この記事の上部にある11の基準を満たしつつ、ブラウザに送信されるコードの量を劇的に減らすことを目的としています。 Express と互換性のあるミドルウェアとして実装されているため、理解しやすく、カスタマイズも容易に行えます。

同じ「hello world」のアプリケーションでも、React や Next では 204kb もあったものが、 Sapper ではたったの 7kb です。クライアントサイドのルーティングを処理する Sapper のごく僅かなランタイムを除いて、インタラクティブではないページでは 一切の JavaScript を読み込まないなどの最適化の可能性を探っていくうちに、将来的にこの数字はさらに小さくなっていくでしょう。

さらに、「RealWorld」の例はどうでしょうか？　好都合なことに、 Medium クローンの実装をフレームワークで開発するという RealWorld プロジェクトでは、その結果を知ることができます。 Sapper での実装では、インタラクティブなホームページを表示するのに 39.6kb (zip形式では 11.8kb) かかります。

アプリ全体のコストは 132.7kb (zip形式で 39.9kb) で、リファレンスの React/Redux での実装の 327kb (85.7kb) よりは著しく小さいですが、例え同じくらいの大きさであってもコード分割のおかげで 体感的には 速くなっています。そしてこれが重要なポイントです。アプリケーションではコード分割をする必要があると言われていますが、 React や Vue のような伝統的なフレームワークを利用している場合、最初にコードを分割するチャンクのサイズには厳しい下限があります — フレームワーク自体がアプリ全体のサイズの中で大部分を占めていると考えられるからです。 Svelte のアプローチは、もはやそのようなことはありません。

しかしサイズの話は物語の一部に過ぎません。また、 Svelte アプリケーションはパフォーマンスやメモリ効率が非常に高く、「ミニマル」や「シンプル」なUIライブラリを選択した場合に犠牲にしてしまうような強力な機能がこのフレームワークには含まれています。

トレードオフ

多くの開発者が Sapper を評価する際の最大の難点は、「それでも React は好きだし、使い方もすでに知ってるよ」ということでしょうが、それは妥当なことです。

そんな方々には、ぜひ代替フレームワークを試していただきたいと思います。嬉しい驚きがあるかも知れません！ Sapper による RealWorld の実装ではソースコードの総行数が 1,201 行なのに対し、リファレンスでの実装では 2,377 行となっています。これは、Svelte のテンプレート構文を使って概念を非常に簡潔に表現できるからで、5分もあればマスターできます。使われていないスタイルの削除と縮小化が組み込まれたscoped CSSを取得し、必要に応じて LESS のようなプリプロセッサを使用することができます。 Babel を使用する必要はありません。 SSR は、文字列を連結するだけなのでとてつもなく高速です。また、最近導入した svelte/storeは、コンポーネント階層間で状態を同期させる小さなグローバルストアです。最悪の場合、自分の正当性が証明されたような気になってしまうかも知れませんね！

とは言え、トレードオフもあります。いかなる「テンプレート言語」にも病的なまでに嫌悪感を抱く人がいますが、もしかしたらあなたも当てはまるかも知れません。 JSX の支持者は「それはただの JavaScript だ」と酷評するでしょうが、そこには React の最大の強みである、無限の柔軟性があるのです。そのような柔軟性にはトレードオフがつきものですが、ここでそれについて議論するつもりはありません。

そして、 エコシステム があります。特に React を取り巻く世界では、開発ツール、統合開発環境、付属ライブラリ、チュートリアル、 StackOverflow の回答、就職の機会に至るまで、他の追随を許さないものとなっています。確かに、ツールを選ぶ主な理由として「エコシステム」を挙げるのは、無難な位置にとどまってしまっていて進歩の波に取り残されがちであることを示していますが、それでも既存の企業にとっては大きなポイントになります。

ロードマップ

まだバージョン 1.0.0 ではありませんし、そこに辿り着くまでにいくつか修正する点があるかも知れません。それが実現した暁には (もうすぐです！)、ワクワクするようなたくさんの可能性を秘めているでしょう。

私は、 Web パフォーマンスにおける次の新天地は「アプリケーション全体の最適化」だと考えています。現在、 Svelte のコンパイラはコンポーネントレベルで動作していますが、コンポーネント間 の境界を解釈することができるコンパイラがあれば、より効率的なコードを生成することができます。 React チームの Prepack の研究も同様の考え方に基づいていますし、 Glimmer チームもこの分野で興味深い研究を行なっています。 Svelte と Sapper はこれらのアイディアを活かすことのできるポジションにいます。

Glimmerといえば、コンポーネントをバイトコードにコンパイルするというアイディアは、2018年にはおそらく盗むことになるでしょう。 Sapper のようなフレームワークは、アプリの特性に応じてどのコンパイルモードを使うかを決めることができます。初回のルーティングでは JavaScript を提供して起動時間を最短にし、その後のルーティングではバイトコードインタプリタを遅延なく提供することで、起動サイズとアプリ全体のサイズの最適な組み合わせを実現することもできます。

とは言え、 Sapper の方向性の大部分はユーザーに決めてもらいたいと考えています。あなたが最先端の生活を楽しみ、 Web アプリケーションの構築方法の未来を形作る手助けをしたいと思っている開発者であれば、ぜひ私たちの GitHub や Discord に参加してください。

The zen of Just Writing CSS

Rich Harris — Wed, 06 Sep 2017 00:00:00 GMT

It’s fashionable to dislike CSS. There are lots of reasons why that’s the case, but it boils down to this: CSS is unpredictable. If you’ve never had the experience of tweaking a style rule and accidentally breaking some layout that you thought was completely unrelated — usually when you’re trying to ship — then you’re either new at this or you’re a much better programmer than the rest of us.

So the JavaScript community rolled up its sleeves and got to work. Over the last couple of years, there’s been a Cambrian explosion of libraries aimed at making CSS behave, collectively referred to as CSS-in-JS.

What you might not realise is that the biggest problems with CSS can be solved without CSS-in-JS. Without those problems, writing CSS isn’t just tolerable — it’s enjoyable. And you don’t have to find solutions to the additional problems that CSS-in-JS introduces.

This article isn’t in any way intended as criticism of the hard work the CSS-in-JS community has done. It’s one of the most active corners of the JS ecosystem, and new ideas are springing up every week. Instead, my purpose is to illustrate why an alternative approach — based on Single File Components with real CSS — is so damn delightful.

The biggest problem with CSS

Everything in CSS is global. Because of that, styles intended for one bit of markup often end up affecting another. Because of that, developers often resort to wild namespacing conventions (not ‘rules’, since they’re very difficult to enforce) that mostly just increase your risk of RSI.

It gets worse when you’re working on a team. No one dares touch styles authored by someone else, because it’s often unclear what they’re doing, what markup they apply to, and what disasters will unfold if you remove them.

The consequence of all this is the append-only stylesheet. There’s no way of knowing which code can safely be removed, so it’s common to undo some existing style with another, more specific style — even on relatively small projects.

Single File Components change all that

The idea behind SFCs is simple: you write your components in an HTML file that (optionally) contains a <style> and <script> attribute describing the component’s styles and behaviour. Svelte, Ractive, Vue and Polymer all follow this basic pattern.

(For the rest of this article we’ll be using Svelte, obviously. But if the idea of using a template language makes you shudder — your fears are misplaced, but that’s a topic for another day — then just use Vue which lets you use JSX in your SFCs.)

Several wonderful things happen as a result:

Your styles are scoped to the component. No more leakage, no more unpredictable cascade. And no more sesquipedalian classnames designed to prevent conflicts.
You don’t need to go spelunking through your folder structure to find the rules that are breaking your stuff.
The compiler (in Svelte’s case) can identify and remove unused styles. No more append-only stylesheets!

Let’s see what that looks like in practice.

Is this what they mean by 'use the platform'?

Every code editor already knows about CSS, so there’s a good chance that you’ll get autocomplete, linting, syntax highlighting and so on — all without additional JS-fatigue-inducing tools.

And because it’s real CSS, rather than some camelCased quotes-everywhere impostor, we can take advantage of the ‘tweak in devtools, paste back into our source code’ workflow, which I personally couldn’t live without. Notice that we get CSS sourcemaps out of the box, so you can instantly pinpoint the lines in question. It’s hard to overstate the importance of this: when you’re in WYSIWYG mode, you’re not thinking in terms of your component tree, so having a robust way to figure out where these damn styles came from is essential. Doubly so if someone else originally wrote the component. (I promise you, this is the single biggest productivity boost to your CSS workflow. If you’re writing styles without sourcemaps, you are almost certainly wasting a lot of time. I know I was.)

Svelte transforms your selectors (using an attribute that’s also applied to affected elements, though the exact mechanism is unimportant and subject to change) to achieve the scoping. It warns on and removes any unused rules, then it minifies the result and lets you write it out to a .css file. There’s also an experimental new option to compile to web components, using shadow DOM to encapsulate the styles, if that’s your jam.

This is all possible because your CSS is parsed (with css-tree) and statically analysed in the context of your markup. Static analysis opens the doors to all kinds of exciting future possibilities — smarter optimisations, a11y hints — that are much harder if your styles are computed dynamically at runtime. We’re just getting started.

But we can add tools to do [x]!

If your reaction to the video was ‘fine, but if we use TypeScript and write plugins for each editor then we can get all the autocomplete and syntax highlighting stuff’ — in other words, if you believe that in order to achieve parity with CSS it makes sense to build, document, promote and maintain a fleet of ancillary projects — then, well, you and I may never see eye to eye!

We don’t have all the answers — yet

Having said all that, CSS-in-JS does point to answers to some lingering questions:

How can we install styles from npm?
How can we reuse constants that are defined in a single place?
How can we compose declarations?

Personally, I haven’t found these issues to outweigh the benefits of the approach outlined above. You may well have a different set of priorities, and they may be reason enough for you to abandon CSS.

But at the end of the day, you have to know CSS anyway. Love it or loathe it, you must at least learn it. As custodians of the web, we have a choice: create abstractions that steepen the web dev learning curve yet further, or work together to fix the bad parts of CSS. I know which I choose.

フレームワークの無いフレームワーク: なぜもっと早く思いつかなかったのか

Rich Harris — Sat, 26 Nov 2016 00:00:00 GMT

待って、この新しいフレームワークには ランタイム があるの？うーん。ありがとう、やめておくよ。 – front end developers in 2018

私たちはあまりに多くのコードをユーザーに配布しています。多くのフロントエンド開発者と同じように私もこの事実を否定し、ページロードの際に 100kb の JavaScript を配布しても問題ないと考えていました。.jpg を1つ減らせば良いだけだと。そして 本当に 重要なのはアプリケーションがインタラクティブになった後のパフォーマンスだと考えていました。

しかし、私は間違っていました。100kb の .js は 100kb の .jpg と同じではありません。アプリの起動時のパフォーマンスを低下させるのはネットワークの時間だけではありません。script の解析と評価にも時間がかかり、その間ブラウザーは完全に無反応になります。モバイルでは、このミリ秒単位の時間があっという間に積み上がります。

これが問題であることに納得できないなら、Twitter で Alex Russell をフォローしてください。Alex は最近、フレームワークコミュニティで多くの友人を作ろうとしませんが、彼は間違っていません。しかし、Angular、React、Ember などのフレームワークの代替として提案されている Polymer は、フロントエンドの世界ではまだ普及していませんし、それは決してマーケティングが不足しているからではありません。

おそらく、全てを再考する必要があります。

フレームワークが本当に解決すること

フレームワークはコードの複雑さを管理しやすくする、というのが一般的な認識です。フレームワークは仮想DOMの差分検出などの技術によって面倒な実装の詳細を抽象化する、というものです。しかし、実際にはそうではありません。せいぜい、あなたが書かなければならないコードからあなたが書いていないコードに 複雑さを移動させる だけです。

むしろ、React のようなアイデアがこれほど成功した理由は、 コンセプト の複雑さを管理しやすくしているからです。フレームワークはコードではなく思考を構造化するためのツールです。

そう考えると、もしそのフレームワークが 実際にはブラウザーで動かない としたらどうでしょうか？　代わりに、Babel が ES2016+ から ES5 に変換するように、アプリケーションを純粋なJavaScriptに変換するとしたら？　重たいランタイムを配布するための初期コストを支払うことはなく、アプリは本当に高速になります。アプリとブラウザの間の抽象レイヤーがなくなるからです。

Introducing Svelte

Svelte はまさにそれを実現するフレームワークです。HTML、CSS、JavaScript (それと 5分以内に学べるちょっとしたこと) でコンポーネントを書き、Svelte がそれをビルドプロセスで小さなスタンドアローンの JavaScript モジュールにコンパイルします。コンポーネントのテンプレートを静的に解析することで、ブラウザーの作業を可能な限り少なくなるようにすることができます。

Svelte による TodoMVC の実装は 3.6kb (zipped) です。比較として、 アプリコードを除いた React と ReactDOM はおよそ 45kb (zipped) です。ブラウザーが React を評価するのにかかる時間は、Svelteがインタラクティブな TodoMVC を起動して実行するのにかかる時間の約10倍です。

そして js-framework-benchmark によれば、アプリが起動して実行されると Svelte はとてもつもなく高速です。React よりも速いです。Vue よりも速いです。Angular、Ember、Ractive、Preact、Riot、Mithrilよりも速いです。今のところ、おそらく世界で最も高速な UI フレームワークである Inferno (Dominic Gannaway は魔法使い(a wizard)なので) に匹敵します。(Svelte は要素の削除が遅いですが、それについては取り組んでいます)

基本的には純粋な JS と同じくらい速いです。実際、それは 純粋な JS なので 当然です。ただ、純粋な JS を書く必要がないというだけです。

本当に重要なことは

ええ、パフォーマンスはとても重要です。しかし、このアプローチの本当にエキサイティングなところは、Web 開発におけるいくつかの厄介な問題をついに解決できることです。

相互運用性について考えてみてください。npm install cool-calendar-widget を実行してアプリで使いたいですか？　これまでは、そのウィジェットがそのフレームワーク向けにデザインされていて、あなたがそのフレームワーク(の正しいバージョン)を使っているときに限りそれが可能でした。もし cool-calendar-widget が React で作られており、あなたが Angular を使っていたら、まあ、残念でしたね。しかし、もしそのウィジェットの作者が Svelte を使用した場合、そのウィジェットを使用するアプリを好きなテクノロジーで構築することができます。(TODOリスト : Svelte コンポーネントを Web Components に変換する方法)

他には、コード分割があります。これは素晴らしいアイデア (初期表示に必要なコードだけをロードし、残りは後で取得する) ですが、問題があります。100個の React コンポーネントではなく、最初に1個の React コンポーネントを配布するだけでも、 React自体を配布しなければなりません 。Svelteでは、フレームワークはコンポーネントに埋め込まれており、そのコンポーネントは小さいため、コード分割がより効果的です。

最後に、オープンソースのメンテナーとして悪戦苦闘してきたこと。ユーザーは常に自分の機能を優先してほしいし、その機能を必要としていない人に対してその機能のコストを低く見積もります。フレームワークの作者は、プロジェクトの長期的な健全性と、ユーザーのニーズを満たしたいという欲求との間でバランスを常に取り続けなければなりません。これはとてつもなく難しいことです。なぜなら、少しずつ大きくなっていく成果・結果を予測したりすることはできないですし、ましてや明確にすることは不可能です。また、(それまで熱狂的にツールを伝道してきた)人たちに、それらの機能に重要な部分が足りていないと伝えるには本格的なソフトスキルが必要です。しかし Svelte のようなアプローチでは、使用していない機能のコードはコンパイラによって生成されないため、多くの機能を追加しても、その機能を必要としていない人にそのコストを与えることは全くありません。

まだ始まったばかり

Svelteは非常に新しいです。ビルドツールのインテグレーション作成、サーバーサイドレンダラー、ホットリロード、トランジション、ドキュメントやサンプルの追加、スターターキットなど、まだまだやるべきことがたくさんあります。

しかし、すでにリッチなコンポーネントを構築することができます。それが stable な 1.0.0 のリリースに至った理由です。ガイドを読み、REPL で試して、そして GitHub にアクセスして、次世代のフロントエンド開発をスタートしてください。