diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 94f0340e8e..2aa885cfcb 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -37,6 +37,8 @@ If you have a stack trace to include, we recommend putting inside a ``
**Information about your Svelte project:**
+To make your life easier, just run `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers` and paste the output here.
+
- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
- Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
diff --git a/.gitignore b/.gitignore
index f7fac04eba..a471c3aaa2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,10 +18,6 @@ node_modules
/coverage/
/coverage.lcov
/test/*/samples/_
-/test/sourcemaps/samples/*/output.js
-/test/sourcemaps/samples/*/output.js.map
-/test/sourcemaps/samples/*/output.css
-/test/sourcemaps/samples/*/output.css.map
/yarn-error.log
_actual*.*
_output
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8af9c096de..29857123dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,29 @@
# Svelte changelog
+## Unreleased
+
+* Fix ordering of elements when using `{#if}` inside `{#key}` ([#5680](https://github.com/sveltejs/svelte/issues/5680))
+* Add `hasContext` lifecycle function ([#5690](https://github.com/sveltejs/svelte/pull/5690))
+* Fix missing `walk` types in `svelte/compiler` ([#5696](https://github.com/sveltejs/svelte/pull/5696))
+
+## 3.29.7
+
+* Include `./register` in exports map ([#5670](https://github.com/sveltejs/svelte/issues/5670))
+
+## 3.29.6
+
+* Include `./package.json` in export map ([#5659](https://github.com/sveltejs/svelte/issues/5659))
+
+## 3.29.5
+
+* Fix `$$props` and `$$restProps` when compiling to a custom element ([#5482](https://github.com/sveltejs/svelte/issues/5482))
+* Include an export map in `package.json` ([#5556](https://github.com/sveltejs/svelte/issues/5556))
+* Fix function calls in `` props that use contextual values ([#5565](https://github.com/sveltejs/svelte/issues/5565))
+* Fix handling aborted transitions in `{:else}` blocks ([#5573](https://github.com/sveltejs/svelte/issues/5573))
+* Add `Element` and `Node` to known globals ([#5586](https://github.com/sveltejs/svelte/issues/5586))
+* Fix `$$slots` when compiling to custom elements ([#5594](https://github.com/sveltejs/svelte/issues/5594))
+* Fix internal `import`s so that we're exposing a valid ES module ([#5617](https://github.com/sveltejs/svelte/issues/5617))
+
## 3.29.4
* Fix code generation error with `??` alongside logical operators ([#5558](https://github.com/sveltejs/svelte/issues/5558))
diff --git a/README.md b/README.md
index 9fbada7aa3..d1befaf1ce 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
-
+
diff --git a/package-lock.json b/package-lock.json
index 9da1189dcc..61afea32b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,9 +1,19 @@
{
"name": "svelte",
- "version": "3.29.4",
+ "version": "3.29.7",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
+ "@ampproject/remapping": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-0.3.0.tgz",
+ "integrity": "sha512-dqmASpaTCavldZqwdEpokgG4yOXmEiEGPP3ATTsBbdXXSKf6kx8jt2fPcKhodABdZlYe82OehR2oFK1y9gwZxw==",
+ "dev": true,
+ "requires": {
+ "@jridgewell/resolve-uri": "1.0.0",
+ "sourcemap-codec": "1.4.8"
+ }
+ },
"@babel/code-frame": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
@@ -36,6 +46,12 @@
"integrity": "sha512-KioOCsSvSvXx6xUNLiJz+P+VMb7NRcePjoefOr74Y5P6lEKsiOn35eZyZzgpK4XCNJdXTDR7+zykj0lwxRvZ2g==",
"dev": true
},
+ "@jridgewell/resolve-uri": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz",
+ "integrity": "sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==",
+ "dev": true
+ },
"@rollup/plugin-commonjs": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.0.tgz",
@@ -144,8 +160,8 @@
}
},
"@sveltejs/eslint-config": {
- "version": "github:sveltejs/eslint-config#5d1ba28f99568e42f26d9b7484ab57720f6ec9b4",
- "from": "github:sveltejs/eslint-config#v5.4.0",
+ "version": "github:sveltejs/eslint-config#cca8177349dd5a02b19a5865afc4a7066921409a",
+ "from": "github:sveltejs/eslint-config#v5.6.0",
"dev": true
},
"@tootallnate/once": {
@@ -3737,9 +3753,9 @@
}
},
"sourcemap-codec": {
- "version": "1.4.6",
- "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz",
- "integrity": "sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==",
+ "version": "1.4.8",
+ "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
"dev": true
},
"spdx-correct": {
diff --git a/package.json b/package.json
index 6d25f68a25..1103d56abb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte",
- "version": "3.29.4",
+ "version": "3.29.7",
"description": "Cybernetically enhanced web apps",
"module": "index.mjs",
"main": "index",
@@ -18,6 +18,44 @@
"svelte",
"README.md"
],
+ "exports": {
+ "./package.json": "./package.json",
+ ".": {
+ "import": "./index.mjs",
+ "require": "./index.js"
+ },
+ "./compiler": {
+ "import": "./compiler.mjs",
+ "require": "./compiler.js"
+ },
+ "./animate": {
+ "import": "./animate/index.mjs",
+ "require": "./animate/index.js"
+ },
+ "./easing": {
+ "import": "./easing/index.mjs",
+ "require": "./easing/index.js"
+ },
+ "./internal": {
+ "import": "./internal/index.mjs",
+ "require": "./internal/index.js"
+ },
+ "./motion": {
+ "import": "./motion/index.mjs",
+ "require": "./motion/index.js"
+ },
+ "./register": {
+ "require": "./register.js"
+ },
+ "./store": {
+ "import": "./store/index.mjs",
+ "require": "./store/index.js"
+ },
+ "./transition": {
+ "import": "./transition/index.mjs",
+ "require": "./transition/index.js"
+ }
+ },
"engines": {
"node": ">= 8"
},
@@ -37,7 +75,7 @@
"posttest": "agadoo internal/index.mjs",
"prepublishOnly": "npm run lint && PUBLISH=true npm test",
"tsd": "tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly",
- "lint": "eslint '{src,test}/**/*.{ts,js}'"
+ "lint": "eslint \"{src,test}/**/*.{ts,js}\""
},
"repository": {
"type": "git",
@@ -56,6 +94,7 @@
},
"homepage": "https://github.com/sveltejs/svelte#README",
"devDependencies": {
+ "@ampproject/remapping": "^0.3.0",
"@rollup/plugin-commonjs": "^11.0.0",
"@rollup/plugin-json": "^4.0.1",
"@rollup/plugin-node-resolve": "^6.0.0",
@@ -63,7 +102,7 @@
"@rollup/plugin-sucrase": "^3.0.0",
"@rollup/plugin-typescript": "^2.0.1",
"@rollup/plugin-virtual": "^2.0.0",
- "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.4.0",
+ "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.6.0",
"@types/mocha": "^7.0.0",
"@types/node": "^8.10.53",
"@typescript-eslint/eslint-plugin": "^3.0.2",
@@ -89,6 +128,7 @@
"rollup": "^1.27.14",
"source-map": "^0.7.3",
"source-map-support": "^0.5.13",
+ "sourcemap-codec": "^1.4.8",
"tiny-glob": "^0.2.6",
"tslib": "^1.10.0",
"typescript": "^3.5.3"
diff --git a/rollup.config.js b/rollup.config.js
index 82a2b9ae34..81fa24bd9f 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -20,7 +20,7 @@ const ts_plugin = is_publish
const external = id => id.startsWith('svelte/');
-fs.writeFileSync(`./compiler.d.ts`, `export { compile, parse, preprocess, VERSION } from './types/compiler/index';`);
+fs.writeFileSync(`./compiler.d.ts`, `export { compile, parse, preprocess, walk, VERSION } from './types/compiler/index';`);
export default [
/* runtime */
@@ -30,12 +30,12 @@ export default [
{
file: `index.mjs`,
format: 'esm',
- paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}`
+ paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
},
{
file: `index.js`,
format: 'cjs',
- paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}`
+ paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
}
],
external,
@@ -50,12 +50,12 @@ export default [
{
file: `${dir}/index.mjs`,
format: 'esm',
- paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}`
+ paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.mjs`
},
{
file: `${dir}/index.js`,
format: 'cjs',
- paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}`
+ paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.js`
}
],
external,
diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md
index 921e699842..76308da547 100644
--- a/site/content/blog/2019-04-16-svelte-for-new-developers.md
+++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md
@@ -45,7 +45,7 @@ A full introduction to the command line is out of the scope of this guide, but h
Once installed, you'll have access to three new commands:
* `node my-file.js` — runs the JavaScript in `my-file.js`
-* `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/) package
+* `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/package/svelte) package
* `npx [subcommand]` — a convenient way to run programs available on npm without permanently installing them
@@ -58,9 +58,7 @@ To write code, you need a good editor. The most popular choice is [Visual Studio
We're going to follow the instructions in part two of [The easiest way to get started with Svelte](/blog/the-easiest-way-to-get-started).
-First, we'll use npx to run [degit](https://github.com/Rich-Harris/degit), a program for cloning project templates from [GitHub](https://github.com) and other code storage websites. You don't have to use a project template, but it means you have to do a lot less setup work.
-
-(Eventually you'll probably have to learn [git](https://git-scm.com/), which most programmers use to manage their projects. But you don't need to worry about it just yet.)
+First, we'll use npx to run [degit](https://github.com/Rich-Harris/degit), a program for cloning project templates from [GitHub](https://github.com) and other code storage websites. You don't have to use a project template, but it means you have to do a lot less setup work. You will need to have [Git](https://git-scm.com/) installed in order to use degit. (Eventually you'll probably have to learn [Git](https://git-scm.com/) itself, which most programmers use to manage their projects.)
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):
diff --git a/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md b/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
new file mode 100644
index 0000000000..433bafaa29
--- /dev/null
+++ b/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
@@ -0,0 +1,46 @@
+---
+title: What's new in Svelte: November 2020
+description: Slot forwarding fixes, SvelteKit for faster local development, and more from Svelte Summit
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+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
+
+1. Destructuring Promises now works as expected by using the `{#await}` syntax
+ (**3.29.3**, [Example](https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
+2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](https://svelte.dev/repl/29959e70103f4868a6525c0734934936?version=3.29.3))
+3. 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](https://sapper.svelte.dev/docs#Typing_the_function) 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](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
+
+
+## [Svelte Summit](https://sveltesummit.com/) 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](https://www.youtube.com/watch?v=qSfdtmcZ4d0).
+- 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](https://www.youtube.com/playlist?list=PL8bMgX1kyZThM1sbYCoWdTcpiYysJsSeu)
+
+---
+
+## Community Showcase
+- [Svelte Lab](https://sveltelab.app/) 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](https://github.com/hjalmar/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](https://github.com/joshnuss/react-hooks-in-svelte) showcases examples of common React Hooks ported to Svelte.
+- [gurlic](https://gurlic.com/) is a social network and internet experiment that is super snappy thanks to Svelte
+- [Interference 2020](https://interference2020.org/) 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](https://github.com/relm-us/jitsi-svelte) lets you easily create your own custom Jitsi client by providing out-of-the-box components built with Svelte
+- [Ellx](https://ellx.io/) is part spreadsheet, part notebook and part IDE. It's super smooth thanks to Svelte 😎
+- [This New Zealand news site](https://www.nzherald.co.nz/nz/election-2020-latest-results-party-vote-electorate-vote-and-full-data/5CFVO4ENKNQDE3SICRRNPU5GZM/) breaks down the results of the 2020 Parliamentary elections using Svelte
+- [Budibase](https://github.com/Budibase/budibase) is a no-code app builder, powered by Svelte
+- [Svelt-yjs](https://github.com/relm-us/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](https://github.com/benflap/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!
+
+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](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
diff --git a/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md b/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
new file mode 100644
index 0000000000..f780cd0226
--- /dev/null
+++ b/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
@@ -0,0 +1,103 @@
+---
+title: What's the deal with SvelteKit?
+description: We're rethinking how to build Svelte apps. Here's what you need to know
+author: Rich Harris
+authorURL: https://twitter.com/rich_harris
+---
+
+
+
+If you attended [Svelte Summit](https://sveltesummit.com/) last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0?
+
+The answer: never.
+
+This was slightly tongue-in-cheek — as the talk explains, it's really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from the community, and it's time we offered a bit more clarity on what you can expect from Sapper's successor, SvelteKit.
+
+
+
+
+
+
+
+'Futuristic Web Development' from Svelte Summit
+
+
+
+
+## What's Sapper?
+
+[Sapper](https://sapper.svelte.dev) is an *app framework* (or 'metaframework') built on top of Svelte (which is a *component* framework). Its job is to make it easy to build Svelte apps with all the modern best practices like server-side rendering (SSR) and code-splitting, and to provide a project structure that makes development productive and fun. It uses *filesystem-based routing* (as popularised by [Next](https://nextjs.org/) and adopted by many other frameworks, albeit with some enhancements) — your project's file structure mirrors the structure of the app itself.
+
+While the Svelte homepage and documentation encourages you to [degit](https://github.com/Rich-Harris/degit) the [sveltejs/template](https://github.com/sveltejs/template) repo to start building an app, Sapper has long been our recommended way to build apps; this very blog post is (at the time of writing!) rendered with Sapper.
+
+
+## Why are we migrating to something new?
+
+Firstly, the distinction between [sveltejs/template](https://github.com/sveltejs/template) and [sveltejs/sapper-template](https://github.com/sveltejs/sapper-template) is confusing, particularly to newcomers to Svelte. Having a single recommended way to start building apps with Svelte will bring enormous benefits: we simplify onboarding, reduce the maintenance and support burden, and can potentially begin to explore the new possibilities that are unlocked by having a predictable project structure. (This last part is deliberately vague because it will take time to fully understand what those possibilities are.)
+
+Aside from all that, we've been tempted by the thought of rewriting Sapper for a while. This is partly because the codebase has become a little unkempt over the years ([Sapper started in 2017](/blog/sapper-towards-the-ideal-web-app-framework)), but mostly because the web has changed a lot recently, and it's time to rethink some of our foundational assumptions.
+
+
+## How is this new thing different?
+
+The first of those foundational assumptions is that you need to use a module bundler like [webpack](https://webpack.js.org/) or [Rollup](http://rollupjs.org/) to build apps. These tools trace the dependency graph of your application, analysing and transforming code along the way (turning Svelte components to JS modules, for example), in order to create bundles of code that can run anywhere. As the original creator of Rollup, I can attest that it is a surprisingly complex problem with fiendish edge cases.
+
+You certainly needed a bundler several years ago, because browsers didn't natively support the `import` keyword, but it's much less true today. Right now, we're seeing the rise of the *unbundled development* workflow, which is radically simpler: instead of eagerly bundling your app, a dev server can serve modules (converted to JavaScript, if necessary) *on-demand*, meaning startup is essentially instantaneous however large your app becomes.
+
+[Snowpack](https://www.snowpack.dev/) is at the vanguard of this movement, and it's what powers SvelteKit. It's astonishingly fast, and has a beautiful development experience (hot module reloading, error overlays and so on), and we've been working closely with the Snowpack team on features like SSR. The hot module reloading is particularly revelatory if you're used to using Sapper with Rollup (which has never had first-class HMR support owing to its architecture, which prioritises the most efficient output).
+
+That's not to say we're abandoning bundlers altogether. It's still essential to optimise your app for production, and SvelteKit uses Rollup to make your apps as fast and lean as they possibly can be (which includes things like extracting styles into static `.css` files).
+
+The other foundational assumption is that a server-rendered app needs, well, a server. Sapper effectively has two modes — `sapper build`, which creates a standalone app that has to run on a Node server, and `sapper export` which bakes your app out as a collection of static files suitable for hosting on services like GitHub Pages.
+
+Static files can go pretty much anywhere, but running a Node server (and monitoring/scaling it etc) is less straightforward. Nowadays we're witnessing a shift towards *serverless platforms*, in which you as the app author don't need to think about the server your code is running on, with all the attendant complexity. You can get Sapper apps running on serverless platforms, thanks to things like [vercel-sapper](https://github.com/thgh/vercel-sapper), but it's certainly not what you'd call idiomatic.
+
+
+
+SvelteKit fully embraces the serverless paradigm, and will launch with support for all the major serverless providers, with an 'adapter' API for targeting any platforms that we don't officially cater to. In addition, we'll be able to do partial pre-rendering, which means that static pages can be generated at build time but dynamic ones get rendered on-demand.
+
+
+## When can I start using it?
+
+If you're feeling brave, you can start right now:
+
+```bash
+npm init svelte@next
+```
+
+This will scaffold a new project and install the `@sveltejs/kit` CLI, which provides the tools for developing and building an app.
+
+We don't recommend it though! There are no docs, and we won't be able to offer any form of support. It's also likely to break often.
+
+The work is being done in a private monorepo while we're still in exploration mode. Our plan is to get a public beta ready and announce it here once we've closed a few issues — the repo itself will remain private at that time, but we'll create a place to collect feedback from the YOLO crowd. After that, we'll work towards a 1.0 release which will involve opening the repo up.
+
+I'm not going to make any firm promises about timings, because I don't like to break promises. But I *think* we're talking about weeks rather than months.
+
+
+## What if I don't want to use SvelteKit?
+
+You won't have to — it will always be possible to use Svelte as a standalone package or via a bundler integration like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte). We think it's essential that you can bend Svelte to fit your workflow, however esoteric, and use third-party app frameworks like [Elder.js](https://github.com/Elderjs/elderjs), [Routify](https://routify.dev/), [Plenti](https://plenti.co/), [Crown](https://crownframework.com/), [JungleJS](https://www.junglejs.org/) and others.
+
+
+## TypeScript?
+
+Don't worry, we won't launch without full TypeScript support.
+
+
+## How can I migrate my existing Sapper apps?
+
+For the most part, it should be relatively straightforward to migrate a Sapper codebase.
+
+There are some unavoidable changes (being able to run on serverless platforms means we need to replace custom `server.js` files and `(req, res) => {...}` functions with more portable equivalents), and we're taking the opportunity to fix a few design flaws, but on the whole a SvelteKit app will feel very familiar to Sapper users.
+
+Detailed migration guides will accompany the 1.0 launch.
+
+
+## How can I contribute?
+
+Keep your eyes peeled for announcements about when we'll launch the public beta and open up the repo. (Also, blog post TODO but I would be remiss if I didn't mention that we now have an [OpenCollective](https://opencollective.com/svelte) where you can contribute financially to the project if it's been valuable to you. Many, many thanks to those of you who already have.)
+
+
+## Where can I learn more?
+
+Follow [@sveltejs](https://twitter.com/sveltejs) and [@SvelteSociety](https://twitter.com/SvelteSociety) on Twitter, and visit [svelte.dev/chat](https://svelte.dev/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
\ No newline at end of file
diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index d955f650e2..ac7ca7abf3 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -300,6 +300,9 @@ An each block can also have an `{:else}` clause, which is rendered if the list i
```sv
{#await expression then name}...{/await}
```
+```sv
+{#await expression catch name}...{/await}
+```
---
@@ -342,6 +345,16 @@ If you don't care about the pending state, you can also omit the initial block.
{/await}
```
+---
+
+If conversely you only want to show the error state, you can omit the `then` block.
+
+```sv
+{#await promise catch error}
+
The error is {error}
+{/await}
+```
+
### {#key ...}
```sv
@@ -1317,6 +1330,31 @@ Named slots allow consumers to target specific areas. They can also have fallbac
```
+#### [`$$slots`](slots_object)
+
+---
+
+`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent does not pass in a slot with a particular name, that name will not be a present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it.
+
+Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `` to a child component, `$$slots.title` will be truthy within the child.
+
+```sv
+
+
+
Blog Post Title
+
+
+
+
+
+ {#if $$slots.description}
+
+
+
+ {/if}
+
+```
+
#### [``](slot_let)
---
diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
index 3b6df3071d..386c18d5fd 100644
--- a/site/content/docs/03-run-time.md
+++ b/site/content/docs/03-run-time.md
@@ -102,7 +102,7 @@ onDestroy(callback: () => void)
---
-Schedules a callback to run once the component is unmounted.
+Schedules a callback to run immediately before the component is unmounted.
Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
@@ -178,6 +178,26 @@ Retrieves the context that belongs to the closest parent component with the spec
```
+#### `hasContext`
+
+```js
+hasContext: boolean = hasContext(key: any)
+```
+
+---
+
+Checks whether a given `key` has been set in the context of a parent component. Must be called during component initialisation.
+
+```sv
+
+```
+
#### `createEventDispatcher`
```js
@@ -777,7 +797,7 @@ The `flip` function calculates the start and end position of an element and anim
* `delay` (`number`, default 0) — milliseconds before starting
* `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
-* `easing` (`function`, default [`cubicOut`](docs#cubicOut)) — an [easing function](docs#svelte_easing)
+* `easing` (`function`, default `cubicOut`) — an [easing function](docs#svelte_easing)
`duration` can be be provided as either:
diff --git a/site/content/examples/05-bindings/09-media-elements/App.svelte b/site/content/examples/05-bindings/09-media-elements/App.svelte
index 7a071dbe49..45345a39ff 100644
--- a/site/content/examples/05-bindings/09-media-elements/App.svelte
+++ b/site/content/examples/05-bindings/09-media-elements/App.svelte
@@ -115,8 +115,9 @@
on:mousedown={handleMousedown}
bind:currentTime={time}
bind:duration
- bind:paused
- >
+ bind:paused>
+
+
diff --git a/site/content/examples/15-composition/04-conditional-slots/App.svelte b/site/content/examples/15-composition/04-conditional-slots/App.svelte
new file mode 100644
index 0000000000..69142b807d
--- /dev/null
+++ b/site/content/examples/15-composition/04-conditional-slots/App.svelte
@@ -0,0 +1,13 @@
+
+
+
+ Bob
+ bob@email.com
+
+
+
+ Alice
+ 12345678
+
diff --git a/site/content/examples/15-composition/04-conditional-slots/Profile.svelte b/site/content/examples/15-composition/04-conditional-slots/Profile.svelte
new file mode 100644
index 0000000000..09026cd6d6
--- /dev/null
+++ b/site/content/examples/15-composition/04-conditional-slots/Profile.svelte
@@ -0,0 +1,24 @@
+
+
+
+
Name
+
+ {#if $$slots.email}
+
Email
+
+ {/if}
+ {#if $$slots.phone}
+
Phone
+
+ {/if}
+
diff --git a/site/content/examples/15-composition/04-conditional-slots/meta.json b/site/content/examples/15-composition/04-conditional-slots/meta.json
new file mode 100644
index 0000000000..95809f4c93
--- /dev/null
+++ b/site/content/examples/15-composition/04-conditional-slots/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "Conditional Slots"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-composition/04-modal/App.svelte b/site/content/examples/15-composition/05-modal/App.svelte
similarity index 100%
rename from site/content/examples/15-composition/04-modal/App.svelte
rename to site/content/examples/15-composition/05-modal/App.svelte
diff --git a/site/content/examples/15-composition/04-modal/Modal.svelte b/site/content/examples/15-composition/05-modal/Modal.svelte
similarity index 100%
rename from site/content/examples/15-composition/04-modal/Modal.svelte
rename to site/content/examples/15-composition/05-modal/Modal.svelte
diff --git a/site/content/examples/15-composition/04-modal/meta.json b/site/content/examples/15-composition/05-modal/meta.json
similarity index 100%
rename from site/content/examples/15-composition/04-modal/meta.json
rename to site/content/examples/15-composition/05-modal/meta.json
diff --git a/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte b/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
index d40c45ef6c..f8f93edc2b 100644
--- a/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
@@ -5,9 +5,9 @@
onMount(() => {
const ctx = canvas.getContext('2d');
- let frame;
+ let frame = requestAnimationFrame(loop);
- (function loop() {
+ function loop(t) {
frame = requestAnimationFrame(loop);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -17,8 +17,6 @@
const x = i % canvas.width;
const y = i / canvas.height >>> 0;
- const t = window.performance.now();
-
const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
const b = 128;
@@ -30,7 +28,7 @@
}
ctx.putImageData(imageData, 0, 0);
- }());
+ }
return () => {
cancelAnimationFrame(frame);
diff --git a/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
index 8e4b3c5bef..17005e273a 100644
--- a/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
@@ -5,9 +5,9 @@
onMount(() => {
const ctx = canvas.getContext('2d');
- let frame;
+ let frame = requestAnimationFrame(loop);
- (function loop() {
+ function loop(t) {
frame = requestAnimationFrame(loop);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -17,8 +17,6 @@
const x = i % canvas.width;
const y = i / canvas.height >>> 0;
- const t = window.performance.now();
-
const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
const b = 128;
@@ -30,7 +28,7 @@
}
ctx.putImageData(imageData, 0, 0);
- }());
+ }
return () => {
cancelAnimationFrame(frame);
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
new file mode 100755
index 0000000000..80a4df59f8
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
@@ -0,0 +1,57 @@
+
+
+
+
+
+ {/if}
+
diff --git a/site/content/tutorial/14-composition/04-optional-slots/text.md b/site/content/tutorial/14-composition/04-optional-slots/text.md
new file mode 100644
index 0000000000..b875f4c87d
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/text.md
@@ -0,0 +1,28 @@
+---
+title: Checking for slot content
+---
+
+In some cases, you may want to control parts of your component based on whether the parent passes in content for a certain slot. Perhaps you have a wrapper around that slot, and you don't want to render it if the slot is empty. Or perhaps you'd like to apply a class only if the slot is present. You can do this by checking the properties of the special `$$slots` variable.
+
+`$$slots` is an object whose keys are the names of the slots passed in by the parent component. If the parent leaves a slot empty, then `$$slots` will not have an entry for that slot.
+
+Notice that both instances of `` in this example render a container for comments and a notification dot, even though only one has comments. We want to use `$$slots` to make sure we only render these elements when the parent `` passes in content for the `comments` slot.
+
+In `Project.svelte`, update the `class:has-discussion` directive on the ``:
+
+```html
+
+```
+
+Next, wrap the `comments` slot and its wrapping `
` in an `if` block that checks `$$slots`:
+
+```html
+{#if $$slots.comments}
+
+
Comments
+
+
+{/if}
+```
+
+Now the comments container and the notification dot won't render when `` leaves the `comments` slot empty.
diff --git a/site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte b/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
similarity index 100%
rename from site/content/tutorial/14-composition/04-slot-props/app-a/App.svelte
rename to site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
diff --git a/site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte b/site/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
similarity index 100%
rename from site/content/tutorial/14-composition/04-slot-props/app-a/Hoverable.svelte
rename to site/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
diff --git a/site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte b/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
similarity index 100%
rename from site/content/tutorial/14-composition/04-slot-props/app-b/App.svelte
rename to site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
diff --git a/site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte b/site/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
similarity index 100%
rename from site/content/tutorial/14-composition/04-slot-props/app-b/Hoverable.svelte
rename to site/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
diff --git a/site/content/tutorial/14-composition/04-slot-props/text.md b/site/content/tutorial/14-composition/05-slot-props/text.md
similarity index 100%
rename from site/content/tutorial/14-composition/04-slot-props/text.md
rename to site/content/tutorial/14-composition/05-slot-props/text.md
diff --git a/site/src/routes/blog/[slug].svelte b/site/src/routes/blog/[slug].svelte
index b97b5ef136..236d649d56 100644
--- a/site/src/routes/blog/[slug].svelte
+++ b/site/src/routes/blog/[slug].svelte
@@ -172,17 +172,4 @@
margin: 2em auto;
}
}
-
- /* @media (min-width: 1460px) {
- .post :global(iframe) {
- width: 1360px;
- margin: 2em -280px;
- }
- }
-
- @media (min-height: 800px) {
- .post :global(iframe) {
- height: 640px;
- }
- } */
diff --git a/site/static/prism.css b/site/static/prism.css
index c803829288..0bedd0f02b 100644
--- a/site/static/prism.css
+++ b/site/static/prism.css
@@ -7,12 +7,12 @@
/* colors --------------------------------- */
pre[class*='language-'] {
--background: var(--back-light);
- --base: hsl(45, 7%, 45%);
- --comment: hsl(210, 25%, 60%);
- --keyword: hsl(204, 58%, 45%);
- --function: hsl(19, 67%, 45%);
- --string: hsl(41, 37%, 45%);
- --number: hsl(102, 27%, 50%);
+ --base: #545454;
+ --comment: #696969;
+ --keyword: #007f8a;
+ --function: #bb5525;
+ --string: #856e3d;
+ --number: #008000;
--tags: var(--function);
--important: var(--string);
}
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
index c16862165c..b2c8820351 100644
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -29,7 +29,9 @@ import add_to_set from './utils/add_to_set';
import check_graph_for_cycles from './utils/check_graph_for_cycles';
import { print, x, b } from 'code-red';
import { is_reserved_keyword } from './utils/reserved_keywords';
+import { apply_preprocessor_sourcemap } from '../utils/string_with_sourcemap';
import Element from './nodes/Element';
+import { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping/dist/types/types';
interface ComponentOptions {
namespace?: string;
@@ -267,17 +269,13 @@ export default class Component {
this.helpers.set(name, alias);
node.name = alias.name;
}
- }
-
- else if (node.name[0] !== '#' && !is_valid(node.name)) {
+ } else if (node.name[0] !== '#' && !is_valid(node.name)) {
// this hack allows x`foo.${bar}` where bar could be invalid
const literal: Literal = { type: 'Literal', value: node.name };
if (parent.type === 'Property' && key === 'key') {
parent.key = literal;
- }
-
- else if (parent.type === 'MemberExpression' && key === 'property') {
+ } else if (parent.type === 'MemberExpression' && key === 'property') {
parent.property = literal;
parent.computed = true;
}
@@ -330,6 +328,8 @@ export default class Component {
js.map.sourcesContent = [
this.source
];
+
+ js.map = apply_preprocessor_sourcemap(this.file, js.map, compile_options.sourcemap as (string | RawSourceMap | DecodedSourceMap));
}
return {
@@ -521,8 +521,7 @@ export default class Component {
if (this.hoistable_nodes.has(node)) return false;
if (this.reactive_declaration_nodes.has(node)) return false;
if (node.type === 'ImportDeclaration') return false;
- if (node.type === 'ExportDeclaration' && node.specifiers.length > 0)
- return false;
+ if (node.type === 'ExportDeclaration' && node.specifiers.length > 0) return false;
return true;
});
}
@@ -1038,8 +1037,9 @@ export default class Component {
this.vars.find(
variable => variable.name === name && variable.module
)
- )
+ ) {
return false;
+ }
return true;
});
@@ -1288,8 +1288,9 @@ export default class Component {
declaration.dependencies.forEach(name => {
if (declaration.assignees.has(name)) return;
const earlier_declarations = lookup.get(name);
- if (earlier_declarations)
+ if (earlier_declarations) {
earlier_declarations.forEach(add_declaration);
+ }
});
this.reactive_declarations.push(declaration);
@@ -1319,8 +1320,9 @@ export default class Component {
if (globals.has(name) && node.type !== 'InlineComponent') return;
let message = `'${name}' is not defined`;
- if (!this.ast.instance)
+ if (!this.ast.instance) {
message += `. Consider adding a ` : match;
+
+ if (!processed) return no_change();
+ if (processed.dependencies) dependencies.push(...processed.dependencies);
+ return get_replacement(filename, offset, get_location, content, processed, `<${tag_name}${attributes}>`, ``);
}
);
+ source = res.string;
+ sourcemap_list.unshift(res.map);
+ }
+
+ for (const fn of script) {
+ await preprocess_tag_content('script', fn);
}
for (const fn of style) {
- source = await replace_async(
- source,
- /|([^]*?)<\/style>|\/>)/gi,
- async (match, attributes = '', content = '') => {
- if (!attributes && !content) {
- return match;
- }
- const processed: Processed = await fn({
- content,
- attributes: parse_attributes(attributes),
- filename
- });
- if (processed && processed.dependencies) dependencies.push(...processed.dependencies);
- return processed ? `${processed.code}` : match;
- }
- );
+ await preprocess_tag_content('style', fn);
}
+ // Combine all the source maps for each preprocessor function into one
+ const map: RawSourceMap = combine_sourcemaps(
+ filename,
+ sourcemap_list
+ );
+
return {
// TODO return separated output, in future version where svelte.compile supports it:
// style: { code: styleCode, map: styleMap },
@@ -138,7 +220,7 @@ export default async function preprocess(
code: source,
dependencies: [...new Set(dependencies)],
-
+ map: (map as object),
toString() {
return source;
}
diff --git a/src/compiler/utils/fuzzymatch.ts b/src/compiler/utils/fuzzymatch.ts
index 0891b7209b..8b22a4175d 100644
--- a/src/compiler/utils/fuzzymatch.ts
+++ b/src/compiler/utils/fuzzymatch.ts
@@ -13,8 +13,9 @@ const GRAM_SIZE_UPPER = 3;
// return an edit distance from 0 to 1
function _distance(str1: string, str2: string) {
- if (str1 === null && str2 === null)
+ if (str1 === null && str2 === null) {
throw 'Trying to compare two null values';
+ }
if (str1 === null || str2 === null) return 0;
str1 = String(str1);
str2 = String(str2);
diff --git a/src/compiler/utils/names.ts b/src/compiler/utils/names.ts
index 7b6a6f55e0..255d56a218 100644
--- a/src/compiler/utils/names.ts
+++ b/src/compiler/utils/names.ts
@@ -13,6 +13,7 @@ export const globals = new Set([
'decodeURI',
'decodeURIComponent',
'document',
+ 'Element',
'encodeURI',
'encodeURIComponent',
'Error',
@@ -36,6 +37,7 @@ export const globals = new Set([
'NaN',
'navigator',
'Number',
+ 'Node',
'Object',
'parseFloat',
'parseInt',
diff --git a/src/compiler/utils/string_with_sourcemap.ts b/src/compiler/utils/string_with_sourcemap.ts
new file mode 100644
index 0000000000..421a0c1fbd
--- /dev/null
+++ b/src/compiler/utils/string_with_sourcemap.ts
@@ -0,0 +1,276 @@
+import { DecodedSourceMap, RawSourceMap, SourceMapLoader } from '@ampproject/remapping/dist/types/types';
+import remapping from '@ampproject/remapping';
+import { SourceMap } from 'magic-string';
+
+type SourceLocation = {
+ line: number;
+ column: number;
+};
+
+function last_line_length(s: string) {
+ return s.length - s.lastIndexOf('\n') - 1;
+}
+
+// mutate map in-place
+export function sourcemap_add_offset(
+ map: DecodedSourceMap, offset: SourceLocation
+) {
+ if (map.mappings.length == 0) return map;
+ // shift columns in first line
+ const segment_list = map.mappings[0];
+ for (let segment = 0; segment < segment_list.length; segment++) {
+ const seg = segment_list[segment];
+ if (seg[3]) seg[3] += offset.column;
+ }
+ // shift lines
+ for (let line = 0; line < map.mappings.length; line++) {
+ const segment_list = map.mappings[line];
+ for (let segment = 0; segment < segment_list.length; segment++) {
+ const seg = segment_list[segment];
+ if (seg[2]) seg[2] += offset.line;
+ }
+ }
+}
+
+function merge_tables(this_table: T[], other_table: T[]): [T[], number[], boolean, boolean] {
+ const new_table = this_table.slice();
+ const idx_map = [];
+ other_table = other_table || [];
+ let val_changed = false;
+ for (const [other_idx, other_val] of other_table.entries()) {
+ const this_idx = this_table.indexOf(other_val);
+ if (this_idx >= 0) {
+ idx_map[other_idx] = this_idx;
+ } else {
+ const new_idx = new_table.length;
+ new_table[new_idx] = other_val;
+ idx_map[other_idx] = new_idx;
+ val_changed = true;
+ }
+ }
+ let idx_changed = val_changed;
+ if (val_changed) {
+ if (idx_map.find((val, idx) => val != idx) === undefined) {
+ // idx_map is identity map [0, 1, 2, 3, 4, ....]
+ idx_changed = false;
+ }
+ }
+ return [new_table, idx_map, val_changed, idx_changed];
+}
+
+function pushArray(_this: T[], other: T[]) {
+ // We use push to mutate in place for memory and perf reasons
+ // We use the for loop instead of _this.push(...other) to avoid the JS engine's function argument limit (65,535 in JavascriptCore)
+ for (let i = 0; i < other.length; i++) {
+ _this.push(other[i]);
+ }
+}
+
+export class StringWithSourcemap {
+ string: string;
+ map: DecodedSourceMap;
+
+ constructor(string = '', map: DecodedSourceMap = null) {
+ this.string = string;
+ if (map) {
+ this.map = map as DecodedSourceMap;
+ } else {
+ this.map = {
+ version: 3,
+ mappings: [],
+ sources: [],
+ names: []
+ };
+ }
+ }
+
+ /**
+ * concat in-place (mutable), return this (chainable)
+ * will also mutate the `other` object
+ */
+ concat(other: StringWithSourcemap): StringWithSourcemap {
+ // noop: if one is empty, return the other
+ if (other.string == '') return this;
+ if (this.string == '') {
+ this.string = other.string;
+ this.map = other.map;
+ return this;
+ }
+
+ this.string += other.string;
+
+ const m1 = this.map;
+ const m2 = other.map;
+
+ if (m2.mappings.length == 0) return this;
+
+ // combine sources and names
+ const [sources, new_source_idx, sources_changed, sources_idx_changed] = merge_tables(m1.sources, m2.sources);
+ const [names, new_name_idx, names_changed, names_idx_changed] = merge_tables(m1.names, m2.names);
+
+ if (sources_changed) m1.sources = sources;
+ if (names_changed) m1.names = names;
+
+ // unswitched loops are faster
+ if (sources_idx_changed && names_idx_changed) {
+ for (let line = 0; line < m2.mappings.length; line++) {
+ const segment_list = m2.mappings[line];
+ for (let segment = 0; segment < segment_list.length; segment++) {
+ const seg = segment_list[segment];
+ if (seg[1]) seg[1] = new_source_idx[seg[1]];
+ if (seg[4]) seg[4] = new_name_idx[seg[4]];
+ }
+ }
+ } else if (sources_idx_changed) {
+ for (let line = 0; line < m2.mappings.length; line++) {
+ const segment_list = m2.mappings[line];
+ for (let segment = 0; segment < segment_list.length; segment++) {
+ const seg = segment_list[segment];
+ if (seg[1]) seg[1] = new_source_idx[seg[1]];
+ }
+ }
+ } else if (names_idx_changed) {
+ for (let line = 0; line < m2.mappings.length; line++) {
+ const segment_list = m2.mappings[line];
+ for (let segment = 0; segment < segment_list.length; segment++) {
+ const seg = segment_list[segment];
+ if (seg[4]) seg[4] = new_name_idx[seg[4]];
+ }
+ }
+ }
+
+ // combine the mappings
+
+ // combine
+ // 1. last line of first map
+ // 2. first line of second map
+ // columns of 2 must be shifted
+
+ const column_offset = last_line_length(this.string);
+ if (m2.mappings.length > 0 && column_offset > 0) {
+ const first_line = m2.mappings[0];
+ for (let i = 0; i < first_line.length; i++) {
+ first_line[i][0] += column_offset;
+ }
+ }
+
+ // combine last line + first line
+ pushArray(m1.mappings[m1.mappings.length - 1], m2.mappings.shift());
+
+ // append other lines
+ pushArray(m1.mappings, m2.mappings);
+
+ return this;
+ }
+
+ static from_processed(string: string, map?: DecodedSourceMap): StringWithSourcemap {
+ if (map) return new StringWithSourcemap(string, map);
+ if (string == '') return new StringWithSourcemap();
+ map = { version: 3, names: [], sources: [], mappings: [] };
+
+ // add empty SourceMapSegment[] for every line
+ const line_count = (string.match(/\n/g) || '').length;
+ for (let i = 0; i < line_count; i++) map.mappings.push([]);
+ return new StringWithSourcemap(string, map);
+ }
+
+ static from_source(
+ source_file: string, source: string, offset?: SourceLocation
+ ): StringWithSourcemap {
+ if (!offset) offset = { line: 0, column: 0 };
+ const map: DecodedSourceMap = { version: 3, names: [], sources: [source_file], mappings: [] };
+ if (source == '') return new StringWithSourcemap(source, map);
+
+ // we create a high resolution identity map here,
+ // we know that it will eventually be merged with svelte's map,
+ // at which stage the resolution will decrease.
+ const line_list = source.split('\n');
+ for (let line = 0; line < line_list.length; line++) {
+ map.mappings.push([]);
+ const token_list = line_list[line].split(/([^\d\w\s]|\s+)/g);
+ for (let token = 0, column = 0; token < token_list.length; token++) {
+ if (token_list[token] == '') continue;
+ map.mappings[line].push([column, 0, offset.line + line, column]);
+ column += token_list[token].length;
+ }
+ }
+ // shift columns in first line
+ const segment_list = map.mappings[0];
+ for (let segment = 0; segment < segment_list.length; segment++) {
+ segment_list[segment][3] += offset.column;
+ }
+ return new StringWithSourcemap(source, map);
+ }
+}
+
+export function combine_sourcemaps(
+ filename: string,
+ sourcemap_list: Array
+): RawSourceMap {
+ if (sourcemap_list.length == 0) return null;
+
+ let map_idx = 1;
+ const map: RawSourceMap =
+ sourcemap_list.slice(0, -1)
+ .find(m => m.sources.length !== 1) === undefined
+
+ ? remapping( // use array interface
+ // only the oldest sourcemap can have multiple sources
+ sourcemap_list,
+ () => null,
+ true // skip optional field `sourcesContent`
+ )
+
+ : remapping( // use loader interface
+ sourcemap_list[0], // last map
+ function loader(sourcefile) {
+ if (sourcefile === filename && sourcemap_list[map_idx]) {
+ return sourcemap_list[map_idx++]; // idx 1, 2, ...
+ // bundle file = branch node
+ } else {
+ return null; // source file = leaf node
+ }
+ } as SourceMapLoader,
+ true
+ );
+
+ if (!map.file) delete map.file; // skip optional field `file`
+
+ return map;
+}
+
+// browser vs node.js
+const b64enc = typeof btoa == 'function' ? btoa : b => Buffer.from(b).toString('base64');
+
+export function apply_preprocessor_sourcemap(filename: string, svelte_map: SourceMap, preprocessor_map_input: string | DecodedSourceMap | RawSourceMap): SourceMap {
+ if (!svelte_map || !preprocessor_map_input) return svelte_map;
+
+ const preprocessor_map = typeof preprocessor_map_input === 'string' ? JSON.parse(preprocessor_map_input) : preprocessor_map_input;
+
+ const result_map = combine_sourcemaps(
+ filename,
+ [
+ svelte_map as RawSourceMap,
+ preprocessor_map
+ ]
+ ) as RawSourceMap;
+
+ // Svelte expects a SourceMap which includes toUrl and toString. Instead of wrapping our output in a class,
+ // we just tack on the extra properties.
+ Object.defineProperties(result_map, {
+ toString: {
+ enumerable: false,
+ value: function toString() {
+ return JSON.stringify(this);
+ }
+ },
+ toUrl: {
+ enumerable: false,
+ value: function toUrl() {
+ return 'data:application/json;charset=utf-8;base64,' + b64enc(this.toString());
+ }
+ }
+ });
+
+ return result_map as SourceMap;
+}
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 5380443fbc..91e575ebf6 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -360,3 +360,19 @@ export class HtmlTag {
this.n.forEach(detach);
}
}
+
+export function attribute_to_object(attributes: NamedNodeMap) {
+ const result = {};
+ for (const attribute of attributes) {
+ result[attribute.name] = attribute.value;
+ }
+ return result;
+}
+
+export function get_custom_elements_slots(element: HTMLElement) {
+ const result = {};
+ element.childNodes.forEach((node: Element) => {
+ result[node.slot || 'default'] = true;
+ });
+ return result;
+}
diff --git a/src/runtime/internal/keyed_each.ts b/src/runtime/internal/keyed_each.ts
index 6e333da1a4..079d5f4499 100644
--- a/src/runtime/internal/keyed_each.ts
+++ b/src/runtime/internal/keyed_each.ts
@@ -73,19 +73,13 @@ export function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list
next = new_block.first;
o--;
n--;
- }
-
- else if (!new_lookup.has(old_key)) {
+ } else if (!new_lookup.has(old_key)) {
// remove old block
destroy(old_block, lookup);
o--;
- }
-
- else if (!lookup.has(new_key) || will_move.has(new_key)) {
+ } else if (!lookup.has(new_key) || will_move.has(new_key)) {
insert(new_block);
- }
-
- else if (did_move.has(old_key)) {
+ } else if (did_move.has(old_key)) {
o--;
} else if (deltas.get(new_key) > deltas.get(old_key)) {
diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts
index 4a7616bdea..002bd78d24 100644
--- a/src/runtime/internal/lifecycle.ts
+++ b/src/runtime/internal/lifecycle.ts
@@ -54,6 +54,10 @@ export function getContext(key): T {
return get_current_component().$$.context.get(key);
}
+export function hasContext(key): boolean {
+ return get_current_component().$$.context.has(key);
+}
+
// TODO figure out if we still want to support
// shorthand events, or if we want to implement
// a real bubbling mechanism
diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
index 343a8c82e4..21d67a12ba 100644
--- a/src/runtime/internal/transitions.ts
+++ b/src/runtime/internal/transitions.ts
@@ -318,9 +318,7 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
}
running_program = null;
- }
-
- else if (now >= running_program.start) {
+ } else if (now >= running_program.start) {
const p = now - running_program.start;
t = running_program.a + running_program.d * easing(p / running_program.duration);
tick(t, 1 - t);
diff --git a/src/runtime/motion/spring.ts b/src/runtime/motion/spring.ts
index 5845a13a57..8d2056256c 100644
--- a/src/runtime/motion/spring.ts
+++ b/src/runtime/motion/spring.ts
@@ -34,9 +34,10 @@ function tick_spring(ctx: TickContext, last_value: T, current_value: T, ta
tick_spring(ctx, last_value[i], current_value[i], target_value[i]));
} else if (typeof current_value === 'object') {
const next_value = {};
- for (const k in current_value)
+ for (const k in current_value) {
// @ts-ignore
next_value[k] = tick_spring(ctx, last_value[k], current_value[k], target_value[k]);
+ }
// @ts-ignore
return next_value;
} else {
@@ -121,8 +122,9 @@ export function spring(value?: T, opts: SpringOpts = {}): Spring {
last_value = value;
store.set(value = next_value);
- if (ctx.settled)
+ if (ctx.settled) {
task = null;
+ }
return !ctx.settled;
});
}
diff --git a/test/custom-elements/assert.js b/test/custom-elements/assert.js
index b8add0dadc..4ee8d9dda0 100644
--- a/test/custom-elements/assert.js
+++ b/test/custom-elements/assert.js
@@ -31,3 +31,24 @@ export function equal(a, b, message) {
export function ok(condition, message) {
if (!condition) throw new Error(message || `Expected ${condition} to be truthy`);
}
+
+export function htmlEqual(actual, expected, message) {
+ return deepEqual(
+ normalizeHtml(window, actual),
+ normalizeHtml(window, expected),
+ message
+ );
+}
+
+function normalizeHtml(window, html) {
+ try {
+ const node = window.document.createElement('div');
+ node.innerHTML = html
+ .replace(//g, '')
+ .replace(/>[\s\r\n]+<')
+ .trim();
+ return node.innerHTML.replace(/<\/?noscript\/?>/g, '');
+ } catch (err) {
+ throw new Error(`Failed to normalize HTML:\n${html}`);
+ }
+}
diff --git a/test/custom-elements/samples/$$props/main.svelte b/test/custom-elements/samples/$$props/main.svelte
new file mode 100644
index 0000000000..68931e22db
--- /dev/null
+++ b/test/custom-elements/samples/$$props/main.svelte
@@ -0,0 +1,10 @@
+
+
+
+
+
name: {name}
+
$$props: {JSON.stringify($$props)}
+
$$restProps: {JSON.stringify($$restProps)}
+
diff --git a/test/custom-elements/samples/$$props/test.js b/test/custom-elements/samples/$$props/test.js
new file mode 100644
index 0000000000..94cad86577
--- /dev/null
+++ b/test/custom-elements/samples/$$props/test.js
@@ -0,0 +1,13 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+ target.innerHTML = '';
+ const el = target.querySelector('custom-element');
+
+ assert.htmlEqual(el.shadowRoot.innerHTML, `
+
+
+
+
\ No newline at end of file
diff --git a/test/runtime/samples/transition-abort/_config.js b/test/runtime/samples/transition-abort/_config.js
new file mode 100644
index 0000000000..4f31c44a4d
--- /dev/null
+++ b/test/runtime/samples/transition-abort/_config.js
@@ -0,0 +1,31 @@
+// expect aborting halfway through outro transition
+// to behave the same in `{#if}` block as in `{:else}` block
+export default {
+ html: `
+
+ 
- 
+ 
diff --git a/package-lock.json b/package-lock.json
index 9da1189dcc..61afea32b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,9 +1,19 @@
{
"name": "svelte",
- "version": "3.29.4",
+ "version": "3.29.7",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
+ "@ampproject/remapping": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-0.3.0.tgz",
+ "integrity": "sha512-dqmASpaTCavldZqwdEpokgG4yOXmEiEGPP3ATTsBbdXXSKf6kx8jt2fPcKhodABdZlYe82OehR2oFK1y9gwZxw==",
+ "dev": true,
+ "requires": {
+ "@jridgewell/resolve-uri": "1.0.0",
+ "sourcemap-codec": "1.4.8"
+ }
+ },
"@babel/code-frame": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
@@ -36,6 +46,12 @@
"integrity": "sha512-KioOCsSvSvXx6xUNLiJz+P+VMb7NRcePjoefOr74Y5P6lEKsiOn35eZyZzgpK4XCNJdXTDR7+zykj0lwxRvZ2g==",
"dev": true
},
+ "@jridgewell/resolve-uri": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz",
+ "integrity": "sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==",
+ "dev": true
+ },
"@rollup/plugin-commonjs": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.0.tgz",
@@ -144,8 +160,8 @@
}
},
"@sveltejs/eslint-config": {
- "version": "github:sveltejs/eslint-config#5d1ba28f99568e42f26d9b7484ab57720f6ec9b4",
- "from": "github:sveltejs/eslint-config#v5.4.0",
+ "version": "github:sveltejs/eslint-config#cca8177349dd5a02b19a5865afc4a7066921409a",
+ "from": "github:sveltejs/eslint-config#v5.6.0",
"dev": true
},
"@tootallnate/once": {
@@ -3737,9 +3753,9 @@
}
},
"sourcemap-codec": {
- "version": "1.4.6",
- "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz",
- "integrity": "sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==",
+ "version": "1.4.8",
+ "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
"dev": true
},
"spdx-correct": {
diff --git a/package.json b/package.json
index 6d25f68a25..1103d56abb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte",
- "version": "3.29.4",
+ "version": "3.29.7",
"description": "Cybernetically enhanced web apps",
"module": "index.mjs",
"main": "index",
@@ -18,6 +18,44 @@
"svelte",
"README.md"
],
+ "exports": {
+ "./package.json": "./package.json",
+ ".": {
+ "import": "./index.mjs",
+ "require": "./index.js"
+ },
+ "./compiler": {
+ "import": "./compiler.mjs",
+ "require": "./compiler.js"
+ },
+ "./animate": {
+ "import": "./animate/index.mjs",
+ "require": "./animate/index.js"
+ },
+ "./easing": {
+ "import": "./easing/index.mjs",
+ "require": "./easing/index.js"
+ },
+ "./internal": {
+ "import": "./internal/index.mjs",
+ "require": "./internal/index.js"
+ },
+ "./motion": {
+ "import": "./motion/index.mjs",
+ "require": "./motion/index.js"
+ },
+ "./register": {
+ "require": "./register.js"
+ },
+ "./store": {
+ "import": "./store/index.mjs",
+ "require": "./store/index.js"
+ },
+ "./transition": {
+ "import": "./transition/index.mjs",
+ "require": "./transition/index.js"
+ }
+ },
"engines": {
"node": ">= 8"
},
@@ -37,7 +75,7 @@
"posttest": "agadoo internal/index.mjs",
"prepublishOnly": "npm run lint && PUBLISH=true npm test",
"tsd": "tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly",
- "lint": "eslint '{src,test}/**/*.{ts,js}'"
+ "lint": "eslint \"{src,test}/**/*.{ts,js}\""
},
"repository": {
"type": "git",
@@ -56,6 +94,7 @@
},
"homepage": "https://github.com/sveltejs/svelte#README",
"devDependencies": {
+ "@ampproject/remapping": "^0.3.0",
"@rollup/plugin-commonjs": "^11.0.0",
"@rollup/plugin-json": "^4.0.1",
"@rollup/plugin-node-resolve": "^6.0.0",
@@ -63,7 +102,7 @@
"@rollup/plugin-sucrase": "^3.0.0",
"@rollup/plugin-typescript": "^2.0.1",
"@rollup/plugin-virtual": "^2.0.0",
- "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.4.0",
+ "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.6.0",
"@types/mocha": "^7.0.0",
"@types/node": "^8.10.53",
"@typescript-eslint/eslint-plugin": "^3.0.2",
@@ -89,6 +128,7 @@
"rollup": "^1.27.14",
"source-map": "^0.7.3",
"source-map-support": "^0.5.13",
+ "sourcemap-codec": "^1.4.8",
"tiny-glob": "^0.2.6",
"tslib": "^1.10.0",
"typescript": "^3.5.3"
diff --git a/rollup.config.js b/rollup.config.js
index 82a2b9ae34..81fa24bd9f 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -20,7 +20,7 @@ const ts_plugin = is_publish
const external = id => id.startsWith('svelte/');
-fs.writeFileSync(`./compiler.d.ts`, `export { compile, parse, preprocess, VERSION } from './types/compiler/index';`);
+fs.writeFileSync(`./compiler.d.ts`, `export { compile, parse, preprocess, walk, VERSION } from './types/compiler/index';`);
export default [
/* runtime */
@@ -30,12 +30,12 @@ export default [
{
file: `index.mjs`,
format: 'esm',
- paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}`
+ paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
},
{
file: `index.js`,
format: 'cjs',
- paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}`
+ paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
}
],
external,
@@ -50,12 +50,12 @@ export default [
{
file: `${dir}/index.mjs`,
format: 'esm',
- paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}`
+ paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.mjs`
},
{
file: `${dir}/index.js`,
format: 'cjs',
- paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}`
+ paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.js`
}
],
external,
diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md
index 921e699842..76308da547 100644
--- a/site/content/blog/2019-04-16-svelte-for-new-developers.md
+++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md
@@ -45,7 +45,7 @@ A full introduction to the command line is out of the scope of this guide, but h
Once installed, you'll have access to three new commands:
* `node my-file.js` — runs the JavaScript in `my-file.js`
-* `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/) package
+* `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/package/svelte) package
* `npx [subcommand]` — a convenient way to run programs available on npm without permanently installing them
@@ -58,9 +58,7 @@ To write code, you need a good editor. The most popular choice is [Visual Studio
We're going to follow the instructions in part two of [The easiest way to get started with Svelte](/blog/the-easiest-way-to-get-started).
-First, we'll use npx to run [degit](https://github.com/Rich-Harris/degit), a program for cloning project templates from [GitHub](https://github.com) and other code storage websites. You don't have to use a project template, but it means you have to do a lot less setup work.
-
-(Eventually you'll probably have to learn [git](https://git-scm.com/), which most programmers use to manage their projects. But you don't need to worry about it just yet.)
+First, we'll use npx to run [degit](https://github.com/Rich-Harris/degit), a program for cloning project templates from [GitHub](https://github.com) and other code storage websites. You don't have to use a project template, but it means you have to do a lot less setup work. You will need to have [Git](https://git-scm.com/) installed in order to use degit. (Eventually you'll probably have to learn [Git](https://git-scm.com/) itself, which most programmers use to manage their projects.)
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):
diff --git a/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md b/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
new file mode 100644
index 0000000000..433bafaa29
--- /dev/null
+++ b/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
@@ -0,0 +1,46 @@
+---
+title: What's new in Svelte: November 2020
+description: Slot forwarding fixes, SvelteKit for faster local development, and more from Svelte Summit
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+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
+
+1. Destructuring Promises now works as expected by using the `{#await}` syntax
+ (**3.29.3**, [Example](https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
+2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](https://svelte.dev/repl/29959e70103f4868a6525c0734934936?version=3.29.3))
+3. 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](https://sapper.svelte.dev/docs#Typing_the_function) 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](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
+
+
+## [Svelte Summit](https://sveltesummit.com/) 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](https://www.youtube.com/watch?v=qSfdtmcZ4d0).
+- 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](https://www.youtube.com/playlist?list=PL8bMgX1kyZThM1sbYCoWdTcpiYysJsSeu)
+
+---
+
+## Community Showcase
+- [Svelte Lab](https://sveltelab.app/) 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](https://github.com/hjalmar/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](https://github.com/joshnuss/react-hooks-in-svelte) showcases examples of common React Hooks ported to Svelte.
+- [gurlic](https://gurlic.com/) is a social network and internet experiment that is super snappy thanks to Svelte
+- [Interference 2020](https://interference2020.org/) 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](https://github.com/relm-us/jitsi-svelte) lets you easily create your own custom Jitsi client by providing out-of-the-box components built with Svelte
+- [Ellx](https://ellx.io/) is part spreadsheet, part notebook and part IDE. It's super smooth thanks to Svelte 😎
+- [This New Zealand news site](https://www.nzherald.co.nz/nz/election-2020-latest-results-party-vote-electorate-vote-and-full-data/5CFVO4ENKNQDE3SICRRNPU5GZM/) breaks down the results of the 2020 Parliamentary elections using Svelte
+- [Budibase](https://github.com/Budibase/budibase) is a no-code app builder, powered by Svelte
+- [Svelt-yjs](https://github.com/relm-us/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](https://github.com/benflap/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!
+
+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](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
diff --git a/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md b/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
new file mode 100644
index 0000000000..f780cd0226
--- /dev/null
+++ b/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
@@ -0,0 +1,103 @@
+---
+title: What's the deal with SvelteKit?
+description: We're rethinking how to build Svelte apps. Here's what you need to know
+author: Rich Harris
+authorURL: https://twitter.com/rich_harris
+---
+
+
+
+If you attended [Svelte Summit](https://sveltesummit.com/) last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0?
+
+The answer: never.
+
+This was slightly tongue-in-cheek — as the talk explains, it's really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from the community, and it's time we offered a bit more clarity on what you can expect from Sapper's successor, SvelteKit.
+
+