From 3c069b1ca2cda8d5a7e50b207c4f01951b47edf9 Mon Sep 17 00:00:00 2001 From: 7nik Date: Sun, 29 Jun 2025 01:55:35 +0300 Subject: [PATCH] fix: update defined custom elements --- packages/repl/src/lib/Output/ReplProxy.ts | 2 + packages/repl/src/lib/Output/Viewer.svelte | 57 ++++++++++++++++++++++ packages/repl/src/lib/Output/proxy.d.ts | 2 +- 3 files changed, 60 insertions(+), 1 deletion(-) diff --git a/packages/repl/src/lib/Output/ReplProxy.ts b/packages/repl/src/lib/Output/ReplProxy.ts index a42f28cd73..11a6adfc04 100644 --- a/packages/repl/src/lib/Output/ReplProxy.ts +++ b/packages/repl/src/lib/Output/ReplProxy.ts @@ -23,6 +23,8 @@ export default class ReplProxy { return this.handlers.on_error(event.data); case 'unhandledrejection': return this.handlers.on_unhandled_rejection(event.data); + case 'iframe_reload': + return this.handlers.on_iframe_reload(event.data); case 'console': if (event.data.command === 'info' && event.data.args[0]?.type === '__error') { const data = event.data.args[0]; diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte index 53685b8f6f..310024a01d 100644 --- a/packages/repl/src/lib/Output/Viewer.svelte +++ b/packages/repl/src/lib/Output/Viewer.svelte @@ -77,6 +77,9 @@ error.message = 'Uncaught (in promise): ' + error.message; push_logs({ command: 'error', args: [error] }); }, + on_iframe_reload: () => { + ready = false; + }, on_console: (log) => { switch (log.command) { case 'clear': @@ -169,11 +172,65 @@ console.error(err); } } + window.__reset_custom_elements?.(); document.body.innerHTML = ''; window._svelteTransitionManager = null; } + if (!window.__reset_custom_elements) { + const registered = new Map(); + const define = CustomElementRegistry.prototype.define; + CustomElementRegistry.prototype.define = function(name, el, options) { + let ce = registered.get(name); + if (ce) { + if (ce.registered) { + // trigger error of re-registering + define.call(this, name, ce.el, options); + } + if (ce.options?.extends != options?.extends) { + parent.postMessage({ action: 'iframe_reload' }, '*'); + location.reload(); + } + ce.el = el; + ce.registered = true; + } else { + ce = { el, options, registered: true }; + registered.set(name, ce); + const Wrapper = class extends el { + connectedCallback() { + ce.el.prototype.connectedCallback?.apply(this, arguments); + } + disconnectedCallback() { + ce.el.prototype.disconnectedCallback?.apply(this, arguments); + } + adoptedCallback() { + ce.el.prototype.adoptedCallback?.apply(this, arguments); + } + }; + const DynamicWrapper = new Proxy(Wrapper, { + construct: function (_, args, newTarget) { + return Reflect.construct(ce.el, args, newTarget); + } + }); + try { + define.call(this, name, DynamicWrapper, options); + } catch (error) { + console.error(error); + throw new Error('Failed to define a custom element '+name); + } + } + }; + window.__reset_custom_elements = () => { + for (const ce of registered.values()) { + if (ce.registered) { + ce.el = HTMLElement; + ce.registered = false; + } + } + } + } + const __repl_exports = ${bundle.client?.code}; { const { mount, unmount, App, untrack } = __repl_exports; diff --git a/packages/repl/src/lib/Output/proxy.d.ts b/packages/repl/src/lib/Output/proxy.d.ts index b3f9fa8d1a..87ea1ae97c 100644 --- a/packages/repl/src/lib/Output/proxy.d.ts +++ b/packages/repl/src/lib/Output/proxy.d.ts @@ -1,4 +1,4 @@ export type Handlers = Record< - 'on_fetch_progress' | 'on_error' | 'on_unhandled_rejection' | 'on_console', + 'on_fetch_progress' | 'on_error' | 'on_unhandled_rejection' | 'on_iframe_reload' | 'on_console', (data: any) => void >; pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy