vite-plugin-taro-runtime 0.7.13 → 0.8.0-beta.0

package/README.md

@@ -14,6 +14,8 @@ Output directories and exports mirror the upstream Taro package names (`runtime`
 
 The `api`, `taro`, `components`, `router`, and `taro-h5` directories retain the runtime files and declarations used by VPT. Alternate bundles and the components' unused lazy-loader JavaScript are omitted. The generic Taro facade retains its CommonJS package boundary, shared mutable API object, and bulk native initialization. VPT's Mini facade attaches framework hooks to that same object; it does not generate a separate API inventory or promise per-API tree-shaking. H5 instead uses a read-only ESM namespace over its modular APIs and static framework hooks. The framework runtime retains Taro's original hook registration, so hooks remain grouped rather than being individually tree-shaken. Copied declarations redirect imports and module augmentations to this package's type exports, so consumer type checking does not depend on Vite aliases or upstream development dependencies. CSS remains side-effectful, and required third-party runtime dependencies are declared directly. None of these upstream Taro packages—and therefore none of their `@tarojs/helper` compiler dependencies—are installed in consumer projects.
 
+The `plugin-html/runtime` entry installs upstream HTML hooks. Its side-effect-free `plugin-html/html-elements` companion shares the inline/block classifications and semantic `h5-*` class handling with native DOM hosts.
+
 ## Development
 
 Build the runtime package from the repository root:

package/dist/plugin-framework-react/runtime.js

@@ -250,7 +250,7 @@ function connectReactPage(R, id) {
                     return h$1('div', { id, className: 'taro_page' }, children);
                 }
                 else {
-                    return h$1('root', { id }, children);
+                    return h$1(ReactDOM$1.getPageRootType(id), { id }, children);
                 }
             }
         };
@@ -636,7 +636,7 @@ function createNativePageConfig(Component, pageName, data, react, reactDOM, page
     }
     const pageObj = {
         options: pageConfig,
-        [ONLOAD](options = {}, cb) {
+        [ONLOAD](options) {
             hasLoaded = new Promise(resolve => { loadResolver = resolve; });
             Current.page = this;
             this.config = pageConfig || {};
@@ -655,7 +655,7 @@ function createNativePageConfig(Component, pageName, data, react, reactDOM, page
                 safeExecute($taroPath, ONLOAD, this.$taroParams);
                 loadResolver();
                 pageElement.ctx = this;
-                pageElement.performUpdate(true, cb);
+                pageElement.performUpdate(true);
             };
             const mount = () => {
                 if (!Current.app) {

package/dist/plugin-html/html-elements.d.ts

@@ -0,0 +1,4 @@
+/** Upstream HTML classifications shared by templates and native DOM hosts. */
+export declare const inlineElements: ReadonlySet<string>
+export declare const blockElements: ReadonlySet<string>
+export declare function ensureHtmlClass(tagName: string, className: string | undefined): string

package/dist/plugin-html/html-elements.js

@@ -0,0 +1,94 @@
+// Upstream HTML display defaults shared by VPT's template and native DOM hosts.
+export const inlineElements = new Set([
+    'i',
+    'abbr',
+    'select',
+    'acronym',
+    'small',
+    'bdi',
+    'kbd',
+    'strong',
+    'big',
+    'sub',
+    'sup',
+    'br',
+    'mark',
+    'meter',
+    'template',
+    'cite',
+    'object',
+    'time',
+    'code',
+    'output',
+    'u',
+    'data',
+    'picture',
+    'tt',
+    'datalist',
+    'var',
+    'dfn',
+    'del',
+    'q',
+    'em',
+    's',
+    'embed',
+    'samp',
+    'b'
+])
+export const blockElements = new Set([
+    'body',
+    'svg',
+    'address',
+    'fieldset',
+    'li',
+    'span',
+    'article',
+    'figcaption',
+    'main',
+    'aside',
+    'figure',
+    'nav',
+    'blockquote',
+    'footer',
+    'ol',
+    'details',
+    'p',
+    'dialog',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'pre',
+    'dd',
+    'header',
+    'section',
+    'div',
+    'hgroup',
+    'table',
+    'dl',
+    'hr',
+    'ul',
+    'dt',
+    'view',
+    'view-block'
+])
+
+export function ensureHtmlClass(tagName, className) {
+    const htmlClass = `h5-${tagName}`
+    const prefix = `${htmlClass} `
+    if (className === undefined || className === '') {
+        return prefix
+    }
+    // Taro uses literal-space token boundaries and preserves the caller's whitespace.
+    if (
+        className === htmlClass ||
+        className.startsWith(prefix) ||
+        className.endsWith(` ${htmlClass}`) ||
+        className.includes(` ${prefix}`)
+    ) {
+        return className
+    }
+    return prefix + className
+}

package/dist/plugin-html/runtime.js

@@ -1,5 +1,6 @@
 import { isHasExtractProp } from '@tarojs/runtime';
 import { isString, isFunction, toCamelCase, hooks, warn } from '@tarojs/shared';
+import { inlineElements, blockElements, ensureHtmlClass } from './html-elements.js';
 
 function genAttrMapFnFromDir(dir) {
     const fn = function (key, value) {
@@ -18,10 +19,6 @@ function genAttrMapFnFromDir(dir) {
     };
     return fn;
 }
-// Taro normally fills this set by rewriting runtime.js from its compiler plugin.
-// VPT pins the upstream defaults at install time instead: no CLI, Babel, or per-build file mutation.
-const inlineElements = new Set(['i', 'abbr', 'select', 'acronym', 'small', 'bdi', 'kbd', 'strong', 'big', 'sub', 'sup', 'br', 'mark', 'meter', 'template', 'cite', 'object', 'time', 'code', 'output', 'u', 'data', 'picture', 'tt', 'datalist', 'var', 'dfn', 'del', 'q', 'em', 's', 'embed', 'samp', 'b']);
-const blockElements = new Set(['body', 'svg', 'address', 'fieldset', 'li', 'span', 'article', 'figcaption', 'main', 'aside', 'figure', 'nav', 'blockquote', 'footer', 'ol', 'details', 'p', 'dialog', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'dd', 'header', 'section', 'div', 'hgroup', 'table', 'dl', 'hr', 'ul', 'dt', 'view', 'view-block']);
 const specialElements = new Map([
     ['slot', 'slot'],
     ['form', 'form'],
@@ -193,14 +190,6 @@ function mapNameByContion(nodeName, key, element, componentsAlias) {
         });
     }
 }
-function ensureHtmlClass(tagName, className = '') {
-    const classList = className.split(' ');
-    const htmlClass = `h5-${tagName}`;
-    if (classList.indexOf(htmlClass) === -1) {
-        classList.unshift(htmlClass);
-    }
-    return classList.join(' ');
-}
 function ensureRect(props, style = '') {
     let cssText = style;
     const { width, height } = props;

package/dist/react/index.d.ts

@@ -2,6 +2,7 @@ import { internalInstanceKey } from './constant';
 import { createRoot } from './render';
 import type { TaroElement } from 'vite-plugin-taro-runtime/runtime/mini';
 import type { ReactNode } from 'react';
+declare function getPageRootType(id: string): string;
 declare const unstable_batchedUpdates: (fn: any, a: any) => any;
 declare function unmountComponentAtNode(dom: TaroElement): boolean;
 declare function createPortal(children: ReactNode, containerInfo: TaroElement, key?: string): {
@@ -16,13 +17,14 @@ declare const flushSync: {
     <R>(fn: () => R): R;
 };
 export type { RendererHost } from './renderer-host';
-export { createPortal, createRoot, flushSync, internalInstanceKey, unmountComponentAtNode, unstable_batchedUpdates };
+export { createPortal, createRoot, flushSync, getPageRootType, internalInstanceKey, unmountComponentAtNode, unstable_batchedUpdates };
 declare const _default: {
     flushSync: {
         (): void;
         <R>(fn: () => R): R;
     };
     createRoot: typeof createRoot;
+    getPageRootType: typeof getPageRootType;
     unstable_batchedUpdates: (fn: any, a: any) => any;
     unmountComponentAtNode: typeof unmountComponentAtNode;
     createPortal: typeof createPortal;

package/dist/react/react.esm.js

@@ -403,8 +403,9 @@ function setEvent(dom, name, value, oldValue) {
     }
     if (isFunction(value)) {
         if (oldValue) {
-            dom.removeEventListener(eventName, oldValue, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? false : undefined);
+            // Keep the host subscription active while replacing the logical callback.
             dom.addEventListener(eventName, value, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? { isCapture, sideEffect: false } : undefined);
+            dom.removeEventListener(eventName, oldValue, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? false : undefined);
         }
         else {
             dom.addEventListener(eventName, value, process.env.TARO_PLATFORM !== PLATFORM_TYPE.HARMONY ? isCapture : undefined);
@@ -495,63 +496,66 @@ function setHarmonyStyle(dom, value, oldValue) {
     }
     dom.setAttribute('__hmStyle', value);
 }
-function setProperty(dom, name, value, oldValue) {
-    var _a, _b;
-    name = name === 'className' ? 'class' : name;
-    if (name === 'key' ||
-        name === 'children' ||
-        name === 'ref') ;
-    else if (name === 'style') {
-        if (process.env.TARO_ENV === 'tt' && isEnableTTDom()) {
-            if (isString(value)) {
-                dom.setAttribute('style', value);
-            }
-            else if (isObject(value)) {
-                dom.setAttribute('style', styleObjectToCss(value));
-            }
+function setStyleProperty(dom, value, oldValue) {
+    if (process.env.TARO_ENV === 'tt' && isEnableTTDom()) {
+        if (isString(value)) {
+            dom.setAttribute('style', value);
+        }
+        else if (isObject(value)) {
+            dom.setAttribute('style', styleObjectToCss(value));
+        }
+    }
+    else {
+        if (/harmony.*cpp/.test(process.env.TARO_ENV || '')) {
+            return dom.setAttribute('_style4cpp', value);
+        }
+        const style = dom.style;
+        if (isString(value)) {
+            style.cssText = value;
         }
         else {
-            if (/harmony.*cpp/.test(process.env.TARO_ENV || '')) {
-                return dom.setAttribute('_style4cpp', value);
+            if (isString(oldValue)) {
+                style.cssText = '';
+                oldValue = null;
             }
-            const style = dom.style;
-            if (isString(value)) {
-                style.cssText = value;
-            }
-            else {
-                if (isString(oldValue)) {
-                    style.cssText = '';
-                    oldValue = null;
-                }
-                if (isObject(oldValue)) {
-                    for (const i in oldValue) {
-                        if (!(value && i in value)) {
-                            // Harmony特殊处理
-                            if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && i === 'position' && oldValue[i] === 'fixed') {
-                                // @ts-ignore
-                                dom.setLayer(0);
-                            }
-                            setStyle(style, i, '');
+            if (isObject(oldValue)) {
+                for (const i in oldValue) {
+                    if (!(value && i in value)) {
+                        // Harmony特殊处理
+                        if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && i === 'position' && oldValue[i] === 'fixed') {
+                            // @ts-ignore
+                            dom.setLayer(0);
                         }
+                        setStyle(style, i, '');
                     }
                 }
-                if (isObject(value)) {
-                    for (const i in value) {
-                        if (!oldValue || !isEqual(value[i], oldValue[i])) {
-                            // Harmony特殊处理
-                            if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && i === 'position') {
-                                if (value[i] === 'fixed' || (value[i] !== 'fixed' && (oldValue === null || oldValue === void 0 ? void 0 : oldValue[i]))) {
-                                    // @ts-ignore
-                                    dom.setLayer(value[i] === 'fixed' ? 1 : 0);
-                                }
+            }
+            if (isObject(value)) {
+                for (const i in value) {
+                    if (!oldValue || !isEqual(value[i], oldValue[i])) {
+                        // Harmony特殊处理
+                        if (process.env.TARO_PLATFORM === PLATFORM_TYPE.HARMONY && i === 'position') {
+                            if (value[i] === 'fixed' || (value[i] !== 'fixed' && (oldValue === null || oldValue === void 0 ? void 0 : oldValue[i]))) {
+                                // @ts-ignore
+                                dom.setLayer(value[i] === 'fixed' ? 1 : 0);
                             }
-                            setStyle(style, i, value[i]);
                         }
+                        setStyle(style, i, value[i]);
                     }
                 }
             }
         }
     }
+}
+function setProperty(dom, name, value, oldValue) {
+    var _a, _b;
+    name = name === 'className' ? 'class' : name;
+    if (name === 'key' ||
+        name === 'children' ||
+        name === 'ref') ;
+    else if (name === 'style') {
+        host.batchStyleUpdate(dom, () => setStyleProperty(dom, value, oldValue))
+    }
     else if (isEventName(name)) {
         setEvent(dom, name, value, oldValue);
     }
@@ -658,8 +662,8 @@ const hostConfig = {
     getRootHostContext() {
         return {};
     },
-    getChildHostContext(parentHostContext) {
-        return parentHostContext;
+    getChildHostContext(parentHostContext, type) {
+        return host.getChildHostContext(parentHostContext, type);
     },
     prepareForCommit(container) {
         host.beforeCommit?.(container);
@@ -995,14 +999,18 @@ function createPortal(children, containerInfo, key) {
 }
 // Public flushSync runs a callback at synchronous priority; controlled-input restoration only flushes queued sync work.
 const flushSync = TaroReconciler.flushSyncFromReconciler;
+function getPageRootType(id) {
+    return host.getPageRootType(id);
+}
 var index = {
     flushSync,
     createRoot,
+    getPageRootType,
     unstable_batchedUpdates,
     unmountComponentAtNode,
     createPortal,
     internalInstanceKey
 };
 
-export { createPortal, createRoot, index as default, flushSync, internalInstanceKey, unmountComponentAtNode, unstable_batchedUpdates };
+export { createPortal, createRoot, index as default, flushSync, getPageRootType, internalInstanceKey, unmountComponentAtNode, unstable_batchedUpdates };
 //# sourceMappingURL=react.esm.js.map

package/dist/react/renderer-host.d.ts

@@ -1,8 +1,12 @@
 /** Host-owned creation, form classification and commit boundaries for the shared React renderer. */
 export type RendererHost<Container, Context, Element, Text> = Readonly<{
+    getPageRootType(id: string): string
+    getChildHostContext(parentContext: Context, type: string): Context
     createElement(container: Container, context: Context, type: string): Element
     createText(container: Container, context: Context, text: string): Text
     isFormElement(element: Element): boolean
+    /** Synchronously scope one style-prop application; logical setters and mutation records still run. */
+    batchStyleUpdate(element: Element, update: () => void): void
     beforeCommit?(container: Container): void
     afterCommit(container: Container): void
 }>

package/dist/runtime/dom/element.d.ts

@@ -9,11 +9,13 @@ declare class TaroElement extends TaroNode {
     ctx?: any;
     tagName: string;
     props: Record<string, any>;
-    style: Style;
+    private _style?: Style;
     dataset: Record<string, unknown>;
     innerHTML: string;
     constructor();
     private _stopPropagation;
+    get style(): Style;
+    set style(value: Style);
     get id(): string;
     set id(val: string);
     get className(): string;
@@ -29,11 +31,21 @@ declare class TaroElement extends TaroNode {
     get focus(): () => void;
     set focus(value: () => void);
     blur(): void;
+    /** Pre-mutation template classification: pure view for writes, static view for removals. Native hosts return false. */
+    prepareAttributeMutation(removing: boolean): boolean;
     setAttribute(qualifiedName: string, value: any): void;
-    /** Delegates after logical storage and ID/dataset updates; the flag records the prior template view classification. */
+    /**
+     * 逻辑属性、ID/dataset 和 mutation 记录更新后调用，尚未转换模板属性别名。
+     * value 为逻辑分支处理后的属性值，isPureView 记录修改前的模板分类。
+     * style 属性先触发 Style 委托，再进入此入口；默认准备模板属性及类型更新。
+     */
     delegateAttributeUpdate(qualifiedName: string, value: unknown, isPureView: boolean): void;
     removeAttribute(qualifiedName: string): void;
-    /** Delegates after successful logical removal; the flag records the prior template view classification. */
+    /**
+     * 逻辑移除完成后调用，isStaticView 记录移除前的模板分类。
+     * 普通属性缺失或被 hook 拦截时提前返回；style 先经 Style 委托清空。
+     * 默认准备模板属性及类型更新，host 可接管原生属性移除。
+     */
     delegateAttributeRemoval(qualifiedName: string, isStaticView: boolean): void;
     getAttribute(qualifiedName: string): string;
     getElementsByTagName(tagName: string): TaroElement[];
@@ -41,6 +53,12 @@ declare class TaroElement extends TaroNode {
     dispatchEvent(event: TaroEvent): boolean;
     addEventListener(type: any, handler: any, options: any): void;
     removeEventListener(type: any, handler: any, sideEffect?: boolean): void;
+    /**
+     * added=true 在添加处理器前调用，false 在移除后调用，负责模板节点类型副作用。
+     * sideEffect=false 只抑制模板更新；原生订阅通知由 delegateEventListener 独立处理。
+     * 默认实现按 added 选择上游添加/移除 hook，并按需查询组件别名。
+     */
+    delegateEventUpdate(added: boolean, sideEffect: boolean): void;
     static extend(methodName: string, options: TFunc | Record<string, any>): void;
 }
 

package/dist/runtime/dom/element.js

@@ -14,7 +14,6 @@ class TaroElement extends TaroNode {
         this.props = {};
         this.dataset = EMPTY_OBJ;
         this.nodeType = 1 /* NodeType.ELEMENT_NODE */;
-        this.style = new Style(this);
         hooks.call('patchElement', this);
     }
     _stopPropagation(event) {
@@ -22,7 +21,7 @@ class TaroElement extends TaroNode {
         let target = this;
         // eslint-disable-next-line no-cond-assign
         while ((target = target.parentNode)) {
-            const listeners = target.__handlers[event.type];
+            const listeners = target.getEventHandlers(event.type);
             if (!isArray(listeners)) {
                 continue;
             }
@@ -32,6 +31,13 @@ class TaroElement extends TaroNode {
             }
         }
     }
+    // Each element retains one mutable declaration, initialized on first style access.
+    get style() {
+        return this._style ??= new Style(this);
+    }
+    set style(value) {
+        this._style = value;
+    }
     get id() {
         return this.getAttribute(ID);
     }
@@ -56,7 +62,7 @@ class TaroElement extends TaroNode {
     get attributes() {
         const props = this.props;
         const propKeys = Object.keys(props);
-        const style = this.style.cssText;
+        const style = this.getAttribute(STYLE);
         const attrs = propKeys.map(key => ({ name: key, value: props[key] }));
         return attrs.concat(style ? { name: STYLE, value: style } : []);
     }
@@ -89,10 +95,14 @@ class TaroElement extends TaroNode {
     blur() {
         this.setAttribute(FOCUS, false);
     }
+    /** Capture template classification before logical mutation, observer records and removal hooks. */
+    prepareAttributeMutation(removing) {
+        return this.nodeName === VIEW && isHasExtractProp(this) === removing && !this.isAnyEventBinded();
+    }
     setAttribute(qualifiedName, value) {
         process.env.NODE_ENV !== 'production' && warn(isString(value) && value.length > PROPERTY_THRESHOLD, `元素 ${this.nodeName} 的 ${qualifiedName} 属性值数据量过大，可能会影响渲染性能。考虑降低图片转为 base64 的阈值或在 CSS 中使用 base64。`);
-        const isPureView = this.nodeName === VIEW && !isHasExtractProp(this) && !this.isAnyEventBinded();
-        if (qualifiedName !== STYLE) {
+        const isPureView = this.prepareAttributeMutation(false);
+        if (qualifiedName !== STYLE && MutationObserver.hasObservers) {
             MutationObserver.record({
                 target: this,
                 type: "attributes" /* MutationRecordType.ATTRIBUTES */,
@@ -126,7 +136,15 @@ class TaroElement extends TaroNode {
         }
         this.delegateAttributeUpdate(qualifiedName, value, isPureView);
     }
-    /** Delegates the stored attribute value; isPureView preserves the pre-mutation template classification. */
+    /**
+     * Taro 已完成逻辑属性写入、相应的 ID/dataset 更新及 mutation 记录，再通知 host。
+     * qualifiedName 保留属性名；value 是逻辑分支处理后的值，例如 id 已转为字符串，
+     * 此时尚未执行模板短名/组件别名转换。
+     * isPureView 保存修改前的模板分类，用于判断属性变化是否要求切换模板节点类型。
+     * 默认实现为已挂载节点准备属性和节点类型 payload；host 可接管原生属性写入。
+     * style 属性会先经 Style.delegateStyleUpdate，再进入此处；host 应按属性名
+     * 区分这两个通知的职责，复用 Style 已完成的逻辑样式处理。
+     */
     delegateAttributeUpdate(qualifiedName, value, isPureView) {
         // Serialization
         if (!this._root)
@@ -169,13 +187,15 @@ class TaroElement extends TaroNode {
         }
     }
     removeAttribute(qualifiedName) {
-        const isStaticView = this.nodeName === VIEW && isHasExtractProp(this) && !this.isAnyEventBinded();
-        MutationObserver.record({
-            target: this,
-            type: "attributes" /* MutationRecordType.ATTRIBUTES */,
-            attributeName: qualifiedName,
-            oldValue: this.getAttribute(qualifiedName)
-        });
+        const isStaticView = this.prepareAttributeMutation(true);
+        if (MutationObserver.hasObservers) {
+            MutationObserver.record({
+                target: this,
+                type: "attributes" /* MutationRecordType.ATTRIBUTES */,
+                attributeName: qualifiedName,
+                oldValue: this.getAttribute(qualifiedName)
+            });
+        }
         if (qualifiedName === STYLE) {
             this.style.cssText = '';
         }
@@ -191,7 +211,13 @@ class TaroElement extends TaroNode {
         }
         this.delegateAttributeRemoval(qualifiedName, isStaticView);
     }
-    /** Delegates a completed removal; interrupted and absent attributes retain their original early returns. */
+    /**
+     * Taro 执行原有属性移除逻辑后通知 host；普通属性不存在或被移除 hook 拦截时提前返回。
+     * qualifiedName 是被移除的属性名，isStaticView 保存移除前的模板分类。
+     * 默认实现准备属性清空及相应的模板类型更新；原生 host 接管原生属性移除。
+     * style 的清空先经过 Style.delegateStyleUpdate，再通知此方法，与设置 style 的顺序一致。
+     * 逻辑 props、移除拦截和 mutation 记录仍由 Taro 的公开方法维护。
+     */
     delegateAttributeRemoval(qualifiedName, isStaticView) {
         // Serialization
         if (!this._root)
@@ -233,7 +259,7 @@ class TaroElement extends TaroNode {
         }
     }
     getAttribute(qualifiedName) {
-        const attr = qualifiedName === STYLE ? this.style.cssText : this.props[qualifiedName];
+        const attr = qualifiedName === STYLE ? this._style?.cssText : this.props[qualifiedName];
         return attr !== null && attr !== void 0 ? attr : '';
     }
     getElementsByTagName(tagName) {
@@ -250,7 +276,7 @@ class TaroElement extends TaroNode {
     }
     dispatchEvent(event) {
         const cancelable = event.cancelable;
-        const listeners = this.__handlers[event.type];
+        const listeners = this.getEventHandlers(event.type);
         if (!isArray(listeners)) {
             return false;
         }
@@ -283,32 +309,35 @@ class TaroElement extends TaroNode {
         return listeners != null;
     }
     addEventListener(type, handler, options) {
-        const name = this.nodeName;
-        const SPECIAL_NODES = hooks.call('getSpecialNodes');
         let sideEffect = true;
         if (isObject(options) && options.sideEffect === false) {
             sideEffect = false;
             delete options.sideEffect;
         }
-        hooks.call('modifyAddEventListener', this, sideEffect, getComponentsAlias);
-        if (sideEffect !== false && !this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
-            const componentsAlias = getComponentsAlias();
-            const alias = componentsAlias[name]._num;
-            this.enqueueUpdate({
-                path: `${this._path}.${"nn" /* Shortcuts.NodeName */}`,
-                value: alias
-            });
-        }
+        this.delegateEventUpdate(true, sideEffect);
         super.addEventListener(type, handler, options);
     }
     removeEventListener(type, handler, sideEffect = true) {
         super.removeEventListener(type, handler);
+        this.delegateEventUpdate(false, sideEffect);
+    }
+    /**
+     * 事件监听变化对应的模板副作用，与原生订阅开关 delegateEventListener 分开。
+     * added=true 时在添加处理器之前调用，观察旧监听数组；added=false 时在移除之后调用，
+     * 观察剩余监听数组。默认实现据此把节点切换为可交互或 pure/static 模板。
+     * sideEffect=false 只抑制模板更新，逻辑监听器变更和原生订阅通知照常执行。
+     * 原生 host 可独立替换此模板副作用；Taro 的公开方法继续负责处理器语义。
+     */
+    delegateEventUpdate(added, sideEffect) {
         const name = this.nodeName;
         const SPECIAL_NODES = hooks.call('getSpecialNodes');
-        hooks.call('modifyRemoveEventListener', this, sideEffect, getComponentsAlias);
+        // 上游添加/移除方法各有一个模板扩展 hook；合并副作用实现后按 added 选择原 hook。
+        // 参数依次是当前逻辑节点、模板副作用开关和别名查询函数。函数保持延迟调用，
+        // 由 hook 按需取得组件别名；这一步处理模板类型，不注册或取消原生事件。
+        hooks.call(added ? 'modifyAddEventListener' : 'modifyRemoveEventListener', this, sideEffect, getComponentsAlias);
         if (sideEffect !== false && !this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
             const componentsAlias = getComponentsAlias();
-            const value = name === VIEW && !isHasExtractProp(this) ? PURE_VIEW : `static-${name}`;
+            const value = added ? name : (name === VIEW && !isHasExtractProp(this) ? PURE_VIEW : `static-${name}`);
             const valueAlias = componentsAlias[value]._num;
             this.enqueueUpdate({
                 path: `${this._path}.${"nn" /* Shortcuts.NodeName */}`,

package/dist/runtime/dom/event-source.js

@@ -8,7 +8,11 @@ class EventSource extends Map {
     removeNodeTree(child) {
         this.removeNode(child);
         const { childNodes } = child;
-        childNodes.forEach(node => this.removeNodeTree(node));
+        const length = childNodes.length;
+        // A local index visits the existing children in sibling order.
+        for (let index = 0; index < length; index++) {
+            this.removeNodeTree(childNodes[index]);
+        }
     }
 }
 const eventSource = new EventSource();

package/dist/runtime/dom/event-target.d.ts

@@ -1,9 +1,19 @@
 import { EventHandler, AddEventListenerOptions } from '../interface/event-target.js';
 
 declare class TaroEventTarget {
-    __handlers: Record<string, EventHandler[]>;
+    private _handlers?: Record<string, EventHandler[]>;
+    get __handlers(): Record<string, EventHandler[]>;
+    set __handlers(value: Record<string, EventHandler[]>);
+    /** Read an existing event array without materializing the handler table. */
+    getEventHandlers(type: string): EventHandler[] | undefined;
     addEventListener(type: string, handler: EventHandler, options?: boolean | AddEventListenerOptions): void;
     removeEventListener(type: string, handler: EventHandler): void;
+    /**
+     * 首个处理器存入后 subscribed=true，末个移除后为 false；复用现有处理器数组判断。
+     * type 为小写逻辑事件名，regionchange 已展开为 begin/end；host 负责平台订阅关系。
+     * 默认实现为空，处理器、once 和移除匹配由 Taro 维护。
+     */
+    delegateEventListener(type: string, subscribed: boolean): void;
     isAnyEventBinded(): boolean;
     isOnlyClickBinded(): boolean;
 }