vite-plugin-taro 0.5.3 → 0.5.5

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.3",
+  "version": "0.5.5",
   "author": "sep2",
   "description": "Vite 8 plugin for building one React/Taro codebase for WeChat Mini Program and H5 targets.",
   "type": "module",
@@ -12,7 +12,7 @@
   "bugs": {
     "url": "https://github.com/sep2/vite-plugin-taro/issues"
   },
-  "homepage": "https://github.com/sep2/vite-plugin-taro/tree/main/packages/vite-plugin-taro#readme",
+  "homepage": "https://vpt.js.org",
   "main": "./dist/vite.js",
   "module": "./dist/vite.js",
   "types": "./dist/vite.d.ts",
@@ -58,24 +58,25 @@
     "@babel/plugin-transform-modules-systemjs": "^7.29.8",
     "@rolldown/plugin-babel": "^0.2.3",
     "@tailwindcss-mangle/engine": "0.2.0",
-    "@tarojs/components": "^4.2.0",
-    "@tarojs/helper": "^4.2.0",
-    "@tarojs/plugin-platform-h5": "^4.2.0",
-    "@tarojs/plugin-platform-weapp": "^4.2.0",
-    "@tarojs/router": "^4.2.0",
-    "@tarojs/runtime": "^4.2.0",
-    "@tarojs/taro": "^4.2.0",
+    "@tarojs/components": "4.2.0",
+    "@tarojs/helper": "4.2.0",
+    "@tarojs/plugin-platform-h5": "4.2.0",
+    "@tarojs/plugin-platform-weapp": "4.2.0",
+    "@tarojs/router": "4.2.0",
+    "@tarojs/runtime": "4.2.0",
+    "@tarojs/taro": "4.2.0",
     "@vitejs/plugin-react": "^6.0.5",
     "@weapp-tailwindcss/postcss": "3.2.8",
-    "babel-plugin-transform-taroapi": "^4.2.0",
+    "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.3",
-    "@tarojs/react": "npm:vite-plugin-taro-react@0.5.3"
+    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.5.5",
+    "@tarojs/react": "npm:vite-plugin-taro-react@0.5.5"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/node/plugins/client/client-taro.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from 'vite'
 import type { VitePluginTaroTarget } from '../../../options.ts'
 import { normalizeModuleId } from '../../utils/modules.ts'
-import { packageRequire, resolvePackageFile } from '../../utils/packages.ts'
+import { resolvePackageFile } from '../../utils/packages.ts'
 import { clientTaroNativeId } from './constant.ts'
 import { injectTaroFrameworkApis } from './inject-taro-framework-apis.ts'
 
@@ -33,15 +33,22 @@ const clientTaroModules = new Map([
 
 /** Creates the shared Taro facade backed by the selected target's API implementation. */
 export function createClientTaroPlugin(target: VitePluginTaroTarget): Plugin {
-    const platformTaroPath = resolvePlatformTaroPath(target)
+    const platformTaroId = resolvePlatformTaroId(target)
 
     return {
         name: 'vpt:client-taro',
         enforce: 'pre',
 
-        resolveId(id, importer) {
+        async resolveId(id, importer) {
             if (id === '@tarojs/taro') {
-                return isClientTaroFacade(importer) ? platformTaroPath : clientTaroApiPath
+                if (!isClientTaroFacade(importer)) {
+                    return clientTaroApiPath
+                }
+
+                // Delegate the platform backend to Vite instead of returning an absolute dependency path. H5 marks this
+                // backend as an optimization root, so delegation lets Vite substitute its prebundled facade. Removing it
+                // bypasses CommonJS interop and exposes backend details such as base64-js directly to the browser.
+                return this.resolve(platformTaroId, importer, { skipSelf: true })
             }
             return clientTaroModules.get(id)
         },
@@ -55,10 +62,8 @@ export function createClientTaroPlugin(target: VitePluginTaroTarget): Plugin {
     }
 }
 
-function resolvePlatformTaroPath(target: VitePluginTaroTarget): string {
-    return target === 'h5'
-        ? packageRequire.resolve('@tarojs/plugin-platform-h5/dist/runtime/apis')
-        : packageRequire.resolve('@tarojs/taro')
+function resolvePlatformTaroId(target: VitePluginTaroTarget): string {
+    return target === 'h5' ? '@tarojs/plugin-platform-h5/dist/runtime/apis' : '@tarojs/taro'
 }
 
 function isClientTaroFacade(importer: string | undefined): boolean {

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

@@ -0,0 +1,110 @@
+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', {
+    paths: [packageRequire.resolve('@tarojs/components/package.json')]
+})
+const normalizedStencilClientPath = normalizeModuleId(stencilClientPath)
+
+/**
+ * Creates the compiler-owned adaptation of Stencil's client style insertion.
+ *
+ * Taro components inject their styles through this internal client. Its default insertion point places those styles
+ * after application CSS, allowing component defaults to override application rules. The adapter is registered in both
+ * Vite's application pipeline and the independent dependency-optimization build: removing either registration leaves
+ * production or development with an unadapted client. This explicit dual registration removes the former optimization
+ * exclusion while keeping one transformation implementation.
+ */
+export function createStencilClientAdapter(): Plugin {
+    return {
+        name: 'vpt:h5-stencil-client',
+        transform: adaptStencilClient
+    }
+}
+
+/**
+ * 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
+    }
+
+    return transformWithOxcWalker({
+        code,
+        filename: id,
+        sourcemap: true,
+        createVisitor: createStencilVisitor
+    })
+}
+
+/**
+ * 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
+        }
+
+        // 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
+        }
+
+        // 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,6 +1,4 @@
-import type { types as BabelTypes } from '@babel/core'
-import { type NodePath, type PluginObj, types } from '@babel/core'
-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'
@@ -8,6 +6,7 @@ import { toViteFileImportPath } from '../../utils/modules.ts'
 import { packageRequire } from '../../utils/packages.ts'
 import { clientTaroApiId } from '../client/client-taro.ts'
 import { h5AppPath } from './constant.ts'
+import { createStencilClientAdapter } from './create-stencil-client-adapter.ts'
 import { createModuleResolver } from './resolver/module-resolver.ts'
 
 /** Creates the plugins that own the H5 target. */
@@ -28,12 +27,6 @@ function createH5TargetPlugin(options: VitePluginTaroOptions): Plugin {
                 resolve: {
                     mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'jsnext'],
                     alias: [
-                        {
-                            find: /^@stencil\/core\/internal\/client$/,
-                            replacement: packageRequire.resolve('@stencil/core/internal/client', {
-                                paths: [packageRequire.resolve('@tarojs/components/package.json')]
-                            })
-                        },
                         {
                             find: /^@tarojs\/components$/,
                             replacement: packageRequire.resolve('@tarojs/components/lib/react')
@@ -45,7 +38,15 @@ function createH5TargetPlugin(options: VitePluginTaroOptions): Plugin {
                     ]
                 },
                 optimizeDeps: {
-                    exclude: ['@stencil/core/internal/client']
+                    // The compiler-owned H5 app and Taro facade are injected after Vite's initial HTML scan. Prebundle
+                    // the facade's platform backend as one boundary so its CommonJS implementation details receive
+                    // interop without duplicating their package list. ReactDOM needs the same treatment for the H5 app.
+                    include: ['@tarojs/plugin-platform-h5/dist/runtime/apis', 'react-dom/client'],
+                    // Dependency optimization is its own Rolldown build and does not run application transform plugins.
+                    // Register the same adapter there so optimized Taro components cannot embed Stencil's original client.
+                    rolldownOptions: {
+                        plugins: [createStencilClientAdapter()]
+                    }
                 },
                 build: {
                     target: esTarget
@@ -98,86 +99,53 @@ function createH5IndexHtmlTags(): HtmlTagDescriptor[] {
     ]
 }
 
-/** Creates H5-only Babel transforms for Stencil CSS ordering and Taro API imports. */
-function createH5SupportPlugins(): PluginOption[] {
-    return [
-        babel({
-            include: /[\\/]@stencil[\\/]core[\\/]internal[\\/]client[\\/]index\.js(?:\?.*)?$/,
-            exclude: [],
-            plugins: [rewriteStencilStyleInsertion]
-        }),
-        babel({
-            plugins: [
-                [
-                    packageRequire.resolve('babel-plugin-transform-taroapi'),
-                    {
-                        packageName: clientTaroApiId,
-                        definition: packageRequire(
-                            packageRequire.resolve('@tarojs/plugin-platform-h5/dist/definition.json')
-                        )
-                    }
-                ]
-            ]
-        })
-    ]
-}
+/**
+ * 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]/
 
-/** 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
-                }
+/** 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'))
 
-                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')
-                        )
-                    )
+    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 }
         }
-    }
-}
-
-/** 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 })
-    )
-}
-
-/** 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)]
-    )
+/** Creates H5-only transforms for Stencil CSS ordering and Taro API imports. */
+function createH5SupportPlugins(): PluginOption[] {
+    return [
+        createStencilClientAdapter(),
+        babel({
+            presets: [createH5TaroApiPreset()]
+        })
+    ]
 }
 
 /** Creates H5 Taro compile-time constants. */