@wsxjs/wsx-core 0.0.30 → 0.1.0

package/dist/index.mjs

@@ -4,49 +4,10 @@ import {
   createLogger,
   h,
   parseHTMLToNodes,
-  reconcileElement,
-  shouldPreserveElement
-} from "./chunk-2ER76KOQ.mjs";
-
-// src/styles/style-manager.ts
-var StyleManager = class {
-  /**
-   * Create or get a cached CSSStyleSheet for a component
-   */
-  static getStyleSheet(componentName, cssText) {
-    if (this.styleSheets.has(componentName)) {
-      return this.styleSheets.get(componentName);
-    }
-    if ("adoptedStyleSheets" in Document.prototype && "CSSStyleSheet" in window) {
-      const styleSheet = new CSSStyleSheet();
-      styleSheet.replaceSync(cssText);
-      this.styleSheets.set(componentName, styleSheet);
-      return styleSheet;
-    } else {
-      throw new Error("Constructable StyleSheets not supported. Use fallback method.");
-    }
-  }
-  /**
-   * Apply styles to a shadow root using constructable stylesheets
-   */
-  static applyStyles(shadowRoot, componentName, cssText) {
-    try {
-      const styleSheet = this.getStyleSheet(componentName, cssText);
-      shadowRoot.adoptedStyleSheets = [styleSheet];
-    } catch {
-      this.applyStylesFallback(shadowRoot, cssText);
-    }
-  }
-  /**
-   * Fallback method for browsers that don't support constructable stylesheets
-   */
-  static applyStylesFallback(shadowRoot, cssText) {
-    const style = document.createElement("style");
-    style.textContent = cssText;
-    shadowRoot.appendChild(style);
-  }
-};
-StyleManager.styleSheets = /* @__PURE__ */ new Map();
+  shouldPreserveElement,
+  updateChildren,
+  updateProps
+} from "./chunk-PNIWQQN6.mjs";
 
 // src/utils/reactive.ts
 import { createLogger as createLogger2 } from "@wsxjs/wsx-logger";
@@ -383,21 +344,6 @@ var BaseComponent = class extends HTMLElement {
      * @internal
      */
     this._domCache = new DOMCacheManager();
-    /**
-     * 当前捕获的焦点状态（用于在 render 时使用捕获的值）
-     * @internal - 由 rerender() 方法管理
-     */
-    this._pendingFocusState = null;
-    /**
-     * 防抖定时器，用于延迟重渲染（当用户正在输入时）
-     * @internal
-     */
-    this._rerenderDebounceTimer = null;
-    /**
-     * 待处理的重渲染标志（当用户正在输入时，标记需要重渲染但延迟执行）
-     * @internal
-     */
-    this._pendingRerender = false;
     /**
      * 正在渲染标志（防止在 _rerender() 执行期间再次触发 scheduleRerender()）
      * @internal
@@ -409,29 +355,6 @@ var BaseComponent = class extends HTMLElement {
      * @internal
      */
     this._hasScheduledRender = false;
-    /**
-     * 处理 blur 事件，在用户停止输入时执行待处理的重渲染
-     * @internal
-     */
-    this.handleGlobalBlur = (event) => {
-      const root = this.getActiveRoot();
-      const target = event.target;
-      if (target && root.contains(target)) {
-        if (this._pendingRerender && this.connected) {
-          if (this._rerenderDebounceTimer !== null) {
-            clearTimeout(this._rerenderDebounceTimer);
-            this._rerenderDebounceTimer = null;
-          }
-          requestAnimationFrame(() => {
-            if (this._pendingRerender && this.connected && !this._isRendering) {
-              this._pendingRerender = false;
-              this._isRendering = true;
-              this._rerender();
-            }
-          });
-        }
-      }
-    };
     this._isDebugEnabled = config.debug ?? false;
     const host = this;
     const originalStyles = config.styles;
@@ -506,10 +429,6 @@ var BaseComponent = class extends HTMLElement {
    */
   scheduleRerender() {
     if (!this.connected) {
-      if (this._rerenderDebounceTimer !== null) {
-        clearTimeout(this._rerenderDebounceTimer);
-        this._rerenderDebounceTimer = null;
-      }
       return;
     }
     if (this._isRendering) {
@@ -518,31 +437,6 @@ var BaseComponent = class extends HTMLElement {
     if (this._hasScheduledRender) {
       return;
     }
-    const root = this.getActiveRoot();
-    let activeElement = null;
-    if (root instanceof ShadowRoot) {
-      activeElement = root.activeElement;
-    } else {
-      const docActiveElement = document.activeElement;
-      if (docActiveElement && root.contains(docActiveElement)) {
-        activeElement = docActiveElement;
-      }
-    }
-    if (activeElement) {
-      const isInputElement = activeElement instanceof HTMLInputElement && activeElement.type !== "radio" && activeElement.type !== "checkbox" || activeElement instanceof HTMLTextAreaElement || activeElement instanceof HTMLSelectElement || activeElement.hasAttribute("contenteditable");
-      const forceRender = activeElement.hasAttribute("data-wsx-force-render");
-      if (isInputElement && !forceRender) {
-        this._pendingRerender = true;
-        if (this._rerenderDebounceTimer !== null) {
-          clearTimeout(this._rerenderDebounceTimer);
-          this._rerenderDebounceTimer = null;
-        }
-        return;
-      }
-    }
-    if (this._pendingRerender) {
-      this._pendingRerender = false;
-    }
     this._hasScheduledRender = true;
     requestAnimationFrame(() => {
       this._hasScheduledRender = false;
@@ -571,21 +465,12 @@ var BaseComponent = class extends HTMLElement {
    * @internal
    */
   cleanup() {
-    if (this._rerenderDebounceTimer !== null) {
-      clearTimeout(this._rerenderDebounceTimer);
-      this._rerenderDebounceTimer = null;
-    }
-    const root = this.getActiveRoot();
-    root.removeEventListener("blur", this.handleGlobalBlur, true);
-    this._pendingRerender = false;
   }
   /**
    * 初始化事件监听器（在组件连接时调用）
    * @internal
    */
   initializeEventListeners() {
-    const root = this.getActiveRoot();
-    root.addEventListener("blur", this.handleGlobalBlur, true);
   }
   /**
    * 获取配置值
@@ -658,119 +543,47 @@ var BaseComponent = class extends HTMLElement {
     }
     return this;
   }
+};
+
+// src/styles/style-manager.ts
+var StyleManager = class {
   /**
-   * 捕获当前焦点状态（在重渲染之前调用）
-   * @returns 焦点状态，如果没有焦点元素则返回 null
+   * Create or get a cached CSSStyleSheet for a component
    */
-  captureFocusState() {
-    const root = this.getActiveRoot();
-    let activeElement = null;
-    if (root instanceof ShadowRoot) {
-      activeElement = root.activeElement;
-    } else {
-      const docActiveElement = document.activeElement;
-      if (docActiveElement && root.contains(docActiveElement)) {
-        activeElement = docActiveElement;
-      }
-    }
-    if (!activeElement || !(activeElement instanceof HTMLElement)) {
-      return null;
-    }
-    const key = activeElement.getAttribute("data-wsx-key");
-    if (!key) {
-      return null;
+  static getStyleSheet(componentName, cssText) {
+    if (this.styleSheets.has(componentName)) {
+      return this.styleSheets.get(componentName);
     }
-    const tagName = activeElement.tagName.toLowerCase();
-    const state2 = {
-      key,
-      elementType: tagName
-    };
-    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
-      state2.value = activeElement.value;
-      state2.selectionStart = activeElement.selectionStart ?? void 0;
-      state2.selectionEnd = activeElement.selectionEnd ?? void 0;
-      if (activeElement instanceof HTMLTextAreaElement) {
-        state2.scrollTop = activeElement.scrollTop;
-      }
-    } else if (activeElement instanceof HTMLSelectElement) {
-      state2.elementType = "select";
-      state2.selectedIndex = activeElement.selectedIndex;
-    } else if (activeElement.hasAttribute("contenteditable")) {
-      state2.elementType = "contenteditable";
-      const selection = window.getSelection();
-      if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        state2.selectionStart = range.startOffset;
-        state2.selectionEnd = range.endOffset;
-      }
+    if ("adoptedStyleSheets" in Document.prototype && "CSSStyleSheet" in window) {
+      const styleSheet = new CSSStyleSheet();
+      styleSheet.replaceSync(cssText);
+      this.styleSheets.set(componentName, styleSheet);
+      return styleSheet;
+    } else {
+      throw new Error("Constructable StyleSheets not supported. Use fallback method.");
     }
-    return state2;
   }
   /**
-   * 恢复焦点状态（在重渲染之后调用）
-   * @param state - 之前捕获的焦点状态
+   * Apply styles to a shadow root using constructable stylesheets
    */
-  restoreFocusState(state2) {
-    if (!state2 || !state2.key) {
-      return;
-    }
-    const root = this.getActiveRoot();
-    const target = root.querySelector(`[data-wsx-key="${state2.key}"]`);
-    if (!target) {
-      return;
-    }
-    if (state2.value !== void 0) {
-      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-        target.value = state2.value;
-      }
-    }
-    if (state2.selectedIndex !== void 0 && target instanceof HTMLSelectElement) {
-      target.selectedIndex = state2.selectedIndex;
+  static applyStyles(shadowRoot, componentName, cssText) {
+    try {
+      const styleSheet = this.getStyleSheet(componentName, cssText);
+      shadowRoot.adoptedStyleSheets = [styleSheet];
+    } catch {
+      this.applyStylesFallback(shadowRoot, cssText);
     }
-    requestAnimationFrame(() => {
-      const currentTarget = root.querySelector(
-        `[data-wsx-key="${state2.key}"]`
-      );
-      if (!currentTarget) {
-        return;
-      }
-      if (state2.value !== void 0) {
-        if (currentTarget instanceof HTMLInputElement || currentTarget instanceof HTMLTextAreaElement) {
-          if (currentTarget.value !== state2.value) {
-            currentTarget.value = state2.value;
-          }
-        }
-      }
-      currentTarget.focus({ preventScroll: true });
-      if (state2.selectionStart !== void 0) {
-        if (currentTarget instanceof HTMLInputElement || currentTarget instanceof HTMLTextAreaElement) {
-          const start = state2.selectionStart;
-          const end = state2.selectionEnd ?? start;
-          currentTarget.setSelectionRange(start, end);
-          if (state2.scrollTop !== void 0 && currentTarget instanceof HTMLTextAreaElement) {
-            currentTarget.scrollTop = state2.scrollTop;
-          }
-        } else if (currentTarget.hasAttribute("contenteditable")) {
-          const selection = window.getSelection();
-          if (selection) {
-            const range = document.createRange();
-            const textNode = currentTarget.childNodes[0];
-            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
-              const maxPos = Math.min(
-                state2.selectionStart,
-                textNode.textContent?.length || 0
-              );
-              range.setStart(textNode, maxPos);
-              range.setEnd(textNode, state2.selectionEnd ?? maxPos);
-              selection.removeAllRanges();
-              selection.addRange(range);
-            }
-          }
-        }
-      }
-    });
+  }
+  /**
+   * Fallback method for browsers that don't support constructable stylesheets
+   */
+  static applyStylesFallback(shadowRoot, cssText) {
+    const style = document.createElement("style");
+    style.textContent = cssText;
+    shadowRoot.appendChild(style);
   }
 };
+StyleManager.styleSheets = /* @__PURE__ */ new Map();
 
 // src/web-component.ts
 import { createLogger as createLogger3 } from "@wsxjs/wsx-logger";
@@ -855,8 +668,11 @@ var WebComponent = class extends BaseComponent {
   }
   /**
    * 内部重渲染实现
-   * 包含从 rerender() 方法迁移的实际渲染逻辑
-   * WebComponent 使用 Shadow DOM，不存在 JSX children 问题
+   * 使用真实 DOM 协调 (RFC 0058) 替代全量替换
+   *
+   * 策略：
+   * 1. 尝试原地更新 (Reconciliation)
+   * 2. 只有在结构完全不匹配时才回退到替更新
    *
    * @override
    */
@@ -865,64 +681,67 @@ var WebComponent = class extends BaseComponent {
       this._isRendering = false;
       return;
     }
-    const focusState = this.captureFocusState();
-    this._pendingFocusState = focusState;
-    const adoptedStyleSheets = this.shadowRoot.adoptedStyleSheets || [];
-    const hasActualAdoptedStyles = this.shadowRoot.adoptedStyleSheets && this.shadowRoot.adoptedStyleSheets.length > 0;
-    const hasFallbackStyleElement = Array.from(this.shadowRoot.children).some(
-      (child) => child instanceof HTMLStyleElement
-    );
+    const content = RenderContext.runInContext(this, () => this.render());
     try {
-      if (!hasActualAdoptedStyles && !hasFallbackStyleElement) {
-        const stylesToApply = this._autoStyles || this.config.styles;
-        if (stylesToApply) {
-          const styleName = this.config.styleName || this.constructor.name;
-          StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+      const allChildren = Array.from(this.shadowRoot.childNodes);
+      const oldChildren = allChildren.filter((child) => {
+        if (child instanceof HTMLStyleElement) return false;
+        if (shouldPreserveElement(child)) return false;
+        return true;
+      });
+      if (oldChildren.length === 1 && oldChildren[0] instanceof HTMLElement && content instanceof HTMLElement && oldChildren[0].tagName === content.tagName) {
+        const oldRoot = oldChildren[0];
+        const newRoot = content;
+        if (oldRoot === newRoot) {
+        } else {
+          const cacheManager = RenderContext.getDOMCache();
+          if (cacheManager) {
+            const oldMetadata = cacheManager.getMetadata(oldRoot);
+            const newMetadata = cacheManager.getMetadata(newRoot);
+            if (oldMetadata && newMetadata) {
+              updateProps(
+                oldRoot,
+                oldMetadata.props,
+                newMetadata.props,
+                oldRoot.tagName
+              );
+              updateChildren(
+                oldRoot,
+                oldMetadata.children,
+                newMetadata.children,
+                cacheManager
+              );
+            } else {
+              oldRoot.replaceWith(newRoot);
+            }
+          } else {
+            oldRoot.replaceWith(newRoot);
+          }
         }
-      }
-      const content = RenderContext.runInContext(this, () => this.render());
-      if (focusState && focusState.key && focusState.value !== void 0) {
-        const target = content.querySelector(
-          `[data-wsx-key="${focusState.key}"]`
+        const hasStylesOriginal = this.shadowRoot.adoptedStyleSheets && this.shadowRoot.adoptedStyleSheets.length > 0 || Array.from(this.shadowRoot.childNodes).some(
+          (c) => c instanceof HTMLStyleElement
         );
-        if (target) {
-          if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-            target.value = focusState.value;
+        if (!hasStylesOriginal) {
+          const stylesToApply = this._autoStyles || this.config.styles;
+          if (stylesToApply) {
+            const styleName = this.config.styleName || this.constructor.name;
+            StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
           }
         }
-      }
-      const isContentAlreadyInShadowRoot = content.parentNode === this.shadowRoot;
-      if (!isContentAlreadyInShadowRoot) {
-        this.shadowRoot.appendChild(content);
-      }
-      const oldNodes = Array.from(this.shadowRoot.childNodes).filter((child) => {
-        if (child === content) {
-          return false;
-        }
-        if (child instanceof HTMLStyleElement) {
-          return false;
-        }
-        if (shouldPreserveElement(child)) {
-          return false;
+      } else {
+        oldChildren.forEach((child) => child.remove());
+        if (content.parentNode !== this.shadowRoot) {
+          this.shadowRoot.appendChild(content);
         }
-        return true;
-      });
-      oldNodes.forEach((node) => node.remove());
-      const hasStylesAfterDOM = this.shadowRoot.adoptedStyleSheets && this.shadowRoot.adoptedStyleSheets.length > 0;
-      const hasStyleElementAfterDOM = Array.from(this.shadowRoot.children).some(
-        (child) => child instanceof HTMLStyleElement
-      );
-      if (adoptedStyleSheets.length > 0) {
-        this.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
-      } else if (!hasStylesAfterDOM && !hasStyleElementAfterDOM) {
-        const stylesToApply = this._autoStyles || this.config.styles;
-        if (stylesToApply) {
-          const styleName = this.config.styleName || this.constructor.name;
-          StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+        const hasStylesAfter = this.shadowRoot.adoptedStyleSheets && this.shadowRoot.adoptedStyleSheets.length > 0 || Array.from(this.shadowRoot.children).some((c) => c instanceof HTMLStyleElement);
+        if (!hasStylesAfter) {
+          const stylesToApply = this._autoStyles || this.config.styles;
+          if (stylesToApply) {
+            const styleName = this.config.styleName || this.constructor.name;
+            StyleManager.applyStyles(this.shadowRoot, styleName, stylesToApply);
+          }
         }
       }
-      this.restoreFocusState(focusState);
-      this._pendingFocusState = null;
       this.onRendered?.();
       this._isRendering = false;
     } catch (error) {
@@ -993,10 +812,10 @@ var LightComponent = class extends BaseComponent {
           this.insertBefore(styleElement, this.firstChild);
         }
       } else {
-        const childrenToRemove = Array.from(this.children).filter(
-          (child) => child !== styleElement
+        const childrenToRemove = Array.from(this.childNodes).filter(
+          (node) => node !== styleElement
         );
-        childrenToRemove.forEach((child) => child.remove());
+        childrenToRemove.forEach((node) => node.remove());
         const content = RenderContext.runInContext(this, () => this.render());
         this.appendChild(content);
         if (styleElement && styleElement !== this.firstChild) {
@@ -1058,21 +877,9 @@ var LightComponent = class extends BaseComponent {
       this._isRendering = false;
       return;
     }
-    const focusState = this.captureFocusState();
-    this._pendingFocusState = focusState;
     const jsxChildren = this.getJSXChildren();
     try {
       const newContent = RenderContext.runInContext(this, () => this.render());
-      if (focusState && focusState.key && focusState.value !== void 0) {
-        const target = newContent.querySelector(
-          `[data-wsx-key="${focusState.key}"]`
-        );
-        if (target) {
-          if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
-            target.value = focusState.value;
-          }
-        }
-      }
       const stylesToApply = this._autoStyles || this.config.styles;
       const styleName = this.config.styleName || this.constructor.name;
       if (stylesToApply) {
@@ -1088,60 +895,66 @@ var LightComponent = class extends BaseComponent {
           styleElement.textContent = stylesToApply;
         }
       }
-      requestAnimationFrame(() => {
-        const oldChildren = Array.from(this.children).filter((child) => {
-          if (stylesToApply && child instanceof HTMLStyleElement && child.getAttribute("data-wsx-light-component") === styleName) {
-            return false;
-          }
-          if (child instanceof HTMLElement && jsxChildren.includes(child)) {
-            return false;
-          }
-          return true;
-        });
-        if (oldChildren.length === 1 && newContent instanceof HTMLElement) {
-          const oldElement = oldChildren[0];
-          if (oldElement instanceof HTMLElement && oldElement.tagName === newContent.tagName) {
-            Array.from(oldElement.attributes).forEach((attr) => {
-              if (!newContent.hasAttribute(attr.name)) {
-                oldElement.removeAttribute(attr.name);
-              }
-            });
-            Array.from(newContent.attributes).forEach((attr) => {
-              if (oldElement.getAttribute(attr.name) !== attr.value) {
-                oldElement.setAttribute(attr.name, attr.value);
-              }
-            });
-            reconcileElement(oldElement, newContent);
+      const allShadowChildren = Array.from(this.childNodes);
+      const oldChildren = allShadowChildren.filter((child) => {
+        if (stylesToApply && child instanceof HTMLStyleElement && child.getAttribute("data-wsx-light-component") === styleName) {
+          return false;
+        }
+        if (jsxChildren.includes(child)) {
+          return false;
+        }
+        if (shouldPreserveElement(child)) {
+          return false;
+        }
+        return true;
+      });
+      if (oldChildren.length === 1 && newContent instanceof HTMLElement && oldChildren[0] instanceof HTMLElement && oldChildren[0].tagName === newContent.tagName) {
+        const oldRoot = oldChildren[0];
+        const newRoot = newContent;
+        if (oldRoot !== newRoot) {
+          const cacheManager = RenderContext.getDOMCache();
+          if (cacheManager) {
+            const oldMetadata = cacheManager.getMetadata(oldRoot);
+            const newMetadata = cacheManager.getMetadata(newRoot);
+            if (oldMetadata && newMetadata) {
+              updateProps(
+                oldRoot,
+                oldMetadata.props,
+                newMetadata.props,
+                oldRoot.tagName
+              );
+              updateChildren(
+                oldRoot,
+                oldMetadata.children,
+                newMetadata.children,
+                cacheManager
+              );
+            } else {
+              oldRoot.replaceWith(newRoot);
+            }
           } else {
-            oldElement.remove();
-            this.appendChild(newContent);
+            oldRoot.replaceWith(newRoot);
           }
-        } else {
-          oldChildren.forEach((child) => child.remove());
-          this.appendChild(newContent);
         }
-        if (stylesToApply) {
-          let styleEl = this.querySelector(
-            `style[data-wsx-light-component="${styleName}"]`
-          );
-          if (!styleEl) {
-            styleEl = document.createElement("style");
-            styleEl.setAttribute("data-wsx-light-component", styleName);
-            styleEl.textContent = stylesToApply;
-            this.insertBefore(styleEl, this.firstChild);
-          } else if (styleEl.textContent !== stylesToApply) {
-            styleEl.textContent = stylesToApply;
-          } else if (styleEl !== this.firstChild) {
-            this.insertBefore(styleEl, this.firstChild);
-          }
+      } else {
+        oldChildren.forEach((child) => child.remove());
+        this.appendChild(newContent);
+      }
+      if (stylesToApply) {
+        let styleEl = this.querySelector(
+          `style[data-wsx-light-component="${styleName}"]`
+        );
+        if (!styleEl) {
+          styleEl = document.createElement("style");
+          styleEl.setAttribute("data-wsx-light-component", styleName);
+          styleEl.textContent = stylesToApply;
+          this.insertBefore(styleEl, this.firstChild);
+        } else if (styleEl !== this.firstChild) {
+          this.insertBefore(styleEl, this.firstChild);
         }
-        requestAnimationFrame(() => {
-          this.restoreFocusState(focusState);
-          this._pendingFocusState = null;
-          this.onRendered?.();
-          this._isRendering = false;
-        });
-      });
+      }
+      this.onRendered?.();
+      this._isRendering = false;
     } catch (error) {
       logger4.error(`[${this.constructor.name}] Error in _rerender:`, error);
       this.renderError(error);
@@ -1155,9 +968,15 @@ var LightComponent = class extends BaseComponent {
    * 这些 children 不是 render() 返回的内容，应该保留
    */
   getJSXChildren() {
-    const jsxChildren = Array.from(this.children).filter(
-      (child) => child instanceof HTMLElement && child.getAttribute("data-wsx-jsx-child") === "true"
-    ).map((child) => child);
+    const jsxChildren = Array.from(this.childNodes).filter((node) => {
+      if (node instanceof HTMLElement) {
+        return node.getAttribute("data-wsx-jsx-child") === "true";
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.__wsxJsxChild === true;
+      }
+      return false;
+    });
     return jsxChildren;
   }
   /**
@@ -1168,9 +987,14 @@ var LightComponent = class extends BaseComponent {
     const styleElement = this.querySelector(
       `style[data-wsx-light-component="${styleName}"]`
     );
-    Array.from(this.children).forEach((child) => {
-      if (child instanceof HTMLElement && child !== styleElement && !(child instanceof HTMLSlotElement)) {
-        child.setAttribute("data-wsx-jsx-child", "true");
+    Array.from(this.childNodes).forEach((node) => {
+      if (node !== styleElement && !(node instanceof HTMLSlotElement)) {
+        if (node instanceof HTMLElement) {
+          node.setAttribute("data-wsx-jsx-child", "true");
+        } else if (node.nodeType === Node.TEXT_NODE) {
+          node.__wsxManaged = true;
+          node.__wsxJsxChild = true;
+        }
       }
     });
   }
@@ -1323,6 +1147,7 @@ function state(targetOrContext, propertyKey) {
   throw new Error(createBabelPluginError(propertyName));
 }
 export {
+  BaseComponent,
   Fragment,
   LightComponent,
   StyleManager,