react-components-rails 1.0.0.beta1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 7e8b48934b25fc73c93eadc46d1fb4386a9289f40d1441be9a4a3f3cdb1cfb5d
+  data.tar.gz: 284e9e9ec4e81e4659f2a34385b3e7ab0df67ef258b60359da0b1a01e88eea1c
+SHA512:
+  metadata.gz: 422e20effaf3f3b830a7f68fb771e8b61a7f42450cc80a4d491533be07995be85c4f11e4c37fea7643aaea7da857136e6909d725a5bf53d4dfe308a5a8bc42a4
+  data.tar.gz: 2487723877f13ea41e3652fb38355935f237ea9b59f4285a7c8583485e1eb933e622c19b0a54863472a7bb39d704e2c015558539e4719f2a4c607071f9233269

data/.github/PULL_REQUEST_TEMPLATE

@@ -0,0 +1,9 @@
+Fixes # .
+
+Changes:
+
+Please ensure that:
+- [ ] Changelog is updated if not a minor patch
+- [ ] Ruby linting is ok: `rubocop` is all green
+- [ ] Javascript linting is ok: `cd javascript/webpacker_react-npm-module/ && yarn lint` is all green
+- [ ] [Tests](https://github.com/renchap/webpacker-react#testing) are all green

data/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+tmp/
+pkg/
+dist/

data/.rubocop.yml

@@ -0,0 +1,119 @@
+AllCops:
+  TargetRubyVersion: 2.3
+  # RuboCop has a bunch of cops enabled by default. This setting tells RuboCop
+  # to ignore them, so only the ones explicitly set in this file are enabled.
+  DisabledByDefault: true
+  Exclude:
+    - '**/node_modules/**/*'
+    - '**/vendor/**/*'
+
+# Prefer &&/|| over and/or.
+Style/AndOr:
+  Enabled: true
+
+# Do not use braces for hash literals when they are the last argument of a
+# method call.
+Style/BracesAroundHashParameters:
+  Enabled: true
+
+# Align `when` with `case`.
+Layout/CaseIndentation:
+  Enabled: true
+
+# Align comments with method definitions.
+Layout/CommentIndentation:
+  Enabled: true
+
+# No extra empty lines.
+Layout/EmptyLines:
+  Enabled: true
+
+# In a regular class definition, no empty lines around the body.
+Layout/EmptyLinesAroundClassBody:
+  Enabled: true
+
+# In a regular module definition, no empty lines around the body.
+Layout/EmptyLinesAroundModuleBody:
+  Enabled: true
+
+# Use Ruby >= 1.9 syntax for hashes. Prefer { a: :b } over { :a => :b }.
+Style/HashSyntax:
+  Enabled: true
+
+# Method definitions after `private` or `protected` isolated calls need one
+# extra level of indentation.
+Layout/IndentationConsistency:
+  Enabled: true
+  EnforcedStyle: indented_internal_methods
+
+# Two spaces, no tabs (for indentation).
+Layout/IndentationWidth:
+  Enabled: true
+
+Layout/SpaceAfterColon:
+  Enabled: true
+
+Layout/SpaceAfterComma:
+  Enabled: true
+
+Layout/SpaceAroundEqualsInParameterDefault:
+  Enabled: true
+
+Layout/SpaceAroundKeyword:
+  Enabled: true
+
+Layout/SpaceAroundOperators:
+  Enabled: true
+
+Layout/SpaceBeforeFirstArg:
+    Enabled: true
+
+# Defining a method with parameters needs parentheses.
+Style/MethodDefParentheses:
+  Enabled: true
+
+# Use `foo {}` not `foo{}`.
+Layout/SpaceBeforeBlockBraces:
+  Enabled: true
+
+# Use `foo { bar }` not `foo {bar}`.
+Layout/SpaceInsideBlockBraces:
+  Enabled: true
+
+# Use `{ a: 1 }` not `{a:1}`.
+Layout/SpaceInsideHashLiteralBraces:
+  Enabled: true
+
+Layout/SpaceInsideParens:
+  Enabled: true
+
+# Check quotes usage according to lint rule below.
+Style/StringLiterals:
+  Enabled: true
+  EnforcedStyle: double_quotes
+
+# Detect hard tabs, no hard tabs.
+Layout/Tab:
+  Enabled: true
+
+# Blank lines should not have any spaces.
+Layout/TrailingBlankLines:
+  Enabled: true
+
+# No trailing whitespace.
+Layout/TrailingWhitespace:
+  Enabled: true
+
+# Use quotes for string literals when they are enough.
+Style/UnneededPercentQ:
+  Enabled: true
+
+# Align `end` with the matching keyword or starting expression except for
+# assignments, where it should be aligned with the LHS.
+Lint/EndAlignment:
+  Enabled: true
+  EnforcedStyleAlignWith: variable
+
+# Use my_method(my_arg) not my_method( my_arg ) or my_method my_arg.
+Lint/RequireParentheses:
+  Enabled: true

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project maintainer at renchap@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+gem "rubocop", require: false
+
+gemspec

data/Gemfile.lock

@@ -0,0 +1,41 @@
+PATH
+  remote: .
+  specs:
+    react-components-rails (1.0.0.beta1)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    ast (2.4.2)
+    parallel (1.21.0)
+    parser (3.1.1.0)
+      ast (~> 2.4.1)
+    rainbow (3.1.1)
+    rake (13.0.6)
+    regexp_parser (2.2.1)
+    rexml (3.2.5)
+    rubocop (1.25.1)
+      parallel (~> 1.10)
+      parser (>= 3.1.0.0)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8, < 3.0)
+      rexml
+      rubocop-ast (>= 1.15.1, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 1.4.0, < 3.0)
+    rubocop-ast (1.16.0)
+      parser (>= 3.1.1.0)
+    ruby-progressbar (1.11.0)
+    unicode-display_width (2.1.0)
+
+PLATFORMS
+  x86_64-darwin-21
+
+DEPENDENCIES
+  bundler (~> 2.3)
+  rake (~> 13.0)
+  react-components-rails!
+  rubocop
+
+BUNDLED WITH
+   2.3.7

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Renaud Chaput
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,128 @@
+# React-Components-Rails
+
+_**Note:** This project was formerly known as `webpacker-rails`. Following Webpacker's deprecation, it has been renamed and rewritten to no longer rely on Webpacker. Documentation for the latest `webpacker-rails` release (1.0.0-beta.1) is [available here](https://github.com/renchap/webpacker-react/tree/v1.0.0-beta.1)._
+
+React-Components-Rails makes it easy to use [React](https://reactjs.org/) with your Rails applications. It provides Controller and View helpers to render React Components on your application, and does not case about the way you ship your Javascript
+
+## Installation
+
+First, you need to add this gem to your Rails app Gemfile:
+
+```ruby
+gem 'react-components-rails', "~> 1.0.0.beta.1"
+```
+
+Once done, run `bundle` to install the gem.
+
+Then you need to update your `package.json` file to include the `react-components-rails` Javascript module:
+
+`yarn add react-components-rails`
+
+You are now all set!
+
+### Note about versions
+
+React-Components-Rails contains two parts: a Javascript module and a Ruby gem. Both of those components respect [semantic versioning](http://semver.org). **When upgrading the gem, you need to upgrade the NPM module to the same minor version**. New patch versions can be released for each of the two independently, so it is ok to have the NPM module at version `A.X.Y` and the gem at version `A.X.Z`, but you should never have a different `A` or `X`.
+
+## Usage
+
+The first step is to register your root components (those you want to load from your HTML).
+In your app entry file, import your components as well as `react-components-rails` and register them. Considering you have a component in `app/javascript/components/hello.js`:
+
+```javascript
+import Hello from "components/hello"
+import ReactComponentsRails from "react-components-rails"
+
+ReactComponentsRails.setup({ Hello }) // ES6 shorthand for {Hello: Hello}
+```
+
+### Rendering from a view
+
+Use the `react_component` helper. The first argument is your component's name, the second one is the `props`:
+
+```erb
+<%= react_component('Hello', name: 'React') %>
+```
+
+You can pass a `tag` argument to render the React component in another tag than the default `div`. All other arguments will be passed to `content_tag`:
+
+```erb
+<%= react_component('Hello', { name: 'React' }, tag: :span, class: 'my-custom-component') %>
+# This will render <span class="my-custom-component" data-react-class="Hello" data-react-props="..."></span>
+```
+
+### Rendering from a controller
+
+```rb
+class PageController < ApplicationController
+  def main
+    render react_component: 'Hello', props: { name: 'React' }
+  end
+end
+```
+
+You can use the `tag_options` argument to change the generated HTML, similar to the `react_component` method above:
+
+```rb
+render react_component: 'Hello', props: { name: 'React' }, tag_options: { tag: :span, class: 'my-custom-component' }
+```
+
+You can also pass any of the usual arguments to `render` in this call: `layout`, `status`, `content_type`, etc.
+
+### Hot Module Replacement
+
+It should be supported out of the box, if supported by your Javascript stack. Please refer to your Javascript compiler/bundler documentation to do so.
+
+<!--
+## Development
+
+To work on this gem locally, you first need to clone and setup [the example application](https://github.com/renchap/webpacker-react-example).
+
+Then you need to change the example app Gemfile to point to your local repository and run bundle afterwise:
+
+```ruby
+gem 'webpacker-react', path: '~/code/webpacker-react/'
+```
+
+Finally, you need to tell Yarn to use your local copy of the NPM module in this application, using [`yarn link`](https://yarnpkg.com/en/docs/cli/link):
+
+```
+$ cd ~/code/webpacker-react/javascript/webpacker_react-npm-module/
+$ yarn
+$ cd dist/
+$ yarn             # compiles the code from src/ to dist/
+$ yarn link
+success Registered "webpacker-react".
+info You can now run `yarn link "webpacker-react"` in the projects where you want to use this module and it will be used instead.
+$ cd ~/code/webpacker-react-example/
+$ yarn link webpacker-react
+success Registered "webpacker-react".
+```
+
+After launching `./bin/webpack-watcher` and `./bin/rails server` in your example app directory, you can now change the Ruby or Javascript code in your local `webpacker-react` repository, and test it immediately using the example app.
+
+## Testing
+
+If you changed the local javascript package, first ensure it is build (see above).
+
+To run the test suite:
+
+```sh
+$ rake test
+```
+
+If you change the javascript code, please ensure there are no style errors before committing:
+
+```sh
+$ cd javascript/webpacker_react-npm-module/
+$ yarn lint
+``` -->
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/renchap/webpacker-react.
+Please feel free to open issues about your needs and features you would like to be added.
+
+### Thanks
+
+This gem has been inspired by the awesome work on [react-rails](https://github.com/reactjs/react-rails) and [react_on_rails](https://github.com/shakacode/react_on_rails/). Many thanks to their authors!

data/lib/component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module ReactComponentsRails
+  class Component
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+
+    attr_accessor :name
+
+    def initialize(name)
+      @name = name
+    end
+
+    def render(props = {}, options = {})
+      tag = options.delete(:tag) || :div
+      data = { data: { "react-class" => @name, "react-props" => props.to_json } }
+
+      content_tag(tag, nil, options.deep_merge(data))
+    end
+  end
+end

data/lib/helpers.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ReactComponentsRails
+  module Helpers
+    def react_component(component_name, props = {}, options = {})
+      ReactComponentsRails::Component.new(component_name).render(props, options)
+    end
+  end
+end

data/lib/railtie.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "rails/railtie"
+
+module ReactComponentsRails
+  class Engine < ::Rails::Engine
+    initializer :react_components do
+      ActiveSupport.on_load(:action_controller) do
+        ActionController::Base.helper ::ReactComponentsRails::Helpers
+      end
+
+      ActiveSupport.on_load :action_view do
+        include ::ReactComponentsRails::Helpers
+      end
+    end
+
+    initializer :react_components_rails_renderer, group: :all do |_app|
+      ActionController::Renderers.add :react_component do |component_name, options|
+        props = options.fetch(:props, {})
+        tag_options = options.fetch(:tag_options, {})
+        html = ReactComponentsRails::Component.new(component_name).render(props, tag_options)
+        render_options = options.merge(inline: html)
+        render(render_options)
+      end
+    end
+  end
+end

data/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "react-components-rails",
+  "version": "1.0.0-beta.1",
+  "homepage": "https://github.com/renchap/react-components-rails",
+  "repository": "renchap/react-components-rails",
+  "author": {
+    "name": "Renaud Chaput",
+    "email": "renchap@gmail.com"
+  },
+  "license": "MIT",
+  "type": "module",
+  "source": "src/index.ts",
+  "exports": {
+    "require": "./dist/react-components-rails.cjs",
+    "default": "./dist/react-components-rails.modern.js"
+  },
+  "main": "./dist/react-components-rails.cjs",
+  "module": "./dist/react-components-rails.module.js",
+  "unpkg": "./dist/react-components-rails.umd.js",
+  "scripts": {
+    "build": "microbundle",
+    "dev": "microbundle watch"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.14.179",
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "react": ">= 0.14",
+    "react-dom": ">= 0.14"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "microbundle": "^0.14.2",
+    "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "typescript": "^4.5.5"
+  },
+  "packageManager": "yarn@3.2.0",
+  "prettier": {
+    "semi": false
+  }
+}

data/react-components-rails.gemspec

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+lib = File.expand_path("lib", __dir__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+
+Gem::Specification.new do |spec|
+  spec.name = "react-components-rails"
+  spec.licenses = ["MIT"]
+  spec.version = "1.0.0.beta1"
+  spec.authors = ["Renaud Chaput"]
+  spec.email = ["renchap@gmail.com"]
+
+  spec.summary = "Provides Rails helpers to render React Components"
+  # spec.description   = %q{TODO: Write a longer description or delete this line.}
+  spec.homepage = "https://github.com/renchap/webpacker-react"
+
+  spec.files = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir = "exe"
+  spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.required_ruby_version = ">= 2.7.0"
+
+  spec.add_development_dependency "bundler", "~> 2.3"
+  spec.add_development_dependency "rake", "~> 13.0"
+  # spec.add_development_dependency "minitest", "~> 5.0"
+  # spec.add_development_dependency "capybara"
+  # spec.add_development_dependency "selenium-webdriver"
+end

data/src/index.ts

@@ -0,0 +1,90 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import intersection from "lodash/intersection"
+import keys from "lodash/keys"
+import assign from "lodash/assign"
+import omit from "lodash/omit"
+// import ujs from './ujs'
+
+const CLASS_ATTRIBUTE_NAME = "data-react-class"
+const PROPS_ATTRIBUTE_NAME = "data-react-props"
+
+declare global {
+  interface Window {
+    ReactComponentsRails: typeof ReactComponentsRails
+  }
+}
+
+const ReactComponentsRails = {
+  registeredComponents: {} as { [name: string]: React.ComponentType },
+
+  render(node: Element, component: React.ComponentType) {
+    const propsJson = node.getAttribute(PROPS_ATTRIBUTE_NAME)
+    const props = propsJson && JSON.parse(propsJson)
+
+    const reactElement = React.createElement(component, props)
+
+    ReactDOM.render(reactElement, node)
+  },
+
+  registerComponents(components: { [name: string]: React.Component }) {
+    const collisions = intersection(
+      keys(this.registeredComponents),
+      keys(components)
+    )
+    if (collisions.length > 0) {
+      console.error(
+        `react-components-rails: can not register components. Following components are already registered: ${collisions}`
+      )
+    }
+
+    assign(this.registeredComponents, omit(components, collisions))
+    return true
+  },
+
+  unmountComponents() {
+    const mounted = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
+    for (let i = 0; i < mounted.length; i += 1) {
+      ReactDOM.unmountComponentAtNode(mounted[i])
+    }
+  },
+
+  mountComponents() {
+    const { registeredComponents } = this
+    const toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
+
+    for (let i = 0; i < toMount.length; i += 1) {
+      const node = toMount[i]
+      const className = node.getAttribute(CLASS_ATTRIBUTE_NAME)
+
+      if (!className) {
+        console.error(
+          `react-components-rails: no ${CLASS_ATTRIBUTE_NAME} attribute on element: ${node}`
+        )
+        continue
+      }
+
+      const component = registeredComponents[className]
+
+      if (component) {
+        if (node.innerHTML.length === 0) this.render(node, component)
+      } else {
+        console.error(
+          `react-components-rails: can not render a component that has not been registered: ${className}`
+        )
+      }
+    }
+  },
+
+  setup(components = {}) {
+    if (typeof window.ReactComponentsRails === "undefined") {
+      window.ReactComponentsRails = this
+      // ujs.setup(this.mountComponents.bind(this), this.unmountComponents.bind(this))
+    }
+
+    window.ReactComponentsRails.registerComponents(components)
+    window.ReactComponentsRails.mountComponents()
+  },
+}
+
+export default ReactComponentsRails