From 158ec43d99376ccb70c374e306552151b1dbf63b Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Thu, 6 Oct 2022 22:29:48 +0800 Subject: [PATCH] [fix] do not warn about missing props for bindings (#6583) --- src/compiler/compile/render_dom/index.ts | 21 +++++----- .../samples/capture-inject-state/expected.js | 22 +++++------ test/js/samples/debug-empty/expected.js | 14 +++---- .../debug-foo-bar-baz-things/expected.js | 38 +++++++++---------- test/js/samples/debug-foo/expected.js | 22 +++++------ .../expected.js | 14 +++---- .../Foo.svelte | 8 ++++ .../_config.js | 9 +++++ .../main.svelte | 8 ++++ 9 files changed, 89 insertions(+), 67 deletions(-) create mode 100644 test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte create mode 100644 test/runtime/samples/dev-warning-missing-data-component-bind/_config.js create mode 100644 test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 5fdac9bce4..173d93d5dd 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -121,7 +121,7 @@ export default function dom( const accessors = []; const not_equal = component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`; - let dev_props_check: Node[] | Node; + let missing_props_check: Node[] | Node; let inject_state: Expression; let capture_state: Expression; let props_inject: Node[] | Node; @@ -227,13 +227,13 @@ export default function dom( const expected = props.filter(prop => prop.writable && !prop.initialised); if (expected.length) { - dev_props_check = b` - const { ctx: #ctx } = this.$$; - const props = ${options.customElement ? x`this.attributes` : x`options.props || {}`}; - ${expected.map(prop => b` - if (${renderer.reference(prop.name)} === undefined && !('${prop.export_name}' in props)) { - @_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'"); - }`)} + missing_props_check = b` + $$self.$$.on_mount.push(function () { + ${expected.map(prop => b` + if (${prop.name} === undefined && !(('${prop.export_name}' in $$props) || $$self.$$.bound[$$self.$$.props['${prop.export_name}']])) { + @_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'"); + }`)} + }); `; } @@ -476,6 +476,7 @@ export default function dom( ${instance_javascript} + ${missing_props_check} ${unknown_props_check} ${renderer.binding_groups.size > 0 && b`const $$binding_groups = [${[...renderer.binding_groups.keys()].map(_ => x`[]`)}];`} @@ -533,8 +534,6 @@ export default function dom( @init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty}); - ${dev_props_check} - if (options) { if (options.target) { @insert(options.target, this, options.anchor); @@ -594,8 +593,6 @@ export default function dom( super(${options.dev && 'options'}); @init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${optional_parameters}); ${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`} - - ${dev_props_check} } } `[0] as ClassDeclaration; diff --git a/test/js/samples/capture-inject-state/expected.js b/test/js/samples/capture-inject-state/expected.js index 58e1879553..882b3e9cf6 100644 --- a/test/js/samples/capture-inject-state/expected.js +++ b/test/js/samples/capture-inject-state/expected.js @@ -113,6 +113,17 @@ function instance($$self, $$props, $$invalidate) { let { alias: realName } = $$props; let local; let shadowedByModule; + + $$self.$$.on_mount.push(function () { + if (prop === undefined && !('prop' in $$props || $$self.$$.bound[$$self.$$.props['prop']])) { + console.warn(" was created without expected prop 'prop'"); + } + + if (realName === undefined && !('alias' in $$props || $$self.$$.bound[$$self.$$.props['alias']])) { + console.warn(" was created without expected prop 'alias'"); + } + }); + const writable_props = ['prop', 'alias']; Object.keys($$props).forEach(key => { @@ -166,17 +177,6 @@ class Component extends SvelteComponentDev { options, id: create_fragment.name }); - - const { ctx } = this.$$; - const props = options.props || {}; - - if (/*prop*/ ctx[0] === undefined && !('prop' in props)) { - console.warn(" was created without expected prop 'prop'"); - } - - if (/*realName*/ ctx[1] === undefined && !('alias' in props)) { - console.warn(" was created without expected prop 'alias'"); - } } get prop() { diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index 55303b41b7..ee304591cb 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -72,6 +72,13 @@ function instance($$self, $$props, $$invalidate) { let { $$slots: slots = {}, $$scope } = $$props; validate_slots('Component', slots, []); let { name } = $$props; + + $$self.$$.on_mount.push(function () { + if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) { + console.warn(" was created without expected prop 'name'"); + } + }); + const writable_props = ['name']; Object.keys($$props).forEach(key => { @@ -106,13 +113,6 @@ class Component extends SvelteComponentDev { options, id: create_fragment.name }); - - const { ctx } = this.$$; - const props = options.props || {}; - - if (/*name*/ ctx[0] === undefined && !('name' in props)) { - console.warn(" was created without expected prop 'name'"); - } } get name() { diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js index 3377d35018..02be04c26e 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -176,6 +176,25 @@ function instance($$self, $$props, $$invalidate) { let { foo } = $$props; let { bar } = $$props; let { baz } = $$props; + + $$self.$$.on_mount.push(function () { + if (things === undefined && !('things' in $$props || $$self.$$.bound[$$self.$$.props['things']])) { + console.warn(" was created without expected prop 'things'"); + } + + if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) { + console.warn(" was created without expected prop 'foo'"); + } + + if (bar === undefined && !('bar' in $$props || $$self.$$.bound[$$self.$$.props['bar']])) { + console.warn(" was created without expected prop 'bar'"); + } + + if (baz === undefined && !('baz' in $$props || $$self.$$.bound[$$self.$$.props['baz']])) { + console.warn(" was created without expected prop 'baz'"); + } + }); + const writable_props = ['things', 'foo', 'bar', 'baz']; Object.keys($$props).forEach(key => { @@ -216,25 +235,6 @@ class Component extends SvelteComponentDev { options, id: create_fragment.name }); - - const { ctx } = this.$$; - const props = options.props || {}; - - if (/*things*/ ctx[0] === undefined && !('things' in props)) { - console.warn(" was created without expected prop 'things'"); - } - - if (/*foo*/ ctx[1] === undefined && !('foo' in props)) { - console.warn(" was created without expected prop 'foo'"); - } - - if (/*bar*/ ctx[2] === undefined && !('bar' in props)) { - console.warn(" was created without expected prop 'bar'"); - } - - if (/*baz*/ ctx[3] === undefined && !('baz' in props)) { - console.warn(" was created without expected prop 'baz'"); - } } get things() { diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 518897c237..84dedb0a91 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -168,6 +168,17 @@ function instance($$self, $$props, $$invalidate) { validate_slots('Component', slots, []); let { things } = $$props; let { foo } = $$props; + + $$self.$$.on_mount.push(function () { + if (things === undefined && !('things' in $$props || $$self.$$.bound[$$self.$$.props['things']])) { + console.warn(" was created without expected prop 'things'"); + } + + if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) { + console.warn(" was created without expected prop 'foo'"); + } + }); + const writable_props = ['things', 'foo']; Object.keys($$props).forEach(key => { @@ -204,17 +215,6 @@ class Component extends SvelteComponentDev { options, id: create_fragment.name }); - - const { ctx } = this.$$; - const props = options.props || {}; - - if (/*things*/ ctx[0] === undefined && !('things' in props)) { - console.warn(" was created without expected prop 'things'"); - } - - if (/*foo*/ ctx[1] === undefined && !('foo' in props)) { - console.warn(" was created without expected prop 'foo'"); - } } get things() { diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js index 5e10ec55f8..a94cf7b5f2 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -69,6 +69,13 @@ function instance($$self, $$props, $$invalidate) { validate_slots('Component', slots, []); let { foo } = $$props; let bar; + + $$self.$$.on_mount.push(function () { + if (foo === undefined && !('foo' in $$props || $$self.$$.bound[$$self.$$.props['foo']])) { + console.warn(" was created without expected prop 'foo'"); + } + }); + const writable_props = ['foo']; Object.keys($$props).forEach(key => { @@ -110,13 +117,6 @@ class Component extends SvelteComponentDev { options, id: create_fragment.name }); - - const { ctx } = this.$$; - const props = options.props || {}; - - if (/*foo*/ ctx[0] === undefined && !('foo' in props)) { - console.warn(" was created without expected prop 'foo'"); - } } get foo() { diff --git a/test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte b/test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte new file mode 100644 index 0000000000..60278c4845 --- /dev/null +++ b/test/runtime/samples/dev-warning-missing-data-component-bind/Foo.svelte @@ -0,0 +1,8 @@ + + +
{w} {x} {y}
\ No newline at end of file diff --git a/test/runtime/samples/dev-warning-missing-data-component-bind/_config.js b/test/runtime/samples/dev-warning-missing-data-component-bind/_config.js new file mode 100644 index 0000000000..ececa00a8c --- /dev/null +++ b/test/runtime/samples/dev-warning-missing-data-component-bind/_config.js @@ -0,0 +1,9 @@ +export default { + compileOptions: { + dev: true + }, + + warnings: [ + " was created without expected prop 'y'" + ] +}; diff --git a/test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte b/test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte new file mode 100644 index 0000000000..eab3c8336f --- /dev/null +++ b/test/runtime/samples/dev-warning-missing-data-component-bind/main.svelte @@ -0,0 +1,8 @@ + + + \ No newline at end of file