From 05fb05bfae2d4cc78ae8ed09241a297eb10885cf Mon Sep 17 00:00:00 2001 From: Colin Casey Date: Tue, 21 May 2019 23:57:44 -0300 Subject: [PATCH 1/9] check for unknown props when creating component --- src/compile/render-dom/index.ts | 13 ++++++++++++- test/js/samples/debug-empty/expected.js | 7 ++++++- .../js/samples/debug-foo-bar-baz-things/expected.js | 7 ++++++- test/js/samples/debug-foo/expected.js | 7 ++++++- .../dev-warning-missing-data-computed/expected.js | 7 ++++++- .../samples/dev-warning-unknown-props/Foo.svelte | 5 +++++ .../samples/dev-warning-unknown-props/_config.js | 9 +++++++++ .../samples/dev-warning-unknown-props/main.svelte | 5 +++++ 8 files changed, 55 insertions(+), 5 deletions(-) create mode 100644 test/runtime/samples/dev-warning-unknown-props/Foo.svelte create mode 100644 test/runtime/samples/dev-warning-unknown-props/_config.js create mode 100644 test/runtime/samples/dev-warning-unknown-props/main.svelte diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index 0fd0d4b172..e7f063d086 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -134,7 +134,6 @@ export default function dom( }); if (component.compile_options.dev) { - // TODO check no uunexpected props were passed, as well as // checking that expected ones were passed const expected = props.filter(prop => !prop.initialised); @@ -395,6 +394,16 @@ export default function dom( return $name; }); + let unknownPropsCheck; + if (component.compile_options.dev && writable_props.length) { + unknownPropsCheck = deindent` + const writableProps = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}]; + Object.keys($$props).forEach(key => { + if (!writableProps.includes(key)) console.warn(\`<${component.tag}> was created with unknown attribute '\${key}'\`); + }); + `; + } + builder.add_block(deindent` function ${definition}(${args.join(', ')}) { ${reactive_store_declarations.length > 0 && `let ${reactive_store_declarations.join(', ')};`} @@ -404,6 +413,8 @@ export default function dom( ${resubscribable_reactive_store_unsubscribers} ${component.javascript} + + ${unknownPropsCheck} ${component.slots.size && `let { $$slots = {}, $$scope } = $$props;`} diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index 98c2837ab7..9b6ef447b4 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -65,6 +65,11 @@ function create_fragment(ctx) { function instance($$self, $$props, $$invalidate) { let { name } = $$props; + const writableProps = ['name']; + Object.keys($$props).forEach(key => { + if (!writableProps.includes(key)) console.warn(` was created with unknown attribute '${key}'`); + }); + $$self.$set = $$props => { if ('name' in $$props) $$invalidate('name', name = $$props.name); }; @@ -93,4 +98,4 @@ class Component extends SvelteComponentDev { } } -export default Component; \ No newline at end of file +export default Component; 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 c1391475b2..006b25aba5 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -151,6 +151,11 @@ function create_fragment(ctx) { function instance($$self, $$props, $$invalidate) { let { things, foo, bar, baz } = $$props; + const writableProps = ['things', 'foo', 'bar', 'baz']; + Object.keys($$props).forEach(key => { + if (!writableProps.includes(key)) console.warn(` was created with unknown attribute '${key}'`); + }); + $$self.$set = $$props => { if ('things' in $$props) $$invalidate('things', things = $$props.things); if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo); @@ -215,4 +220,4 @@ class Component extends SvelteComponentDev { } } -export default Component; \ No newline at end of file +export default Component; diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index f5daa7dad7..7bc58434a8 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -151,6 +151,11 @@ function create_fragment(ctx) { function instance($$self, $$props, $$invalidate) { let { things, foo } = $$props; + const writableProps = ['things', 'foo']; + Object.keys($$props).forEach(key => { + if (!writableProps.includes(key)) console.warn(` was created with unknown attribute '${key}'`); + }); + $$self.$set = $$props => { if ('things' in $$props) $$invalidate('things', things = $$props.things); if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo); @@ -191,4 +196,4 @@ class Component extends SvelteComponentDev { } } -export default Component; \ No newline at end of file +export default Component; 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 12e8a983d0..e181486512 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -65,6 +65,11 @@ function instance($$self, $$props, $$invalidate) { let bar; + const writableProps = ['foo']; + Object.keys($$props).forEach(key => { + if (!writableProps.includes(key)) console.warn(` was created with unknown attribute '${key}'`); + }); + $$self.$set = $$props => { if ('foo' in $$props) $$invalidate('foo', foo = $$props.foo); }; @@ -97,4 +102,4 @@ class Component extends SvelteComponentDev { } } -export default Component; \ No newline at end of file +export default Component; diff --git a/test/runtime/samples/dev-warning-unknown-props/Foo.svelte b/test/runtime/samples/dev-warning-unknown-props/Foo.svelte new file mode 100644 index 0000000000..cebe5fd571 --- /dev/null +++ b/test/runtime/samples/dev-warning-unknown-props/Foo.svelte @@ -0,0 +1,5 @@ + + +
{foo}
diff --git a/test/runtime/samples/dev-warning-unknown-props/_config.js b/test/runtime/samples/dev-warning-unknown-props/_config.js new file mode 100644 index 0000000000..31b605e214 --- /dev/null +++ b/test/runtime/samples/dev-warning-unknown-props/_config.js @@ -0,0 +1,9 @@ +export default { + compileOptions: { + dev: true + }, + + warnings: [ + ` was created with unknown attribute 'fo'` + ] +}; diff --git a/test/runtime/samples/dev-warning-unknown-props/main.svelte b/test/runtime/samples/dev-warning-unknown-props/main.svelte new file mode 100644 index 0000000000..1566cf3e41 --- /dev/null +++ b/test/runtime/samples/dev-warning-unknown-props/main.svelte @@ -0,0 +1,5 @@ + + + From a6c05ed3728c7b3b2e08fdb83fa58ab46a58ad5f Mon Sep 17 00:00:00 2001 From: Conduitry Date: Wed, 22 May 2019 12:00:22 -0400 Subject: [PATCH 2/9] site: add /faq redirect to GitHub wiki FAQ --- site/src/routes/faq.js | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 site/src/routes/faq.js diff --git a/site/src/routes/faq.js b/site/src/routes/faq.js new file mode 100644 index 0000000000..6263494a4c --- /dev/null +++ b/site/src/routes/faq.js @@ -0,0 +1,4 @@ +export function get(req, res) { + res.writeHead(302, { Location: 'https://github.com/sveltejs/svelte/wiki/FAQ' }); + res.end(); +} \ No newline at end of file From dabc9c3e5310316d82bfd8ef16f13e9a4fed3e66 Mon Sep 17 00:00:00 2001 From: Benjamin Milde Date: Fri, 24 May 2019 17:13:58 +0200 Subject: [PATCH 3/9] Allow binding of
open --- src/compile/nodes/Element.ts | 10 ++- .../render-dom/wrappers/Element/index.ts | 6 ++ test/js/samples/bind-open/expected.js | 69 +++++++++++++++++++ test/js/samples/bind-open/input.svelte | 7 ++ .../samples/binding-details-open/_config.js | 25 +++++++ .../samples/binding-details-open/main.svelte | 9 +++ 6 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 test/js/samples/bind-open/expected.js create mode 100644 test/js/samples/bind-open/input.svelte create mode 100644 test/runtime/samples/binding-details-open/_config.js create mode 100644 test/runtime/samples/binding-details-open/main.svelte diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts index ac2b81b3e7..2b76d68e6d 100644 --- a/src/compile/nodes/Element.ts +++ b/src/compile/nodes/Element.ts @@ -544,7 +544,7 @@ export default class Element extends Node { message: `'group' binding can only be used with or ` }); } - } else if (name == 'files') { + } else if (name === 'files') { if (this.name !== 'input') { component.error(binding, { code: `invalid-binding`, @@ -560,6 +560,14 @@ export default class Element extends Node { message: `'files' binding can only be used with ` }); } + + } else if (name === 'open') { + if (this.name !== 'details') { + component.error(binding, { + code: `invalid-binding`, + message: `'${name}' binding can only be used with
` + }); + } } else if ( name === 'currentTime' || name === 'duration' || diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index 22ea7a78cd..ad85a46db3 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -91,6 +91,12 @@ const events = [ name === 'playbackRate' }, + // details event + { + event_names: ['toggle'], + filter: (node: Element, name: string) => + node.name === 'details' + }, ]; export default class ElementWrapper extends Wrapper { diff --git a/test/js/samples/bind-open/expected.js b/test/js/samples/bind-open/expected.js new file mode 100644 index 0000000000..7c73c8ddac --- /dev/null +++ b/test/js/samples/bind-open/expected.js @@ -0,0 +1,69 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + detach, + element, + init, + insert, + listen, + noop, + safe_not_equal +} from "svelte/internal"; + +function create_fragment(ctx) { + var details, dispose; + + return { + c() { + details = element("details"); + details.innerHTML = `summarycontent + `; + dispose = listen(details, "toggle", ctx.details_toggle_handler); + }, + + m(target, anchor) { + insert(target, details, anchor); + + details.open = ctx.open; + }, + + p(changed, ctx) { + if (changed.open) details.open = ctx.open; + }, + + i: noop, + o: noop, + + d(detaching) { + if (detaching) { + detach(details); + } + + dispose(); + } + }; +} + +function instance($$self, $$props, $$invalidate) { + let { open } = $$props; + + function details_toggle_handler() { + open = this.open; + $$invalidate('open', open); + } + + $$self.$set = $$props => { + if ('open' in $$props) $$invalidate('open', open = $$props.open); + }; + + return { open, details_toggle_handler }; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, ["open"]); + } +} + +export default Component; diff --git a/test/js/samples/bind-open/input.svelte b/test/js/samples/bind-open/input.svelte new file mode 100644 index 0000000000..3dd2b03a73 --- /dev/null +++ b/test/js/samples/bind-open/input.svelte @@ -0,0 +1,7 @@ + + +
+ summarycontent +
diff --git a/test/runtime/samples/binding-details-open/_config.js b/test/runtime/samples/binding-details-open/_config.js new file mode 100644 index 0000000000..e5e81b2c93 --- /dev/null +++ b/test/runtime/samples/binding-details-open/_config.js @@ -0,0 +1,25 @@ +export default { + html: ` +
toggle
+ `, + + async test({ assert, component, target, window }) { + const details = target.querySelector('details'); + const event = new window.Event('toggle'); + + details.open = true; + await details.dispatchEvent(event); + assert.equal(component.open, true); + assert.htmlEqual(target.innerHTML, ` +
toggle
+

hello!

+ `); + + details.open = false; + await details.dispatchEvent(event); + assert.equal(component.open, false); + assert.htmlEqual(target.innerHTML, ` +
toggle
+ `); + } +}; diff --git a/test/runtime/samples/binding-details-open/main.svelte b/test/runtime/samples/binding-details-open/main.svelte new file mode 100644 index 0000000000..3a7a08e121 --- /dev/null +++ b/test/runtime/samples/binding-details-open/main.svelte @@ -0,0 +1,9 @@ + + +
toggle
+ +{#if visible} +

hello!

+{/if} From 2f80667f207432f1154fb22ea735f03f1654793d Mon Sep 17 00:00:00 2001 From: Conduitry Date: Fri, 24 May 2019 12:05:18 -0400 Subject: [PATCH 4/9] site: actions tutorial: destroy is not required (#2776) --- site/content/tutorial/12-actions/01-actions/text.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/content/tutorial/12-actions/01-actions/text.md b/site/content/tutorial/12-actions/01-actions/text.md index 279dc3123f..38de8f9a65 100644 --- a/site/content/tutorial/12-actions/01-actions/text.md +++ b/site/content/tutorial/12-actions/01-actions/text.md @@ -27,7 +27,7 @@ import { pannable } from './pannable.js'; > ``` -Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object must have a `destroy` function, which is called when the element is unmounted. +Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted. We want to fire `panstart` event when the user mouses down on the element, `panmove` events (with `dx` and `dy` properties showing how far the mouse moved) when they drag it, and `panend` events when they mouse up. One possible implementation looks like this: @@ -84,4 +84,3 @@ export function pannable(node) { Update the `pannable` function and try moving the box around. > This implementation is for demonstration purposes — a more complete one would also consider touch events. - From a5fe09c48154c9b993dfc5386e8f7c72ce748d09 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 24 May 2019 14:12:41 -0400 Subject: [PATCH 5/9] treat requestAnimationFrame as a noop on the server --- package-lock.json | 2 +- src/compile/render-dom/wrappers/Element/index.ts | 2 +- src/internal/loop.js | 6 +++--- src/internal/style_manager.js | 3 ++- src/internal/utils.js | 8 ++++++-- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb2b7d7d7e..28ecb0eedb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.4.0", + "version": "3.4.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index 22ea7a78cd..ad624c8d6c 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -455,7 +455,7 @@ export default class ElementWrapper extends Wrapper { function ${handler}() { ${animation_frame && deindent` cancelAnimationFrame(${animation_frame}); - if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`} + if (!${this.var}.paused) ${animation_frame} = @raf(${handler});`} ${needs_lock && `${lock} = true;`} ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''}); } diff --git a/src/internal/loop.js b/src/internal/loop.js index 8150727441..60c7df4d70 100644 --- a/src/internal/loop.js +++ b/src/internal/loop.js @@ -1,4 +1,4 @@ -import { now } from './utils.js'; +import { now, raf } from './utils.js'; const tasks = new Set(); let running = false; @@ -12,7 +12,7 @@ function run_tasks() { }); running = tasks.size > 0; - if (running) requestAnimationFrame(run_tasks); + if (running) raf(run_tasks); } export function clear_loops() { @@ -26,7 +26,7 @@ export function loop(fn) { if (!running) { running = true; - requestAnimationFrame(run_tasks); + raf(run_tasks); } return { diff --git a/src/internal/style_manager.js b/src/internal/style_manager.js index d71e922f01..3679470399 100644 --- a/src/internal/style_manager.js +++ b/src/internal/style_manager.js @@ -1,4 +1,5 @@ import { element } from './dom.js'; +import { raf } from './utils.js'; let stylesheet; let active = 0; @@ -56,7 +57,7 @@ export function delete_rule(node, name) { } export function clear_rules() { - requestAnimationFrame(() => { + raf(() => { if (active) return; let i = stylesheet.cssRules.length; while (i--) stylesheet.deleteRule(i); diff --git a/src/internal/utils.js b/src/internal/utils.js index e6d66d8717..c493eacb96 100644 --- a/src/internal/utils.js +++ b/src/internal/utils.js @@ -80,11 +80,15 @@ export function exclude_internal_props(props) { return result; } -export let now = typeof window !== 'undefined' +const is_client = typeof window !== 'undefined'; + +export let now = is_client ? () => window.performance.now() : () => Date.now(); // used internally for testing export function set_now(fn) { now = fn; -} \ No newline at end of file +} + +export const raf = is_client ? requestAnimationFrame : noop; \ No newline at end of file From 4c805018e4d20218e95017ca571fa908f10cdaec Mon Sep 17 00:00:00 2001 From: Elliot Waite <1767836+elliotwaite@users.noreply.github.com> Date: Fri, 24 May 2019 15:55:18 -1000 Subject: [PATCH 6/9] Fix CRUD example to allow changing input values. Currently, the first name and last name inputs fields can't be edited without the changes immediately being overwritten back to the selected person's first name and last name. This change will make it so that the input fields only get overwritten with the selected person's first name and last name when the selected person is changed. --- site/content/examples/19-7guis/05-7guis-crud/App.svelte | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/site/content/examples/19-7guis/05-7guis-crud/App.svelte b/site/content/examples/19-7guis/05-7guis-crud/App.svelte index 1f39fe6642..a0d6ef7f3e 100644 --- a/site/content/examples/19-7guis/05-7guis-crud/App.svelte +++ b/site/content/examples/19-7guis/05-7guis-crud/App.svelte @@ -30,10 +30,7 @@ $: selected = filteredPeople[i]; - $: { - first = selected ? selected.first : ''; - last = selected ? selected.last : ''; - } + $: reset_inputs(selected); function create() { people = people.concat({ first, last }); @@ -53,7 +50,8 @@ } function reset_inputs(person) { - ({ first, last } = person); + first = person ? person.first : ''; + last = person ? person.last : ''; } From 9d53f568fab23b82c8b344c5969c8bfab44de03a Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 25 May 2019 11:25:09 +0100 Subject: [PATCH 7/9] fix tests --- src/internal/utils.js | 6 +++++- test/js/samples/debug-hoisted/expected.js | 2 +- test/js/samples/media-bindings/expected.js | 3 ++- test/runtime/index.js | 6 +++--- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/internal/utils.js b/src/internal/utils.js index c493eacb96..7823a5b920 100644 --- a/src/internal/utils.js +++ b/src/internal/utils.js @@ -86,9 +86,13 @@ export let now = is_client ? () => window.performance.now() : () => Date.now(); +export let raf = is_client ? requestAnimationFrame : noop; + // used internally for testing export function set_now(fn) { now = fn; } -export const raf = is_client ? requestAnimationFrame : noop; \ No newline at end of file +export function set_raf(fn) { + raf = fn; +} \ No newline at end of file diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js index 153f92bad8..51d8bf63a3 100644 --- a/test/js/samples/debug-hoisted/expected.js +++ b/test/js/samples/debug-hoisted/expected.js @@ -53,4 +53,4 @@ class Component extends SvelteComponentDev { } } -export default Component; +export default Component; \ No newline at end of file diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index 8a193f698b..f45f9ce8db 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -8,6 +8,7 @@ import { insert, listen, noop, + raf, run_all, safe_not_equal, time_ranges_to_array @@ -18,7 +19,7 @@ function create_fragment(ctx) { function audio_timeupdate_handler() { cancelAnimationFrame(audio_animationframe); - if (!audio.paused) audio_animationframe = requestAnimationFrame(audio_timeupdate_handler); + if (!audio.paused) audio_animationframe = raf(audio_timeupdate_handler); audio_updating = true; ctx.audio_timeupdate_handler.call(audio); } diff --git a/test/runtime/index.js b/test/runtime/index.js index db02ce13d4..fd5ffdef04 100644 --- a/test/runtime/index.js +++ b/test/runtime/index.js @@ -3,7 +3,7 @@ import * as path from "path"; import * as fs from "fs"; import { rollup } from 'rollup'; import * as virtual from 'rollup-plugin-virtual'; -import { clear_loops, set_now } from "../../internal.js"; +import { clear_loops, set_now, set_raf } from "../../internal.js"; import { showOutput, @@ -101,7 +101,7 @@ describe("runtime", () => { } }; set_now(() => raf.time); - global.requestAnimationFrame = cb => { + set_raf(cb => { let called = false; raf.callback = () => { if (!called) { @@ -109,7 +109,7 @@ describe("runtime", () => { cb(); } }; - }; + }); try { mod = require(`./samples/${dir}/main.svelte`); From cce9f14e380db04f1365ca97ca0acc4f0ca1f619 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 26 May 2019 13:49:06 +0200 Subject: [PATCH 8/9] fix test --- test/runtime/samples/binding-details-open/_config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/runtime/samples/binding-details-open/_config.js b/test/runtime/samples/binding-details-open/_config.js index e5e81b2c93..cf2459c3f1 100644 --- a/test/runtime/samples/binding-details-open/_config.js +++ b/test/runtime/samples/binding-details-open/_config.js @@ -9,7 +9,7 @@ export default { details.open = true; await details.dispatchEvent(event); - assert.equal(component.open, true); + assert.equal(component.visible, true); assert.htmlEqual(target.innerHTML, `
toggle

hello!

@@ -17,9 +17,9 @@ export default { details.open = false; await details.dispatchEvent(event); - assert.equal(component.open, false); + assert.equal(component.visible, false); assert.htmlEqual(target.innerHTML, ` -
toggle
+
toggle
`); } }; From 089149564799fd4f22799128315bc91208dda84f Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 26 May 2019 14:04:29 +0200 Subject: [PATCH 9/9] code style --- src/compile/render-dom/index.ts | 12 ++++++------ test/js/samples/bind-open/expected.js | 2 +- test/js/samples/debug-empty/expected.js | 6 +++--- test/js/samples/debug-foo-bar-baz-things/expected.js | 6 +++--- test/js/samples/debug-foo/expected.js | 6 +++--- .../dev-warning-missing-data-computed/expected.js | 6 +++--- .../samples/dev-warning-unknown-props/_config.js | 2 +- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index e7f063d086..1432813e9d 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -394,12 +394,12 @@ export default function dom( return $name; }); - let unknownPropsCheck; + let unknown_props_check; if (component.compile_options.dev && writable_props.length) { - unknownPropsCheck = deindent` - const writableProps = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}]; + unknown_props_check = deindent` + const writable_props = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}]; Object.keys($$props).forEach(key => { - if (!writableProps.includes(key)) console.warn(\`<${component.tag}> was created with unknown attribute '\${key}'\`); + if (!writable_props.includes(key)) console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`); }); `; } @@ -413,8 +413,8 @@ export default function dom( ${resubscribable_reactive_store_unsubscribers} ${component.javascript} - - ${unknownPropsCheck} + + ${unknown_props_check} ${component.slots.size && `let { $$slots = {}, $$scope } = $$props;`} diff --git a/test/js/samples/bind-open/expected.js b/test/js/samples/bind-open/expected.js index 7c73c8ddac..7f739aec8b 100644 --- a/test/js/samples/bind-open/expected.js +++ b/test/js/samples/bind-open/expected.js @@ -66,4 +66,4 @@ class Component extends SvelteComponent { } } -export default Component; +export default Component; \ No newline at end of file diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index 9b6ef447b4..c82cbeddd3 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -65,9 +65,9 @@ function create_fragment(ctx) { function instance($$self, $$props, $$invalidate) { let { name } = $$props; - const writableProps = ['name']; + const writable_props = ['name']; Object.keys($$props).forEach(key => { - if (!writableProps.includes(key)) console.warn(` was created with unknown attribute '${key}'`); + if (!writable_props.includes(key)) console.warn(` was created with unknown prop '${key}'`); }); $$self.$set = $$props => { @@ -98,4 +98,4 @@ class Component extends SvelteComponentDev { } } -export default Component; +export default Component; \ No newline at end of file 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 006b25aba5..3e1571b890 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -151,9 +151,9 @@ function create_fragment(ctx) { function instance($$self, $$props, $$invalidate) { let { things, foo, bar, baz } = $$props; - const writableProps = ['things', 'foo', 'bar', 'baz']; + const writable_props = ['things', 'foo', 'bar', 'baz']; Object.keys($$props).forEach(key => { - if (!writableProps.includes(key)) console.warn(` was created with unknown attribute '${key}'`); + if (!writable_props.includes(key)) console.warn(` was created with unknown prop '${key}'`); }); $$self.$set = $$props => { @@ -220,4 +220,4 @@ class Component extends SvelteComponentDev { } } -export default Component; +export default Component; \ No newline at end of file diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 7bc58434a8..1af0fcaebe 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -151,9 +151,9 @@ function create_fragment(ctx) { function instance($$self, $$props, $$invalidate) { let { things, foo } = $$props; - const writableProps = ['things', 'foo']; + const writable_props = ['things', 'foo']; Object.keys($$props).forEach(key => { - if (!writableProps.includes(key)) console.warn(` was created with unknown attribute '${key}'`); + if (!writable_props.includes(key)) console.warn(` was created with unknown prop '${key}'`); }); $$self.$set = $$props => { @@ -196,4 +196,4 @@ class Component extends SvelteComponentDev { } } -export default Component; +export default Component; \ No newline at end of file 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 e181486512..0c193934c0 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -65,9 +65,9 @@ function instance($$self, $$props, $$invalidate) { let bar; - const writableProps = ['foo']; + const writable_props = ['foo']; Object.keys($$props).forEach(key => { - if (!writableProps.includes(key)) console.warn(` was created with unknown attribute '${key}'`); + if (!writable_props.includes(key)) console.warn(` was created with unknown prop '${key}'`); }); $$self.$set = $$props => { @@ -102,4 +102,4 @@ class Component extends SvelteComponentDev { } } -export default Component; +export default Component; \ No newline at end of file diff --git a/test/runtime/samples/dev-warning-unknown-props/_config.js b/test/runtime/samples/dev-warning-unknown-props/_config.js index 31b605e214..9bff4a2a74 100644 --- a/test/runtime/samples/dev-warning-unknown-props/_config.js +++ b/test/runtime/samples/dev-warning-unknown-props/_config.js @@ -4,6 +4,6 @@ export default { }, warnings: [ - ` was created with unknown attribute 'fo'` + ` was created with unknown prop 'fo'` ] };