@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