vite-plugin-taro 0.3.2 → 0.4.0

package/dist/runtime/wx/systemjs/system-core.js

@@ -0,0 +1,331 @@
+// biome-ignore-start lint: vendored SystemJS core
+/*
+ * SystemJS Core
+ *
+ * Provides
+ * - System.import and System.importSync
+ * - System.register support for
+ *     live bindings, function hoisting through circular references,
+ *     reexports, dynamic import, import.meta.url, top-level await
+ * - System.getRegister to get the registration
+ * - Symbol.toStringTag support in Module objects
+ * - Hookable System.createContext to customize import.meta
+ *
+ * Core comes with no System.prototype.resolve or
+ * System.prototype.instantiate implementations
+ */
+var envGlobal = global;
+var hasSymbol = typeof Symbol !== 'undefined';
+function errMsg(errCode, msg) {
+    return (msg || '') + ' (SystemJS https://github.com/systemjs/systemjs/blob/main/docs/errors.md#' + errCode + ')';
+}
+export { REGISTRY, systemJSPrototype };
+var toStringTag = hasSymbol && Symbol.toStringTag;
+var REGISTRY = hasSymbol ? Symbol() : '@';
+function SystemJS() {
+    this[REGISTRY] = {};
+}
+var systemJSPrototype = SystemJS.prototype;
+systemJSPrototype.import = function (id, parentId, meta) {
+    var loader = this;
+    if (parentId && typeof parentId === 'object')
+        meta = parentId;
+    var load = getOrCreateLoad(loader, id, undefined, meta);
+    return Promise.resolve(load.C || topLevelLoad(loader, load));
+};
+/**
+ * Instantiates, links, and evaluates a graph without yielding the current JavaScript turn.
+ *
+ * WX placement guarantees that every registration in a synchronous graph uses the main-package transport. Encountering
+ * a thenable therefore indicates a fatal placement invariant violation. No rollback is attempted: rows already published
+ * to the shared registry remain there and the current runtime heap must not be reused.
+ */
+systemJSPrototype.importSync = function (id) {
+    var loader = this;
+    var load = linkLoadSync(loader, id);
+    var execution = postOrderExec(loader, load, {});
+    if (isThenable(execution))
+        throw createAsyncGraphError(id);
+    // Share completion and namespace identity with normal System.import calls.
+    load.C = load.n;
+    return load.n;
+};
+// Hookable createContext function -> allowing eg custom import meta
+systemJSPrototype.createContext = function (parentId) {
+    return { url: parentId };
+};
+/** Publishes one synchronous row before linking dependencies so cycles observe the same live namespace. */
+function linkLoadSync(loader, id) {
+    var existing = loader[REGISTRY][id];
+    if (existing)
+        return existing;
+    var registration = loader.instantiate(id);
+    if (isThenable(registration))
+        throw createAsyncGraphError(id);
+    if (!registration)
+        throw Error(errMsg(2, id));
+    // This row is intentionally mutable SystemJS-owned linking and execution state.
+    var load = {
+        id: id,
+        i: [],
+        n: createModuleNamespace(),
+        h: false,
+        d: undefined,
+        e: undefined,
+        C: undefined
+    };
+    loader[REGISTRY][id] = load;
+    var declared = registration[1](createExport(load), registration[1].length === 2 ? createDeclarationContext(loader, id) : undefined);
+    load.e = declared.execute || function () { };
+    var setters = declared.setters || [];
+    load.d = registration[0].map(function (dependency, index) {
+        var dependencyLoad = linkLoadSync(loader, dependency);
+        var setter = setters[index];
+        if (setter) {
+            dependencyLoad.i.push(setter);
+            if (dependencyLoad.h || dependencyLoad.C === dependencyLoad.n)
+                setter(dependencyLoad.n);
+        }
+        return dependencyLoad;
+    });
+    return load;
+}
+/** Supplies dynamic import and import.meta using the canonical IDs emitted at build time. */
+function createDeclarationContext(loader, id) {
+    return {
+        import: function (dependency, meta) {
+            return loader.import(dependency, undefined, meta);
+        },
+        meta: loader.createContext(id)
+    };
+}
+/** Creates a live module namespace shared by both completion policies. */
+function createModuleNamespace() {
+    var namespace = Object.create(null);
+    if (toStringTag)
+        Object.defineProperty(namespace, toStringTag, { value: 'Module' });
+    return namespace;
+}
+/** Creates the shared live-binding publisher used by synchronous and asynchronous load records. */
+function createExport(load) {
+    return function (name, value) {
+        load.h = true;
+        // This flag coalesces object-form exports into one importer notification pass.
+        var changed = false;
+        if (typeof name === 'string') {
+            if (!(name in load.n) || load.n[name] !== value) {
+                load.n[name] = value;
+                changed = true;
+            }
+        }
+        else {
+            for (var property in name) {
+                var propertyValue = name[property];
+                if (!(property in load.n) || load.n[property] !== propertyValue) {
+                    load.n[property] = propertyValue;
+                    changed = true;
+                }
+            }
+            if (name && name.__esModule)
+                load.n.__esModule = name.__esModule;
+        }
+        if (changed) {
+            for (var i = 0; i < load.i.length; i++) {
+                var setter = load.i[i];
+                if (setter)
+                    setter(load.n);
+            }
+        }
+        return value;
+    };
+}
+/** Accepts cross-realm and custom thenables rather than only native Promises. */
+function isThenable(value) {
+    return (value !== null && (typeof value === 'object' || typeof value === 'function') && typeof value.then === 'function');
+}
+function createAsyncGraphError(id) {
+    return Error('Cannot synchronously import ' + id + ': module graph is asynchronous');
+}
+var lastRegister;
+systemJSPrototype.register = function (deps, declare, metas) {
+    lastRegister = [deps, declare, metas];
+};
+/*
+ * getRegister provides the last anonymous System.register call
+ */
+systemJSPrototype.getRegister = function () {
+    var _lastRegister = lastRegister;
+    lastRegister = undefined;
+    return _lastRegister;
+};
+export function getOrCreateLoad(loader, id, firstParentUrl, meta) {
+    var load = loader[REGISTRY][id];
+    if (load)
+        return load;
+    var importerSetters = [];
+    var ns = createModuleNamespace();
+    var instantiatePromise = Promise.resolve()
+        .then(function () {
+        return loader.instantiate(id, firstParentUrl, meta);
+    })
+        .then(function (registration) {
+        if (!registration)
+            throw Error(errMsg(2, id));
+        var declared = registration[1](createExport(load), registration[1].length === 2 ? createDeclarationContext(loader, id) : undefined);
+        load.e = declared.execute || function () { };
+        return [registration[0], declared.setters || [], registration[2] || []];
+    }, function (err) {
+        load.e = null;
+        load.er = err;
+        throw err;
+    });
+    var linkPromise = instantiatePromise.then(function (instantiation) {
+        return Promise.all(instantiation[0].map(function (dep, i) {
+            var setter = instantiation[1][i];
+            var meta = instantiation[2][i];
+            var depLoad = getOrCreateLoad(loader, dep, id, meta);
+            // depLoad.I may be undefined for already-evaluated
+            return Promise.resolve(depLoad.I).then(function () {
+                if (setter) {
+                    depLoad.i.push(setter);
+                    // only run early setters when there are hoisted exports of that module
+                    // the timing works here as pending hoisted export calls will trigger through importerSetters
+                    if (depLoad.h || !depLoad.I)
+                        setter(depLoad.n);
+                }
+                return depLoad;
+            });
+        })).then(function (depLoads) {
+            load.d = depLoads;
+        });
+    });
+    // Capital letter = a promise function
+    return (load = loader[REGISTRY][id] =
+        {
+            id: id,
+            // importerSetters, the setters functions registered to this dependency
+            // we retain this to add more later
+            i: importerSetters,
+            // module namespace object
+            n: ns,
+            // extra module information for import assertion
+            // shape like: { assert: { type: 'xyz' } }
+            m: meta,
+            // instantiate
+            I: instantiatePromise,
+            // link
+            L: linkPromise,
+            // whether it has hoisted exports
+            h: false,
+            // On instantiate completion we have populated:
+            // dependency load records
+            d: undefined,
+            // execution function
+            e: undefined,
+            // On execution we have populated:
+            // the execution error if any
+            er: undefined,
+            // in the case of TLA, the execution promise
+            E: undefined,
+            // On execution, L, I, E cleared
+            // Promise for top-level completion
+            C: undefined,
+            // parent instantiator / executor
+            p: undefined
+        });
+}
+function instantiateAll(loader, load, parent, loaded) {
+    if (!loaded[load.id]) {
+        loaded[load.id] = true;
+        // load.L may be undefined for already-instantiated
+        return Promise.resolve(load.L)
+            .then(function () {
+            if (!load.p || load.p.e === null)
+                load.p = parent;
+            return Promise.all(load.d.map(function (dep) {
+                return instantiateAll(loader, dep, parent, loaded);
+            }));
+        })
+            .catch(function (err) {
+            if (load.er)
+                throw err;
+            load.e = null;
+            throw err;
+        });
+    }
+}
+function topLevelLoad(loader, load) {
+    return (load.C = instantiateAll(loader, load, load, {})
+        .then(function () {
+        return postOrderExec(loader, load, {});
+    })
+        .then(function () {
+        return load.n;
+    }));
+}
+// the closest we can get to call(undefined)
+var nullContext = Object.freeze(Object.create(null));
+// returns a promise if and only if a top-level await subgraph
+// throws on sync errors
+function postOrderExec(loader, load, seen) {
+    if (seen[load.id])
+        return;
+    seen[load.id] = true;
+    if (!load.e) {
+        if (load.er)
+            throw load.er;
+        if (load.E)
+            return load.E;
+        return;
+    }
+    // From here we're about to execute the load.
+    // Because the execution may be async, we pop the `load.e` first.
+    // So `load.e === null` always means the load has been executed or is executing.
+    // To inspect the state:
+    // - If `load.er` is truthy, the execution has threw or has been rejected;
+    // - otherwise, either the `load.E` is a promise, means it's under async execution, or
+    // - the `load.E` is null, means the load has completed the execution or has been async resolved.
+    var exec = load.e;
+    load.e = null;
+    // deps execute first, unless circular
+    var depLoadPromises;
+    load.d.forEach(function (depLoad) {
+        try {
+            var depLoadPromise = postOrderExec(loader, depLoad, seen);
+            if (depLoadPromise)
+                (depLoadPromises = depLoadPromises || []).push(depLoadPromise);
+        }
+        catch (err) {
+            load.er = err;
+            throw err;
+        }
+    });
+    if (depLoadPromises)
+        return Promise.all(depLoadPromises).then(doExec);
+    return doExec();
+    function doExec() {
+        try {
+            var execPromise = exec.call(nullContext);
+            if (execPromise) {
+                execPromise = execPromise.then(function () {
+                    load.C = load.n;
+                    load.E = null; // indicates completion
+                }, function (err) {
+                    load.er = err;
+                    load.E = null;
+                    throw err;
+                });
+                return (load.E = execPromise);
+            }
+            // (should be a promise, but a minify optimization to leave out Promise.resolve)
+            load.C = load.n;
+            load.L = load.I = undefined;
+        }
+        catch (err) {
+            load.er = err;
+            throw err;
+        }
+    }
+}
+envGlobal.System = new SystemJS();
+// biome-ignore-end lint: vendored SystemJS core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-taro",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "author": "sep2",
   "description": "Vite 8 plugin for building one React/Taro codebase for WeChat Mini Program and H5 targets.",
   "type": "module",
@@ -33,7 +33,7 @@
     "client.d.ts",
     "LICENSE",
     "README.md",
-    "README.zh.md"
+    "README.en.md"
   ],
   "keywords": [
     "vite",
@@ -48,12 +48,17 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=22"
+    "node": "^22.18.0 || >=24.11.0"
   },
   "dependencies": {
-    "@babel/core": "^7.29.7",
+    "@babel/core": "^8.0.1",
+    "@babel/generator": "^8.0.0",
+    "@babel/plugin-transform-dynamic-import": "^8.0.1",
+    "@babel/plugin-transform-modules-commonjs": "^8.0.1",
+    "@babel/plugin-transform-modules-systemjs": "^8.0.1",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@tailwindcss-mangle/engine": "0.1.3",
+    "@tailwindcss-mangle/engine": "0.2.0",
+    "@weapp-tailwindcss/postcss": "3.2.8",
     "@tarojs/components": "^4.2.0",
     "@tarojs/helper": "^4.2.0",
     "@tarojs/plugin-platform-h5": "^4.2.0",
@@ -61,30 +66,32 @@
     "@tarojs/router": "^4.2.0",
     "@tarojs/runtime": "^4.2.0",
     "@tarojs/taro": "^4.2.0",
-    "@vitejs/plugin-react": "^6.0.3",
+    "@vitejs/plugin-react": "^6.0.5",
     "babel-plugin-transform-taroapi": "^4.2.0",
     "picocolors": "^1.1.1",
+    "react-reconciler": "0.33.0",
     "react-refresh": "^0.18.0",
-    "tailwindcss": "^4.3.2",
-    "weapp-tailwindcss": "5.1.14",
-    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.3.2",
-    "@tarojs/react": "npm:vite-plugin-taro-react@0.3.2"
+    "rolldown": "~1.2.2",
+    "tailwindcss": "^4.3.3",
+    "weapp-tailwindcss": "^5.2.11",
+    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.4.0",
+    "@tarojs/react": "npm:vite-plugin-taro-react@0.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "vite": "^8.1.4"
+    "vite": "^8.2.0"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.5",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@types/react-refresh": "^0.14.7",
     "typescript": "^7.0.2",
-    "vite": "^8.1.4"
+    "vite": "^8.2.0"
   },
   "scripts": {
-    "build": "node ../../scripts/sync-plugin-readme.ts && node ../../scripts/clean-directory.ts dist && tsc --project tsconfig.json",
+    "build": "node ../../scripts/sync-plugin-readme.ts && node ../../scripts/clean-directory.ts dist && tsc --project tsconfig.build.json",
     "test": "node --test",
     "typecheck": "tsc --project tsconfig.json --noEmit"
   }

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

@@ -0,0 +1,23 @@
+import type { Plugin } from 'vite'
+import { resolvePackageFile } from '../../utils/packages.ts'
+import { clientTaroNativeId } from './constant.ts'
+
+export const clientTaroApiId = 'virtual:taro/api'
+const clientTaroComponentId = 'virtual:taro/components'
+const clientTaroModules = new Map([
+    [clientTaroApiId, resolvePackageFile('dist/runtime/client/taro/api.js')],
+    [clientTaroComponentId, resolvePackageFile('dist/runtime/client/taro/component.js')],
+    [clientTaroNativeId, resolvePackageFile('dist/runtime/client/taro/define-native-component.js')]
+])
+
+/** Creates the target-neutral Taro facade plugin. */
+export function createClientTaroPlugin(): Plugin {
+    return {
+        name: 'vpt:client-taro',
+        enforce: 'pre',
+
+        resolveId(id) {
+            return clientTaroModules.get(id)
+        }
+    }
+}

package/src/node/plugins/client/constant.ts

@@ -0,0 +1,5 @@
+/** Maps runtime App imports to the configured application component. */
+export const appComponentId = '\0vpt:app-component'
+
+/** Exposes compile-time native component JSX interfaces to application modules. */
+export const clientTaroNativeId = 'virtual:taro/native'

package/src/node/plugins/{conditional-directives.ts → conditional/conditional-directives.ts}

@@ -1,19 +1,25 @@
 import type { Plugin } from 'vite'
-import type { VitePluginTaroTarget } from '../../options.ts'
-import type { BuildContext } from '../build-context.ts'
-import { normalizeModuleId } from '../utils/modules.ts'
+import type { VitePluginTaroTarget } from '../../../options.ts'
+import { normalizeModuleId } from '../../utils/modules.ts'
 
-export function createConditionalDirectivePlugin(context: BuildContext): Plugin {
+/** Creates source-level target conditional handling shared by H5 and WX. */
+export function createConditionalDirectivePlugin(target: VitePluginTaroTarget): Plugin {
     return {
-        name: 'vite-plugin-taro:conditional-directives',
+        name: 'vpt:conditional-directives',
         enforce: 'pre',
         transform(code, id) {
-            if (!isConditionalDirectiveSource(id) || !code.includes('#if')) return
-            return { code: transformConditionalDirectives(code, context.project.target), map: null }
+            if (!isConditionalDirectiveSource(id) || !code.includes('#if')) {
+                return
+            }
+            return {
+                code: transformConditionalDirectives(code, target),
+                map: null
+            }
         }
     }
 }
 
+/** Tests whether an application source can contain conditional directives. */
 function isConditionalDirectiveSource(id: string): boolean {
     const normalizedId = normalizeModuleId(id)
     return !normalizedId.includes('/node_modules/') && /\.(?:[cm]?[jt]sx?|css|s[ac]ss|less|styl)$/.test(normalizedId)
@@ -30,13 +36,16 @@ type DirectiveFrame = {
     active: boolean
 }
 
+/** Keeps only the source branches active for one build target. */
 function transformConditionalDirectives(code: string, target: VitePluginTaroTarget): string {
     const lines = code.match(/[^\n]*(?:\n|$)/g) ?? []
     const frames: DirectiveFrame[] = []
     let transformed = ''
 
     for (const line of lines) {
-        if (!line) continue
+        if (!line) {
+            continue
+        }
         const directive = parseDirective(line)
         const lineEnding = line.match(/\r?\n$/)?.[0] ?? ''
         if (!directive) {
@@ -48,10 +57,16 @@ function transformConditionalDirectives(code: string, target: VitePluginTaroTarg
             const parentActive = frames.every((frame) => frame.active)
             const targetMatched = directive.target.toLowerCase() === target
             const matched = directive.name === 'ifdef' ? targetMatched : !targetMatched
-            frames.push({ parentActive, matched, active: parentActive && matched })
+            frames.push({
+                parentActive,
+                matched,
+                active: parentActive && matched
+            })
         } else if (directive.name === 'else') {
             const frame = frames.at(-1)
-            if (frame) frame.active = frame.parentActive && !frame.matched
+            if (frame) {
+                frame.active = frame.parentActive && !frame.matched
+            }
         } else {
             frames.pop()
         }
@@ -61,14 +76,19 @@ function transformConditionalDirectives(code: string, target: VitePluginTaroTarg
     return transformed
 }
 
+/** Parses one supported Taro conditional directive. */
 function parseDirective(line: string): Directive | undefined {
     const match = line.match(/^\s*(?:(?:\/\/)|(?:\/\*))\s*#(ifdef|ifndef|if|elif|else|endif)\b([^*\r\n]*)/)
-    if (!match) return
+    if (!match) {
+        return
+    }
     const name = match[1]
     if (name === 'if' || name === 'elif') {
-        throw new Error(`vite-plugin-taro no longer supports #${name}; use #ifdef, #ifndef, or #else.`)
+        throw new Error(`vpt no longer supports #${name}; use #ifdef, #ifndef, or #else`)
+    }
+    if (name !== 'ifdef' && name !== 'ifndef' && name !== 'else' && name !== 'endif') {
+        return
     }
-    if (name !== 'ifdef' && name !== 'ifndef' && name !== 'else' && name !== 'endif') return
     return {
         name,
         target: match[2]?.replace(/\*\/$/, '').trim() ?? ''

package/src/node/plugins/css/plugins.ts

@@ -0,0 +1,96 @@
+import path from 'node:path'
+import { createStyleHandler } from '@weapp-tailwindcss/postcss'
+import type { Plugin, PluginOption, Rolldown } from 'vite'
+import { WeappTailwindcss } from 'weapp-tailwindcss/vite'
+import type { VitePluginTaroTarget } from '../../../options.ts'
+import { packageRequire } from '../../utils/packages.ts'
+
+// Keep the Vite plugin and the compatibility finalizer on identical WX conversion settings. A difference here can
+// make the second pass preserve browser units or apply a transformation that the first pass did not expect.
+const tailwindcssBasedir = path.dirname(packageRequire.resolve('tailwindcss/package.json'))
+
+const wxStyleOptions = {
+    cssCalc: false,
+    autoprefixer: false,
+    rem2rpx: true,
+    px2rpx: true
+} as const
+
+/** Creates the target-aware Tailwind CSS plugins. */
+export function createCssPlugins(target: VitePluginTaroTarget): PluginOption[] {
+    const wx = target === 'wx'
+
+    return [
+        ...(WeappTailwindcss({
+            appType: 'weapp-vite',
+            // WX must enable this for split Tailwind imports such as `tailwindcss/theme.css`. Otherwise Vite's
+            // PostCSS resolver tries to resolve those imports from the application and fails when Tailwind is owned
+            // by vpt. The web generator consumes the imports before that resolver runs, so H5 keeps the
+            // upstream default.
+            rewriteCssImports: wx,
+            // Tailwind is a plugin dependency, not an application dependency. Give weapp-tailwindcss the owning package
+            // directory explicitly so bundled development and strict package managers resolve split CSS imports equally.
+            tailwindcssBasedir,
+            generator: {
+                target: wx ? 'weapp' : 'web'
+                // webCompat: {
+                //     preset: 'legacy-web'
+                // }
+            },
+            cssOptions: {
+                ...wxStyleOptions,
+                autoprefixer: !wx
+            },
+            logLevel: 'warn'
+        }) ?? []),
+        wx ? createWxssCompatibilityFinalizer() : undefined
+    ]
+}
+
+/**
+ * Completes WXSS adaptation that weapp-tailwindcss leaves pending after rewriting split Tailwind imports.
+ *
+ * `rewriteCssImports: true` makes the early Vite transform generate the Tailwind CSS, but the non-web generator
+ * also defers CSS adaptation. The generated asset is consequently browser-shaped
+ * CSS containing values and syntax such as `rem`, escaped class selectors, and `@property`. It is then recorded as a
+ * processed Vite asset, so the upstream output finalizer does not perform the missing complete WXSS adaptation.
+ *
+ * This plugin runs after the upstream finalizer, repeats only the compatibility transform, and restores the captured
+ * global asset to WeChat's required `app.wxss` path. Exact path correlation leaves Page WXSS companions untouched.
+ * Remove it when upstream both completes adaptation and preserves the bundler-selected filename.
+ */
+function createWxssCompatibilityFinalizer(): Plugin {
+    // This compatibility pass only needs the PostCSS style pipeline. Creating a complete weapp-tailwindcss context here
+    // would initialize another Tailwind compiler and source scanner for CSS that the upstream Vite plugin already generated.
+    const transformWxss = createStyleHandler(wxStyleOptions)
+
+    return {
+        name: 'vpt:wxss-compatibility-finalizer',
+        enforce: 'post',
+        generateBundle: {
+            order: 'post',
+            async handler(_, bundle) {
+                // With cssCodeSplit: false the global style is the only asset with a logical
+                // .css source name, even when an earlier hook already changed its final suffix.
+                const globalStyleAsset = Object.values(bundle).find(
+                    (output): output is Rolldown.OutputAsset =>
+                        output.type === 'asset' &&
+                        (output.fileName.replaceAll('\\', '/').endsWith('.css') ||
+                            output.names.some((name) => name.replaceAll('\\', '/').endsWith('.css')))
+                )
+                if (!globalStyleAsset) return
+
+                // Both finalizers use a post-ordered generateBundle hook. Array order places this hook after the
+                // upstream finalizer, where the single Vite global style asset has its final contents and filename.
+                const source =
+                    typeof globalStyleAsset.source === 'string'
+                        ? globalStyleAsset.source
+                        : new TextDecoder().decode(globalStyleAsset.source)
+                if (source.length > 0) {
+                    globalStyleAsset.source = (await transformWxss(source)).css
+                }
+                globalStyleAsset.fileName = 'app.wxss'
+            }
+        }
+    }
+}

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

@@ -0,0 +1,4 @@
+import { resolvePackageFile } from '../../utils/packages.ts'
+
+/** Physical H5 App specialized for the configured application. */
+export const h5AppPath = resolvePackageFile('dist/runtime/h5/app.js')