From e4460e38ba58d5209514f0fa93dc61b6bb1ebb54 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Sun, 19 Jan 2020 13:36:22 -0500 Subject: [PATCH 01/11] fix '~=' and class selectors with arbitrary whitespace (#4286) --- CHANGELOG.md | 1 + src/compiler/compile/css/Selector.ts | 6 +++--- .../expected.css | 1 + .../input.svelte | 13 +++++++++++++ 4 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css create mode 100644 test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index 5264f35504..5b0bb4751d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ * Disallow two-way binding to a variable declared by an `{#await}` block ([#4012](https://github.com/sveltejs/svelte/issues/4012)) * Allow access to `let:` variables in sibling attributes on slot root ([#4173](https://github.com/sveltejs/svelte/issues/4173)) +* Fix `~=` and class selector matching against values separated by any whitespace characters ([#4242](https://github.com/sveltejs/svelte/issues/4242)) * Fix code generation for `await`ed expressions that need parentheses ([#4267](https://github.com/sveltejs/svelte/issues/4267)) * Add some more known globals ([#4276](https://github.com/sveltejs/svelte/pull/4276)) * Correctly apply event modifiers to `` events ([#4278](https://github.com/sveltejs/svelte/issues/4278)) diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index eecb0cd975..39bbc2e8d1 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -171,7 +171,7 @@ function apply_selector(blocks: Block[], node: Element, stack: Element[], to_enc if (ancestor_block.global) { continue; } - + for (const stack_node of stack) { if (block_might_apply_to_node(ancestor_block, stack_node) !== BlockAppliesToNode.NotPossible) { to_encapsulate.push({ node: stack_node, block: ancestor_block }); @@ -256,7 +256,7 @@ function test_attribute(operator, expected_value, case_insensitive, value) { } switch (operator) { case '=': return value === expected_value; - case '~=': return ` ${value} `.includes(` ${expected_value} `); + case '~=': return value.split(/\s/).includes(expected_value); case '|=': return `${value}-`.startsWith(`${expected_value}-`); case '^=': return value.startsWith(expected_value); case '$=': return value.endsWith(expected_value); @@ -295,7 +295,7 @@ function attribute_matches(node: CssNode, name: string, expected_value: string, // impossible to find out all combinations if (current_possible_values.has(UNKNOWN)) return true; - + if (prev_values.length > 0) { const start_with_space = []; const remaining = []; diff --git a/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css b/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css new file mode 100644 index 0000000000..c1c0f3fdf6 --- /dev/null +++ b/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css @@ -0,0 +1 @@ +.foo.svelte-xyz{color:red}[class~="bar"].svelte-xyz{background:blue} \ No newline at end of file diff --git a/test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte b/test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte new file mode 100644 index 0000000000..758aa27e0b --- /dev/null +++ b/test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte @@ -0,0 +1,13 @@ +
+ + From 33c3a02ee4b9ac3ee9d9dbec1c7328db0d49d6c0 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 20 Jan 2020 10:31:31 -0500 Subject: [PATCH 02/11] failing test --- test/hydration/samples/element-attribute-removed/_before.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/hydration/samples/element-attribute-removed/_before.html b/test/hydration/samples/element-attribute-removed/_before.html index c6a8a8c95d..80c0591a4d 100644 --- a/test/hydration/samples/element-attribute-removed/_before.html +++ b/test/hydration/samples/element-attribute-removed/_before.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file From 91e0d1b720e209833f11e894b956ea361ef8878a Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 20 Jan 2020 10:34:29 -0500 Subject: [PATCH 03/11] fix removing attributes during hydration (#1733) --- src/runtime/internal/dom.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index f9e89f41b9..5a165136ce 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -152,11 +152,16 @@ export function claim_element(nodes, name, attributes, svg) { for (let i = 0; i < nodes.length; i += 1) { const node = nodes[i]; if (node.nodeName === name) { - for (let j = 0; j < node.attributes.length; j += 1) { + let j = 0; + while (j < node.attributes.length) { const attribute = node.attributes[j]; - if (!attributes[attribute.name]) node.removeAttribute(attribute.name); + if (attributes[attribute.name]) { + j++; + } else { + node.removeAttribute(attribute.name); + } } - return nodes.splice(i, 1)[0]; // TODO strip unwanted attributes + return nodes.splice(i, 1)[0]; } } From b0415a269bb4918048508b97399f97a71f6499fe Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 20 Jan 2020 10:35:13 -0500 Subject: [PATCH 04/11] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b0bb4751d..d9ec5900b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Unreleased +* Fix removing attributes during hydration ([#1733](https://github.com/sveltejs/svelte/issues/1733)) * Disallow two-way binding to a variable declared by an `{#await}` block ([#4012](https://github.com/sveltejs/svelte/issues/4012)) * Allow access to `let:` variables in sibling attributes on slot root ([#4173](https://github.com/sveltejs/svelte/issues/4173)) * Fix `~=` and class selector matching against values separated by any whitespace characters ([#4242](https://github.com/sveltejs/svelte/issues/4242)) From f12340acf02e6c8e7dc23cafe0469eb72d278fc8 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 20 Jan 2020 21:17:24 -0500 Subject: [PATCH 05/11] preserve js comments where possible (#4293) --- CHANGELOG.md | 1 + package-lock.json | 6 +++--- package.json | 2 +- src/compiler/parse/acorn.ts | 9 ++++----- .../js/samples/action-custom-event-handler/expected.js | 2 +- .../samples/collapses-text-around-comments/expected.js | 2 +- test/js/samples/css-media-query/expected.js | 2 +- test/js/samples/event-modifiers/expected.js | 4 ++-- test/js/samples/ssr-no-oncreate-etc/expected.js | 2 +- test/parser/samples/script-comment-only/output.json | 10 +++++++++- .../script-comment-trailing-multiline/output.json | 10 +++++++++- .../parser/samples/script-comment-trailing/output.json | 10 +++++++++- 12 files changed, 42 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9ec5900b4..59fa25682e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * Allow access to `let:` variables in sibling attributes on slot root ([#4173](https://github.com/sveltejs/svelte/issues/4173)) * Fix `~=` and class selector matching against values separated by any whitespace characters ([#4242](https://github.com/sveltejs/svelte/issues/4242)) * Fix code generation for `await`ed expressions that need parentheses ([#4267](https://github.com/sveltejs/svelte/issues/4267)) +* Preserve JavaScript comments from the original component source where possible ([#4268](https://github.com/sveltejs/svelte/issues/4268)) * Add some more known globals ([#4276](https://github.com/sveltejs/svelte/pull/4276)) * Correctly apply event modifiers to `` events ([#4278](https://github.com/sveltejs/svelte/issues/4278)) diff --git a/package-lock.json b/package-lock.json index 4d902d5c48..90f5a331ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -597,9 +597,9 @@ "dev": true }, "code-red": { - "version": "0.0.30", - "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.0.30.tgz", - "integrity": "sha512-nsScy3A59tbV5uzndcedIEGHmdWNEByJrC7DUyb0Wh7qZcoPfAlcYsr0ZINkAEhZofSI26F1mi+lRO0/6EV2/g==", + "version": "0.0.31", + "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.0.31.tgz", + "integrity": "sha512-7Gf3vm8pDbs+H/hKsaqOZe0xKlE9Neah12GCfs7qun3fBUaOXwexAMjn0Eo9cvJJvhRMaL0jgPiY9ZGLTWoe8A==", "dev": true, "requires": { "acorn": "^7.1.0", diff --git a/package.json b/package.json index 671a7e5025..6a66276c2d 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "acorn": "^7.1.0", "agadoo": "^1.1.0", "c8": "^5.0.1", - "code-red": "0.0.30", + "code-red": "0.0.31", "codecov": "^3.5.0", "css-tree": "1.0.0-alpha22", "eslint": "^6.3.0", diff --git a/src/compiler/parse/acorn.ts b/src/compiler/parse/acorn.ts index 30ab3c398c..d14721cdab 100644 --- a/src/compiler/parse/acorn.ts +++ b/src/compiler/parse/acorn.ts @@ -1,14 +1,13 @@ -import * as acorn from 'acorn'; +import { Node } from 'acorn'; +import * as code_red from 'code-red'; -const Parser = acorn.Parser; - -export const parse = (source: string) => Parser.parse(source, { +export const parse = (source: string): Node => code_red.parse(source, { sourceType: 'module', ecmaVersion: 11, locations: true }); -export const parse_expression_at = (source: string, index: number) => Parser.parseExpressionAt(source, index, { +export const parse_expression_at = (source: string, index: number): Node => code_red.parseExpressionAt(source, index, { ecmaVersion: 11, locations: true }); \ No newline at end of file diff --git a/test/js/samples/action-custom-event-handler/expected.js b/test/js/samples/action-custom-event-handler/expected.js index 968b5965d5..ead6d90e06 100644 --- a/test/js/samples/action-custom-event-handler/expected.js +++ b/test/js/samples/action-custom-event-handler/expected.js @@ -43,7 +43,7 @@ function handleFoo(bar) { function foo(node, callback) { -} +} // code goes here function instance($$self, $$props, $$invalidate) { let { bar } = $$props; diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 8c0e9d5373..6fef0f9490 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -63,4 +63,4 @@ class Component extends SvelteComponent { } } -export default Component; +export default Component; \ No newline at end of file diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index 0566c22ddd..f477670059 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -46,4 +46,4 @@ class Component extends SvelteComponent { } } -export default Component; +export default Component; \ No newline at end of file diff --git a/test/js/samples/event-modifiers/expected.js b/test/js/samples/event-modifiers/expected.js index 252034a431..c12c3523a0 100644 --- a/test/js/samples/event-modifiers/expected.js +++ b/test/js/samples/event-modifiers/expected.js @@ -63,11 +63,11 @@ function create_fragment(ctx) { function handleTouchstart() { -} +} // ... function handleClick() { -} +} // ... class Component extends SvelteComponent { constructor(options) { diff --git a/test/js/samples/ssr-no-oncreate-etc/expected.js b/test/js/samples/ssr-no-oncreate-etc/expected.js index 276587eeca..803f06a882 100644 --- a/test/js/samples/ssr-no-oncreate-etc/expected.js +++ b/test/js/samples/ssr-no-oncreate-etc/expected.js @@ -13,7 +13,7 @@ function foo() { function swipe(node, callback) { -} +} // TODO implement const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => { onMount(() => { diff --git a/test/parser/samples/script-comment-only/output.json b/test/parser/samples/script-comment-only/output.json index 3441d8a7bb..e090b30ae6 100644 --- a/test/parser/samples/script-comment-only/output.json +++ b/test/parser/samples/script-comment-only/output.json @@ -41,7 +41,15 @@ } }, "body": [], - "sourceType": "module" + "sourceType": "module", + "trailingComments": [ + { + "type": "Line", + "value": " TODO write some code", + "start": 10, + "end": 33 + } + ] } } } \ No newline at end of file diff --git a/test/parser/samples/script-comment-trailing-multiline/output.json b/test/parser/samples/script-comment-trailing-multiline/output.json index 3c02b1fbde..be83eeea8b 100644 --- a/test/parser/samples/script-comment-trailing-multiline/output.json +++ b/test/parser/samples/script-comment-trailing-multiline/output.json @@ -134,7 +134,15 @@ "kind": "let" } ], - "sourceType": "module" + "sourceType": "module", + "trailingComments": [ + { + "type": "Block", + "value": "\n\ttrailing multiline comment\n", + "start": 32, + "end": 67 + } + ] } } } \ No newline at end of file diff --git a/test/parser/samples/script-comment-trailing/output.json b/test/parser/samples/script-comment-trailing/output.json index beca001042..a2bc00bc00 100644 --- a/test/parser/samples/script-comment-trailing/output.json +++ b/test/parser/samples/script-comment-trailing/output.json @@ -134,7 +134,15 @@ "kind": "let" } ], - "sourceType": "module" + "sourceType": "module", + "trailingComments": [ + { + "type": "Line", + "value": " trailing line comment", + "start": 32, + "end": 56 + } + ] } } } \ No newline at end of file From e93c9913623ba43d8424191fe33f8bebb36e7dea Mon Sep 17 00:00:00 2001 From: Conduitry Date: Mon, 20 Jan 2020 21:18:15 -0500 Subject: [PATCH 06/11] -> v3.17.2 --- 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 59fa25682e..92e61719d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.17.2 * Fix removing attributes during hydration ([#1733](https://github.com/sveltejs/svelte/issues/1733)) * Disallow two-way binding to a variable declared by an `{#await}` block ([#4012](https://github.com/sveltejs/svelte/issues/4012)) diff --git a/package-lock.json b/package-lock.json index 90f5a331ed..ca225baa1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.17.1", + "version": "3.17.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 6a66276c2d..0910dca8c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.17.1", + "version": "3.17.2", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From e4daaccd06cfe8fe1f4885fcb10942132153b521 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Wed, 22 Jan 2020 19:32:24 +0800 Subject: [PATCH 07/11] fix nested block not reactive (#4294) --- CHANGELOG.md | 4 +++ src/compiler/compile/render_dom/Block.ts | 3 ++ .../component-slot-nested-if/Display.svelte | 2 ++ .../component-slot-nested-if/Input.svelte | 6 ++++ .../component-slot-nested-if/_config.js | 30 +++++++++++++++++++ .../component-slot-nested-if/main.svelte | 10 +++++++ 6 files changed, 55 insertions(+) create mode 100644 test/runtime/samples/component-slot-nested-if/Display.svelte create mode 100644 test/runtime/samples/component-slot-nested-if/Input.svelte create mode 100644 test/runtime/samples/component-slot-nested-if/_config.js create mode 100644 test/runtime/samples/component-slot-nested-if/main.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index 92e61719d0..60153dcaba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Fix updating a `` inside an `{#if}` or other block ([#4292](https://github.com/sveltejs/svelte/issues/4292)) + ## 3.17.2 * Fix removing attributes during hydration ([#1733](https://github.com/sveltejs/svelte/issues/1733)) diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts index 68d28024fe..62bdc5bdd9 100644 --- a/src/compiler/compile/render_dom/Block.ts +++ b/src/compiler/compile/render_dom/Block.ts @@ -160,6 +160,9 @@ export default class Block { }); this.has_update_method = true; + if (this.parent) { + this.parent.add_dependencies(dependencies); + } } add_element( diff --git a/test/runtime/samples/component-slot-nested-if/Display.svelte b/test/runtime/samples/component-slot-nested-if/Display.svelte new file mode 100644 index 0000000000..d9034e4be2 --- /dev/null +++ b/test/runtime/samples/component-slot-nested-if/Display.svelte @@ -0,0 +1,2 @@ +Display: + \ No newline at end of file diff --git a/test/runtime/samples/component-slot-nested-if/Input.svelte b/test/runtime/samples/component-slot-nested-if/Input.svelte new file mode 100644 index 0000000000..fd8f22db00 --- /dev/null +++ b/test/runtime/samples/component-slot-nested-if/Input.svelte @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/test/runtime/samples/component-slot-nested-if/_config.js b/test/runtime/samples/component-slot-nested-if/_config.js new file mode 100644 index 0000000000..89dfd006cc --- /dev/null +++ b/test/runtime/samples/component-slot-nested-if/_config.js @@ -0,0 +1,30 @@ +export default { + html: ` + + `, + async test({ assert, target, snapshot, component, window }) { + const input = target.querySelector('input'); + + input.value = 'a'; + await input.dispatchEvent(new window.Event('input')); + + assert.htmlEqual( + target.innerHTML, + ` + + Display: a + ` + ); + + input.value = 'abc'; + await input.dispatchEvent(new window.Event('input')); + + assert.htmlEqual( + target.innerHTML, + ` + + Display: abc + ` + ); + }, +}; diff --git a/test/runtime/samples/component-slot-nested-if/main.svelte b/test/runtime/samples/component-slot-nested-if/main.svelte new file mode 100644 index 0000000000..727927b157 --- /dev/null +++ b/test/runtime/samples/component-slot-nested-if/main.svelte @@ -0,0 +1,10 @@ + + + + {#if foo} + {foo} + {/if} + From 5107ad38b6ce0e388cb2eb99361c5000c4b6de91 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 22 Jan 2020 09:19:32 -0500 Subject: [PATCH 08/11] fix deriving from RxJS observables (#4300) --- CHANGELOG.md | 1 + src/runtime/internal/utils.ts | 4 ++-- src/runtime/store/index.ts | 5 +++-- test/store/index.js | 25 +++++++++++++++---------- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60153dcaba..388fe61397 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Fix updating a `` inside an `{#if}` or other block ([#4292](https://github.com/sveltejs/svelte/issues/4292)) +* Fix using RxJS observables in `derived` stores ([#4298](https://github.com/sveltejs/svelte/issues/4298)) ## 3.17.2 diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts index c94a135869..c7722e1a07 100644 --- a/src/runtime/internal/utils.ts +++ b/src/runtime/internal/utils.ts @@ -48,8 +48,8 @@ export function validate_store(store, name) { } } -export function subscribe(store, callback) { - const unsub = store.subscribe(callback); +export function subscribe(store, ...callbacks) { + const unsub = store.subscribe(...callbacks); return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub; } diff --git a/src/runtime/store/index.ts b/src/runtime/store/index.ts index 64a63d4179..2bbfdfcd60 100644 --- a/src/runtime/store/index.ts +++ b/src/runtime/store/index.ts @@ -1,4 +1,4 @@ -import { run_all, noop, safe_not_equal, is_function, get_store_value } from 'svelte/internal'; +import { run_all, subscribe, noop, safe_not_equal, is_function, get_store_value } from 'svelte/internal'; /** Callback to inform of a value updates. */ type Subscriber = (value: T) => void; @@ -173,7 +173,8 @@ export function derived(stores: Stores, fn: Function, initial_value?: T): Rea } }; - const unsubscribers = stores_array.map((store, i) => store.subscribe( + const unsubscribers = stores_array.map((store, i) => subscribe( + store, (value) => { values[i] = value; pending &= ~(1 << i); diff --git a/test/store/index.js b/test/store/index.js index a39fab86e6..2af4a6f35d 100644 --- a/test/store/index.js +++ b/test/store/index.js @@ -116,6 +116,15 @@ describe('store', () => { }); }); + const fake_observable = { + subscribe(fn) { + fn(42); + return { + unsubscribe: () => {} + }; + } + }; + describe('derived', () => { it('maps a single store', () => { const a = writable(1); @@ -346,6 +355,11 @@ describe('store', () => { b.set(2); assert.deepEqual(get(c), 'two 2'); }); + + it('works with RxJS-style observables', () => { + const d = derived(fake_observable, _ => _); + assert.equal(get(d), 42); + }); }); describe('get', () => { @@ -355,16 +369,7 @@ describe('store', () => { }); it('works with RxJS-style observables', () => { - const observable = { - subscribe(fn) { - fn(42); - return { - unsubscribe: () => {} - }; - } - }; - - assert.equal(get(observable), 42); + assert.equal(get(fake_observable), 42); }); }); }); From 1a343b165c577429e968cea48607cccabf714b9b Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 22 Jan 2020 11:05:31 -0500 Subject: [PATCH 09/11] disallow duplicate each keys in dev mode (#4303) --- CHANGELOG.md | 1 + .../compile/render_dom/wrappers/EachBlock.ts | 2 ++ src/runtime/internal/keyed_each.ts | 14 +++++++++----- .../samples/keyed-each-dev-unique/_config.js | 7 +++++++ .../samples/keyed-each-dev-unique/main.svelte | 7 +++++++ 5 files changed, 26 insertions(+), 5 deletions(-) create mode 100644 test/runtime/samples/keyed-each-dev-unique/_config.js create mode 100644 test/runtime/samples/keyed-each-dev-unique/main.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index 388fe61397..5838dcac80 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ * Fix updating a `` inside an `{#if}` or other block ([#4292](https://github.com/sveltejs/svelte/issues/4292)) * Fix using RxJS observables in `derived` stores ([#4298](https://github.com/sveltejs/svelte/issues/4298)) +* Add dev mode check to disallow duplicate keys in a keyed `{#each}` ([#4301](https://github.com/sveltejs/svelte/issues/4301)) ## 3.17.2 diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index 4928b5a38c..639a8831bd 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -374,6 +374,7 @@ export default class EachBlockWrapper extends Wrapper { block.chunks.init.push(b` const ${get_key} = #ctx => ${this.node.key.manipulate(block)}; + ${this.renderer.options.dev && b`@validate_each_keys(#ctx, ${this.vars.each_block_value}, ${this.vars.get_each_context}, ${get_key});`} for (let #i = 0; #i < ${data_length}; #i += 1) { let child_ctx = ${this.vars.get_each_context}(#ctx, ${this.vars.each_block_value}, #i); let key = ${get_key}(child_ctx); @@ -416,6 +417,7 @@ export default class EachBlockWrapper extends Wrapper { ${this.block.has_outros && b`@group_outros();`} ${this.node.has_animation && b`for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`} + ${this.renderer.options.dev && b`@validate_each_keys(#ctx, ${this.vars.each_block_value}, ${this.vars.get_each_context}, ${get_key});`} ${iterations} = @update_keyed_each(${iterations}, #dirty, ${get_key}, ${dynamic ? 1 : 0}, #ctx, ${this.vars.each_block_value}, ${lookup}, ${update_mount_node}, ${destroy}, ${create_each_block}, ${update_anchor_node}, ${this.vars.get_each_context}); ${this.node.has_animation && b`for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`} ${this.block.has_outros && b`@check_outros();`} diff --git a/src/runtime/internal/keyed_each.ts b/src/runtime/internal/keyed_each.ts index 8382a2f76a..b397335c87 100644 --- a/src/runtime/internal/keyed_each.ts +++ b/src/runtime/internal/keyed_each.ts @@ -108,9 +108,13 @@ export function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list return new_blocks; } -export function measure(blocks) { - const rects = {}; - let i = blocks.length; - while (i--) rects[blocks[i].key] = blocks[i].node.getBoundingClientRect(); - return rects; +export function validate_each_keys(ctx, list, get_context, get_key) { + const keys = new Set(); + for (let i = 0; i < list.length; i++) { + const key = get_key(get_context(ctx, list, i)); + if (keys.has(key)) { + throw new Error(`Cannot have duplicate keys in a keyed each`); + } + keys.add(key); + } } diff --git a/test/runtime/samples/keyed-each-dev-unique/_config.js b/test/runtime/samples/keyed-each-dev-unique/_config.js new file mode 100644 index 0000000000..8f46af9d52 --- /dev/null +++ b/test/runtime/samples/keyed-each-dev-unique/_config.js @@ -0,0 +1,7 @@ +export default { + compileOptions: { + dev: true + }, + + error: `Cannot have duplicate keys in a keyed each` +}; diff --git a/test/runtime/samples/keyed-each-dev-unique/main.svelte b/test/runtime/samples/keyed-each-dev-unique/main.svelte new file mode 100644 index 0000000000..870e7beaa1 --- /dev/null +++ b/test/runtime/samples/keyed-each-dev-unique/main.svelte @@ -0,0 +1,7 @@ + + +{#each array as item (item)} + {item} +{/each} From 3ba4f8abcad48b0380c9046d0f9230c1fc330964 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 22 Jan 2020 20:11:45 -0500 Subject: [PATCH 10/11] site: fix a couple absolute links --- site/content/blog/2019-04-20-write-less-code.md | 2 +- site/content/docs/01-component-format.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md index d6c8b77193..d56c5312e8 100644 --- a/site/content/blog/2019-04-20-write-less-code.md +++ b/site/content/blog/2019-04-20-write-less-code.md @@ -159,6 +159,6 @@ In Vue, meanwhile, we have a default export with a `data` function that returns ## Death to boilerplate -These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](https://svelte.dev/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change). +These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change). How? By choosing a different set of constraints. Because [Svelte is a compiler](blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps. diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md index e541292e13..026a2da5b3 100644 --- a/site/content/docs/01-component-format.md +++ b/site/content/docs/01-component-format.md @@ -197,7 +197,7 @@ You can `export` bindings from this block, and they will become exports of the c You cannot `export default`, since the default export is the component itself. -> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](https://svelte.dev/docs#svelte_store). +> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](docs#svelte_store). ```html