feat: add `esbuild` plugin #113

nedjulius · 2023-12-09T01:15:16Z

Addresses issue #83

Adds a StyleX plugin for esbuild bundler. There are some caveats with how the esbuild plugin API works, and it seems that the consumer will have to provide a full path to the build directory directly to the plugin, because there's no other way to access the build path in the onEnd callback. I am using the onEnd callback in this case (which runs at the end of the build, implied by the name), as we first have to transform each ts[x]/js[x] before we can process the StyleX rules. Let me know if you have simpler ideas on how to solve the bundling of CSS.

An example of how consuming the plugin would look like:

await esbuild.build({
  entryPoints: [path.resolve(__dirname, 'src/index.js')],
  outdir: 'dist',
  outfile: 'bundled.js',
  plugins: [stylexPlugin({ absoluteFilePath: path.resolve(__dirname, 'dist/stylex.css') })],
});

Some remaining things to do:

Improve tests, specifically test for injections in dev and for the output in non-dev build
Add CSS writes to disk

nedjulius · 2023-12-09T01:17:25Z

packages/esbuild-plugin/src/index.js

+
+        return {
+          contents: code,
+          loader: currFileName.endsWith('.js') ? 'js' : 'tsx',


tsx loader can handle ts, tsx and jsx files

update: turns out this wasn't entirely correct. encountered some import resolution problems when using tsx loader for JSX files, even though the esbuild documentation said that either loader is fine. for the sake of simplicity, I just match extension to loader. we can rely on extensions because of the filter guarantees.

I could also create a dictionary and map extension to loader in case esbuild changes the loader names or we want to use different loader for a given extension. lmk what you think.

packages/esbuild-plugin/__tests__/__fixtures__/.babelrc.json

packages/esbuild-plugin/__tests__/__fixtures__/index.js

packages/esbuild-plugin/src/index.js

nmn · 2023-12-09T01:30:28Z

Looks promising so far!

packages/esbuild-plugin/src/index.js

nedjulius · 2023-12-14T04:18:39Z

apps/docs/docs/learn/03-installation.mdx

@@ -196,6 +196,48 @@ provides plugins for Webpack, Rollup, and Next.js.

 </details>

+<details>


added esbuild plugin example to the installations page in docs.

Please be patient as it may take me a few days to review this properly.

nmn · 2023-12-18T00:23:47Z

Lots of failing tests, so please work on that as I make my way through the PR.

nedjulius · 2023-12-18T00:25:32Z

@nmn yup, looking into it. probably related to package lock merge conflicts that I tried to resolve yesterday.

flow-typed/node-libraries.js

nmn

It's almost there! I've left a few comments. Please address those and I'll test it merge it within a few days.

packages/esbuild-plugin/src/index.js

nedjulius · 2024-01-06T17:10:17Z

hey @nmn are you still considering adding this?

nmn · 2024-01-07T04:19:08Z

@nedjulius Yes. Still planning to merge this for the next release.

* Add eslint-plugin package * Add initial test suite * Improve CSS handling and tests * Address some of the comments * Add babel scripts for jsx, flow and ts * Add package diff * Add snapshots and fix nits * Fix rename bug * Add esbuild example app * Fix incorrect loaders * Update package-lock.json * Remove unnecessary file * Fix some nits in example * Add additional style to text fixture * Remove ext from import in example * Address some of the comments * Update package-lock.json * Add missing function call and snapshot * Remove comment * Pluralize function name * Add types * Fix build script * Add docs * Fix tabulation * Retake snapshots * Format prettier * Add more missing types * Run formatter * Fix formatting * Lock dependency and fix import * Disable unused key * Add docs * Update package-lock.json * Update package-lock.json * Add snapshots * Address comments

nedjulius added 3 commits December 7, 2023 21:33

Add eslint-plugin package

7d0268a

Add initial test suite

94b7407

Improve CSS handling and tests

14637f0

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 9, 2023

nedjulius changed the title ~~Nedjulius/add esbuild plugin~~ feat: add esbuild plugin Dec 9, 2023

vercel bot deployed to Preview December 9, 2023 01:17 View deployment

nedjulius commented Dec 9, 2023

View reviewed changes

nmn reviewed Dec 9, 2023

View reviewed changes

packages/esbuild-plugin/__tests__/__fixtures__/.babelrc.json Outdated Show resolved Hide resolved

nmn reviewed Dec 9, 2023

View reviewed changes

packages/esbuild-plugin/__tests__/__fixtures__/index.js Outdated Show resolved Hide resolved

nmn reviewed Dec 9, 2023

View reviewed changes

packages/esbuild-plugin/__tests__/__fixtures__/index.js Outdated Show resolved Hide resolved

nmn reviewed Dec 9, 2023

View reviewed changes

packages/esbuild-plugin/src/index.js Outdated Show resolved Hide resolved

nmn added the enhancement New feature or request label Dec 9, 2023

Address some of the comments

6fe9c5f

vercel bot deployed to Preview December 9, 2023 02:05 View deployment

nedjulius added 2 commits December 8, 2023 21:27

Add babel scripts for jsx, flow and ts

d3a0f5f

Add package diff

cd62e9f

vercel bot deployed to Preview December 9, 2023 02:30 View deployment

nmn reviewed Dec 9, 2023

View reviewed changes

packages/esbuild-plugin/src/index.js Outdated Show resolved Hide resolved

Add snapshots and fix nits

4a287db

vercel bot deployed to Preview December 10, 2023 05:16 View deployment

Fix conflicts

7811896

vercel bot deployed to Preview December 10, 2023 05:24 View deployment

Fix rename bug

17011de

vercel bot deployed to Preview December 10, 2023 05:46 View deployment

nedjulius marked this pull request as ready for review December 10, 2023 09:24

nedjulius added 4 commits December 10, 2023 17:23

Add esbuild example app

eb94b3c

Fix incorrect loaders

90b06c3

Update package-lock.json

083de80

Remove unnecessary file

891c561

Lock dependency and fix import

736c1f2

vercel bot deployed to Preview December 14, 2023 01:54 View deployment

Disable unused key

9338cb8

vercel bot deployed to Preview December 14, 2023 02:09 View deployment

Add docs

4ff83a5

nedjulius commented Dec 14, 2023

View reviewed changes

vercel bot deployed to Preview December 14, 2023 04:27 View deployment

Merge conflict

ac9caa0

vercel bot had a problem deploying to Preview December 17, 2023 15:44 Failure

Update package-lock.json

a07f5bb

vercel bot had a problem deploying to Preview December 18, 2023 04:20 Failure

Update package-lock.json

91f6eca

vercel bot deployed to Preview December 18, 2023 04:46 View deployment

Add snapshots

cd1f8b9

vercel bot deployed to Preview December 18, 2023 05:06 View deployment

nmn reviewed Dec 18, 2023

View reviewed changes

flow-typed/node-libraries.js Outdated Show resolved Hide resolved

nmn reviewed Dec 18, 2023

View reviewed changes

packages/esbuild-plugin/src/index.js Outdated Show resolved Hide resolved

packages/esbuild-plugin/src/index.js Show resolved Hide resolved

packages/esbuild-plugin/src/index.js Show resolved Hide resolved

Address comments

9615a5b

vercel bot deployed to Preview December 18, 2023 17:25 View deployment

Merge branch 'main' into nedjulius/add-esbuild-plugin

6fa1540

vercel bot deployed to Preview December 24, 2023 07:24 View deployment

nmn changed the base branch from main to release/v0.5.0 January 7, 2024 13:43

nmn merged commit 44076e8 into facebook:release/v0.5.0 Jan 7, 2024
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add `esbuild` plugin #113

feat: add `esbuild` plugin #113

nedjulius commented Dec 9, 2023 •

edited

Loading

nedjulius Dec 9, 2023

nedjulius Dec 10, 2023 •

edited

Loading

nmn commented Dec 9, 2023

nedjulius Dec 14, 2023 •

edited

Loading

nmn Dec 14, 2023

nmn commented Dec 18, 2023

nedjulius commented Dec 18, 2023

nmn left a comment

nedjulius commented Jan 6, 2024

nmn commented Jan 7, 2024

		@@ -196,6 +196,48 @@ provides plugins for Webpack, Rollup, and Next.js.

		</details>

		<details>

feat: add esbuild plugin #113

feat: add esbuild plugin #113

Conversation

nedjulius commented Dec 9, 2023 • edited Loading

nedjulius Dec 9, 2023

Choose a reason for hiding this comment

nedjulius Dec 10, 2023 • edited Loading

Choose a reason for hiding this comment

nmn commented Dec 9, 2023

nedjulius Dec 14, 2023 • edited Loading

Choose a reason for hiding this comment

nmn Dec 14, 2023

Choose a reason for hiding this comment

nmn commented Dec 18, 2023

nedjulius commented Dec 18, 2023

nmn left a comment

Choose a reason for hiding this comment

nedjulius commented Jan 6, 2024

nmn commented Jan 7, 2024

feat: add `esbuild` plugin #113

feat: add `esbuild` plugin #113

nedjulius commented Dec 9, 2023 •

edited

Loading

nedjulius Dec 10, 2023 •

edited

Loading

nedjulius Dec 14, 2023 •

edited

Loading