#esbuild

This is both awesome and cursed :awesome: 😬:

polywasm - a #JavaScript library that implements the #WebAssembly API and can act as a polyfill, if #WASM is not available.

Made by the creator of #esbuild evanw.

https://github.com/evanw/polywasm

I'm wondering, though, whether this is really needed, given that there is asm.js 🤔

Also see section "Can WebAssembly be polyfilled?" on the WebAssembly FAQ:

https://webassembly.org/docs/faq/

#WebDev #JS #Polyfill

Just published my new template for modern #node library development using #esbuild and #TypeScript:

https://github.com/foxkit-js/library-template

Try esbuild online
https://esbuild.github.io/try/
#ES_Next_News #ECMAScript #JavaScript #esbuild

Current #webdev idea: A tiny cli-frontend for #esbuild (https://esbuild.github.io/) that essentially does the work of setting up your build, dev, watch, etc. commands for you and that you can use to add entrypoints etc.
The point would be that you wouldn't need to deal with setting up a new esbuild.js for every project.

If someone is creating service workers with #Workbox recipes and injectManifest, a build with #esbuild, and doesn't have any issues, I'm interested! 😅

I have a very strange issue:

https://github.com/GoogleChrome/workbox/issues/3207

Bonus points if this is with @eleventy

#ServiceWorker

⚓️ https://nicolas-hoizey.com/notes/2023/05/13/1/

#Angular v16 launched today!

This is a feature-PACKED release including:

🚦 Signals in developer preview.
➡️ Required inputs.
💧 Non-destructive hydration in developer preview.
🧍‍♀️ Standalone APIs for #Universal and improved schematics.
🛠️ Faster builds with #ESBuild and #Vite in developer preview.
🃏 Experimental #Jest support.
🅰️ ... and way more!

Check out our blog post for all the deets.

https://blog.angular.io/angular-v16-is-here-4d7a28ec680d

Using #esbuild with #blazor https://blog.dymaptic.com/using-esbuild-with-blazor
#dotnet #javascript

It's getting there...
You save them on the left, then when you build/serve the top right is generated and you can do what bottom right shows.
To give a little bit more of context, the JSPM generator api doesn't let you do import map installs (adding a new package) when you have trailing slashes (the lit directives in the example above), that and currently custom resolutions are not saved when you do a "regenerate"
So now with paths in the config, you can save custom paths as well as ensuring your import map is generated correctly.
Because we'll regenerate the map and use the latest resolutions from jspm and then we'll add your customizations to the map just before it is saved to disk
I still need to ensure these are marked as external and when they are relative imports we should resolve the path to disk using esbuild's alias feature
--alias:@app/components=./components/exports.js
All in all I'm quite excited about this feature as it will fix some DX issues I harshly faced when porting fantomas-tools to perla and failed on stream 😅
so... yeah we'll fix those

#dotnet #fsharp #esbuild #webdev #perladevserver

Building Xeact components with esbuild and Nix

https://xeiaso.net/blog/xeact-esbuild

#nix #xeact #esbuild #frontend

esbuild v0.17.14
https://github.com/evanw/esbuild/releases/tag/v0.17.14
#ES_Next_News #ECMAScript #JavaScript #esbuild

Today, #nodejs package hell drove me crazy. #commonjs and #esm bundling with only #esbuild seems to be impossible today; at least I didn't manage to get a configuration that supports
- browser environment (when installled in an app, for example with #vitejs)
- node environment (for services in node docker containers)
- bin script support

Especiallly the generated CommonJS of esbuild seems to be strange and lead to a lot of incompatibilites.

#Development #Overviews
The most popular build tools for front-end developers in 2023 · Key features and benefits of the top build tools for web development https://ilo.im/11g6au

_____
#WebDevelopment #WebDev #Frontend #Workflow #Collaboration #Automation #Tool #BuildTool #Compiler #Bundler #TaskRunner #JavaScript #TypeScript #Esbuild #Lerna #Nx #Parcel #Rollup #Rome #SWC #Turbo #Vite #Webpack

I maintain a small utility library for my Javascript projects called "zeed". While trying to make it "sideEffects"-free, so that all unused code is removed by tree-shaking, I found some interesting things that I did not expect in this way and wrote them down: https://github.com/holtwick/zeed/blob/master/demos/sideeffects/README.md #esbuild #sideffects #treeshake #js #typescript #zeed

Hmmm, what to do? I'm refactoring a webapp of mine kicking out all the old frontend stuff, but aim to keep the build tooling to a minimal. Will be going with #Tailwindcss, so that requires Node (which is fine).

But for the #javascript parts, which will be libraries such as #htmx and #hyperscript, but also #chartjs and some others. Will I add #ESBuild to handle this, use unpkg (don't want to depend on a CDN) or manually download and link in my project?

esbuild v0.17.10
https://github.com/evanw/esbuild/releases/tag/v0.17.10
#ES_Next_News #ECMAScript #JavaScript #esbuild

I've just released a new version of cm4all-wp-bundle (https://github.com/IONOS-WordPress/cm4all-wp-bundle) - a nano-sized high performance js/css resource bundler targeting #WordPress #Gutenberg with minimal dependencies based on #esbuild

NPM: https://www.npmjs.com/package/cm4all-wp-bundle

Docker: https://hub.docker.com/repository/docker/lgersman/cm4all-wp-bundle/general

I've just released a new version of cm4all-wp-bundle (https://github.com/IONOS-WordPress/cm4all-wp-bundle) - nano-sized high performance js/css resource bundler targeting #WordPress #Gutenberg with minimal dependencies based on #esbuild

NPM: https://www.npmjs.com/package/cm4all-wp-bundle

Docker: https://hub.docker.com/repository/docker/lgersman/cm4all-wp-bundle/general

PS. This is a very neat visualiser for JavaScript bundles with source maps:

https://evanw.github.io/source-map-visualization/

#sourceMap #JavaScript #esbuild #bundle

esbuild v0.17.5
https://github.com/evanw/esbuild/releases/tag/v0.17.5
#EsNextNews #EcmaScript #JavaScript #esbuild

Finally making progress in using a modern JS frontend configuration that's not overtly complicated to use in a Go pipeline.

The secret is using #esbuild as a Go package together with go:embed-ing the CSS and JS directly in the binary. The web-components I'm using are generally #lit-js components from Adobe.

Instructions for building #oni have become:

$ go generate frontend.go
$ go build cmd/oni/main.go

@simon build tools don't have to be huge or nothing, either. #esbuild is simple and quick, if you do need a build step but not every bell and whistle.

I wish other #javascript #bundler and #minifier support `/*@__INLINE__*/` annotation. Not just specific to terser.

#webdev #esbuild #swc

esbuild v0.17.0
https://github.com/evanw/esbuild/releases/tag/v0.17.0
#EsNextNews #EcmaScript #JavaScript #esbuild

https://2022.stateofjs.com/en-US/
#webdev #javascript #stateofjs #stateOfJs2022

Observations: women are slowly increasing, #react #vite #esbuild #webpack #tauri #lodash #typescript

Apparently rollup + sucrase + terser is a good combo for bundling libs with a lot of chunks. Caveat is sucrase doesn't inline `const enum`.

I should switch my build pipeline from #esbuild to #rollup++ when running on CI. Better to refactor my code to use `constant/*.ts` with a lot of `const` variables rather than using `const enum` everywhere.

I wish #deno has a lint rule to disallow `const enum` 😔

#webdev #javascript #rant

is esbuild cleaning up its output dir itself or do you really need a cleanup plugin? My amount of files does not seem to increase, or is it maybe only if you e.g. remove a .js file and it does not know to delete it's orphaned build files? #esbuild

Some details on my stack: I’m implemented in #TypeScript built for the browser using #ESBuild and running on the server on @deno_land . On the frontend, the main code editor is implemented using the excellent
CodeMirror 6.0 library, with Preact for the relatively small amount of additional UI.

You can install SB as a PWA, giving its own frame and dock icon (on any #Chromium-based browser, or Safari on iOS).

I added a while ago #ESBuild support to #shopware cli. So I wrote a blog post about it and how it differs from the default bundling. https://shyim.me/blog/how-to-build-shopware-extension-assets-faster/

#socket can now run headless with `--headless` flag, also what's cool is that it can accept stdin, so for example you can pipe your #esbuild to it, run it, output #tap, and then pipe that to a beautifier. With #electron, this was such a pain in the ass and required different modules that did some weird voodoo.

✨
Sentry now supports:
#vite (https://vitejs.dev/),
#esbuild (https://esbuild.github.io/), and
#rollupjs (https://rollupjs.org)
✨

New bundler plugins make it easier for you to upload source maps, check it out 👇
https://bit.ly/sentry-sourcemaps

@robert_p_king @wkfry I don't personally use sass/scss yet, but I can recommend #esbuild for TS-compiling and package bundling if you need those with #blazor.

Trying to rewrite a Webpack multi-compile setup that takes 40+ minutes for production builds... tried Vite, tried ESBuild... both just can't do what I need. What's next? #javascript #reactjs #vite #webpack #esbuild

@keithjgrant Some great folks building cutting-edge frontend tooling:

- @patak, @Shini92: @vite
- @antfu: @vitest, #SliDev & much more
- @nmoo, @matthewp, @calebjasik, @bholmesdev: #AstroJS
- @daniel: #Nuxt
- @zachleat: #11ty
- @akryum: histoire
- @evanw: #ESBuild
- @developit: @preact
- @brandontroberts: #Angular #AnalogJS
- @lindsaykwardell: #elmLang #vueJS
- @jessicasachs: #ViteJS, #testing

Finally,
@shilman, @dannyhw, @reinhold, @chantastic and myself for #Storybook

Who did I miss?

Which topics in #blazor would make the best blog posts?
#dotnet #javascript #esbuild #typescript #JSON

@aral @rtn I mean it helps because there's multiple compilers (like #esbuild) because of it, you don't have to choose the one maintained by Microsoft. Also, since VSCode is maintained by MS also, do you have any alternative IDE recommendations?

Installed `jsbundling-rails` and `stimulus-rails` for a project that's using #Stimulus + #Turbo streams to wrangle our #jQuery spaghetti.

Much less painful than I anticipated!

`jsbundling-rails`:

1. Builds your assets in a different thread
2. Shovels them to a gitignored folder
3. Adds the gitignored folder to the #Sprockets lookup path

Next step is moving the #Sprockets compiled JS into #esbuild so we can rely on `import` statements rather than `//= require`

I love that NodeKit builds in under half a second thanks to the magic of esbuild. I plan to keep that characteristic as it matures :)

(The web apps you serve with NodeKit have no build stage.)

https://github.com/small-tech/nodekit

#NodeKit #esbuild #SmallWeb #web0

I love that it takes esbuild a fraction of a second to turn my 93MB (source size, including node_modules) project into a 2.6MB minified distribution file.

#esbuild #NodeJS

If you encounter “ReferenceError: require is not defined” in your ESM Node.js projects when building them using esbuild, take a look at this, in case it helps:

https://github.com/evanw/esbuild/issues/946

#esbuild #NodeJS #bug #workaround #esm

Published a quick, easy-to-run example of the esbuild svelte plugin sample code here, in case it helps anyone get up and running with it faster:

https://github.com/aral/esbuild-svelte-plugin-example

#esbuild #svelte