@amaster.ai/vite-plugins

Vite plugins collection for Amaster.ai projects, including Taro development tools.

Installation

pnpm add @amaster.ai/vite-plugins

Plugins

1. taroStyleAdapterPlugin

Automatically injects Taro page style adaptations in development mode to hide scrollbars while maintaining scroll functionality.

Features:

• Direct style injection into HTML (no postMessage needed)
• Only active in development mode (serve)
• Hides Taro page container scrollbar while maintaining scroll functionality
• Automatically included in devTools() - no separate import needed

Usage:

Already included when you use devTools():

import devTools from '@amaster.ai/vite-plugins'

export default {
  compiler: {
    type: 'vite',
    vitePlugins: [
      ...devTools() // ✅ taroStyleAdapterPlugin is already included
    ]
  }
}

Or use it standalone if needed:

import { taroStyleAdapterPlugin } from '@amaster.ai/vite-plugins'

export default {
  compiler: {
    type: 'vite',
    vitePlugins: [
      taroStyleAdapterPlugin()
    ]
  }
}

How it works:

The plugin uses Vite's transformIndexHtml hook to inject styles directly into the HTML <head>:

<style data-taro-adapter="true">
  /* 隐藏 Taro 页面容器滚动条 */
  .taro_page {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .taro_page::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* 隐藏 Taro ScrollView 组件滚动条 */
  .taro-scroll-view__scroll-y,
  .taro-scroll-view__scroll-x {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .taro-scroll-view__scroll-y::-webkit-scrollbar,
  .taro-scroll-view__scroll-x::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
</style>

This approach is simpler and more reliable than message-based communication.

2. injectTaroEnv / injectAmasterEnv

Environment variable injection helpers for Taro's defineConstants.

Usage:

import { injectAmasterEnv, injectTaroEnv } from '@amaster.ai/vite-plugins'

export default defineConfig({
  defineConstants: {
    ...injectAmasterEnv(),
    // or
    ...injectTaroEnv({
      additional: ['CUSTOM_VAR'],
      autoInjectTaroApp: true,
      autoInjectVite: true
    })
  }
})

3. componentIdPlugin

Adds unique IDs to components for development tools tracking.

4. editorBridgePlugin

Enables communication bridge between Taro app and editor.

5. routesExposePlugin

Exposes route information for editor integration.

6. browserLogsPlugin

Captures and forwards browser console logs (auto-enabled in sandbox environment).

Development Tools Collection

Use devTools() to quickly enable all development plugins:

import devTools from '@amaster.ai/vite-plugins'

export default defineConfig({
  compiler: {
    type: 'vite',
    vitePlugins: [
      ...devTools(),
      // ... other plugins
    ]
  }
})

This includes:

• taroStyleAdapterPlugin - Taro H5 scrollbar hiding
• componentIdPlugin - Component ID tracking
• editorBridgePlugin - Editor communication
• routesExposePlugin - Route information exposure
• browserLogsPlugin - Browser console forwarding (when in sandbox)

License

MIT

React development startup states

devTools() automatically includes startupPlugin() for non-Taro development servers. No changes to the application entry point or components are required.

• A self-contained Helige loading screen appears only when the first render takes longer than 300 ms. It uses inline CSS and no downloaded assets.
• The first React commit under #root removes the screen and reports readiness to the Vite server. Subsequent HTML requests, including other browsers, skip the screen. This state belongs to the Vite process and resets when Vite restarts.
• A default-exported, unmodified empty array in src/routes.tsx identifies the blank template. It displays “正在生成你的应用” until routes are added. Changing between empty and populated routes reloads the page; successful React mounting then removes loading. This is a template convention, not an AI job-status API.
• Syntax errors, runtime failures, and Vite error events dismiss the screen so diagnostics remain visible. A stalled cold start offers a retry after 60 seconds.
• Styles use a Shadow DOM, support small screens and reduced motion, and do not depend on application CSS. Production builds and Taro are unaffected.

import devTools from '@amaster.ai/vite-plugins'

export default defineConfig({
  plugins: [react(), ...devTools({
    startup: {
      delayMs: 300,
      routesFile: 'src/routes.tsx',
      placeholder: true,
    },
  })],
})

Set startup: false to disable both states, or startup: { placeholder: false } to retain only cold-start loading. Automatic readiness supports React 18+ apps using static react-dom/client imports and mounting with createRoot or hydrateRoot on #root. Other entry-point conventions should disable this feature. Readiness means React has committed a UI (including Suspense fallbacks), not that all application data or lazy routes have finished loading.