From b6aaa44880892a64712f629bff40f1433d92dfdb Mon Sep 17 00:00:00 2001 From: pushkin Date: Sat, 29 Feb 2020 18:43:53 +0100 Subject: [PATCH] check for unknown props even if component doesn't have writable props (#4454) --- src/compiler/compile/render_dom/index.ts | 6 +++++- test/js/samples/debug-hoisted/expected.js | 6 ++++++ test/js/samples/debug-no-dependencies/expected.js | 12 +++++++++++- test/js/samples/loop-protect/expected.js | 8 ++++++++ .../samples/dev-warning-unknown-props-2/Foo.svelte | 1 + .../samples/dev-warning-unknown-props-2/_config.js | 9 +++++++++ .../samples/dev-warning-unknown-props-2/main.svelte | 5 +++++ 7 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 test/runtime/samples/dev-warning-unknown-props-2/Foo.svelte create mode 100644 test/runtime/samples/dev-warning-unknown-props-2/_config.js create mode 100644 test/runtime/samples/dev-warning-unknown-props-2/main.svelte diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 71e8681646..3d1870ccaa 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -259,6 +259,9 @@ export default function dom( inject_state; if (has_invalidate) { args.push(x`$$props`, x`$$invalidate`); + } else if (component.compile_options.dev) { + // $$props arg is still needed for unknown prop check + args.push(x`$$props`); } const has_create_fragment = block.has_content(); @@ -300,6 +303,7 @@ export default function dom( const initial_context = renderer.context.slice(0, i + 1); const has_definition = ( + component.compile_options.dev || (instance_javascript && instance_javascript.length > 0) || filtered_props.length > 0 || uses_props || @@ -379,7 +383,7 @@ export default function dom( }); let unknown_props_check; - if (component.compile_options.dev && !component.var_lookup.has('$$props') && writable_props.length) { + if (component.compile_options.dev && !component.var_lookup.has('$$props')) { unknown_props_check = b` const writable_props = [${writable_props.map(prop => x`'${prop.export_name}'`)}]; @_Object.keys($$props).forEach(key => { diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js index c77168ef4f..190ff12c50 100644 --- a/test/js/samples/debug-hoisted/expected.js +++ b/test/js/samples/debug-hoisted/expected.js @@ -50,6 +50,12 @@ function create_fragment(ctx) { function instance($$self, $$props, $$invalidate) { let obj = { x: 5 }; let kobzol = 5; + const writable_props = []; + + Object.keys($$props).forEach(key => { + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + }); + $$self.$capture_state = () => ({ obj, kobzol }); $$self.$inject_state = $$props => { diff --git a/test/js/samples/debug-no-dependencies/expected.js b/test/js/samples/debug-no-dependencies/expected.js index 9985c814a2..a097869e74 100644 --- a/test/js/samples/debug-no-dependencies/expected.js +++ b/test/js/samples/debug-no-dependencies/expected.js @@ -134,10 +134,20 @@ function create_fragment(ctx) { return block; } +function instance($$self, $$props) { + const writable_props = []; + + Object.keys($$props).forEach(key => { + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(` was created with unknown prop '${key}'`); + }); + + return []; +} + class Component extends SvelteComponentDev { constructor(options) { super(options); - init(this, options, null, create_fragment, safe_not_equal, {}); + init(this, options, instance, create_fragment, safe_not_equal, {}); dispatch_dev("SvelteRegisterComponent", { component: this, diff --git a/test/js/samples/loop-protect/expected.js b/test/js/samples/loop-protect/expected.js index 4eccaae7cb..f433bd61a9 100644 --- a/test/js/samples/loop-protect/expected.js +++ b/test/js/samples/loop-protect/expected.js @@ -6,6 +6,7 @@ import { detach_dev, dispatch_dev, element, + globals, init, insert_dev, loop_guard, @@ -13,6 +14,7 @@ import { safe_not_equal } from "svelte/internal"; +const { console: console_1 } = globals; const file = undefined; function create_fragment(ctx) { @@ -102,6 +104,12 @@ function instance($$self, $$props, $$invalidate) { } while (true); } + const writable_props = []; + + Object.keys($$props).forEach(key => { + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console_1.warn(` was created with unknown prop '${key}'`); + }); + function div_binding($$value) { binding_callbacks[$$value ? "unshift" : "push"](() => { $$invalidate(0, node = $$value); diff --git a/test/runtime/samples/dev-warning-unknown-props-2/Foo.svelte b/test/runtime/samples/dev-warning-unknown-props-2/Foo.svelte new file mode 100644 index 0000000000..bc56c4d894 --- /dev/null +++ b/test/runtime/samples/dev-warning-unknown-props-2/Foo.svelte @@ -0,0 +1 @@ +Foo diff --git a/test/runtime/samples/dev-warning-unknown-props-2/_config.js b/test/runtime/samples/dev-warning-unknown-props-2/_config.js new file mode 100644 index 0000000000..9bff4a2a74 --- /dev/null +++ b/test/runtime/samples/dev-warning-unknown-props-2/_config.js @@ -0,0 +1,9 @@ +export default { + compileOptions: { + dev: true + }, + + warnings: [ + ` was created with unknown prop 'fo'` + ] +}; diff --git a/test/runtime/samples/dev-warning-unknown-props-2/main.svelte b/test/runtime/samples/dev-warning-unknown-props-2/main.svelte new file mode 100644 index 0000000000..1566cf3e41 --- /dev/null +++ b/test/runtime/samples/dev-warning-unknown-props-2/main.svelte @@ -0,0 +1,5 @@ + + +