react-rails 1.9.0 → 3.2.1

data/README.md

@@ -1,391 +1,139 @@
-[![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)
-[![Build Status](https://img.shields.io/travis/reactjs/react-rails/master.svg?style=flat-square)](https://travis-ci.org/reactjs/react-rails)
-[![Gemnasium](https://img.shields.io/gemnasium/reactjs/react-rails.svg?style=flat-square)](https://gemnasium.com/reactjs/react-rails)
-[![Code Climate](https://img.shields.io/codeclimate/github/reactjs/react-rails.svg?style=flat-square)](https://codeclimate.com/github/reactjs/react-rails)
-[![Test Coverage](https://img.shields.io/codeclimate/coverage/github/reactjs/react-rails.svg?style=flat-square)](https://codeclimate.com/github/reactjs/react-rails/coverage)
-
-* * *
-
-# react-rails
-
-
-`react-rails` makes it easy to use [React](http://facebook.github.io/react/) and [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html)
-in your Ruby on Rails (3.2+) application. `react-rails` can:
-
-- Provide [various `react` builds](#reactjs-builds) to your asset bundle
-- Transform [`.jsx` in the asset pipeline](#jsx)
-- [Render components into views and mount them](#rendering--mounting) via view helper & `react_ujs`
-- [Render components server-side](#server-rendering) with `prerender: true`
-- [Generate components](#component-generator) with a Rails generator
-- [Be extended](#extending-react-rails) with custom renderers, transformers and view helpers
-
-Just getting started with React? Make sure to check out the [Getting Started] (https://facebook.github.io/react/docs/getting-started.html) guide. Also, see [Related Projects](#related-projects) below.
-
-## Installation
-
-Add `react-rails` to your gemfile:
-
-```ruby
-gem 'react-rails'
-```
-
-And install:
-
-```
-bundle install
-```
-
-Next, run the installation script:
-
-```bash
-rails g react:install
-```
-
-This will:
-- create a `components.js` manifest file and a `app/assets/javascripts/components/` directory,
-where you will put your components
-- place the following in your `application.js`:
-
-  ```js
-  //= require react
-  //= require react_ujs
-  //= require components
-  ```
-
-## Usage
-
-### React.js builds
-
-You can pick which React.js build (development, production, with or without [add-ons]((http://facebook.github.io/react/docs/addons.html)))
-to serve in each environment by adding a config. Here are the defaults:
-
-```ruby
-# config/environments/development.rb
-MyApp::Application.configure do
-  config.react.variant = :development
-end
-
-# config/environments/production.rb
-MyApp::Application.configure do
-  config.react.variant = :production
-end
-```
-
-To include add-ons, use this config:
-
-```ruby
-MyApp::Application.configure do
-  config.react.addons = true # defaults to false
-end
-```
-
-After restarting your Rails server, `//= require react`  will provide the build of React.js which
-was specified by the configurations.
-
-`react-rails` offers a few other options for versions & builds of React.js.
-See [VERSIONS.md](https://github.com/reactjs/react-rails/blob/master/VERSIONS.md) for more info about
- using the `react-source` gem or dropping in your own copies of React.js.
-
-### JSX
-
-After installing `react-rails`, restart your server. Now, `.js.jsx` files will be transformed in the asset pipeline.
-
-#### BabelTransformer options
-
-You can use babel's [transformers](http://babeljs.io/docs/advanced/transformers/) and [custom plugins](http://babeljs.io/docs/advanced/plugins/),
-and pass [options](http://babeljs.io/docs/usage/options/) to the babel transpiler adding following configurations:
-
-```ruby
-config.react.jsx_transform_options = {
-  blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
-  optional: ["transformerName"],  # pass extra babel options
-  whitelist: ["useStrict"] # even more options
-}
-```
-Under the hood, `react-rails` uses [ruby-babel-transpiler](https://github.com/babel/ruby-babel-transpiler), for transformation.
-
-### Rendering & mounting
-
-`react-rails` includes a view helper (`react_component`) and an unobtrusive JavaScript driver (`react_ujs`)
-which work together to put React components on the page. You should require the UJS driver
- in your manifest after `react` (and after `turbolinks` if you use [Turbolinks](https://github.com/rails/turbolinks)).
-
-The __view helper__ puts a `div` on the page with the requested component class & props. For example:
-
-```erb
-<%= react_component('HelloMessage', name: 'John') %>
-<!-- becomes: -->
-<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>
-```
-
-On page load, the __`react_ujs` driver__ will scan the page and mount components using `data-react-class`
-and `data-react-props`.
-
-If Turbolinks is present components are mounted on the `page:change` event, and unmounted on `page:before-unload`.
- __Turbolinks >= 2.4.0__ is recommended because it exposes better events.
-
-In case of __Ajax calls__, the UJS mounting can be triggered manually by calling from javascript:
-
-```javascript
-ReactRailsUJS.mountComponents()
-```
-
-The view helper's signature is:
-
-```ruby
-react_component(component_class_name, props={}, html_options={})
-```
-
-- `component_class_name` is a string which names a globally-accessible component class. It may have dots (eg, `"MyApp.Header.MenuItem"`).
-- `props` is either an object that responds to `#to_json` or an already-stringified JSON object (eg, made with Jbuilder, see note below).
-- `html_options` may include:
-  - `tag:` to use an element other than a `div` to embed `data-react-class` and `data-react-props`.
-  - `prerender: true` to render the component on the server.
-  - `**other` Any other arguments (eg `class:`, `id:`) are passed through to [`content_tag`](http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
-
-
-### Server rendering
-
-To render components on the server, pass `prerender: true` to `react_component`:
-
-```erb
-<%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %>
-<!-- becomes: -->
-<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}">
-  <h1>Hello, John!</h1>
-</div>
-```
-
-_(It will also be mounted by the UJS on page load.)_
-
-There are some requirements for this to work:
-
-- `react-rails` must load your code. By convention, it uses `components.js`, which was created
-by the install task. This file must include your components _and_ their dependencies (eg, Underscore.js).
-- Your components must be accessible in the global scope.
-If you are using `.js.jsx.coffee` files then the wrapper function needs to be taken into account:
-
-  ```coffee
-  # @ is `window`:
-  @Component = React.createClass
-    render: ->
-      `<ExampleComponent videos={this.props.videos} />`
-  ```
-- Your code can't reference `document`. Prerender processes don't have access to `document`,
-so jQuery and some other libs won't work in this environment :(
-
-You can configure your pool of JS virtual machines and specify where it should load code:
-
-```ruby
-# config/environments/application.rb
-# These are the defaults if you don't specify any yourself
-MyApp::Application.configure do
-  # Settings for the pool of renderers:
-  config.react.server_renderer_pool_size  ||= 1  # ExecJS doesn't allow more than one on MRI
-  config.react.server_renderer_timeout    ||= 20 # seconds
-  config.react.server_renderer = React::ServerRendering::SprocketsRenderer
-  config.react.server_renderer_options = {
-    files: ["react-server.js", "components.js"], # files to load for prerendering
-    replay_console: true,                 # if true, console.* will be replayed client-side
-  }
-end
-```
-
-- On MRI, use `therubyracer` for the best performance (see [discussion](https://github.com/reactjs/react-rails/pull/290))
-- On MRI, you'll get a deadlock with `pool_size` > 1
-- If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
-
-You can configure camelize_props option and pass props with an underscored hash from rails but get a camelized hash in jsx :
-
-```ruby
-MyApp::Application.configure do
-  config.react.camelize_props = true #default false
-end
-```
+# React-Rails v3
 
-### Rendering components instead of views
-
-Components can also be prerendered directly from a controller action with the custom `component` renderer. For example:
-
-```ruby
-class TodoController < ApplicationController
-  def index
-    @todos = Todo.all
-    render component: 'TodoList', props: { todos: @todos }, tag: 'span', class: 'todo'
-  end
-end
-```
-
-This custom renderer behaves the same as a normal view renderer and accepts the usual arguments - `content_type`, `layout`, `location` and `status`.
-By default, your current layout will be used and the component, rather than a view, will be rendered in place of `yield`. Custom data-* attributes
-can be passed like `data: {remote: true}`.
-
-### Component generator
-
-`react-rails` ships with a Rails generator to help you get started with a simple component scaffold.
-You can run it using `rails generate react:component ComponentName (--es6)`.
-The generator takes an optional list of arguments for default propTypes,
-which follow the conventions set in the [Reusable Components](http://facebook.github.io/react/docs/reusable-components.html)
-section of the React documentation.
-
-For example:
-
-```shell
-rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
-```
-
-would generate the following in `app/assets/javascripts/components/post.js.jsx`:
-
-```jsx
-var Post = React.createClass({
-  propTypes: {
-    title: React.PropTypes.string,
-    body: React.PropTypes.string,
-    published: React.PropTypes.bool,
-    publishedBy: React.PropTypes.instanceOf(Person)
-  },
-
-  render: function() {
-    return (
-      <div>
-        <div>Title: {this.props.title}</div>
-        <div>Body: {this.props.body}</div>
-        <div>Published: {this.props.published}</div>
-        <div>Published By: {this.props.publishedBy}</div>
-      </div>
-    );
-  }
-});
-```
-
-#### Options
-
-**--es6** : Generate the same component but using cutting edge es6 class
-
-For example:
-
-```shell
-rails generate react:component Label label:string --es6
-```
-
-**--coffee** : Generate the component using CoffeeScript syntax
-
-For example:
-
-```shell
-rails generate react:component Label label:string --coffee
-```
-
-#### Arguments
-
-The generator can use the following arguments to create basic propTypes:
-
-  * any
-  * array
-  * bool
-  * element
-  * func
-  * number
-  * object
-  * node
-  * shape
-  * string
-
-The following additional arguments have special behavior:
-
-  * `instanceOf` takes an optional class name in the form of {className}.
-  * `oneOf` behaves like an enum, and takes an optional list of strings in the form of `'name:oneOf{one,two,three}'`.
-  * `oneOfType` takes an optional list of react and custom types in the form of `'model:oneOfType{string,number,OtherType}'`.
-
-Note that the arguments for `oneOf` and `oneOfType` must be enclosed in single quotes
- to prevent your terminal from expanding them into an argument list.
-
-### Jbuilder & react-rails
-
-If you use Jbuilder to pass a JSON string to `react_component`, make sure your JSON is a stringified hash,
-not an array. This is not the Rails default -- you should add the root node yourself. For example:
-
-```ruby
-# BAD: returns a stringified array
-json.array!(@messages) do |message|
-  json.extract! message, :id, :name
-  json.url message_url(message, format: :json)
-end
-
-# GOOD: returns a stringified hash
-json.messages(@messages) do |message|
-  json.extract! message, :id, :name
-  json.url message_url(message, format: :json)
-end
-```
-
-## CoffeeScript
-
-It is possible to use JSX with CoffeeScript. To use CoffeeScript, create files with an extension `.js.jsx.coffee`.
-We also need to embed JSX code inside backticks so that CoffeeScript ignores the syntax it doesn't understand.
-Here's an example:
-
-```coffee
-Component = React.createClass
-  render: ->
-    `<ExampleComponent videos={this.props.videos} />`
-```
-
-Alternatively, the newer ES6 style class based syntax can be used like this:
-
-```coffee
-class Component extends React.Component
-  render: ->
-    `<ExampleComponent videos={this.props.videos} />`
-```
-
-## Extending `react-rails`
-
-You can extend some of the core functionality of `react-rails` by injecting new implementations during configuration.
-
-### Custom Server Renderer
-
-`react-rails` depends on a renderer class for rendering components on the server. You can provide a custom renderer class to `config.react.server_renderer`. The class must implement:
-
-- `#initialize(options={})`, which accepts the hash from `config.react.server_renderer_options`
-- `#render(component_name, props, prerender_options)` to return a string of HTML
-
-`react-rails` provides two renderer classes: `React::ServerRendering::ExecJSRenderer` and `React::ServerRendering::SprocketsRenderer`.
-
-`ExecJSRenderer` offers two other points for extension:
-
-- `#before_render(component_name, props, prerender_options)` to return a string of JavaScript to execute _before_ calling `React.render`
-- `#after_render(component_name, props, prerender_options)` to return a string of JavaScript to execute _after_ calling `React.render`
-
-Any subclass of `ExecJSRenderer` may use those hooks (for example, `SprocketsRenderer` uses them to handle `console.*` on the server).
-
-### Custom View Helper
-
-`react-rails` uses a "helper implementation" class to generate the output of the `react_component` helper. The helper is initialized once per request and used for each `react_component` call during that request. You can provide a custom helper class to `config.react.view_helper_implementation`. The class must implement:
-
-- `#react_component(name, props = {}, options = {}, &block)` to return a string to inject into the Rails view
-- `#setup(controller_instance)`, called when the helper is initialized at the start of the request
-- `#teardown(controller_instance)`, called at the end of the request
-
-`react-rails` provides one implementation, `React::Rails::ComponentMount`.
-
-### Custom JSX Transformer
-
-`react-rails` uses a transformer class to transform JSX for the browser. The transformer is initialized once, at boot. You can provide a custom transformer to `config.react.jsx_transformer_class`. The transformer must implement:
-
-- `#initialize(options)`, where options is the value passed to `config.react.jsx_transform_options`
-- `#transform(code_string)` to return a string of transformed code
-
-`react-rails` provides two transformers, `React::JSX::JSXTransformer` and `React::JSX::BabelTransformer`.
-
-### Related Projects
-
-- [react\_on\_rails Gem](https://github.com/shakacode/react_on_rails): Webpack Integration of React with Rails utilizing the modern JavaScript tooling and libraries, including Webpack, Babel, React, Redux, React-Router. You can an example of this live at [www.reactrails.com](http://www.reactrails.com).
-- [React.rb](http://reactrb.org/): Use Ruby to build reactive user interfaces with React under the covers.[github source code here](https://github.com/zetachang/react.rb).
-- [react-rails-hot-loader](https://github.com/rmosolgo/react-rails-hot-loader) is a simple live-reloader for `react-rails`.
+[![Gem](https://img.shields.io/gem/v/react-rails.svg?style=flat-square)](http://rubygems.org/gems/react-rails)
+[![npm](https://img.shields.io/npm/v/react_ujs.svg?style=flat-square)](https://www.npmjs.com/package/react_ujs)
+[![Ruby](https://github.com/reactjs/react-rails/actions/workflows/ruby.yml/badge.svg)](https://github.com/reactjs/react-rails/actions/workflows/ruby.yml)
+
+For version 2.7 documentation, visit the [2.7-stable](https://github.com/reactjs/react-rails/tree/2.7-stable) branch.
+
+## Summary
+React-Rails is a flexible tool to use [React](http://facebook.github.io/react/) with Rails. The benefits:
+* Automatically renders React server-side and client-side
+* Supports [Shakapacker](https://github.com/shakacode/shakapacker) v7
+* Supports Sprockets 4.x, 3.x
+* Lets you use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), [ES6](http://es6-features.org/), [TypeScript](https://www.typescriptlang.org/), [CoffeeScript](http://coffeescript.org/)
+
+---
+
+While ShakaCode will continue to support this gem, you might consider migrating to [React on Rails](https://github.com/shakacode/react_on_rails) or [React on Rails Pro with proper Node rendering](https://www.shakacode.com/react-on-rails-pro/).
+
+Why? React on Rails code receives much more active development and testing. For example, consider the [ReactRailsUJS](https://github.com/reactjs/react-rails/blob/master/react_ujs/index.js) implementation compared to the [ReactOnRails Node package](https://github.com/shakacode/react_on_rails/tree/master/node_package) which is written in TypeScript. For another example, React on Rails has work underway to support the latest React features, such as [React Server Components](https://react.dev/reference/rsc/server-components).
+
+You can find [migration to React on Rails steps here](https://github.com/reactjs/react-rails/blob/master/docs/migrating-from-react-rails-to-react_on_rails.md).
+
+---
+## ShakaCode Support
+
+[ShakaCode](https://www.shakacode.com) focuses on helping Ruby on Rails teams use React and Webpack better. We can upgrade your project and improve your development and customer experiences, allowing you to focus on building new features or fixing bugs instead. 
+
+For an overview of working with us, see our [Client Engagement Model](https://www.shakacode.com/blog/client-engagement-model/) article and [how we bill for time](https://www.shakacode.com/blog/shortcut-jira-trello-github-toggl-time-and-task-tracking/).
+
+We also specialize in helping development teams lower infrastructure and CI costs. Check out our project [Control Plane Flow](https://github.com/shakacode/control-plane-flow/), which can allow you to get the ease of Heroku with the power of Kubernetes and big cost savings.
+
+If you think ShakaCode can help your project, [click here](https://meetings.hubspot.com/justingordon/30-minute-consultation) to book a call with [Justin Gordon](mailto:justin@shakacode.com), the creator of React on Rails and Shakapacker.
+
+Here's a testimonial of how ShakaCode can help from [Florian Gößler](https://github.com/FGoessler) of [Blinkist](https://www.blinkist.com/), January 2, 2023:
+> Hey Justin 👋
+>
+> I just wanted to let you know that we today shipped the webpacker to shakapacker upgrades and it all seems to be running smoothly! Thanks again for all your support and your teams work! 😍
+>
+> On top of your work, it was now also very easy for me to upgrade Tailwind and include our external node_module based web component library which we were using for our other (more modern) apps already. That work is going to be shipped later this week though as we are polishing the last bits of it. 😉
+>
+> Have a great 2023 and maybe we get to work together again later in the year! 🙌
+
+Read the [full review here](https://clutch.co/profile/shakacode#reviews?sort_by=date_DESC#review-2118154).
+
+## Resources
+* [Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE). Then join the channel `#react-rails`.
+* If upgrading, consider migrating to the [react_on_rails](https://github.com/shakacode/react_on_rails) gem.
+* Source code example utilizing React-Rails: https://github.com/BookOfGreg/react-rails-example-app
+
+## Documentation
+
+- [Get started](docs/get-started.md)
+  - [Use with Shakapacker](docs/get-started.md#use-with-shakapacker)
+    - [Component name](docs/get-started.md#component-name)
+    - [File naming](docs/get-started.md#file-naming)
+    - [Typescript support](docs/get-started.md#typescript-support)
+    - [Test component](docs/get-started.md#test-component)
+  - [Use with Asset Pipeline](docs/get-started.md#use-with-asset-pipeline)
+    - [Custom JSX Transformer](docs/get-started.md#custom-jsx-transformer)
+      - [Transform Plugin Options](docs/get-started.md#transform-plugin-options)
+    - [React.js versions](docs/get-started.md#reactjs-versions)
+- [View Helper](docs/view-helper.md)
+  - [Custom View Helper](docs/view-helper.md#custom-view-helper)
+- [UJS](docs/ujs.md)
+  - [Mounting & Unmounting](docs/ujs.md#mounting--unmounting)
+  - [Event Handling](docs/ujs.md#event-handling)
+  - [`getConstructor`](docs/ujs.md#getconstructor)
+- [Server-Side Rendering](docs/server-side-rendering.md)
+  - [Configuration](docs/server-side-rendering.md#configuration)
+  - [JavaScript State](docs/server-side-rendering.md#javascript-state)
+  - [Custom Server Renderer](docs/server-side-rendering.md#custom-server-renderer)
+- [Controller Actions](docs/controller-actions.md)
+- [Component Generator](docs/component-generator.md)
+  - [Use with JBuilder](docs/component-generator.md#use-with-jbuilder)
+  - [Camelize Props](docs/component-generator.md#camelize-props)
+  - [Changing Component Templates](docs/component-generator.md#changing-component-templates)
+- [Upgrading](docs/upgrading.md)
+  - [2.7 to 3.0](docs/upgrading.md#27-to-30)
+  - [2.3 to 2.4](docs/upgrading.md#23-to-24)
+- [Migrating from `react-rails` to `react_on_rails`](docs/migrating-from-react-rails-to-react_on_rails.md)
+  - [Why migrate?](docs/migrating-from-react-rails-to-react_on_rails.md#why-migrate)
+  - [Steps to migrate](docs/migrating-from-react-rails-to-react_on_rails.md#steps-to-migrate)
+- [Common Errors](docs/common-errors.md)
+  - [Getting warning for `Can't resolve 'react-dom/client'` in React < 18](docs/common-errors.md#getting-warning-for-cant-resolve-react-domclient-in-react--18)
+  - [Undefined Set](docs/common-errors.md#undefined-set)
+  - [Using TheRubyRacer](docs/common-errors.md#using-therubyracer)
+  - [HMR](docs/common-errors.md#hmr)
+  - [Tests in component directory](docs/common-errors.md#tests-in-component-directory)
+
+After reading this README file, additional information about React-Rails can be found on the Wiki page:
+https://github.com/reactjs/React-Rails/wiki
+The Wiki page features a significant amount of additional information about React-Rails, including instructional articles and answers to the most frequently asked questions.
+
+## Related Projects
+
+- [react\_on\_rails](https://github.com/shakacode/react_on_rails): Integration of React with Rails utilizing Webpack, Redux, React-Router.
+- [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/):React on Rails with Node rendering and many other performance enhancements.
 - [react-rails-benchmark_renderer](https://github.com/pboling/react-rails-benchmark_renderer) adds performance instrumentation to server rendering.
-
-## Development
-
-- Run tests with `rake test` or `appraisal rake test`
-- Update React assets with `rake react:update`
+- [Ruby Hyperstack](https://hyperstack.org/): Use Ruby to build reactive user interfaces with React.
+
+## Contributing
+
+🎉 Thanks for taking the time to contribute! 🎉 See [CONTRIBUTING.md](./CONTRIBUTING.md) for more details.
+
+# Supporters
+
+The following companies provide licenses to the ShakaCode team, supporting the development of this and other open-source projects maintained by ShakaCode. ShakaCode stands by the usefulness of these products!
+
+<br />
+<br />
+
+<a href="https://www.jetbrains.com">
+  <img src="https://user-images.githubusercontent.com/4244251/184881139-42e4076b-024b-4b30-8c60-c3cd0e758c0a.png" alt="JetBrains" height="120px">
+</a>
+<a href="https://scoutapp.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/4244251/184881147-0d077438-3978-40da-ace9-4f650d2efe2e.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png">
+    <img alt="ScoutAPM" src="https://user-images.githubusercontent.com/4244251/184881152-9f2d8fba-88ac-4ba6-873b-22387f8711c5.png" height="120px">
+  </picture>
+</a>
+<a href="https://controlplane.com">
+  <picture>
+    <img alt="Control Plane" src="https://github.com/shakacode/.github/assets/20628911/90babd87-62c4-4de3-baa4-3d78ef4bec25" height="120px">
+  </picture>
+</a>
+<br />
+<a href="https://www.browserstack.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/4244251/184881122-407dcc29-df78-4b20-a9ad-f597b56f6cdb.png">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png">
+    <img alt="BrowserStack" src="https://user-images.githubusercontent.com/4244251/184881129-e1edf4b7-3ae1-4ea8-9e6d-3595cf01609e.png" height="55px">
+  </picture>
+</a>
+
+---
+
+ShakaCode is [hiring](https://jobs.lever.co/shakacode/3bdbfdb3-4495-4611-a279-01dddddb351abe)!

data/lib/assets/javascripts/JSXTransformer.js

@@ -15708,22 +15708,22 @@ function addDisplayName(displayName, object, state) {
 /**
  * Transforms the following:
  *
- * var MyComponent = React.createClass({
+ * var MyComponent = createReactClass({
  *    render: ...
  * });
  *
  * into:
  *
- * var MyComponent = React.createClass({
+ * var MyComponent = createReactClass({
  *    displayName: 'MyComponent',
  *    render: ...
  * });
  *
  * Also catches:
  *
- * MyComponent = React.createClass(...);
- * exports.MyComponent = React.createClass(...);
- * module.exports = {MyComponent: React.createClass(...)};
+ * MyComponent = createReactClass(...);
+ * exports.MyComponent = createReactClass(...);
+ * module.exports = {MyComponent: createReactClass(...)};
  */
 function visitReactDisplayName(traverse, object, path, state) {
   var left, right;
@@ -15916,4 +15916,4 @@ function inlineSourceMap(sourceMap, sourceCode, sourceFilename) {
 module.exports = inlineSourceMap;
 
 },{"buffer":3}]},{},[1])(1)
-});
+});

data/lib/assets/javascripts/react_ujs.js

@@ -1,7 +1 @@
-//= require react_ujs_mount
-//= require react_ujs_turbolinks
-//= require react_ujs_turbolinks_classic
-//= require react_ujs_turbolinks_classic_deprecated
-//= require react_ujs_pjax
-//= require react_ujs_native
-//= require react_ujs_event_setup
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("react-dom/server")):"function"==typeof define&&define.amd?define(["react","react-dom","react-dom/server"],t):"object"==typeof exports?exports.ReactRailsUJS=t(require("react"),require("react-dom"),require("react-dom/server")):e.ReactRailsUJS=t(e.React,e.ReactDOM,e.ReactDOMServer)}(self,((__WEBPACK_EXTERNAL_MODULE__787__,__WEBPACK_EXTERNAL_MODULE__156__,__WEBPACK_EXTERNAL_MODULE__997__)=>(()=>{var __webpack_modules__={634:(e,t,n)=>{"use strict";var o=n(156);t.createRoot=o.createRoot,t.hydrateRoot=o.hydrateRoot},10:(e,t,n)=>{var o=n(787),r=n(156),a=n(997),u=n(230),c=n(121),i=n(831),d=n(37),s=n(39),{supportsHydration:_,reactHydrate:l,createReactRootLike:p}=n(198),f=n(613),v={CLASS_NAME_ATTR:"data-react-class",PROPS_ATTR:"data-react-props",RENDER_ATTR:"data-hydrate",CACHE_ID_ATTR:"data-react-cache-id",TURBOLINKS_PERMANENT_ATTR:"data-turbolinks-permanent",jQuery:"undefined"!=typeof window&&void 0!==window.jQuery&&window.jQuery,components:{},roots:[],findDOMNodes:function(e){var t,n,o=v.CLASS_NAME_ATTR;switch(typeof e){case"undefined":t="["+o+"]",n=document;break;case"object":t="["+o+"]",n=e;break;case"string":t=e+"["+o+"], "+e+" ["+o+"]",n=document}return v.jQuery?v.jQuery(t,n):n.querySelectorAll(t)},getConstructor:c,constructorFromGlobal:c,constructorFromRequireContext:i,constructorFromRequireContextWithGlobalFallback:d,useContext:function(e){this.getConstructor=d(e)},useContexts:function(e){this.getConstructor=s(e)},serverRender:function(e,t,n){var r=this.getConstructor(t),u=o.createElement(r,n);return a[e](u)},mountComponents:function(e){for(var t=v,n=t.findDOMNodes(e),r=0;r<n.length;++r){var a=n[r],u=a.getAttribute(t.CLASS_NAME_ATTR),c=t.getConstructor(u),i=a.getAttribute(t.PROPS_ATTR),d=i&&JSON.parse(i),s=a.getAttribute(t.RENDER_ATTR),p=a.getAttribute(t.CACHE_ID_ATTR),f=a.hasAttribute(t.TURBOLINKS_PERMANENT_ATTR);if(!c){var E="Cannot find component: '"+u+"'";throw console&&console.log&&console.log("%c[react-rails] %c"+E+" for element","font-weight: bold","",a),new Error(E+". Make sure your component is available to render.")}var h=this.components[p];void 0===h&&(h=o.createElement(c,d),f&&(this.components[p]=h)),h=s&&_()?l(a,h):this.findOrCreateRoot(a).render(h)}},unmountComponents:function(e){for(var t=v.findDOMNodes(e),n=0;n<t.length;++n){var o=t[n];f?this.unmountRoot(o):r.unmountComponentAtNode(o)}},detectEvents:function(){u(this)},findOrCreateRoot:function(e){var t=this.findRoot(e);return t||(t=p(e),f&&this.roots.push({node:e,root:t})),t},findRoot:function(e){if(f){var t=this.roots.find((function(t){return t.node&&t.node===e}));return t?t.root:void 0}},unmountRoot:function(e){var t=this.findRoot(e);t&&(t.unmount(),this.roots=this.roots.filter((function(t){return t.node!==e})))},handleMount:function(e){var t=void 0;e&&e.target&&(t=e.target),v.mountComponents(t)},handleUnmount:function(e){var t=void 0;e&&e.target&&(t=e.target),v.unmountComponents(t)}};"undefined"!=typeof window&&v.detectEvents(),self.ReactRailsUJS=v,e.exports=v},230:(e,t,n)=>{var o=n(528),r=n(921),a=n(228),u=n(724),c=n(968);e.exports=function(e){e.handleEvent&&("undefined"!=typeof Turbolinks&&void 0!==Turbolinks.EVENTS&&c.teardown(e),a.teardown(e),u.teardown(e),r.teardown(e),o.teardown(e)),"addEventListener"in window?(e.handleEvent=function(e,t){document.addEventListener(e,t)},e.removeEvent=function(e,t){document.removeEventListener(e,t)}):(e.handleEvent=function(e,t){window.attachEvent(e,t)},e.removeEvent=function(e,t){window.detachEvent(e,t)}),"undefined"!=typeof Turbolinks&&Turbolinks.supported?void 0!==Turbolinks.EVENTS?c.setup(e):void 0!==Turbolinks.controller?a.setup(e):u.setup(e):"undefined"!=typeof $&&"function"==typeof $.pjax?r.setup(e):o.setup(e)}},528:e=>{e.exports={setup:function(e){"addEventListener"in window?e.handleEvent("DOMContentLoaded",e.handleMount):e.handleEvent("onload",e.handleMount)},teardown:function(e){e.removeEvent("DOMContentLoaded",e.handleMount),e.removeEvent("onload",e.handleMount)}}},921:e=>{e.exports={setup:function(e){e.handleEvent("ready",e.handleMount),e.handleEvent("pjax:end",e.handleMount),e.handleEvent("pjax:beforeReplace",e.handleUnmount)},teardown:function(e){e.removeEvent("ready",e.handleMount),e.removeEvent("pjax:end",e.handleMount),e.removeEvent("pjax:beforeReplace",e.handleUnmount)}}},228:e=>{e.exports={setup:function(e){e.handleEvent("turbolinks:load",e.handleMount)},teardown:function(e){e.removeEvent("turbolinks:load",e.handleMount)}}},968:e=>{e.exports={setup:function(e){e.handleEvent(Turbolinks.EVENTS.CHANGE,e.handleMount),e.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,e.handleUnmount)},teardown:function(e){e.removeEvent(Turbolinks.EVENTS.CHANGE,e.handleMount),e.removeEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,e.handleUnmount)}}},724:e=>{e.exports={setup:function(e){Turbolinks.pagesCached(0),e.handleEvent("page:change",e.handleMount),e.handleEvent("page:receive",e.handleUnmount)},teardown:function(e){e.removeEvent("page:change",e.handleMount),e.removeEvent("page:receive",e.handleUnmount)}}},121:function(module){var topLevel="undefined"==typeof window?this:window;module.exports=function(className){var constructor;return constructor=topLevel[className],constructor||(constructor=eval(className)),constructor&&constructor.default&&(constructor=constructor.default),constructor}},831:e=>{e.exports=function(e){return function(t){var n=t.split("."),o=n.shift(),r=n,a=e("./"+o);return r.forEach((function(e){a=a[e]})),a.__esModule&&(a=a.default),a}}},37:(e,t,n)=>{var o=n(121),r=n(831);e.exports=function(e){var t=r(e);return function(e){var n;try{n=t(e)}catch(t){try{n=o(e)}catch(e){console.error(t),console.error(e)}}return n}}},39:(e,t,n)=>{var o=n(121),r=n(831);e.exports=function(e){var t=e.map((e=>r(e)));return function(e){var n;try{var r,a,u=0;do{r=t[u];try{n=r(e)}catch(e){a||(a=e)}u+=1}while(u<t.length);if(!n)throw a}catch(a){try{n=o(e)}catch(e){console.error(a),console.error(e)}}return n}}},198:(e,t,n)=>{"use strict";n.r(t),n.d(t,{createReactRootLike:()=>_,reactHydrate:()=>s,supportsHydration:()=>d});var o=n(156),r=n.n(o),a=n(613),u=n.n(a);let c=r();if(u())try{c=n(634)}catch(e){c=r()}const i=c;function d(){return"function"==typeof i.hydrate||"function"==typeof i.hydrateRoot}function s(e,t){return"function"==typeof i.hydrateRoot?i.hydrateRoot(e,t):i.hydrate(t,e)}function _(e){return u()?i.createRoot(e):function(e){return{render:t=>i.render(t,e)}}(e)}},613:(e,t,n)=>{var o,r=n(156);o=void 0!==r&&(r.version.split(".")[0]||16)>=18,e.exports=o},787:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__787__},156:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__156__},997:e=>{"use strict";e.exports=__WEBPACK_EXTERNAL_MODULE__997__}},__webpack_module_cache__={};function __webpack_require__(e){var t=__webpack_module_cache__[e];if(void 0!==t)return t.exports;var n=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e].call(n.exports,n,n.exports,__webpack_require__),n.exports}__webpack_require__.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=(e,t)=>{for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__=__webpack_require__(10);return __webpack_exports__})()));