esbuild / community-plugins Goto Github PK

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

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?

I’ve noticed almost all plugins follow this convention. Do you want plugins to follow this convention in the future or is that simply not an important factor to consider for contributors / users?

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'
            });
        })
    }
}

At the bottom there's a link to https://github.com/esbuild/example-esbuild-plugin, which no longer exists.

Fyi this link is broken

Looks like the plugin was removed from the repo LinbuduLab/esbuild-plugins@94bd227

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

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

These files will be compiled in another application

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?

Is your request related to a problem? Please describe.

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

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

There is a quick-to-go snippet plugin for preact compatibility, worth to add: evanw/esbuild#266

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!

Please add:

esbuild-plugin-esmfile: Import .file.ts/.file.js modules to build files using the file loader...For example, importing rocket-launch.svg.file.ts builds rocket-launch.svg in the build output directory during build time.

esbuild-plugin-esmcss: Build .css.ts/.css.js modules as css assets.

Can someone add this to the list for me? I'm having trouble pushing to this repo.

• https://github.com/bgunnarsson/esbuild-plugin-twig: A plugin to build *.twig files.

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'}
    })
  }
}

esbuild-plugin-babel has been archived on 2023-01-03, making it impossible to contribute to it, while it would be worth (see open issues).

Does it make sense to deprecate it on this page in favour of alternatives?

For instance, I would recommend babelPlugin() provided with react-native-esbuild.