From 703ffe94dc358268b2d6d46c505b0f957a5083fa Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 4 Nov 2020 01:00:17 -0500 Subject: [PATCH 01/13] draft blog post about sveltekit (#5638) * draft blog post about sveltekit * make language less scary * mention SvelteKit sooner * expand on TS support * tweak migration section * change publication date * replace video link with an embed * small tweak --- ...020-11-03-whats-the-deal-with-sveltekit.md | 103 ++++++++++++++++++ site/src/routes/blog/[slug].svelte | 13 --- 2 files changed, 103 insertions(+), 13 deletions(-) create mode 100644 site/content/blog/2020-11-03-whats-the-deal-with-sveltekit.md diff --git a/site/content/blog/2020-11-03-whats-the-deal-with-sveltekit.md b/site/content/blog/2020-11-03-whats-the-deal-with-sveltekit.md new file mode 100644 index 0000000000..f780cd0226 --- /dev/null +++ b/site/content/blog/2020-11-03-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/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; - } - } */ From 80300f9702a3abea052df096a6fe224dc049e455 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 4 Nov 2020 21:28:35 -0500 Subject: [PATCH 02/13] update pubdate --- ...h-sveltekit.md => 2020-11-05-whats-the-deal-with-sveltekit.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename site/content/blog/{2020-11-03-whats-the-deal-with-sveltekit.md => 2020-11-05-whats-the-deal-with-sveltekit.md} (100%) diff --git a/site/content/blog/2020-11-03-whats-the-deal-with-sveltekit.md b/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md similarity index 100% rename from site/content/blog/2020-11-03-whats-the-deal-with-sveltekit.md rename to site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md From 9745b61aab0a623384b27c0cbbf7f91d929a8bd5 Mon Sep 17 00:00:00 2001 From: Mikail Khan Date: Thu, 5 Nov 2020 22:06:53 -0500 Subject: [PATCH 03/13] fixed typo in each loop animation error (#5648) --- src/compiler/compile/nodes/Animation.ts | 2 +- src/compiler/compile/nodes/EachBlock.ts | 2 +- test/validator/samples/animation-not-in-each/errors.json | 4 ++-- .../validator/samples/animation-not-in-keyed-each/errors.json | 4 ++-- test/validator/samples/animation-siblings/errors.json | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/compiler/compile/nodes/Animation.ts b/src/compiler/compile/nodes/Animation.ts index 88c9175d04..3a21a52e5f 100644 --- a/src/compiler/compile/nodes/Animation.ts +++ b/src/compiler/compile/nodes/Animation.ts @@ -27,7 +27,7 @@ export default class Animation extends Node { // TODO can we relax the 'immediate child' rule? component.error(this, { code: 'invalid-animation', - message: 'An element that use the animate directive must be the immediate child of a keyed each block' + message: 'An element that uses the animate directive must be the immediate child of a keyed each block' }); } diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts index 38cc976e6f..8b8e7d251a 100644 --- a/src/compiler/compile/nodes/EachBlock.ts +++ b/src/compiler/compile/nodes/EachBlock.ts @@ -61,7 +61,7 @@ export default class EachBlock extends AbstractBlock { const child = this.children.find(child => !!(child as Element).animation); component.error((child as Element).animation, { code: 'invalid-animation', - message: 'An element that use the animate directive must be the sole child of a keyed each block' + message: 'An element that uses the animate directive must be the sole child of a keyed each block' }); } } diff --git a/test/validator/samples/animation-not-in-each/errors.json b/test/validator/samples/animation-not-in-each/errors.json index 67e2ceb7c2..c737617f98 100644 --- a/test/validator/samples/animation-not-in-each/errors.json +++ b/test/validator/samples/animation-not-in-each/errors.json @@ -1,6 +1,6 @@ [{ "code": "invalid-animation", - "message": "An element that use the animate directive must be the immediate child of a keyed each block", + "message": "An element that uses the animate directive must be the immediate child of a keyed each block", "start": { "line": 5, "column": 5, @@ -12,4 +12,4 @@ "character": 55 }, "pos": 44 -}] \ No newline at end of file +}] diff --git a/test/validator/samples/animation-not-in-keyed-each/errors.json b/test/validator/samples/animation-not-in-keyed-each/errors.json index 1081589e6f..3e0b2d3c0c 100644 --- a/test/validator/samples/animation-not-in-keyed-each/errors.json +++ b/test/validator/samples/animation-not-in-keyed-each/errors.json @@ -1,6 +1,6 @@ [{ "code": "invalid-animation", - "message": "An element that use the animate directive must be the immediate child of a keyed each block", + "message": "An element that uses the animate directive must be the immediate child of a keyed each block", "start": { "line": 6, "column": 6, @@ -12,4 +12,4 @@ "character": 80 }, "pos": 69 -}] \ No newline at end of file +}] diff --git a/test/validator/samples/animation-siblings/errors.json b/test/validator/samples/animation-siblings/errors.json index af15113b94..3def56f0a5 100644 --- a/test/validator/samples/animation-siblings/errors.json +++ b/test/validator/samples/animation-siblings/errors.json @@ -1,6 +1,6 @@ [{ "code": "invalid-animation", - "message": "An element that use the animate directive must be the sole child of a keyed each block", + "message": "An element that uses the animate directive must be the sole child of a keyed each block", "start": { "line": 6, "column": 6, @@ -12,4 +12,4 @@ "character": 88 }, "pos": 77 -}] \ No newline at end of file +}] From 240f5410f38a8ee0ca55e56aeb6cb1aac7ae0025 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Sun, 8 Nov 2020 21:44:49 -0800 Subject: [PATCH 04/13] Curly brace cleanup and enforcement (#5647) --- package-lock.json | 4 ++-- package.json | 2 +- src/compiler/compile/Component.ts | 8 ++------ src/compiler/compile/css/Selector.ts | 16 ++++------------ src/compiler/compile/css/Stylesheet.ts | 4 +--- .../compile/css/gather_possible_values.ts | 8 ++------ src/compiler/compile/nodes/Attribute.ts | 4 +--- src/compiler/compile/nodes/Body.ts | 4 +--- src/compiler/compile/nodes/Window.ts | 12 +++--------- src/compiler/compile/nodes/shared/Expression.ts | 8 ++------ .../wrappers/Element/StyleAttribute.ts | 4 +--- .../compile/render_dom/wrappers/Element/index.ts | 16 ++++------------ .../render_dom/wrappers/RawMustacheTag.ts | 4 +--- src/compiler/parse/state/mustache.ts | 6 ++---- src/runtime/internal/keyed_each.ts | 12 +++--------- src/runtime/internal/transitions.ts | 4 +--- 16 files changed, 31 insertions(+), 85 deletions(-) diff --git a/package-lock.json b/package-lock.json index e04cc22175..5d4aa46575 100644 --- a/package-lock.json +++ b/package-lock.json @@ -144,8 +144,8 @@ } }, "@sveltejs/eslint-config": { - "version": "github:sveltejs/eslint-config#54081d752d199dba97db9f578665c87f18469da3", - "from": "github:sveltejs/eslint-config#v5.5.0", + "version": "github:sveltejs/eslint-config#cca8177349dd5a02b19a5865afc4a7066921409a", + "from": "github:sveltejs/eslint-config#v5.6.0", "dev": true }, "@tootallnate/once": { diff --git a/package.json b/package.json index a0f0b9e455..75e5c9e21f 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,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.5.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", diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index d2542c9830..6e7e41f385 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -267,17 +267,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; } diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index e20aa43fb6..e910f4333c 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -248,25 +248,17 @@ function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToN if (selector.type === 'ClassSelector') { if (!attribute_matches(node, 'class', name, '~=', false) && !node.classes.some(c => c.name === name)) return BlockAppliesToNode.NotPossible; - } - - else if (selector.type === 'IdSelector') { + } else if (selector.type === 'IdSelector') { if (!attribute_matches(node, 'id', name, '=', false)) return BlockAppliesToNode.NotPossible; - } - - else if (selector.type === 'AttributeSelector') { + } else if (selector.type === 'AttributeSelector') { if ( !(whitelist_attribute_selector.has(node.name.toLowerCase()) && whitelist_attribute_selector.get(node.name.toLowerCase()).has(selector.name.name.toLowerCase())) && !attribute_matches(node, selector.name.name, selector.value && unquote(selector.value), selector.matcher, selector.flags)) { return BlockAppliesToNode.NotPossible; } - } - - else if (selector.type === 'TypeSelector') { + } else if (selector.type === 'TypeSelector') { if (node.name.toLowerCase() !== name.toLowerCase() && name !== '*') return BlockAppliesToNode.NotPossible; - } - - else { + } else { return BlockAppliesToNode.UnknownSelectorType; } } diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts index 5547c6eb0c..b0dab12b19 100644 --- a/src/compiler/compile/css/Stylesheet.ts +++ b/src/compiler/compile/css/Stylesheet.ts @@ -167,9 +167,7 @@ class Atrule { this.children.forEach(child => { child.apply(node); }); - } - - else if (is_keyframes_node(this.node)) { + } else if (is_keyframes_node(this.node)) { this.children.forEach((rule: Rule) => { rule.selectors.forEach(selector => { selector.used = true; diff --git a/src/compiler/compile/css/gather_possible_values.ts b/src/compiler/compile/css/gather_possible_values.ts index 4390e23c8d..e5560e4f87 100644 --- a/src/compiler/compile/css/gather_possible_values.ts +++ b/src/compiler/compile/css/gather_possible_values.ts @@ -5,14 +5,10 @@ export const UNKNOWN = {}; export function gather_possible_values(node: Node, set: Set) { if (node.type === 'Literal') { set.add(node.value); - } - - else if (node.type === 'ConditionalExpression') { + } else if (node.type === 'ConditionalExpression') { gather_possible_values(node.consequent, set); gather_possible_values(node.alternate, set); - } - - else { + } else { set.add(UNKNOWN); } } diff --git a/src/compiler/compile/nodes/Attribute.ts b/src/compiler/compile/nodes/Attribute.ts index 97d2fd7b2e..3844c750a2 100644 --- a/src/compiler/compile/nodes/Attribute.ts +++ b/src/compiler/compile/nodes/Attribute.ts @@ -38,9 +38,7 @@ export default class Attribute extends Node { this.chunks = null; this.is_static = false; - } - - else { + } else { this.name = info.name; this.is_true = info.value === true; this.is_static = true; diff --git a/src/compiler/compile/nodes/Body.ts b/src/compiler/compile/nodes/Body.ts index 74c63b1f57..f004b90e24 100644 --- a/src/compiler/compile/nodes/Body.ts +++ b/src/compiler/compile/nodes/Body.ts @@ -13,9 +13,7 @@ export default class Body extends Node { info.attributes.forEach(node => { if (node.type === 'EventHandler') { this.handlers.push(new EventHandler(component, this, scope, node)); - } - - else { + } else { // TODO there shouldn't be anything else here... } }); diff --git a/src/compiler/compile/nodes/Window.ts b/src/compiler/compile/nodes/Window.ts index d0ad313c6f..fef003c6e4 100644 --- a/src/compiler/compile/nodes/Window.ts +++ b/src/compiler/compile/nodes/Window.ts @@ -28,9 +28,7 @@ export default class Window extends Node { info.attributes.forEach(node => { if (node.type === 'EventHandler') { this.handlers.push(new EventHandler(component, this, scope, node)); - } - - else if (node.type === 'Binding') { + } else if (node.type === 'Binding') { if (node.expression.type !== 'Identifier') { const { parts } = flatten_reference(node.expression); @@ -64,13 +62,9 @@ export default class Window extends Node { } this.bindings.push(new Binding(component, this, scope, node)); - } - - else if (node.type === 'Action') { + } else if (node.type === 'Action') { this.actions.push(new Action(component, this, scope, node)); - } - - else { + } else { // TODO there shouldn't be anything else here... } }); diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts index ef134f4359..1fc23830bd 100644 --- a/src/compiler/compile/nodes/shared/Expression.ts +++ b/src/compiler/compile/nodes/shared/Expression.ts @@ -261,17 +261,13 @@ export default class Expression { hoistable: true, referenced: true }); - } - - else if (contextual_dependencies.size === 0) { + } else if (contextual_dependencies.size === 0) { // function can be hoisted inside the component init component.partly_hoisted.push(declaration); block.renderer.add_to_context(id.name); this.replace(block.renderer.reference(id)); - } - - else { + } else { // we need a combo block/init recipe const deps = Array.from(contextual_dependencies); const function_expression = node as FunctionExpression; diff --git a/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts b/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts index 06ead11a3c..27157f46e4 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts @@ -164,9 +164,7 @@ function get_style_value(chunks: Array) { break; } - } - - else { + } else { value.push(chunk); } } diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index c6b88357a8..d273326a20 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -745,9 +745,7 @@ export default class ElementWrapper extends Wrapper { } block.chunks.destroy.push(b`if (detaching && ${name}) ${name}.end();`); - } - - else { + } else { const intro_name = intro && block.get_unique_name(`${this.var.name}_intro`); const outro_name = outro && block.get_unique_name(`${this.var.name}_outro`); @@ -920,22 +918,16 @@ function to_html(wrappers: Array deltas.get(old_key)) { 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); From 4e114d3b0dc0404ed9a71021113b6bfa174457ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andy=20Bru=C3=A8re?= Date: Mon, 9 Nov 2020 15:51:26 +0100 Subject: [PATCH 05/13] docs: remove broken link to easing function (#5635) --- site/content/docs/03-run-time.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 3b6df3071d..846e09d774 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -777,7 +777,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: From f7bddb23d3ee9ff2feaa52cb1763a17de6103a04 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 9 Nov 2020 22:57:40 +0800 Subject: [PATCH 06/13] add extension to request to support webpack 5 (#5624) --- CHANGELOG.md | 1 + rollup.config.js | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a3fb361e5f..b93a6a7fd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * 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 internal `import`s so that we're exposing a valid ES module ([#5617](https://github.com/sveltejs/svelte/issues/5617)) ## 3.29.4 diff --git a/rollup.config.js b/rollup.config.js index 82a2b9ae34..e9ee666337 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -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, From 7949d8efac308123c5b2e770456d36a680ce9bba Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 9 Nov 2020 23:11:37 +0800 Subject: [PATCH 07/13] support $$slots in custom elements (#5619) --- CHANGELOG.md | 1 + src/compiler/compile/render_dom/index.ts | 8 ++++- src/runtime/internal/dom.ts | 10 +++++- .../samples/$$slot/main.svelte | 31 +++++++++++++++++++ test/custom-elements/samples/$$slot/test.js | 28 +++++++++++++++++ 5 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 test/custom-elements/samples/$$slot/main.svelte create mode 100644 test/custom-elements/samples/$$slot/test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index b93a6a7fd1..b36b4357d4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * 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 diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 024aafde14..2f86202a34 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -467,6 +467,12 @@ export default function dom( } if (options.customElement) { + + let init_props = x`@attribute_to_object(this.attributes)`; + if (uses_slots) { + init_props = x`{ ...${init_props}, $$slots: @get_custom_elements_slots(this) }`; + } + const declaration = b` class ${name} extends @SvelteElement { constructor(options) { @@ -474,7 +480,7 @@ export default function dom( ${css.code && b`this.shadowRoot.innerHTML = \`\`;`} - @init(this, { target: this.shadowRoot, props: @attribute_to_object(this.attributes) }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty}); + @init(this, { target: this.shadowRoot, props: ${init_props} }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty}); ${dev_props_check} diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index ad06d6ff08..91e575ebf6 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -361,10 +361,18 @@ export class HtmlTag { } } -export function attribute_to_object(attributes) { +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/test/custom-elements/samples/$$slot/main.svelte b/test/custom-elements/samples/$$slot/main.svelte new file mode 100644 index 0000000000..05e1ac3284 --- /dev/null +++ b/test/custom-elements/samples/$$slot/main.svelte @@ -0,0 +1,31 @@ + + + + + + +

$$slots: {toString($$slots)}

+{#if $$slots.b} +
+ +
+{:else} +

Slot b is not available

+{/if} \ No newline at end of file diff --git a/test/custom-elements/samples/$$slot/test.js b/test/custom-elements/samples/$$slot/test.js new file mode 100644 index 0000000000..567e93f509 --- /dev/null +++ b/test/custom-elements/samples/$$slot/test.js @@ -0,0 +1,28 @@ +import * as assert from 'assert'; +import './main.svelte'; + +export default function (target) { + target.innerHTML = ` + hello worldbyeworld + hello worldhello worldbye world + `; + + const [a, b] = target.querySelectorAll('custom-element'); + + assert.htmlEqual(a.shadowRoot.innerHTML, ` + + +

$$slots: {"a":true,"default":true}

+

Slot b is not available

+ `); + + assert.htmlEqual(b.shadowRoot.innerHTML, ` + + +

$$slots: {"a":true,"b":true,"default":true}

+
+ `); + + assert.equal(a.getData(), ''); + assert.equal(b.getData(), 'foo'); +} From 41d16c02be538e372ac1e98e93805f319faf5ecf Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Mon, 9 Nov 2020 23:26:33 +0800 Subject: [PATCH 08/13] add export map (#5566) --- CHANGELOG.md | 1 + package.json | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b36b4357d4..23ce507de9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * 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)) diff --git a/package.json b/package.json index 75e5c9e21f..2dda09dcf5 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,40 @@ "svelte", "README.md" ], + "exports": { + ".": { + "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" + }, + "./store": { + "import": "./store/index.mjs", + "require": "./store/index.js" + }, + "./transition": { + "import": "./transition/index.mjs", + "require": "./transition/index.js" + } + }, "engines": { "node": ">= 8" }, From e2fa0e0fdb3ade785a13719c919494ae77df7b39 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 9 Nov 2020 11:19:57 -0500 Subject: [PATCH 09/13] fix package when publishing with npm@7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2dda09dcf5..eda4d42cab 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "codecov": "codecov", "precodecov": "npm run coverage", "build": "rollup -c && npm run tsd", - "prepare": "npm run build", + "prepare": "PUBLISH=true npm run build", "dev": "rollup -cw", "pretest": "npm run build", "posttest": "agadoo internal/index.mjs", From b135055c5c6f7628c5f9bcf99e9513965aead1cd Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 9 Nov 2020 11:20:06 -0500 Subject: [PATCH 10/13] -> v3.29.5 --- CHANGELOG.md | 2 +- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 23ce507de9..66c8647186 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 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)) diff --git a/package-lock.json b/package-lock.json index 5d4aa46575..6d2488414c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.29.4", + "version": "3.29.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index eda4d42cab..4e2393cbb0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.29.4", + "version": "3.29.5", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From fdd750db21e878a3e72a7f597c0d0fdaa2a5f986 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 9 Nov 2020 11:47:35 -0500 Subject: [PATCH 11/13] Revert "fix package when publishing with npm@7" This reverts commit e2fa0e0fdb3ade785a13719c919494ae77df7b39. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4e2393cbb0..7fcb311dea 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "codecov": "codecov", "precodecov": "npm run coverage", "build": "rollup -c && npm run tsd", - "prepare": "PUBLISH=true npm run build", + "prepare": "npm run build", "dev": "rollup -cw", "pretest": "npm run build", "posttest": "agadoo internal/index.mjs", From 627aae8c5c3da499b3a23089a7011035a2d830a9 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Mon, 9 Nov 2020 08:52:51 -0800 Subject: [PATCH 12/13] Add package.json to exports map (#5660) --- CHANGELOG.md | 4 ++++ package.json | 1 + 2 files changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66c8647186..d346d2dde7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* 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)) diff --git a/package.json b/package.json index 7fcb311dea..e6f44c7d09 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "README.md" ], "exports": { + "./package.json": "./package.json", ".": { "import": "./index.mjs", "require": "./index.js" From ed4288fe435dc4a04d403f9065f63dc1cc12e8f0 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 9 Nov 2020 11:53:32 -0500 Subject: [PATCH 13/13] -> v3.29.6 --- CHANGELOG.md | 2 +- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d346d2dde7..90ea29fbd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.29.6 * Include `./package.json` in export map ([#5659](https://github.com/sveltejs/svelte/issues/5659)) diff --git a/package-lock.json b/package-lock.json index 6d2488414c..5937018cb6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.29.5", + "version": "3.29.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index e6f44c7d09..163a105506 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.29.5", + "version": "3.29.6", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index",