vite-plugin-taro 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-taro",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Vite 8 plugin for building one React/Taro codebase for WeChat Mini Program and H5 targets.",
   "type": "module",
   "repository": {
@@ -14,42 +14,42 @@
   "homepage": "https://github.com/sep2/vite-plugin-taro/tree/main/packages/vite-plugin-taro#readme",
   "main": "./dist/vite.js",
   "module": "./dist/vite.js",
-  "types": "./dist/vite.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/vite.d.ts",
-      "import": "./dist/vite.js",
-      "default": "./dist/vite.js"
-    },
-    "./vite": {
-      "types": "./dist/vite.d.ts",
+      "types": "./src/vite.ts",
       "import": "./dist/vite.js",
       "default": "./dist/vite.js"
     },
     "./components": {
-      "types": "./dist/public/components.d.ts",
+      "types": "./src/public/components.ts",
       "import": "./dist/public/components.js",
       "default": "./dist/public/components.js"
     },
     "./taro": {
-      "types": "./dist/public/taro.d.ts",
+      "types": "./src/public/taro.d.ts",
       "import": "./dist/public/taro.js",
       "default": "./dist/public/taro.js"
     },
     "./shim/h5": {
-      "types": "./dist/shim/h5.d.ts",
+      "types": "./src/shim/h5.ts",
       "import": "./dist/shim/h5.js",
       "default": "./dist/shim/h5.js"
     },
     "./shim/wx": {
-      "types": "./dist/shim/wx.d.ts",
+      "types": "./src/shim/wx.ts",
       "import": "./dist/shim/wx.js",
       "default": "./dist/shim/wx.js"
     },
+    "./vite": {
+      "types": "./src/vite.ts",
+      "import": "./dist/vite.js",
+      "default": "./dist/vite.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "src",
     "LICENSE",
     "README.md"
   ],
@@ -70,7 +70,9 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "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",
@@ -80,10 +82,10 @@
     "@tarojs/taro": "^4.2.0",
     "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-transform-taroapi": "^4.2.0",
-    "tailwindcss": "^4.3.0",
-    "weapp-tailwindcss": "^5.0.5",
-    "@tarojs/react": "npm:vite-plugin-taro-react@4.2.0-react19.1",
-    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@4.2.0-react19.1"
+    "tailwindcss": "^4.3.1",
+    "weapp-tailwindcss": "^5.0.13",
+    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@4.2.0-react19.3",
+    "@tarojs/react": "npm:vite-plugin-taro-react@4.2.0-react19.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -91,16 +93,13 @@
     "vite": "^8.0.0"
   },
   "devDependencies": {
-    "@types/node": "^24.10.1",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^26.0.0",
     "@typescript/native-preview": "latest",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.16",
-    "vite-plugin-dts": "^5.0.2"
+    "vite": "^8.0.16"
   },
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "pnpm -w prepare:taro && pnpm clean && vite build",
-    "typecheck": "pnpm -w prepare:taro && tsgo --project tsconfig.json",
-    "pack:dry": "pnpm pack --dry-run"
+    "build": "rm -rf dist && tsgo --project tsconfig.json",
+    "typecheck": "tsgo --project tsconfig.json --noEmit"
   }
 }

package/src/public/components.ts

@@ -0,0 +1 @@
+export * from '@tarojs/components'

package/src/public/taro.ts

@@ -0,0 +1,10 @@
+import { hooks } from '@tarojs/runtime'
+import Taro from '@tarojs/taro'
+
+if (hooks.isExist('initNativeApi')) {
+    hooks.call('initNativeApi', Taro)
+}
+
+// @ts-expect-error @tarojs/taro declares export= types, but vite-plugin-taro target aliases expose runtime named exports.
+export * from '@tarojs/taro'
+export default Taro

package/src/shim/h5.ts

@@ -0,0 +1,6 @@
+import '@tarojs/plugin-platform-h5/dist/runtime'
+
+// @ts-expect-error Taro exposes createReactApp from this runtime-only deep entry without types.
+export { createReactApp } from '@tarojs/plugin-framework-react/dist/runtime'
+export { createBrowserHistory, createHashHistory, createRouter, handleAppMount } from '@tarojs/router'
+export { window } from '@tarojs/runtime'

package/src/shim/wx.ts

@@ -0,0 +1,6 @@
+import '@tarojs/plugin-platform-weapp/dist/runtime.js'
+
+// @ts-expect-error Taro exposes createReactApp from this runtime-only deep entry without types.
+export { createReactApp } from '@tarojs/plugin-framework-react/dist/runtime'
+export { default as ReactDOM } from '@tarojs/react'
+export { createPageConfig, createRecursiveComponentConfig } from '@tarojs/runtime'

package/src/vite/constants.ts

@@ -0,0 +1,5 @@
+import { createRequire } from 'node:module'
+
+export const isProd = process.env.NODE_ENV === 'production'
+
+export const nodeRequire = createRequire(import.meta.url)

package/src/vite/plugins.ts

@@ -0,0 +1,218 @@
+import type { Plugin } from 'vite'
+import type { VitePluginTaroBuildContext, VitePluginTaroTarget } from './types.ts'
+import { normalizeModuleId } from './utils.ts'
+
+/**
+ * Applies Taro-style conditional compilation comments before Vite parses source files.
+ *
+ * Mirrors Taro's CSS #ifdef/#ifndef handling, generalized before Vite parses code.
+ */
+export function createVitePluginTaroConditionalDirectivePlugin(context: VitePluginTaroBuildContext): Plugin {
+    const target = context.target
+    return {
+        name: 'vite-plugin-taro-conditional-directives',
+        enforce: 'pre',
+        transform(code, id) {
+            if (!isConditionalDirectiveSource(id) || !code.includes('#if')) return
+            return { code: transformConditionalDirectives(code, target), map: null }
+        }
+    }
+}
+
+/**
+ * Filters files where Taro's conditional comments are meaningful.
+ *
+ * Plugin-only: source filter for generalized conditional-directive transform.
+ */
+function isConditionalDirectiveSource(id: string): boolean {
+    const normalizedId = normalizeModuleId(id)
+    if (normalizedId.includes('/node_modules/')) return false
+    return /\.(?:[cm]?[jt]sx?|css|s[ac]ss|less|styl)(?:\?|$)/.test(normalizedId)
+}
+
+type ConditionalDirectiveName = 'ifdef' | 'ifndef' | 'if' | 'elif' | 'else' | 'endif'
+
+type ConditionalDirective = {
+    name: ConditionalDirectiveName
+    expression: string
+}
+
+type ConditionalDirectiveFrame = {
+    parentActive: boolean
+    active: boolean
+    matched: boolean
+}
+
+/**
+ * Removes inactive blocks guarded by Taro conditional comments.
+ *
+ * Mirrors Taro's CSS #ifdef/#ifndef handling.
+ */
+function transformConditionalDirectives(code: string, target: VitePluginTaroTarget): string {
+    const lines = code.match(/[^\n]*(?:\n|$)/g) ?? []
+    const frames: ConditionalDirectiveFrame[] = []
+    let transformed = ''
+
+    for (const line of lines) {
+        if (!line) continue
+        const directive = parseConditionalDirective(line)
+        const lineEnding = getLineEnding(line)
+        if (directive) {
+            updateConditionalDirectiveFrames(frames, directive, target)
+            transformed += lineEnding
+            continue
+        }
+        transformed += isDirectiveStackActive(frames) ? line : lineEnding
+    }
+
+    return transformed
+}
+
+/**
+ * Parses one Taro conditional compilation directive from a comment-only line.
+ *
+ * Mirrors Taro's CSS comment-token handling.
+ */
+function parseConditionalDirective(line: string): ConditionalDirective | undefined {
+    const match = line.match(/^\s*(?:(?:\/\/)|(?:\/\*))\s*#(ifdef|ifndef|if|elif|else|endif)\b([^*\r\n]*)/)
+    if (!match) return
+    const name = toConditionalDirectiveName(match[1])
+    if (!name) return
+    return {
+        name,
+        expression: match[2]?.replace(/\*\/$/, '').trim() ?? ''
+    }
+}
+
+/**
+ * Converts a regex capture into a supported directive name.
+ *
+ * Mirrors Taro's CSS #ifdef/#ifndef/#endif token handling.
+ */
+function toConditionalDirectiveName(value: string): ConditionalDirectiveName | undefined {
+    if (
+        value === 'ifdef' ||
+        value === 'ifndef' ||
+        value === 'if' ||
+        value === 'elif' ||
+        value === 'else' ||
+        value === 'endif'
+    ) {
+        return value
+    }
+}
+
+/**
+ * Updates the active conditional stack using Taro-style #ifdef/#ifndef/#else/#endif semantics.
+ *
+ * Plugin-only: stack-based #if/#elif/#else support has no Taro webpack counterpart.
+ */
+function updateConditionalDirectiveFrames(
+    frames: ConditionalDirectiveFrame[],
+    directive: ConditionalDirective,
+    target: VitePluginTaroTarget
+): void {
+    if (directive.name === 'ifdef' || directive.name === 'ifndef' || directive.name === 'if') {
+        const conditionMatched = evaluateConditionalDirective(directive, target)
+        const parentActive = isDirectiveStackActive(frames)
+        frames.push({ parentActive, active: parentActive && conditionMatched, matched: conditionMatched })
+        return
+    }
+
+    const currentFrame = frames.at(-1)
+    if (!currentFrame) return
+
+    if (directive.name === 'elif') {
+        if (currentFrame.matched) {
+            currentFrame.active = false
+            return
+        }
+        const conditionMatched = evaluateConditionalDirective(directive, target)
+        currentFrame.active = currentFrame.parentActive && conditionMatched
+        currentFrame.matched = conditionMatched
+        return
+    }
+
+    if (directive.name === 'else') {
+        currentFrame.active = currentFrame.parentActive && !currentFrame.matched
+        currentFrame.matched = true
+        return
+    }
+
+    if (directive.name === 'endif') frames.pop()
+}
+
+/**
+ * Evaluates the small expression subset used by Taro conditional comments.
+ *
+ * Mirrors Taro's simple CSS platform membership checks.
+ */
+function evaluateConditionalDirective(directive: ConditionalDirective, target: VitePluginTaroTarget): boolean {
+    if (directive.name === 'ifndef') return !matchesDirectiveTarget(directive.expression, target)
+    if (directive.name === 'ifdef') return matchesDirectiveTarget(directive.expression, target)
+    return evaluateConditionalExpression(directive.expression, target)
+}
+
+/**
+ * Supports simple #if expressions with !, &&, and || over the configured target token.
+ *
+ * Plugin-only: #if expressions with && and || have no Taro webpack counterpart.
+ */
+function evaluateConditionalExpression(expression: string, target: VitePluginTaroTarget): boolean {
+    const orTerms = expression.split('||')
+    return orTerms.some((term) =>
+        term
+            .split('&&')
+            .map((factor) => factor.trim())
+            .filter(Boolean)
+            .every((factor) => evaluateConditionalFactor(factor, target))
+    )
+}
+
+/**
+ * Evaluates one target token, optionally negated.
+ *
+ * Plugin-only: negated #if factors have no Taro webpack counterpart.
+ */
+function evaluateConditionalFactor(factor: string, target: VitePluginTaroTarget): boolean {
+    let token = factor.replace(/[()]/g, '').trim()
+    let negated = false
+    while (token.startsWith('!')) {
+        negated = !negated
+        token = token.slice(1).trim()
+    }
+    const matched = matchesDirectiveTarget(token, target)
+    return negated ? !matched : matched
+}
+
+/**
+ * Checks whether a directive target list includes the current target.
+ *
+ * Mirrors Taro's simple CSS platform membership checks.
+ */
+function matchesDirectiveTarget(expression: string, target: VitePluginTaroTarget): boolean {
+    const tokens = expression
+        .split(/[\s,|&()!]+/)
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean)
+    return tokens.includes(target)
+}
+
+/**
+ * Preserves source line counts when conditional blocks are stripped.
+ *
+ * Plugin-only: preserves Vite source-map line counts while stripping conditional blocks.
+ */
+function getLineEnding(line: string): string {
+    const match = line.match(/\r?\n$/)
+    return match?.[0] ?? ''
+}
+
+/**
+ * Returns whether all active nested conditional frames include the current line.
+ *
+ * Plugin-only: stack activity helper for generalized conditional directives.
+ */
+function isDirectiveStackActive(frames: ConditionalDirectiveFrame[]): boolean {
+    return frames.every((frame) => frame.active)
+}

package/src/vite/tailwindcss.ts

@@ -0,0 +1,41 @@
+import tailwindcss from '@tailwindcss/vite'
+import type { PluginOption } from 'vite'
+import { WeappTailwindcss } from 'weapp-tailwindcss/vite'
+import type { VitePluginTaroBuildContext } from './types.ts'
+
+export function createTailwindcssPlugins(context: VitePluginTaroBuildContext): PluginOption[] {
+    if (context.target === 'h5') return [tailwindcss()]
+
+    const plugins = WeappTailwindcss({
+        appType: 'taro',
+        generator: {
+            target: 'weapp'
+        },
+        tailwindcss: {
+            version: 4,
+            packageName: 'tailwindcss'
+        },
+        cssCalc: false,
+        // skyline does not support -webkit prefix.
+        autoprefixer: false,
+        postcssOptions: {
+            // Tailwind v4 prod mode emits legacy :before/:after selectors; skyline requires ::before/::after.
+            plugins: [createWechatPseudoElementPlugin()]
+        },
+        rem2rpx: true,
+        px2rpx: true
+    })
+
+    return plugins ?? []
+}
+
+function createWechatPseudoElementPlugin() {
+    const legacyPseudoElementPattern = /(?<!:):(before|after)\b/g
+
+    return {
+        postcssPlugin: 'vite-plugin-taro-wechat-pseudo-elements',
+        Rule(rule: { selector: string }) {
+            rule.selector = rule.selector.replace(legacyPseudoElementPattern, '::$1')
+        }
+    }
+}

package/src/vite/targets/h5.ts

@@ -0,0 +1,230 @@
+import type { types as BabelTypes, NodePath, PluginObj } from '@babel/core'
+import babel from '@rolldown/plugin-babel'
+import react from '@vitejs/plugin-react'
+import type { HtmlTagDescriptor, PluginOption, UserConfig } from 'vite'
+import { isProd, nodeRequire } from '../constants.ts'
+import type { JsonObject, VitePluginTaroBuildContext, VitePluginTaroPageOption } from '../types.ts'
+import { createPageComponentImport } from '../utils.ts'
+
+const virtualH5Id = 'virtual:vite-plugin-taro/h5'
+const patchStencilCssOrder = true
+
+/**
+ * Checks whether an id belongs to an H5 virtual module.
+ */
+export function isH5VirtualModuleId(id: string): boolean {
+    return id === virtualH5Id
+}
+
+/**
+ * Loads generated source for H5 virtual modules.
+ */
+export function loadH5VirtualModule(cleanId: string, context: VitePluginTaroBuildContext): string | undefined {
+    if (cleanId !== virtualH5Id) return
+    return createWebEntry(context)
+}
+
+/**
+ * Configures the Vite pieces needed for Taro H5 resolve/runtime behavior.
+ */
+export function createH5ViteConfig(): UserConfig {
+    return {
+        define: createH5TaroDefines(),
+        resolve: {
+            mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'jsnext'],
+            alias: [
+                // Resolve Stencil's transitive runtime import after Taro components are optimized separately.
+                ...(patchStencilCssOrder
+                    ? [
+                          {
+                              find: /^@stencil\/core\/internal\/client$/,
+                              replacement: nodeRequire.resolve('@stencil/core/internal/client', {
+                                  paths: [nodeRequire.resolve('@tarojs/components/package.json')]
+                              })
+                          }
+                      ]
+                    : []),
+                // H5 React code must use Taro's React component wrappers, not the raw custom-element entry.
+                { find: /^@tarojs\/components$/, replacement: nodeRequire.resolve('@tarojs/components/lib/react') },
+                // Taro's H5 router/components deep-import this custom-element loader; make it resolvable under pnpm.
+                {
+                    find: /^@tarojs\/components\/dist\/components$/,
+                    replacement: nodeRequire.resolve('@tarojs/components/dist/components')
+                },
+                // H5 APIs are exported from the platform API barrel; the generic @tarojs/taro root is native-oriented.
+                {
+                    find: /^@tarojs\/taro$/,
+                    replacement: nodeRequire.resolve('@tarojs/plugin-platform-h5/dist/runtime/apis')
+                }
+            ]
+        },
+        optimizeDeps: {
+            // Keep the Stencil runtime in Vite's transform pipeline so rewriteStencilStyleInsertion can patch it.
+            exclude: [patchStencilCssOrder ? '@stencil/core/internal/client' : ''].filter(Boolean)
+        },
+        build: {
+            target: 'es2018',
+            minify: isProd
+        }
+    }
+}
+
+/**
+ * Creates H5-only support plugins used before the target emitter runs.
+ *
+ * https://github.com/NervJS/taro/blob/f0e5c39d5f04290db975670411e23c3a396e15f8/packages/taro-platform-h5/src/program.ts#L219-L249
+ */
+export function createH5SupportPlugins(): PluginOption[] {
+    const plugins: PluginOption[] = [...react()]
+
+    if (patchStencilCssOrder) {
+        plugins.push(
+            babel({
+                include: /[\\/]@stencil[\\/]core[\\/]internal[\\/]client[\\/]index\.js(?:\?.*)?$/,
+                exclude: [],
+                plugins: [rewriteStencilStyleInsertion]
+            })
+        )
+    }
+
+    // Mirrors Taro H5: rewrite default Taro.xxx calls from vite-plugin-taro/taro to named H5 API imports.
+    plugins.push(
+        babel({
+            plugins: [
+                [
+                    nodeRequire.resolve('babel-plugin-transform-taroapi'),
+                    {
+                        packageName: 'vite-plugin-taro/taro',
+                        definition: nodeRequire(nodeRequire.resolve('@tarojs/plugin-platform-h5/dist/definition.json'))
+                    }
+                ]
+            ]
+        })
+    )
+
+    return plugins
+}
+
+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')"
+    )
+}
+
+/**
+ * Creates compile-time constants expected by Taro's Web runtime packages.
+ *
+ * https://github.com/NervJS/taro/blob/f0e5c39d5f04290db975670411e23c3a396e15f8/packages/taro-webpack5-runner/src/webpack/H5WebpackPlugin.ts#L51-L69
+ */
+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'),
+        IS_H5: 'true',
+        IS_WEAPP: 'false',
+        'process.env.SUPPORT_DINGTALK_NAVIGATE': JSON.stringify('disabled'),
+        DEPRECATED_ADAPTER_COMPONENT: 'false'
+    }
+}
+
+/**
+ * Injects vite-plugin-taro's generated Web entry into Vite's HTML shell.
+ */
+export function createWebIndexHtmlTags(context: VitePluginTaroBuildContext): HtmlTagDescriptor[] | undefined {
+    if (context.target !== 'h5') return
+
+    const tags: HtmlTagDescriptor[] = []
+    tags.push({
+        tag: 'script',
+        attrs: { type: 'module' },
+        children: `import '${virtualH5Id}'`,
+        injectTo: 'body'
+    })
+    return tags
+}
+
+/**
+ * Builds the generated Web entry around Taro's official Web router/runtime APIs.
+ * Base Taro CSS is imported before the app; component CSS order is handled by rewriteStencilStyleInsertion.
+ *
+ * https://github.com/NervJS/taro/blob/f0e5c39d5f04290db975670411e23c3a396e15f8/packages/taro-loader/src/h5.ts#L120-L150
+ */
+export function createWebEntry(context: VitePluginTaroBuildContext): string {
+    const webAppConfigCode = JSON.stringify(createWebAppConfig(context.appConfig))
+    const webRoutesConfigCode = createWebRoutesConfig(context.pages)
+
+    return `import ${JSON.stringify(nodeRequire.resolve('@tarojs/components/global.css'))}
+import ${JSON.stringify(nodeRequire.resolve('@tarojs/components/dist/taro-components/taro-components.css'))}
+import {
+    createHashHistory,
+    createReactApp,
+    createRouter,
+    handleAppMount,
+    window
+} from 'vite-plugin-taro/shim/h5'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import AppComponent from '${context.appComponentImport}'
+
+const config = window.__taroAppConfig = ${webAppConfigCode}
+config.routes = ${webRoutesConfigCode}
+const app = createReactApp(AppComponent, React, ReactDOM, config)
+const history = createHashHistory({ window })
+handleAppMount(config, history)
+createRouter(history, app, config, React)
+`
+}
+
+/**
+ * Creates the H5 app config consumed by Taro's Web router.
+ * Taro's H5 runtime expects `config.router` to exist, even when it is an empty object.
+ *
+ * https://github.com/NervJS/taro/blob/f0e5c39d5f04290db975670411e23c3a396e15f8/packages/taro-webpack5-runner/src/plugins/H5Plugin.ts#L49-L53
+ * https://github.com/NervJS/taro/blob/f0e5c39d5f04290db975670411e23c3a396e15f8/packages/taro-webpack5-runner/src/plugins/H5Plugin.ts#L133-L138
+ */
+function createWebAppConfig(sharedAppConfig: JsonObject): JsonObject {
+    return {
+        router: {},
+        ...sharedAppConfig
+    }
+}
+
+/**
+ * Creates Web route records in the same shape as Taro's H5 loader.
+ *
+ * https://github.com/NervJS/taro/blob/f0e5c39d5f04290db975670411e23c3a396e15f8/packages/taro-loader/src/h5.ts#L12-L21
+ * https://github.com/NervJS/taro/blob/f0e5c39d5f04290db975670411e23c3a396e15f8/packages/taro-loader/src/h5.ts#L108-L114
+ */
+function createWebRoutesConfig(webPages: VitePluginTaroPageOption[]): string {
+    const webRoutes = webPages.map((page) =>
+        [
+            'Object.assign({',
+            `  path: ${JSON.stringify(page.path)},`,
+            '  load: async function(context, params) {',
+            `    const page = await import(${JSON.stringify(createPageComponentImport(page.path))})`,
+            '    return [page, context, params]',
+            '  }',
+            `}, ${JSON.stringify(page.config)})`
+        ].join('\n')
+    )
+    return `[\n${webRoutes.join(',\n')}\n]`
+}