Rewrite as react-components-rails

[renchap]

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

[yubele]

Since turbolink has been deprecated in rails7 in favor of turbo-rails, we have made it work as follows.

However, this method may affect performance.

Suggested change

	ReactComponentsRails.setup({ Hello }) // ES6 shorthand for {Hello: Hello}
	document.addEventListener("turbo:load", function() {
	ReactComponentsRails.setup({ Hello }) // ES6 shorthand for {Hello: Hello}
	})

[net1957]

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:

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

[renchap]

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]

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

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

[net1957]

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?

[rossta]

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]

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