vite-plugin-vconsole

vite plugin for vconsole

A plugin for Vite v2+ that helps developers easily use the functions of VConsole in various environments.

English | 中文

Install (yarn or npm)

node version: >=12.0.0

vite version: >=2.0.0

# npm
npm i vite-plugin-vconsole -D
npm i  vconsole -S

# yarn
yarn add vconsole
yarn add vite-plugin-vconsole -D

# pnpm
pnpm add vconsole
pnpm add -D vite-plugin-vconsole

Example

# vue
cd ./example/vue-demo

yarn install

yarn dev

# react
cd ./example/react-demo

yarn install

yarn dev

Usage

Config plugin in vite.config.ts

• Vue sample config

// tips: If the reference path hint does not exist, you can import the @types/node package
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteVConsole } from 'vite-plugin-vconsole';
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteVConsole({
      entry: path.resolve('src/main.ts'), // or you can use entry: [path.resolve('src/main.ts')]
      enabled: true,
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});

• Vue sample config for multi pages

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteVConsole } from 'vite-plugin-vconsole';
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteVConsole({
      entry: [path.resolve('src/main.ts')], // entry for each page, different from the above
      enabled: true,
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});

• React sample config

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { viteVConsole } from 'vite-plugin-vconsole';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    viteVConsole({
      entry: path.resolve('src/main.tsx'),
      enabled: true,
      config: {
        maxLogNumber: 1000,
        theme: 'dark'
      }
    })
  ]
});

• Different from the production environment and development environment

// Different from the production environment and development environment
// You can use command / mode to distinguish usage
import { UserConfigExport, ConfigEnv } from 'vite';
import { viteVConsole } from 'vite-plugin-vconsole';
import vue from '@vitejs/plugin-vue';
import * as path from 'path'

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteVConsole({
        entry: [path.resolve('src/main.ts')], // entry file
        enabled: command !== 'serve' || mode === 'test', // build production
        config: { // vconsole options
          maxLogNumber: 1000，
          theme: 'light'
        }
      })
    ],
  };
};

• vConsole plugin config

viteVConsole({
  entry: path.resolve('src/main.ts'),
  enabled: true,
  config: {
    theme: 'dark',
    onReady() {
      console.log(23333);
    }
  },
  plugin: [
    {
      id: 'my_plugin',
      name: 'MyPlugin',
      event: [
        {
          eventName: 'init',
          callback: function () {
            console.log('My plugin init');
          }
        },
        {
          eventName: 'renderTab',
          callback: function () {
            console.log('My plugin renderTab');
          }
        }
      ]
    },
    {
      id: 'my_plugin2',
      name: 'MyPlugin2',
      event: [
        {
          eventName: 'init',
          callback: function () {
            console.log('My plugin2 init');
          }
        },
        {
          eventName: 'renderTab',
          callback: function () {
            console.log('My plugin2 renderTab');
          }
        }
      ]
    }
  ]
})

viteVConsole Options

/// <reference types="vconsole" />

{
  entry: string | string[]; // entry file require
  enabled?: boolean;
  config?: VConsoleOptions
  plugin?: {
    id: string;
    name: string;
    event: {
      eventName: string;
      callback: (data?: any) => void;
    }[]
  }[]
}

• A custom rule that triggers destruction, see the question request: How to judge page userAgent to choose whether to load vconsole

// customHide: A piece of executable code, used to start some APIs on the browser side.
viteVConsole({
  entry: path.resolve('src/main.ts'),
  enabled: true,
  customHide: `/iphone/g.test(navigator.userAgent.toLowerCase())`,
  config: {
    theme: 'dark',
    onReady() {
      console.log(23333);
    }
  },
})

• Dynamic configuration, see issue requirements: How to dynamically modify the theme?

Please note that the dynamic configuration here has the highest priority, and dynamicConfig will override the configuration in config.

You can provide a stringified runnable function that listens for a parameter as a trigger. Then modify a global variable window.vConsole.dynamicChange.value. When this variable changes, the dynamic configuration will take effect again. Here you can combine the above dynamic configuration to dynamically switch themes.

The reason why this design uses more stringified code is to reduce code intrusion into the production environment.

// Example, distinguish theme light and dark colors based on class
// Distinguish black or white based on whether it has a dark class name
viteVConsole({
  config: {
    theme: 'light'
  },
  dynamicConfig: {
    theme: `document.querySelectorAll('.dark').length ? 'dark' : 'light'`,
  },
  // If you need to switch themes without refreshing
  eventListener: `
    const targetElement = document.querySelector('body'); // Select the element to listen to
    const observerOptions = {
      attributes: true, // Listen for property changes
      attributeFilter: ['class'] // Only monitor class attribute changes
    };

    // Define callback functions to handle observed changes
    function handleAttributeChange(mutationsList, observer) {
      for(let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          console.log('The class attribute was modified.');
          // Add the code you need to execute here
          if (window && window.vConsole) {
            window.vConsole.dynamicChange.value = new Date().getTime();
          }
        }
      }
    }

    // Create an observer instance and pass in the callback function
    const observer = new MutationObserver(handleAttributeChange);

    // Start observing the target element
    observer.observe(targetElement, observerOptions);

    // Stop observing when it is no longer needed
    // observer.disconnect();
  `,
})

Options

entry

type: string | string[] require:

must support. Supports multiple entries when it is an array.

enabled

type: boolean

default: true

config

type:: VConsoleOptions

plugin

type:

{
  id: string;
  name: string;
  event: {
    eventName: string;
    callback: (data?: any) => void;
  }[]
}[]

customHide

type:: String

Typescript

Add a reference to vconsole

/// <reference types="vconsole" />

dynamicConfig

Dynamic configuration items, which contain stringified functions. (It is recommended not to use dynamic configuration in production environments)

dynamicConfig: {
  theme?: string;
  target?: string;
  defaultPlugins?: string;
  disableLogScrolling?: boolean;
  pluginOrder?: string;
  log?: string;
  network?: string;
  storage?: string;
}

Here you can combine the following configurations to dynamically switch themes. Modifying a global variable window.vConsole.dynamicChange.value will trigger dynamic configuration reloading without refreshing the page.

eventListener

You can provide a stringified runnable function that listens for a parameter as a trigger. Then modify a global variable window.vConsole.dynamicChange.value. When this variable changes, the dynamic configuration will take effect again. Here you can combine the above dynamic configuration to dynamically switch themes.

eventListener?: string

Sample project

vite-vue-prod-template

Compatible to solve the Windows path problem

Update to V1.1.1+ version, Now you can use it normally in Windows.

Support multi-page configuration

Update to V1.2.0+ version, can support multi-page configuration.

Many thanks to @AfireHong for support!

Support VConsole Functions Configuration

Update to V1.3.0+ version, can support VConsole Functions Configuration.

Many thanks to @KeJunMao for support!

Support VConsole Plugin Configuration.Support custom destruction

Update to V2.0.0+ version, can support VConsole Plugin Configuration.Also supports custom destruction.

Support VConsole dynamic configuration. Support eventListener

Updated to version V2.1.0+, VConsole dynamic configuration can be configured. and you can give some eventListener code. It can be easily configured to follow theme changes, etc.

License

MIT