Git Product home page Git Product logo

vite-plugin-debug-js's Introduction

vite-plugin-debug-js

This is a small plugin for Vite to import the debug package.

It provides a virtual module that sets up the namespace based on the path and file name. Because being lazy is its own reward.

Getting Started

Installation

pnpm add -D vite-plugin-debug-js debug

Then add to your vite.config.ts:

import vitePluginDebug from 'vite-plugin-debug-js';

export default defineConfig({
  plugins: [
    vitePluginDebug(),
  ],
});

Usage

Import and call:

import { debug } from 'virtual:debug-js';

debug("Hello, world!");

// Depending on your environment, you should see something similar to:
//    2023-05-16 13:43:11.1030 vite-app:lib:hello.ts Hello, world!

Types

Add to vite-env.d.ts or anywhere else in the project:

declare module "virtual:debug-js" {
  import { Debugger } from "debug";
  const debug: Debugger;
}

Doing more

Configuration

The following options can be passed to the plugin:

{
  /** The absolute path to the root of the projecct. This will be used to generate
   *  Ids for Debug, among other things.
   */
  rootDir: string;

  /** The namespace to use for Debug.  */
  debugNamespace: string;

  /** Enable debugging for this namespace to be active. It is also possible to set
   *  this to 'false' and use the standard Debug methods of enabling/disabling.
   */
  debugEnabled: boolean;

  /** Names of path components not to include in the namespace (e.g. 'src')
   */
  stripComponents: string[];
}

The plugin will attempt to choose a sensible default for rootDir, but it is easily confused by things like symlinks.

Further reading

debug offers some neat features for both browser and node environments; see its documentation for more details. This plugin is just a wrapper around the import so you don't have to think about namespaces.

Development and Testing

PRs appreciated. The tests aren't great.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.