Option to pass plugins?

[GrabbenD]

Would it be possible to use ESBuild plugins such as esbuild-plugin-sass to support .scss files while running Jest?

    /home/user/Documents/Repo/esbuild-test/src/shared/components/Error/index.scss:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import 'src/styles/settings';
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      1 | import PropTypes from 'prop-types';
      2 | import { ERROR_TEXT_OVERRIDE } from 'src/shared/constants/overrideConstants';
    > 3 | import './index.scss';
        |        ^
      4 |
      5 | const Error = (props) => {
      6 |   const classes = `${

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at src/shared/components/Error/index.tsx:3:8
      at Object.<anonymous> (src/shared/components/Error/index.tsx:46:3)

[aelbore]

@Xriot thanks for this
question is there any advantage of using esbuild-plugin-sass vs jest transform for sass thats already available? thanks

[mdbetancourt]

i need this too, for @anatine/esbuild-decorators or esbuild-plugin-tsc to be able to use decorators

[bstro]

need this for svgr support; https://github.com/kazijawad/esbuild-plugin-svgr

[aelbore]

@bstro and @mdbetancourt what if you create a jest plugin for this? is there any advantage of using this? thanks

esbuild-jest is using transformSync and i think the esbuild plugin is using build or buildSync

i think you can create a jest plugin to perform tsc or svg

[aelbore]

@bstro have you tried this package?

https://www.npmjs.com/package/jest-svg-transformer

[davityavryan]

need this for svgr support; https://github.com/kazijawad/esbuild-plugin-svgr

This in thiory will be covered by #29 . But seems like there is no one interested in adding tests. :(

I will try to find some time, I guess.

[kfirba]

@davityavryan It won't solve the issue since it's using transformSync. esbuild in sync mode does not support plugins.

Is there any way we can use transform (async) instead? If so, it could indeed work.

[davityavryan]

@davityavryan It won't solve the issue since it's using transformSync. esbuild in sync mode does not support plugins.

True true. my bad. :/

[mooooooi]

@davityavryan It won't solve the issue since it's using transformSync. esbuild in sync mode does not support plugins.

Is there any way we can use transform (async) instead? If so, it could indeed work.

I can't see the option about plugins in transform api.

[mooooooi]

In another practical way, we can use transformAsync for jest's transformer to covert the code. As for the plugin, we use Esbuild's build interface

[aelbore]

• it think we can reuse existing jest plugin unless we can gain performance. I will close this and please reopen or create new issue if theres any benchmarks if reusing existing jest plugin vs having esbuild plugin

#30 (comment)

[aelbore]

closing this issue

[rmannibucau]

Any hope it gets reopened and wired (in terms of code it is trivial right?). Gain is quite huge cause instead of duplicating the build configuration you can reuse most of your esbuild.config.js without having to import jest specific transformers and speed boost can be kept too (thinking to aliasing react->preact for ex) even if the main gain right now is to avoid to code twice its build.

[tony-scio]

I'm trying to figure out how to use esbuild-jest with vanilla extract. They provide an esbuild plugin to do the transform, but can't tell from this thread if there's actually a way to tell esbuild-jest to use it or not.

https://www.npmjs.com/package/@vanilla-extract/esbuild-plugin

[aelbore]

Esbuild-jest is to transform Javascript and typescript, you can create jest plugin and use it as separate plugin

[rmannibucau]

@aelbore why forcing to code its build twice? Can, at least, a passthrough of options be supported? You would also note that esbuild plugins are also part of esbuild js transformations so required to reach your goal.

[aelbore]

@rmannibucau esbuild-jest uses transform and no plans to use build, the main purpose of this is to transpile new javascript and typescript.

[rmannibucau]

@aelbore I can see the point you just want to call one function and not use bundler for ex, would it help if esbuild promote plugins to transform api?

[dcolthorp]

@aelbore - There are cases where this is needed for TypeScript/JavaScript.

We were hoping to switch to esbuild, but need to emit decorator metadata with this plugin to support existing code using typeorm. Looks like this will be a blocker for compiling our TypeScript code.

Just adding this here to document additional use cases for this.