From 0a21f1349ee1ca96196695454d1eda9fd3a35502 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 20 Aug 2024 17:09:02 +0200 Subject: [PATCH] feat: support HMR with custom elements closes https://github.com/sveltejs/svelte-hmr/issues/26 --- .changeset/swift-queens-begin.md | 5 +++++ .../phases/3-transform/client/transform-client.js | 10 +++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 .changeset/swift-queens-begin.md diff --git a/.changeset/swift-queens-begin.md b/.changeset/swift-queens-begin.md new file mode 100644 index 000000000000..01413c71d41f --- /dev/null +++ b/.changeset/swift-queens-begin.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +feat: support HMR with custom elements diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js index f9ae37ba4000..c7ec37a326a0 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js @@ -593,7 +593,15 @@ export function client_component(analysis, options) { // If a tag name is provided, call `customElements.define`, otherwise leave to the user if (typeof ce !== 'boolean' && typeof ce.tag === 'string') { - body.push(b.stmt(b.call('customElements.define', b.literal(ce.tag), create_ce))); + const define = b.stmt(b.call('customElements.define', b.literal(ce.tag), create_ce)); + + if (options.hmr) { + body.push( + b.if(b.binary('==', b.call('customElements.get', b.literal(ce.tag)), b.null), define) + ); + } else { + body.push(define); + } } else { body.push(b.stmt(create_ce)); }