From 2adcdfb2bf07ed9de62068086a0f5da668e7e64b Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 14 Sep 2019 11:02:18 -0400 Subject: [PATCH] various --- .../compile/render_dom/wrappers/AwaitBlock.ts | 4 +- .../compile/render_dom/wrappers/EachBlock.ts | 4 +- .../render_dom/wrappers/Element/index.ts | 2 +- .../compile/render_dom/wrappers/IfBlock.ts | 44 ++++++++++--------- .../compile/render_dom/wrappers/Window.ts | 19 ++++---- 5 files changed, 36 insertions(+), 37 deletions(-) diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts index f262b00ccf..5669765284 100644 --- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts @@ -144,8 +144,8 @@ export default class AwaitBlockWrapper extends Wrapper { pending: ${this.pending.block.name}, then: ${this.then.block.name}, catch: ${this.catch.block.name}, - value: ${this.then.block.name && this.node.value}, - error: ${this.catch.block.name && this.node.error}, + value: ${this.then.block.name && x`"${this.node.value}"`}, + error: ${this.catch.block.name && x`"${this.node.error}"`}, blocks: ${this.pending.block.has_outro_method && x`[,,,]`} }`; diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index 4fd26d82c9..cc6b3b9e81 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -491,11 +491,11 @@ export default class EachBlockWrapper extends Wrapper { ? b` if (${iterations}[#i]) { ${iterations}[#i].p(changed, child_ctx); - ${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`} + ${has_transitions && b`@transition_in(${this.vars.iterations}[#i], 1);`} } else { ${iterations}[#i] = ${create_each_block}(child_ctx); ${iterations}[#i].c(); - ${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`} + ${has_transitions && b`@transition_in(${this.vars.iterations}[#i], 1);`} ${iterations}[#i].m(${update_mount_node}, ${update_anchor_node}); } ` diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 88f8de80b9..4ea74abd5f 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -631,7 +631,7 @@ export default class ElementWrapper extends Wrapper { if (intro === outro) { // bidirectional transition - const name = block.get_unique_name(`${this.var}_transition`); + const name = block.get_unique_name(`${this.var.name}_transition`); const snippet = intro.expression ? intro.expression.manipulate(block) : '{}'; diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts index f12f4a603c..817e1461a4 100644 --- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts @@ -248,7 +248,9 @@ export default class IfBlockWrapper extends Wrapper { ) { const select_block_type = this.renderer.component.get_unique_name(`select_block_type`); const current_block_type = block.get_unique_name(`current_block_type`); - const current_block_type_and = has_else ? '' : `${current_block_type} && `; + const get_block = has_else + ? x`${current_block_type} && ${current_block_type}(#ctx)` + : x`${current_block_type}(#ctx)` /* eslint-disable @typescript-eslint/indent,indent */ if (this.needs_update) { @@ -258,19 +260,19 @@ export default class IfBlockWrapper extends Wrapper { ? b` ${snippet && ( dependencies.length > 0 - ? `if ((${condition} == null) || ${dependencies.map(n => `changed.${n}`).join(' || ')}) ${condition} = !!(${snippet})` - : `if (${condition} == null) ${condition} = !!(${snippet})` + ? b`if ((${condition} == null) || ${dependencies.map(n => `changed.${n}`).join(' || ')}) ${condition} = !!(${snippet})` + : b`if (${condition} == null) ${condition} = !!(${snippet})` )} if (${condition}) return ${block.name};` - : `return ${block.name};`)} + : b`return ${block.name};`)} } `); } else { block.chunks.init.push(b` function ${select_block_type}(#changed, #ctx) { ${this.branches.map(({ condition, snippet, block }) => condition - ? `if (${snippet || condition}) return ${block.name};` - : `return ${block.name};`)} + ? b`if (${snippet || condition}) return ${block.name};` + : b`return ${block.name};`)} } `); } @@ -278,7 +280,7 @@ export default class IfBlockWrapper extends Wrapper { block.chunks.init.push(b` let ${current_block_type} = ${select_block_type}(null, #ctx); - let ${name} = ${current_block_type_and}${current_block_type}(#ctx); + let ${name} = ${get_block}; `); const initial_mount_node = parent_node || '#target'; @@ -291,11 +293,11 @@ export default class IfBlockWrapper extends Wrapper { const update_mount_node = this.get_update_mount_node(anchor); const change_block = b` - ${if_exists_condition}${name}.d(1); - ${name} = ${current_block_type_and}${current_block_type}(#ctx); + if (${if_exists_condition}) ${name}.d(1); + ${name} = ${get_block}; if (${name}) { ${name}.c(); - ${has_transitions && `@transition_in(${name}, 1);`} + ${has_transitions && b`@transition_in(${name}, 1);`} ${name}.m(${update_mount_node}, ${anchor}); } `; @@ -358,18 +360,18 @@ export default class IfBlockWrapper extends Wrapper { function ${select_block_type}(#changed, #ctx) { ${this.branches.map(({ dependencies, condition, snippet }, i) => condition ? b` - ${snippet && `if ((${condition} == null) || ${dependencies.map(n => `changed.${n}`).join(' || ')}) ${condition} = !!(${snippet})`} + ${snippet && b`if ((${condition} == null) || ${dependencies.map(n => `changed.${n}`).join(' || ')}) ${condition} = !!(${snippet})`} if (${condition}) return ${String(i)};` - : `return ${i};`)} - ${!has_else && `return -1;`} + : b`return ${i};`)} + ${!has_else && b`return -1;`} } ` : b` function ${select_block_type}(#changed, #ctx) { ${this.branches.map(({ condition, snippet }, i) => condition - ? `if (${snippet || condition}) return ${String(i)};` - : `return ${i};`)} - ${!has_else && `return -1;`} + ? b`if (${snippet || condition}) return ${String(i)};` + : b`return ${i};`)} + ${!has_else && b`return -1;`} } `} `); @@ -412,7 +414,7 @@ export default class IfBlockWrapper extends Wrapper { ${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#ctx); ${name}.c(); } - ${has_transitions && `@transition_in(${name}, 1);`} + ${has_transitions && b`@transition_in(${name}, 1);`} ${name}.m(${update_mount_node}, ${anchor}); `; @@ -492,11 +494,11 @@ export default class IfBlockWrapper extends Wrapper { ? b` if (${name}) { ${name}.p(#changed, #ctx); - ${has_transitions && `@transition_in(${name}, 1);`} + ${has_transitions && b`@transition_in(${name}, 1);`} } else { ${name} = ${branch.block.name}(#ctx); ${name}.c(); - ${has_transitions && `@transition_in(${name}, 1);`} + ${has_transitions && b`@transition_in(${name}, 1);`} ${name}.m(${update_mount_node}, ${anchor}); } ` @@ -504,9 +506,9 @@ export default class IfBlockWrapper extends Wrapper { if (!${name}) { ${name} = ${branch.block.name}(#ctx); ${name}.c(); - ${has_transitions && `@transition_in(${name}, 1);`} + ${has_transitions && b`@transition_in(${name}, 1);`} ${name}.m(${update_mount_node}, ${anchor}); - } ${has_transitions && `else @transition_in(${name}, 1);`} + } ${has_transitions && b`else @transition_in(${name}, 1);`} `; if (branch.snippet) { diff --git a/src/compiler/compile/render_dom/wrappers/Window.ts b/src/compiler/compile/render_dom/wrappers/Window.ts index bd7ea5441c..ccb655aad2 100644 --- a/src/compiler/compile/render_dom/wrappers/Window.ts +++ b/src/compiler/compile/render_dom/wrappers/Window.ts @@ -6,6 +6,7 @@ import add_event_handlers from './shared/add_event_handlers'; import Window from '../../nodes/Window'; import add_actions from './shared/add_actions'; import { INode } from '../../nodes/interfaces'; +import { changed } from './shared/changed'; const associated_events = { innerWidth: 'resize', @@ -125,7 +126,7 @@ export default class WindowWrapper extends Wrapper { component.partly_hoisted.push(b` function ${id}() { - ${props.map(prop => `${prop.name} = @_window.${prop.value}; $$invalidate('${prop.name}', ${prop.name});`)} + ${props.map(prop => x`$$invalidate('${prop.name}', ${prop.name} = @_window.${prop.value});`)} } `); @@ -138,19 +139,15 @@ export default class WindowWrapper extends Wrapper { // special case... might need to abstract this out if we add more special cases if (bindings.scrollX || bindings.scrollY) { + const condition = changed([bindings.scrollX, bindings.scrollY].filter(Boolean)); + const scrollX = bindings.scrollX ? x`#ctx.${bindings.scrollX}` : x`@_window.pageXOffset`; + const scrollY = bindings.scrollY ? x`#ctx.${bindings.scrollY}` : x`@_window.pageYOffset`; + block.chunks.update.push(b` - if (${ - [bindings.scrollX, bindings.scrollY].filter(Boolean).map( - b => `changed.${b}` - ).join(' || ') - } && !${scrolling}) { + if (${condition} && !${scrolling}) { ${scrolling} = true; @_clearTimeout(${scrolling_timeout}); - @_scrollTo(${ - bindings.scrollX ? `#ctx.${bindings.scrollX}` : `@_window.pageXOffset` - }, ${ - bindings.scrollY ? `#ctx.${bindings.scrollY}` : `@_window.pageYOffset` - }); + @_scrollTo(${scrollX}, ${scrollY}); ${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100); } `);