diff --git a/package-lock.json b/package-lock.json index 20a0d4a9a4..040a9d174f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -500,9 +500,9 @@ "dev": true }, "code-red": { - "version": "0.0.18", - "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.0.18.tgz", - "integrity": "sha512-g7W6RwRqBbQTtMaUqrNWDyyl2GK0Uulk/uZPzGdgTXpOGX/LA8bW67EKQLdQgpYfd6APhZVwoX2lrL7mnJOWkA==", + "version": "0.0.19", + "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.0.19.tgz", + "integrity": "sha512-pzkA9ikMLR7KatByUJVz33kQKkrDnsJhyuvxSSUnyJNBggkGNStmDe/ezYvfP4CZ9XM7vYIID+YIaMJnlYGzLg==", "dev": true, "requires": { "acorn": "^7.1.0", diff --git a/package.json b/package.json index 27f330f9fc..9f49a0ba7c 100644 --- a/package.json +++ b/package.json @@ -56,15 +56,15 @@ }, "homepage": "https://github.com/sveltejs/svelte#README", "devDependencies": { + "@rollup/plugin-replace": "^2.2.1", "@types/mocha": "^5.2.7", "@types/node": "^8.10.53", "@typescript-eslint/eslint-plugin": "^1.13.0", "@typescript-eslint/parser": "^2.1.0", - "@rollup/plugin-replace": "^2.2.1", "acorn": "^7.1.0", "agadoo": "^1.1.0", "c8": "^5.0.1", - "code-red": "0.0.18", + "code-red": "0.0.19", "codecov": "^3.5.0", "css-tree": "1.0.0-alpha22", "eslint": "^6.3.0", diff --git a/site/content/blog/2019-04-15-setting-up-your-editor.md b/site/content/blog/2019-04-15-setting-up-your-editor.md index 1db85a7974..7a107c590b 100644 --- a/site/content/blog/2019-04-15-setting-up-your-editor.md +++ b/site/content/blog/2019-04-15-setting-up-your-editor.md @@ -6,7 +6,9 @@ authorURL: https://twitter.com/Rich_Harris draft: true --- -*Coming soon* This post will walk you through setting up your editor so that recognises Svelte files: +*__Coming soon__* + +This post will walk you through setting up your editor so that recognises Svelte files: * eslint-plugin-svelte3 * svelte-vscode @@ -14,7 +16,7 @@ draft: true ## Atom -To treat `*.svelte` files as HTML, open Edit → Config... and add the following lines to your `core` section: +To treat `*.svelte` files as HTML, open *__Edit → Config...__* and add the following lines to your `core` section: ```cson "*": @@ -45,3 +47,23 @@ To set the filetype for a single file, use a [modeline](https://vim.fandom.com/w ``` ``` + +## Visual Studio Code + +To treat `*.svelte` files as HTML, add the following lines to your `settings.json` file: + +```cson + "files.associations": { + "*.svelte": "html" + } +``` + +## JetBrains WebStorm + +To treat `*.svelte` files as HTML in WebStorm, you need to create a new file type association. Please refer to the [JetBrains website](https://www.jetbrains.com/help/webstorm/creating-and-registering-file-types.html) to see how. + +## Sublime Text 3 + +Open any `.svelte` file. + +Go to *__View → Syntax → Open all with current extension as... → HTML__*. diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md index 694010dfe7..345dee1556 100644 --- a/site/content/docs/02-template-syntax.md +++ b/site/content/docs/02-template-syntax.md @@ -1146,7 +1146,7 @@ bind:property={variable} --- -You can bind to component props using the same mechanism. +You can bind to component props using the same syntax as for elements. ```html diff --git a/site/content/examples/12-svg/05-svg-transitions/App.svelte b/site/content/examples/12-svg/05-svg-transitions/App.svelte index 6059b3645f..6e1e636b20 100644 --- a/site/content/examples/12-svg/05-svg-transitions/App.svelte +++ b/site/content/examples/12-svg/05-svg-transitions/App.svelte @@ -33,7 +33,7 @@ font-family: 'Overpass'; letter-spacing: 0.12em; color: #676778; - font-weight: 100; + font-weight: 400; } .centered span { @@ -71,4 +71,4 @@ toggle me - \ No newline at end of file + diff --git a/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md index b70b09f728..82e4c91d35 100644 --- a/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md +++ b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md @@ -30,3 +30,12 @@ function addNumber() { numbers[numbers.length] = numbers.length + 1; } ``` + +A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. For example this... + +```js +const foo = obj.foo; +foo.bar = 'baz'; +``` + +...won't update references to `obj.foo.bar`, unless you follow it up with `obj = obj`. \ No newline at end of file diff --git a/site/content/tutorial/09-motion/01-tweened/text.md b/site/content/tutorial/09-motion/01-tweened/text.md index def011c993..50cd0c2fba 100644 --- a/site/content/tutorial/09-motion/01-tweened/text.md +++ b/site/content/tutorial/09-motion/01-tweened/text.md @@ -28,7 +28,7 @@ Clicking the buttons causes the progress bar to animate to its new value. It's a ``` -> The `svelte/easing` module contains the [Penner easing equations](http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1. +> The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1. The full set of options available to `tweened`: @@ -37,4 +37,4 @@ The full set of options available to `tweened`: * `easing` — a `p => t` function * `interpolate` — a custom `(from, to) => t => value` function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator -You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes. \ No newline at end of file +You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes. diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 4d8abadf34..67b2cd4380 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -240,8 +240,7 @@ export default class Component { const { compile_options, name } = this; const { format = 'esm' } = compile_options; - // TODO reinstate banner (along with fragment marker comments) - const banner = `/* ${this.file ? `${this.file} ` : ``}generated by Svelte v${'__VERSION__'} */`; + const banner = `${this.file ? `${this.file} ` : ``}generated by Svelte v${'__VERSION__'}`; const program: any = { type: 'Program', body: result }; diff --git a/src/compiler/compile/create_module.ts b/src/compiler/compile/create_module.ts index 76e68e758f..ce6443e899 100644 --- a/src/compiler/compile/create_module.ts +++ b/src/compiler/compile/create_module.ts @@ -44,7 +44,7 @@ function edit_source(source, sveltePath) { function esm( program: any, name: Identifier, - _banner: string, + banner: string, sveltePath: string, internal_path: string, helpers: Array<{ name: string; alias: Identifier }>, @@ -98,6 +98,8 @@ function esm( }; program.body = b` + /* ${banner} */ + ${import_declaration} ${internal_globals} ${imports} @@ -112,7 +114,7 @@ function esm( function cjs( program: any, name: Identifier, - _banner: string, + banner: string, sveltePath: string, internal_path: string, helpers: Array<{ name: string; alias: Identifier }>, @@ -188,6 +190,8 @@ function cjs( const exports = module_exports.map(x => b`exports.${{ type: 'Identifier', name: x.as }} = ${{ type: 'Identifier', name: x.name }};`); program.body = b` + /* ${banner} */ + "use strict"; ${internal_requires} ${internal_globals} diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts index 56b5d08489..0b9784a6e8 100644 --- a/src/compiler/compile/render_dom/Block.ts +++ b/src/compiler/compile/render_dom/Block.ts @@ -423,17 +423,17 @@ export default class Block { const key = this.key && this.get_unique_name('key'); const args: any[] = [x`#ctx`]; - if (key) args.unshift(key); - // TODO include this.comment - // ${this.comment && `// ${escape(this.comment, { only_escape_at_symbol: true })}`} + const fn = b`function ${this.name}(${args}) { + ${this.get_contents(key)} + }`; - return b` - function ${this.name}(${args}) { - ${this.get_contents(key)} - } - `; + return this.comment + ? b` + // ${this.comment} + ${fn}` + : fn; } render_listeners(chunk: string = '') { diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts index d50a8238d9..db3cf7a662 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts @@ -7,7 +7,6 @@ import { b, x } from 'code-red'; import Expression from '../../../nodes/shared/Expression'; import Text from '../../../nodes/Text'; import { changed } from '../shared/changed'; -import { Literal } from 'estree'; export default class AttributeWrapper { node: Attribute; @@ -72,89 +71,81 @@ export default class AttributeWrapper { const is_legacy_input_type = element.renderer.component.compile_options.legacy && name === 'type' && this.parent.node.name === 'input'; const dependencies = this.node.get_dependencies(); - if (dependencies.length > 0) { - let value; - - // TODO some of this code is repeated in Tag.ts — would be good to - // DRY it out if that's possible without introducing crazy indirection - if (this.node.chunks.length === 1) { - // single {tag} — may be a non-string - value = (this.node.chunks[0] as Expression).manipulate(block); - } else { - value = this.node.name === 'class' - ? this.get_class_name_text() - : this.render_chunks().reduce((lhs, rhs) => x`${lhs} + ${rhs}`); - - // '{foo} {bar}' — treat as string concatenation - if (this.node.chunks[0].type !== 'Text') { - value = x`"" + ${value}`; - } - } + const value = this.get_value(block); - const is_select_value_attribute = - name === 'value' && element.node.name === 'select'; + const is_src = this.node.name === 'src'; // TODO retire this exception in favour of https://github.com/sveltejs/svelte/issues/3750 + const is_select_value_attribute = + name === 'value' && element.node.name === 'select'; - const should_cache = is_select_value_attribute; // TODO is this necessary? + const should_cache = is_src || this.node.should_cache() || is_select_value_attribute; // TODO is this necessary? - const last = should_cache && block.get_unique_name( - `${element.var.name}_${name.replace(/[^a-zA-Z_$]/g, '_')}_value` - ); + const last = should_cache && block.get_unique_name( + `${element.var.name}_${name.replace(/[^a-zA-Z_$]/g, '_')}_value` + ); - if (should_cache) block.add_variable(last); - - let updater; - const init = should_cache ? x`${last} = ${value}` : value; - - if (is_legacy_input_type) { - block.chunks.hydrate.push( - b`@set_input_type(${element.var}, ${init});` - ); - updater = b`@set_input_type(${element.var}, ${should_cache ? last : value});`; - } else if (is_select_value_attribute) { - // annoying special case - const is_multiple_select = element.node.get_static_attribute_value('multiple'); - const i = block.get_unique_name('i'); - const option = block.get_unique_name('option'); - - const if_statement = is_multiple_select - ? b` - ${option}.selected = ~${last}.indexOf(${option}.__value);` - : b` - if (${option}.__value === ${last}) { - ${option}.selected = true; - ${{ type: 'BreakStatement' }}; - }`; // TODO the BreakStatement is gross, but it's unsyntactic otherwise... - - updater = b` - for (var ${i} = 0; ${i} < ${element.var}.options.length; ${i} += 1) { - var ${option} = ${element.var}.options[${i}]; - - ${if_statement} - } - `; - - block.chunks.mount.push(b` - ${last} = ${value}; - ${updater} - `); - } else if (property_name) { - block.chunks.hydrate.push( - b`${element.var}.${property_name} = ${init};` - ); - updater = block.renderer.options.dev - ? b`@prop_dev(${element.var}, "${property_name}", ${should_cache ? last : value});` - : b`${element.var}.${property_name} = ${should_cache ? last : value};`; - } else { - block.chunks.hydrate.push( - b`${method}(${element.var}, "${name}", ${init});` - ); - updater = b`${method}(${element.var}, "${name}", ${should_cache ? last : value});`; - } + if (should_cache) block.add_variable(last); + + let updater; + const init = should_cache ? x`${last} = ${value}` : value; + + if (is_legacy_input_type) { + block.chunks.hydrate.push( + b`@set_input_type(${element.var}, ${init});` + ); + updater = b`@set_input_type(${element.var}, ${should_cache ? last : value});`; + } else if (is_select_value_attribute) { + // annoying special case + const is_multiple_select = element.node.get_static_attribute_value('multiple'); + const i = block.get_unique_name('i'); + const option = block.get_unique_name('option'); + + const if_statement = is_multiple_select + ? b` + ${option}.selected = ~${last}.indexOf(${option}.__value);` + : b` + if (${option}.__value === ${last}) { + ${option}.selected = true; + ${{ type: 'BreakStatement' }}; + }`; // TODO the BreakStatement is gross, but it's unsyntactic otherwise... + + updater = b` + for (var ${i} = 0; ${i} < ${element.var}.options.length; ${i} += 1) { + var ${option} = ${element.var}.options[${i}]; + + ${if_statement} + } + `; + + block.chunks.mount.push(b` + ${last} = ${value}; + ${updater} + `); + } else if (is_src) { + block.chunks.hydrate.push( + b`if (${element.var}.src !== ${init}) ${method}(${element.var}, "${name}", ${last});` + ); + updater = b`${method}(${element.var}, "${name}", ${should_cache ? last : value});`; + } else if (property_name) { + block.chunks.hydrate.push( + b`${element.var}.${property_name} = ${init};` + ); + updater = block.renderer.options.dev + ? b`@prop_dev(${element.var}, "${property_name}", ${should_cache ? last : value});` + : b`${element.var}.${property_name} = ${should_cache ? last : value};`; + } else { + block.chunks.hydrate.push( + b`${method}(${element.var}, "${name}", ${init});` + ); + updater = b`${method}(${element.var}, "${name}", ${should_cache ? last : value});`; + } + if (dependencies.length > 0) { let condition = changed(dependencies); if (should_cache) { - condition = x`${condition} && (${last} !== (${last} = ${value}))`; + condition = is_src + ? x`${condition} && (${element.var}.src !== (${last} = ${value}))` + : x`${condition} && (${last} !== (${last} = ${value}))`; } if (block.has_outros) { @@ -165,23 +156,11 @@ export default class AttributeWrapper { if (${condition}) { ${updater} }`); - } else { - const value = this.node.get_value(block); - - const statement = ( - is_legacy_input_type - ? b`@set_input_type(${element.var}, ${value});` - : property_name - ? b`${element.var}.${property_name} = ${value};` - : b`${method}(${element.var}, "${name}", ${value.type === 'Literal' && (value as Literal).value === true ? x`""` : value});` - ); - - block.chunks.hydrate.push(statement); + } - // special case – autofocus. has to be handled in a bit of a weird way - if (this.node.is_true && name === 'autofocus') { - block.autofocus = element.var; - } + // special case – autofocus. has to be handled in a bit of a weird way + if (this.node.is_true && name === 'autofocus') { + block.autofocus = element.var; } if (is_indirectly_bound_value) { @@ -199,6 +178,36 @@ export default class AttributeWrapper { return metadata; } + get_value(block) { + if (this.node.is_true) { + const metadata = this.get_metadata(); + if (metadata && boolean_attribute.has(metadata.property_name.toLowerCase())) { + return x`true`; + } + return x`""`; + } + if (this.node.chunks.length === 0) return x`""`; + + // TODO some of this code is repeated in Tag.ts — would be good to + // DRY it out if that's possible without introducing crazy indirection + if (this.node.chunks.length === 1) { + return this.node.chunks[0].type === 'Text' + ? string_literal((this.node.chunks[0] as Text).data) + : (this.node.chunks[0] as Expression).manipulate(block); + } + + let value = this.node.name === 'class' + ? this.get_class_name_text() + : this.render_chunks().reduce((lhs, rhs) => x`${lhs} + ${rhs}`); + + // '{foo} {bar}' — treat as string concatenation + if (this.node.chunks[0].type !== 'Text') { + value = x`"" + ${value}`; + } + + return value; + } + get_class_name_text() { const scoped_css = this.node.chunks.some((chunk: Text) => chunk.synthetic); const rendered = this.render_chunks(); @@ -292,3 +301,32 @@ Object.keys(attribute_lookup).forEach(name => { const metadata = attribute_lookup[name]; if (!metadata.property_name) metadata.property_name = name; }); + +// source: https://html.spec.whatwg.org/multipage/indices.html +const boolean_attribute = new Set([ + 'allowfullscreen', + 'allowpaymentrequest', + 'async', + 'autofocus', + 'autoplay', + 'checked', + 'controls', + 'default', + 'defer', + 'disabled', + 'formnovalidate', + 'hidden', + 'ismap', + 'itemscope', + 'loop', + 'multiple', + 'muted', + 'nomodule', + 'novalidate', + 'open', + 'playsinline', + 'readonly', + 'required', + 'reversed', + 'selected' +]); \ No newline at end of file diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 9b7bbfef74..d0028d1dd6 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -121,6 +121,7 @@ export default class ElementWrapper extends Wrapper { select_binding_dependencies?: Set; var: any; + void: boolean; constructor( renderer: Renderer, @@ -136,6 +137,8 @@ export default class ElementWrapper extends Wrapper { name: node.name.replace(/[^a-zA-Z0-9_$]/g, '_') }; + this.void = is_void(node.name); + this.class_dependencies = []; this.attributes = this.node.attributes.map(attribute => { @@ -258,6 +261,7 @@ export default class ElementWrapper extends Wrapper { const node = this.var; const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. , parent_nodes is null + const children = x`@children(${this.node.name === 'template' ? x`${node}.content` : node})`; block.add_variable(node); const render_statement = this.get_render_statement(); @@ -269,8 +273,13 @@ export default class ElementWrapper extends Wrapper { if (parent_nodes) { block.chunks.claim.push(b` ${node} = ${this.get_claim_statement(parent_nodes)}; - var ${nodes} = @children(${this.node.name === 'template' ? x`${node}.content` : node}); `); + + if (!this.void && this.node.children.length > 0) { + block.chunks.claim.push(b` + var ${nodes} = ${children}; + `); + } } else { block.chunks.claim.push( b`${node} = ${render_statement};` @@ -351,9 +360,9 @@ export default class ElementWrapper extends Wrapper { this.add_classes(block); this.add_manual_style_scoping(block); - if (nodes && this.renderer.options.hydratable) { + if (nodes && this.renderer.options.hydratable && !this.void) { block.chunks.claim.push( - b`${nodes}.forEach(@detach);` + b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);` ); } @@ -617,7 +626,7 @@ export default class ElementWrapper extends Wrapper { const snippet = x`{ ${ (metadata && metadata.property_name) || fix_attribute_casing(attr.node.name) - }: ${attr.node.get_value(block)} }`; + }: ${attr.get_value(block)} }`; initial_props.push(snippet); updates.push(condition ? x`${condition} && ${snippet}` : snippet); @@ -915,7 +924,7 @@ function to_html(wrappers: Array, blo state.quasi.value.raw += '>'; - if (!is_void(wrapper.node.name)) { + if (!(wrapper as ElementWrapper).void) { to_html((wrapper as ElementWrapper).fragment.nodes as Array, block, literal, state); state.quasi.value.raw += ``; diff --git a/test/css/samples/undefined-with-scope/expected.css b/test/css/samples/undefined-with-scope/expected.css new file mode 100644 index 0000000000..5d8d69ac33 --- /dev/null +++ b/test/css/samples/undefined-with-scope/expected.css @@ -0,0 +1 @@ +p.svelte-xyz{color:red} \ No newline at end of file diff --git a/test/css/samples/undefined-with-scope/expected.html b/test/css/samples/undefined-with-scope/expected.html new file mode 100644 index 0000000000..ddb9429bc8 --- /dev/null +++ b/test/css/samples/undefined-with-scope/expected.html @@ -0,0 +1 @@ +

Foo

\ No newline at end of file diff --git a/test/css/samples/undefined-with-scope/input.svelte b/test/css/samples/undefined-with-scope/input.svelte new file mode 100644 index 0000000000..c68fb40dea --- /dev/null +++ b/test/css/samples/undefined-with-scope/input.svelte @@ -0,0 +1,3 @@ + + +

Foo

\ No newline at end of file diff --git a/test/js/samples/action-custom-event-handler/expected.js b/test/js/samples/action-custom-event-handler/expected.js index 6204fefd46..3fad4fb8cc 100644 --- a/test/js/samples/action-custom-event-handler/expected.js +++ b/test/js/samples/action-custom-event-handler/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js index 71e7b4bbf5..78fc4855c6 100644 --- a/test/js/samples/action/expected.js +++ b/test/js/samples/action/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/bind-online/expected.js b/test/js/samples/bind-online/expected.js index 92494fb753..d34e84330f 100644 --- a/test/js/samples/bind-online/expected.js +++ b/test/js/samples/bind-online/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, add_render_callback, diff --git a/test/js/samples/bind-open/expected.js b/test/js/samples/bind-open/expected.js index ded427fb36..f7bede2b4e 100644 --- a/test/js/samples/bind-open/expected.js +++ b/test/js/samples/bind-open/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js index 218a72a7cc..ce20bc4aa7 100644 --- a/test/js/samples/bind-width-height/expected.js +++ b/test/js/samples/bind-width-height/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, add_render_callback, diff --git a/test/js/samples/bindings-readonly-order/expected.js b/test/js/samples/bindings-readonly-order/expected.js index b7e004ec23..04eff699f8 100644 --- a/test/js/samples/bindings-readonly-order/expected.js +++ b/test/js/samples/bindings-readonly-order/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/capture-inject-dev-only/expected.js b/test/js/samples/capture-inject-dev-only/expected.js index 66e5b75fa3..ee2f6d0dc9 100644 --- a/test/js/samples/capture-inject-dev-only/expected.js +++ b/test/js/samples/capture-inject-dev-only/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 84cfaf35ef..5fb7aaef15 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/component-static-array/expected.js b/test/js/samples/component-static-array/expected.js index 0f32421e91..b89ee46764 100644 --- a/test/js/samples/component-static-array/expected.js +++ b/test/js/samples/component-static-array/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, create_component, diff --git a/test/js/samples/component-static-immutable/expected.js b/test/js/samples/component-static-immutable/expected.js index 817db4e494..17b42a4a43 100644 --- a/test/js/samples/component-static-immutable/expected.js +++ b/test/js/samples/component-static-immutable/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, create_component, diff --git a/test/js/samples/component-static-immutable2/expected.js b/test/js/samples/component-static-immutable2/expected.js index 817db4e494..17b42a4a43 100644 --- a/test/js/samples/component-static-immutable2/expected.js +++ b/test/js/samples/component-static-immutable2/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, create_component, diff --git a/test/js/samples/component-static-var/expected.js b/test/js/samples/component-static-var/expected.js index 0120b2c8cf..29c585744e 100644 --- a/test/js/samples/component-static-var/expected.js +++ b/test/js/samples/component-static-var/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, create_component, diff --git a/test/js/samples/component-static/expected.js b/test/js/samples/component-static/expected.js index 76321cfd82..16d9ea9c4c 100644 --- a/test/js/samples/component-static/expected.js +++ b/test/js/samples/component-static/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, create_component, diff --git a/test/js/samples/component-store-access-invalidate/expected.js b/test/js/samples/component-store-access-invalidate/expected.js index 713c4108b7..b3eedd3d6e 100644 --- a/test/js/samples/component-store-access-invalidate/expected.js +++ b/test/js/samples/component-store-access-invalidate/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/component-store-file-invalidate/expected.js b/test/js/samples/component-store-file-invalidate/expected.js index 5a466d7786..a4d7ad5c10 100644 --- a/test/js/samples/component-store-file-invalidate/expected.js +++ b/test/js/samples/component-store-file-invalidate/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, component_subscribe, diff --git a/test/js/samples/component-store-reassign-invalidate/expected.js b/test/js/samples/component-store-reassign-invalidate/expected.js index 407cfc9730..890e28f79c 100644 --- a/test/js/samples/component-store-reassign-invalidate/expected.js +++ b/test/js/samples/component-store-reassign-invalidate/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js index d4b0289212..4d3954358e 100644 --- a/test/js/samples/computed-collapsed-if/expected.js +++ b/test/js/samples/computed-collapsed-if/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, init, safe_not_equal } from "svelte/internal"; function instance($$self, $$props, $$invalidate) { diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index 18b357e0e2..f477670059 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index 9c342df87d..a0a0ebe021 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteElement, detach, diff --git a/test/js/samples/data-attribute/expected.js b/test/js/samples/data-attribute/expected.js index bd4d3a5482..674be31867 100644 --- a/test/js/samples/data-attribute/expected.js +++ b/test/js/samples/data-attribute/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js index 2238fa3ecf..3c65e5a950 100644 --- a/test/js/samples/debug-empty/expected.js +++ b/test/js/samples/debug-empty/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponentDev, add_location, 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 4a8c145f5e..4d6a0f61c6 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponentDev, add_location, @@ -23,6 +24,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } +// (8:0) {#each things as thing} function create_each_block(ctx) { let span; let t0_value = ctx.thing.name + ""; diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index a91ed932c8..3f502bc0ca 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponentDev, add_location, @@ -23,6 +24,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } +// (6:0) {#each things as thing} function create_each_block(ctx) { let span; let t0_value = ctx.thing.name + ""; diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js index b43e4a2d69..7ab1d3348e 100644 --- a/test/js/samples/debug-hoisted/expected.js +++ b/test/js/samples/debug-hoisted/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponentDev, dispatch_dev, diff --git a/test/js/samples/debug-no-dependencies/expected.js b/test/js/samples/debug-no-dependencies/expected.js index 77473d37df..903bdb83b6 100644 --- a/test/js/samples/debug-no-dependencies/expected.js +++ b/test/js/samples/debug-no-dependencies/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponentDev, destroy_each, @@ -21,6 +22,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } +// (4:0) {#each things as thing, index} function create_each_block(ctx) { let t0; let t1_value = ctx.thing + ""; diff --git a/test/js/samples/debug-ssr-foo/expected.js b/test/js/samples/debug-ssr-foo/expected.js index 38d07e994e..fe34a6a4fd 100644 --- a/test/js/samples/debug-ssr-foo/expected.js +++ b/test/js/samples/debug-ssr-foo/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { create_ssr_component, debug, each, escape } from "svelte/internal"; const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => { diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js index 6d9574fd03..54448a91b4 100644 --- a/test/js/samples/deconflict-builtins/expected.js +++ b/test/js/samples/deconflict-builtins/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -19,6 +20,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } +// (5:0) {#each createElement as node} function create_each_block(ctx) { let span; let t_value = ctx.node + ""; diff --git a/test/js/samples/deconflict-globals/expected.js b/test/js/samples/deconflict-globals/expected.js index 92492dcd05..6bd0c596b9 100644 --- a/test/js/samples/deconflict-globals/expected.js +++ b/test/js/samples/deconflict-globals/expected.js @@ -1,4 +1,6 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, init, safe_not_equal } from "svelte/internal"; + import { onMount } from "svelte"; function instance($$self, $$props, $$invalidate) { 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 27e0b797a2..f362a42db6 100644 --- a/test/js/samples/dev-warning-missing-data-computed/expected.js +++ b/test/js/samples/dev-warning-missing-data-computed/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponentDev, add_location, diff --git a/test/js/samples/dont-invalidate-this/expected.js b/test/js/samples/dont-invalidate-this/expected.js index a1365c3618..98f638dfcf 100644 --- a/test/js/samples/dont-invalidate-this/expected.js +++ b/test/js/samples/dont-invalidate-this/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/dynamic-import/expected.js b/test/js/samples/dynamic-import/expected.js index 605f19983f..4394e7d8a9 100644 --- a/test/js/samples/dynamic-import/expected.js +++ b/test/js/samples/dynamic-import/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, create_component, diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js index c687748961..3804cab6bb 100644 --- a/test/js/samples/each-block-array-literal/expected.js +++ b/test/js/samples/each-block-array-literal/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -19,6 +20,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } +// (9:0) {#each [a, b, c, d, e] as num} function create_each_block(ctx) { let span; let t_value = ctx.num + ""; diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 871b5570ca..a2735ae9c4 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { HtmlTag, SvelteComponent, @@ -22,6 +23,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } +// (8:0) {#each comments as comment, i} function create_each_block(ctx) { let div; let strong; @@ -163,13 +165,7 @@ function instance($$self, $$props, $$invalidate) { class Component extends SvelteComponent { constructor(options) { super(); - - init(this, options, instance, create_fragment, safe_not_equal, { - comments: 0, - elapsed: 0, - time: 0, - foo: 0 - }); + init(this, options, instance, create_fragment, safe_not_equal, { comments: 0, elapsed: 0, time: 0, foo: 0 }); } } diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index 9ca72054be..e3661764b1 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -22,6 +23,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } +// (19:0) {#each things as thing (thing.id)} function create_each_block(key_1, ctx) { let div; let t_value = ctx.thing.name + ""; diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js index a845fc833b..beb5a613bc 100644 --- a/test/js/samples/each-block-keyed/expected.js +++ b/test/js/samples/each-block-keyed/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -20,6 +21,7 @@ function get_each_context(ctx, list, i) { return child_ctx; } +// (5:0) {#each things as thing (thing.id)} function create_each_block(key_1, ctx) { let div; let t_value = ctx.thing.name + ""; diff --git a/test/js/samples/empty-dom/expected.js b/test/js/samples/empty-dom/expected.js index 6ae0bc2999..bd5a9fb7ef 100644 --- a/test/js/samples/empty-dom/expected.js +++ b/test/js/samples/empty-dom/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, init, safe_not_equal } from "svelte/internal"; function instance($$self) { diff --git a/test/js/samples/event-handler-dynamic/expected.js b/test/js/samples/event-handler-dynamic/expected.js index 0678d229b9..515d7e36a9 100644 --- a/test/js/samples/event-handler-dynamic/expected.js +++ b/test/js/samples/event-handler-dynamic/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/event-handler-no-passive/expected.js b/test/js/samples/event-handler-no-passive/expected.js index bd6f2230a5..6f04e67808 100644 --- a/test/js/samples/event-handler-no-passive/expected.js +++ b/test/js/samples/event-handler-no-passive/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/event-modifiers/expected.js b/test/js/samples/event-modifiers/expected.js index 831374f988..3f324bb76d 100644 --- a/test/js/samples/event-modifiers/expected.js +++ b/test/js/samples/event-modifiers/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js index 87c7b53260..444bad3fd4 100644 --- a/test/js/samples/head-no-whitespace/expected.js +++ b/test/js/samples/head-no-whitespace/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/hoisted-const/expected.js b/test/js/samples/hoisted-const/expected.js index f47afe2d49..2842b54751 100644 --- a/test/js/samples/hoisted-const/expected.js +++ b/test/js/samples/hoisted-const/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/hoisted-let/expected.js b/test/js/samples/hoisted-let/expected.js index f570417d10..285b124118 100644 --- a/test/js/samples/hoisted-let/expected.js +++ b/test/js/samples/hoisted-let/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/hydrated-void-element/_config.js b/test/js/samples/hydrated-void-element/_config.js new file mode 100644 index 0000000000..84c0d733ef --- /dev/null +++ b/test/js/samples/hydrated-void-element/_config.js @@ -0,0 +1,5 @@ +export default { + options: { + hydratable: true + } +}; \ No newline at end of file diff --git a/test/js/samples/hydrated-void-element/expected.js b/test/js/samples/hydrated-void-element/expected.js new file mode 100644 index 0000000000..e53d16d925 --- /dev/null +++ b/test/js/samples/hydrated-void-element/expected.js @@ -0,0 +1,64 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + attr, + children, + claim_element, + claim_space, + detach, + element, + init, + insert, + noop, + safe_not_equal, + space +} from "svelte/internal"; + +function create_fragment(ctx) { + let img; + let img_src_value; + let t; + let div; + + return { + c() { + img = element("img"); + t = space(); + div = element("div"); + this.h(); + }, + l(nodes) { + img = claim_element(nodes, "IMG", { src: true, alt: true }); + t = claim_space(nodes); + div = claim_element(nodes, "DIV", {}); + children(div).forEach(detach); + this.h(); + }, + h() { + if (img.src !== (img_src_value = "donuts.jpg")) attr(img, "src", img_src_value); + attr(img, "alt", "donuts"); + }, + m(target, anchor) { + insert(target, img, anchor); + insert(target, t, anchor); + insert(target, div, anchor); + }, + p: noop, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(img); + if (detaching) detach(t); + if (detaching) detach(div); + } + }; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, null, create_fragment, safe_not_equal, {}); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/hydrated-void-element/input.svelte b/test/js/samples/hydrated-void-element/input.svelte new file mode 100644 index 0000000000..d70b3eaf12 --- /dev/null +++ b/test/js/samples/hydrated-void-element/input.svelte @@ -0,0 +1,2 @@ +donuts +
\ No newline at end of file diff --git a/test/js/samples/if-block-complex/expected.js b/test/js/samples/if-block-complex/expected.js index 05ce7d49fa..badae4a2c0 100644 --- a/test/js/samples/if-block-complex/expected.js +++ b/test/js/samples/if-block-complex/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js index 51bffe0613..b057041e88 100644 --- a/test/js/samples/if-block-no-update/expected.js +++ b/test/js/samples/if-block-no-update/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, @@ -26,6 +27,7 @@ function create_else_block(ctx) { }; } +// (5:0) {#if foo} function create_if_block(ctx) { let p; diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js index 74472a4460..fd2185b86d 100644 --- a/test/js/samples/if-block-simple/expected.js +++ b/test/js/samples/if-block-simple/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/inline-style-optimized-multiple/expected.js b/test/js/samples/inline-style-optimized-multiple/expected.js index d29504ec27..636a4f19bb 100644 --- a/test/js/samples/inline-style-optimized-multiple/expected.js +++ b/test/js/samples/inline-style-optimized-multiple/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/inline-style-optimized-url/expected.js b/test/js/samples/inline-style-optimized-url/expected.js index a76b580c74..53a9434369 100644 --- a/test/js/samples/inline-style-optimized-url/expected.js +++ b/test/js/samples/inline-style-optimized-url/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/inline-style-optimized/expected.js b/test/js/samples/inline-style-optimized/expected.js index e953ae7eed..95079a63fe 100644 --- a/test/js/samples/inline-style-optimized/expected.js +++ b/test/js/samples/inline-style-optimized/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/inline-style-unoptimized/expected.js b/test/js/samples/inline-style-unoptimized/expected.js index 7518d5805d..11eaddbdf7 100644 --- a/test/js/samples/inline-style-unoptimized/expected.js +++ b/test/js/samples/inline-style-unoptimized/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, @@ -14,6 +15,7 @@ function create_fragment(ctx) { let div0; let t; let div1; + let div1_style_value; return { c() { @@ -21,7 +23,7 @@ function create_fragment(ctx) { t = space(); div1 = element("div"); attr(div0, "style", ctx.style); - attr(div1, "style", "" + (ctx.key + ": " + ctx.value)); + attr(div1, "style", div1_style_value = "" + (ctx.key + ": " + ctx.value)); }, m(target, anchor) { insert(target, div0, anchor); @@ -33,8 +35,8 @@ function create_fragment(ctx) { attr(div0, "style", ctx.style); } - if (changed.key || changed.value) { - attr(div1, "style", "" + (ctx.key + ": " + ctx.value)); + if ((changed.key || changed.value) && div1_style_value !== (div1_style_value = "" + (ctx.key + ": " + ctx.value))) { + attr(div1, "style", div1_style_value); } }, i: noop, diff --git a/test/js/samples/inline-style-without-updates/expected.js b/test/js/samples/inline-style-without-updates/expected.js index fd101d1acc..375896f259 100644 --- a/test/js/samples/inline-style-without-updates/expected.js +++ b/test/js/samples/inline-style-without-updates/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/input-files/expected.js b/test/js/samples/input-files/expected.js index 256c7e5a5f..a190d6cf72 100644 --- a/test/js/samples/input-files/expected.js +++ b/test/js/samples/input-files/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/input-no-initial-value/expected.js b/test/js/samples/input-no-initial-value/expected.js index f3067156b5..85bc9dfcef 100644 --- a/test/js/samples/input-no-initial-value/expected.js +++ b/test/js/samples/input-no-initial-value/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -70,11 +71,7 @@ function instance($$self, $$props, $$invalidate) { $$invalidate("test", test); } - return { - test, - handleSubmit, - input_input_handler - }; + return { test, handleSubmit, input_input_handler }; } class Component extends SvelteComponent { diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js index 4b6212c4e7..2ea13df038 100644 --- a/test/js/samples/input-range/expected.js +++ b/test/js/samples/input-range/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js index 921c217197..eacdbece83 100644 --- a/test/js/samples/input-without-blowback-guard/expected.js +++ b/test/js/samples/input-without-blowback-guard/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, attr, diff --git a/test/js/samples/instrumentation-script-if-no-block/expected.js b/test/js/samples/instrumentation-script-if-no-block/expected.js index 6e9c04f161..4b0574b79d 100644 --- a/test/js/samples/instrumentation-script-if-no-block/expected.js +++ b/test/js/samples/instrumentation-script-if-no-block/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/instrumentation-script-x-equals-x/expected.js b/test/js/samples/instrumentation-script-x-equals-x/expected.js index c7652815d8..8a3fa9366a 100644 --- a/test/js/samples/instrumentation-script-x-equals-x/expected.js +++ b/test/js/samples/instrumentation-script-x-equals-x/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/instrumentation-template-if-no-block/expected.js b/test/js/samples/instrumentation-template-if-no-block/expected.js index aa815dfe00..e2d8c4466f 100644 --- a/test/js/samples/instrumentation-template-if-no-block/expected.js +++ b/test/js/samples/instrumentation-template-if-no-block/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/instrumentation-template-x-equals-x/expected.js b/test/js/samples/instrumentation-template-x-equals-x/expected.js index 5af948efb1..eefda55f31 100644 --- a/test/js/samples/instrumentation-template-x-equals-x/expected.js +++ b/test/js/samples/instrumentation-template-x-equals-x/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js index b067a07dfd..2b76a48522 100644 --- a/test/js/samples/legacy-input-type/expected.js +++ b/test/js/samples/legacy-input-type/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js index a48ac2e500..1d90e0849e 100644 --- a/test/js/samples/media-bindings/expected.js +++ b/test/js/samples/media-bindings/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, add_render_callback, diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js index be1ff282c3..2784fd17ac 100644 --- a/test/js/samples/non-imported-component/expected.js +++ b/test/js/samples/non-imported-component/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, create_component, diff --git a/test/js/samples/non-mutable-reference/expected.js b/test/js/samples/non-mutable-reference/expected.js index e22c773e9c..93f2145a2e 100644 --- a/test/js/samples/non-mutable-reference/expected.js +++ b/test/js/samples/non-mutable-reference/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, detach, diff --git a/test/js/samples/reactive-values-non-topologically-ordered/expected.js b/test/js/samples/reactive-values-non-topologically-ordered/expected.js index 69fd368ee8..3d1b6aaae3 100644 --- a/test/js/samples/reactive-values-non-topologically-ordered/expected.js +++ b/test/js/samples/reactive-values-non-topologically-ordered/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, init, safe_not_equal } from "svelte/internal"; function instance($$self, $$props, $$invalidate) { diff --git a/test/js/samples/reactive-values-non-writable-dependencies/expected.js b/test/js/samples/reactive-values-non-writable-dependencies/expected.js index 233e9ef835..393af95df0 100644 --- a/test/js/samples/reactive-values-non-writable-dependencies/expected.js +++ b/test/js/samples/reactive-values-non-writable-dependencies/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, init, safe_not_equal } from "svelte/internal"; function instance($$self, $$props, $$invalidate) { diff --git a/test/js/samples/select-dynamic-value/expected.js b/test/js/samples/select-dynamic-value/expected.js index 7232d01af4..da284d977a 100644 --- a/test/js/samples/select-dynamic-value/expected.js +++ b/test/js/samples/select-dynamic-value/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/setup-method/expected.js b/test/js/samples/setup-method/expected.js index e22398748e..5ee43a9f1f 100644 --- a/test/js/samples/setup-method/expected.js +++ b/test/js/samples/setup-method/expected.js @@ -1,4 +1,6 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, init, safe_not_equal } from "svelte/internal"; + const SOME_CONSTANT = 42; function foo(bar) { diff --git a/test/js/samples/src-attribute-check/_config.js b/test/js/samples/src-attribute-check/_config.js new file mode 100644 index 0000000000..84c0d733ef --- /dev/null +++ b/test/js/samples/src-attribute-check/_config.js @@ -0,0 +1,5 @@ +export default { + options: { + hydratable: true + } +}; \ No newline at end of file diff --git a/test/js/samples/src-attribute-check/expected.js b/test/js/samples/src-attribute-check/expected.js new file mode 100644 index 0000000000..8af33a962b --- /dev/null +++ b/test/js/samples/src-attribute-check/expected.js @@ -0,0 +1,85 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + attr, + claim_element, + claim_space, + detach, + element, + init, + insert, + noop, + safe_not_equal, + space +} from "svelte/internal"; + +function create_fragment(ctx) { + let img0; + let img0_src_value; + let t; + let img1; + let img1_src_value; + + return { + c() { + img0 = element("img"); + t = space(); + img1 = element("img"); + this.h(); + }, + l(nodes) { + img0 = claim_element(nodes, "IMG", { alt: true, src: true }); + t = claim_space(nodes); + img1 = claim_element(nodes, "IMG", { alt: true, src: true }); + this.h(); + }, + h() { + attr(img0, "alt", "potato"); + if (img0.src !== (img0_src_value = ctx.url)) attr(img0, "src", img0_src_value); + attr(img1, "alt", "potato"); + if (img1.src !== (img1_src_value = "" + (ctx.slug + ".jpg"))) attr(img1, "src", img1_src_value); + }, + m(target, anchor) { + insert(target, img0, anchor); + insert(target, t, anchor); + insert(target, img1, anchor); + }, + p(changed, ctx) { + if (changed.url && img0.src !== (img0_src_value = ctx.url)) { + attr(img0, "src", img0_src_value); + } + + if (changed.slug && img1.src !== (img1_src_value = "" + (ctx.slug + ".jpg"))) { + attr(img1, "src", img1_src_value); + } + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(img0); + if (detaching) detach(t); + if (detaching) detach(img1); + } + }; +} + +function instance($$self, $$props, $$invalidate) { + let { url } = $$props; + let { slug } = $$props; + + $$self.$set = $$props => { + if ("url" in $$props) $$invalidate("url", url = $$props.url); + if ("slug" in $$props) $$invalidate("slug", slug = $$props.slug); + }; + + return { url, slug }; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, { url: 0, slug: 0 }); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/src-attribute-check/input.svelte b/test/js/samples/src-attribute-check/input.svelte new file mode 100644 index 0000000000..9febd7e4ea --- /dev/null +++ b/test/js/samples/src-attribute-check/input.svelte @@ -0,0 +1,7 @@ + + +potato +potato \ No newline at end of file diff --git a/test/js/samples/ssr-no-oncreate-etc/expected.js b/test/js/samples/ssr-no-oncreate-etc/expected.js index 1157c77855..276587eeca 100644 --- a/test/js/samples/ssr-no-oncreate-etc/expected.js +++ b/test/js/samples/ssr-no-oncreate-etc/expected.js @@ -1,4 +1,6 @@ +/* generated by Svelte vX.Y.Z */ import { create_ssr_component } from "svelte/internal"; + import { onDestroy, onMount } from "svelte"; function preload(input) { diff --git a/test/js/samples/ssr-preserve-comments/expected.js b/test/js/samples/ssr-preserve-comments/expected.js index 872cc2bca0..1dc12710c0 100644 --- a/test/js/samples/ssr-preserve-comments/expected.js +++ b/test/js/samples/ssr-preserve-comments/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { create_ssr_component } from "svelte/internal"; const Component = create_ssr_component(($$result, $$props, $$bindings, $$slots) => { diff --git a/test/js/samples/svg-title/expected.js b/test/js/samples/svg-title/expected.js index 8c4fc36d73..cd7ae3b551 100644 --- a/test/js/samples/svg-title/expected.js +++ b/test/js/samples/svg-title/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/title/expected.js b/test/js/samples/title/expected.js index 0748cdcf2b..205f352950 100644 --- a/test/js/samples/title/expected.js +++ b/test/js/samples/title/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, init, noop, safe_not_equal } from "svelte/internal"; function create_fragment(ctx) { diff --git a/test/js/samples/transition-local/expected.js b/test/js/samples/transition-local/expected.js index a9ed7999f7..7fa88f4254 100644 --- a/test/js/samples/transition-local/expected.js +++ b/test/js/samples/transition-local/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, add_render_callback, @@ -47,6 +48,7 @@ function create_if_block(ctx) { }; } +// (9:1) {#if y} function create_if_block_1(ctx) { let div; let div_intro; diff --git a/test/js/samples/transition-repeated-outro/expected.js b/test/js/samples/transition-repeated-outro/expected.js index 001383a14e..c40818dc4e 100644 --- a/test/js/samples/transition-repeated-outro/expected.js +++ b/test/js/samples/transition-repeated-outro/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, check_outros, diff --git a/test/js/samples/unchanged-expression/expected.js b/test/js/samples/unchanged-expression/expected.js index 1dc7c6fd72..231960bb49 100644 --- a/test/js/samples/unchanged-expression/expected.js +++ b/test/js/samples/unchanged-expression/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/unreferenced-state-not-invalidated/expected.js b/test/js/samples/unreferenced-state-not-invalidated/expected.js index 9b53d50915..f0409c3cca 100644 --- a/test/js/samples/unreferenced-state-not-invalidated/expected.js +++ b/test/js/samples/unreferenced-state-not-invalidated/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js index 135dca5685..eeaba55ed0 100644 --- a/test/js/samples/use-elements-as-anchors/expected.js +++ b/test/js/samples/use-elements-as-anchors/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, append, @@ -28,6 +29,7 @@ function create_if_block_4(ctx) { }; } +// (16:1) {#if b} function create_if_block_3(ctx) { let p; @@ -45,6 +47,7 @@ function create_if_block_3(ctx) { }; } +// (20:1) {#if c} function create_if_block_2(ctx) { let p; @@ -62,6 +65,7 @@ function create_if_block_2(ctx) { }; } +// (26:1) {#if d} function create_if_block_1(ctx) { let p; @@ -79,6 +83,7 @@ function create_if_block_1(ctx) { }; } +// (33:0) {#if e} function create_if_block(ctx) { let p; diff --git a/test/js/samples/window-binding-online/expected.js b/test/js/samples/window-binding-online/expected.js index 92494fb753..d34e84330f 100644 --- a/test/js/samples/window-binding-online/expected.js +++ b/test/js/samples/window-binding-online/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, add_render_callback, diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js index 4cd784e2bf..85d894119b 100644 --- a/test/js/samples/window-binding-scroll/expected.js +++ b/test/js/samples/window-binding-scroll/expected.js @@ -1,3 +1,4 @@ +/* generated by Svelte vX.Y.Z */ import { SvelteComponent, add_render_callback, diff --git a/test/runtime/samples/await-then-blowback-reactive/Widget.svelte b/test/runtime/samples/await-then-blowback-reactive/Widget.svelte new file mode 100644 index 0000000000..cfd918558b --- /dev/null +++ b/test/runtime/samples/await-then-blowback-reactive/Widget.svelte @@ -0,0 +1,15 @@ + + + diff --git a/test/runtime/samples/await-then-blowback-reactive/_config.js b/test/runtime/samples/await-then-blowback-reactive/_config.js new file mode 100644 index 0000000000..7f094478ed --- /dev/null +++ b/test/runtime/samples/await-then-blowback-reactive/_config.js @@ -0,0 +1,19 @@ +export default { + async test({ assert, component, target }) { + assert.htmlEqual(target.innerHTML, 'Loading...'); + + await component.promise; + const span = target.querySelector('span'); + assert.equal(span.textContent, 'a'); + + const select = target.querySelector('select'); + const options = [...target.querySelectorAll('option')]; + + const change = new window.Event('change'); + + options[1].selected = true; + await select.dispatchEvent(change); + + assert.equal(span.textContent, 'b'); + } +}; diff --git a/test/runtime/samples/await-then-blowback-reactive/main.svelte b/test/runtime/samples/await-then-blowback-reactive/main.svelte new file mode 100644 index 0000000000..ee212ef6b5 --- /dev/null +++ b/test/runtime/samples/await-then-blowback-reactive/main.svelte @@ -0,0 +1,12 @@ + + +{#await promise} + Loading... +{:then options} + + {value} +{/await}