diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index b48df5396a..fc35e4f317 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -275,7 +275,7 @@ export default function dom( const definition = has_definition ? component.alias('instance') - : '@identity'; + : 'null'; const all_reactive_dependencies = new Set(); component.reactive_declarations.forEach(d => { diff --git a/src/internal/Component.js b/src/internal/Component.js index 4eac8d57af..894f80461b 100644 --- a/src/internal/Component.js +++ b/src/internal/Component.js @@ -59,7 +59,7 @@ export function init(component, options, instance, create_fragment, not_equal) { const $$ = component.$$ = { fragment: null, - ctx: null, + ctx: options.props || {}, // state set: noop, @@ -82,19 +82,21 @@ export function init(component, options, instance, create_fragment, not_equal) { let ready = false; - $$.ctx = instance(component, options.props || {}, (key, value) => { - if ($$.bound[key]) $$.bound[key](value); + if (instance) { + $$.ctx = instance(component, $$.ctx, (key, value) => { + if ($$.bound[key]) $$.bound[key](value); - if ($$.ctx) { - const changed = not_equal(value, $$.ctx[key]); - if (ready && changed) { - make_dirty(component, key); - } + if ($$.ctx) { + const changed = not_equal(value, $$.ctx[key]); + if (ready && changed) { + make_dirty(component, key); + } - $$.ctx[key] = value; - return changed; - } - }); + $$.ctx[key] = value; + return changed; + } + }); + } $$.update(); ready = true; diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js index a8fbf62344..23f4bbe90d 100644 --- a/test/js/samples/action/expected.js +++ b/test/js/samples/action/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { var a, link_action; @@ -48,7 +48,7 @@ function link(node) { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index b771f17a75..72944cdaa6 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; function add_css() { var style = createElement("style"); @@ -37,7 +37,7 @@ class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); if (!document.getElementById("svelte-1slhpfn-style")) add_css(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index d55e3928ca..9582707de3 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteElement, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteElement, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { var div; @@ -33,7 +33,7 @@ class SvelteComponent extends SvelteElement { this.shadowRoot.innerHTML = ``; - init(this, { target: this.shadowRoot }, identity, create_fragment, safe_not_equal); + init(this, { target: this.shadowRoot }, null, create_fragment, safe_not_equal); if (options) { if (options.target) { diff --git a/test/js/samples/dynamic-import/expected.js b/test/js/samples/dynamic-import/expected.js index 1c6e0b873d..7b4a2fc004 100644 --- a/test/js/samples/dynamic-import/expected.js +++ b/test/js/samples/dynamic-import/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, identity, init, mount_component, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, init, mount_component, noop, safe_not_equal } from "svelte/internal"; import LazyLoad from "./LazyLoad.html"; function create_fragment($$, ctx) { @@ -43,7 +43,7 @@ function func() { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/event-handler-no-passive/expected.js b/test/js/samples/event-handler-no-passive/expected.js index 6a1277988f..83b981cc40 100644 --- a/test/js/samples/event-handler-no-passive/expected.js +++ b/test/js/samples/event-handler-no-passive/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, createElement, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { var a, dispose; @@ -37,7 +37,7 @@ function touchstart_handler(e) { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/event-modifiers/expected.js b/test/js/samples/event-modifiers/expected.js index ac0f1b3d79..4af2123bf8 100644 --- a/test/js/samples/event-modifiers/expected.js +++ b/test/js/samples/event-modifiers/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, identity, init, insert, noop, preventDefault, run_all, safe_not_equal, stopPropagation } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, addListener, append, createElement, createText, detachNode, init, insert, noop, preventDefault, run_all, safe_not_equal, stopPropagation } from "svelte/internal"; function create_fragment($$, ctx) { var div, button0, text1, button1, text3, button2, dispose; @@ -57,7 +57,7 @@ function handleClick() { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js index f074e69745..2a356d5939 100644 --- a/test/js/samples/head-no-whitespace/expected.js +++ b/test/js/samples/head-no-whitespace/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, identity, init, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, detachNode, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { var meta0, meta1; @@ -33,7 +33,7 @@ function create_fragment($$, ctx) { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/hoisted-const/expected.js b/test/js/samples/hoisted-const/expected.js index cdca1aaeba..1720d67cd9 100644 --- a/test/js/samples/hoisted-const/expected.js +++ b/test/js/samples/hoisted-const/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { var b, text_value = get_answer(), text; @@ -34,7 +34,7 @@ function get_answer() { return ANSWER; } class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/hoisted-let/expected.js b/test/js/samples/hoisted-let/expected.js index 86eb41f5d5..f206ffb3ba 100644 --- a/test/js/samples/hoisted-let/expected.js +++ b/test/js/samples/hoisted-let/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { var b, text_value = get_answer(), text; @@ -34,7 +34,7 @@ function get_answer() { return ANSWER; } class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js index 49d3d24f2a..3eefd6cedb 100644 --- a/test/js/samples/legacy-input-type/expected.js +++ b/test/js/samples/legacy-input-type/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createElement, detachNode, identity, init, insert, noop, safe_not_equal, setInputType } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createElement, detachNode, init, insert, noop, safe_not_equal, setInputType } from "svelte/internal"; function create_fragment($$, ctx) { var input; @@ -29,7 +29,7 @@ function create_fragment($$, ctx) { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index e80b8d0ab1..0b91f40560 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, createText, detachNode, identity, init, insert, mount_component, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, createText, detachNode, init, insert, mount_component, noop, safe_not_equal } from "svelte/internal"; import Imported from "Imported.html"; function create_fragment($$, ctx) { @@ -54,7 +54,7 @@ function create_fragment($$, ctx) { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/non-mutable-reference/expected.js b/test/js/samples/non-mutable-reference/expected.js index b7f6dc60a9..747f0e1641 100644 --- a/test/js/samples/non-mutable-reference/expected.js +++ b/test/js/samples/non-mutable-reference/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createElement, createText, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { var h1, text0, text1, text2; @@ -36,7 +36,7 @@ let name = 'world'; class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/js/samples/setup-method/expected.js b/test/js/samples/setup-method/expected.js index 124e632ddc..07a2dc46db 100644 --- a/test/js/samples/setup-method/expected.js +++ b/test/js/samples/setup-method/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, identity, init, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { return { @@ -21,7 +21,7 @@ function foo(bar) { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } get foo() { diff --git a/test/js/samples/svg-title/expected.js b/test/js/samples/svg-title/expected.js index 3ce818c950..1db3124e9c 100644 --- a/test/js/samples/svg-title/expected.js +++ b/test/js/samples/svg-title/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createSvgElement, createText, detachNode, identity, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createSvgElement, createText, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment($$, ctx) { var svg, title, text; @@ -32,7 +32,7 @@ function create_fragment($$, ctx) { class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, identity, create_fragment, safe_not_equal); + init(this, options, null, create_fragment, safe_not_equal); } } diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.html b/test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.html new file mode 100644 index 0000000000..d5ce18c8c8 --- /dev/null +++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.html @@ -0,0 +1,5 @@ + + +
Bar: {x}
\ No newline at end of file diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.html b/test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.html new file mode 100644 index 0000000000..9c7ae240b7 --- /dev/null +++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.html @@ -0,0 +1,5 @@ + + +Foo: {x}
\ No newline at end of file diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js b/test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js new file mode 100644 index 0000000000..bf6312f5ad --- /dev/null +++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js @@ -0,0 +1,31 @@ +export default { + html: ` +Foo: yes
+x in parent: yes
+ `, + + async test({ assert, component, target, window }) { + component.a = false; + + assert.htmlEqual(target.innerHTML, ` +Bar: yes
+x in parent: yes
+ `); + + component.a = true; + assert.equal(component.x, 'yes'); + component.x = undefined; + + assert.htmlEqual(target.innerHTML, ` +Foo: undefined
+x in parent: undefined
+ `); + + component.a = false; + + assert.htmlEqual(target.innerHTML, ` +Bar: no
+x in parent: no
+ `); + } +}; diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-b/main.html b/test/runtime/samples/component-binding-parent-supercedes-child-b/main.html new file mode 100644 index 0000000000..aaad9eb2fe --- /dev/null +++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/main.html @@ -0,0 +1,15 @@ + + +{#if a} +x in parent: {x}
\ No newline at end of file diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.html b/test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.html new file mode 100644 index 0000000000..d5ce18c8c8 --- /dev/null +++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.html @@ -0,0 +1,5 @@ + + +Bar: {x}
\ No newline at end of file diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.html b/test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.html new file mode 100644 index 0000000000..9c7ae240b7 --- /dev/null +++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.html @@ -0,0 +1,5 @@ + + +Foo: {x}
\ No newline at end of file diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js b/test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js new file mode 100644 index 0000000000..bf6312f5ad --- /dev/null +++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js @@ -0,0 +1,31 @@ +export default { + html: ` +Foo: yes
+x in parent: yes
+ `, + + async test({ assert, component, target, window }) { + component.a = false; + + assert.htmlEqual(target.innerHTML, ` +Bar: yes
+x in parent: yes
+ `); + + component.a = true; + assert.equal(component.x, 'yes'); + component.x = undefined; + + assert.htmlEqual(target.innerHTML, ` +Foo: undefined
+x in parent: undefined
+ `); + + component.a = false; + + assert.htmlEqual(target.innerHTML, ` +Bar: no
+x in parent: no
+ `); + } +}; diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-c/main.html b/test/runtime/samples/component-binding-parent-supercedes-child-c/main.html new file mode 100644 index 0000000000..ffc5bd188d --- /dev/null +++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/main.html @@ -0,0 +1,11 @@ + + +x in parent: {x}
\ No newline at end of file diff --git a/test/runtime/samples/component-binding-private-state/Bar.html b/test/runtime/samples/component-binding-private-state/Bar.html new file mode 100644 index 0000000000..3b5619a62d --- /dev/null +++ b/test/runtime/samples/component-binding-private-state/Bar.html @@ -0,0 +1,5 @@ + + +Bar: {x}
\ No newline at end of file diff --git a/test/runtime/samples/component-binding-private-state/Foo.html b/test/runtime/samples/component-binding-private-state/Foo.html new file mode 100644 index 0000000000..1d899739d5 --- /dev/null +++ b/test/runtime/samples/component-binding-private-state/Foo.html @@ -0,0 +1,5 @@ + + +Foo: {x}
\ No newline at end of file diff --git a/test/runtime/samples/component-binding-private-state/_config.js b/test/runtime/samples/component-binding-private-state/_config.js new file mode 100644 index 0000000000..bd8a25d490 --- /dev/null +++ b/test/runtime/samples/component-binding-private-state/_config.js @@ -0,0 +1,31 @@ +export default { + html: ` +Foo: yes
+x in parent: undefined
+ `, + + async test({ assert, component, target, window }) { + component.a = false; + + assert.htmlEqual(target.innerHTML, ` +Bar: no
+x in parent: undefined
+ `); + + component.a = true; + assert.equal(component.x, undefined); + component.x = 'maybe'; + + assert.htmlEqual(target.innerHTML, ` +Foo: yes
+x in parent: maybe
+ `); + + component.a = false; + + assert.htmlEqual(target.innerHTML, ` +Bar: no
+x in parent: maybe
+ `); + } +}; diff --git a/test/runtime/samples/component-binding-private-state/main.html b/test/runtime/samples/component-binding-private-state/main.html new file mode 100644 index 0000000000..ffc5bd188d --- /dev/null +++ b/test/runtime/samples/component-binding-private-state/main.html @@ -0,0 +1,11 @@ + + +x in parent: {x}
\ No newline at end of file