Giter Club home page Giter Club logo

community-plugins's Introduction

Community plugins for esbuild

⚠️ These plugins are from the community and are not officially supported. ⚠️

This is just a centralized list of 3rd-party plugins to make discovery easier. No guarantees are made as to plugin quality, compatibility, or lack of malicious code. As with all 3rd-party dependencies, you should review them yourself before including them in your project.

Plugin list

New file extensions (hosted on npm)

Other plugins (hosted on npm)

Plugins for Deno

How to use a plugin

To use an esbuild plugin, you generally import it into your build script and then pass it to the esbuild API like this:

const esbuild = require('esbuild')
const somePlugin = require('some-plugin')

esbuild.build({
  plugins: [
    somePlugin(),
  ],
  ...
}).catch(() => process.exit(1))

More documentation about plugins and the plugin API is available here.

Adding your plugin here

If you would like to add your plugin to this list, create a PR that updates this README file. The update should add a single bullet under the Plugin list section that starts with a link to the plugin and is followed by a brief one-sentence description. The text of the link should be the npm package name and it should be inserted in alphabetical order. It should look something like this:

Before creating a PR, please make sure that:

  • The package is already published to npm
  • You are the author of the plugin
  • You are willing to respond to issues about the plugin if people file issues against it

Note: Even though the text "esbuild-plugin-example" above is a link, it's just example placeholder text. The project at the link destination intentionally doesn't exist. The text is only linked to demonstrate how you should format your entry.

community-plugins's People

Contributors

asnaeb avatar brillout avatar clearlysid avatar corrideat avatar dalcib avatar evanw avatar favna avatar g45t345rt avatar hum-n avatar igoradamenko avatar indooorsman avatar inqnuam avatar jarred-sumner avatar jed avatar jumplink avatar kivol avatar kmalakoff avatar koluch avatar m90 avatar mitschabaude avatar mxro avatar nolde avatar pd4d10 avatar reesericci avatar robinloeffel avatar silentvoid13 avatar thomaschaaf avatar timsexperiments avatar yamitsushi avatar zombiezen 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 avatar avatar avatar avatar avatar avatar avatar

Forkers

ggoodman idevelop privatenumber shiftx alexxnb kivol iam-medvedev zaydek koluch arcanis deanc a-b-r-o-w-n josfk martonlederer jarred-sumner phenax darionco indooorsman thomaschaaf apeschar zombiezen brian-mcbride g45t345rt johnie jfortunato aheissenberger childishgiant csszabi98 jed angolgw mahaker bennypowers linjiajian999 jzeuzs mitschabaude pd4d10 karolis-sh wjchumble mooooooi linbudu599 marcofugaro d3caf plxity bigfish8 hesxenon githubjike sanyuan0704 mikeyhodl simon04 peterklein qiweiii chenjiahan activeguild mister-what zimnovich ozanozbek turtiesocks henrhie oblador tinchoz49 corrideat omyasn whaaaley whatdoyouseedoc kmalakoff rottencandy fakundo artemklyuev jaredcwhite yoannmoinet timsexperiments xxshady lv-saharan favna imranbarbhuiya okobsamoht mxro darrendanielday akarachen yamitsushi lepichu inqnuam lucsoft brillout webdeveric debonex reesericci asnaeb gemvido ethicalsecurity-agency mhsdesign jayelkaake wjfei nitish-rk wfleming jumplink y-developer devm33 vpctorr ymulenll

community-plugins's Issues

Seeking feedback on a nested build plugin

Hey all,

I'm working on a web server (server.mjs) that serves a service worker (sw.js) that serves a JavaScript app (index.js), and would like to build the entire app into a single deployable file. so in my case server.mjs imports sw.js, which in turn imports index.js, and the convention I'm using is that .mjs files are bundled as usual, and .js files are bundled as IIFEs and returned as {source, map} objects. so, for example, server.mjs contains import {source, map} from './sw.js where source and map are both strings.

I've built the following plugin to try to accomplish this. but would like some feedback about a more elegant esbuild-ish way. specifically:

  1. is there a better way to prevent infinite recursion than the plugin storing a reference to remove itself from the parent build?
  2. is there any way to have the returned contents be binary instead of strings? (can't use the binary loader because i need to return an object with two properties).
  3. is there a way to get a reference to the original build function so that the plugin could be self-contained?
  4. is this a sound approach, or a terrible idea? ie, am i better off running these builds consecutively?
let myplugin = {
  name: 'myplugin',
  setup(b) {
    b.onLoad({filter: /\.js$/}, async args => {
      let {outputFiles} = await build({...b.initialOptions,
        entryPoints: [args.path],
        format: 'iife',
        outdir: '.',
        write: false,
        plugins: b.initialOptions.plugins.filter(p => p !== myplugin)
      })

      let values = Object.values(outputFiles)
      let [map, source] = values.map(value => value.text)
      let contents = JSON.stringify({source, map})
      return {contents, loader: 'json'}
    })
  }
}

Is this dead?

Seems like this plugin database is dead.
Is that the case?

build.onEnd is not a function - in custom plugin setup() {...}

I'm trying to make a quick plugin to basically do sipel template-parsing/replacement in specific types of files (ie. HTML files - in order to add a hash string to the end of static assets urls).

Anyway, I'm trying to utilize the onBuild hook to manually generator the output file, which the docs refer to here:
https://esbuild.github.io/plugins/#caching-your-plugin

However, when running, it's saying it doesn't exist on the build object:

transform setup { onResolve: [Function: onResolve], onLoad: [Function: onLoad] }
 > C:\Users\rw3is\Sites\adcloud\app\scripts\build.js:48:14: error: build.onEnd is not a function
    48 │         build.onEnd(result => {
       ╵               ^
    at setup (C:\Users\rw3is\Sites\adcloud\app\scripts\build.js:48:15)
    at handlePlugins (C:\Users\rw3is\Sites\adcloud\app\node_modules\esbuild\lib\main.js:659:7)

1 error
Error building html: Build failed with 1 error:

The code is essentially:

let transformHtmlTemplatePlugin = {
    name: 'transform',
    setup(build) {
        let fs = require('fs')

        console.log('transform setup', build)

        // Load ".txt" files and return an array of words
        build.onLoad({ filter: /\.html$/ }, async (args) => {
            let text = await fs.promises.readFile(args.path, 'utf8');
            console.log('html file', text);
            text = text.replace('{TEST}', 'THIS IS TEST');
            return {
                contents: text,
                loader: 'text',
            }
        })
        
       //... more ommitted
}

And the build process is:


function buildHtml(entryFile, outFile) {
    esbuild.build({
        entryPoints: [entryFile],
        outfile: outFile,
        target: TARGET,
        logLevel: 'verbose',
        // loader: { // built-in loaders: js, jsx, ts, tsx, css, json, text, base64, dataurl, file, binary
        //     '.html': 'file'
        // },
        define,
        plugins: [transformHtmlTemplatePlugin]
    })
        .then(r => { console.log(`Build html ${entryFile} to ${outFile} succeeded.`) })
        .catch((e) => {
            console.log("Error building html:", e.message);
            process.exit(1)
        })
}

Is there anything wrong with this approach, or is there a reason why onBuild doesn't exist on the plugin's build argument?

Permission Denied

Issue:
The documentation makes it seem like you can just clone the repo and create a pull request however, when I do, I get a permission denied error when trying to push either a 'feature' branch or the master branch.

Intent
I was going to add a wrapper to the list. unpkg-bundler will dynamically fetch and load npm packages from unpkg. It does this via esbuild plugins. However the function exposed from this package (bundle) also takes care of setting up the service and calls build, transpiling and bundling the user's code.

Suggestion
include a new section in the readme for wrappers as follows:

### Wrappers
* [unpkg-bundler](https://www.npmjs.com/package/unpkg-bundler): Dynamically fetch and load npm packages from [unpkg](https://unpkg.com/) as well as transpile and bundle in the browser.

Thanks!

Build ignoring .scss imports and copy then

I have a lib with an assets folder, but when I try to build it I get the following error:
image

I would like to ignore the scss files and make a copy of the assets folder to the outputDir, keeping imports in ts files

With babel i can do this
image

These files will be compiled in another application

Can someone verify this (.env file loader) plugin, before I publish?

Hi. I was looking for a way to read in a .env file in the current project directory, using esbuild, without having to import the 'dotenv' package into my actual project, so I figure a plugin is the best way.
I saw the existing example of loading the current environment variables from the esbuild documentation, but not a way to load individual .env files in a project.
https://esbuild.github.io/plugins/#using-plugins

Can someone please verify this functionality doesn't exist, in some other way, before I publish this plugin?

The plugin uses the example's approach of:

import { ENV_VARIABLE } from 'env';

and is setup such that it will look in the current file's directory, or any parent folder, until it finds a .env file to load. It will then combine this with the already defined process.env variables, and return the full object for importing.

I'd like to change it to possibly also accept a specific location for the .env, ie:
import { ENV_VARIABLE } from '../../somePath/.env';

... but will start with what's below. I think the above requires setting the loader type for '.env' files on the esbuild main build api, and then using the plugin from that point on, but still working that out.

Anyway, can someone verify this, before I publish, if it's not too much trouble?

let envFilePlugin = {
    name: 'env',
    setup(build) {

        function _findEnvFile(dir) {
            if (!fs.existsSync(dir))
                return false;
            let filePath = `${dir}/.env`;
            if ((fs.existsSync(filePath))) {
                return filePath;
            } else {
                return _findEnvFile(path.resolve(dir, '../'));
            }
        }

        build.onResolve({ filter: /^env$/ }, async (args) => {
            // find a .env file in current directory or any parent:
            return ({
                path: _findEnvFile(args.resolveDir),
                namespace: 'env-ns',
            })
        })

        build.onLoad({ filter: /.*/, namespace: 'env-ns'}, async (args) => {
            // read in .env file contents and combine with regular .env:
            let data = await fs.promises.readFile(args.path, 'utf8')
            const buf = Buffer.from(data)
            const config = require('dotenv').parse(buf);

            return ({
                contents: JSON.stringify( { ...process.env, ...config }),
                loader: 'json'
            });
        })
    }
}

The repository URL `example-esbuild-plugin` returns 404

Is your request related to a problem? Please describe.

The repository URL listed for example-esbuild-plugin in README returns 404.

community-plugins/README.md

Line 101 in 1be7c0f

* [example-esbuild-plugin](https://github.com/esbuild/example-esbuild-plugin): A plugin to load `*.example` files.

Link: https://github.com/esbuild/example-esbuild-plugin

Describe the solution you'd like

Provide example ESBuild plugin repository at https://github.com/esbuild/example-esbuild-plugin, or some different name under esbuild project

using plugins in a go environment

Is it possible to leverage javascript modules as plugins when running in go? I'd like to avoid having the node ecosystem in my go project if possible. Any strategy suggestions to vendor a js plugin and use it with the esbuild go flavor?

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.