webpacker-react
webpacker-react copied to clipboard
Rewrite as react-components-rails
As discussed in #132, this is a rename and rewrite of this library.
Webpacker is now deprecated and wont get any new updates, but this library no longer relied on Webpacker.
The new name, react-components-rails
, shows this (thanks @yubele for the suggestion).
I chose to start a new project nearly from scratch to have a much simpler and modern development setup for this. I copied the existing source code so it should behave the same way, but the Javascript library is now build using microbundle
and written in Typescript.
TODO:
- [ ] add back UJS / Turbolinks / … support (but is it still current?)
- [ ] add back testing (using a single-file test app)
- [ ] add CI on Github Actions
in the gem react-components-rails (1.0.0.beta1) you miss the file react-components-rails.rb in lib. It should contain;
require "railtie" if defined?(Rails)
require "helpers"
require "component"
without it, the Rails part is not loading.
and some unneeded files are in the gem:
during "compilation" with esbuild I get this error:
D:\Dvlt\ruby\projects\_active\Db_presenter>yarn build:dev
yarn run v1.22.18
$ esbuild app/javascript/application.js --bundle --sourcemap --inject:./app/javascript/react-shim.js --outdir=app/assets/builds
X [ERROR] Could not resolve "react-components-rails"
app/javascript/application.js:15:33:
15 │ import ReactComponentsRails from 'react-components-rails'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~
The module "./dist/react-components-rails.modern.js" was not found on the file system:
node_modules/react-components-rails/package.json:15:15:
15 │ "default": "./dist/react-components-rails.modern.js"
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I don't know microbundle, but as a workaround changing the default field to ./dist/react-components-rails.module.js allow to get a running bundle and application.
my application package.json contains:
"scripts": {
"build:dev": "esbuild app/javascript/application.js --bundle --sourcemap --inject:./app/javascript/react-shim.js --outdir=app/assets/builds",
}
Sorry, it took me quite a lot of time to come back to this project.
The gem should now be fixed, I reworked the JS build process and added support for the new React 18+ render API.
This makes a dynamic import for react-dom/client
to test if you are running React 18+ or not, using await import("react-dom/client")
. Bundlers should be able to transform this as needed, but I suspect this might break in some setups.
I just published react-components-rails
1.0.0-beta2 to both NPM and Rubygems.
I plan to merge this to main
before the end of the month, and then add back some tests before the final release.
I tested the latest beta (beta4
) with both Webpacker and Vite-Ruby.
Lodash is also removed, this package no longer has any dependency :)
It's on production for some times now without any problem :)
my configuration at this time:
- Rails 7.04
- React 18.2.0
- react-components-rails 1.0.0-beta.4
- esbuild 0.15.16
Can we expect a new non beta release?
We are also successfully building with 1.0.0-beta.4 on both React 17 (with the my documented webpack workaround) and React 18 on webpack 5. It would be great to see this merged to main
with a 1.0.0 release.
@renchap I notice that ujs integration hasn't yet been implemented. Would you like some assistance completing this branch?