Switch from `webpack` to `esbuild` #19

denis-ok · 2023-11-03T11:10:14Z

This PR removes webpack with esbuild for the sake of speed and simplicity.

How to test

Fetch the PR and run:

# build the project
$ make start_example

# serve resulting bundle
$ make serve_example

* main: Update changelog Update melange constraint Remove pin for melange Remove reason-react pin, install a regular ocaml version melange v3: fixes for latest changes support melange v3 update to latest rr update to reason-react 0.14

jchavarri · 2024-09-09T12:50:10Z

Some things that we have to fix before merging this PR:

Esbuild live reload doesn't work when Dune runs reshowcase, because the esbuild devserver gets killed every time a file changes, which breaks the eventsource connection (see Add proxy support #32 (comment)). We should replace start-example in Makefile with two commands: one to build the example with Dune, and another to call reshowcase start.
The call to start-example gets passed --output which is not needed in that mode
Add changelog entry
Update README, which references webpack

Add proxy support

rusty-key · 2024-09-09T13:46:59Z

@jchavarri, I merged proxy support PR, detached dune/esbuild and updated readme/changelog. Please take another look

jchavarri

Looks good, just a few minor fixes and suggestions. Thanks!

CHANGES.md

jchavarri · 2024-09-09T13:49:56Z

Makefile

+
+.PHONY: serve-example
+serve-example: ## Serves example on given port
+	$(BUILD_DIR)/commands/reshowcase start --entry=./$(BUILD_DIR)/example/example/example/Demo.js -port=8000


I think -port has two dashes:

Suggested change

$(BUILD_DIR)/commands/reshowcase start --entry=./$(BUILD_DIR)/example/example/example/Demo.js -port=8000

$(BUILD_DIR)/commands/reshowcase start --entry=./$(BUILD_DIR)/example/example/example/Demo.js --port=8000

(also why do we need to pass it if it's the same value as the default?)

we don't need to pass it, you are right. Removed

jchavarri · 2024-09-09T13:50:20Z

README.md

@@ -59,17 +59,6 @@ opam pin add reshowcase.dev git+https://github.com/ahrefs/reshowcase.git#main

 This will make the NodeJS script `reshowcase` available in your opam switch.

-To make sure this script works, add the following dependencies to your application `package.json`:


I'd mention here esbuild and the @craftamap/esbuild-plugin-html plugin.

added, but maybe it's better to vendor it?

jchavarri · 2024-09-09T14:01:59Z

commands/reshowcase

+  entryNames: "[name]-[hash]",
+  assetNames: "[name]-[hash]",
+  chunkNames: "[name]-[hash]",


These are needed because otherwise it would use the default [dir]/[name] right? Not sure if worth a comment.

I actually do not no, they were here before me. Will check

jchavarri · 2024-09-09T14:06:29Z

commands/reshowcase

+          return console.error(`[reshowcase] ${error}`)
+        } else {
+          console.timeEnd(durationLabel);
+          console.log(`[reshowcase] http://localhost:${port}`)


Suggested change

console.log(`[reshowcase] http://localhost:${port}`)

console.log(`[reshowcase] Server started at http://localhost:${port}`)

jchavarri · 2024-09-09T14:07:50Z

README.md

@@ -84,6 +73,6 @@ $ reshowcase start --entry=path/to/Demo.js
 $ reshowcase build --entry=path/to/Demo.js --output=path/to/bundle
 ```

-If you need custom webpack options, create the `.reshowcase/config.js` and export the webpack config, plugins and modules will be merged.
+If you need custom esbuild options, create the `.reshowcase/config.js` and export the esbuild config. Plugins and modules will be merged.


I wonder if we should mention here that if users use their own template, they have to add the new EventSource('/esbuild')... script manually if they want to keep livereload working.

denis-ok

Looks good, thanks for finishing!
Have one suggestion.

denis-ok · 2024-09-10T03:38:23Z

commands/reshowcase

+      const server = http.createServer((req, res) => {
+        let options = {
+          path: req.url,
+          method: req.method,
+          headers: req.headers,
+        };


Should we add a minimal graceful shutdown for esbuild server and node http server?

We'll listen for SIGINT and SIGTERM signals.

For esbuild:

When you are done with a context object, you can call dispose() on the context to wait for existing builds to finish, stop watch and/or serve mode, and free up resources.

https://esbuild.github.io/api/#build

For node HTTP server:

Stops the server from accepting new connections and closes all connections connected to this server which are not sending a request or waiting for a response.

https://nodejs.org/api/http.html#serverclosecallback

Done: 592039e

$ make build && make serve-example opam exec -- dune build _build/default/commands/reshowcase start --entry=./_build/default/example/example/example/Demo.js [reshowcase] Watch and serve started. Duration: 25.562ms [reshowcase] http://localhost:8000 [esbuild] Rebuild finished! ^C[reshowcase] Received shutdown signal, shutting down gracefully... [reshowcase] Server shut down gracefully

Co-authored-by: Javier Chávarri <[email protected]>

denis-ok added 3 commits November 3, 2023 17:57

Add esbuild dep

37dbc4e

Add esbuild html plugin

9776074

Add basic code for esbuild

aa114b6

denis-ok force-pushed the esbuild branch from 7a8656b to a68308d Compare November 3, 2023 14:46

denis-ok added 4 commits November 3, 2023 21:47

Pass params to serve

b60c024

Use full iframe url in dev mode

9c49f0f

Pass entry path relative to cwd to html plugin

e6c2536

Use single html plugin

6724342

denis-ok force-pushed the esbuild branch from a68308d to 6724342 Compare November 4, 2023 15:08

denis-ok added 2 commits November 5, 2023 18:02

Add file loader for some basic formats

d09f16d

Add filenames settings

6284bb3

tatchi mentioned this pull request Nov 27, 2023

migrate to rspack #20

Open

rusty-key mentioned this pull request Jul 17, 2024

Migrate to esbuild/alternative #24

Open

denis-ok and others added 7 commits August 2, 2024 15:15

Merge branch 'main' into esbuild

1645f5c

* main: Update changelog Update melange constraint Remove pin for melange Remove reason-react pin, install a regular ocaml version melange v3: fixes for latest changes support melange v3 update to latest rr update to reason-react 0.14

Update esbuild

f79ea92

Remove webpack and concurrently

a8605aa

Update opam files

905fe30

Support port arg, subscribe to server event to reload

b78c91f

Specify public path, use tmpdir

e4b6af2

Merge branch 'main' into esbuild

17bd7d5

rusty-key force-pushed the esbuild branch from e284770 to 17bd7d5 Compare September 5, 2024 09:19

rusty-key added 7 commits September 5, 2024 15:56

try out proxy possibility

a13cb07

add socket support

9ff7335

clarify variable names

215425a

do not omit headers

b27ba4c

ensure that esbuild doesn’t take server’s port

9e3debe

add [reshowcase] labels to logs

6121837

add timings to logs

92874ad

jchavarri mentioned this pull request Sep 9, 2024

Add proxy support #32

Merged

rusty-key added 5 commits September 9, 2024 14:18

add more labels to logs

f638cb2

Merge pull request #32 from ahrefs/esbuild-proxy

4d6625e

Add proxy support

separate dune and esbuild

2808462

remove mentions of webpack from the readme

19caa5a

add changelog entry

8162be9

rusty-key changed the title ~~Esbuild~~ Switch from webpack to esbuild Sep 9, 2024

rusty-key requested a review from jchavarri September 9, 2024 13:47

rusty-key marked this pull request as ready for review September 9, 2024 13:47

jchavarri approved these changes Sep 9, 2024

View reviewed changes

denis-ok commented Sep 10, 2024

View reviewed changes

rusty-key and others added 7 commits September 14, 2024 19:22

Update CHANGES.md

3037b6b

Co-authored-by: Javier Chávarri <[email protected]>

do not pass default port

1138071

add mention of required extensions

d50b38e

add graceful shutdown

592039e

remove leftovers

2a1e0f8

don’t use let

0a8b5ea

improve logs

13dd9da

rusty-key merged commit d10ea8e into main Sep 14, 2024

rusty-key deleted the esbuild branch September 14, 2024 18:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch from `webpack` to `esbuild` #19

Switch from `webpack` to `esbuild` #19

denis-ok commented Nov 3, 2023 •

edited by rusty-key

Loading

jchavarri commented Sep 9, 2024

rusty-key commented Sep 9, 2024

jchavarri left a comment

jchavarri Sep 9, 2024

rusty-key Sep 14, 2024

jchavarri Sep 9, 2024

rusty-key Sep 14, 2024

jchavarri Sep 9, 2024

rusty-key Sep 14, 2024

jchavarri Sep 9, 2024

jchavarri Sep 9, 2024

denis-ok left a comment

denis-ok Sep 10, 2024

rusty-key Sep 14, 2024

	$(BUILD_DIR)/commands/reshowcase start --entry=./$(BUILD_DIR)/example/example/example/Demo.js -port=8000
	$(BUILD_DIR)/commands/reshowcase start --entry=./$(BUILD_DIR)/example/example/example/Demo.js --port=8000

		@@ -59,17 +59,6 @@ opam pin add reshowcase.dev git+https://github.com/ahrefs/reshowcase.git#main

		This will make the NodeJS script `reshowcase` available in your opam switch.

		To make sure this script works, add the following dependencies to your application `package.json`:

	console.log(`[reshowcase] http://localhost:${port}`)
	console.log(`[reshowcase] Server started at http://localhost:${port}`)

Switch from webpack to esbuild #19

Switch from webpack to esbuild #19

Conversation

denis-ok commented Nov 3, 2023 • edited by rusty-key Loading

How to test

jchavarri commented Sep 9, 2024

rusty-key commented Sep 9, 2024

jchavarri left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

denis-ok left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Switch from `webpack` to `esbuild` #19

Switch from `webpack` to `esbuild` #19

denis-ok commented Nov 3, 2023 •

edited by rusty-key

Loading