diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts index c54540f249..dfefafd8d8 100644 --- a/src/compiler/compile/nodes/shared/Expression.ts +++ b/src/compiler/compile/nodes/shared/Expression.ts @@ -253,7 +253,15 @@ export default class Expression { const declaration = b`const ${id} = ${node}`; - if (dependencies.size === 0 && contextual_dependencies.size === 0) { + if (owner.type === 'ConstTag') { + walk(node, { + enter(node: Node) { + if (node.type === 'Identifier') { + this.replace(block.renderer.reference(node, ctx)); + } + } + }); + } else if (dependencies.size === 0 && contextual_dependencies.size === 0) { // we can hoist this out of the component completely component.fully_hoisted.push(declaration); diff --git a/test/runtime/samples/const-tag-each-arrow/_config.js b/test/runtime/samples/const-tag-each-arrow/_config.js new file mode 100644 index 0000000000..8e8036b851 --- /dev/null +++ b/test/runtime/samples/const-tag-each-arrow/_config.js @@ -0,0 +1,47 @@ +export default { + html: ` +

#FF0000

+

#00FF00

+

#0000FF

+ `, + async test({ component, target, assert }) { + component.constant = 20; + + assert.htmlEqual(target.innerHTML, ` +

#FF0000

+

#00FF00

+

#0000FF

+ `); + + component.tags = [ + { + name: 'Red', + color: '#FF0000' + }, + { + name: 'Green', + color: '#00FF00' + }, + { + name: 'Blue', + color: '#0000FF' + }, + { + name: 'Black', + color: '#000000' + }, + { + name: 'White', + color: '#FFFFFF' + } + ]; + + assert.htmlEqual(target.innerHTML, ` +

#FF0000

+

#00FF00

+

#0000FF

+

#000000

+

#FFFFFF

+ `); + } +}; diff --git a/test/runtime/samples/const-tag-each-arrow/main.svelte b/test/runtime/samples/const-tag-each-arrow/main.svelte new file mode 100644 index 0000000000..7292a7d485 --- /dev/null +++ b/test/runtime/samples/const-tag-each-arrow/main.svelte @@ -0,0 +1,21 @@ + + +{#each tags as tag} + {@const tagColor = tags.find(t => t.name === tag.name).color} +

{tagColor}

+{/each}