From e8094df7796791f1855cc7f70aff6422757874cd Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Thu, 11 Feb 2021 11:01:50 +0800 Subject: [PATCH 1/9] fix remove of lone :host selectors (#5984) --- CHANGELOG.md | 4 ++++ src/compiler/compile/css/Selector.ts | 5 ++++- test/css/samples/host/expected.css | 2 +- test/css/samples/host/input.svelte | 4 ++++ 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84552c9d2b..a045c15917 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Fix removal of lone `:host` selectors ([#5982](https://github.com/sveltejs/svelte/issues/5982)) + ## 3.32.2 * Fix unnecessary additional invalidation with `` ([#3075](https://github.com/sveltejs/svelte/issues/3075), [#4447](https://github.com/sveltejs/svelte/issues/4447), [#5555](https://github.com/sveltejs/svelte/issues/5555)) diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index 3c9f453c8d..6d0e7c5003 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -44,7 +44,10 @@ export default class Selector { } this.local_blocks = this.blocks.slice(0, i); - this.used = this.local_blocks.length === 0; + + const host_only = this.blocks.length === 1 && this.blocks[0].host; + + this.used = this.local_blocks.length === 0 || host_only; } apply(node: Element) { diff --git a/test/css/samples/host/expected.css b/test/css/samples/host/expected.css index 28683691c0..d848082f5e 100644 --- a/test/css/samples/host/expected.css +++ b/test/css/samples/host/expected.css @@ -1 +1 @@ -:host h1.svelte-xyz{color:red}:host>h1.svelte-xyz{color:red}:host>.svelte-xyz{color:red}:host span.svelte-xyz{color:red} \ No newline at end of file +:host h1.svelte-xyz{color:red}:host>h1.svelte-xyz{color:red}:host>.svelte-xyz{color:red}:host span.svelte-xyz{color:red}:host{color:red} \ No newline at end of file diff --git a/test/css/samples/host/input.svelte b/test/css/samples/host/input.svelte index 4c1efcd983..85db1617ef 100644 --- a/test/css/samples/host/input.svelte +++ b/test/css/samples/host/input.svelte @@ -18,6 +18,10 @@ :host > span { color: red; } + + :host { + color: red; + }

Hello!

From d3f3ea38d0e5520f9c86b55c65aa0571a03b65e2 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 10 Feb 2021 22:02:27 -0500 Subject: [PATCH 2/9] -> v3.32.3 --- 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 a045c15917..af1a97d1f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Svelte changelog -## Unreleased +## 3.32.3 * Fix removal of lone `:host` selectors ([#5982](https://github.com/sveltejs/svelte/issues/5982)) diff --git a/package-lock.json b/package-lock.json index a0fa9b6980..b4d5b5caff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.32.2", + "version": "3.32.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d18173fa9e..333838e69d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.32.2", + "version": "3.32.3", "description": "Cybernetically enhanced web apps", "module": "index.mjs", "main": "index", From d4f98fb63a4cf77c4b3b4f2b359d5b991390f5c1 Mon Sep 17 00:00:00 2001 From: Pontus Lundin Date: Mon, 15 Feb 2021 23:40:17 +0100 Subject: [PATCH 3/9] Call onMount when connected & clean up when disconnected for custom element (#4522) * call onDestroy when disconnected * lifecycle hooks and custom elements - Call onMount in connectedCallback for customElements - register onMount return values as on_disconnect-callbacks for customElements - run on_disconnect callbacks in disconnectedCallback * do not reset on_mount so that it can fire again if reinserted * simpler isCustomElement & skip extra function call - pass options.customElement down to mount_component - remove expensive isCustomElement check - only call add_render_callback if not customElement Co-authored-by: Pontus Lundin --- src/compiler/compile/render_dom/index.ts | 2 +- src/runtime/internal/Component.ts | 40 ++++++++++++------- test/custom-elements/index.ts | 4 +- .../samples/oncreate/main.svelte | 11 +++-- test/custom-elements/samples/oncreate/test.js | 4 +- .../samples/ondestroy/main.svelte | 22 ++++++++++ .../custom-elements/samples/ondestroy/test.js | 11 +++++ .../css-shadow-dom-keyframes/expected.js | 3 +- 8 files changed, 74 insertions(+), 23 deletions(-) create mode 100644 test/custom-elements/samples/ondestroy/main.svelte create mode 100644 test/custom-elements/samples/ondestroy/test.js diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 8e7deb7a78..a56f3fb2b3 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -485,7 +485,7 @@ export default function dom( ${css.code && b`this.shadowRoot.innerHTML = \`\`;`} - @init(this, { target: this.shadowRoot, props: ${init_props} }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${dirty}); + @init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${dirty}); ${dev_props_check} diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 6d211dfedd..5a2a966d0b 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -34,6 +34,7 @@ interface T$$ { on_mount: any[]; on_destroy: any[]; skip_bound: boolean; + on_disconnect: any[]; } export function bind(component, name, callback) { @@ -52,23 +53,26 @@ export function claim_component(block, parent_nodes) { block && block.l(parent_nodes); } -export function mount_component(component, target, anchor) { +export function mount_component(component, target, anchor, customElement) { const { fragment, on_mount, on_destroy, after_update } = component.$$; fragment && fragment.m(target, anchor); - // onMount happens before the initial afterUpdate - add_render_callback(() => { - const new_on_destroy = on_mount.map(run).filter(is_function); - if (on_destroy) { - on_destroy.push(...new_on_destroy); - } else { - // Edge case - component was destroyed immediately, - // most likely as a result of a binding initialising - run_all(new_on_destroy); - } - component.$$.on_mount = []; - }); + if (!customElement) { + // onMount happens before the initial afterUpdate + add_render_callback(() => { + + const new_on_destroy = on_mount.map(run).filter(is_function); + if (on_destroy) { + on_destroy.push(...new_on_destroy); + } else { + // Edge case - component was destroyed immediately, + // most likely as a result of a binding initialising + run_all(new_on_destroy); + } + component.$$.on_mount = []; + }); + } after_update.forEach(add_render_callback); } @@ -113,6 +117,7 @@ export function init(component, options, instance, create_fragment, not_equal, p // lifecycle on_mount: [], on_destroy: [], + on_disconnect: [], before_update: [], after_update: [], context: new Map(parent_component ? parent_component.$$.context : []), @@ -155,7 +160,7 @@ export function init(component, options, instance, create_fragment, not_equal, p } if (options.intro) transition_in(component.$$.fragment); - mount_component(component, options.target, options.anchor); + mount_component(component, options.target, options.anchor, options.customElement); flush(); } @@ -173,6 +178,9 @@ if (typeof HTMLElement === 'function') { } connectedCallback() { + const { on_mount } = this.$$; + this.$$.on_disconnect = on_mount.map(run).filter(is_function); + // @ts-ignore todo: improve typings for (const key in this.$$.slotted) { // @ts-ignore todo: improve typings @@ -184,6 +192,10 @@ if (typeof HTMLElement === 'function') { this[attr] = newValue; } + disconnectedCallback() { + run_all(this.$$.on_disconnect); + } + $destroy() { destroy_component(this, 1); this.$destroy = noop; diff --git a/test/custom-elements/index.ts b/test/custom-elements/index.ts index d3644a3142..35df156879 100644 --- a/test/custom-elements/index.ts +++ b/test/custom-elements/index.ts @@ -110,8 +110,8 @@ describe('custom-elements', function() { const page = await browser.newPage(); - page.on('console', (type, ...args) => { - console[type](...args); + page.on('console', (type) => { + console[type._type](type._text); }); page.on('error', error => { diff --git a/test/custom-elements/samples/oncreate/main.svelte b/test/custom-elements/samples/oncreate/main.svelte index ed3980a28e..23819e660f 100644 --- a/test/custom-elements/samples/oncreate/main.svelte +++ b/test/custom-elements/samples/oncreate/main.svelte @@ -3,9 +3,12 @@ diff --git a/test/custom-elements/samples/oncreate/test.js b/test/custom-elements/samples/oncreate/test.js index c33f8a6a10..f451979976 100644 --- a/test/custom-elements/samples/oncreate/test.js +++ b/test/custom-elements/samples/oncreate/test.js @@ -2,7 +2,9 @@ import * as assert from 'assert'; import './main.svelte'; export default function (target) { - target.innerHTML = ''; + target.innerHTML = ''; const el = target.querySelector('my-app'); + assert.ok(el.wasCreated); + assert.ok(el.propsInitialized); } diff --git a/test/custom-elements/samples/ondestroy/main.svelte b/test/custom-elements/samples/ondestroy/main.svelte new file mode 100644 index 0000000000..aa945ca602 --- /dev/null +++ b/test/custom-elements/samples/ondestroy/main.svelte @@ -0,0 +1,22 @@ + + + + +
diff --git a/test/custom-elements/samples/ondestroy/test.js b/test/custom-elements/samples/ondestroy/test.js new file mode 100644 index 0000000000..61375bfa96 --- /dev/null +++ b/test/custom-elements/samples/ondestroy/test.js @@ -0,0 +1,11 @@ +import * as assert from 'assert'; +import './main.svelte'; + +export default function (target) { + target.innerHTML = ''; + const el = target.querySelector('my-app'); + target.removeChild(el); + + assert.ok(target.dataset.onMountDestroyed); + assert.equal(target.dataset.destroyed, undefined); +} diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index 82a39e5924..4d188201eb 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -40,7 +40,8 @@ class Component extends SvelteElement { this, { target: this.shadowRoot, - props: attribute_to_object(this.attributes) + props: attribute_to_object(this.attributes), + customElement: true }, null, create_fragment, From 48b56bd8191dfce6f1d5042132e8ff5905a04585 Mon Sep 17 00:00:00 2001 From: Antony Jones Date: Mon, 15 Feb 2021 22:46:14 +0000 Subject: [PATCH 4/9] Update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index af1a97d1f9..e7e9c82185 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Custom Elements - Call onMount when connected & clean-up when disconnected ([#4522](https://github.com/sveltejs/svelte/pull/4522)) + ## 3.32.3 * Fix removal of lone `:host` selectors ([#5982](https://github.com/sveltejs/svelte/issues/5982)) From 6928f9492cba4799d76f4b16626081d27223bf25 Mon Sep 17 00:00:00 2001 From: Antony Jones Date: Mon, 15 Feb 2021 22:47:20 +0000 Subject: [PATCH 5/9] Emphasis on method name --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7e9c82185..5f9e04e32a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## Unreleased -* Custom Elements - Call onMount when connected & clean-up when disconnected ([#4522](https://github.com/sveltejs/svelte/pull/4522)) +* Custom Elements - Call `onMount` when connected & clean-up when disconnected ([#4522](https://github.com/sveltejs/svelte/pull/4522)) ## 3.32.3 From 5e293f9b0f7958401bd56b24591b24e7eef233f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mi=C5=82osz=20Wi=C5=9Bniewski?= Date: Wed, 17 Feb 2021 21:57:35 +0100 Subject: [PATCH 6/9] chore: remove unnecessary indent_size from editorconfig (#5992) --- .editorconfig | 1 - 1 file changed, 1 deletion(-) diff --git a/.editorconfig b/.editorconfig index ed2a319d58..90846de5ee 100644 --- a/.editorconfig +++ b/.editorconfig @@ -13,4 +13,3 @@ insert_final_newline = false [{package.json,.travis.yml,.eslintrc.json}] indent_style = space -indent_size = 2 From 9a9b934a08f92a2dad615201a93171f0de394817 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 17 Feb 2021 16:07:26 -0500 Subject: [PATCH 7/9] work around publishing issue with npm v7 (#5983) --- check_publish_env.js | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 check_publish_env.js diff --git a/check_publish_env.js b/check_publish_env.js new file mode 100644 index 0000000000..ce6f066cff --- /dev/null +++ b/check_publish_env.js @@ -0,0 +1,4 @@ +if (!process.env.PUBLISH) { + console.error('npm publish must be run with the PUBLISH environment variable set'); + process.exit(1); +} diff --git a/package.json b/package.json index 333838e69d..5b04c3e82e 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "dev": "rollup -cw", "pretest": "npm run build", "posttest": "agadoo internal/index.mjs", - "prepublishOnly": "npm run lint && PUBLISH=true npm test", + "prepublishOnly": "node check_publish_env.js && npm run lint && npm test", "tsd": "tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly", "lint": "eslint \"{src,test}/**/*.{ts,js}\"" }, From 8ea4fb1106bae932c184cf49f49c2e9c509de02e Mon Sep 17 00:00:00 2001 From: Conduitry Date: Thu, 25 Feb 2021 06:23:08 -0500 Subject: [PATCH 8/9] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f9e04e32a..c44ce287c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## Unreleased -* Custom Elements - Call `onMount` when connected & clean-up when disconnected ([#4522](https://github.com/sveltejs/svelte/pull/4522)) +* In custom elements, call `onMount` functions when connecting and clean up when disconnecting ([#1152](https://github.com/sveltejs/svelte/issues/1152), [#2227](https://github.com/sveltejs/svelte/issues/2227), [#4522](https://github.com/sveltejs/svelte/pull/4522)) ## 3.32.3 From b764374b6299d079db13418bbbddc58707bef59c Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Thu, 25 Feb 2021 23:53:23 +0800 Subject: [PATCH 9/9] no warning on contextual-store if declaring it as a parameter / variable (#6008) --- CHANGELOG.md | 1 + src/compiler/compile/Component.ts | 16 ++++++------ .../store-shadow-scope-declaration/_config.js | 1 + .../main.svelte | 25 +++++++++++++++++++ 4 files changed, 36 insertions(+), 7 deletions(-) create mode 100644 test/runtime/samples/store-shadow-scope-declaration/_config.js create mode 100644 test/runtime/samples/store-shadow-scope-declaration/main.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index c44ce287c0..bd57c193de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * In custom elements, call `onMount` functions when connecting and clean up when disconnecting ([#1152](https://github.com/sveltejs/svelte/issues/1152), [#2227](https://github.com/sveltejs/svelte/issues/2227), [#4522](https://github.com/sveltejs/svelte/pull/4522)) +* Do not emit `contextual-store` warnings for function parameters or declared variables ([#6008](https://github.com/sveltejs/svelte/pull/6008)) ## 3.32.3 diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 8aab2b4898..64e658c049 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -751,7 +751,7 @@ export default class Component { return this.skip(); } - component.warn_on_undefined_store_value_references(node, parent, scope); + component.warn_on_undefined_store_value_references(node, parent, prop, scope); }, leave(node: Node) { @@ -843,7 +843,7 @@ export default class Component { }); } - warn_on_undefined_store_value_references(node, parent, scope: Scope) { + warn_on_undefined_store_value_references(node: Node, parent: Node, prop: string, scope: Scope) { if ( node.type === 'LabeledStatement' && node.label.name === '$' && @@ -855,7 +855,7 @@ export default class Component { }); } - if (is_reference(node as Node, parent as Node)) { + if (is_reference(node, parent)) { const object = get_object(node); const { name } = object; @@ -865,10 +865,12 @@ export default class Component { } if (name[1] !== '$' && scope.has(name.slice(1)) && scope.find_owner(name.slice(1)) !== this.instance_scope) { - this.error(node, { - code: 'contextual-store', - message: 'Stores must be declared at the top level of the component (this may change in a future version of Svelte)' - }); + if (!((/Function/.test(parent.type) && prop === 'params') || (parent.type === 'VariableDeclarator' && prop === 'id'))) { + this.error(node as any, { + code: 'contextual-store', + message: 'Stores must be declared at the top level of the component (this may change in a future version of Svelte)' + }); + } } } } diff --git a/test/runtime/samples/store-shadow-scope-declaration/_config.js b/test/runtime/samples/store-shadow-scope-declaration/_config.js new file mode 100644 index 0000000000..ff8b4c5632 --- /dev/null +++ b/test/runtime/samples/store-shadow-scope-declaration/_config.js @@ -0,0 +1 @@ +export default {}; diff --git a/test/runtime/samples/store-shadow-scope-declaration/main.svelte b/test/runtime/samples/store-shadow-scope-declaration/main.svelte new file mode 100644 index 0000000000..fa76d33df8 --- /dev/null +++ b/test/runtime/samples/store-shadow-scope-declaration/main.svelte @@ -0,0 +1,25 @@ + + +
{ + derived(store, $store => {}); + }} + on:test2={(store) => { + let $store; + }} +/>