vite-plugin-taro 0.2.2 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-taro",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "author": "sep2",
   "description": "Vite 8 plugin for building one React/Taro codebase for WeChat Mini Program and H5 targets.",
   "type": "module",
@@ -53,7 +53,6 @@
   "dependencies": {
     "@babel/core": "^7.29.7",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@tailwindcss/vite": "^4.3.1",
     "@tarojs/components": "^4.2.0",
     "@tarojs/helper": "^4.2.0",
     "@tarojs/plugin-platform-h5": "^4.2.0",
@@ -61,26 +60,31 @@
     "@tarojs/router": "^4.2.0",
     "@tarojs/runtime": "^4.2.0",
     "@tarojs/taro": "^4.2.0",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.3",
     "babel-plugin-transform-taroapi": "^4.2.0",
-    "tailwindcss": "^4.3.1",
-    "weapp-tailwindcss": "^5.0.13",
-    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.2.2",
-    "@tarojs/react": "npm:vite-plugin-taro-react@0.2.2"
+    "picocolors": "^1.1.1",
+    "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.1",
+    "@tarojs/react": "npm:vite-plugin-taro-react@0.3.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "vite": "^8.0.0"
+    "vite": "^8.1.4"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
-    "@types/node": "^26.0.0",
-    "typescript": "^7.0.1-rc",
-    "vite": "^8.0.16"
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.2.17",
+    "@types/react-refresh": "^0.14.7",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.4"
   },
   "scripts": {
     "build": "node ../../scripts/sync-plugin-readme.ts && node ../../scripts/clean-directory.ts dist && tsc --project tsconfig.json",
+    "test": "node --test",
     "typecheck": "tsc --project tsconfig.json --noEmit"
   }
 }

package/src/node/build-context.ts

@@ -0,0 +1,63 @@
+import path from 'node:path'
+import type { ConfigEnv, ResolvedConfig } from 'vite'
+import type { JsonObject, VitePluginTaroOptions, VitePluginTaroPageOption, VitePluginTaroTarget } from '../options.ts'
+import { CssPipeline } from './css/css-pipeline.ts'
+
+type ProjectContext = Readonly<{
+    target: VitePluginTaroTarget
+    appComponentFile: string
+    pages: readonly VitePluginTaroPageOption[]
+    appConfig: JsonObject
+    projectConfigJson: JsonObject
+    projectPrivateConfigJson?: JsonObject
+    sitemapJson: JsonObject
+}>
+
+/** Owns the shared project, Vite lifecycle state, and cross-target services for one build. */
+export class BuildContext {
+    readonly project: ProjectContext
+    readonly css: CssPipeline
+    private developmentMode: boolean | undefined
+    private resolvedViteConfig: ResolvedConfig | undefined
+
+    constructor(options: VitePluginTaroOptions) {
+        this.project = {
+            target: options.target,
+            appComponentFile: path.resolve(options.app),
+            pages: options.pages,
+            appConfig: {
+                ...options.appJson,
+                pages: options.pages.map((page) => page.path)
+            },
+            projectConfigJson: options.projectConfigJson,
+            projectPrivateConfigJson: options.projectPrivateConfigJson,
+            sitemapJson: options.sitemapJson
+        }
+        this.css = new CssPipeline(options.target)
+    }
+
+    configure(environment: ConfigEnv): void {
+        if (this.developmentMode !== undefined)
+            throw new Error('vite-plugin-taro build context was already configured.')
+        this.developmentMode = environment.command === 'serve'
+    }
+
+    resolve(config: ResolvedConfig): void {
+        if (this.developmentMode === undefined) {
+            throw new Error('vite-plugin-taro build context resolved before it was configured.')
+        }
+        if (this.resolvedViteConfig) throw new Error('vite-plugin-taro build context was already resolved.')
+        this.resolvedViteConfig = config
+        this.css.resolve(config.root)
+    }
+
+    get development(): boolean {
+        if (this.developmentMode === undefined) throw new Error('vite-plugin-taro build context is not configured.')
+        return this.developmentMode
+    }
+
+    get vite(): ResolvedConfig {
+        if (!this.resolvedViteConfig) throw new Error('vite-plugin-taro build context is not resolved.')
+        return this.resolvedViteConfig
+    }
+}

package/src/node/css/css-pipeline.ts

@@ -0,0 +1,147 @@
+import path from 'node:path'
+import type { Plugin } from 'vite'
+import { createContext } from 'weapp-tailwindcss/core'
+import { createWeappTailwindcssGenerator, resolveTailwindV4Source } from 'weapp-tailwindcss/generator'
+import type { VitePluginTaroTarget } from '../../options.ts'
+import { normalizeModuleId } from '../utils/modules.ts'
+
+const wxStyleOptions = {
+    cssCalc: false,
+    autoprefixer: false,
+    rem2rpx: true,
+    px2rpx: true
+} as const
+
+type WxCssContext = ReturnType<typeof createContext>
+type CssTransformResult = { code: string; map: null }
+
+/** Owns CSS generation and the class-name state shared by normal chunks and literal WX patches. */
+export class CssPipeline {
+    readonly plugin: Plugin
+    private readonly target: VitePluginTaroTarget
+    private readonly runtimeClassSet = new Set<string>()
+    private projectRoot: string | undefined
+    private wxContext: WxCssContext | undefined
+
+    constructor(target: VitePluginTaroTarget) {
+        this.target = target
+        this.plugin = this.createPlugin()
+    }
+
+    resolve(projectRoot: string): void {
+        if (this.projectRoot) throw new Error('vite-plugin-taro CSS pipeline was already resolved.')
+        this.projectRoot = projectRoot
+        this.wxContext = this.target === 'wx' ? createWxCssContext(projectRoot) : undefined
+    }
+
+    async transformWxClassNames(code: string, filename: string): Promise<CssTransformResult> {
+        if (!this.wxContext || this.runtimeClassSet.size === 0) return { code, map: null }
+        const result = await this.wxContext.transformJs(code, {
+            runtimeSet: this.runtimeClassSet,
+            filename,
+            generateMap: false
+        })
+        return { code: result.code, map: null }
+    }
+
+    private createPlugin(): Plugin {
+        const pipeline = this
+        return {
+            name: 'vite-plugin-taro:css',
+            enforce: 'pre',
+
+            buildStart() {
+                pipeline.runtimeClassSet.clear()
+            },
+
+            async transform(code, id) {
+                if (!isCssModuleId(id) || !shouldGenerateTailwindCss(code)) return
+
+                const projectRoot = pipeline.getProjectRoot()
+                const cssFile = resolveCssFile(id, projectRoot)
+                const cssBase = path.dirname(cssFile)
+                const source = await resolveTailwindV4Source({
+                    projectRoot,
+                    cwd: projectRoot,
+                    base: cssBase,
+                    css: code,
+                    cssSources: [{ file: cssFile, base: cssBase, css: code, dependencies: [cssFile] }]
+                })
+                const generator = createWeappTailwindcssGenerator(source)
+                const generated = await generator.generate({
+                    target: pipeline.target === 'wx' ? 'weapp' : 'web',
+                    scanSources: true,
+                    candidates: [],
+                    styleOptions: pipeline.target === 'wx' ? wxStyleOptions : undefined
+                })
+
+                for (const className of generated.classSet) pipeline.runtimeClassSet.add(className)
+                for (const dependency of generated.dependencies) this.addWatchFile(dependency)
+                return generated.css
+            },
+
+            async renderChunk(code, chunk) {
+                if (pipeline.target !== 'wx') return
+                return await pipeline.transformWxClassNames(code, chunk.fileName)
+            },
+
+            async generateBundle(_, bundle) {
+                if (pipeline.target !== 'wx') return
+                const core = pipeline.getWxContext()
+                await Promise.all(
+                    Object.entries(bundle).map(async ([fileName, item]) => {
+                        if (item.type === 'asset' && fileName.endsWith('.css')) {
+                            await transformWxssAsset(core, item)
+                        }
+                    })
+                )
+            }
+        }
+    }
+
+    private getProjectRoot(): string {
+        if (!this.projectRoot) throw new Error('vite-plugin-taro CSS pipeline was used before configuration resolved.')
+        return this.projectRoot
+    }
+
+    private getWxContext(): WxCssContext {
+        if (!this.wxContext) throw new Error('vite-plugin-taro expected a resolved WeChat CSS pipeline.')
+        return this.wxContext
+    }
+}
+
+function createWxCssContext(projectRoot: string): WxCssContext {
+    return createContext({
+        appType: 'taro',
+        tailwindcssBasedir: projectRoot,
+        generator: { target: 'weapp' },
+        ...wxStyleOptions,
+        logLevel: 'silent'
+    })
+}
+
+async function transformWxssAsset(core: WxCssContext, item: { source?: string | Uint8Array }): Promise<void> {
+    const result = await core.transformWxss(getAssetSource(item), { isMainChunk: true })
+    item.source = result.css
+}
+
+function shouldGenerateTailwindCss(code: string): boolean {
+    const tailwindEntryImportPattern =
+        /@(import|reference)\s+(?:url\(\s*)?(?:["'])tailwindcss(?:\/(?:theme|preflight|utilities)(?:\.css)?)?(?:["'])/
+    return code.includes('tailwindcss') && tailwindEntryImportPattern.test(code)
+}
+
+function isCssModuleId(id: string): boolean {
+    return /\.(?:css|scss|sass|less|styl|stylus)(?:$|[?#])/.test(id)
+}
+
+function getAssetSource(item: { source?: string | Uint8Array }): string {
+    if (typeof item.source === 'string') return item.source
+    return item.source ? new TextDecoder().decode(item.source) : ''
+}
+
+function resolveCssFile(id: string, root: string): string {
+    const normalizedId = normalizeModuleId(id)
+    const cleanId = normalizedId.startsWith('/@fs/') ? normalizedId.slice('/@fs'.length) : normalizedId
+    return path.isAbsolute(cleanId) ? cleanId : path.resolve(root, cleanId)
+}

package/src/node/plugins/conditional-directives.ts

@@ -0,0 +1,76 @@
+import type { Plugin } from 'vite'
+import type { VitePluginTaroTarget } from '../../options.ts'
+import type { BuildContext } from '../build-context.ts'
+import { normalizeModuleId } from '../utils/modules.ts'
+
+export function createConditionalDirectivePlugin(context: BuildContext): Plugin {
+    return {
+        name: 'vite-plugin-taro:conditional-directives',
+        enforce: 'pre',
+        transform(code, id) {
+            if (!isConditionalDirectiveSource(id) || !code.includes('#if')) return
+            return { code: transformConditionalDirectives(code, context.project.target), map: null }
+        }
+    }
+}
+
+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)
+}
+
+type Directive = {
+    name: 'ifdef' | 'ifndef' | 'else' | 'endif'
+    target: string
+}
+
+type DirectiveFrame = {
+    parentActive: boolean
+    matched: boolean
+    active: boolean
+}
+
+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
+        const directive = parseDirective(line)
+        const lineEnding = line.match(/\r?\n$/)?.[0] ?? ''
+        if (!directive) {
+            transformed += frames.every((frame) => frame.active) ? line : lineEnding
+            continue
+        }
+
+        if (directive.name === 'ifdef' || directive.name === 'ifndef') {
+            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 })
+        } else if (directive.name === 'else') {
+            const frame = frames.at(-1)
+            if (frame) frame.active = frame.parentActive && !frame.matched
+        } else {
+            frames.pop()
+        }
+        transformed += lineEnding
+    }
+
+    return transformed
+}
+
+function parseDirective(line: string): Directive | undefined {
+    const match = line.match(/^\s*(?:(?:\/\/)|(?:\/\*))\s*#(ifdef|ifndef|if|elif|else|endif)\b([^*\r\n]*)/)
+    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.`)
+    }
+    if (name !== 'ifdef' && name !== 'ifndef' && name !== 'else' && name !== 'endif') return
+    return {
+        name,
+        target: match[2]?.replace(/\*\/$/, '').trim() ?? ''
+    }
+}

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

@@ -0,0 +1,22 @@
+import type { Plugin } from 'vite'
+import { resolvePackageFile } from '../utils/packages.ts'
+
+/** Public IDs used by Taro's API transform and generated target modules. */
+export const virtualTaroApiId = 'virtual:taro/api'
+const virtualTaroComponentsId = 'virtual:taro/components'
+
+const runtimeModules = new Map([
+    [virtualTaroApiId, resolvePackageFile('dist/runtime/taro/api.js')],
+    [virtualTaroComponentsId, resolvePackageFile('dist/runtime/taro/components.js')]
+])
+
+/** Resolves target-neutral Taro shims once instead of duplicating this concern in every target plugin. */
+export function createTaroRuntimePlugin(): Plugin {
+    return {
+        name: 'vite-plugin-taro:runtime',
+        enforce: 'pre',
+        resolveId(id) {
+            return runtimeModules.get(id)
+        }
+    }
+}

package/src/node/targets/h5/plugin.ts

@@ -0,0 +1,135 @@
+import type { types as BabelTypes, NodePath, PluginObj } from '@babel/core'
+import babel from '@rolldown/plugin-babel'
+import type { Plugin, PluginOption, UserConfig } from 'vite'
+import type { BuildContext } from '../../build-context.ts'
+import { virtualTaroApiId } from '../../plugins/taro-runtime.ts'
+import { stripVirtualPrefix } from '../../utils/modules.ts'
+import { packageRequire } from '../../utils/packages.ts'
+import { createH5IndexHtmlTags, isH5VirtualModuleId, loadH5VirtualModule } from './virtual-modules.ts'
+
+/** Creates the plugins that own the complete H5 target lifecycle. */
+export function createH5TargetPlugins(context: BuildContext): PluginOption[] {
+    return [...createH5SupportPlugins(), createH5TargetPlugin(context)]
+}
+
+function createH5TargetPlugin(context: BuildContext): Plugin {
+    return {
+        name: 'vite-plugin-taro:h5',
+
+        resolveId: {
+            order: 'pre',
+            handler(id) {
+                return isH5VirtualModuleId(id) ? `\0${id}` : undefined
+            }
+        },
+
+        load: {
+            order: 'post',
+            handler(id) {
+                return loadH5VirtualModule(stripVirtualPrefix(id), context)
+            }
+        },
+
+        transformIndexHtml: {
+            order: 'pre',
+            handler() {
+                return createH5IndexHtmlTags(context)
+            }
+        }
+    }
+}
+
+/** 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: virtualTaroApiId,
+                        definition: packageRequire(
+                            packageRequire.resolve('@tarojs/plugin-platform-h5/dist/definition.json')
+                        )
+                    }
+                ]
+            ]
+        })
+    ]
+}
+
+/** Keeps Stencil-injected Taro component styles before application stylesheets. */
+function rewriteStencilStyleInsertion(): PluginObj {
+    return {
+        name: 'rewrite-stencil-style-insertion',
+        visitor: {
+            CallExpression(path: NodePath<BabelTypes.CallExpression>) {
+                if (!isStencilStyleInsertBeforeCall(path)) return
+                path.get('arguments.1').replaceWithSourceString(
+                    `scopeId.startsWith('sc-taro-') ? styleContainerNode.querySelector('style,link[rel="stylesheet"]') : styleContainerNode.querySelector('link')`
+                )
+            }
+        }
+    }
+}
+
+function isStencilStyleInsertBeforeCall(path: NodePath<BabelTypes.CallExpression>): boolean {
+    return (
+        path.get('callee').matchesPattern('styleContainerNode.insertBefore') &&
+        path.get('arguments.0').toString() === 'styleElm' &&
+        path.get('arguments.1').toString() === "styleContainerNode.querySelector('link')"
+    )
+}
+
+/** Supplies the complete H5 target configuration from the same target owner as its plugins. */
+export function createH5ViteConfig(context: BuildContext): UserConfig {
+    return {
+        define: createH5TaroDefines(),
+        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: 'es2018',
+            minify: !context.development
+        }
+    }
+}
+
+function createH5TaroDefines(): Record<string, string> {
+    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/src/node/targets/h5/virtual-modules.ts

@@ -0,0 +1,71 @@
+import type { HtmlTagDescriptor } from 'vite'
+import type { JsonObject, VitePluginTaroPageOption } from '../../../options.ts'
+import type { BuildContext } from '../../build-context.ts'
+import { createPageComponentImportPath, toViteFileImportPath } from '../../utils/modules.ts'
+import { resolvePackageFile } from '../../utils/packages.ts'
+
+const h5TaroRuntimeImportPath = toViteFileImportPath(resolvePackageFile('dist/runtime/h5/taro-runtime.js'))
+
+const virtualH5EntryId = 'virtual:vite-plugin-taro/h5'
+
+export function isH5VirtualModuleId(id: string): boolean {
+    return id === virtualH5EntryId
+}
+
+export function loadH5VirtualModule(id: string, context: BuildContext): string | undefined {
+    if (id === virtualH5EntryId) return createH5EntrySource(context)
+}
+
+export function createH5IndexHtmlTags(context: BuildContext): HtmlTagDescriptor[] | undefined {
+    if (context.project.target !== 'h5') return
+    return [
+        {
+            tag: 'script',
+            attrs: { type: 'module' },
+            children: `import '${virtualH5EntryId}'`,
+            injectTo: 'body'
+        }
+    ]
+}
+
+function createH5EntrySource(context: BuildContext): string {
+    const appConfig = JSON.stringify(createH5AppConfig(context.project.appConfig))
+    const routes = createH5RoutesSource(context.project.pages)
+    return `import {
+    createHashHistory,
+    createReactApp,
+    createRouter,
+    handleAppMount,
+    window
+} from ${JSON.stringify(h5TaroRuntimeImportPath)}
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import AppComponent from ${JSON.stringify(toViteFileImportPath(context.project.appComponentFile))}
+
+const config = window.__taroAppConfig = ${appConfig}
+config.routes = ${routes}
+const app = createReactApp(AppComponent, React, ReactDOM, config)
+const history = createHashHistory({ window })
+handleAppMount(config, history)
+createRouter(history, app, config, React)
+`
+}
+
+function createH5AppConfig(sharedAppConfig: JsonObject): JsonObject {
+    return { router: {}, ...sharedAppConfig }
+}
+
+function createH5RoutesSource(pages: readonly VitePluginTaroPageOption[]): string {
+    const routes = pages.map((page) =>
+        [
+            'Object.assign({',
+            `  path: ${JSON.stringify(page.path)},`,
+            '  load: async function(context, params) {',
+            `    const page = await import(${JSON.stringify(createPageComponentImportPath(page.path))})`,
+            '    return [page, context, params]',
+            '  }',
+            `}, ${JSON.stringify(page.config)})`
+        ].join('\n')
+    )
+    return `[\n${routes.join(',\n')}\n]`
+}