├── .circleci └── config.yml ├── .github └── PULL_REQUEST_TEMPLATE ├── .gitignore ├── .rubocop.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── Rakefile ├── _config.yml ├── bin ├── console └── setup ├── javascript └── webpacker_react-npm-module │ ├── .babelrc │ ├── .eslintrc.js │ ├── README.md │ ├── dist │ ├── package.json │ └── yarn.lock │ ├── package.json │ ├── src │ ├── configure-hot-module-replacement.js │ ├── index.js │ └── ujs.js │ └── yarn.lock ├── lib └── webpacker │ ├── react.rb │ └── react │ ├── component.rb │ ├── helpers.rb │ ├── railtie.rb │ └── version.rb ├── test ├── example_app │ ├── .browserslistrc │ ├── Rakefile │ ├── app │ │ ├── controllers │ │ │ ├── application_controller.rb │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ ├── custom_tag_controller.rb │ │ │ ├── pages_controller.rb │ │ │ ├── turbolinks_pages_controller.rb │ │ │ └── two_packs_controller.rb │ │ ├── javascript │ │ │ ├── components │ │ │ │ └── hello.jsx │ │ │ └── packs │ │ │ │ ├── a.js │ │ │ │ ├── application.js │ │ │ │ ├── b.js │ │ │ │ ├── hello_react.js │ │ │ │ └── turbolinks_hello_react.js │ │ └── views │ │ │ ├── custom_tag │ │ │ └── view_component.html.erb │ │ │ ├── layouts │ │ │ ├── application.html.erb │ │ │ ├── turbolinks.html.erb │ │ │ └── two_packs.html.erb │ │ │ ├── pages │ │ │ ├── view_component.html.erb │ │ │ └── view_consecutive.html.erb │ │ │ └── two_packs │ │ │ └── view_all.html.erb │ ├── babel.config.js │ ├── bin │ │ ├── bundle │ │ ├── rails │ │ ├── rake │ │ ├── setup │ │ ├── spring │ │ ├── update │ │ ├── webpack │ │ ├── webpack-dev-server │ │ └── webpack-watcher │ ├── config.ru │ ├── config │ │ ├── application.rb │ │ ├── boot.rb │ │ ├── environment.rb │ │ ├── environments │ │ │ ├── development.rb │ │ │ ├── production.rb │ │ │ └── test.rb │ │ ├── initializers │ │ │ ├── application_controller_renderer.rb │ │ │ ├── assets.rb │ │ │ ├── backtrace_silencers.rb │ │ │ ├── cookies_serializer.rb │ │ │ ├── filter_parameter_logging.rb │ │ │ ├── inflections.rb │ │ │ ├── mime_types.rb │ │ │ └── wrap_parameters.rb │ │ ├── locales │ │ │ └── en.yml │ │ ├── puma.rb │ │ ├── routes.rb │ │ ├── secrets.yml │ │ ├── spring.rb │ │ ├── webpack │ │ │ ├── development.js │ │ │ ├── environment.js │ │ │ ├── production.js │ │ │ └── test.js │ │ └── webpacker.yml │ ├── lib │ │ ├── assets │ │ │ └── .keep │ │ └── tasks │ │ │ └── .keep │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── 404.html │ │ ├── 422.html │ │ ├── 500.html │ │ ├── apple-touch-icon-precomposed.png │ │ ├── apple-touch-icon.png │ │ ├── favicon.ico │ │ └── robots.txt │ ├── vendor │ │ └── .keep │ └── yarn.lock ├── integration │ ├── custom_tag_test.rb │ ├── renderer_test.rb │ ├── renderer_with_turbolinks_test.rb │ └── renderer_with_two_packs_test.rb ├── rails_helper.rb ├── test_helper.rb └── webpacker │ ├── react │ └── component_test.rb │ └── react_test.rb └── webpacker-react.gemspec /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | working_directory: ~/webpacker-react 5 | docker: 6 | - image: circleci/ruby:2.4.3-node-browsers 7 | environment: 8 | RAILS_ENV: test 9 | steps: 10 | - checkout 11 | 12 | # Install dependencies 13 | - run: 14 | name: bundle install 15 | command: bundle install --path=vendor/bundle --jobs=4 --retry=3 16 | - run: 17 | command: yarn 18 | pwd: javascript/webpacker_react-npm-module 19 | - run: 20 | command: yarn 21 | pwd: javascript/webpacker_react-npm-module/dist 22 | 23 | # Lint 24 | - run: 25 | command: yarn lint 26 | pwd: javascript/webpacker_react-npm-module 27 | - run: 28 | command: bundle exec rubocop 29 | 30 | # Tests 31 | - run: 32 | command: bundle exec rake test 33 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE: -------------------------------------------------------------------------------- 1 | Fixes # . 2 | 3 | Changes: 4 | 5 | Please ensure that: 6 | - [ ] Changelog is updated if not a minor patch 7 | - [ ] Ruby linting is ok: `rubocop` is all green 8 | - [ ] Javascript linting is ok: `cd javascript/webpacker_react-npm-module/ && yarn lint` is all green 9 | - [ ] [Tests](https://github.com/renchap/webpacker-react#testing) are all green 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | /.bundle/ 3 | /.yardoc 4 | /_yardoc/ 5 | /coverage/ 6 | /doc/ 7 | /pkg/ 8 | /spec/reports/ 9 | /tmp/ 10 | 11 | /javascript/webpacker_react-npm-module/dist/*.js 12 | 13 | test/example_app/log/* 14 | test/example_app/tmp/* 15 | test/example_app/public/packs 16 | test/example_app/public/packs-test 17 | 18 | .rvmrc 19 | -------------------------------------------------------------------------------- /.rubocop.yml: -------------------------------------------------------------------------------- 1 | AllCops: 2 | TargetRubyVersion: 2.3 3 | # RuboCop has a bunch of cops enabled by default. This setting tells RuboCop 4 | # to ignore them, so only the ones explicitly set in this file are enabled. 5 | DisabledByDefault: true 6 | Exclude: 7 | - '**/node_modules/**/*' 8 | - '**/vendor/**/*' 9 | 10 | # Prefer &&/|| over and/or. 11 | Style/AndOr: 12 | Enabled: true 13 | 14 | # Do not use braces for hash literals when they are the last argument of a 15 | # method call. 16 | Style/BracesAroundHashParameters: 17 | Enabled: true 18 | 19 | # Align `when` with `case`. 20 | Layout/CaseIndentation: 21 | Enabled: true 22 | 23 | # Align comments with method definitions. 24 | Layout/CommentIndentation: 25 | Enabled: true 26 | 27 | # No extra empty lines. 28 | Layout/EmptyLines: 29 | Enabled: true 30 | 31 | # In a regular class definition, no empty lines around the body. 32 | Layout/EmptyLinesAroundClassBody: 33 | Enabled: true 34 | 35 | # In a regular module definition, no empty lines around the body. 36 | Layout/EmptyLinesAroundModuleBody: 37 | Enabled: true 38 | 39 | # Use Ruby >= 1.9 syntax for hashes. Prefer { a: :b } over { :a => :b }. 40 | Style/HashSyntax: 41 | Enabled: true 42 | 43 | # Method definitions after `private` or `protected` isolated calls need one 44 | # extra level of indentation. 45 | Layout/IndentationConsistency: 46 | Enabled: true 47 | EnforcedStyle: indented_internal_methods 48 | 49 | # Two spaces, no tabs (for indentation). 50 | Layout/IndentationWidth: 51 | Enabled: true 52 | 53 | Layout/SpaceAfterColon: 54 | Enabled: true 55 | 56 | Layout/SpaceAfterComma: 57 | Enabled: true 58 | 59 | Layout/SpaceAroundEqualsInParameterDefault: 60 | Enabled: true 61 | 62 | Layout/SpaceAroundKeyword: 63 | Enabled: true 64 | 65 | Layout/SpaceAroundOperators: 66 | Enabled: true 67 | 68 | Layout/SpaceBeforeFirstArg: 69 | Enabled: true 70 | 71 | # Defining a method with parameters needs parentheses. 72 | Style/MethodDefParentheses: 73 | Enabled: true 74 | 75 | # Use `foo {}` not `foo{}`. 76 | Layout/SpaceBeforeBlockBraces: 77 | Enabled: true 78 | 79 | # Use `foo { bar }` not `foo {bar}`. 80 | Layout/SpaceInsideBlockBraces: 81 | Enabled: true 82 | 83 | # Use `{ a: 1 }` not `{a:1}`. 84 | Layout/SpaceInsideHashLiteralBraces: 85 | Enabled: true 86 | 87 | Layout/SpaceInsideParens: 88 | Enabled: true 89 | 90 | # Check quotes usage according to lint rule below. 91 | Style/StringLiterals: 92 | Enabled: true 93 | EnforcedStyle: double_quotes 94 | 95 | # Detect hard tabs, no hard tabs. 96 | Layout/Tab: 97 | Enabled: true 98 | 99 | # Blank lines should not have any spaces. 100 | Layout/TrailingBlankLines: 101 | Enabled: true 102 | 103 | # No trailing whitespace. 104 | Layout/TrailingWhitespace: 105 | Enabled: true 106 | 107 | # Use quotes for string literals when they are enough. 108 | Style/UnneededPercentQ: 109 | Enabled: true 110 | 111 | # Align `end` with the matching keyword or starting expression except for 112 | # assignments, where it should be aligned with the LHS. 113 | Lint/EndAlignment: 114 | Enabled: true 115 | EnforcedStyleAlignWith: variable 116 | 117 | # Use my_method(my_arg) not my_method( my_arg ) or my_method my_arg. 118 | Lint/RequireParentheses: 119 | Enabled: true 120 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](http://keepachangelog.com/) 5 | and this project adheres to [Semantic Versioning](http://semver.org/). 6 | 7 | ## [Unreleased] 8 | 9 | ## [1.0.0-beta.1] 10 | 11 | ### Added 12 | - Instructions to set up `react-hot-loader` 4 (fixed #51) 13 | 14 | ### Updated 15 | - Instructions for setting up `webpacker-react` with a modern Webpacker version 16 | 17 | ### Changed 18 | - Tests now uses headless chrome instead of Poltergeist 19 | - Babel is configured with `babel-preset-env` 20 | 21 | ### Removed 22 | - Support for `react-hot-loader`. Please look at the README for instructions on how to use `react-hot-loader` 4 with your app, it is much simpler and better! 23 | 24 | ## [0.3.2] - 2017-09-13 25 | 26 | ### Fixed 27 | - The whole `lodash` library was imported, resulting in a big bundle. Specific `lodash` functions`imports` are now used. 28 | - Helpers are now loaded on `ActionView` loading (fixes #38) 29 | 30 | ## [0.3.1] - 2017-05-30 31 | 32 | ### Fixed 33 | - Move test Rake tasks out of `lib/tasks` (fixes #33) 34 | 35 | ## [0.3.0] - 2017-05-27 36 | 37 | ### Added 38 | - Webpacker 1.2 and 2.0 support 39 | - Added a `tag` option to change the tag used to render the component (default is `div`) 40 | 41 | ## [0.2.0] - 2017-03-20 42 | 43 | ### Added 44 | - support for Turbolinks 5, Turbolinks 2.4 and PJAX. Components will be mounted and unmounted when Turbolinks-specific events occur. Also, the integration works with Turbolinks 5 cache. 45 | - New `WebpackerReact.setup({Component1, Component2, ...})` initialization API. The old API couldn't properly detect the components' names, thus user is required to provide the names in the configuration object's keys. 46 | ### Removed 47 | - `WebpackerReact.register(Component)` has been dropped in favor of `WebpackerReact.setup({Component})` 48 | 49 | ## [0.1.0] - 2017-02-23 50 | 51 | ### Added 52 | - First released version 53 | - render React components from views using the `react_component` helper 54 | - render React components from controllers using `render react_component: 'name'` (#1 by @daninfpj) 55 | - basic Hot Module Remplacement (#7 by @mfazekas) 56 | 57 | [Unreleased]: https://github.com/renchap/webpacker-react/compare/v1.0.0-beta.1...HEAD 58 | [1.0.0-beta.1]: https://github.com/renchap/webpacker-react/tree/v1.0.0-beta.1 59 | [0.3.2]: https://github.com/renchap/webpacker-react/tree/v0.3.2 60 | [0.3.1]: https://github.com/renchap/webpacker-react/tree/v0.3.1 61 | [0.3.0]: https://github.com/renchap/webpacker-react/tree/v0.3.0 62 | [0.2.0]: https://github.com/renchap/webpacker-react/tree/v0.2.0 63 | [0.1.0]: https://github.com/renchap/webpacker-react/tree/v0.1.0 64 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project maintainer at renchap@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | 3 | gem "rubocop", ">= 0.47", require: false 4 | gem "rails", "~> 5.2.0" 5 | gem "webpacker", "~> 4.0.0" 6 | gem "puma", "~> 4.0" 7 | 8 | # Specify your gem's dependencies in webpacker-react.gemspec 9 | gemspec 10 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | PATH 2 | remote: . 3 | specs: 4 | webpacker-react (0.4.0) 5 | webpacker 6 | 7 | GEM 8 | remote: https://rubygems.org/ 9 | specs: 10 | actioncable (5.2.3) 11 | actionpack (= 5.2.3) 12 | nio4r (~> 2.0) 13 | websocket-driver (>= 0.6.1) 14 | actionmailer (5.2.3) 15 | actionpack (= 5.2.3) 16 | actionview (= 5.2.3) 17 | activejob (= 5.2.3) 18 | mail (~> 2.5, >= 2.5.4) 19 | rails-dom-testing (~> 2.0) 20 | actionpack (5.2.3) 21 | actionview (= 5.2.3) 22 | activesupport (= 5.2.3) 23 | rack (~> 2.0) 24 | rack-test (>= 0.6.3) 25 | rails-dom-testing (~> 2.0) 26 | rails-html-sanitizer (~> 1.0, >= 1.0.2) 27 | actionview (5.2.3) 28 | activesupport (= 5.2.3) 29 | builder (~> 3.1) 30 | erubi (~> 1.4) 31 | rails-dom-testing (~> 2.0) 32 | rails-html-sanitizer (~> 1.0, >= 1.0.3) 33 | activejob (5.2.3) 34 | activesupport (= 5.2.3) 35 | globalid (>= 0.3.6) 36 | activemodel (5.2.3) 37 | activesupport (= 5.2.3) 38 | activerecord (5.2.3) 39 | activemodel (= 5.2.3) 40 | activesupport (= 5.2.3) 41 | arel (>= 9.0) 42 | activestorage (5.2.3) 43 | actionpack (= 5.2.3) 44 | activerecord (= 5.2.3) 45 | marcel (~> 0.3.1) 46 | activesupport (5.2.3) 47 | concurrent-ruby (~> 1.0, >= 1.0.2) 48 | i18n (>= 0.7, < 2) 49 | minitest (~> 5.1) 50 | tzinfo (~> 1.1) 51 | addressable (2.6.0) 52 | public_suffix (>= 2.0.2, < 4.0) 53 | arel (9.0.0) 54 | ast (2.4.0) 55 | builder (3.2.3) 56 | capybara (3.25.0) 57 | addressable 58 | mini_mime (>= 0.1.3) 59 | nokogiri (~> 1.8) 60 | rack (>= 1.6.0) 61 | rack-test (>= 0.6.3) 62 | regexp_parser (~> 1.5) 63 | xpath (~> 3.2) 64 | childprocess (1.0.1) 65 | rake (< 13.0) 66 | concurrent-ruby (1.1.5) 67 | crass (1.0.4) 68 | erubi (1.8.0) 69 | globalid (0.4.2) 70 | activesupport (>= 4.2.0) 71 | i18n (1.6.0) 72 | concurrent-ruby (~> 1.0) 73 | jaro_winkler (1.5.3) 74 | loofah (2.2.3) 75 | crass (~> 1.0.2) 76 | nokogiri (>= 1.5.9) 77 | mail (2.7.1) 78 | mini_mime (>= 0.1.1) 79 | marcel (0.3.3) 80 | mimemagic (~> 0.3.2) 81 | method_source (0.9.2) 82 | mimemagic (0.3.3) 83 | mini_mime (1.0.2) 84 | mini_portile2 (2.4.0) 85 | minitest (5.11.3) 86 | nio4r (2.4.0) 87 | nokogiri (1.10.3) 88 | mini_portile2 (~> 2.4.0) 89 | parallel (1.17.0) 90 | parser (2.6.3.0) 91 | ast (~> 2.4.0) 92 | public_suffix (3.1.1) 93 | puma (4.0.0) 94 | nio4r (~> 2.0) 95 | rack (2.0.7) 96 | rack-proxy (0.6.5) 97 | rack 98 | rack-test (1.1.0) 99 | rack (>= 1.0, < 3) 100 | rails (5.2.3) 101 | actioncable (= 5.2.3) 102 | actionmailer (= 5.2.3) 103 | actionpack (= 5.2.3) 104 | actionview (= 5.2.3) 105 | activejob (= 5.2.3) 106 | activemodel (= 5.2.3) 107 | activerecord (= 5.2.3) 108 | activestorage (= 5.2.3) 109 | activesupport (= 5.2.3) 110 | bundler (>= 1.3.0) 111 | railties (= 5.2.3) 112 | sprockets-rails (>= 2.0.0) 113 | rails-dom-testing (2.0.3) 114 | activesupport (>= 4.2.0) 115 | nokogiri (>= 1.6) 116 | rails-html-sanitizer (1.0.4) 117 | loofah (~> 2.2, >= 2.2.2) 118 | railties (5.2.3) 119 | actionpack (= 5.2.3) 120 | activesupport (= 5.2.3) 121 | method_source 122 | rake (>= 0.8.7) 123 | thor (>= 0.19.0, < 2.0) 124 | rainbow (3.0.0) 125 | rake (12.3.2) 126 | regexp_parser (1.5.1) 127 | rubocop (0.72.0) 128 | jaro_winkler (~> 1.5.1) 129 | parallel (~> 1.10) 130 | parser (>= 2.6) 131 | rainbow (>= 2.2.2, < 4.0) 132 | ruby-progressbar (~> 1.7) 133 | unicode-display_width (>= 1.4.0, < 1.7) 134 | ruby-progressbar (1.10.1) 135 | rubyzip (1.2.3) 136 | selenium-webdriver (3.142.3) 137 | childprocess (>= 0.5, < 2.0) 138 | rubyzip (~> 1.2, >= 1.2.2) 139 | sprockets (3.7.2) 140 | concurrent-ruby (~> 1.0) 141 | rack (> 1, < 3) 142 | sprockets-rails (3.2.1) 143 | actionpack (>= 4.0) 144 | activesupport (>= 4.0) 145 | sprockets (>= 3.0.0) 146 | thor (0.20.3) 147 | thread_safe (0.3.6) 148 | tzinfo (1.2.5) 149 | thread_safe (~> 0.1) 150 | unicode-display_width (1.6.0) 151 | webpacker (4.0.7) 152 | activesupport (>= 4.2) 153 | rack-proxy (>= 0.6.1) 154 | railties (>= 4.2) 155 | websocket-driver (0.7.1) 156 | websocket-extensions (>= 0.1.0) 157 | websocket-extensions (0.1.4) 158 | xpath (3.2.0) 159 | nokogiri (~> 1.8) 160 | 161 | PLATFORMS 162 | ruby 163 | 164 | DEPENDENCIES 165 | bundler (~> 1.13) 166 | capybara 167 | minitest (~> 5.0) 168 | puma (~> 4.0) 169 | rails (~> 5.2.0) 170 | rake (~> 12.0) 171 | rubocop (>= 0.47) 172 | selenium-webdriver 173 | webpacker (~> 4.0.0) 174 | webpacker-react! 175 | 176 | BUNDLED WITH 177 | 1.17.2 178 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Renaud Chaput 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Webpacker-React [![CircleCI](https://circleci.com/gh/renchap/webpacker-react.svg?style=svg)](https://circleci.com/gh/renchap/webpacker-react) 2 | 3 | *__Note:__ This is the documentation for the Git master branch. Documentation for the latest release (1.0.0-beta.1) is [available here](https://github.com/renchap/webpacker-react/tree/v0.3.2).* 4 | 5 | Webpacker-React makes it easy to use [React](https://facebook.github.io/react/) with [Webpacker](https://github.com/rails/webpacker) in your Rails applications. 6 | 7 | It supports Webpacker 1.2+. 8 | 9 | An example application is available: https://github.com/renchap/webpacker-react-example/ 10 | 11 | ## Installation 12 | 13 | Your Rails application needs to use Webpacker and have the React integration done. Please refer to their documentation documentation for this: https://github.com/rails/webpacker/blob/master/README.md#ready-for-react 14 | 15 | First, you need to add the webpacker-react gem to your Rails app Gemfile: 16 | 17 | ```ruby 18 | gem 'webpacker-react', "~> 1.0.0.beta.1" 19 | ``` 20 | 21 | Once done, run `bundle` to install the gem. 22 | 23 | Then you need to update your `package.json` file to include the `webpacker-react` NPM module: 24 | 25 | `./bin/yarn add webpacker-react` 26 | 27 | You are now all set! 28 | 29 | ### Note about versions 30 | 31 | Webpacker-React 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`. 32 | 33 | ## Usage 34 | 35 | The first step is to register your root components (those you want to load from your HTML). 36 | In your pack file (`app/javascript/packs/*.js`), import your components as well as `webpacker-react` and register them. Considering you have a component in `app/javascript/components/hello.js`: 37 | 38 | ```javascript 39 | import Hello from 'components/hello' 40 | import WebpackerReact from 'webpacker-react' 41 | 42 | WebpackerReact.setup({Hello}) // ES6 shorthand for {Hello: Hello} 43 | ``` 44 | 45 | ### With Turbolinks 46 | 47 | You have to make sure Turbolinks is loaded before calling `WebpackerReact.initialize()`. 48 | 49 | For example: 50 | 51 | ```javascript 52 | import Hello from 'components/hello' 53 | import WebpackerReact from 'webpacker-react' 54 | import Turbolinks from 'turbolinks' 55 | 56 | Turbolinks.start() 57 | 58 | WebpackerReact.setup({Hello}) 59 | ``` 60 | 61 | You may also load turbolinks in regular asset pipeline `application.js`: 62 | 63 | ```javascript 64 | //= require "turbolinks" 65 | ``` 66 | 67 | In that case, make sure your packs are loaded *after* `application.js` 68 | 69 | Now you can render React components from your views or your controllers. 70 | 71 | ### Rendering from a view 72 | 73 | Use the `react_component` helper. The first argument is your component's name, the second one is the `props`: 74 | 75 | ```erb 76 | <%= react_component('Hello', name: 'React') %> 77 | ``` 78 | 79 | 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`: 80 | 81 | ```erb 82 | <%= react_component('Hello', { name: 'React' }, tag: :span, class: 'my-custom-component') %> 83 | # This will render 84 | ``` 85 | 86 | ### Rendering from a controller 87 | 88 | ```rb 89 | class PageController < ApplicationController 90 | def main 91 | render react_component: 'Hello', props: { name: 'React' } 92 | end 93 | end 94 | ``` 95 | 96 | You can use the `tag_options` argument to change the generated HTML, similar to the `react_component` method above: 97 | 98 | ```rb 99 | render react_component: 'Hello', props: { name: 'React' }, tag_options: { tag: :span, class: 'my-custom-component' } 100 | ``` 101 | 102 | You can also pass any of the usual arguments to `render` in this call: `layout`, `status`, `content_type`, etc. 103 | 104 | *Note: you need to have [Webpack process your code](https://github.com/rails/webpacker#binstubs) before it is available to the browser, either by manually running `./bin/webpack` or having the `./bin/webpack-watcher` process running.* 105 | 106 | ### Hot Module Replacement 107 | 108 | [HMR](https://webpack.js.org/concepts/hot-module-replacement/) allows to reload / add / remove modules live in the browser without 109 | reloading the page. This allows any change you make to your React components to be applied as soon as you save, 110 | preserving their current state. 111 | 112 | 1. install `react-hot-loader` (version 4): 113 | ``` 114 | ./bin/yarn add react-hot-loader@4 115 | ``` 116 | 117 | 2. update your Babel or Webpack config. We provide a convenience function to add the necessary changes to your config if it's not significantly different than the standard Webpacker config: 118 | ```js 119 | // config/webpack/development.js 120 | // This assumes Webpacker 3+ 121 | 122 | const environment = require("./environment") 123 | const webpackerReactconfigureHotModuleReplacement = require('webpacker-react/configure-hot-module-replacement') 124 | 125 | const config = environment.toWebpackConfig() 126 | 127 | module.exports = webpackerReactconfigureHotModuleReplacement(config) 128 | ``` 129 | 130 | If you prefer to do it manually, you need to add `react-hot-loader/babel` in your Babel plugins (in your `.babelrc` or `.babelrc.js`). You can include it only for development. 131 | 132 | 3. once Babel is configured, `webpack-dev-server` needs to be set up for HMR. This is easy, just switch `hmr: true` in your `webpacker.yml` for development! 133 | 134 | 4. you now need to use `webpack-dev-server` (in place of `webpack` or `webpack-watcher`). 135 | 136 | 5. finally, enable React Hot Loader for your root components (the ones you register with `WebpackerReact.setup`): 137 | ```es6 138 | // For example in app/javascripts/components/hello.js 139 | import React from 'react' 140 | import { hot } from 'react-hot-loader' 141 | 142 | const Hello = () =>
Hello World!
143 | 144 | // This is the important line! 145 | export default hot(module)(Hello) 146 | ``` 147 | 148 | ## Development 149 | 150 | To work on this gem locally, you first need to clone and setup [the example application](https://github.com/renchap/webpacker-react-example). 151 | 152 | Then you need to change the example app Gemfile to point to your local repository and run bundle afterwise: 153 | 154 | ```ruby 155 | gem 'webpacker-react', path: '~/code/webpacker-react/' 156 | ``` 157 | 158 | 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): 159 | 160 | ``` 161 | $ cd ~/code/webpacker-react/javascript/webpacker_react-npm-module/ 162 | $ yarn 163 | $ cd dist/ 164 | $ yarn # compiles the code from src/ to dist/ 165 | $ yarn link 166 | success Registered "webpacker-react". 167 | 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. 168 | $ cd ~/code/webpacker-react-example/ 169 | $ yarn link webpacker-react 170 | success Registered "webpacker-react". 171 | ``` 172 | 173 | 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. 174 | 175 | ## Testing 176 | 177 | If you changed the local javascript package, first ensure it is build (see above). 178 | 179 | To run the test suite: 180 | 181 | ```sh 182 | $ rake test 183 | ``` 184 | 185 | If you change the javascript code, please ensure there are no style errors before committing: 186 | 187 | ```sh 188 | $ cd javascript/webpacker_react-npm-module/ 189 | $ yarn lint 190 | ``` 191 | 192 | ## Contributing 193 | 194 | Bug reports and pull requests are welcome on GitHub at https://github.com/renchap/webpacker-react. 195 | Please feel free to open issues about your needs and features you would like to be added. 196 | 197 | ## Wishlist 198 | 199 | - [ ] server-side rendering (#3) 200 | 201 | ### Thanks 202 | 203 | 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! 204 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require "bundler/gem_tasks" 2 | require "rake/testtask" 3 | require "English" 4 | 5 | Rake::TestTask.new(:test) do |t| 6 | t.libs << "test" 7 | t.libs << "lib" 8 | t.test_files = FileList["test/**/*_test.rb"] 9 | t.verbose = true 10 | end 11 | 12 | task default: :test 13 | 14 | # webpacker:check_webpack_binstubs is looking for binstubs 15 | # in the gem root directory. We need to disable it for our 16 | # tests, as it tries to check they exist when loading the 17 | # example app 18 | 19 | task "webpacker:check_webpack_binstubs" 20 | Rake::Task["webpacker:check_webpack_binstubs"].clear 21 | 22 | namespace :example_app do 23 | desc "Runs yarn in test/example_app" 24 | task :yarn do 25 | sh "cd test/example_app && yarn" 26 | end 27 | 28 | desc "Runs webpack in test/example_app" 29 | task webpack: :yarn do 30 | sh "cd test/example_app && RAILS_ENV=test ./bin/webpack" 31 | end 32 | end 33 | 34 | Rake::Task["test"].enhance ["example_app:webpack"] 35 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /bin/console: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | require "bundler/setup" 4 | require "webpacker/react" 5 | 6 | # You can add fixtures and/or initialization code here to make experimenting 7 | # with your gem easier. You can also use a different console, if you like. 8 | 9 | # (If you use this, don't forget to add pry to your Gemfile!) 10 | # require "pry" 11 | # Pry.start 12 | 13 | require "irb" 14 | IRB.start 15 | -------------------------------------------------------------------------------- /bin/setup: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -euo pipefail 3 | IFS=$'\n\t' 4 | set -vx 5 | 6 | bundle install 7 | 8 | # Do any other automated setup that you need to do here 9 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["env", { 3 | "targets": { 4 | "browsers": ["> 1%", "last 2 versions"] 5 | } 6 | }]] 7 | } 8 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'extends': 'airbnb', 3 | 'rules': { 4 | 'comma-dangle': ['error', 'never'], 5 | 'import/no-unresolved': 'off', 6 | 'import/no-extraneous-dependencies': 'off', 7 | 'import/extensions': 'off', 8 | 'no-console': 'off', 9 | semi: ['error', 'never'], 10 | }, 11 | 'env': { 12 | 'browser': true, 13 | 'node': true, 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/README.md: -------------------------------------------------------------------------------- 1 | # webpacker-react 2 | 3 | Javascript part for the `webpacker_react` Ruby gem. 4 | 5 | Please see the project homepage for more details : https://github.com/renchap/webpacker-react 6 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/dist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpacker-react", 3 | "version": "1.0.0-beta.1", 4 | "description": "Javascript", 5 | "main": "index.js", 6 | "homepage": "https://github.com/renchap/webpacker-react", 7 | "repository": "renchap/webpacker-react", 8 | "author": { 9 | "name": "Renaud Chaput", 10 | "email": "renchap@gmail.com" 11 | }, 12 | "peerDependencies": { 13 | "react": ">= 0.14", 14 | "react-dom": ">= 0.14" 15 | }, 16 | "files": [ 17 | "index.js", 18 | "configure-hot-module-replacement.js", 19 | "ujs.js" 20 | ], 21 | "scripts": { 22 | "prepublish": "cd .. ; yarn run build" 23 | }, 24 | "license": "MIT", 25 | "dependencies": { 26 | "webpack-merge": "^4.1.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/dist/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | lodash@^4.17.4: 6 | version "4.17.4" 7 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" 8 | 9 | webpack-merge@^4.1.1: 10 | version "4.1.1" 11 | resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.1.tgz#f1197a0a973e69c6fbeeb6d658219aa8c0c13555" 12 | dependencies: 13 | lodash "^4.17.4" 14 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpacker-react-build", 3 | "private": true, 4 | "scripts": { 5 | "build": "babel src --out-dir dist", 6 | "lint": "eslint src/" 7 | }, 8 | "devDependencies": { 9 | "babel-cli": "^6.18.0", 10 | "babel-preset-env": "^1.6.1", 11 | "eslint": "^5.3.0", 12 | "eslint-config-airbnb": "^17.0.0", 13 | "eslint-plugin-import": "^2.9.0", 14 | "eslint-plugin-jsx-a11y": "^6.0.3", 15 | "eslint-plugin-react": "^7.7.0" 16 | }, 17 | "dependencies": { 18 | "lodash": "^4.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/src/configure-hot-module-replacement.js: -------------------------------------------------------------------------------- 1 | import merge from 'webpack-merge' 2 | 3 | function configureHotModuleReplacement(origConfig) { 4 | const config = origConfig 5 | config.module.rules = config.module.rules.map((rule) => { 6 | if (rule.loader === 'babel-loader') { 7 | return merge(rule, { options: { plugins: ['react-hot-loader/babel'] } }) 8 | } 9 | return rule 10 | }) 11 | 12 | return config 13 | } 14 | 15 | module.exports = configureHotModuleReplacement 16 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import intersection from 'lodash/intersection' 4 | import keys from 'lodash/keys' 5 | import assign from 'lodash/assign' 6 | import omit from 'lodash/omit' 7 | import ujs from './ujs' 8 | 9 | const CLASS_ATTRIBUTE_NAME = 'data-react-class' 10 | const PROPS_ATTRIBUTE_NAME = 'data-react-props' 11 | 12 | const WebpackerReact = { 13 | registeredComponents: {}, 14 | 15 | render(node, component) { 16 | const propsJson = node.getAttribute(PROPS_ATTRIBUTE_NAME) 17 | const props = propsJson && JSON.parse(propsJson) 18 | 19 | const reactElement = React.createElement(component, props) 20 | 21 | ReactDOM.render(reactElement, node) 22 | }, 23 | 24 | registerComponents(components) { 25 | const collisions = intersection(keys(this.registeredComponents), keys(components)) 26 | if (collisions.length > 0) { 27 | console.error(`webpacker-react: can not register components. Following components are already registered: ${collisions}`) 28 | } 29 | 30 | assign(this.registeredComponents, omit(components, collisions)) 31 | return true 32 | }, 33 | 34 | unmountComponents() { 35 | const mounted = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`) 36 | for (let i = 0; i < mounted.length; i += 1) { 37 | ReactDOM.unmountComponentAtNode(mounted[i]) 38 | } 39 | }, 40 | 41 | mountComponents() { 42 | const { registeredComponents } = this 43 | const toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`) 44 | 45 | for (let i = 0; i < toMount.length; i += 1) { 46 | const node = toMount[i] 47 | const className = node.getAttribute(CLASS_ATTRIBUTE_NAME) 48 | const component = registeredComponents[className] 49 | 50 | if (component) { 51 | if (node.innerHTML.length === 0) this.render(node, component) 52 | } else { 53 | console.error(`webpacker-react: can not render a component that has not been registered: ${className}`) 54 | } 55 | } 56 | }, 57 | 58 | setup(components = {}) { 59 | if (typeof window.WebpackerReact === 'undefined') { 60 | window.WebpackerReact = this 61 | ujs.setup(this.mountComponents.bind(this), this.unmountComponents.bind(this)) 62 | } 63 | 64 | window.WebpackerReact.registerComponents(components) 65 | window.WebpackerReact.mountComponents() 66 | } 67 | } 68 | 69 | export default WebpackerReact 70 | -------------------------------------------------------------------------------- /javascript/webpacker_react-npm-module/src/ujs.js: -------------------------------------------------------------------------------- 1 | // This module is an adapted version from rails-ujs module 2 | // implemented in http://github.com/reactjs/react-rails 3 | // which is distributed under Apache License 2.0 4 | 5 | const ujs = { 6 | handleEvent(eventName, callback, { once } = { once: false }) { 7 | const $ = (typeof window.jQuery !== 'undefined') && window.jQuery 8 | 9 | if ($) { 10 | if (once) { 11 | $(document).one(eventName, callback) 12 | } else { 13 | $(document).on(eventName, callback) 14 | } 15 | } else { 16 | document.addEventListener(eventName, callback, { once }) 17 | } 18 | }, 19 | 20 | setup(onMount, onUnmount) { 21 | const $ = (typeof window.jQuery !== 'undefined') && window.jQuery 22 | const { Turbolinks } = window 23 | 24 | // Detect which kind of events to set up: 25 | if (typeof Turbolinks !== 'undefined' && Turbolinks.supported) { 26 | if (typeof Turbolinks.EVENTS !== 'undefined') { 27 | // Turbolinks.EVENTS is in classic version 2.4.0+ 28 | this.turbolinksClassic(onMount, onUnmount) 29 | } else if (typeof Turbolinks.controller !== 'undefined') { 30 | // Turbolinks.controller is in version 5+ 31 | this.turbolinks5(onMount, onUnmount) 32 | } else { 33 | this.turbolinksClassicDeprecated(onMount, onUnmount) 34 | } 35 | } else if ($ && typeof $.pjax === 'function') { 36 | this.pjax(onMount, onUnmount) 37 | } else { 38 | this.native(onMount) 39 | } 40 | }, 41 | 42 | turbolinks5(onMount, onUnmount) { 43 | this.handleEvent('turbolinks:load', onMount, { once: true }) 44 | this.handleEvent('turbolinks:render', onMount) 45 | this.handleEvent('turbolinks:before-render', onUnmount) 46 | }, 47 | 48 | turbolinksClassic(onMount, onUnmount) { 49 | const { Turbolinks } = window 50 | 51 | this.handleEvent(Turbolinks.EVENTS.CHANGE, onMount) 52 | this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD, onUnmount) 53 | }, 54 | 55 | turbolinksClassicDeprecated(onMount, onUnmount) { 56 | // Before Turbolinks 2.4.0, Turbolinks didn't 57 | // have named events and didn't have a before-unload event. 58 | // Also, it didn't work with the Turbolinks cache, see 59 | // https://github.com/reactjs/react-rails/issues/87 60 | const { Turbolinks } = window 61 | Turbolinks.pagesCached(0) 62 | this.handleEvent('page:change', onMount) 63 | this.handleEvent('page:receive', onUnmount) 64 | }, 65 | 66 | pjax(onMount, onUnmount) { 67 | this.handleEvent('ready', onMount) 68 | this.handleEvent('pjax:end', onMount) 69 | this.handleEvent('pjax:beforeReplace', onUnmount) 70 | }, 71 | 72 | native(onMount) { 73 | const $ = (typeof window.jQuery !== 'undefined') && window.jQuery 74 | if ($) { 75 | $(() => onMount()) 76 | } else if ('addEventListener' in window) { 77 | document.addEventListener('DOMContentLoaded', onMount) 78 | } else { 79 | // add support to IE8 without jQuery 80 | window.attachEvent('onload', onMount) 81 | } 82 | } 83 | } 84 | 85 | export default ujs 86 | -------------------------------------------------------------------------------- /lib/webpacker/react.rb: -------------------------------------------------------------------------------- 1 | require "webpacker/react/version" 2 | 3 | module Webpacker 4 | module React 5 | end 6 | end 7 | 8 | require "webpacker/react/railtie" if defined?(Rails) 9 | require "webpacker/react/helpers" 10 | require "webpacker/react/component" 11 | -------------------------------------------------------------------------------- /lib/webpacker/react/component.rb: -------------------------------------------------------------------------------- 1 | module Webpacker 2 | module React 3 | class Component 4 | include ActionView::Helpers::TagHelper 5 | include ActionView::Helpers::TextHelper 6 | 7 | attr_accessor :name 8 | 9 | def initialize(name) 10 | @name = name 11 | end 12 | 13 | def render(props = {}, options = {}) 14 | tag = options.delete(:tag) || :div 15 | data = { data: { "react-class" => @name, "react-props" => props.to_json } } 16 | 17 | content_tag(tag, nil, options.deep_merge(data)) 18 | end 19 | end 20 | end 21 | end 22 | -------------------------------------------------------------------------------- /lib/webpacker/react/helpers.rb: -------------------------------------------------------------------------------- 1 | module Webpacker 2 | module React 3 | module Helpers 4 | def react_component(component_name, props = {}, options = {}) 5 | Webpacker::React::Component.new(component_name).render(props, options) 6 | end 7 | end 8 | end 9 | end 10 | -------------------------------------------------------------------------------- /lib/webpacker/react/railtie.rb: -------------------------------------------------------------------------------- 1 | require "rails/railtie" 2 | 3 | module Webpacker 4 | module React 5 | class Engine < ::Rails::Engine 6 | initializer :webpacker_react do 7 | ActiveSupport.on_load(:action_controller) do 8 | ActionController::Base.helper ::Webpacker::React::Helpers 9 | end 10 | 11 | ActiveSupport.on_load :action_view do 12 | include ::Webpacker::React::Helpers 13 | end 14 | end 15 | 16 | initializer :webpacker_react_renderer, group: :all do |_app| 17 | ActionController::Renderers.add :react_component do |component_name, options| 18 | props = options.fetch(:props, {}) 19 | tag_options = options.fetch(:tag_options, {}) 20 | html = Webpacker::React::Component.new(component_name).render(props, tag_options) 21 | render_options = options.merge(inline: html) 22 | render(render_options) 23 | end 24 | end 25 | end 26 | end 27 | end 28 | -------------------------------------------------------------------------------- /lib/webpacker/react/version.rb: -------------------------------------------------------------------------------- 1 | module Webpacker 2 | module React 3 | VERSION = "1.0.0.beta.1".freeze 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /test/example_app/.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults 2 | -------------------------------------------------------------------------------- /test/example_app/Rakefile: -------------------------------------------------------------------------------- 1 | # Add your own tasks in files placed in lib/tasks ending in .rake, 2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 3 | 4 | require_relative "config/application" 5 | 6 | Rails.application.load_tasks 7 | -------------------------------------------------------------------------------- /test/example_app/app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | protect_from_forgery with: :exception 3 | end 4 | -------------------------------------------------------------------------------- /test/example_app/app/controllers/concerns/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renchap/webpacker-react/174cad7a129083a1d18f20c56774d3b35b402cbc/test/example_app/app/controllers/concerns/.keep -------------------------------------------------------------------------------- /test/example_app/app/controllers/custom_tag_controller.rb: -------------------------------------------------------------------------------- 1 | class CustomTagController < ApplicationController 2 | def view_component 3 | end 4 | 5 | def controller_component 6 | render react_component: "HelloReact", props: { name: "a component rendered from a controller in a span" }, tag_options: { tag: :span } 7 | end 8 | end 9 | -------------------------------------------------------------------------------- /test/example_app/app/controllers/pages_controller.rb: -------------------------------------------------------------------------------- 1 | class PagesController < ApplicationController 2 | def view_component 3 | end 4 | 5 | def view_consecutive 6 | @count = (params[:count] || 2).to_i 7 | end 8 | 9 | def controller_component 10 | render react_component: "HelloReact", props: { name: "a component rendered from a controller" } 11 | end 12 | end 13 | -------------------------------------------------------------------------------- /test/example_app/app/controllers/turbolinks_pages_controller.rb: -------------------------------------------------------------------------------- 1 | class TurbolinksPagesController < PagesController 2 | layout "turbolinks" 3 | end 4 | -------------------------------------------------------------------------------- /test/example_app/app/controllers/two_packs_controller.rb: -------------------------------------------------------------------------------- 1 | class TwoPacksController < ApplicationController 2 | layout "two_packs" 3 | 4 | def view_all 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /test/example_app/app/javascript/components/hello.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Hello extends React.Component { 4 | render() { 5 | return
6 | Hello, I am {this.props.name}! 7 |
8 | } 9 | } 10 | 11 | export default Hello; 12 | -------------------------------------------------------------------------------- /test/example_app/app/javascript/packs/a.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import WebpackerReact from 'webpacker-react'; 3 | import HelloReact from 'components/hello'; 4 | 5 | const A = (props) =>
Component A
; 6 | 7 | WebpackerReact.setup({A, HelloReact}); 8 | -------------------------------------------------------------------------------- /test/example_app/app/javascript/packs/application.js: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | // This file is automatically compiled by Webpack, along with any other files 3 | // present in this directory. You're encouraged to place your actual application logic in 4 | // a relevant structure within app/javascript and only use these pack files to reference 5 | // that code so it'll be compiled. 6 | // 7 | // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate 8 | // layout file, like app/views/layouts/application.html.erb 9 | 10 | console.log("Hello World from Webpacker") 11 | -------------------------------------------------------------------------------- /test/example_app/app/javascript/packs/b.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import WebpackerReact from 'webpacker-react'; 3 | 4 | const HelloReact = (props) =>
This component will be ignored
; 5 | const B = (props) =>
Component B
; 6 | 7 | WebpackerReact.setup({HelloReact, B}); -------------------------------------------------------------------------------- /test/example_app/app/javascript/packs/hello_react.js: -------------------------------------------------------------------------------- 1 | import HelloReact from 'components/hello'; 2 | import WebpackerReact from 'webpacker-react'; 3 | 4 | WebpackerReact.setup({HelloReact}) -------------------------------------------------------------------------------- /test/example_app/app/javascript/packs/turbolinks_hello_react.js: -------------------------------------------------------------------------------- 1 | import HelloReact from 'components/hello'; 2 | import WebpackerReact from 'webpacker-react'; 3 | import Turbolinks from 'turbolinks'; 4 | 5 | Turbolinks.start() 6 | 7 | if (!window.Turbolinks) { 8 | console.error("Turbolinks failed to install") 9 | } 10 | 11 | WebpackerReact.setup({HelloReact}) 12 | -------------------------------------------------------------------------------- /test/example_app/app/views/custom_tag/view_component.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('HelloReact', { name: 'a component rendered from a view in a span' }, tag: :span) %> 2 | -------------------------------------------------------------------------------- /test/example_app/app/views/layouts/application.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebpackerReactExample 5 | <%= csrf_meta_tags %> 6 | 7 | <%= javascript_pack_tag 'hello_react' %> 8 | 9 | 10 | 11 | <%= yield %> 12 | 13 | 14 | -------------------------------------------------------------------------------- /test/example_app/app/views/layouts/turbolinks.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebpackerReactExample 5 | <%= csrf_meta_tags %> 6 | 7 | <%= javascript_pack_tag 'turbolinks_hello_react' %> 8 | 9 | 10 | 11 | <%= yield %> 12 | 13 | 14 | -------------------------------------------------------------------------------- /test/example_app/app/views/layouts/two_packs.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebpackerReactExample 5 | <%= csrf_meta_tags %> 6 | 7 | <%= javascript_pack_tag 'a' %> 8 | <%= javascript_pack_tag 'b' %> 9 | 10 | 11 | 12 | <%= yield %> 13 | 14 | 15 | -------------------------------------------------------------------------------- /test/example_app/app/views/pages/view_component.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('HelloReact', name: 'a component rendered from a view') %> 2 | -------------------------------------------------------------------------------- /test/example_app/app/views/pages/view_consecutive.html.erb: -------------------------------------------------------------------------------- 1 | <% @count.times do |i| %> 2 | <%= react_component('HelloReact', name: "component #{i+1}") %> 3 | <% end %> 4 | 5 | <%= link_to "Show 2", count: 2 %> 6 | <%= link_to "Show 3", count: 3 %> 7 | -------------------------------------------------------------------------------- /test/example_app/app/views/two_packs/view_all.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('HelloReact', name: 'a component rendered from a view') %> 2 | <%= react_component('A') %> 3 | <%= react_component('B') %> 4 | -------------------------------------------------------------------------------- /test/example_app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | var validEnv = ['development', 'test', 'production'] 3 | var currentEnv = api.env() 4 | var isDevelopmentEnv = api.env('development') 5 | var isProductionEnv = api.env('production') 6 | var isTestEnv = api.env('test') 7 | 8 | if (!validEnv.includes(currentEnv)) { 9 | throw new Error( 10 | 'Please specify a valid `NODE_ENV` or ' + 11 | '`BABEL_ENV` environment variables. Valid values are "development", ' + 12 | '"test", and "production". Instead, received: ' + 13 | JSON.stringify(currentEnv) + 14 | '.' 15 | ) 16 | } 17 | 18 | return { 19 | presets: [ 20 | isTestEnv && [ 21 | require('@babel/preset-env').default, 22 | { 23 | targets: { 24 | node: 'current' 25 | } 26 | } 27 | ], 28 | (isProductionEnv || isDevelopmentEnv) && [ 29 | require('@babel/preset-env').default, 30 | { 31 | forceAllTransforms: true, 32 | useBuiltIns: 'entry', 33 | corejs: 3, 34 | modules: false, 35 | exclude: ['transform-typeof-symbol'] 36 | } 37 | ], 38 | [ 39 | require('@babel/preset-react').default, 40 | { 41 | development: isDevelopmentEnv || isTestEnv, 42 | useBuiltIns: true 43 | } 44 | ] 45 | ].filter(Boolean), 46 | plugins: [ 47 | require('babel-plugin-macros'), 48 | require('@babel/plugin-syntax-dynamic-import').default, 49 | isTestEnv && require('babel-plugin-dynamic-import-node'), 50 | require('@babel/plugin-transform-destructuring').default, 51 | [ 52 | require('@babel/plugin-proposal-class-properties').default, 53 | { 54 | loose: true 55 | } 56 | ], 57 | [ 58 | require('@babel/plugin-proposal-object-rest-spread').default, 59 | { 60 | useBuiltIns: true 61 | } 62 | ], 63 | [ 64 | require('@babel/plugin-transform-runtime').default, 65 | { 66 | helpers: false, 67 | regenerator: true, 68 | corejs: false 69 | } 70 | ], 71 | [ 72 | require('@babel/plugin-transform-regenerator').default, 73 | { 74 | async: false 75 | } 76 | ], 77 | isProductionEnv && [ 78 | require('babel-plugin-transform-react-remove-prop-types').default, 79 | { 80 | removeImport: true 81 | } 82 | ] 83 | ].filter(Boolean) 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /test/example_app/bin/bundle: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__) 3 | load Gem.bin_path("bundler", "bundle") 4 | -------------------------------------------------------------------------------- /test/example_app/bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | begin 3 | load File.expand_path("../spring", __FILE__) 4 | rescue LoadError => e 5 | raise unless e.message.include?("spring") 6 | end 7 | APP_PATH = File.expand_path("../config/application", __dir__) 8 | require_relative "../config/boot" 9 | require "rails/commands" 10 | -------------------------------------------------------------------------------- /test/example_app/bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | begin 3 | load File.expand_path("../spring", __FILE__) 4 | rescue LoadError => e 5 | raise unless e.message.include?("spring") 6 | end 7 | require_relative "../config/boot" 8 | require "rake" 9 | Rake.application.run 10 | -------------------------------------------------------------------------------- /test/example_app/bin/setup: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require "pathname" 3 | require "fileutils" 4 | include FileUtils 5 | 6 | # path to your application root. 7 | APP_ROOT = Pathname.new File.expand_path("../../", __FILE__) 8 | 9 | def system!(*args) 10 | system(*args) || abort("\n== Command #{args} failed ==") 11 | end 12 | 13 | chdir APP_ROOT do 14 | # This script is a starting point to setup your application. 15 | # Add necessary setup steps to this file. 16 | 17 | puts "== Installing dependencies ==" 18 | system! "gem install bundler --conservative" 19 | system("bundle check") || system!("bundle install") 20 | 21 | # Install JavaScript dependencies if using Yarn 22 | # system('bin/yarn') 23 | 24 | puts "\n== Removing old logs and tempfiles ==" 25 | system! "bin/rails log:clear tmp:clear" 26 | 27 | puts "\n== Restarting application server ==" 28 | system! "bin/rails restart" 29 | end 30 | -------------------------------------------------------------------------------- /test/example_app/bin/spring: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | # This file loads spring without using Bundler, in order to be fast. 4 | # It gets overwritten when you run the `spring binstub` command. 5 | 6 | unless defined?(Spring) 7 | require "rubygems" 8 | require "bundler" 9 | 10 | lockfile = Bundler::LockfileParser.new(Bundler.default_lockfile.read) 11 | spring = lockfile.specs.detect { |spec| spec.name == "spring" } 12 | if spring 13 | Gem.use_paths Gem.dir, Bundler.bundle_path.to_s, *Gem.path 14 | gem "spring", spring.version 15 | require "spring/binstub" 16 | end 17 | end 18 | -------------------------------------------------------------------------------- /test/example_app/bin/update: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require "pathname" 3 | require "fileutils" 4 | include FileUtils 5 | 6 | # path to your application root. 7 | APP_ROOT = Pathname.new File.expand_path("../../", __FILE__) 8 | 9 | def system!(*args) 10 | system(*args) || abort("\n== Command #{args} failed ==") 11 | end 12 | 13 | chdir APP_ROOT do 14 | # This script is a way to update your development environment automatically. 15 | # Add necessary update steps to this file. 16 | 17 | puts "== Installing dependencies ==" 18 | system! "gem install bundler --conservative" 19 | system("bundle check") || system!("bundle install") 20 | 21 | puts "\n== Removing old logs and tempfiles ==" 22 | system! "bin/rails log:clear tmp:clear" 23 | 24 | puts "\n== Restarting application server ==" 25 | system! "bin/rails restart" 26 | end 27 | -------------------------------------------------------------------------------- /test/example_app/bin/webpack: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" 4 | ENV["NODE_ENV"] ||= "development" 5 | 6 | require "pathname" 7 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", 8 | Pathname.new(__FILE__).realpath) 9 | 10 | require "rubygems" 11 | require "bundler/setup" 12 | 13 | require "webpacker" 14 | require "webpacker/webpack_runner" 15 | 16 | APP_ROOT = File.expand_path("..", __dir__) 17 | Dir.chdir(APP_ROOT) do 18 | Webpacker::WebpackRunner.run(ARGV) 19 | end 20 | -------------------------------------------------------------------------------- /test/example_app/bin/webpack-dev-server: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" 4 | ENV["NODE_ENV"] ||= "development" 5 | 6 | require "pathname" 7 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", 8 | Pathname.new(__FILE__).realpath) 9 | 10 | require "rubygems" 11 | require "bundler/setup" 12 | 13 | require "webpacker" 14 | require "webpacker/dev_server_runner" 15 | 16 | APP_ROOT = File.expand_path("..", __dir__) 17 | Dir.chdir(APP_ROOT) do 18 | Webpacker::DevServerRunner.run(ARGV) 19 | end 20 | -------------------------------------------------------------------------------- /test/example_app/bin/webpack-watcher: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | BIN_PATH = File.expand_path(".", __dir__) 4 | 5 | Dir.chdir(BIN_PATH) do 6 | exec "./webpack --watch --progress --color #{ARGV.join(" ")}" 7 | end 8 | -------------------------------------------------------------------------------- /test/example_app/config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require_relative "config/environment" 4 | 5 | run Rails.application 6 | -------------------------------------------------------------------------------- /test/example_app/config/application.rb: -------------------------------------------------------------------------------- 1 | require_relative "boot" 2 | 3 | require "rails" 4 | # Pick the frameworks you want: 5 | require "active_model/railtie" 6 | require "active_job/railtie" 7 | # require "active_record/railtie" 8 | require "action_controller/railtie" 9 | # require "action_mailer/railtie" 10 | require "action_view/railtie" 11 | # require "action_cable/engine" 12 | require "sprockets/railtie" 13 | require "rails/test_unit/railtie" 14 | 15 | # Require the gems listed in Gemfile, including any gems 16 | # you've limited to :test, :development, or :production. 17 | Bundler.require(*Rails.groups) 18 | 19 | module WebpackerReactExample 20 | class Application < Rails::Application 21 | # Settings in config/environments/* take precedence over those specified here. 22 | # Application configuration should go into files in config/initializers 23 | # -- all .rb files in that directory are automatically loaded. 24 | end 25 | end 26 | -------------------------------------------------------------------------------- /test/example_app/config/boot.rb: -------------------------------------------------------------------------------- 1 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__) 2 | 3 | require "bundler/setup" # Set up gems listed in the Gemfile. 4 | -------------------------------------------------------------------------------- /test/example_app/config/environment.rb: -------------------------------------------------------------------------------- 1 | # Load the Rails application. 2 | require_relative "application" 3 | 4 | # Initialize the Rails application. 5 | Rails.application.initialize! 6 | -------------------------------------------------------------------------------- /test/example_app/config/environments/development.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Make javascript_pack_tag load assets from webpack-dev-server. 3 | # config.x.webpacker[:dev_server_host] = "http://localhost:8080" 4 | 5 | # Settings specified here will take precedence over those in config/application.rb. 6 | 7 | # In the development environment your application's code is reloaded on 8 | # every request. This slows down response time but is perfect for development 9 | # since you don't have to restart the web server when you make code changes. 10 | config.cache_classes = false 11 | 12 | # Do not eager load code on boot. 13 | config.eager_load = false 14 | 15 | # Show full error reports. 16 | config.consider_all_requests_local = true 17 | 18 | # Enable/disable caching. By default caching is disabled. 19 | if Rails.root.join("tmp/caching-dev.txt").exist? 20 | config.action_controller.perform_caching = true 21 | 22 | config.cache_store = :memory_store 23 | config.public_file_server.headers = { 24 | "Cache-Control" => "public, max-age=#{2.days.seconds.to_i}" 25 | } 26 | else 27 | config.action_controller.perform_caching = false 28 | 29 | config.cache_store = :null_store 30 | end 31 | 32 | # Print deprecation notices to the Rails logger. 33 | config.active_support.deprecation = :log 34 | 35 | # Debug mode disables concatenation and preprocessing of assets. 36 | # This option may cause significant delays in view rendering with a large 37 | # number of complex assets. 38 | config.assets.debug = true 39 | 40 | # Suppress logger output for asset requests. 41 | config.assets.quiet = true 42 | 43 | # Raises error for missing translations 44 | # config.action_view.raise_on_missing_translations = true 45 | 46 | # Use an evented file watcher to asynchronously detect changes in source code, 47 | # routes, locales, etc. This feature depends on the listen gem. 48 | config.file_watcher = ActiveSupport::EventedFileUpdateChecker 49 | end 50 | -------------------------------------------------------------------------------- /test/example_app/config/environments/production.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Make javascript_pack_tag lookup digest hash to enable long-term caching 3 | config.x.webpacker[:digesting] = true 4 | 5 | # Settings specified here will take precedence over those in config/application.rb. 6 | 7 | # Code is not reloaded between requests. 8 | config.cache_classes = true 9 | 10 | # Eager load code on boot. This eager loads most of Rails and 11 | # your application in memory, allowing both threaded web servers 12 | # and those relying on copy on write to perform better. 13 | # Rake tasks automatically ignore this option for performance. 14 | config.eager_load = true 15 | 16 | # Full error reports are disabled and caching is turned on. 17 | config.consider_all_requests_local = false 18 | config.action_controller.perform_caching = true 19 | 20 | # Disable serving static files from the `/public` folder by default since 21 | # Apache or NGINX already handles this. 22 | config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present? 23 | 24 | # Compress JavaScripts and CSS. 25 | config.assets.js_compressor = :uglifier 26 | # config.assets.css_compressor = :sass 27 | 28 | # Do not fallback to assets pipeline if a precompiled asset is missed. 29 | config.assets.compile = false 30 | 31 | # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb 32 | 33 | # Enable serving of images, stylesheets, and JavaScripts from an asset server. 34 | # config.action_controller.asset_host = 'http://assets.example.com' 35 | 36 | # Specifies the header that your server uses for sending files. 37 | # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache 38 | # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX 39 | 40 | # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. 41 | # config.force_ssl = true 42 | 43 | # Use the lowest log level to ensure availability of diagnostic information 44 | # when problems arise. 45 | config.log_level = :debug 46 | 47 | # Prepend all log lines with the following tags. 48 | config.log_tags = [ :request_id ] 49 | 50 | # Use a different cache store in production. 51 | # config.cache_store = :mem_cache_store 52 | 53 | # Use a real queuing backend for Active Job (and separate queues per environment) 54 | # config.active_job.queue_adapter = :resque 55 | # config.active_job.queue_name_prefix = "webpacker-react-example_#{Rails.env}" 56 | 57 | # Enable locale fallbacks for I18n (makes lookups for any locale fall back to 58 | # the I18n.default_locale when a translation cannot be found). 59 | config.i18n.fallbacks = true 60 | 61 | # Send deprecation notices to registered listeners. 62 | config.active_support.deprecation = :notify 63 | 64 | # Use default logging formatter so that PID and timestamp are not suppressed. 65 | config.log_formatter = ::Logger::Formatter.new 66 | 67 | # Use a different logger for distributed setups. 68 | # require 'syslog/logger' 69 | # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name') 70 | 71 | if ENV["RAILS_LOG_TO_STDOUT"].present? 72 | logger = ActiveSupport::Logger.new(STDOUT) 73 | logger.formatter = config.log_formatter 74 | config.logger = ActiveSupport::TaggedLogging.new(logger) 75 | end 76 | end 77 | -------------------------------------------------------------------------------- /test/example_app/config/environments/test.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # The test environment is used exclusively to run your application's 5 | # test suite. You never need to work with it otherwise. Remember that 6 | # your test database is "scratch space" for the test suite and is wiped 7 | # and recreated between test runs. Don't rely on the data there! 8 | config.cache_classes = true 9 | 10 | # Do not eager load code on boot. This avoids loading your whole application 11 | # just for the purpose of running a single test. If you are using a tool that 12 | # preloads Rails for running tests, you may have to set it to true. 13 | config.eager_load = false 14 | 15 | # Configure public file server for tests with Cache-Control for performance. 16 | config.public_file_server.enabled = true 17 | config.public_file_server.headers = { 18 | "Cache-Control" => "public, max-age=#{1.hour.seconds.to_i}" 19 | } 20 | 21 | # Show full error reports and disable caching. 22 | config.consider_all_requests_local = true 23 | config.action_controller.perform_caching = false 24 | 25 | # Raise exceptions instead of rendering exception templates. 26 | config.action_dispatch.show_exceptions = false 27 | 28 | # Disable request forgery protection in test environment. 29 | config.action_controller.allow_forgery_protection = false 30 | 31 | # Print deprecation notices to the stderr. 32 | config.active_support.deprecation = :stderr 33 | 34 | # Raises error for missing translations 35 | # config.action_view.raise_on_missing_translations = true 36 | end 37 | -------------------------------------------------------------------------------- /test/example_app/config/initializers/application_controller_renderer.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # ApplicationController.renderer.defaults.merge!( 4 | # http_host: 'example.org', 5 | # https: false 6 | # ) 7 | -------------------------------------------------------------------------------- /test/example_app/config/initializers/assets.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Version of your assets, change this if you want to expire all your assets. 4 | Rails.application.config.assets.version = "1.0" 5 | 6 | # Add additional assets to the asset load path. 7 | # Rails.application.config.assets.paths << Emoji.images_path 8 | # Add Yarn node_modules folder to the asset load path. 9 | Rails.application.config.assets.paths << Rails.root.join("vendor/node_modules") 10 | 11 | # Precompile additional assets. 12 | # application.js, application.css, and all non-JS/CSS in the app/assets 13 | # folder are already added. 14 | # Rails.application.config.assets.precompile += %w( admin.js admin.css ) 15 | -------------------------------------------------------------------------------- /test/example_app/config/initializers/backtrace_silencers.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # You can add backtrace silencers for libraries that you're using but don't wish to see in your backtraces. 4 | # Rails.backtrace_cleaner.add_silencer { |line| line =~ /my_noisy_library/ } 5 | 6 | # You can also remove all the silencers if you're trying to debug a problem that might stem from framework code. 7 | # Rails.backtrace_cleaner.remove_silencers! 8 | -------------------------------------------------------------------------------- /test/example_app/config/initializers/cookies_serializer.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Specify a serializer for the signed and encrypted cookie jars. 4 | # Valid options are :json, :marshal, and :hybrid. 5 | Rails.application.config.action_dispatch.cookies_serializer = :json 6 | -------------------------------------------------------------------------------- /test/example_app/config/initializers/filter_parameter_logging.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Configure sensitive parameters which will be filtered from the log file. 4 | Rails.application.config.filter_parameters += [:password] 5 | -------------------------------------------------------------------------------- /test/example_app/config/initializers/inflections.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new inflection rules using the following format. Inflections 4 | # are locale specific, and you may define rules for as many different 5 | # locales as you wish. All of these examples are active by default: 6 | # ActiveSupport::Inflector.inflections(:en) do |inflect| 7 | # inflect.plural /^(ox)$/i, '\1en' 8 | # inflect.singular /^(ox)en/i, '\1' 9 | # inflect.irregular 'person', 'people' 10 | # inflect.uncountable %w( fish sheep ) 11 | # end 12 | 13 | # These inflection rules are supported but not enabled by default: 14 | # ActiveSupport::Inflector.inflections(:en) do |inflect| 15 | # inflect.acronym 'RESTful' 16 | # end 17 | -------------------------------------------------------------------------------- /test/example_app/config/initializers/mime_types.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new mime types for use in respond_to blocks: 4 | # Mime::Type.register "text/richtext", :rtf 5 | -------------------------------------------------------------------------------- /test/example_app/config/initializers/wrap_parameters.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # This file contains settings for ActionController::ParamsWrapper which 4 | # is enabled by default. 5 | 6 | # Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array. 7 | ActiveSupport.on_load(:action_controller) do 8 | wrap_parameters format: [:json] 9 | end 10 | 11 | # To enable root element in JSON for ActiveRecord objects. 12 | # ActiveSupport.on_load(:active_record) do 13 | # self.include_root_in_json = true 14 | # end 15 | -------------------------------------------------------------------------------- /test/example_app/config/locales/en.yml: -------------------------------------------------------------------------------- 1 | # Files in the config/locales directory are used for internationalization 2 | # and are automatically loaded by Rails. If you want to use locales other 3 | # than English, add the necessary files in this directory. 4 | # 5 | # To use the locales, use `I18n.t`: 6 | # 7 | # I18n.t 'hello' 8 | # 9 | # In views, this is aliased to just `t`: 10 | # 11 | # <%= t('hello') %> 12 | # 13 | # To use a different locale, set it with `I18n.locale`: 14 | # 15 | # I18n.locale = :es 16 | # 17 | # This would use the information in config/locales/es.yml. 18 | # 19 | # The following keys must be escaped otherwise they will not be retrieved by 20 | # the default I18n backend: 21 | # 22 | # true, false, on, off, yes, no 23 | # 24 | # Instead, surround them with single quotes. 25 | # 26 | # en: 27 | # 'true': 'foo' 28 | # 29 | # To learn more, please read the Rails Internationalization guide 30 | # available at http://guides.rubyonrails.org/i18n.html. 31 | 32 | en: 33 | hello: "Hello world" 34 | -------------------------------------------------------------------------------- /test/example_app/config/puma.rb: -------------------------------------------------------------------------------- 1 | # Puma can serve each request in a thread from an internal thread pool. 2 | # The `threads` method setting takes two numbers: a minimum and maximum. 3 | # Any libraries that use thread pools should be configured to match 4 | # the maximum value specified for Puma. Default is set to 5 threads for minimum 5 | # and maximum; this matches the default thread size of Active Record. 6 | # 7 | threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 } 8 | threads threads_count, threads_count 9 | 10 | # Specifies the `port` that Puma will listen on to receive requests; default is 3000. 11 | # 12 | port ENV.fetch("PORT") { 3000 } 13 | 14 | # Specifies the `environment` that Puma will run in. 15 | # 16 | environment ENV.fetch("RAILS_ENV") { "development" } 17 | 18 | # Specifies the number of `workers` to boot in clustered mode. 19 | # Workers are forked webserver processes. If using threads and workers together 20 | # the concurrency of the application would be max `threads` * `workers`. 21 | # Workers do not work on JRuby or Windows (both of which do not support 22 | # processes). 23 | # 24 | # workers ENV.fetch("WEB_CONCURRENCY") { 2 } 25 | 26 | # Use the `preload_app!` method when specifying a `workers` number. 27 | # This directive tells Puma to first boot the application and load code 28 | # before forking the application. This takes advantage of Copy On Write 29 | # process behavior so workers use less memory. If you use this option 30 | # you need to make sure to reconnect any threads in the `on_worker_boot` 31 | # block. 32 | # 33 | # preload_app! 34 | 35 | # If you are preloading your application and using Active Record, it's 36 | # recommended that you close any connections to the database before workers 37 | # are forked to prevent connection leakage. 38 | # 39 | # before_fork do 40 | # ActiveRecord::Base.connection_pool.disconnect! if defined?(ActiveRecord) 41 | # end 42 | 43 | # The code in the `on_worker_boot` will be called if you are using 44 | # clustered mode by specifying a number of `workers`. After each worker 45 | # process is booted, this block will be run. If you are using the `preload_app!` 46 | # option, you will want to use this block to reconnect to any threads 47 | # or connections that may have been created at application boot, as Ruby 48 | # cannot share connections between processes. 49 | # 50 | # on_worker_boot do 51 | # ActiveRecord::Base.establish_connection if defined?(ActiveRecord) 52 | # end 53 | # 54 | 55 | # Allow puma to be restarted by `rails restart` command. 56 | plugin :tmp_restart 57 | -------------------------------------------------------------------------------- /test/example_app/config/routes.rb: -------------------------------------------------------------------------------- 1 | Rails.application.routes.draw do 2 | get "/view", to: "pages#view_component" 3 | get "/view_consecutive", to: "pages#view_consecutive" 4 | get "/controller", to: "pages#controller_component" 5 | 6 | get "/turbolinks/view", to: "turbolinks_pages#view_component" 7 | get "/turbolinks/view_consecutive", to: "turbolinks_pages#view_consecutive" 8 | get "/turbolinks/controller", to: "turbolinks_pages#controller_component" 9 | 10 | get "/two_packs/view_all", to: "two_packs#view_all" 11 | 12 | get "/custom_tag_view", to: "custom_tag#view_component" 13 | get "/custom_tag_controller", to: "custom_tag#controller_component" 14 | 15 | root to: "pages#view_component" 16 | end 17 | -------------------------------------------------------------------------------- /test/example_app/config/secrets.yml: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Your secret key is used for verifying the integrity of signed cookies. 4 | # If you change this key, all old signed cookies will become invalid! 5 | 6 | # Make sure the secret is at least 30 characters and all random, 7 | # no regular words or you'll be exposed to dictionary attacks. 8 | # You can use `rails secret` to generate a secure secret key. 9 | 10 | # Make sure the secrets in this file are kept private 11 | # if you're sharing your code publicly. 12 | 13 | # Shared secrets are available across all environments. 14 | 15 | shared: 16 | api_key: 123 17 | 18 | # Environmental secrets are only available for that specific environment. 19 | 20 | development: 21 | secret_key_base: ed9ddd0ab3bcf6d5e48a1458fdd01ab881b9d81a9aed9721c613b882288a1d4c353183c8af848fd2b6a0144d4363d68ba8d3b1777a60dec6c47d2982859af718 22 | 23 | test: 24 | secret_key_base: 019daa9abf5f3a865af821a074792fd39908d1d53925a97fa1f063af729a8ca6c7b0e086836567139f3f091caa8c4ed1f2393a5deff440240c2e794c7e19b788 25 | 26 | # Do not keep production secrets in the repository, 27 | # instead read values from the environment. 28 | 29 | production: 30 | secret_key_base: <%= ENV["SECRET_KEY_BASE"] %> 31 | -------------------------------------------------------------------------------- /test/example_app/config/spring.rb: -------------------------------------------------------------------------------- 1 | %w( 2 | .ruby-version 3 | .rbenv-vars 4 | tmp/restart.txt 5 | tmp/caching-dev.txt 6 | ).each { |path| Spring.watch(path) } 7 | -------------------------------------------------------------------------------- /test/example_app/config/webpack/development.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = process.env.NODE_ENV || 'development' 2 | 3 | const environment = require('./environment') 4 | 5 | module.exports = environment.toWebpackConfig() 6 | -------------------------------------------------------------------------------- /test/example_app/config/webpack/environment.js: -------------------------------------------------------------------------------- 1 | const { environment } = require('@rails/webpacker') 2 | 3 | module.exports = environment 4 | -------------------------------------------------------------------------------- /test/example_app/config/webpack/production.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = process.env.NODE_ENV || 'production' 2 | 3 | const environment = require('./environment') 4 | 5 | module.exports = environment.toWebpackConfig() 6 | -------------------------------------------------------------------------------- /test/example_app/config/webpack/test.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = process.env.NODE_ENV || 'development' 2 | 3 | const environment = require('./environment') 4 | 5 | module.exports = environment.toWebpackConfig() 6 | -------------------------------------------------------------------------------- /test/example_app/config/webpacker.yml: -------------------------------------------------------------------------------- 1 | # Note: You must restart bin/webpack-dev-server for changes to take effect 2 | 3 | default: &default 4 | source_path: app/javascript 5 | source_entry_path: packs 6 | public_root_path: public 7 | public_output_path: packs 8 | cache_path: tmp/cache/webpacker 9 | check_yarn_integrity: false 10 | webpack_compile_output: false 11 | 12 | # Additional paths webpack should lookup modules 13 | # ['app/assets', 'engine/foo/app/assets'] 14 | resolved_paths: [] 15 | 16 | # Reload manifest.json on all requests so we reload latest compiled packs 17 | cache_manifest: false 18 | 19 | # Extract and emit a css file 20 | extract_css: false 21 | 22 | static_assets_extensions: 23 | - .jpg 24 | - .jpeg 25 | - .png 26 | - .gif 27 | - .tiff 28 | - .ico 29 | - .svg 30 | - .eot 31 | - .otf 32 | - .ttf 33 | - .woff 34 | - .woff2 35 | 36 | extensions: 37 | - .jsx 38 | - .mjs 39 | - .js 40 | - .sass 41 | - .scss 42 | - .css 43 | - .module.sass 44 | - .module.scss 45 | - .module.css 46 | - .png 47 | - .svg 48 | - .gif 49 | - .jpeg 50 | - .jpg 51 | 52 | development: 53 | <<: *default 54 | compile: false 55 | 56 | # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules 57 | check_yarn_integrity: true 58 | 59 | test: 60 | <<: *default 61 | compile: false 62 | 63 | # Compile test packs to a separate directory 64 | public_output_path: packs-test 65 | 66 | production: 67 | <<: *default 68 | 69 | # Production depends on precompilation of packs prior to booting for performance. 70 | compile: false 71 | 72 | # Extract and emit a css file 73 | extract_css: true 74 | 75 | # Cache manifest.json for performance 76 | cache_manifest: true 77 | -------------------------------------------------------------------------------- /test/example_app/lib/assets/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renchap/webpacker-react/174cad7a129083a1d18f20c56774d3b35b402cbc/test/example_app/lib/assets/.keep -------------------------------------------------------------------------------- /test/example_app/lib/tasks/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renchap/webpacker-react/174cad7a129083a1d18f20c56774d3b35b402cbc/test/example_app/lib/tasks/.keep -------------------------------------------------------------------------------- /test/example_app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "dependencies": { 4 | "@babel/preset-react": "^7.0.0", 5 | "@rails/webpacker": "^4.0.7", 6 | "babel-plugin-transform-react-remove-prop-types": "^0.4.24", 7 | "prop-types": "^15.7.2", 8 | "react": "^16.8.6", 9 | "react-dom": "^16.8.6", 10 | "turbolinks": "^5.2.0", 11 | "webpacker-react": "file:../../javascript/webpacker_react-npm-module/dist" 12 | }, 13 | "devDependencies": { 14 | "webpack-dev-server": "^3.7.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /test/example_app/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('postcss-flexbugs-fixes'), 5 | require('postcss-preset-env')({ 6 | autoprefixer: { 7 | flexbox: 'no-2009' 8 | }, 9 | stage: 3 10 | }) 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /test/example_app/public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The page you were looking for doesn't exist (404) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

The page you were looking for doesn't exist.

62 |

You may have mistyped the address or the page may have moved.

63 |
64 |

If you are the application owner check the logs for more information.

65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /test/example_app/public/422.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The change you wanted was rejected (422) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

The change you wanted was rejected.

62 |

Maybe you tried to change something you didn't have access to.

63 |
64 |

If you are the application owner check the logs for more information.

65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /test/example_app/public/500.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | We're sorry, but something went wrong (500) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

We're sorry, but something went wrong.

62 |
63 |

If you are the application owner check the logs for more information.

64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /test/example_app/public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renchap/webpacker-react/174cad7a129083a1d18f20c56774d3b35b402cbc/test/example_app/public/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /test/example_app/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renchap/webpacker-react/174cad7a129083a1d18f20c56774d3b35b402cbc/test/example_app/public/apple-touch-icon.png -------------------------------------------------------------------------------- /test/example_app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renchap/webpacker-react/174cad7a129083a1d18f20c56774d3b35b402cbc/test/example_app/public/favicon.ico -------------------------------------------------------------------------------- /test/example_app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | -------------------------------------------------------------------------------- /test/example_app/vendor/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/renchap/webpacker-react/174cad7a129083a1d18f20c56774d3b35b402cbc/test/example_app/vendor/.keep -------------------------------------------------------------------------------- /test/integration/custom_tag_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | class CustomTagTest < ActionDispatch::IntegrationTest 4 | test "renders from a view with a custom tag" do 5 | require_js 6 | 7 | visit "/custom_tag_view" 8 | assert_selector "span[data-react-class]", text: "Hello, I am a component rendered from a view in a span!" 9 | end 10 | 11 | test "renders from a controller with a custom tag" do 12 | require_js 13 | 14 | visit "/custom_tag_controller" 15 | assert_selector "span[data-react-class]", text: "Hello, I am a component rendered from a controller in a span!" 16 | end 17 | end 18 | -------------------------------------------------------------------------------- /test/integration/renderer_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | class RendererTest < ActionDispatch::IntegrationTest 4 | def url_prefix 5 | "" 6 | end 7 | 8 | test "renders from a view" do 9 | get url_prefix + "/view" 10 | assert_select "div[data-react-class]", true 11 | end 12 | 13 | test "renders from a controller" do 14 | get url_prefix + "/controller" 15 | assert_select "div[data-react-class]", true 16 | end 17 | 18 | test "component mounts" do 19 | require_js 20 | 21 | visit url_prefix + "/view" 22 | assert page.has_content? "Hello, I am a component rendered from a view!" 23 | end 24 | 25 | test "consecutive components mounts" do 26 | require_js 27 | 28 | visit url_prefix + "/view_consecutive" 29 | 30 | assert page.has_content? "component 1" 31 | assert page.has_content? "component 2" 32 | end 33 | end 34 | -------------------------------------------------------------------------------- /test/integration/renderer_with_turbolinks_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | require_relative "./renderer_test" 3 | 4 | class RendererWithTurbolinksTest < RendererTest 5 | def url_prefix 6 | "/turbolinks" 7 | end 8 | 9 | test "Turbolinks visits" do 10 | require_js 11 | 12 | visit url_prefix + "/view_consecutive" 13 | 14 | assert page.has_content? "component 1" 15 | assert page.has_content? "component 2" 16 | 17 | click_link "Show 3" 18 | 19 | assert page.has_content? "component 3" 20 | 21 | click_link "Show 2" 22 | 23 | assert page.has_content? "component 1" 24 | assert page.has_content? "component 2" 25 | assert page.has_no_content? "component 3" 26 | end 27 | end 28 | -------------------------------------------------------------------------------- /test/integration/renderer_with_two_packs_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | require "irb" 3 | 4 | class RendererWithTwoPacksTest < ActionDispatch::IntegrationTest 5 | test "component mounts" do 6 | require_js 7 | 8 | visit "/two_packs/view_all" 9 | assert_js_error(/Following components are already registered: HelloReact/) 10 | assert page.has_content? "Hello, I am a component rendered from a view!" 11 | assert page.has_content? "Component A" 12 | assert page.has_content? "Component B" 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /test/rails_helper.rb: -------------------------------------------------------------------------------- 1 | # Configure Rails Environment 2 | ENV["RAILS_ENV"] = "test" 3 | 4 | require File.expand_path("../example_app/config/environment.rb", __FILE__) 5 | require "rails/test_help" 6 | require "rails/generators" 7 | require "pathname" 8 | require "minitest/mock" 9 | 10 | CACHE_PATH = Pathname.new File.expand_path("../example_app/tmp/cache", __FILE__) 11 | 12 | Rails.backtrace_cleaner.remove_silencers! 13 | -------------------------------------------------------------------------------- /test/test_helper.rb: -------------------------------------------------------------------------------- 1 | $LOAD_PATH.unshift File.expand_path("../../lib", __FILE__) 2 | 3 | require "rails_helper" 4 | require "webpacker/react" 5 | require "minitest/autorun" 6 | require "capybara/rails" 7 | 8 | require "selenium/webdriver" 9 | 10 | Capybara.register_driver :headless_chrome do |app| 11 | capabilities = Selenium::WebDriver::Remote::Capabilities.chrome( 12 | chromeOptions: { args: %w(headless disable-gpu) } 13 | ) 14 | 15 | Capybara::Selenium::Driver.new app, 16 | browser: :chrome, 17 | desired_capabilities: capabilities 18 | end 19 | 20 | Capybara.javascript_driver = :headless_chrome 21 | 22 | class ActionDispatch::IntegrationTest 23 | class DriverJSError < StandardError; end 24 | include Capybara::DSL 25 | 26 | def setup 27 | @ignored_js_errors = [] 28 | end 29 | 30 | def teardown 31 | if Capybara.current_driver == :headless_chrome 32 | errors = current_js_errors.select do |message| 33 | # If the message matches any ones ignored, skip it 34 | puts "===" 35 | puts @ignored_js_errors.inspect 36 | puts message 37 | !@ignored_js_errors.any? { |e| !(message =~ e) } 38 | end 39 | 40 | assert errors.empty?, "Got JS errors: \n#{errors.join("\n\n")}" 41 | end 42 | 43 | Capybara.current_driver = nil 44 | end 45 | 46 | def require_js 47 | Capybara.current_driver = Capybara.javascript_driver 48 | end 49 | 50 | def current_js_errors 51 | page.driver.browser.manage.logs.get(:browser) 52 | .select { |e| e.level == "SEVERE" && message.present? } 53 | .map(&:message) 54 | .to_a 55 | end 56 | 57 | def assert_js_error(error_match) 58 | error = current_js_errors.find { |e| e. =~ error_match } 59 | 60 | if error 61 | @ignored_js_errors << error 62 | else 63 | puts error.to_s 64 | assert false, "Expected a JS error matching: #{error_match.to_s}" 65 | end 66 | end 67 | end 68 | -------------------------------------------------------------------------------- /test/webpacker/react/component_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | module Webpacker 4 | module React 5 | class ComponentTest < Minitest::Test 6 | include ERB::Util 7 | 8 | def setup 9 | @component = { 10 | name: "Hello", 11 | props: { 12 | name: "React" 13 | } 14 | } 15 | end 16 | 17 | def test_it_outputs_a_div_element 18 | expected_html = <<-HTML.squish 19 |
21 | HTML 22 | html = Webpacker::React::Component.new(@component[:name]) 23 | .render(@component[:props]) 24 | 25 | assert_equal html, expected_html 26 | end 27 | 28 | def test_it_outputs_div_elements_in_series 29 | expected_html = "
" * 2 30 | 31 | html = Webpacker::React::Component.new(@component[:name]) 32 | .render(@component[:props]) 33 | 34 | html += Webpacker::React::Component.new(@component[:name]) 35 | .render(@component[:props]) 36 | 37 | assert_equal expected_html, html 38 | end 39 | 40 | def test_it_accepts_html_options 41 | html = Webpacker::React::Component.new(@component[:name]) 42 | .render( 43 | @component[:props], 44 | class: "class", 45 | id: "id" 46 | ) 47 | 48 | assert( 49 | html.include?('class="class"') && html.include?('id="id"'), 50 | "it includes HTML options" 51 | ) 52 | end 53 | 54 | def test_it_accepts_tag_option 55 | html = Webpacker::React::Component.new(@component[:name]) 56 | .render( 57 | @component[:props], 58 | tag: "span" 59 | ) 60 | 61 | assert( 62 | html.include?(" 1.13" 29 | spec.add_development_dependency "rake", "~> 12.0" 30 | spec.add_development_dependency "minitest", "~> 5.0" 31 | spec.add_development_dependency "capybara" 32 | spec.add_development_dependency "selenium-webdriver" 33 | end 34 | --------------------------------------------------------------------------------