From cb4b1f0a189803bed04adcb90fbd4334782e8469 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 24 Nov 2023 14:51:46 +0100 Subject: [PATCH 01/16] fix: remove constructor overload The original intent was for typing generation tools like svelte2tsx to use the virtual constructor instead, but it does more harm than good. Most notably, the TS error message when props are wrong becomes completely useless. It's better for tooling to silence the deprecation message and switch over to a new virtual constructor once we remove the deprecated one. --- .changeset/ten-worms-reflect.md | 5 +++++ packages/svelte/src/main/public.d.ts | 7 ------- 2 files changed, 5 insertions(+), 7 deletions(-) create mode 100644 .changeset/ten-worms-reflect.md diff --git a/.changeset/ten-worms-reflect.md b/.changeset/ten-worms-reflect.md new file mode 100644 index 0000000000..a78d6b052f --- /dev/null +++ b/.changeset/ten-worms-reflect.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: remove constructor overload diff --git a/packages/svelte/src/main/public.d.ts b/packages/svelte/src/main/public.d.ts index 6851d3f1d7..63f5122bbe 100644 --- a/packages/svelte/src/main/public.d.ts +++ b/packages/svelte/src/main/public.d.ts @@ -52,13 +52,6 @@ export class SvelteComponent< Slots extends Record = any > { [prop: string]: any; - - /** - * For type checking capabilities only. - * Does not exist at runtime. - * ### DO NOT USE! - */ - constructor(props: Props); /** * @deprecated This constructor only exists when using the `asClassComponent` compatibility helper, which * is a stop-gap solution. Migrate towards using `mount` or `createRoot` instead. See From a3bc7d5698425ec9dde86eb302f2fd56d9da8f96 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 24 Nov 2023 16:34:34 +0100 Subject: [PATCH 02/16] fix: type-level back-compat for default slot and children prop If someone has an existing SvelteComponent type definition and using the slot generic to type the default slot, automatically add that slot to the prop type as "children" --- .changeset/wet-games-fly.md | 5 +++++ packages/svelte/src/main/public.d.ts | 12 ++++++++++-- packages/svelte/tests/types/component.ts | 18 ++++++++++++------ 3 files changed, 27 insertions(+), 8 deletions(-) create mode 100644 .changeset/wet-games-fly.md diff --git a/.changeset/wet-games-fly.md b/.changeset/wet-games-fly.md new file mode 100644 index 0000000000..9f03e26882 --- /dev/null +++ b/.changeset/wet-games-fly.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: type-level back-compat for default slot and children prop diff --git a/packages/svelte/src/main/public.d.ts b/packages/svelte/src/main/public.d.ts index 63f5122bbe..5849835ea2 100644 --- a/packages/svelte/src/main/public.d.ts +++ b/packages/svelte/src/main/public.d.ts @@ -18,6 +18,14 @@ export interface ComponentConstructorOptions< $$inline?: boolean; } +// Utility type for ensuring backwards compatibility on a type level: If there's a default slot, add 'children' to the props if it doesn't exist there already +type PropsWithChildren = Props & + (Props extends { children?: any } + ? {} + : Slots extends { default: any } + ? { children?: Snippet } + : {}); + /** * Can be used to create strongly typed Svelte components. * @@ -57,13 +65,13 @@ export class SvelteComponent< * is a stop-gap solution. Migrate towards using `mount` or `createRoot` instead. See * https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more info. */ - constructor(options: ComponentConstructorOptions); + constructor(options: ComponentConstructorOptions>); /** * For type checking capabilities only. * Does not exist at runtime. * ### DO NOT USE! * */ - $$prop_def: Props; + $$prop_def: PropsWithChildren; /** * For type checking capabilities only. * Does not exist at runtime. diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts index 749c648e2f..13ebb65753 100644 --- a/packages/svelte/tests/types/component.ts +++ b/packages/svelte/tests/types/component.ts @@ -15,11 +15,11 @@ class LegacyComponent extends SvelteComponent< { slot: { slotProps: boolean } } > {} -// @ts-expect-error const legacyComponent = new LegacyComponent({ target: null as any as Document | Element | ShadowRoot, props: { prop: 'foo', + // @ts-expect-error x: '' } }); @@ -56,14 +56,20 @@ class NewComponent extends SvelteComponent< anExport: string = ''; } -// @ts-expect-error new NewComponent({ - prop: 'foo', - x: '' + target: null as any, + props: { + prop: 'foo', + // @ts-expect-error + x: '' + } }); const newComponent: NewComponent = new NewComponent({ - prop: 'foo' + target: null as any, + props: { + prop: 'foo' + } }); newComponent.$$events_def.event; // @ts-expect-error @@ -123,11 +129,11 @@ instance.anExport === 1; // --------------------------------------------------------------------------- interop const AsLegacyComponent = asClassComponent(newComponent); -// @ts-expect-error new AsLegacyComponent({ target: null as any, props: { prop: '', + // @ts-expect-error x: '' } }); From 63e58318460dbb3485df93d15beb2779a86d2c9a Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 24 Nov 2023 16:36:04 +0100 Subject: [PATCH 03/16] fix: adjust mount and createRoot types they expect the component constructor, not the instance --- .changeset/green-eggs-approve.md | 5 +++++ packages/svelte/src/internal/client/render.js | 4 ++-- packages/svelte/tests/types/component.ts | 20 +++++++++++++++++-- 3 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 .changeset/green-eggs-approve.md diff --git a/.changeset/green-eggs-approve.md b/.changeset/green-eggs-approve.md new file mode 100644 index 0000000000..90c7ec357e --- /dev/null +++ b/.changeset/green-eggs-approve.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: adjust mount and createRoot types diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index a86c05a616..afb060639a 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -2915,7 +2915,7 @@ export function unwrap(value) { * @template {Record} Props * @template {Record | undefined} Exports * @template {Record} Events - * @param {import('../../main/public.js').SvelteComponent} component + * @param {typeof import('../../main/public.js').SvelteComponent} component * @param {{ * target: Node; * props?: Props; @@ -3034,7 +3034,7 @@ export function createRoot(component, options) { * @template {Record} Props * @template {Record | undefined} Exports * @template {Record} Events - * @param {import('../../main/public.js').SvelteComponent} component + * @param {typeof import('../../main/public.js').SvelteComponent} component * @param {{ * target: Node; * props?: Props; diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts index 13ebb65753..1047d56781 100644 --- a/packages/svelte/tests/types/component.ts +++ b/packages/svelte/tests/types/component.ts @@ -4,7 +4,8 @@ import { SvelteComponent, type ComponentEvents, type ComponentProps, - type ComponentType + type ComponentType, + mount } from 'svelte'; // --------------------------------------------------------------------------- legacy: classes @@ -103,7 +104,22 @@ const newComponentEvents2: ComponentEvents = { event: new KeyboardEvent('click') }; -const instance = createRoot(newComponent, { +mount(NewComponent, { + target: null as any as Document | Element | ShadowRoot | Text | Comment, + props: { + prop: 'foo', + // @ts-expect-error + x: '' + }, + events: { + event: new MouseEvent('click') + }, + immutable: true, + intro: false, + recover: false +}); + +const instance = createRoot(NewComponent, { target: null as any as Document | Element | ShadowRoot | Text | Comment, props: { prop: 'foo', From 94afdc8a4bb08ba3b72512a3da846343e42e8c71 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:46:40 +0100 Subject: [PATCH 04/16] Version Packages (next) (#9633) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 3 +++ packages/svelte/CHANGELOG.md | 10 ++++++++++ packages/svelte/package.json | 2 +- packages/svelte/src/version.js | 2 +- 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index c4e518fde5..8bc596d698 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -29,6 +29,7 @@ "fresh-weeks-trade", "funny-wombats-argue", "good-pianos-jump", + "green-eggs-approve", "green-hounds-play", "honest-icons-change", "hungry-dots-fry", @@ -59,11 +60,13 @@ "sour-rules-march", "strong-lemons-provide", "tall-shrimps-worry", + "ten-worms-reflect", "thirty-flowers-sit", "thirty-ghosts-fix", "thirty-impalas-repair", "tiny-kings-whisper", "two-falcons-buy", + "wet-games-fly", "wicked-clouds-exercise", "wicked-doors-train" ] diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 30d064c151..eaca4269a3 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,15 @@ # svelte +## 5.0.0-next.12 + +### Patch Changes + +- fix: adjust mount and createRoot types ([`63e583184`](https://github.com/sveltejs/svelte/commit/63e58318460dbb3485df93d15beb2779a86d2c9a)) + +- fix: remove constructor overload ([`cb4b1f0a1`](https://github.com/sveltejs/svelte/commit/cb4b1f0a189803bed04adcb90fbd4334782e8469)) + +- fix: type-level back-compat for default slot and children prop ([`a3bc7d569`](https://github.com/sveltejs/svelte/commit/a3bc7d5698425ec9dde86eb302f2fd56d9da8f96)) + ## 5.0.0-next.11 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 9a4677cc2f..ab79b8c7d9 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -2,7 +2,7 @@ "name": "svelte", "description": "Cybernetically enhanced web apps", "license": "MIT", - "version": "5.0.0-next.11", + "version": "5.0.0-next.12", "type": "module", "types": "./types/index.d.ts", "engines": { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index afa31898e8..ebc8996f18 100644 --- a/packages/svelte/src/version.js +++ b/packages/svelte/src/version.js @@ -6,5 +6,5 @@ * https://svelte.dev/docs/svelte-compiler#svelte-version * @type {string} */ -export const VERSION = '5.0.0-next.11'; +export const VERSION = '5.0.0-next.12'; export const PUBLIC_VERSION = '5'; From 02f3f42981e4f7e6960c1ce1f84b01e044be97df Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Fri, 24 Nov 2023 21:48:18 +0000 Subject: [PATCH 05/16] fix: apply keyed validation only for keyed each (#9641) --- .changeset/chilled-pumas-invite.md | 5 +++++ .../phases/3-transform/client/visitors/template.js | 12 ++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/chilled-pumas-invite.md diff --git a/.changeset/chilled-pumas-invite.md b/.changeset/chilled-pumas-invite.md new file mode 100644 index 0000000000..943f2d4836 --- /dev/null +++ b/.changeset/chilled-pumas-invite.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: apply keyed validation only for keyed each diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index 68328e5453..c265b89d6d 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -2279,12 +2279,6 @@ export const template_visitors = { ) : b.literal(null); - if (context.state.options.dev && key_function.type !== 'Literal') { - context.state.init.push( - b.stmt(b.call('$.validate_each_keys', b.thunk(collection), key_function)) - ); - } - if (node.index && each_node_meta.contains_group_binding) { // We needed to create a unique identifier for the index above, but we want to use the // original index name in the template, therefore create another binding @@ -2292,6 +2286,12 @@ export const template_visitors = { } if ((each_type & EACH_KEYED) !== 0) { + if (context.state.options.dev && key_function.type !== 'Literal') { + context.state.init.push( + b.stmt(b.call('$.validate_each_keys', b.thunk(collection), key_function)) + ); + } + context.state.after_update.push( b.stmt( b.call( From dee5bed82917cfaf7b283773505ebfdb1423acda Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Fri, 24 Nov 2023 23:02:53 +0000 Subject: [PATCH 06/16] fix: improve each block index handling (#9644) * fix: improve each block index handling * format --- .changeset/thirty-wombats-relax.md | 5 +++++ .../3-transform/client/visitors/template.js | 16 ++++++++++++---- packages/svelte/src/compiler/phases/scope.js | 10 ++++------ .../samples/keyed-each-index-same-2/_config.js | 5 +++++ .../samples/keyed-each-index-same-2/main.svelte | 3 +++ 5 files changed, 29 insertions(+), 10 deletions(-) create mode 100644 .changeset/thirty-wombats-relax.md create mode 100644 packages/svelte/tests/runtime-legacy/samples/keyed-each-index-same-2/_config.js create mode 100644 packages/svelte/tests/runtime-legacy/samples/keyed-each-index-same-2/main.svelte diff --git a/.changeset/thirty-wombats-relax.md b/.changeset/thirty-wombats-relax.md new file mode 100644 index 0000000000..0ed0f40a75 --- /dev/null +++ b/.changeset/thirty-wombats-relax.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: improve each block index handling diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index c265b89d6d..5f002bbebf 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -2491,7 +2491,7 @@ export const template_visitors = { next(); }, BindDirective(node, context) { - const { state, path } = context; + const { state, path, visit } = context; /** @type {import('estree').Expression[]} */ const properties = []; @@ -2621,10 +2621,18 @@ export const template_visitors = { break; } - case 'this': - call_expr = b.call(`$.bind_this`, state.node, setter, node.expression); + case 'this': { + const expression = node.expression; + call_expr = b.call( + `$.bind_this`, + state.node, + setter, + expression.type === 'Identifier' + ? expression + : /** @type {import('estree').Expression} */ (visit(expression)) + ); break; - + } case 'textContent': case 'innerHTML': case 'innerText': diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js index 6c73002d5b..c839a78276 100644 --- a/packages/svelte/src/compiler/phases/scope.js +++ b/packages/svelte/src/compiler/phases/scope.js @@ -495,12 +495,10 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) { } if (node.index) { - scope.declare( - b.id(node.index), - // TODO see logic in EachBlock in dom.ts - node.key ? 'derived' : 'normal', - 'const' - ); + const is_keyed = + node.key && + (node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index); + scope.declare(b.id(node.index), is_keyed ? 'derived' : 'normal', 'const'); } if (node.key) visit(node.key, { scope }); diff --git a/packages/svelte/tests/runtime-legacy/samples/keyed-each-index-same-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/keyed-each-index-same-2/_config.js new file mode 100644 index 0000000000..8627d28b23 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/keyed-each-index-same-2/_config.js @@ -0,0 +1,5 @@ +import { test } from '../../test'; + +export default test({ + html: '
0
1
' +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/keyed-each-index-same-2/main.svelte b/packages/svelte/tests/runtime-legacy/samples/keyed-each-index-same-2/main.svelte new file mode 100644 index 0000000000..c21812be4a --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/keyed-each-index-same-2/main.svelte @@ -0,0 +1,3 @@ +{#each ["a", "b"] as result, i (i)} +
{i}
+{/each} From 7f237c2e41115b420f0d6432c51c85ec3b5ecaf5 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sat, 25 Nov 2023 00:54:52 +0100 Subject: [PATCH 07/16] fix: omit this bind this arg if we know it's not a signal (#9635) fixes #9629 Co-authored-by: Dominic Gannaway --- .changeset/lovely-rules-eat.md | 5 +++++ .../3-transform/client/visitors/template.js | 16 +++++++++------- .../samples/each-bind-this-member/_config.js | 7 +++++++ .../samples/each-bind-this-member/main.svelte | 11 +++++++++++ 4 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 .changeset/lovely-rules-eat.md create mode 100644 packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte diff --git a/.changeset/lovely-rules-eat.md b/.changeset/lovely-rules-eat.md new file mode 100644 index 0000000000..5ecaa2fc8d --- /dev/null +++ b/.changeset/lovely-rules-eat.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: omit this bind this arg if we know it's not a signal diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index 5f002bbebf..b5b58c34dc 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -899,7 +899,10 @@ function serialize_inline_component(node, component_name, context) { if (bind_this !== null) { const prev = fn; const assignment = b.assignment('=', bind_this, b.id('$$value')); - const bind_this_id = bind_this; + const bind_this_id = /** @type {import('estree').Expression} */ ( + // if expression is not an identifier, we know it can't be a signal + bind_this.type === 'Identifier' ? bind_this : undefined + ); fn = (node_id) => b.call( '$.bind_this', @@ -2621,18 +2624,17 @@ export const template_visitors = { break; } - case 'this': { - const expression = node.expression; + case 'this': call_expr = b.call( `$.bind_this`, state.node, setter, - expression.type === 'Identifier' - ? expression - : /** @type {import('estree').Expression} */ (visit(expression)) + /** @type {import('estree').Expression} */ ( + // if expression is not an identifier, we know it can't be a signal + node.expression.type === 'Identifier' ? node.expression : undefined + ) ); break; - } case 'textContent': case 'innerHTML': case 'innerText': diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js new file mode 100644 index 0000000000..4b5596cb3a --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/_config.js @@ -0,0 +1,7 @@ +import { test } from '../../test'; + +export default test({ + async test({ assert, target, component }) { + assert.equal(target.querySelector('img'), component.items[0].img); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte new file mode 100644 index 0000000000..a685cc9c84 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/each-bind-this-member/main.svelte @@ -0,0 +1,11 @@ + + +{#each items as item, i} + slider{i} +{/each} From 66d540d3c511b960741b3c41c8d32dc59d650a3f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 25 Nov 2023 14:41:17 -0500 Subject: [PATCH 08/16] Version Packages (next) (#9642) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 3 +++ packages/svelte/CHANGELOG.md | 10 ++++++++++ packages/svelte/package.json | 2 +- packages/svelte/src/version.js | 2 +- 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 8bc596d698..7e15cda5cf 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -12,6 +12,7 @@ "afraid-moose-matter", "brave-walls-destroy", "brown-spoons-boil", + "chilled-pumas-invite", "chilly-dolphins-lick", "clean-eels-beg", "cold-birds-own", @@ -39,6 +40,7 @@ "lazy-spiders-think", "long-crews-return", "lovely-items-turn", + "lovely-rules-eat", "lucky-schools-hang", "moody-frogs-exist", "moody-owls-cry", @@ -64,6 +66,7 @@ "thirty-flowers-sit", "thirty-ghosts-fix", "thirty-impalas-repair", + "thirty-wombats-relax", "tiny-kings-whisper", "two-falcons-buy", "wet-games-fly", diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index eaca4269a3..d8f5cd4fb2 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,15 @@ # svelte +## 5.0.0-next.13 + +### Patch Changes + +- fix: apply keyed validation only for keyed each ([#9641](https://github.com/sveltejs/svelte/pull/9641)) + +- fix: omit this bind this arg if we know it's not a signal ([#9635](https://github.com/sveltejs/svelte/pull/9635)) + +- fix: improve each block index handling ([#9644](https://github.com/sveltejs/svelte/pull/9644)) + ## 5.0.0-next.12 ### Patch Changes diff --git a/packages/svelte/package.json b/packages/svelte/package.json index ab79b8c7d9..d9ecf218d6 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -2,7 +2,7 @@ "name": "svelte", "description": "Cybernetically enhanced web apps", "license": "MIT", - "version": "5.0.0-next.12", + "version": "5.0.0-next.13", "type": "module", "types": "./types/index.d.ts", "engines": { diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js index ebc8996f18..a007154495 100644 --- a/packages/svelte/src/version.js +++ b/packages/svelte/src/version.js @@ -6,5 +6,5 @@ * https://svelte.dev/docs/svelte-compiler#svelte-version * @type {string} */ -export const VERSION = '5.0.0-next.12'; +export const VERSION = '5.0.0-next.13'; export const PUBLIC_VERSION = '5'; From 405e9da4ff853c2e8aafde739ba0b2fd406f56b5 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 25 Nov 2023 17:29:18 -0500 Subject: [PATCH 09/16] chore: bump esrap (#9649) * bump esrap * changeset --------- Co-authored-by: Rich Harris --- .changeset/stale-comics-look.md | 5 ++++ packages/svelte/package.json | 2 +- pnpm-lock.yaml | 46 ++++++----------------------- sites/svelte-5-preview/package.json | 2 +- 4 files changed, 16 insertions(+), 39 deletions(-) create mode 100644 .changeset/stale-comics-look.md diff --git a/.changeset/stale-comics-look.md b/.changeset/stale-comics-look.md new file mode 100644 index 0000000000..b7f09bd0a6 --- /dev/null +++ b/.changeset/stale-comics-look.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: bump esrap diff --git a/packages/svelte/package.json b/packages/svelte/package.json index d9ecf218d6..3e40ed5a2a 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -120,7 +120,7 @@ "aria-query": "^5.3.0", "axobject-query": "^4.0.0", "esm-env": "^1.0.0", - "esrap": "^1.2.0", + "esrap": "^1.2.1", "is-reference": "^3.0.1", "locate-character": "^3.0.0", "magic-string": "^0.30.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 625aaeaaf3..eb260d73ad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -81,8 +81,8 @@ importers: specifier: ^1.0.0 version: 1.0.0 esrap: - specifier: ^1.2.0 - version: 1.2.0 + specifier: ^1.2.1 + version: 1.2.1 is-reference: specifier: ^3.0.1 version: 3.0.2 @@ -261,8 +261,8 @@ importers: specifier: ^5.0.1 version: 5.0.2 esrap: - specifier: ^1.2.0 - version: 1.2.0 + specifier: ^1.2.1 + version: 1.2.1 publint: specifier: ^0.2.0 version: 0.2.5 @@ -2231,7 +2231,7 @@ packages: svelte: 4.2.3 tiny-glob: 0.2.9 undici: 5.26.5 - vite: 4.5.0(@types/node@18.18.9) + vite: 4.5.0(@types/node@20.9.0)(lightningcss@1.22.1)(sass@1.69.5) transitivePeerDependencies: - supports-color @@ -2322,7 +2322,7 @@ packages: '@sveltejs/vite-plugin-svelte': 2.5.1(svelte@4.2.3)(vite@4.5.0) debug: 4.3.4 svelte: 4.2.3 - vite: 4.5.0(@types/node@18.18.9) + vite: 4.5.0(@types/node@20.9.0)(lightningcss@1.22.1)(sass@1.69.5) transitivePeerDependencies: - supports-color @@ -2356,7 +2356,7 @@ packages: magic-string: 0.30.5 svelte: 4.2.3 svelte-hmr: 0.15.3(svelte@4.2.3) - vite: 4.5.0(@types/node@18.18.9) + vite: 4.5.0(@types/node@20.9.0)(lightningcss@1.22.1)(sass@1.69.5) vitefu: 0.2.5(vite@4.5.0) transitivePeerDependencies: - supports-color @@ -2828,7 +2828,6 @@ packages: dependencies: normalize-path: 3.0.0 picomatch: 2.3.1 - dev: true /aproba@2.0.0: resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==} @@ -2956,7 +2955,6 @@ packages: /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} - dev: true /bindings@1.5.0: resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==} @@ -3014,7 +3012,6 @@ packages: engines: {node: '>=8'} dependencies: fill-range: 7.0.1 - dev: true /breakword@1.0.6: resolution: {integrity: sha512-yjxDAYyK/pBvws9H4xKYpLDpYKEH6CzrBPAuXq3x18I+c/2MkVtT3qAr7Oloi6Dss9qNhPVueAAVU1CSeNDIXw==} @@ -3164,7 +3161,6 @@ packages: readdirp: 3.6.0 optionalDependencies: fsevents: 2.3.3 - dev: true /chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} @@ -3598,7 +3594,6 @@ packages: resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} engines: {node: '>=0.10'} hasBin: true - dev: true /detect-libc@2.0.2: resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} @@ -4056,8 +4051,8 @@ packages: estraverse: 5.3.0 dev: true - /esrap@1.2.0: - resolution: {integrity: sha512-ZWd00MnkN45Hcj+nIV5FPiZk6Nx7RDUL8G0KGp1cg1xSKXOEac0IhMQdsrGswXB1O0fMzH+MXq288Lt0Abpg/Q==} + /esrap@1.2.1: + resolution: {integrity: sha512-dhkcOLfN/aDdMFI1iwPEcy/XqAZzGNfgfEJjZozy2tia6u0dQoZyXzkRshHTckuNsM+c0CYQndY+uRFe3N+AIQ==} dependencies: '@jridgewell/sourcemap-codec': 1.4.15 '@types/estree': 1.0.5 @@ -4232,7 +4227,6 @@ packages: engines: {node: '>=8'} dependencies: to-regex-range: 5.0.1 - dev: true /finalhandler@1.2.0: resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==} @@ -4442,7 +4436,6 @@ packages: engines: {node: '>= 6'} dependencies: is-glob: 4.0.3 - dev: true /glob-parent@6.0.2: resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} @@ -4688,7 +4681,6 @@ packages: /immutable@4.3.4: resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==} - dev: true /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} @@ -4769,7 +4761,6 @@ packages: engines: {node: '>=8'} dependencies: binary-extensions: 2.2.0 - dev: true /is-boolean-object@1.1.2: resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} @@ -4814,7 +4805,6 @@ packages: /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} - dev: true /is-fullwidth-code-point@3.0.0: resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} @@ -4830,7 +4820,6 @@ packages: engines: {node: '>=0.10.0'} dependencies: is-extglob: 2.1.1 - dev: true /is-module@1.0.0: resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==} @@ -4851,7 +4840,6 @@ packages: /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} - dev: true /is-path-inside@3.0.3: resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} @@ -5127,7 +5115,6 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: true optional: true /lightningcss-darwin-x64@1.22.1: @@ -5136,7 +5123,6 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: true optional: true /lightningcss-freebsd-x64@1.22.1: @@ -5145,7 +5131,6 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true - dev: true optional: true /lightningcss-linux-arm-gnueabihf@1.22.1: @@ -5154,7 +5139,6 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: true optional: true /lightningcss-linux-arm64-gnu@1.22.1: @@ -5163,7 +5147,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true optional: true /lightningcss-linux-arm64-musl@1.22.1: @@ -5172,7 +5155,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true optional: true /lightningcss-linux-x64-gnu@1.22.1: @@ -5181,7 +5163,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true optional: true /lightningcss-linux-x64-musl@1.22.1: @@ -5190,7 +5171,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true optional: true /lightningcss-win32-x64-msvc@1.22.1: @@ -5199,7 +5179,6 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: true optional: true /lightningcss@1.22.1: @@ -5217,7 +5196,6 @@ packages: lightningcss-linux-x64-gnu: 1.22.1 lightningcss-linux-x64-musl: 1.22.1 lightningcss-win32-x64-msvc: 1.22.1 - dev: true /lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} @@ -5653,7 +5631,6 @@ packages: /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} - dev: true /npm-bundled@2.0.1: resolution: {integrity: sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==} @@ -5925,7 +5902,6 @@ packages: /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} - dev: true /pify@4.0.1: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} @@ -6271,7 +6247,6 @@ packages: engines: {node: '>=8.10.0'} dependencies: picomatch: 2.3.1 - dev: true /rechoir@0.6.2: resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==} @@ -6465,7 +6440,6 @@ packages: chokidar: 3.5.3 immutable: 4.3.4 source-map-js: 1.0.2 - dev: true /satori-html@0.3.2: resolution: {integrity: sha512-wjTh14iqADFKDK80e51/98MplTGfxz2RmIzh0GqShlf4a67+BooLywF17TvJPD6phO0Hxm7Mf1N5LtRYvdkYRA==} @@ -7232,7 +7206,6 @@ packages: engines: {node: '>=8.0'} dependencies: is-number: 7.0.0 - dev: true /toidentifier@1.0.1: resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} @@ -7656,7 +7629,6 @@ packages: sass: 1.69.5 optionalDependencies: fsevents: 2.3.3 - dev: true /vitefu@0.2.5(vite@4.5.0): resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} diff --git a/sites/svelte-5-preview/package.json b/sites/svelte-5-preview/package.json index eaf3aecbb1..38d281b105 100644 --- a/sites/svelte-5-preview/package.json +++ b/sites/svelte-5-preview/package.json @@ -18,7 +18,7 @@ "@sveltejs/kit": "^1.22.5", "@sveltejs/site-kit": "6.0.0-next.51", "@types/marked": "^5.0.1", - "esrap": "^1.2.0", + "esrap": "^1.2.1", "marked": "^9.0.0", "publint": "^0.2.0", "shiki": "^0.14.4", From 5619cd9bfc73276f8d831f3adfb3562407ca68d6 Mon Sep 17 00:00:00 2001 From: Dominik G Date: Mon, 27 Nov 2023 14:34:06 +0100 Subject: [PATCH 10/16] chore: update playgrounds/demo (#9666) * chore: update playgrounds/demo to exclude svelte from being optimized and generate an App.svelte so first run doesn't throw * chore: fix format --- playgrounds/demo/package.json | 5 +-- playgrounds/demo/scripts/App.template.svelte | 8 ++++ playgrounds/demo/scripts/create-app-svelte.js | 6 +++ playgrounds/demo/vite.config.js | 6 ++- pnpm-lock.yaml | 41 +++++++++++++++---- 5 files changed, 55 insertions(+), 11 deletions(-) create mode 100644 playgrounds/demo/scripts/App.template.svelte create mode 100644 playgrounds/demo/scripts/create-app-svelte.js diff --git a/playgrounds/demo/package.json b/playgrounds/demo/package.json index 6704c8cf75..410bbab35c 100644 --- a/playgrounds/demo/package.json +++ b/playgrounds/demo/package.json @@ -4,18 +4,17 @@ "version": "0.0.1", "type": "module", "scripts": { + "prepare": "node scripts/create-app-svelte.js", "dev": "vite --host", "ssr": "node ./server.js", "build": "vite build", "preview": "vite preview" }, - "dependencies": { - "svelte": "workspace:*" - }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^2.5.1", "express": "^4.18.2", "nodemon": "^3.0.1", + "svelte": "workspace:*", "vite": "^4.4.9" } } diff --git a/playgrounds/demo/scripts/App.template.svelte b/playgrounds/demo/scripts/App.template.svelte new file mode 100644 index 0000000000..e51190c18f --- /dev/null +++ b/playgrounds/demo/scripts/App.template.svelte @@ -0,0 +1,8 @@ + + +

Demo App

+ diff --git a/playgrounds/demo/scripts/create-app-svelte.js b/playgrounds/demo/scripts/create-app-svelte.js new file mode 100644 index 0000000000..478fa782ad --- /dev/null +++ b/playgrounds/demo/scripts/create-app-svelte.js @@ -0,0 +1,6 @@ +import fs from 'node:fs'; +const destination = new URL('../src/App.svelte', import.meta.url); +if (!fs.existsSync(destination)) { + const template = new URL('./App.template.svelte', import.meta.url); + fs.writeFileSync(destination, fs.readFileSync(template, 'utf-8'), 'utf-8'); +} diff --git a/playgrounds/demo/vite.config.js b/playgrounds/demo/vite.config.js index b77353a796..de42e9cfd4 100644 --- a/playgrounds/demo/vite.config.js +++ b/playgrounds/demo/vite.config.js @@ -2,5 +2,9 @@ import { defineConfig } from 'vite'; import { svelte } from '@sveltejs/vite-plugin-svelte'; export default defineConfig({ - plugins: [svelte()] + plugins: [svelte()], + optimizeDeps: { + // svelte is a local workspace package, optimizing it would require dev server restarts with --force for every change + exclude: ['svelte'] + } }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eb260d73ad..52efe8c739 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,10 +137,6 @@ importers: version: 0.2.9 playgrounds/demo: - dependencies: - svelte: - specifier: workspace:* - version: link:../../packages/svelte devDependencies: '@sveltejs/vite-plugin-svelte': specifier: ^2.5.1 @@ -151,6 +147,9 @@ importers: nodemon: specifier: ^3.0.1 version: 3.0.1 + svelte: + specifier: workspace:* + version: link:../../packages/svelte vite: specifier: ^4.4.9 version: 4.5.0(@types/node@18.18.9) @@ -2231,7 +2230,7 @@ packages: svelte: 4.2.3 tiny-glob: 0.2.9 undici: 5.26.5 - vite: 4.5.0(@types/node@20.9.0)(lightningcss@1.22.1)(sass@1.69.5) + vite: 4.5.0(@types/node@18.18.9) transitivePeerDependencies: - supports-color @@ -2322,7 +2321,7 @@ packages: '@sveltejs/vite-plugin-svelte': 2.5.1(svelte@4.2.3)(vite@4.5.0) debug: 4.3.4 svelte: 4.2.3 - vite: 4.5.0(@types/node@20.9.0)(lightningcss@1.22.1)(sass@1.69.5) + vite: 4.5.0(@types/node@18.18.9) transitivePeerDependencies: - supports-color @@ -2356,7 +2355,7 @@ packages: magic-string: 0.30.5 svelte: 4.2.3 svelte-hmr: 0.15.3(svelte@4.2.3) - vite: 4.5.0(@types/node@20.9.0)(lightningcss@1.22.1)(sass@1.69.5) + vite: 4.5.0(@types/node@18.18.9) vitefu: 0.2.5(vite@4.5.0) transitivePeerDependencies: - supports-color @@ -2828,6 +2827,7 @@ packages: dependencies: normalize-path: 3.0.0 picomatch: 2.3.1 + dev: true /aproba@2.0.0: resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==} @@ -2955,6 +2955,7 @@ packages: /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} + dev: true /bindings@1.5.0: resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==} @@ -3012,6 +3013,7 @@ packages: engines: {node: '>=8'} dependencies: fill-range: 7.0.1 + dev: true /breakword@1.0.6: resolution: {integrity: sha512-yjxDAYyK/pBvws9H4xKYpLDpYKEH6CzrBPAuXq3x18I+c/2MkVtT3qAr7Oloi6Dss9qNhPVueAAVU1CSeNDIXw==} @@ -3161,6 +3163,7 @@ packages: readdirp: 3.6.0 optionalDependencies: fsevents: 2.3.3 + dev: true /chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} @@ -3594,6 +3597,7 @@ packages: resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} engines: {node: '>=0.10'} hasBin: true + dev: true /detect-libc@2.0.2: resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} @@ -4227,6 +4231,7 @@ packages: engines: {node: '>=8'} dependencies: to-regex-range: 5.0.1 + dev: true /finalhandler@1.2.0: resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==} @@ -4436,6 +4441,7 @@ packages: engines: {node: '>= 6'} dependencies: is-glob: 4.0.3 + dev: true /glob-parent@6.0.2: resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} @@ -4681,6 +4687,7 @@ packages: /immutable@4.3.4: resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==} + dev: true /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} @@ -4761,6 +4768,7 @@ packages: engines: {node: '>=8'} dependencies: binary-extensions: 2.2.0 + dev: true /is-boolean-object@1.1.2: resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} @@ -4805,6 +4813,7 @@ packages: /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} + dev: true /is-fullwidth-code-point@3.0.0: resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} @@ -4820,6 +4829,7 @@ packages: engines: {node: '>=0.10.0'} dependencies: is-extglob: 2.1.1 + dev: true /is-module@1.0.0: resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==} @@ -4840,6 +4850,7 @@ packages: /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} + dev: true /is-path-inside@3.0.3: resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} @@ -5115,6 +5126,7 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true + dev: true optional: true /lightningcss-darwin-x64@1.22.1: @@ -5123,6 +5135,7 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true + dev: true optional: true /lightningcss-freebsd-x64@1.22.1: @@ -5131,6 +5144,7 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true + dev: true optional: true /lightningcss-linux-arm-gnueabihf@1.22.1: @@ -5139,6 +5153,7 @@ packages: cpu: [arm] os: [linux] requiresBuild: true + dev: true optional: true /lightningcss-linux-arm64-gnu@1.22.1: @@ -5147,6 +5162,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: true optional: true /lightningcss-linux-arm64-musl@1.22.1: @@ -5155,6 +5171,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: true optional: true /lightningcss-linux-x64-gnu@1.22.1: @@ -5163,6 +5180,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: true optional: true /lightningcss-linux-x64-musl@1.22.1: @@ -5171,6 +5189,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: true optional: true /lightningcss-win32-x64-msvc@1.22.1: @@ -5179,6 +5198,7 @@ packages: cpu: [x64] os: [win32] requiresBuild: true + dev: true optional: true /lightningcss@1.22.1: @@ -5196,6 +5216,7 @@ packages: lightningcss-linux-x64-gnu: 1.22.1 lightningcss-linux-x64-musl: 1.22.1 lightningcss-win32-x64-msvc: 1.22.1 + dev: true /lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} @@ -5631,6 +5652,7 @@ packages: /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + dev: true /npm-bundled@2.0.1: resolution: {integrity: sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==} @@ -5902,6 +5924,7 @@ packages: /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} + dev: true /pify@4.0.1: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} @@ -6247,6 +6270,7 @@ packages: engines: {node: '>=8.10.0'} dependencies: picomatch: 2.3.1 + dev: true /rechoir@0.6.2: resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==} @@ -6440,6 +6464,7 @@ packages: chokidar: 3.5.3 immutable: 4.3.4 source-map-js: 1.0.2 + dev: true /satori-html@0.3.2: resolution: {integrity: sha512-wjTh14iqADFKDK80e51/98MplTGfxz2RmIzh0GqShlf4a67+BooLywF17TvJPD6phO0Hxm7Mf1N5LtRYvdkYRA==} @@ -7206,6 +7231,7 @@ packages: engines: {node: '>=8.0'} dependencies: is-number: 7.0.0 + dev: true /toidentifier@1.0.1: resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} @@ -7629,6 +7655,7 @@ packages: sass: 1.69.5 optionalDependencies: fsevents: 2.3.3 + dev: true /vitefu@0.2.5(vite@4.5.0): resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} From 83fd00115757d9d06c78a1d65bc77378a552ae2e Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:36:13 +0100 Subject: [PATCH 11/16] fix: prevent reactive snippet from reinitializing unnecessarily (#9665) untrack the invocation itself, only track the snippet function fixes #9652 --- .changeset/light-pens-watch.md | 5 ++ .../3-transform/client/visitors/template.js | 16 ++--- packages/svelte/src/internal/client/render.js | 11 +++- .../samples/snippet-reactive-args/_config.js | 62 +++++++++++++++++++ .../snippet-reactive-args/inner.svelte | 6 ++ .../samples/snippet-reactive-args/main.svelte | 22 +++++++ 6 files changed, 112 insertions(+), 10 deletions(-) create mode 100644 .changeset/light-pens-watch.md create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/inner.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/main.svelte diff --git a/.changeset/light-pens-watch.md b/.changeset/light-pens-watch.md new file mode 100644 index 0000000000..62debd2eb4 --- /dev/null +++ b/.changeset/light-pens-watch.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: prevent reactive snippet from reinitializing unnecessarily diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index b5b58c34dc..9640e6c275 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -1734,18 +1734,20 @@ export const template_visitors = { if (node.argument) { args.push(b.thunk(/** @type {import('estree').Expression} */ (context.visit(node.argument)))); } - const snippet_function = /** @type {import('estree').Expression} */ ( + + let snippet_function = /** @type {import('estree').Expression} */ ( context.visit(node.expression) ); - const init = b.call( - context.state.options.dev ? b.call('$.validate_snippet', snippet_function) : snippet_function, - ...args - ); + if (context.state.options.dev) { + snippet_function = b.call('$.validate_snippet', snippet_function); + } if (is_reactive) { - context.state.init.push(b.stmt(b.call('$.snippet_effect', b.thunk(init)))); + context.state.init.push( + b.stmt(b.call('$.snippet_effect', b.thunk(snippet_function), ...args)) + ); } else { - context.state.init.push(b.stmt(init)); + context.state.init.push(b.stmt(b.call(snippet_function, ...args))); } }, AnimateDirective(node, { state, visit }) { diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js index afb060639a..54c760a4a5 100644 --- a/packages/svelte/src/internal/client/render.js +++ b/packages/svelte/src/internal/client/render.js @@ -3170,13 +3170,18 @@ export function sanitize_slots(props) { } /** - * @param {() => void} create_snippet + * @param {() => Function} get_snippet + * @param {Node} node + * @param {() => any} args * @returns {void} */ -export function snippet_effect(create_snippet) { +export function snippet_effect(get_snippet, node, args) { const block = create_snippet_block(); render_effect(() => { - create_snippet(); + // Only rerender when the snippet function itself changes, + // not when an eagerly-read prop inside the snippet function changes + const snippet = get_snippet(); + untrack(() => snippet(node, args)); return () => { if (block.d !== null) { remove(block.d); diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/_config.js new file mode 100644 index 0000000000..ffb50aaa53 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/_config.js @@ -0,0 +1,62 @@ +import { test } from '../../test'; + +export default test({ + html: ` +

snippet: 0

+ + + `, + props: { + get log() { + return []; + } + }, + + async test({ assert, target, component }) { + const [toggle, increment] = target.querySelectorAll('button'); + + await increment?.click(); + assert.htmlEqual( + target.innerHTML, + ` +

snippet: 1

+ + + ` + ); + assert.deepEqual(component.log, []); + + await toggle?.click(); + assert.htmlEqual( + target.innerHTML, + ` +

component: 1

+ + + ` + ); + assert.deepEqual(component.log, [1]); + + await increment?.click(); + assert.htmlEqual( + target.innerHTML, + ` +

component: 2

+ + + ` + ); + assert.deepEqual(component.log, [1]); + + await toggle?.click(); + assert.htmlEqual( + target.innerHTML, + ` +

snippet: 2

+ + + ` + ); + assert.deepEqual(component.log, [1]); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/inner.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/inner.svelte new file mode 100644 index 0000000000..bbe3a61043 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/inner.svelte @@ -0,0 +1,6 @@ + + +

component: {count}

diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/main.svelte new file mode 100644 index 0000000000..682fca22dc --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/snippet-reactive-args/main.svelte @@ -0,0 +1,22 @@ + + +{#snippet foo({count})} +

snippet: {count}

+{/snippet} + +{#snippet bar(props)} + +{/snippet} + +{@render snippet({ count, log })} + + + From 617d63dd90737dbe4d622c24a5ae08d229c535f3 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Mon, 27 Nov 2023 14:36:47 +0100 Subject: [PATCH 12/16] fix: take event attributes into account when checking a11y (#9664) also adjusted the warning messages slightly so they make sense for both variants of event handlers fixes #9654 --- .changeset/polite-pumpkins-guess.md | 5 ++++ .../src/compiler/phases/2-analyze/a11y.js | 14 ++++++---- packages/svelte/src/compiler/warnings.js | 4 +-- .../input.svelte | 3 +++ .../warnings.json | 26 ++++++++++++++----- .../warnings.json | 4 +-- .../warnings.json | 8 +++--- .../samples/slot-warning/warnings.json | 2 +- .../samples/slot-warning2/warnings.json | 2 +- 9 files changed, 46 insertions(+), 22 deletions(-) create mode 100644 .changeset/polite-pumpkins-guess.md diff --git a/.changeset/polite-pumpkins-guess.md b/.changeset/polite-pumpkins-guess.md new file mode 100644 index 0000000000..e364f9635d --- /dev/null +++ b/.changeset/polite-pumpkins-guess.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: take event attributes into account when checking a11y diff --git a/packages/svelte/src/compiler/phases/2-analyze/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/a11y.js index 33692ebafa..eb87b5ddbf 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/a11y.js +++ b/packages/svelte/src/compiler/phases/2-analyze/a11y.js @@ -9,7 +9,7 @@ import { } from '../patterns.js'; import { warn } from '../../warnings.js'; import fuzzymatch from '../1-parse/utils/fuzzymatch.js'; -import { is_text_attribute } from '../../utils/ast.js'; +import { is_event_attribute, is_text_attribute } from '../../utils/ast.js'; import { ContentEditableBindings } from '../constants.js'; import { walk } from 'zimmerframe'; @@ -704,10 +704,14 @@ function check_element(node, state, path) { } else if (attribute.type === 'OnDirective') { handlers.add(attribute.name); } else if (attribute.type === 'Attribute') { - attributes.push(attribute); - attribute_map.set(attribute.name, attribute); - if (attribute.name === 'contenteditable') { - has_contenteditable_attr = true; + if (is_event_attribute(attribute)) { + handlers.add(attribute.name.slice(2)); + } else { + attributes.push(attribute); + attribute_map.set(attribute.name, attribute); + if (attribute.name === 'contenteditable') { + has_contenteditable_attr = true; + } } } else if ( attribute.type === 'BindDirective' && diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index 7103f4162c..23e9378c25 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -115,7 +115,7 @@ const a11y = { 'a11y-misplaced-scope': () => 'A11y: The scope attribute should only be used with elements', 'a11y-positive-tabindex': () => 'A11y: avoid tabindex values above zero', 'a11y-click-events-have-key-events': () => - 'A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as + + +

{a} + {b} + {c} = {a + b + c}

diff --git a/packages/svelte/tests/validator/samples/runes-referenced-nonstate/warnings.json b/packages/svelte/tests/validator/samples/runes-referenced-nonstate/warnings.json new file mode 100644 index 0000000000..7e251a4e70 --- /dev/null +++ b/packages/svelte/tests/validator/samples/runes-referenced-nonstate/warnings.json @@ -0,0 +1,26 @@ +[ + { + "code": "non-state-reference", + "message": "b is updated, but is not declared with $state(...). Changing its value will not correctly trigger updates.", + "start": { + "column": 5, + "line": 3 + }, + "end": { + "column": 6, + "line": 3 + } + }, + { + "code": "non-state-reference", + "message": "c is updated, but is not declared with $state(...). Changing its value will not correctly trigger updates.", + "start": { + "column": 5, + "line": 4 + }, + "end": { + "column": 6, + "line": 4 + } + } +] diff --git a/packages/svelte/tests/validator/samples/runes-state-rune-not-mutated/warnings.json b/packages/svelte/tests/validator/samples/runes-state-rune-not-mutated/warnings.json index 628f1f2e9d..5d2b639c8d 100644 --- a/packages/svelte/tests/validator/samples/runes-state-rune-not-mutated/warnings.json +++ b/packages/svelte/tests/validator/samples/runes-state-rune-not-mutated/warnings.json @@ -1,6 +1,6 @@ [ { - "code": "state-rune-not-mutated", + "code": "state-not-mutated", "end": { "column": 11, "line": 3