diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index cef758b89e..8a8f59810b 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -170,6 +170,15 @@ export default class ElementWrapper extends Wrapper { ) { super(renderer, block, parent, node); + this.var = { + type: 'Identifier', + name: node.name.replace(regex_invalid_variable_identifier_characters, '_') + }; + + this.void = is_void(node.name); + + this.class_dependencies = []; + if (node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK) { this.child_dynamic_element_block = block.child({ comment: create_debugging_comment(node, renderer.component), @@ -185,16 +194,13 @@ export default class ElementWrapper extends Wrapper { strip_whitespace, next_sibling ); - } - this.var = { - type: 'Identifier', - name: node.name.replace(regex_invalid_variable_identifier_characters, '_') - }; - - this.void = is_void(node.name); - - this.class_dependencies = []; + // the original svelte:element is never used for rendering, because + // it gets assigned a child_dynamic_element which is used in all rendering logic. + // so doing all of this on the original svelte:element will just cause double + // code, because it will be done again on the child_dynamic_element. + return; + } if (this.node.children.length) { this.node.lets.forEach(l => { @@ -327,20 +333,19 @@ export default class ElementWrapper extends Wrapper { ${this.var}.p(#ctx, #dirty); } } else if (${previous_tag}) { - ${ - has_transitions - ? b` + ${has_transitions + ? b` @group_outros(); @transition_out(${this.var}, 1, 1, () => { ${this.var} = null; }); @check_outros(); ` - : b` + : b` ${this.var}.d(1); ${this.var} = null; ` - } + } } ${previous_tag} = ${tag}; `); @@ -682,9 +687,9 @@ export default class ElementWrapper extends Wrapper { function ${handler}(${params}) { ${binding_group.bindings.map(b => b.handler.mutation)} ${Array.from(dependencies) - .filter(dep => dep[0] !== '$') - .filter(dep => !contextual_dependencies.has(dep)) - .map(dep => b`${this.renderer.invalidate(dep)};`)} + .filter(dep => dep[0] !== '$') + .filter(dep => !contextual_dependencies.has(dep)) + .map(dep => b`${this.renderer.invalidate(dep)};`)} } `); diff --git a/test/js/samples/svelte-element-event-handlers/expected.js b/test/js/samples/svelte-element-event-handlers/expected.js new file mode 100644 index 0000000000..b9e648aadc --- /dev/null +++ b/test/js/samples/svelte-element-event-handlers/expected.js @@ -0,0 +1,168 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + append, + assign, + bubble, + detach, + element, + empty, + get_spread_update, + init, + insert, + listen, + noop, + run_all, + safe_not_equal, + set_attributes, + set_custom_element_data_map +} from "svelte/internal"; + +function create_dynamic_element(ctx) { + let svelte_element1; + let svelte_element0; + let mounted; + let dispose; + let svelte_element0_levels = [{ class: "inner" }]; + let svelte_element0_data = {}; + + for (let i = 0; i < svelte_element0_levels.length; i += 1) { + svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]); + } + + let svelte_element1_levels = [{ class: "outer" }]; + let svelte_element1_data = {}; + + for (let i = 0; i < svelte_element1_levels.length; i += 1) { + svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]); + } + + return { + c() { + svelte_element1 = element("a"); + svelte_element0 = element("span"); + + if ((/-/).test("span")) { + set_custom_element_data_map(svelte_element0, svelte_element0_data); + } else { + set_attributes(svelte_element0, svelte_element0_data); + } + + if ((/-/).test("a")) { + set_custom_element_data_map(svelte_element1, svelte_element1_data); + } else { + set_attributes(svelte_element1, svelte_element1_data); + } + }, + m(target, anchor) { + insert(target, svelte_element1, anchor); + append(svelte_element1, svelte_element0); + + if (!mounted) { + dispose = [ + listen(svelte_element0, "keydown", /*keydown_handler_1*/ ctx[2]), + listen(svelte_element0, "keyup", /*keyup_handler_1*/ ctx[3]), + listen(svelte_element1, "keydown", /*keydown_handler*/ ctx[0]), + listen(svelte_element1, "keyup", /*keyup_handler*/ ctx[1]) + ]; + + mounted = true; + } + }, + p(ctx, dirty) { + svelte_element0_data = get_spread_update(svelte_element0_levels, [{ class: "inner" }]); + + if ((/-/).test("span")) { + set_custom_element_data_map(svelte_element0, svelte_element0_data); + } else { + set_attributes(svelte_element0, svelte_element0_data); + } + + svelte_element1_data = get_spread_update(svelte_element1_levels, [{ class: "outer" }]); + + if ((/-/).test("a")) { + set_custom_element_data_map(svelte_element1, svelte_element1_data); + } else { + set_attributes(svelte_element1, svelte_element1_data); + } + }, + d(detaching) { + if (detaching) detach(svelte_element1); + mounted = false; + run_all(dispose); + } + }; +} + +function create_fragment(ctx) { + let previous_tag = "a"; + let svelte_element_anchor; + let svelte_element = "a" && create_dynamic_element(ctx); + + return { + c() { + if (svelte_element) svelte_element.c(); + svelte_element_anchor = empty(); + }, + m(target, anchor) { + if (svelte_element) svelte_element.m(target, anchor); + insert(target, svelte_element_anchor, anchor); + }, + p(ctx, [dirty]) { + if ("a") { + if (!previous_tag) { + svelte_element = create_dynamic_element(ctx); + svelte_element.c(); + svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor); + } else if (safe_not_equal(previous_tag, "a")) { + svelte_element.d(1); + svelte_element = create_dynamic_element(ctx); + svelte_element.c(); + svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor); + } else { + svelte_element.p(ctx, dirty); + } + } else if (previous_tag) { + svelte_element.d(1); + svelte_element = null; + } + + previous_tag = "a"; + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(svelte_element_anchor); + if (svelte_element) svelte_element.d(detaching); + } + }; +} + +function instance($$self) { + function keydown_handler(event) { + bubble.call(this, $$self, event); + } + + function keyup_handler(event) { + bubble.call(this, $$self, event); + } + + function keydown_handler_1(event) { + bubble.call(this, $$self, event); + } + + function keyup_handler_1(event) { + bubble.call(this, $$self, event); + } + + return [keydown_handler, keyup_handler, keydown_handler_1, keyup_handler_1]; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, {}); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/svelte-element-event-handlers/input.svelte b/test/js/samples/svelte-element-event-handlers/input.svelte new file mode 100644 index 0000000000..bb0b7b57a9 --- /dev/null +++ b/test/js/samples/svelte-element-event-handlers/input.svelte @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/test/js/samples/svelte-element-svg/expected.js b/test/js/samples/svelte-element-svg/expected.js index 263f6c842b..7db210219b 100644 --- a/test/js/samples/svelte-element-svg/expected.js +++ b/test/js/samples/svelte-element-svg/expected.js @@ -14,11 +14,6 @@ import { svg_element } from "svelte/internal"; -function create_dynamic_element_1(ctx) { - return { c: noop, m: noop, p: noop, d: noop }; -} - -// (5:0) function create_dynamic_element(ctx) { let svelte_element1; let svelte_element0; @@ -61,35 +56,35 @@ function create_dynamic_element(ctx) { function create_fragment(ctx) { let previous_tag = /*tag*/ ctx[0].svg; - let svelte_element1_anchor; - let svelte_element1 = /*tag*/ ctx[0].svg && create_dynamic_element(ctx); + let svelte_element_anchor; + let svelte_element = /*tag*/ ctx[0].svg && create_dynamic_element(ctx); return { c() { - if (svelte_element1) svelte_element1.c(); - svelte_element1_anchor = empty(); + if (svelte_element) svelte_element.c(); + svelte_element_anchor = empty(); }, m(target, anchor) { - if (svelte_element1) svelte_element1.m(target, anchor); - insert(target, svelte_element1_anchor, anchor); + if (svelte_element) svelte_element.m(target, anchor); + insert(target, svelte_element_anchor, anchor); }, p(ctx, [dirty]) { if (/*tag*/ ctx[0].svg) { if (!previous_tag) { - svelte_element1 = create_dynamic_element(ctx); - svelte_element1.c(); - svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor); + svelte_element = create_dynamic_element(ctx); + svelte_element.c(); + svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor); } else if (safe_not_equal(previous_tag, /*tag*/ ctx[0].svg)) { - svelte_element1.d(1); - svelte_element1 = create_dynamic_element(ctx); - svelte_element1.c(); - svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor); + svelte_element.d(1); + svelte_element = create_dynamic_element(ctx); + svelte_element.c(); + svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor); } else { - svelte_element1.p(ctx, dirty); + svelte_element.p(ctx, dirty); } } else if (previous_tag) { - svelte_element1.d(1); - svelte_element1 = null; + svelte_element.d(1); + svelte_element = null; } previous_tag = /*tag*/ ctx[0].svg; @@ -97,8 +92,8 @@ function create_fragment(ctx) { i: noop, o: noop, d(detaching) { - if (detaching) detach(svelte_element1_anchor); - if (svelte_element1) svelte_element1.d(detaching); + if (detaching) detach(svelte_element_anchor); + if (svelte_element) svelte_element.d(detaching); } }; } @@ -115,4 +110,4 @@ class Component extends SvelteComponent { } } -export default Component; +export default Component; \ No newline at end of file