diff --git a/package-lock.json b/package-lock.json index 9771d83536..059554afd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.0.0-beta.15", + "version": "3.0.0-beta.20", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -61,9 +61,9 @@ "dev": true }, "acorn": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.5.tgz", - "integrity": "sha512-i33Zgp3XWtmZBMNvCr4azvOFeWVw1Rk6p3hfi3LUDvIFraOMywb1kAtrbi+med14m4Xfpqm3zRZMT+c0FNE7kg==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz", + "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==", "dev": true }, "acorn-dynamic-import": { @@ -139,7 +139,7 @@ }, "ansi-escapes": { "version": "3.1.0", - "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz", "integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==", "dev": true }, @@ -199,7 +199,7 @@ }, "array-equal": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=", "dev": true }, @@ -627,7 +627,7 @@ }, "commander": { "version": "2.15.1", - "resolved": "http://registry.npmjs.org/commander/-/commander-2.15.1.tgz", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz", "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", "dev": true }, @@ -878,7 +878,7 @@ "dependencies": { "domelementtype": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz", "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=", "dev": true } @@ -1131,7 +1131,7 @@ }, "doctrine": { "version": "1.5.0", - "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", "dev": true, "requires": { @@ -1826,7 +1826,7 @@ }, "is-builtin-module": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", "dev": true, "requires": { @@ -2112,7 +2112,7 @@ }, "load-json-file": { "version": "2.0.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "dev": true, "requires": { @@ -2271,7 +2271,7 @@ }, "minimist": { "version": "0.0.8", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true }, @@ -2298,7 +2298,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { @@ -2608,7 +2608,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, @@ -2692,7 +2692,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true }, @@ -2737,7 +2737,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -3440,7 +3440,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { @@ -4024,7 +4024,7 @@ }, "through": { "version": "2.3.8", - "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", "dev": true }, diff --git a/package.json b/package.json index 4b85fdfdb9..72e3785315 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.0.0-beta.15", + "version": "3.0.0-beta.20", "description": "The magical disappearing UI framework", "module": "index.mjs", "main": "index", @@ -51,7 +51,7 @@ "devDependencies": { "@types/mocha": "^5.2.0", "@types/node": "^10.5.5", - "acorn": "^6.0.5", + "acorn": "^6.1.1", "acorn-dynamic-import": "^4.0.0", "agadoo": "^1.0.1", "c8": "^3.4.0", diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte index 2cb0fd1eb7..9918cf40e8 100644 --- a/site/content/examples/08-motion/01-spring/App.svelte +++ b/site/content/examples/08-motion/01-spring/App.svelte @@ -10,7 +10,7 @@ diff --git a/site/package-lock.json b/site/package-lock.json index bfcf6d367a..3a1fabf102 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -1941,7 +1941,7 @@ "dev": true }, "eslint-plugin-svelte3": { - "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#5fc4861d4b191649b0badf4f9a4c2470f08b237e", + "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#a9e7c167484ff7ea5da775ae21b133e0ab5ddc85", "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*", "dev": true }, diff --git a/site/src/components/Repl/Input/ComponentSelector.svelte b/site/src/components/Repl/Input/ComponentSelector.svelte index 7933306b0a..6c30c34eba 100644 --- a/site/src/components/Repl/Input/ComponentSelector.svelte +++ b/site/src/components/Repl/Input/ComponentSelector.svelte @@ -5,7 +5,7 @@ export let handle_select; - const { components, selected, request_focus } = getContext('REPL'); + const { components, selected, request_focus, rebundle } = getContext('REPL'); let editing = null; @@ -35,6 +35,8 @@ // focus the editor, but wait a beat (so key events aren't misdirected) setTimeout(request_focus); + + rebundle(); } function remove(component) { diff --git a/site/src/components/Repl/Output/CompilerOptions.svelte b/site/src/components/Repl/Output/CompilerOptions.svelte index 278f7aa275..75f7301aa7 100644 --- a/site/src/components/Repl/Output/CompilerOptions.svelte +++ b/site/src/components/Repl/Output/CompilerOptions.svelte @@ -1,5 +1,7 @@ \`;`} + ${css.code && `this.shadowRoot.innerHTML = \`\`;`} - @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}); + @init(this, { target: this.shadowRoot }, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} @@ -466,12 +458,12 @@ export default function dom( } else { const superclass = options.dev ? 'SvelteComponentDev' : 'SvelteComponent'; - builder.addBlock(deindent` + builder.add_block(deindent` class ${name} extends @${superclass} { constructor(options) { super(${options.dev && `options`}); ${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`} - @init(this, options, ${definition}, create_fragment, ${not_equal}); + @init(this, options, ${definition}, create_fragment, ${not_equal}, ${prop_names}); ${dev_props_check} } diff --git a/src/compile/render-dom/wrappers/AwaitBlock.ts b/src/compile/render-dom/wrappers/AwaitBlock.ts index e896510fa8..c7af29a073 100644 --- a/src/compile/render-dom/wrappers/AwaitBlock.ts +++ b/src/compile/render-dom/wrappers/AwaitBlock.ts @@ -2,8 +2,8 @@ import Wrapper from './shared/Wrapper'; import Renderer from '../Renderer'; import Block from '../Block'; import AwaitBlock from '../../nodes/AwaitBlock'; -import createDebuggingComment from '../../../utils/createDebuggingComment'; -import deindent from '../../../utils/deindent'; +import create_debugging_comment from './shared/create_debugging_comment'; +import deindent from '../../utils/deindent'; import FragmentWrapper from './Fragment'; import PendingBlock from '../../nodes/PendingBlock'; import ThenBlock from '../../nodes/ThenBlock'; @@ -13,7 +13,7 @@ class AwaitBlockBranch extends Wrapper { node: PendingBlock | ThenBlock | CatchBlock; block: Block; fragment: FragmentWrapper; - isDynamic: boolean; + is_dynamic: boolean; var = null; @@ -23,14 +23,14 @@ class AwaitBlockBranch extends Wrapper { block: Block, parent: Wrapper, node: AwaitBlock, - stripWhitespace: boolean, - nextSibling: Wrapper + strip_whitespace: boolean, + next_sibling: Wrapper ) { super(renderer, block, parent, node); this.block = block.child({ - comment: createDebuggingComment(node, this.renderer.component), - name: this.renderer.component.getUniqueName(`create_${status}_block`) + comment: create_debugging_comment(node, this.renderer.component), + name: this.renderer.component.get_unique_name(`create_${status}_block`) }); this.fragment = new FragmentWrapper( @@ -38,11 +38,11 @@ class AwaitBlockBranch extends Wrapper { this.block, this.node.children, parent, - stripWhitespace, - nextSibling + strip_whitespace, + next_sibling ); - this.isDynamic = this.block.dependencies.size > 0; + this.is_dynamic = this.block.dependencies.size > 0; } } @@ -60,18 +60,18 @@ export default class AwaitBlockWrapper extends Wrapper { block: Block, parent: Wrapper, node: AwaitBlock, - stripWhitespace: boolean, - nextSibling: Wrapper + strip_whitespace: boolean, + next_sibling: Wrapper ) { super(renderer, block, parent, node); - this.cannotUseInnerHTML(); + this.cannot_use_innerhtml(); - block.addDependencies(this.node.expression.dependencies); + block.add_dependencies(this.node.expression.dependencies); - let isDynamic = false; - let hasIntros = false; - let hasOutros = false; + let is_dynamic = false; + let has_intros = false; + let has_outros = false; ['pending', 'then', 'catch'].forEach(status => { const child = this.node[status]; @@ -82,59 +82,59 @@ export default class AwaitBlockWrapper extends Wrapper { block, this, child, - stripWhitespace, - nextSibling + strip_whitespace, + next_sibling ); renderer.blocks.push(branch.block); - if (branch.isDynamic) { - isDynamic = true; + if (branch.is_dynamic) { + is_dynamic = true; // TODO should blocks update their own parents? - block.addDependencies(branch.block.dependencies); + block.add_dependencies(branch.block.dependencies); } - if (branch.block.hasIntros) hasIntros = true; - if (branch.block.hasOutros) hasOutros = true; + if (branch.block.has_intros) has_intros = true; + if (branch.block.has_outros) has_outros = true; this[status] = branch; }); - this.pending.block.hasUpdateMethod = isDynamic; - this.then.block.hasUpdateMethod = isDynamic; - this.catch.block.hasUpdateMethod = isDynamic; + this.pending.block.has_update_method = is_dynamic; + this.then.block.has_update_method = is_dynamic; + this.catch.block.has_update_method = is_dynamic; - this.pending.block.hasIntroMethod = hasIntros; - this.then.block.hasIntroMethod = hasIntros; - this.catch.block.hasIntroMethod = hasIntros; + this.pending.block.has_intro_method = has_intros; + this.then.block.has_intro_method = has_intros; + this.catch.block.has_intro_method = has_intros; - this.pending.block.hasOutroMethod = hasOutros; - this.then.block.hasOutroMethod = hasOutros; - this.catch.block.hasOutroMethod = hasOutros; + this.pending.block.has_outro_method = has_outros; + this.then.block.has_outro_method = has_outros; + this.catch.block.has_outro_method = has_outros; - if (hasOutros) { - block.addOutro(); + if (has_outros) { + block.add_outro(); } } render( block: Block, - parentNode: string, - parentNodes: string + parent_node: string, + parent_nodes: string ) { - const anchor = this.getOrCreateAnchor(block, parentNode, parentNodes); - const updateMountNode = this.getUpdateMountNode(anchor); + const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes); + const update_mount_node = this.get_update_mount_node(anchor); const snippet = this.node.expression.render(block); - const info = block.getUniqueName(`info`); - const promise = block.getUniqueName(`promise`); + const info = block.get_unique_name(`info`); + const promise = block.get_unique_name(`promise`); - block.addVariable(promise); + block.add_variable(promise); - block.maintainContext = true; + block.maintain_context = true; - const infoProps = [ + const info_props = [ 'ctx', 'current: null', this.pending.block.name && `pending: ${this.pending.block.name}`, @@ -142,42 +142,42 @@ export default class AwaitBlockWrapper extends Wrapper { this.catch.block.name && `catch: ${this.catch.block.name}`, this.then.block.name && `value: '${this.node.value}'`, this.catch.block.name && `error: '${this.node.error}'`, - this.pending.block.hasOutroMethod && `blocks: Array(3)` + this.pending.block.has_outro_method && `blocks: Array(3)` ].filter(Boolean); - block.builders.init.addBlock(deindent` + block.builders.init.add_block(deindent` let ${info} = { - ${infoProps.join(',\n')} + ${info_props.join(',\n')} }; `); - block.builders.init.addBlock(deindent` - @handlePromise(${promise} = ${snippet}, ${info}); + block.builders.init.add_block(deindent` + @handle_promise(${promise} = ${snippet}, ${info}); `); - block.builders.create.addBlock(deindent` + block.builders.create.add_block(deindent` ${info}.block.c(); `); - if (parentNodes && this.renderer.options.hydratable) { - block.builders.claim.addBlock(deindent` - ${info}.block.l(${parentNodes}); + if (parent_nodes && this.renderer.options.hydratable) { + block.builders.claim.add_block(deindent` + ${info}.block.l(${parent_nodes}); `); } - const initialMountNode = parentNode || '#target'; - const anchorNode = parentNode ? 'null' : 'anchor'; + const initial_mount_node = parent_node || '#target'; + const anchor_node = parent_node ? 'null' : 'anchor'; - const hasTransitions = this.pending.block.hasIntroMethod || this.pending.block.hasOutroMethod; + const has_transitions = this.pending.block.has_intro_method || this.pending.block.has_outro_method; - block.builders.mount.addBlock(deindent` - ${info}.block.m(${initialMountNode}, ${info}.anchor = ${anchorNode}); - ${info}.mount = () => ${updateMountNode}; + block.builders.mount.add_block(deindent` + ${info}.block.m(${initial_mount_node}, ${info}.anchor = ${anchor_node}); + ${info}.mount = () => ${update_mount_node}; ${info}.anchor = ${anchor}; `); - if (hasTransitions) { - block.builders.intro.addLine(`${info}.block.i();`); + if (has_transitions) { + block.builders.intro.add_line(`${info}.block.i();`); } const conditions = []; @@ -191,15 +191,15 @@ export default class AwaitBlockWrapper extends Wrapper { conditions.push( `${promise} !== (${promise} = ${snippet})`, - `@handlePromise(${promise}, ${info})` + `@handle_promise(${promise}, ${info})` ); - block.builders.update.addLine( + block.builders.update.add_line( `${info}.ctx = ctx;` ); - if (this.pending.block.hasUpdateMethod) { - block.builders.update.addBlock(deindent` + if (this.pending.block.has_update_method) { + block.builders.update.add_block(deindent` if (${conditions.join(' && ')}) { // nothing } else { @@ -207,13 +207,13 @@ export default class AwaitBlockWrapper extends Wrapper { } `); } else { - block.builders.update.addBlock(deindent` + block.builders.update.add_block(deindent` ${conditions.join(' && ')} `); } - if (this.pending.block.hasOutroMethod) { - block.builders.outro.addBlock(deindent` + if (this.pending.block.has_outro_method) { + block.builders.outro.add_block(deindent` for (let #i = 0; #i < 3; #i += 1) { const block = ${info}.blocks[#i]; if (block) block.o(); @@ -221,8 +221,8 @@ export default class AwaitBlockWrapper extends Wrapper { `); } - block.builders.destroy.addBlock(deindent` - ${info}.block.d(${parentNode ? '' : 'detach'}); + block.builders.destroy.add_block(deindent` + ${info}.block.d(${parent_node ? '' : 'detaching'}); ${info} = null; `); diff --git a/src/compile/render-dom/wrappers/Body.ts b/src/compile/render-dom/wrappers/Body.ts index 678c790053..ca6c9df43f 100644 --- a/src/compile/render-dom/wrappers/Body.ts +++ b/src/compile/render-dom/wrappers/Body.ts @@ -1,20 +1,20 @@ import Block from '../Block'; import Wrapper from './shared/Wrapper'; -import deindent from '../../../utils/deindent'; +import deindent from '../../utils/deindent'; import Body from '../../nodes/Body'; export default class BodyWrapper extends Wrapper { node: Body; - render(block: Block, parentNode: string, parentNodes: string) { + render(block: Block, parent_node: string, parent_nodes: string) { this.node.handlers.forEach(handler => { const snippet = handler.render(block); - block.builders.init.addBlock(deindent` + block.builders.init.add_block(deindent` document.body.addEventListener("${handler.name}", ${snippet}); `); - block.builders.destroy.addBlock(deindent` + block.builders.destroy.add_block(deindent` document.body.removeEventListener("${handler.name}", ${snippet}); `); }); diff --git a/src/compile/render-dom/wrappers/DebugTag.ts b/src/compile/render-dom/wrappers/DebugTag.ts index 630735d110..06fef90a62 100644 --- a/src/compile/render-dom/wrappers/DebugTag.ts +++ b/src/compile/render-dom/wrappers/DebugTag.ts @@ -2,8 +2,8 @@ import Renderer from '../Renderer'; import Wrapper from './shared/Wrapper'; import Block from '../Block'; import DebugTag from '../../nodes/DebugTag'; -import addToSet from '../../../utils/addToSet'; -import deindent from '../../../utils/deindent'; +import add_to_set from '../../utils/add_to_set'; +import deindent from '../../utils/deindent'; export default class DebugTagWrapper extends Wrapper { node: DebugTag; @@ -13,13 +13,13 @@ export default class DebugTagWrapper extends Wrapper { block: Block, parent: Wrapper, node: DebugTag, - stripWhitespace: boolean, - nextSibling: Wrapper + strip_whitespace: boolean, + next_sibling: Wrapper ) { super(renderer, block, parent, node); } - render(block: Block, parentNode: string, parentNodes: string) { + render(block: Block, parent_node: string, parent_nodes: string) { const { renderer } = this; const { component } = renderer; @@ -34,8 +34,8 @@ export default class DebugTagWrapper extends Wrapper { }); const statement = `[✂${this.node.start + 1}-${this.node.start + 7}✂];`; - block.builders.create.addLine(statement); - block.builders.update.addLine(statement); + block.builders.create.add_line(statement); + block.builders.update.add_line(statement); } else { const { code } = component; code.overwrite(this.node.start + 1, this.node.start + 7, 'log', { @@ -45,14 +45,14 @@ export default class DebugTagWrapper extends Wrapper { const dependencies = new Set(); this.node.expressions.forEach(expression => { - addToSet(dependencies, expression.dependencies); + add_to_set(dependencies, expression.dependencies); }); const condition = Array.from(dependencies).map(d => `changed.${d}`).join(' || '); const identifiers = this.node.expressions.map(e => e.node.name).join(', '); - block.builders.update.addBlock(deindent` + block.builders.update.add_block(deindent` if (${condition}) { const { ${identifiers} } = ctx; console.${log}({ ${identifiers} }); @@ -60,7 +60,7 @@ export default class DebugTagWrapper extends Wrapper { } `); - block.builders.create.addBlock(deindent` + block.builders.create.add_block(deindent` { const { ${identifiers} } = ctx; console.${log}({ ${identifiers} }); diff --git a/src/compile/render-dom/wrappers/EachBlock.ts b/src/compile/render-dom/wrappers/EachBlock.ts index 36b493645c..4c2504e8c3 100644 --- a/src/compile/render-dom/wrappers/EachBlock.ts +++ b/src/compile/render-dom/wrappers/EachBlock.ts @@ -1,17 +1,17 @@ import Renderer from '../Renderer'; import Block from '../Block'; import Wrapper from './shared/Wrapper'; -import createDebuggingComment from '../../../utils/createDebuggingComment'; +import create_debugging_comment from './shared/create_debugging_comment'; import EachBlock from '../../nodes/EachBlock'; import FragmentWrapper from './Fragment'; -import deindent from '../../../utils/deindent'; +import deindent from '../../utils/deindent'; import ElseBlock from '../../nodes/ElseBlock'; class ElseBlockWrapper extends Wrapper { node: ElseBlock; block: Block; fragment: FragmentWrapper; - isDynamic: boolean; + is_dynamic: boolean; var = null; @@ -20,14 +20,14 @@ class ElseBlockWrapper extends Wrapper { block: Block, parent: Wrapper, node: ElseBlock, - stripWhitespace: boolean, - nextSibling: Wrapper + strip_whitespace: boolean, + next_sibling: Wrapper ) { super(renderer, block, parent, node); this.block = block.child({ - comment: createDebuggingComment(node, this.renderer.component), - name: this.renderer.component.getUniqueName(`create_else_block`) + comment: create_debugging_comment(node, this.renderer.component), + name: this.renderer.component.get_unique_name(`create_else_block`) }); this.fragment = new FragmentWrapper( @@ -35,11 +35,11 @@ class ElseBlockWrapper extends Wrapper { this.block, this.node.children, parent, - stripWhitespace, - nextSibling + strip_whitespace, + next_sibling ); - this.isDynamic = this.block.dependencies.size > 0; + this.is_dynamic = this.block.dependencies.size > 0; } } @@ -60,8 +60,8 @@ export default class EachBlockWrapper extends Wrapper { length: string; } - contextProps: string[]; - indexName: string; + context_props: string[]; + index_name: string; var = 'each'; @@ -70,27 +70,27 @@ export default class EachBlockWrapper extends Wrapper { block: Block, parent: Wrapper, node: EachBlock, - stripWhitespace: boolean, - nextSibling: Wrapper + strip_whitespace: boolean, + next_sibling: Wrapper ) { super(renderer, block, parent, node); - this.cannotUseInnerHTML(); + this.cannot_use_innerhtml(); const { dependencies } = node.expression; - block.addDependencies(dependencies); + block.add_dependencies(dependencies); this.block = block.child({ - comment: createDebuggingComment(this.node, this.renderer.component), - name: renderer.component.getUniqueName('create_each_block'), + comment: create_debugging_comment(this.node, this.renderer.component), + name: renderer.component.get_unique_name('create_each_block'), key: node.key as string, bindings: new Map(block.bindings) }); // TODO this seems messy - this.block.hasAnimation = this.node.hasAnimation; + this.block.has_animation = this.node.has_animation; - this.indexName = this.node.index || renderer.component.getUniqueName(`${this.node.context}_index`); + this.index_name = this.node.index || renderer.component.get_unique_name(`${this.node.context}_index`); const fixed_length = node.expression.node.type === 'ArrayExpression' ? node.expression.node.elements.length @@ -102,13 +102,13 @@ export default class EachBlockWrapper extends Wrapper { while (renderer.component.source[c] !== 'e') c += 1; renderer.component.code.overwrite(c, c + 4, 'length'); - const each_block_value = renderer.component.getUniqueName(`${this.var}_value`); - const iterations = block.getUniqueName(`${this.var}_blocks`); + const each_block_value = renderer.component.get_unique_name(`${this.var}_value`); + const iterations = block.get_unique_name(`${this.var}_blocks`); this.vars = { create_each_block: this.block.name, each_block_value, - get_each_context: renderer.component.getUniqueName(`get_${this.var}_context`), + get_each_context: renderer.component.get_unique_name(`get_${this.var}_context`), iterations, length: `[✂${c}-${c+4}✂]`, @@ -124,18 +124,18 @@ export default class EachBlockWrapper extends Wrapper { node.contexts.forEach(prop => { this.block.bindings.set(prop.key.name, { object: this.vars.each_block_value, - property: this.indexName, - snippet: `${this.vars.each_block_value}[${this.indexName}]${prop.tail}` + property: this.index_name, + snippet: `${this.vars.each_block_value}[${this.index_name}]${prop.tail}` }); }); if (this.node.index) { - this.block.getUniqueName(this.node.index); // this prevents name collisions (#1254) + this.block.get_unique_name(this.node.index); // this prevents name collisions (#1254) } renderer.blocks.push(this.block); - this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, stripWhitespace, nextSibling); + this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, strip_whitespace, next_sibling); if (this.node.else) { this.else = new ElseBlockWrapper( @@ -143,112 +143,112 @@ export default class EachBlockWrapper extends Wrapper { block, this, this.node.else, - stripWhitespace, - nextSibling + strip_whitespace, + next_sibling ); renderer.blocks.push(this.else.block); - if (this.else.isDynamic) { - this.block.addDependencies(this.else.block.dependencies); + if (this.else.is_dynamic) { + this.block.add_dependencies(this.else.block.dependencies); } } - block.addDependencies(this.block.dependencies); + block.add_dependencies(this.block.dependencies); - if (this.block.hasOutros || (this.else && this.else.block.hasOutros)) { - block.addOutro(); + if (this.block.has_outros || (this.else && this.else.block.has_outros)) { + block.add_outro(); } } - render(block: Block, parentNode: string, parentNodes: string) { + render(block: Block, parent_node: string, parent_nodes: string) { if (this.fragment.nodes.length === 0) return; const { renderer } = this; const { component } = renderer; - const needsAnchor = this.next - ? !this.next.isDomNode() : - !parentNode || !this.parent.isDomNode(); + const needs_anchor = this.next + ? !this.next.is_dom_node() : + !parent_node || !this.parent.is_dom_node(); - this.vars.anchor = needsAnchor - ? block.getUniqueName(`${this.var}_anchor`) + this.vars.anchor = needs_anchor + ? block.get_unique_name(`${this.var}_anchor`) : (this.next && this.next.var) || 'null'; - this.contextProps = this.node.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`); + this.context_props = this.node.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`); - if (this.node.has_binding) this.contextProps.push(`child_ctx.${this.vars.each_block_value} = list;`); - if (this.node.has_binding || this.node.index) this.contextProps.push(`child_ctx.${this.indexName} = i;`); + if (this.node.has_binding) this.context_props.push(`child_ctx.${this.vars.each_block_value} = list;`); + if (this.node.has_binding || this.node.index) this.context_props.push(`child_ctx.${this.index_name} = i;`); const snippet = this.node.expression.render(block); - block.builders.init.addLine(`var ${this.vars.each_block_value} = ${snippet};`); + block.builders.init.add_line(`var ${this.vars.each_block_value} = ${snippet};`); renderer.blocks.push(deindent` function ${this.vars.get_each_context}(ctx, list, i) { const child_ctx = Object.create(ctx); - ${this.contextProps} + ${this.context_props} return child_ctx; } `); if (this.node.key) { - this.renderKeyed(block, parentNode, parentNodes, snippet); + this.render_keyed(block, parent_node, parent_nodes, snippet); } else { - this.renderUnkeyed(block, parentNode, parentNodes, snippet); + this.render_unkeyed(block, parent_node, parent_nodes, snippet); } - if (this.block.hasIntroMethod || this.block.hasOutroMethod) { - block.builders.intro.addBlock(deindent` + if (this.block.has_intro_method || this.block.has_outro_method) { + block.builders.intro.add_block(deindent` for (var #i = 0; #i < ${this.vars.data_length}; #i += 1) ${this.vars.iterations}[#i].i(); `); } - if (needsAnchor) { - block.addElement( + if (needs_anchor) { + block.add_element( this.vars.anchor, - `@createComment()`, - parentNodes && `@createComment()`, - parentNode + `@comment()`, + parent_nodes && `@comment()`, + parent_node ); } if (this.else) { - const each_block_else = component.getUniqueName(`${this.var}_else`); + const each_block_else = component.get_unique_name(`${this.var}_else`); - block.builders.init.addLine(`var ${each_block_else} = null;`); + block.builders.init.add_line(`var ${each_block_else} = null;`); // TODO neaten this up... will end up with an empty line in the block - block.builders.init.addBlock(deindent` + block.builders.init.add_block(deindent` if (!${this.vars.data_length}) { ${each_block_else} = ${this.else.block.name}(ctx); ${each_block_else}.c(); } `); - block.builders.mount.addBlock(deindent` + block.builders.mount.add_block(deindent` if (${each_block_else}) { - ${each_block_else}.m(${parentNode || '#target'}, null); + ${each_block_else}.m(${parent_node || '#target'}, null); } `); - const initialMountNode = parentNode || `${this.vars.anchor}.parentNode`; + const initial_mount_node = parent_node || `${this.vars.anchor}.parentNode`; - if (this.else.block.hasUpdateMethod) { - block.builders.update.addBlock(deindent` + if (this.else.block.has_update_method) { + block.builders.update.add_block(deindent` if (!${this.vars.data_length} && ${each_block_else}) { ${each_block_else}.p(changed, ctx); } else if (!${this.vars.data_length}) { ${each_block_else} = ${this.else.block.name}(ctx); ${each_block_else}.c(); - ${each_block_else}.m(${initialMountNode}, ${this.vars.anchor}); + ${each_block_else}.m(${initial_mount_node}, ${this.vars.anchor}); } else if (${each_block_else}) { ${each_block_else}.d(1); ${each_block_else} = null; } `); } else { - block.builders.update.addBlock(deindent` + block.builders.update.add_block(deindent` if (${this.vars.data_length}) { if (${each_block_else}) { ${each_block_else}.d(1); @@ -257,13 +257,13 @@ export default class EachBlockWrapper extends Wrapper { } else if (!${each_block_else}) { ${each_block_else} = ${this.else.block.name}(ctx); ${each_block_else}.c(); - ${each_block_else}.m(${initialMountNode}, ${this.vars.anchor}); + ${each_block_else}.m(${initial_mount_node}, ${this.vars.anchor}); } `); } - block.builders.destroy.addBlock(deindent` - if (${each_block_else}) ${each_block_else}.d(${parentNode ? '' : 'detach'}); + block.builders.destroy.add_block(deindent` + if (${each_block_else}) ${each_block_else}.d(${parent_node ? '' : 'detaching'}); `); } @@ -274,10 +274,10 @@ export default class EachBlockWrapper extends Wrapper { } } - renderKeyed( + render_keyed( block: Block, - parentNode: string, - parentNodes: string, + parent_node: string, + parent_nodes: string, snippet: string ) { const { @@ -288,25 +288,25 @@ export default class EachBlockWrapper extends Wrapper { view_length } = this.vars; - const get_key = block.getUniqueName('get_key'); - const lookup = block.getUniqueName(`${this.var}_lookup`); + const get_key = block.get_unique_name('get_key'); + const lookup = block.get_unique_name(`${this.var}_lookup`); - block.addVariable(iterations, '[]'); - block.addVariable(lookup, `@blankObject()`); + block.add_variable(iterations, '[]'); + block.add_variable(lookup, `@blank_object()`); - if (this.fragment.nodes[0].isDomNode()) { + if (this.fragment.nodes[0].is_dom_node()) { this.block.first = this.fragment.nodes[0].var; } else { - this.block.first = this.block.getUniqueName('first'); - this.block.addElement( + this.block.first = this.block.get_unique_name('first'); + this.block.add_element( this.block.first, - `@createComment()`, - parentNodes && `@createComment()`, + `@comment()`, + parent_nodes && `@comment()`, null ); } - block.builders.init.addBlock(deindent` + block.builders.init.add_block(deindent` const ${get_key} = ctx => ${this.node.key.render()}; for (var #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) { @@ -316,58 +316,57 @@ export default class EachBlockWrapper extends Wrapper { } `); - const initialMountNode = parentNode || '#target'; - const updateMountNode = this.getUpdateMountNode(anchor); - const anchorNode = parentNode ? 'null' : 'anchor'; + const initial_mount_node = parent_node || '#target'; + const update_mount_node = this.get_update_mount_node(anchor); + const anchor_node = parent_node ? 'null' : 'anchor'; - block.builders.create.addBlock(deindent` + block.builders.create.add_block(deindent` for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].c(); `); - if (parentNodes && this.renderer.options.hydratable) { - block.builders.claim.addBlock(deindent` - for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].l(${parentNodes}); + if (parent_nodes && this.renderer.options.hydratable) { + block.builders.claim.add_block(deindent` + for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].l(${parent_nodes}); `); } - block.builders.mount.addBlock(deindent` - for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].m(${initialMountNode}, ${anchorNode}); + block.builders.mount.add_block(deindent` + for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].m(${initial_mount_node}, ${anchor_node}); `); - const dynamic = this.block.hasUpdateMethod; + const dynamic = this.block.has_update_method; - const rects = block.getUniqueName('rects'); - const destroy = this.node.hasAnimation - ? `@fixAndOutroAndDestroyBlock` - : this.block.hasOutros - ? `@outroAndDestroyBlock` - : `@destroyBlock`; + const destroy = this.node.has_animation + ? `@fix_and_outro_and_destroy_block` + : this.block.has_outros + ? `@outro_and_destroy_block` + : `@destroy_block`; - block.builders.update.addBlock(deindent` + block.builders.update.add_block(deindent` const ${this.vars.each_block_value} = ${snippet}; - ${this.block.hasOutros && `@group_outros();`} - ${this.node.hasAnimation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`} - ${iterations} = @updateKeyedEach(${iterations}, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${updateMountNode}, ${destroy}, ${create_each_block}, ${anchor}, ${this.vars.get_each_context}); - ${this.node.hasAnimation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`} - ${this.block.hasOutros && `@check_outros();`} + ${this.block.has_outros && `@group_outros();`} + ${this.node.has_animation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`} + ${iterations} = @update_keyed_each(${iterations}, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${update_mount_node}, ${destroy}, ${create_each_block}, ${anchor}, ${this.vars.get_each_context}); + ${this.node.has_animation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`} + ${this.block.has_outros && `@check_outros();`} `); - if (this.block.hasOutros) { - block.builders.outro.addBlock(deindent` + if (this.block.has_outros) { + block.builders.outro.add_block(deindent` for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].o(); `); } - block.builders.destroy.addBlock(deindent` - for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].d(${parentNode ? '' : 'detach'}); + block.builders.destroy.add_block(deindent` + for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].d(${parent_node ? '' : 'detaching'}); `); } - renderUnkeyed( + render_unkeyed( block: Block, - parentNode: string, - parentNodes: string, + parent_node: string, + parent_nodes: string, snippet: string ) { const { @@ -380,7 +379,7 @@ export default class EachBlockWrapper extends Wrapper { anchor } = this.vars; - block.builders.init.addBlock(deindent` + block.builders.init.add_block(deindent` var ${iterations} = []; for (var #i = 0; #i < ${data_length}; #i += 1) { @@ -388,44 +387,44 @@ export default class EachBlockWrapper extends Wrapper { } `); - const initialMountNode = parentNode || '#target'; - const updateMountNode = this.getUpdateMountNode(anchor); - const anchorNode = parentNode ? 'null' : 'anchor'; + const initial_mount_node = parent_node || '#target'; + const update_mount_node = this.get_update_mount_node(anchor); + const anchor_node = parent_node ? 'null' : 'anchor'; - block.builders.create.addBlock(deindent` + block.builders.create.add_block(deindent` for (var #i = 0; #i < ${view_length}; #i += 1) { ${iterations}[#i].c(); } `); - if (parentNodes && this.renderer.options.hydratable) { - block.builders.claim.addBlock(deindent` + if (parent_nodes && this.renderer.options.hydratable) { + block.builders.claim.add_block(deindent` for (var #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].l(${parentNodes}); + ${iterations}[#i].l(${parent_nodes}); } `); } - block.builders.mount.addBlock(deindent` + block.builders.mount.add_block(deindent` for (var #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].m(${initialMountNode}, ${anchorNode}); + ${iterations}[#i].m(${initial_mount_node}, ${anchor_node}); } `); - const allDependencies = new Set(this.block.dependencies); + const all_dependencies = new Set(this.block.dependencies); const { dependencies } = this.node.expression; dependencies.forEach((dependency: string) => { - allDependencies.add(dependency); + all_dependencies.add(dependency); }); - const outroBlock = this.block.hasOutros && block.getUniqueName('outroBlock') - if (outroBlock) { - block.builders.init.addBlock(deindent` - function ${outroBlock}(i, detach, local) { + const outro_block = this.block.has_outros && block.get_unique_name('outro_block') + if (outro_block) { + block.builders.init.add_block(deindent` + function ${outro_block}(i, detaching, local) { if (${iterations}[i]) { - if (detach) { + if (detaching) { @on_outro(() => { - ${iterations}[i].d(detach); + ${iterations}[i].d(detaching); ${iterations}[i] = null; }); } @@ -436,14 +435,14 @@ export default class EachBlockWrapper extends Wrapper { `); } - const condition = Array.from(allDependencies) + const condition = Array.from(all_dependencies) .map(dependency => `changed.${dependency}`) .join(' || '); - const has_transitions = !!(this.block.hasIntroMethod || this.block.hasOutroMethod); + const has_transitions = !!(this.block.has_intro_method || this.block.has_outro_method); if (condition !== '') { - const forLoopBody = this.block.hasUpdateMethod + const for_loop_body = this.block.has_update_method ? deindent` if (${iterations}[#i]) { ${iterations}[#i].p(changed, child_ctx); @@ -452,29 +451,29 @@ export default class EachBlockWrapper extends Wrapper { ${iterations}[#i] = ${create_each_block}(child_ctx); ${iterations}[#i].c(); ${has_transitions && `${iterations}[#i].i(1);`} - ${iterations}[#i].m(${updateMountNode}, ${anchor}); + ${iterations}[#i].m(${update_mount_node}, ${anchor}); } ` : deindent` ${iterations}[#i] = ${create_each_block}(child_ctx); ${iterations}[#i].c(); ${has_transitions && `${iterations}[#i].i(1);`} - ${iterations}[#i].m(${updateMountNode}, ${anchor}); + ${iterations}[#i].m(${update_mount_node}, ${anchor}); `; - const start = this.block.hasUpdateMethod ? '0' : `${view_length}`; + const start = this.block.has_update_method ? '0' : `${view_length}`; let remove_old_blocks; - if (this.block.hasOutros) { + if (this.block.has_outros) { remove_old_blocks = deindent` @group_outros(); - for (; #i < ${view_length}; #i += 1) ${outroBlock}(#i, 1, 1); + for (; #i < ${view_length}; #i += 1) ${outro_block}(#i, 1, 1); @check_outros(); `; } else { remove_old_blocks = deindent` - for (${this.block.hasUpdateMethod ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${view_length}; #i += 1) { + for (${this.block.has_update_method ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${view_length}; #i += 1) { ${iterations}[#i].d(1); } ${!fixed_length && `${view_length} = ${this.vars.each_block_value}.${length};`} @@ -487,26 +486,26 @@ export default class EachBlockWrapper extends Wrapper { for (var #i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) { const child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i); - ${forLoopBody} + ${for_loop_body} } ${remove_old_blocks} `; - block.builders.update.addBlock(deindent` + block.builders.update.add_block(deindent` if (${condition}) { ${update} } `); } - if (outroBlock) { - block.builders.outro.addBlock(deindent` + if (outro_block) { + block.builders.outro.add_block(deindent` ${iterations} = ${iterations}.filter(Boolean); - for (let #i = 0; #i < ${view_length}; #i += 1) ${outroBlock}(#i, 0);` + for (let #i = 0; #i < ${view_length}; #i += 1) ${outro_block}(#i, 0);` ); } - block.builders.destroy.addBlock(`@destroyEach(${iterations}, detach);`); + block.builders.destroy.add_block(`@destroy_each(${iterations}, detaching);`); } } \ No newline at end of file diff --git a/src/compile/render-dom/wrappers/Element/Attribute.ts b/src/compile/render-dom/wrappers/Element/Attribute.ts index b098f68248..5b581677d8 100644 --- a/src/compile/render-dom/wrappers/Element/Attribute.ts +++ b/src/compile/render-dom/wrappers/Element/Attribute.ts @@ -1,9 +1,9 @@ import Attribute from '../../../nodes/Attribute'; import Block from '../../Block'; -import fixAttributeCasing from '../../../../utils/fixAttributeCasing'; +import fix_attribute_casing from './fix_attribute_casing'; import ElementWrapper from './index'; -import { stringify } from '../../../../utils/stringify'; -import deindent from '../../../../utils/deindent'; +import { stringify } from '../../../utils/stringify'; +import deindent from '../../../utils/deindent'; export default class AttributeWrapper { node: Attribute; @@ -14,19 +14,19 @@ export default class AttributeWrapper { this.parent = parent; if (node.dependencies.size > 0) { - parent.cannotUseInnerHTML(); + parent.cannot_use_innerhtml(); - block.addDependencies(node.dependencies); + block.add_dependencies(node.dependencies); // special case —