From 889351f3df944c169921d2408bdc5901b2da3ef4 Mon Sep 17 00:00:00 2001 From: pk Date: Fri, 9 Nov 2018 20:18:16 +0100 Subject: [PATCH 001/833] Failing test for #1844 --- .../Nested.html | 3 +++ .../_config.js | 2 ++ .../main.html | 13 +++++++++++++ 3 files changed, 18 insertions(+) create mode 100644 test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/Nested.html create mode 100644 test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/_config.js create mode 100644 test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/main.html diff --git a/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/Nested.html b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/Nested.html new file mode 100644 index 0000000000..6ddd61d4d1 --- /dev/null +++ b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/Nested.html @@ -0,0 +1,3 @@ +

+ +

diff --git a/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/_config.js b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/_config.js new file mode 100644 index 0000000000..02a61bed5e --- /dev/null +++ b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/_config.js @@ -0,0 +1,2 @@ +export default { +}; diff --git a/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/main.html b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/main.html new file mode 100644 index 0000000000..3f5fad9363 --- /dev/null +++ b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/main.html @@ -0,0 +1,13 @@ + + Hello + + + From e9537d40a7f3faea83bdcb4ec09a09960b9181c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20S=C3=A1nchez=20Ortega?= Date: Fri, 22 Feb 2019 17:46:25 +0100 Subject: [PATCH 002/833] Check if slotted component has an update function during runtime --- src/compile/render-dom/wrappers/Slot.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/compile/render-dom/wrappers/Slot.ts b/src/compile/render-dom/wrappers/Slot.ts index 440590239d..de866ed882 100644 --- a/src/compile/render-dom/wrappers/Slot.ts +++ b/src/compile/render-dom/wrappers/Slot.ts @@ -141,7 +141,7 @@ export default class SlotWrapper extends Wrapper { if (this.dependencies.size > 1) update_conditions = `(${update_conditions})`; block.builders.update.addBlock(deindent` - if (${slot} && ${update_conditions}) { + if (${slot} && ${slot}.p && ${update_conditions}) { ${slot}.p(@assign(@assign({}, ${get_slot_changes}(changed)), ctx.$$scope.changed), @get_slot_context(${slot_definition}, ctx, ${get_slot_context})); } `); @@ -150,4 +150,4 @@ export default class SlotWrapper extends Wrapper { `if (${slot}) ${slot}.d(detach);` ); } -} \ No newline at end of file +} From 597baa49c049a3e1d4bf90c8829336080bad0c7d Mon Sep 17 00:00:00 2001 From: Conduitry Date: Sun, 10 Mar 2019 05:38:28 -0400 Subject: [PATCH 003/833] update options.customElement/ handling (#2025) --- src/compile/Component.ts | 15 +++++++-------- src/compile/index.ts | 34 +++++++++++++++++++++++++++++++++- src/interfaces.ts | 3 +-- src/parse/index.ts | 4 ++-- 4 files changed, 43 insertions(+), 13 deletions(-) diff --git a/src/compile/Component.ts b/src/compile/Component.ts index 1b843e9ca2..8589ef6af7 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -119,16 +119,15 @@ export default class Component { this.componentOptions = process_component_options(this, this.ast.html.children); this.namespace = namespaces[this.componentOptions.namespace] || this.componentOptions.namespace; - if (compileOptions.customElement === true && !this.componentOptions.tag) { - throw new Error(`No tag name specified`); // TODO better error + if (compileOptions.customElement) { + this.tag = compileOptions.customElement.tag || this.componentOptions.tag; + if (!this.tag) { + throw new Error(`Cannot compile to a custom element without specifying a tag name via options.customElement or `); + } + } else { + this.tag = this.name; } - this.tag = compileOptions.customElement - ? compileOptions.customElement === true - ? this.componentOptions.tag - : compileOptions.customElement as string - : this.name; - this.walk_module_js(); this.walk_instance_js_pre_template(); diff --git a/src/compile/index.ts b/src/compile/index.ts index 704d5bd706..ae9d554035 100644 --- a/src/compile/index.ts +++ b/src/compile/index.ts @@ -3,7 +3,7 @@ import Stats from '../Stats'; import parse from '../parse/index'; import renderDOM from './render-dom/index'; import renderSSR from './render-ssr/index'; -import { CompileOptions, Ast, Warning } from '../interfaces'; +import { CompileOptions, Ast, Warning, CustomElementOptions } from '../interfaces'; import Component from './Component'; import fuzzymatch from '../utils/fuzzymatch'; @@ -41,6 +41,10 @@ function validate_options(options: CompileOptions, warnings: Warning[]) { throw new Error(`options.name must be a valid identifier (got '${name}')`); } + if ('customElement' in options) { + options.customElement = normalize_customElement_option(options.customElement); + } + if (name && /^[a-z]/.test(name)) { const message = `options.name should be capitalised`; warnings.push({ @@ -52,6 +56,34 @@ function validate_options(options: CompileOptions, warnings: Warning[]) { } } +const valid_customElement_options = ['tag']; + +function normalize_customElement_option(customElement: boolean | string | CustomElementOptions) { + if (typeof customElement === 'boolean') { + return customElement ? {} : null; + } else if (typeof customElement === 'string') { + customElement = { tag: customElement }; + } else if (typeof customElement === 'object') { + Object.keys(customElement).forEach(key => { + if (valid_customElement_options.indexOf(key) === -1) { + const match = fuzzymatch(key, valid_customElement_options); + let message = `Unrecognized option 'customElement.${key}'`; + if (match) message += ` (did you mean 'customElement.${match}'?)`; + + throw new Error(message); + } + }); + } else { + throw new Error(`options.customElement must be a boolean, a string or an object`); + } + + if ('tag' in customElement && !/^[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]+$/.test(customElement.tag)) { + throw new Error(`options.customElement tag name must be two or more words joined by the '-' character`); + } + + return customElement; +} + function get_name(filename) { if (!filename) return null; const parts = filename.split(/[\/\\]/); diff --git a/src/interfaces.ts b/src/interfaces.ts index 4ec258c94a..fc2e6b260e 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -52,7 +52,7 @@ export interface CompileOptions { immutable?: boolean; hydratable?: boolean; legacy?: boolean; - customElement?: CustomElementOptions | true; + customElement?: CustomElementOptions; css?: boolean; preserveComments?: boolean | false; @@ -65,7 +65,6 @@ export interface Visitor { export interface CustomElementOptions { tag?: string; - props?: string[]; } export interface AppendTarget { diff --git a/src/parse/index.ts b/src/parse/index.ts index 4b1e0a225c..1618ee5e6e 100644 --- a/src/parse/index.ts +++ b/src/parse/index.ts @@ -9,7 +9,7 @@ import error from '../utils/error'; interface ParserOptions { filename?: string; bind?: boolean; - customElement?: CustomElementOptions | true; + customElement?: CustomElementOptions; } type ParserState = (parser: Parser) => (ParserState | void); @@ -17,7 +17,7 @@ type ParserState = (parser: Parser) => (ParserState | void); export class Parser { readonly template: string; readonly filename?: string; - readonly customElement: CustomElementOptions | true; + readonly customElement: CustomElementOptions; index = 0; stack: Array = []; From d5e79a9f2db2cccd14ae09ecaf3355c25f5dd3dc Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 17 Mar 2019 15:53:40 -0400 Subject: [PATCH 004/833] add crossfade and flip functions (#2241) --- .gitignore | 1 + animate.mjs | 25 ++++++++++++++++++++ rollup.config.js | 2 +- transition.mjs | 59 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 animate.mjs diff --git a/.gitignore b/.gitignore index a78b294346..1c6fdab06f 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ node_modules /easing.js /motion.* /transition.js +/animate.js /scratch/ /coverage/ /coverage.lcov/ diff --git a/animate.mjs b/animate.mjs new file mode 100644 index 0000000000..f22fabe401 --- /dev/null +++ b/animate.mjs @@ -0,0 +1,25 @@ +import { cubicOut } from './easing'; +import { is_function } from './internal'; + +export function flip(node, animation, params) { + const style = getComputedStyle(node); + const transform = style.transform === 'none' ? '' : style.transform; + + const dx = animation.from.left - animation.to.left; + const dy = animation.from.top - animation.to.top; + + const d = Math.sqrt(dx * dx + dy * dy); + + const { + delay = 0, + duration = d => Math.sqrt(d) * 120, + easing = cubicOut + } = params; + + return { + delay, + duration: is_function(duration) ? duration(d) : duration, + easing, + css: (t, u) => `transform: ${transform} translate(${u * dx}px, ${u * dy}px);` + }; +} \ No newline at end of file diff --git a/rollup.config.js b/rollup.config.js index c523cb004d..f7b2d07d4b 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -88,7 +88,7 @@ export default [ }, // everything else - ...['index', 'store', 'easing', 'transition'].map(name => ({ + ...['index', 'store', 'easing', 'transition', 'animate'].map(name => ({ input: `${name}.mjs`, output: { file: `${name}.js`, diff --git a/transition.mjs b/transition.mjs index 1b6fbec605..8c51e5e901 100644 --- a/transition.mjs +++ b/transition.mjs @@ -1,4 +1,5 @@ import { cubicOut, cubicInOut } from './easing'; +import { assign, is_function } from './internal'; export function fade(node, { delay = 0, @@ -79,4 +80,62 @@ export function draw(node, { easing, css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}` }; +} + +export function crossfade({ fallback, ...defaults }) { + let to_receive = new Map(); + let to_send = new Map(); + + function crossfade(from, node, params) { + const { + delay = 0, + duration = d => Math.sqrt(d) * 30, + easing = cubicOut + } = assign(assign({}, defaults), params); + + const to = node.getBoundingClientRect(); + const dx = from.left - to.left; + const dy = from.top - to.top; + + const style = getComputedStyle(node); + const transform = style.transform === 'none' ? '' : style.transform; + + return { + delay, + duration: is_function(duration) ? duration(d) : duration, + easing, + css: (t, u) => ` + opacity: ${t}; + transform: ${transform} translate(${u * dx}px,${u * dy}px); + ` + }; + } + + function transition(items, counterparts, intro) { + return (node, params) => { + items.set(params.key, { + rect: node.getBoundingClientRect() + }); + + return () => { + if (counterparts.has(params.key)) { + const { rect } = counterparts.get(params.key); + counterparts.delete(params.key); + + return crossfade(rect, node, params); + } + + // if the node is disappearing altogether + // (i.e. wasn't claimed by the other list) + // then we need to supply an outro + items.delete(params.key); + return fallback(node, params, intro); + }; + }; + } + + return [ + transition(to_send, to_receive, false), + transition(to_receive, to_send, true) + ]; } \ No newline at end of file From c0c2f4e82ea2b79cf54e7e287aba2a2974c395a8 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 17 Mar 2019 16:14:02 -0400 Subject: [PATCH 005/833] allow missing fallback --- transition.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/transition.mjs b/transition.mjs index 8c51e5e901..bb0ce694f2 100644 --- a/transition.mjs +++ b/transition.mjs @@ -129,7 +129,7 @@ export function crossfade({ fallback, ...defaults }) { // (i.e. wasn't claimed by the other list) // then we need to supply an outro items.delete(params.key); - return fallback(node, params, intro); + return fallback && fallback(node, params, intro); }; }; } From 3ab8ba68b3c6db9b267a6d75d37c18c43f15330f Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 17 Mar 2019 16:51:19 -0400 Subject: [PATCH 006/833] rebundle when files are created/renamed --- site/src/components/Repl/Input/ComponentSelector.svelte | 4 +++- site/src/components/Repl/index.svelte | 9 +++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) 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/index.svelte b/site/src/components/Repl/index.svelte index aa9a9fed93..1a750cceb2 100644 --- a/site/src/components/Repl/index.svelte +++ b/site/src/components/Repl/index.svelte @@ -59,11 +59,17 @@ let module_editor; let output; + function rebundle() { + workers.bundler.postMessage({ type: 'bundle', components: $components }); + } + setContext('REPL', { components, selected, bundle, + rebundle, + navigate: item => { const match = /^(.+)\.(\w+)$/.exec(item.filename); if (!match) return; // ??? @@ -93,8 +99,7 @@ // recompile selected component output.update($selected); - // regenerate bundle (TODO do this in a separate worker?) - workers.bundler.postMessage({ type: 'bundle', components: $components }); + rebundle(); dispatch('change', { components: $components From 13002b611d84a3e1c19e16473cc5fa4553f9b5fe Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sun, 17 Mar 2019 17:22:19 -0400 Subject: [PATCH 007/833] recompile when options change --- .../Repl/Output/CompilerOptions.svelte | 20 +++++++------- site/src/components/Repl/Output/index.svelte | 20 +++++--------- site/src/components/Repl/index.svelte | 27 ++++++++++++++----- 3 files changed, 38 insertions(+), 29 deletions(-) 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}, ${prop_names}); @@ -448,7 +448,7 @@ 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`}); 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 37eaf36457..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 —