vite-plugin-taro 0.5.4 → 0.5.6

package/dist/runtime/wx/dev/dev-runtime.js

@@ -5,9 +5,8 @@
 // The `DevRuntime` base class is injected into the chunk by Rolldown's dev-mode
 // transform, so the WX host only extends it.
 //
-// Delivery is passive: every valid hmr/patches.js suffix is acknowledged by Rolldown
-// sequence, then applied synchronously before the Page continues evaluating. Already-applied
-// sequences are ignored when another Page requires the same physical file.
+// Every Page explicitly passes the inert hmr/patches.js export here before importing its capsule. The runtime applies that
+// cumulative suffix synchronously, reports its successful application frontier, and ignores sequences replayed by other Pages.
 /**
  * Per-module hot state, mirroring Rolldown's web runtime: accept is a passive registration;
  * the propagation invokes the previous execution's callbacks with the fresh exports.
@@ -134,14 +133,12 @@ class WxDevRuntime extends DevRuntime {
             }
         }
     }
-    /** Consumed once per App heap from hmr/info.js; the host buildId is the delivery identity. */
+    /** Consumed once per App heap from hmr/info.js; the host buildId identifies its cumulative patch history. */
     initialize(info) {
         if (this.hmrInfo) {
             return;
         }
         this.hmrInfo = info;
-        // Anchor: the host publishes only after the runtime reports its delivery position.
-        void this.sendReport({ kind: 'delivery', seq: this.appliedSeq });
     }
     /** True between a patch delivery and the next page show: a hot reload is in progress. */
     hotReloading = false;
@@ -153,42 +150,89 @@ class WxDevRuntime extends DevRuntime {
     clearHotReloading() {
         this.hotReloading = false;
     }
-    /** The only direct effect of hmr/patches.js: validate, store, acknowledge, and apply. */
-    storePatches(payload) {
+    /** Applies one Page-delivered payload before that Page imports its capsule. */
+    applyPatches(payload) {
+        // The initial physical dependency exports undefined until the host has a patch range.
+        if (!payload)
+            return;
         const info = this.hmrInfo;
         if (!info || payload.buildId !== info.buildId) {
             console.warn('[vpt] patches for a stale build');
             return;
         }
-        const deliveredSeq = Math.max(this.appliedSeq, payload.patches.at(-1)?.seq ?? 0);
-        void this.sendReport({ kind: 'delivery', seq: deliveredSeq });
         // A delivered patch means DevTools is about to replay the page lifecycle on the
         // re-executing Pages; the capsule wrapper suppresses the synthetic unmount/mount so
         // the React tree survives and Refresh swaps the code in place.
         this.hotReloading = true;
         // Apply synchronously: the page's imports below the require resolve against the
         // freshly registered modules, so the re-executed Page evaluates with the new code.
-        this.applyPatches(payload.patches);
+        if (this.applyPatchBatch(payload.patches)) {
+            // The host may publish later generations while this synchronous apply runs. Reporting only afterward makes this
+            // the application frontier: publisher history is never pruned merely because its JavaScript file was observed.
+            void this.sendReport({ kind: 'applied', seq: this.appliedSeq });
+        }
     }
-    /** Applies one physical suffix in Rolldown sequence order. */
-    applyPatches(patches) {
-        for (const patch of patches) {
-            if (patch.seq <= this.appliedSeq)
-                continue;
-            try {
-                const expectedSeq = this.appliedSeq + 1;
-                if (patch.seq !== expectedSeq) {
-                    throw new Error(`missing patch sequence ${expectedSeq}`);
+    /**
+     * Folds one cumulative physical patch file into a single logical HMR update.
+     *
+     * `hmr/patches.js` can contain several unacknowledged Rolldown patches and can be required by several Page shells. The
+     * runtime must therefore ignore replayed sequences, reject a missing sequence, and move directly from the currently live
+     * module generation to the latest published generation without rendering intermediate generations.
+     *
+     * For an appliedSeq of 4:
+     *
+     * - [5, 6, 7] registers every factory, performs one update using their unioned changedIds, commits appliedSeq 7, and reports 7;
+     * - a second Page evaluating [5, 6, 7] skips the complete replay and leaves the latest factories untouched;
+     * - [5, 7] fails at the expected sequence 6, keeps appliedSeq 4, and requests a full rebuild because factory 6 is unrecoverable.
+     */
+    applyPatchBatch(patches) {
+        // Keep the initial watermark immutable throughout the fold. Comparing replays against a moving watermark would allow
+        // a duplicate new sequence in the same payload to masquerade as an already-applied patch.
+        const previousSeq = this.appliedSeq;
+        // Mutable only during this synchronous pass. `nextSeq` validates continuity while `changedIds` unions every incremental
+        // patch's roots for the one final graph traversal; neither value escapes into persistent runtime state.
+        let nextSeq = previousSeq + 1;
+        const changedIds = new Set();
+        try {
+            for (const patch of patches) {
+                // The same physical file is evaluated once per affected Page. Those later evaluations replay its prefix and
+                // must not let an old factory overwrite the newer factory already stored in the Rolldown runtime.
+                if (patch.seq <= previousSeq) {
+                    continue;
                 }
+                // Every patch is incremental: if one physical write was missed, later factories cannot reconstruct modules
+                // changed only by that missing patch. Rebuilding is safer than silently running a mixed module generation.
+                if (patch.seq !== nextSeq) {
+                    throw new Error(`missing patch sequence ${nextSeq}`);
+                }
+                // A patch factory only registers module graphs and module factories; it does not execute application modules.
+                // Running all of them first leaves the registry at the latest generation while avoiding intermediate renders.
                 patch.factory();
-                this.applyHmrUpdate(patch.changedIds);
-                this.appliedSeq = patch.seq;
+                for (const changedId of patch.changedIds) {
+                    changedIds.add(changedId);
+                }
+                nextSeq++;
             }
-            catch (error) {
-                console.warn(`[vpt] patch sequence ${patch.seq} failed; apply stopped`, error);
-                void this.sendReport({ kind: 'rebuild' });
-                return;
+            // A payload containing only replayed sequences requires no graph work and must not alter the application watermark.
+            if (nextSeq === previousSeq + 1) {
+                return true;
             }
+            // Apply once after every factory is registered. React Refresh arms a newly executed module's hot.accept callback
+            // in a microtask; applying consecutive patches separately would inspect that intermediate context too early and
+            // incorrectly bubble through the capsule to the native Page shell as though no HMR boundary existed.
+            this.applyHmrUpdate(changedIds);
+            // Commit application only after graph propagation and boundary callbacks succeed. A failure leaves the old watermark
+            // intact and requests a full rebuild below, so a partially applied batch is never acknowledged as healthy.
+            this.appliedSeq = nextSeq - 1;
+            return true;
+        }
+        catch (error) {
+            console.warn('[vpt] patch batch failed; apply stopped', error);
+            void this.sendReport({
+                kind: 'rebuild',
+                reason: Error.isError(error) ? error.message : String(error)
+            });
+            return false;
         }
     }
     /** Sends one metadata-only report to the host; executable code never travels over HTTP. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-taro",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "author": "sep2",
   "description": "Vite 8 plugin for building one React/Taro codebase for WeChat Mini Program and H5 targets.",
   "type": "module",
@@ -68,14 +68,15 @@
     "@vitejs/plugin-react": "^6.0.5",
     "@weapp-tailwindcss/postcss": "3.2.8",
     "babel-plugin-transform-taroapi": "4.2.0",
+    "oxc-walker": "1.1.1",
     "picocolors": "^1.1.1",
     "react-reconciler": "0.33.0",
     "react-refresh": "^0.18.0",
     "rolldown": "1.2.3",
     "tailwindcss": "^4.3.3",
     "weapp-tailwindcss": "^5.2.11",
-    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.5.4",
-    "@tarojs/react": "npm:vite-plugin-taro-react@0.5.4"
+    "@tarojs/react": "npm:vite-plugin-taro-react@0.5.6",
+    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.5.6"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/node/plugins/h5/create-stencil-client-adapter.ts

@@ -1,7 +1,8 @@
-import type { types as BabelTypes } from '@babel/core'
-import { type NodePath, type PluginObj, transformAsync, types } from '@babel/core'
+import type { WalkerEnter } from 'oxc-walker'
+import type { RolldownMagicString } from 'rolldown'
 import type { Plugin } from 'vite'
 import { normalizeModuleId } from '../../utils/modules.ts'
+import { transformWithOxcWalker } from '../../utils/oxc-transform.ts'
 import { packageRequire } from '../../utils/packages.ts'
 
 const stencilClientPath = packageRequire.resolve('@stencil/core/internal/client', {
@@ -25,85 +26,85 @@ export function createStencilClientAdapter(): Plugin {
     }
 }
 
-/** Applies the shared Stencil adaptation in either the application or dependency-optimization pipeline. */
-export async function adaptStencilClient(code: string, id: string) {
+/**
+ * Applies the shared Stencil adaptation with one Oxc parse and one range edit.
+ *
+ * The physical module check is essential because the optimizer and application pipelines can
+ * present query-suffixed or platform-normalized IDs. Transforming by source text alone could
+ * modify user code that happens to contain the same insertion expression. Source maps remain
+ * enabled because this adapter runs before Vite/Rolldown's later transforms in both pipelines;
+ * dropping the map would attribute downstream diagnostics to the edited generated positions.
+ */
+export function adaptStencilClient(code: string, id: string) {
     if (normalizeModuleId(id) !== normalizedStencilClientPath) {
         return
     }
 
-    const transformed = await transformAsync(code, {
-        babelrc: false,
-        configFile: false,
-        filename: stencilClientPath,
-        plugins: [rewriteStencilStyleInsertion],
-        sourceFileName: stencilClientPath,
-        sourceMaps: true
+    return transformWithOxcWalker({
+        code,
+        filename: id,
+        sourcemap: true,
+        createVisitor: createStencilVisitor
     })
-
-    if (transformed?.code === undefined || transformed.code === null) {
-        throw new Error(`Failed to adapt Stencil client: ${stencilClientPath}`)
-    }
-
-    return {
-        code: transformed.code,
-        map: transformed.map
-    }
 }
 
-/** Keeps Stencil-injected Taro component styles before application stylesheets. */
-function rewriteStencilStyleInsertion(): PluginObj {
-    return {
-        name: 'vpt:rewrite-stencil-style-insertion',
-        visitor: {
-            CallExpression(callPath) {
-                if (!isStencilStyleInsertBeforeCall(callPath)) {
-                    return
-                }
-
-                callPath
-                    .get('arguments.1')
-                    .replaceWith(
-                        types.conditionalExpression(
-                            types.callExpression(
-                                types.memberExpression(types.identifier('scopeId'), types.identifier('startsWith')),
-                                [types.stringLiteral('sc-taro-')]
-                            ),
-                            createStyleQuery('style,link[rel="stylesheet"]'),
-                            createStyleQuery('link')
-                        )
-                    )
-            }
+/**
+ * Finds Stencil's exact default style insertion call and replaces only its insertion anchor.
+ *
+ * Stencil normally inserts `styleElm` before the first stylesheet link. During Vite development,
+ * application CSS is commonly represented by a `<style>` element instead, so that link-only
+ * lookup returns `null` and Taro component defaults are appended after application CSS. Those
+ * defaults then override the application's selectors despite having the same specificity.
+ *
+ * Taro Stencil components are identified by the `sc-taro-` scope prefix. For those components,
+ * the replacement anchors before the first `<style>` or stylesheet `<link>`, keeping component
+ * defaults before application rules. The original link-only lookup is preserved for every other
+ * Stencil component so VPT does not globally redefine upstream style-ordering behavior.
+ */
+function createStencilVisitor(editor: RolldownMagicString): WalkerEnter {
+    return function enter(node) {
+        if (
+            node.type !== 'CallExpression' ||
+            node.callee.type !== 'MemberExpression' ||
+            node.callee.computed ||
+            node.callee.object.type !== 'Identifier' ||
+            node.callee.object.name !== 'styleContainerNode' ||
+            node.callee.property.type !== 'Identifier' ||
+            node.callee.property.name !== 'insertBefore'
+        ) {
+            return
         }
-    }
-}
 
-/** Identifies Stencil's default component-style insertion call. */
-function isStencilStyleInsertBeforeCall(callPath: NodePath<BabelTypes.CallExpression>): boolean {
-    const { callee, arguments: callArguments } = callPath.node
-    return (
-        types.isMemberExpression(callee) &&
-        types.isIdentifier(callee.object, { name: 'styleContainerNode' }) &&
-        types.isIdentifier(callee.property, { name: 'insertBefore' }) &&
-        types.isIdentifier(callArguments[0], { name: 'styleElm' }) &&
-        isStyleQuery(callArguments[1], 'link')
-    )
-}
-
-/** Identifies one style-container querySelector call. */
-function isStyleQuery(node: BabelTypes.Node | null | undefined, selector: string): boolean {
-    return (
-        types.isCallExpression(node) &&
-        types.isMemberExpression(node.callee) &&
-        types.isIdentifier(node.callee.object, { name: 'styleContainerNode' }) &&
-        types.isIdentifier(node.callee.property, { name: 'querySelector' }) &&
-        types.isStringLiteral(node.arguments[0], { value: selector })
-    )
-}
+        // Match the complete upstream call, not merely `insertBefore`: range edits have no
+        // generated-AST type safety, so a broad match could silently alter unrelated runtime
+        // behavior when Stencil changes its implementation.
+        const [style, query] = node.arguments
+        const selector = query?.type === 'CallExpression' ? query.arguments[0] : undefined
+        if (
+            node.arguments.length !== 2 ||
+            style?.type !== 'Identifier' ||
+            style.name !== 'styleElm' ||
+            query?.type !== 'CallExpression' ||
+            query.callee.type !== 'MemberExpression' ||
+            query.callee.computed ||
+            query.callee.object.type !== 'Identifier' ||
+            query.callee.object.name !== 'styleContainerNode' ||
+            query.callee.property.type !== 'Identifier' ||
+            query.callee.property.name !== 'querySelector' ||
+            selector?.type !== 'Literal' ||
+            selector.value !== 'link'
+        ) {
+            return
+        }
 
-/** Creates one style-container querySelector call. */
-function createStyleQuery(selector: string): ReturnType<typeof types.callExpression> {
-    return types.callExpression(
-        types.memberExpression(types.identifier('styleContainerNode'), types.identifier('querySelector')),
-        [types.stringLiteral(selector)]
-    )
+        // Replace only the second argument expression. Preserving the surrounding Stencil
+        // source avoids Babel-style whole-file regeneration and keeps its formatting, comments,
+        // and source positions stable. Removing this edit restores the H5 cascade bug described
+        // above; applying it unconditionally would change non-Taro Stencil components.
+        editor.overwrite(
+            query.start,
+            query.end,
+            'scopeId.startsWith("sc-taro-") ? styleContainerNode.querySelector("style,link[rel=\\"stylesheet\\"]") : styleContainerNode.querySelector("link")'
+        )
+    }
 }

package/src/node/plugins/h5/plugins.ts

@@ -1,4 +1,4 @@
-import babel from '@rolldown/plugin-babel'
+import babel, { defineRolldownBabelPreset } from '@rolldown/plugin-babel'
 import type { HtmlTagDescriptor, Plugin, PluginOption } from 'vite'
 import type { VitePluginTaroOptions } from '../../../options.ts'
 import { esTarget } from '../../utils/constant.ts'
@@ -99,22 +99,51 @@ function createH5IndexHtmlTags(): HtmlTagDescriptor[] {
     ]
 }
 
-/** Creates H5-only Babel transforms for Stencil CSS ordering and Taro API imports. */
+/**
+ * Coarse source prefilter for the upstream Taro API transform.
+ *
+ * The plugin has two independent responsibilities: adapting imports from the compiler facade and normalizing camel-case
+ * H5 ARIA attributes. Matching `aria` followed by any uppercase letter is intentionally broader than Taro's current
+ * attribute table. A duplicated exact list would silently stop routing files through Babel when upstream adds another
+ * attribute, while a broad false positive costs only one unnecessary transform. Ordinary application modules match
+ * neither branch and remain entirely outside Babel's parser and generator.
+ */
+export const h5TaroApiTransformCodeFilter = /virtual:taro\/api|\baria[A-Z]/
+
+/** Creates a filterable Babel preset containing Taro's upstream, scope-aware API transform. */
+function createH5TaroApiPreset() {
+    const transformTaroApiPath = packageRequire.resolve('babel-plugin-transform-taroapi')
+    const definition = packageRequire(packageRequire.resolve('@tarojs/plugin-platform-h5/dist/definition.json'))
+
+    return defineRolldownBabelPreset({
+        preset: function h5TaroApiPreset() {
+            return {
+                plugins: [
+                    [
+                        transformTaroApiPath,
+                        {
+                            packageName: clientTaroApiId,
+                            definition
+                        }
+                    ]
+                ]
+            }
+        },
+        rolldown: {
+            // @rolldown/plugin-babel can lift a preset filter into its native transform hook. The Taro plugin must be
+            // nested in this preset rather than passed through Babel's top-level `plugins`: explicit plugins may apply
+            // to every module, so their presence deliberately disables Rolldown's preset-level code filtering.
+            filter: { code: h5TaroApiTransformCodeFilter }
+        }
+    })
+}
+
+/** Creates H5-only transforms for Stencil CSS ordering and Taro API imports. */
 function createH5SupportPlugins(): PluginOption[] {
     return [
         createStencilClientAdapter(),
         babel({
-            plugins: [
-                [
-                    packageRequire.resolve('babel-plugin-transform-taroapi'),
-                    {
-                        packageName: clientTaroApiId,
-                        definition: packageRequire(
-                            packageRequire.resolve('@tarojs/plugin-platform-h5/dist/definition.json')
-                        )
-                    }
-                ]
-            ]
+            presets: [createH5TaroApiPreset()]
         })
     ]
 }