Fix the thing

microsoft · Dec 4, 2024 · 8a97582 · 8a97582
1 parent 64a52a3
commit 8a97582
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts b/packages/component/src/providers/CustomElements/customElements/CodeBlock.ts
@@ -15,6 +15,8 @@ class CodeBlock extends HTMLElement {
 
   #originalFragment: DocumentFragment = null;
 
+  connected = false;
+
   get code() {
     return this.querySelector('code')?.textContent ?? '';
   }
@@ -42,14 +44,23 @@ class CodeBlock extends HTMLElement {
   }
 
   connectedCallback() {
+    this.connected = true;
     this.update();
   }
 
+  disconnectedCallback() {
+    this.connected = false;
+  }
+
   highlight(...args: Parameters<HighlightCodeFn>) {
     return defaultHighlightCode(...args);
   }
 
   update() {
+    if (!this.connected) {
+      return;
+    }
+
     const { code, language, options, ownerDocument: document } = this;
 
     if (code && !this.highlightedCodeFragment) {

diff --git a/packages/component/src/providers/CustomElements/customElements/wrapAsCustomElement.ts b/packages/component/src/providers/CustomElements/customElements/wrapAsCustomElement.ts
@@ -2,12 +2,11 @@ import { createElement, type ComponentType } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 enum ConnectionState {
+  DISCONNECTED,
   CONNECTED,
-  PENDING,
-  DISCONNECTED
+  PENDING
 }
 
-
 export default function wrapAsCustomElement<Props extends { [key: string]: string | undefined } & { children?: never }>(
   component: ComponentType<Props>,
   propKeys: (keyof Props)[]
@@ -22,7 +21,6 @@ export default function wrapAsCustomElement<Props extends { [key: string]: strin
     }
 
     #connected = ConnectionState.DISCONNECTED;
-    #ref = new WeakRef(this);
 
     constructor() {
       super();
@@ -34,7 +32,6 @@ export default function wrapAsCustomElement<Props extends { [key: string]: strin
 
         typeof value === 'string' && propMap.set(key === 'class' ? 'className' : key, value);
       }
-
     }
 
     #propMap: Map<keyof Props, string>;
@@ -75,8 +72,7 @@ export default function wrapAsCustomElement<Props extends { [key: string]: strin
 
     async disconnectedCallback() {
       this.#connected = ConnectionState.PENDING;
-      // eslint-disable-next-line no-restricted-globals
-      await new Promise(resolve => setTimeout(resolve));
+      await Promise.resolve();
       if (this.#connected === ConnectionState.PENDING) {
         this.#connected = ConnectionState.DISCONNECTED;
         unmountComponentAtNode(this);

diff --git a/packages/component/src/providers/CustomElements/private/useUpdater.tsx b/packages/component/src/providers/CustomElements/private/useUpdater.tsx
@@ -13,13 +13,15 @@ export function useUpdater<T>(fn: () => T, deps: DependencyList | undefined): Re
 
   const ref = useRef<T>();
 
-  useMemo(() => {
-    ref.current = fn();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const value = useMemo(fn, deps);
+
+  if (ref.current !== value) {
+    ref.current = value;
     for (const updater of updaters.current.values()) {
       updater();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fn, ...deps]);
+  }
 
   return useMemo(() => Object.freeze([ref, onTrack]), [ref, onTrack]);
 }