vite-plugin-taro 0.3.2 → 0.4.0

package/dist/node/plugins/{conditional-directives.js → conditional/conditional-directives.js}

@@ -1,26 +1,34 @@
-import { normalizeModuleId } from '../utils/modules.js';
-export function createConditionalDirectivePlugin(context) {
+import { normalizeModuleId } from '../../utils/modules.js';
+/** Creates source-level target conditional handling shared by H5 and WX. */
+export function createConditionalDirectivePlugin(target) {
     return {
-        name: 'vite-plugin-taro:conditional-directives',
+        name: 'vpt:conditional-directives',
         enforce: 'pre',
         transform(code, id) {
-            if (!isConditionalDirectiveSource(id) || !code.includes('#if'))
+            if (!isConditionalDirectiveSource(id) || !code.includes('#if')) {
                 return;
-            return { code: transformConditionalDirectives(code, context.project.target), map: null };
+            }
+            return {
+                code: transformConditionalDirectives(code, target),
+                map: null
+            };
         }
     };
 }
+/** Tests whether an application source can contain conditional directives. */
 function isConditionalDirectiveSource(id) {
     const normalizedId = normalizeModuleId(id);
     return !normalizedId.includes('/node_modules/') && /\.(?:[cm]?[jt]sx?|css|s[ac]ss|less|styl)$/.test(normalizedId);
 }
+/** Keeps only the source branches active for one build target. */
 function transformConditionalDirectives(code, target) {
     const lines = code.match(/[^\n]*(?:\n|$)/g) ?? [];
     const frames = [];
     let transformed = '';
     for (const line of lines) {
-        if (!line)
+        if (!line) {
             continue;
+        }
         const directive = parseDirective(line);
         const lineEnding = line.match(/\r?\n$/)?.[0] ?? '';
         if (!directive) {
@@ -31,12 +39,17 @@ function transformConditionalDirectives(code, target) {
             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)
+            if (frame) {
                 frame.active = frame.parentActive && !frame.matched;
+            }
         }
         else {
             frames.pop();
@@ -45,16 +58,19 @@ function transformConditionalDirectives(code, target) {
     }
     return transformed;
 }
+/** Parses one supported Taro conditional directive. */
 function parseDirective(line) {
     const match = line.match(/^\s*(?:(?:\/\/)|(?:\/\*))\s*#(ifdef|ifndef|if|elif|else|endif)\b([^*\r\n]*)/);
-    if (!match)
+    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')
+    if (name !== 'ifdef' && name !== 'ifndef' && name !== 'else' && name !== 'endif') {
         return;
+    }
     return {
         name,
         target: match[2]?.replace(/\*\/$/, '').trim() ?? ''

package/dist/node/plugins/css/plugins.d.ts

@@ -0,0 +1,4 @@
+import type { PluginOption } from 'vite';
+import type { VitePluginTaroTarget } from '../../../options.ts';
+/** Creates the target-aware Tailwind CSS plugins. */
+export declare function createCssPlugins(target: VitePluginTaroTarget): PluginOption[];

package/dist/node/plugins/css/plugins.js

@@ -0,0 +1,84 @@
+import path from 'node:path';
+import { createStyleHandler } from '@weapp-tailwindcss/postcss';
+import { WeappTailwindcss } from 'weapp-tailwindcss/vite';
+import { packageRequire } from '../../utils/packages.js';
+// 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
+};
+/** Creates the target-aware Tailwind CSS plugins. */
+export function createCssPlugins(target) {
+    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() {
+    // 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.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/dist/node/plugins/h5/constant.d.ts

@@ -0,0 +1,2 @@
+/** Physical H5 App specialized for the configured application. */
+export declare const h5AppPath: string;

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

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

package/dist/node/plugins/h5/plugins.d.ts

@@ -0,0 +1,4 @@
+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[];

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

@@ -0,0 +1,161 @@
+import { types } from '@babel/core';
+import babel 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 { createModuleResolver } from './resolver/module-resolver.js';
+/** Creates the plugins that own the H5 target. */
+export function createH5TargetPlugins(options) {
+    return [...createH5SupportPlugins(), createH5TargetPlugin(options)];
+}
+/** Configures H5 resolution and supplies the specialized physical application entry. */
+function createH5TargetPlugin(options) {
+    const moduleResolver = createModuleResolver(options);
+    return {
+        name: 'vpt:h5',
+        config() {
+            return {
+                define: createH5Defines(),
+                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')
+                        },
+                        {
+                            find: /^@tarojs\/components\/dist\/components$/,
+                            replacement: packageRequire.resolve('@tarojs/components/dist/components')
+                        },
+                        {
+                            find: /^@tarojs\/taro$/,
+                            replacement: packageRequire.resolve('@tarojs/plugin-platform-h5/dist/runtime/apis')
+                        }
+                    ]
+                },
+                optimizeDeps: {
+                    exclude: ['@stencil/core/internal/client']
+                },
+                build: {
+                    target: esTarget
+                }
+            };
+        },
+        resolveId: {
+            order: 'pre',
+            handler(id) {
+                return moduleResolver.resolveId({
+                    id,
+                    projectRoot: this.environment.config.root
+                });
+            }
+        },
+        transform: {
+            order: 'pre',
+            handler(code, id) {
+                return moduleResolver.transform({
+                    code,
+                    id,
+                    projectRoot: this.environment.config.root,
+                    sourcemap: Boolean(this.environment.config.build.sourcemap)
+                });
+            }
+        },
+        transformIndexHtml: {
+            order: 'pre',
+            handler() {
+                return createH5IndexHtmlTags();
+            }
+        }
+    };
+}
+/** Injects the physical H5 App into the application document. */
+function createH5IndexHtmlTags() {
+    return [
+        {
+            tag: 'script',
+            attrs: {
+                type: 'module'
+            },
+            children: `import '${toViteFileImportPath(h5AppPath)}'`,
+            injectTo: 'body'
+        }
+    ];
+}
+/** Creates H5-only Babel transforms for Stencil CSS ordering and Taro API imports. */
+function createH5SupportPlugins() {
+    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'))
+                    }
+                ]
+            ]
+        })
+    ];
+}
+/** 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 {
+        'process.env.FRAMEWORK': JSON.stringify('react'),
+        'process.env.SUPPORT_TARO_POLYFILL': JSON.stringify('disabled'),
+        'process.env.TARO_ENV': JSON.stringify('h5'),
+        'process.env.TARO_PLATFORM': JSON.stringify('web'),
+        'process.env.SUPPORT_DINGTALK_NAVIGATE': JSON.stringify('disabled'),
+        DEPRECATED_ADAPTER_COMPONENT: 'false'
+    };
+}

package/dist/node/plugins/h5/resolver/module-resolver.d.ts

@@ -0,0 +1,14 @@
+import type { VitePluginTaroOptions } from '../../../../options.ts';
+/** Creates H5 application module resolution and specialization. */
+export declare function createModuleResolver(options: VitePluginTaroOptions): {
+    resolveId({ id, projectRoot }: {
+        id: string;
+        projectRoot: string;
+    }): string | undefined;
+    transform({ code, id, projectRoot, sourcemap }: {
+        code: string;
+        id: string;
+        projectRoot: string;
+        sourcemap?: boolean;
+    }): Promise<import("../../../utils/transform.ts").AstTransformResult> | undefined;
+};

package/dist/node/plugins/h5/resolver/module-resolver.js

@@ -0,0 +1,19 @@
+import { normalizeModuleId, resolveAppComponentPath } from '../../../utils/modules.js';
+import { appComponentId } from '../../client/constant.js';
+import { h5AppPath } from '../constant.js';
+import { transformH5App } from '../transform-app.js';
+/** Creates H5 application module resolution and specialization. */
+export function createModuleResolver(options) {
+    return {
+        resolveId({ id, projectRoot }) {
+            if (id === appComponentId) {
+                return resolveAppComponentPath({ appPath: options.app, projectRoot });
+            }
+        },
+        transform({ code, id, projectRoot, sourcemap = true }) {
+            if (normalizeModuleId(id) === normalizeModuleId(h5AppPath)) {
+                return transformH5App({ code, id, options, projectRoot, sourcemap });
+            }
+        }
+    };
+}

package/dist/node/plugins/h5/transform-app.d.ts

@@ -0,0 +1,10 @@
+import type { VitePluginTaroOptions } from '../../../options.ts';
+import { type AstTransformResult } from '../../utils/transform.ts';
+/** Specializes the physical H5 App for one configured project. */
+export declare function transformH5App({ code, id, options, projectRoot, sourcemap }: {
+    code: string;
+    id: string;
+    options: VitePluginTaroOptions;
+    projectRoot: string;
+    sourcemap?: boolean;
+}): Promise<AstTransformResult>;

package/dist/node/plugins/h5/transform-app.js

@@ -0,0 +1,48 @@
+import { types } from '@babel/core';
+import { createPageComponentImportPath } from '../../utils/modules.js';
+import { createAppConfig } from '../../utils/project-config.js';
+import { replaceWithAst } from '../../utils/transform.js';
+const appConfigPlaceholder = '__VITE_PLUGIN_TARO_H5_APP_CONFIG__';
+const routesPlaceholder = '__VITE_PLUGIN_TARO_H5_ROUTES__';
+/** Specializes the physical H5 App for one configured project. */
+export async function transformH5App({ code, id, options, projectRoot, sourcemap = true }) {
+    const transformed = await replaceWithAst(code, id, {
+        [appConfigPlaceholder]: types.valueToNode({
+            router: {},
+            ...createAppConfig(options)
+        }),
+        [routesPlaceholder]: types.arrayExpression(options.pages.map((page) => {
+            return createRoute({ page, projectRoot });
+        }))
+    }, sourcemap);
+    return { code: transformed.code, map: transformed.map };
+}
+/**
+ * Creates one lazy H5 route shaped like:
+ * {
+ *     path: 'pages/home/index',
+ *     load: async function (context, params) {
+ *         const page = await import('/@fs/project/src/pages/home/index.tsx')
+ *         return [page, context, params]
+ *     },
+ *     ...pageConfig
+ * }
+ */
+function createRoute({ page, projectRoot }) {
+    const pageComponentPath = createPageComponentImportPath({ pagePath: page.path, projectRoot });
+    const load = types.functionExpression(null, [types.identifier('context'), types.identifier('params')], types.blockStatement([
+        types.variableDeclaration('const', [
+            types.variableDeclarator(types.identifier('page'), types.awaitExpression(types.importExpression(types.stringLiteral(pageComponentPath))))
+        ]),
+        types.returnStatement(types.arrayExpression([
+            types.identifier('page'),
+            types.identifier('context'),
+            types.identifier('params')
+        ]))
+    ]), false, true);
+    return types.objectExpression([
+        types.objectProperty(types.identifier('path'), types.stringLiteral(page.path)),
+        types.objectProperty(types.identifier('load'), load),
+        types.spreadElement(types.valueToNode(page.config))
+    ]);
+}

package/dist/node/plugins/wx/dev/dev-host.d.ts

@@ -0,0 +1,15 @@
+import type { ViteDevServer } from 'vite';
+import type { VitePluginTaroOptions } from '../../../../options.ts';
+export type WxDevHost = Readonly<{
+    close: () => Promise<void>;
+}>;
+/**
+ * Creates the wx dev host: the adapter that owns the physical Rolldown DevEngine (created
+ * with dev(...)) and the patch publisher, and replaces Vite's bundledDev.listen so the
+ * engine writes directly to the Mini Program output directory instead of serving browser
+ * HMR over HTTP.
+ */
+export declare function createWxDevHost({ server, options }: {
+    server: ViteDevServer;
+    options: VitePluginTaroOptions;
+}): Promise<WxDevHost>;