Giter VIP home page Giter VIP logo

vite-rollup-plugins's Introduction

โšก๏ธ Vite Rollup Plugins ๐Ÿฃ

A compatibility list and test playground

https://vite-rollup-plugins.patak.dev

Important

This resource is archived and won't be updated anymore. Vite represents now more than 55% of the npm downloads of Rollup. To properly scale and keep the compat info always up-to-date it makes more sense for Rollup plugins to document their compatibility status directly in their docs.

โœ… status for each official plugin

โš ๏ธ enforce needed badge

๐Ÿ› ๏ธ install instructions

๐Ÿงช compatible plugins are used in the page

Run it locally

These instructions will get you a copy of the project up and running on your local machine for development

Clone the repo

Use ssh

git clone [email protected]:matias-capeletto/vite-rollup-plugins.git

Or https

git clone https://github.com/matias-capeletto/vite-rollup-plugins.git

In the repo folder run

yarn
yarn dev

Your dev server will start and be running at

  > Local:    http://localhost:3000/

To build

yarn build

Contributing

This is work in progress, there are some official plugins that remain untested. PRs welcomed.

Adding a Plugin

Start by adding your plugin to src/plugins folder. If you'd like your plugin to display a test component, then create a new file for it as YourPlugin.ts. Otherwise you can add it to OfficalPlugins.ts if it is an offical plugin or CommunityPlugins.ts if it is a community plugin.

When writing a plugin make sure you use the definePlugin function to define your plugin.

Example Plugin

import { definePlugin, PluginStatus, PluginCategory } from '~/util'
import PluginBeep from '~/components/official/PluginBeep.vue'

export default definePlugin({
  name: 'beep',
  description: 'System beeps on errors and warnings',
  category: PluginCategory.Official,
  status: PluginStatus.Compatible,
  demo: PluginBeep,
})

Links

License

MIT

vite-rollup-plugins's People

Contributors

0xdeadc0d3 avatar asyncbanana avatar cijiugechu avatar fabd avatar gu-miao avatar hugoimaios avatar nstringham avatar patak-dev avatar segevfiner avatar wheatjs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vite-rollup-plugins's Issues

Plugin ordering issue in the eslint example (for Typescript files)

The eslint example didn't work out of the box because any typescript related eslint configs are applied after source transform.

Esbuild transpiles .ts files to plain javascript, then eslint runs on its output. If eslint config has rules for typescript it complains about missing return types and whatnot. The giveaway is the line numbers are incorrect, and the errors in the IDE don't match those thrown on vite build.

Found the fix here: https://github.com/ehutch79/vite-eslint#warning

Adding the enforce setting fixes the issue. The eslint worked as expected in serve and build modes:

{
      ...eslint({
        include: "./src/**/*.(vue|js|jsx|ts|tsx)",
      }),
      enforce: "pre",

      // uncomment this to lint only on `vite build`
      // apply: "build",
    },

As a side note,

in your examples you use file patterns like this: '**/*.+(vue|js|jsx|ts|tsx)'. I think this allows to match file..ts ? Is there a specific reason to allow "one or more dots" before the file extension?

Question: what is the difference between "covered" and "included" ?

I think the descriptions of the Statuses are a bit ambiguous.
I get that "Covered" mean it's in the core functionality of Vite. But "shipped out of the box with Vite" means the same to me.
Does it means "Included" are maintained by Vite team, available in @Vite npm namespace ?
Have a nice day

Rollup plugin strip() isn't working with Vite ? ( doesn't strip console.log() )

Hi

Great site! ๐Ÿ‘

I tried to use the Rollup strip plugin, which is listed as "compatible".

I copied the config shown when clicking the little info icon:

// ...
import strip from "@rollup/plugin-strip"

export default defineConfig({
  // other options here...
  
  plugins: [
    vue(),
    WindiCSS(),
    {
      ...strip(),
      apply: 'build',
    },
  ]
}

Somehow couldn't get it to work. Specifically: console.log() and console.assert() still showed after vite build.

Curiously no warnings or any errors from vite build, so the config appears to be syntactically correct at least.

I trried via rollupOptions as well but no luck:

  build: {
    rollupOptions: {
       plugins: [strip()],
    },

Instead I remembered an option in Terser, and I was able to strip console statements this way :

export default defineConfig({
  build: {
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  },

Just wondering if the config for strip() is incorrect or there is something else it needs somehow?

Vite 3

Is it planned to make this list/a new list for Vite 3 plugins - personally I am specifically after a list of what plugins are already included in Vite 3

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.