vite-plugin-taro 0.5.3 → 0.5.5

package/README.en.md

@@ -1,7 +1,7 @@
 # vite-plugin-taro
 
 [![npm version](https://img.shields.io/npm/v/vite-plugin-taro.svg)](https://www.npmjs.com/package/vite-plugin-taro)
-![Vite compatibility](https://registry.vite.dev/api/badges?package=vite-plugin-taro&tool=vite)
+![Vite](https://img.shields.io/npm/dependency-version/vite-plugin-taro/peer/vite?label=Vite)
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
 [简体中文](README.md) | English

package/README.md

@@ -1,7 +1,7 @@
 # vite-plugin-taro
 
 [![npm version](https://img.shields.io/npm/v/vite-plugin-taro.svg)](https://www.npmjs.com/package/vite-plugin-taro)
-![Vite compatibility](https://registry.vite.dev/api/badges?package=vite-plugin-taro&tool=vite)
+![Vite](https://img.shields.io/npm/dependency-version/vite-plugin-taro/peer/vite?label=Vite)
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
 简体中文 | [English](README.en.md)

package/dist/node/plugins/client/client-taro.js

@@ -1,5 +1,5 @@
 import { normalizeModuleId } from '../../utils/modules.js';
-import { packageRequire, resolvePackageFile } from '../../utils/packages.js';
+import { resolvePackageFile } from '../../utils/packages.js';
 import { clientTaroNativeId } from './constant.js';
 import { injectTaroFrameworkApis } from './inject-taro-framework-apis.js';
 /*
@@ -26,13 +26,19 @@ const clientTaroModules = new Map([
 ]);
 /** Creates the shared Taro facade backed by the selected target's API implementation. */
 export function createClientTaroPlugin(target) {
-    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);
         },
@@ -44,10 +50,8 @@ export function createClientTaroPlugin(target) {
         }
     };
 }
-function resolvePlatformTaroPath(target) {
-    return target === 'h5'
-        ? packageRequire.resolve('@tarojs/plugin-platform-h5/dist/runtime/apis')
-        : packageRequire.resolve('@tarojs/taro');
+function resolvePlatformTaroId(target) {
+    return target === 'h5' ? '@tarojs/plugin-platform-h5/dist/runtime/apis' : '@tarojs/taro';
 }
 function isClientTaroFacade(importer) {
     return importer !== undefined && normalizeModuleId(importer) === normalizedClientTaroApiPath;

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

@@ -0,0 +1,21 @@
+import type { Plugin } from 'vite';
+/**
+ * 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 declare function createStencilClientAdapter(): Plugin;
+/**
+ * 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 declare function adaptStencilClient(code: string, id: string): import("../../utils/transform.ts").AstTransformResult | undefined;

package/dist/node/plugins/h5/create-stencil-client-adapter.js

@@ -0,0 +1,92 @@
+import { normalizeModuleId } from '../../utils/modules.js';
+import { transformWithOxcWalker } from '../../utils/oxc-transform.js';
+import { packageRequire } from '../../utils/packages.js';
+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() {
+    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, id) {
+    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) {
+    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/dist/node/plugins/h5/plugins.d.ts

@@ -2,3 +2,13 @@ import type { PluginOption } from 'vite';
 import type { VitePluginTaroOptions } from '../../../options.ts';
 /** Creates the plugins that own the H5 target. */
 export declare function createH5TargetPlugins(options: VitePluginTaroOptions): PluginOption[];
+/**
+ * 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 declare const h5TaroApiTransformCodeFilter: RegExp;

package/dist/node/plugins/h5/plugins.js

@@ -1,10 +1,10 @@
-import { types } from '@babel/core';
-import babel from '@rolldown/plugin-babel';
+import babel, { defineRolldownBabelPreset } from '@rolldown/plugin-babel';
 import { esTarget } from '../../utils/constant.js';
 import { toViteFileImportPath } from '../../utils/modules.js';
 import { packageRequire } from '../../utils/packages.js';
 import { clientTaroApiId } from '../client/client-taro.js';
 import { h5AppPath } from './constant.js';
+import { createStencilClientAdapter } from './create-stencil-client-adapter.js';
 import { createModuleResolver } from './resolver/module-resolver.js';
 /** Creates the plugins that own the H5 target. */
 export function createH5TargetPlugins(options) {
@@ -21,12 +21,6 @@ function createH5TargetPlugin(options) {
                 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')
@@ -38,7 +32,15 @@ function createH5TargetPlugin(options) {
                     ]
                 },
                 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
@@ -86,64 +88,51 @@ function createH5IndexHtmlTags() {
         }
     ];
 }
-/** 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() {
     return [
+        createStencilClientAdapter(),
         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'))
-                    }
-                ]
-            ]
+            presets: [createH5TaroApiPreset()]
         })
     ];
 }
-/** Keeps Stencil-injected Taro component styles before application stylesheets. */
-function rewriteStencilStyleInsertion() {
-    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')));
-            }
-        }
-    };
-}
-/** Identifies Stencil's default component-style insertion call. */
-function isStencilStyleInsertBeforeCall(callPath) {
-    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, selector) {
-    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) {
-    return types.callExpression(types.memberExpression(types.identifier('styleContainerNode'), types.identifier('querySelector')), [types.stringLiteral(selector)]);
-}
 /** Creates H5 Taro compile-time constants. */
 function createH5Defines() {
     return {