[gem] Remove GemElement.attributeChangedCallback

mantou132 · Jun 17, 2024 · 82fb9ec · 82fb9ec
1 parent 2c8f7d5
commit 82fb9ec
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 24 deletions.
diff --git a/packages/gem-devtools/src/scripts/get-gem.ts b/packages/gem-devtools/src/scripts/get-gem.ts
@@ -93,7 +93,6 @@ export const getSelectedGem = function (data: PanelStore, gemElementSymbols: str
   const attrs: Set<string> = $0.attributes ? new Set([...$0.attributes].map((attr) => attr.nodeName)) : new Set();
   const elementMethod = new Set([
     'connectedCallback',
-    'attributeChangedCallback',
     'adoptedCallback',
     'disconnectedCallback',
     'setAttribute',

diff --git a/packages/gem/docs/en/001-guide/011-faq.md b/packages/gem/docs/en/001-guide/011-faq.md
@@ -40,7 +40,6 @@ SSR is currently not available. Although the [Declarative Shadow DOM](https://gi
 The following methods will cause `GemElement` to not work properly when overridden:
 
 - `GemElement.connectedCallback`
-- `GemElement.attributeChangedCallback`
 - `GemElement.disconnectedCallback`
 - `GemElement.internals`
 

diff --git a/packages/gem/docs/zh/001-guide/011-faq.md b/packages/gem/docs/zh/001-guide/011-faq.md
@@ -40,7 +40,6 @@ Gem 只保证支持较新版的 Chrome/Firefox/Safari。
 下面的方法被覆盖时将导致 `GemElement` 不能正常工作:
 
 - `GemElement.connectedCallback`
-- `GemElement.attributeChangedCallback`
 - `GemElement.disconnectedCallback`
 - `GemElement.internals`
 

diff --git a/packages/gem/src/helper/i18n.ts b/packages/gem/src/helper/i18n.ts
@@ -1,5 +1,5 @@
 import { UpdateHistoryParams } from '../lib/history';
-import { html, TemplateResult } from '../lib/element';
+import { html, TemplateResult, updateSymbol } from '../lib/element';
 import { GemError } from '../lib/utils';
 import type { RouteTrigger } from '../elements/base/route';
 
@@ -210,7 +210,7 @@ export class I18n<T = Record<string, Msg>> implements RouteTrigger {
     const temp: Element[] = [document.documentElement];
     while (!!temp.length) {
       const element = temp.pop()!;
-      if ('attributeChangedCallback' in element) (element as any).attributeChangedCallback();
+      (element as any)[updateSymbol]?.();
       if (element.shadowRoot?.firstElementChild) temp.push(element.shadowRoot.firstElementChild);
       if (element.firstElementChild) temp.push(element.firstElementChild);
       if (element.nextElementSibling) temp.push(element.nextElementSibling);

diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
@@ -77,7 +77,7 @@ type EffectItem<T> = {
   preCallback?: () => void;
 };
 
-const updateSymbol = Symbol('update');
+export const updateSymbol = Symbol('update');
 
 export interface GemElementOptions extends Partial<ShadowRootInit> {
   isLight?: boolean;
@@ -118,15 +118,12 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
   #memoList?: EffectItem<any>[];
   #unmountCallback?: any;
 
-  [updateSymbol]() {
-    if (this.#isMounted) {
-      addMicrotask(this.#update);
-    }
-  }
-
   constructor(options: GemElementOptions = {}) {
     super();
 
+    // expose private Methods
+    Reflect.set(this, updateSymbol, this.#asyncUpdate);
+
     this.#isAsync = options.isAsync;
     this.#renderRoot = options.isLight
       ? this
@@ -357,6 +354,12 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     }
   };
 
+  #asyncUpdate = () => {
+    if (this.#isMounted) {
+      addMicrotask(this.#update);
+    }
+  };
+
   /**
    * @helper
    * async
@@ -378,18 +381,6 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
    */
   unmounted?(): void | Promise<void>;
 
-  /**
-   * @private
-   * @final
-   * use `effect`
-   */
-  attributeChangedCallback() {
-    if (this.#isMounted) {
-      addMicrotask(this.#update);
-    }
-    return GemElement.#final;
-  }
-
   #disconnectStore?: (() => void)[];
   #connectedCallback = () => {
     if (this.#isAppendReason) {