diff --git a/src/compiler/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render-dom/wrappers/InlineComponent/index.ts index 8d5c751addde..46b3df4c31fd 100644 --- a/src/compiler/compile/render-dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render-dom/wrappers/InlineComponent/index.ts @@ -276,15 +276,17 @@ export default class InlineComponentWrapper extends Wrapper { lhs = component.source.slice(binding.expression.node.start, binding.expression.node.end).trim(); } + const contextual_dependencies = [...binding.expression.contextual_dependencies]; + component.partly_hoisted.push(deindent` - function ${fn}($$component) { + function ${fn}(${['$$component', ...contextual_dependencies].join(', ')}) { ${lhs} = $$component; ${object && component.invalidate(object)} } `); block.builders.destroy.add_line(`ctx.${fn}(null);`); - return `@add_binding_callback(() => ctx.${fn}(${this.var}));`; + return `@add_binding_callback(() => ctx.${fn}(${[this.var, ...contextual_dependencies.map(name => `ctx.${name}`)].join(', ')}));`; } const name = component.get_unique_name(`${this.var}_${binding.name}_binding`); diff --git a/src/compiler/compile/utils/flatten_reference.ts b/src/compiler/compile/utils/flatten_reference.ts index e7d66d01ca1c..460cd2f1e9cc 100644 --- a/src/compiler/compile/utils/flatten_reference.ts +++ b/src/compiler/compile/utils/flatten_reference.ts @@ -7,10 +7,11 @@ export default function flatten_reference(node: Node) { const prop_end = node.end; while (node.type === 'MemberExpression') { - if (node.computed) return null; - nodes.unshift(node.property); - parts.unshift(node.property.name); + + if (!node.computed) { + parts.unshift(node.property.name); + } node = node.object; } @@ -20,10 +21,11 @@ export default function flatten_reference(node: Node) { ? node.name : node.type === 'ThisExpression' ? 'this' : null; - if (!name) return null; - - parts.unshift(name); nodes.unshift(node); + if (!node.computed) { + parts.unshift(name); + } + return { name, nodes, parts, keypath: `${name}[✂${prop_start}-${prop_end}✂]` }; } diff --git a/test/runtime/samples/binding-this-component-computed-key/Foo.svelte b/test/runtime/samples/binding-this-component-computed-key/Foo.svelte new file mode 100644 index 000000000000..066a48b65e5b --- /dev/null +++ b/test/runtime/samples/binding-this-component-computed-key/Foo.svelte @@ -0,0 +1 @@ +
foo
\ No newline at end of file diff --git a/test/runtime/samples/binding-this-component-computed-key/_config.js b/test/runtime/samples/binding-this-component-computed-key/_config.js new file mode 100644 index 000000000000..415d2e641c13 --- /dev/null +++ b/test/runtime/samples/binding-this-component-computed-key/_config.js @@ -0,0 +1,8 @@ +export default { + skip_if_ssr: true, + + html: ` +
foo
+
has foo: true
+ ` +}; diff --git a/test/runtime/samples/binding-this-component-computed-key/main.svelte b/test/runtime/samples/binding-this-component-computed-key/main.svelte new file mode 100644 index 000000000000..af450ea1fec8 --- /dev/null +++ b/test/runtime/samples/binding-this-component-computed-key/main.svelte @@ -0,0 +1,9 @@ + + + +
+ has foo: {!!foo.computed} +
diff --git a/test/runtime/samples/binding-this-component-each-block-value/Foo.svelte b/test/runtime/samples/binding-this-component-each-block-value/Foo.svelte new file mode 100644 index 000000000000..066a48b65e5b --- /dev/null +++ b/test/runtime/samples/binding-this-component-each-block-value/Foo.svelte @@ -0,0 +1 @@ +
foo
\ No newline at end of file diff --git a/test/runtime/samples/binding-this-component-each-block-value/_config.js b/test/runtime/samples/binding-this-component-each-block-value/_config.js new file mode 100644 index 000000000000..2b5df8c59561 --- /dev/null +++ b/test/runtime/samples/binding-this-component-each-block-value/_config.js @@ -0,0 +1,12 @@ +export default { + skip_if_ssr: true, + + html: ` +
foo
+
first has foo: true
+
foo
+
second has foo: true
+
foo
+
third has foo: true
+ ` +}; diff --git a/test/runtime/samples/binding-this-component-each-block-value/main.svelte b/test/runtime/samples/binding-this-component-each-block-value/main.svelte new file mode 100644 index 000000000000..5093eecd3f59 --- /dev/null +++ b/test/runtime/samples/binding-this-component-each-block-value/main.svelte @@ -0,0 +1,11 @@ + + +{#each ["first", "second", "third"] as value} + +
+ {value} has foo: {!!foo[value]} +
+{/each} diff --git a/test/runtime/samples/binding-this-component-each-block/Foo.svelte b/test/runtime/samples/binding-this-component-each-block/Foo.svelte new file mode 100644 index 000000000000..066a48b65e5b --- /dev/null +++ b/test/runtime/samples/binding-this-component-each-block/Foo.svelte @@ -0,0 +1 @@ +
foo
\ No newline at end of file diff --git a/test/runtime/samples/binding-this-component-each-block/_config.js b/test/runtime/samples/binding-this-component-each-block/_config.js new file mode 100644 index 000000000000..358c5b5afc72 --- /dev/null +++ b/test/runtime/samples/binding-this-component-each-block/_config.js @@ -0,0 +1,12 @@ +export default { + skip_if_ssr: true, + + html: ` +
foo
+
0 has foo: true
+
foo
+
1 has foo: true
+
foo
+
2 has foo: true
+ ` +}; diff --git a/test/runtime/samples/binding-this-component-each-block/main.svelte b/test/runtime/samples/binding-this-component-each-block/main.svelte new file mode 100644 index 000000000000..49d1d7617292 --- /dev/null +++ b/test/runtime/samples/binding-this-component-each-block/main.svelte @@ -0,0 +1,11 @@ + + +{#each Array(3) as _, i} + +
+ {i} has foo: {!!foo[i]} +
+{/each}