webpacker-react icon indicating copy to clipboard operation
webpacker-react copied to clipboard

Rewrite as react-components-rails

Open renchap opened this issue 3 years ago • 7 comments

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

renchap avatar Feb 27 '22 21:02 renchap

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: image

net1957 avatar Jun 12 '22 22:06 net1957

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",
  }

net1957 avatar Jun 15 '22 17:06 net1957

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.

renchap avatar Aug 15 '22 10:08 renchap

I tested the latest beta (beta4) with both Webpacker and Vite-Ruby.

Lodash is also removed, this package no longer has any dependency :)

renchap avatar Aug 16 '22 11:08 renchap

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?

net1957 avatar Nov 30 '22 21:11 net1957

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.

rossta avatar Feb 17 '23 15:02 rossta

@renchap I notice that ujs integration hasn't yet been implemented. Would you like some assistance completing this branch?

rossta avatar Mar 02 '23 17:03 rossta