shakapacker 7.0.0.rc.0 → 7.0.0.rc.2

data/lib/shakapacker/deprecation_helper.rb

@@ -1,3 +1,5 @@
+require "thor"
+
 module Shakapacker
   DEPRECATION_GUIDE_URL = "https://github.com/shakacode/shakapacker/docs/v7_upgrade.md"
   DEPRECATION_MESSAGE = <<~MSG
@@ -9,6 +11,7 @@ module Shakapacker
     For more information about this process, check:
     #{DEPRECATION_GUIDE_URL}
   MSG
+  SHELL = Thor::Shell::Color.new
 
   def get_config_file_path_with_backward_compatibility(config_path)
     if config_path.to_s.end_with?("shakapacker.yml") && !File.exist?(config_path)
@@ -70,11 +73,7 @@ module Shakapacker
   end
 
   def puts_deprecation_message(message)
-    puts <<~MSG
-      \e[33m
-      #{message}
-      \e[0m
-    MSG
+    SHELL.say "\n#{message}\n", :yellow
   end
 
   def puts_rake_deprecation_message(webpacker_task_name)

data/lib/shakapacker/version.rb

@@ -1,4 +1,4 @@
 module Shakapacker
   # Change the version in package.json too, please!
-  VERSION = "7.0.0.rc.0".freeze
+  VERSION = "7.0.0.rc.2".freeze
 end

data/lib/tasks/shakapacker/check_binstubs.rake

@@ -1,23 +1,27 @@
 namespace :shakapacker do
   desc "Verifies that bin/shakapacker is present"
   task :check_binstubs do
-    if File.exist?(Rails.root.join("bin/shakapacker"))
-      exit
-    elsif File.exist?(Rails.root.join("bin/webpacker"))
+    verify_file_existance("bin/shakapacker", "bin/webpacker")
+    verify_file_existance("bin/shakapacker-dev-server", "bin/webpacker-dev-server")
+  end
+end
+
+def verify_file_existance(main_file, alternative_file)
+  unless File.exist?(Rails.root.join(main_file))
+    if File.exist?(Rails.root.join(alternative_file))
       Shakapacker.puts_deprecation_message(
         Shakapacker.short_deprecation_message(
-          "bin/webpacker",
-          "bin/shakapacker"
+          alternative_file,
+          main_file
         )
       )
-      exit
     else
       puts <<~MSG
-        Could't find shakapacker binstubs!
+        Couldn't find shakapacker binstubs!
         Possible solutions:
-         - Ensure you have run `rails shakapacker:install`.
-         - Run `rails shakapacker:binstubs` if you have already installed shakapacker.
-         - Ensure the `bin` directory and `bin/shakapacker` are not included in .gitignore.
+        - Ensure you have run `rails shakapacker:install`.
+        - Run `rails shakapacker:binstubs` if you have already installed shakapacker.
+        - Ensure the `bin` directory, `bin/shakapacker`, and `bin/shakapacker-dev-server` are not included in .gitignore.
       MSG
       exit!
     end

data/lib/tasks/shakapacker/compile.rake

@@ -5,12 +5,7 @@ namespace :shakapacker do
   task compile: ["shakapacker:verify_install", :environment] do
     Shakapacker.with_node_env(ENV.fetch("NODE_ENV", "production")) do
       Shakapacker.ensure_log_goes_to_stdout do
-        if Shakapacker.compile
-          # Successful compilation!
-        else
-          # Failed compilation
-          exit!
-        end
+        exit! unless Shakapacker.compile
       end
     end
   end

data/package/__tests__/index-bc.js

@@ -0,0 +1,22 @@
+const index = require('../index')
+
+describe('index', () => {
+  describe('webpackConfig', () => {
+    test('is a global object', () => {
+      const { webpackConfig, globalMutableWebpackConfig } = require('../index')
+
+      expect(webpackConfig).toBe(globalMutableWebpackConfig)
+    })
+
+    test('Shows warning with deprecation message', () => {
+      const consoleSpy = jest.spyOn(console, "warn");
+  
+      const { webpackConfig } = require('../index')
+      
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringMatching(/The 'webpackConfig' is deprecated/)
+      )
+      consoleSpy.mockRestore();
+    })
+  })
+})

data/package/environments/__tests__/base-bc.js

@@ -65,9 +65,9 @@ describe('Base config', () => {
     })
 
     test('should return output', () => {
-      expect(baseConfig.output.filename).toEqual('js/[name].js')
+      expect(baseConfig.output.filename).toEqual('js/[name]-[contenthash].js')
       expect(baseConfig.output.chunkFilename).toEqual(
-        'js/[name].chunk.js'
+        'js/[name]-[contenthash].chunk.js'
       )
     })
 

data/package/environments/__tests__/base.js

@@ -65,9 +65,9 @@ describe('Base config', () => {
     })
 
     test('should return output', () => {
-      expect(baseConfig.output.filename).toEqual('js/[name].js')
+      expect(baseConfig.output.filename).toEqual('js/[name]-[contenthash].js')
       expect(baseConfig.output.chunkFilename).toEqual(
-        'js/[name].chunk.js'
+        'js/[name]-[contenthash].chunk.js'
       )
     })
 

data/package/environments/__tests__/development.js

@@ -0,0 +1,53 @@
+/* global test expect, describe, afterAll, beforeEach */
+
+const { chdirTestApp, resetEnv } = require('../../utils/helpers')
+const rootPath = process.cwd()
+chdirTestApp()
+
+describe('Development specific config', () => {
+  beforeEach(() => {
+    jest.resetModules()
+    resetEnv()
+    process.env['NODE_ENV'] = 'development'
+  })
+  afterAll(() => process.chdir(rootPath))
+
+  describe('with config.useContentHash = true', () => {
+    test('sets filename to use contentHash', () => {
+      const config = require("../../config");
+      config.useContentHash = true
+      const environmnetConfig = require('../development')
+
+      expect(environmnetConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(environmnetConfig.output.chunkFilename).toEqual(
+        'js/[name]-[contenthash].chunk.js'
+      )
+    })
+  })
+
+  describe('with config.useContentHash = false', () => {
+    test('sets filename without using contentHash', () => {
+      const config = require("../../config");
+      config.useContentHash = false
+      const environmnetConfig = require('../development')
+
+      expect(environmnetConfig.output.filename).toEqual('js/[name].js')
+      expect(environmnetConfig.output.chunkFilename).toEqual(
+        'js/[name].chunk.js'
+      )
+    })
+  })
+
+  describe('with unset config.useContentHash', () => {
+    test('sets filename without using contentHash', () => {
+      const config = require("../../config");
+      delete config.useContentHash
+      const environmnetConfig = require('../development')
+
+      expect(environmnetConfig.output.filename).toEqual('js/[name].js')
+      expect(environmnetConfig.output.chunkFilename).toEqual(
+        'js/[name].chunk.js'
+      )
+    })
+  })
+})

data/package/environments/__tests__/production.js

@@ -0,0 +1,53 @@
+/* global test expect, describe, afterAll, beforeEach */
+
+const { chdirTestApp, resetEnv } = require('../../utils/helpers')
+const rootPath = process.cwd()
+chdirTestApp()
+
+describe('Production specific config', () => {
+  beforeEach(() => {
+    jest.resetModules()
+    resetEnv()
+    process.env['NODE_ENV'] = 'production'
+  })
+  afterAll(() => process.chdir(rootPath))
+
+  describe('with config.useContentHash = true', () => {
+    test('sets filename to use contentHash', () => {
+      const config = require("../../config");
+      config.useContentHash = true
+      const environmnetConfig = require('../production')
+
+      expect(environmnetConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(environmnetConfig.output.chunkFilename).toEqual(
+        'js/[name]-[contenthash].chunk.js'
+      )
+    })
+  })
+
+  describe('with config.useContentHash = false', () => {
+    test('sets filename to use contentHash', () => {
+      const config = require("../../config");
+      config.useContentHash = false
+      const environmnetConfig = require('../production')
+
+      expect(environmnetConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(environmnetConfig.output.chunkFilename).toEqual(
+        'js/[name]-[contenthash].chunk.js'
+      )
+    })
+  })
+
+  describe('with unset config.useContentHash', () => {
+    test('sets filename to use contentHash', () => {
+      const config = require("../../config");
+      delete config.useContentHash
+      const environmnetConfig = require('../production')
+
+      expect(environmnetConfig.output.filename).toEqual('js/[name]-[contenthash].js')
+      expect(environmnetConfig.output.chunkFilename).toEqual(
+        'js/[name]-[contenthash].chunk.js'
+      )
+    })
+  })
+})

data/package/environments/base.js

@@ -7,8 +7,8 @@ const { sync: globSync } = require('glob')
 const WebpackAssetsManifest = require('webpack-assets-manifest')
 const webpack = require('webpack')
 const rules = require('../rules')
-const { isProduction } = require('../env')
 const config = require('../config')
+const { isProduction } = require('../env')
 const { moduleExists } = require('../utils/helpers')
 
 const getEntryObject = () => {
@@ -68,7 +68,7 @@ const getPlugins = () => {
   ]
 
   if (moduleExists('css-loader') && moduleExists('mini-css-extract-plugin')) {
-    const hash = isProduction ? '-[contenthash:8]' : ''
+    const hash = isProduction || config.useContentHash ? '-[contenthash:8]' : ''
     const MiniCssExtractPlugin = require('mini-css-extract-plugin')
     plugins.push(
       new MiniCssExtractPlugin({
@@ -87,7 +87,8 @@ const getPlugins = () => {
 
 // Don't use contentHash except for production for performance
 // https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
-const hash = isProduction ? '-[contenthash]' : ''
+const hash = isProduction || config.useContentHash ? '-[contenthash]' : ''
+
 module.exports = {
   mode: 'production',
   output: {

data/package/environments/production.js

@@ -6,6 +6,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const baseConfig = require('./base')
 const { moduleExists } = require('../utils/helpers')
+const config = require('../config')
 
 const getPlugins = () => {
   const plugins = []
@@ -76,4 +77,12 @@ const productionConfig = {
   }
 }
 
+if (config.useContentHash === true) {
+  // eslint-disable-next-line no-console
+  console.warn(`⚠️ WARNING
+Setting 'useContentHash' to 'false' in the production environment (specified by NODE_ENV environment variable) is not allowed!
+Content hashes get added to the filenames regardless of setting useContentHash in 'shakapacker.yml' to false.
+`)
+}
+
 module.exports = merge(baseConfig, productionConfig)

data/package/index.js

@@ -25,7 +25,7 @@ const generateWebpackConfig = () => {
   return immutable
 }
 
-module.exports = {
+const shakapackerObject = {
   config, // shakapacker.yml
   devServer,
   generateWebpackConfig,
@@ -38,3 +38,26 @@ module.exports = {
   inliningCss,
   ...webpackMerge
 }
+
+// For backward compatibility
+const shakapackerProxyHandler = {
+  get(target, prop) {
+    if (prop === 'webpackConfig') {
+      // eslint-disable-next-line no-console
+      console.warn(`⚠️
+DEPRECATION NOTICE:
+The 'webpackConfig' is deprecated and will be removed in a future version.
+Please use 'globalMutableWebpackConfig' instead, or use
+'generateWebpackConfig()' to avoid unwanted config mutation across the app.
+
+For more information, see version 7 upgrade documentation at:
+https://github.com/shakacode/shakapacker/blob/master/docs/v7_upgrade.md
+`)
+      return globalMutableWebpackConfig()
+    }
+
+    return target[prop]
+  }
+}
+
+module.exports = new Proxy(shakapackerObject, shakapackerProxyHandler)

data/package/utils/helpers.js

@@ -2,7 +2,7 @@ const isArray = (value) => Array.isArray(value)
 const isBoolean = (str) => /^true/.test(str) || /^false/.test(str)
 const chdirTestApp = () => {
   try {
-    return process.chdir('spec/test_app')
+    return process.chdir('spec/shakapacker/test_app')
   } catch (e) {
     return null
   }

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shakapacker",
-  "version": "7.0.0-rc.0",
+  "version": "7.0.0-rc.2",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [

data/spec/dummy/.browserslistrc

@@ -0,0 +1 @@
+defaults

data/spec/dummy/.gitignore

@@ -0,0 +1,20 @@
+# Ignore the default SQLite database.
+/db/*.sqlite3
+/db/*.sqlite3-journal
+/db/*.sqlite3-*
+
+# Ignore all logfiles and tempfiles.
+/log
+/tmp
+
+/storage
+
+/public/assets
+.byebug_history
+
+# Ignore master key for decrypting credentials and more.
+/config/master.key
+
+/public/packs
+/public/packs-test
+/node_modules

data/spec/dummy/.prettierrc.yaml

@@ -0,0 +1,4 @@
+trailingComma: none
+tabWidth: 2
+semi: false
+singleQuote: true

data/spec/dummy/Gemfile

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+git_source(:github) { |repo| "https://github.com/#{repo}.git" }
+
+# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
+gem "rails", "~> 6.1"
+# Use sqlite3 as the database for Active Record
+gem "sqlite3", "~> 1.4"
+# Use Puma as the app server
+gem "puma", "~> 4.1"
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem "jbuilder", "~> 2.7"
+# Use Redis adapter to run Action Cable in production
+# gem 'redis', '~> 4.0'
+# Use Active Model has_secure_password
+# gem 'bcrypt', '~> 3.1.7'
+
+# Use Active Storage variant
+# gem 'image_processing', '~> 1.2'
+
+# Reduces boot times through caching; required in config/boot.rb
+gem "bootsnap", ">= 1.4.2", require: false
+
+group :development, :test, :production do
+  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
+  gem "byebug", platforms: [:mri, :mingw, :x64_mingw]
+end
+
+group :development, :test do
+  gem "rspec-rails", "~> 6.0.0"
+end
+
+group :development do
+  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
+  gem "web-console", ">= 3.3.0"
+  gem "listen", "~> 3.2"
+  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
+  gem "spring"
+  gem "spring-watcher-listen", "~> 2.0.0"
+end
+
+group :test do
+  # Adds support for Capybara system testing and selenium driver
+  # There is an important fix in 3.39.1.
+  gem "capybara", "~> 3.39.1"
+  # gem 'capybara-webkit'
+  gem "selenium-webdriver", ">= 4.9"
+  # Easy installation and use of web drivers to run system tests with browsers
+  gem "webdrivers"
+end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem "shakapacker", path: "../.."
+gem "react_on_rails", "13.3.3"
+
+gem "net-smtp", "~> 0.3.3"
+
+# Psych 4+ comes with breakibg changes in Ruby 3.1.0. Though the issue are
+# addressed in Rails 7. So remove this the next line in Rails 7.
+gem "psych", "< 4"

data/spec/dummy/Procfile.dev

@@ -0,0 +1,5 @@
+# Procfile for development using HMR
+# You can run these commands in separate shells
+rails: bundle exec rails s -p 3000
+wp-client: bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

data/spec/dummy/Procfile.dev-static

@@ -0,0 +1,9 @@
+# You can run these commands in separate shells
+web: rails s -p 3000
+
+# Next line runs a watch process with webpack to compile the changed files.
+# When making frequent changes to client side assets, you will prefer building webpack assets
+# upon saving rather than when you refresh your browser page.
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
+webpack: sh -c 'rm -rf public/packs/* || true && bin/shakapacker -w'

data/spec/dummy/README.md

@@ -0,0 +1 @@
+This dummy project is based on [React on Rails Demo With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) project.

data/spec/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative "config/application"
+
+Rails.application.load_tasks

data/spec/dummy/app/assets/config/manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../images
+//= link_directory ../stylesheets .css

data/spec/dummy/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/spec/dummy/app/channels/application_cable/channel.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

data/spec/dummy/app/channels/application_cable/connection.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+  end
+end

data/spec/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,2 @@
+class ApplicationController < ActionController::Base
+end

data/spec/dummy/app/controllers/hello_world_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class HelloWorldController < ApplicationController
+  layout "hello_world"
+
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end

data/spec/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/spec/dummy/app/javascript/Globals.d.ts

@@ -0,0 +1,3 @@
+declare module "*.module.css";
+declare module "*.module.scss";
+declare module "*.svg";

data/spec/dummy/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css

@@ -0,0 +1,25 @@
+.bright {
+    color: green;
+    font-weight: bold;
+}
+
+.logo {
+    height: 10vmin;
+    pointer-events: none;
+}
+
+
+@media (prefers-reduced-motion: no-preference) {
+    .logo {
+        animation: logo-spin infinite 20s linear;
+    }
+}
+
+@keyframes logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}

data/spec/dummy/app/javascript/bundles/HelloWorld/components/HelloWorld.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { useState, useEffect } from 'react'
+import type { FunctionComponent } from 'react'
+
+import style from './HelloWorld.module.css'
+import logo from './logo.svg'
+
+export interface Props {
+  readonly name: string
+}
+
+// Note, you need to declare the `FunctionComponent` type so that it complies
+// with `ReactOnRails.register` type.
+const HelloWorld: FunctionComponent<Props> = (props: Props) => {
+  const [name, setName] = useState(props.name)
+
+  useEffect(() => {
+    console.log(
+      '%c%s%c%s',
+      'color: green; background-color: lightgreen; font-weight: bold;',
+      'ShakaCode is hiring!',
+      'color: green; background-color: lightgreen; font-weight: normal;',
+      'Check out our open positions: https://www.shakacode.com/career/',
+    );
+  }, [])
+
+  return (
+    <>
+      <img src={logo} className={style.logo} alt="logo" />
+      <h3>Hello, {name || 'World'}!</h3>
+      <hr />
+      <form>
+        <label className={style.bright} htmlFor="name">
+          Say hello to:{' '}
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+        </label>
+      </form>
+    </>
+  )
+}
+
+export default HelloWorld

data/spec/dummy/app/javascript/bundles/HelloWorld/components/HelloWorldServer.tsx

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld'
+// This could be specialized for server rendering
+// For example, if using React-Router, we'd have the SSR setup here.
+
+export default HelloWorld

data/spec/dummy/app/javascript/bundles/HelloWorld/components/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

data/spec/dummy/app/javascript/packs/application.js

@@ -0,0 +1,17 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
+console.log('Hello World from Webpacker')

data/spec/dummy/app/javascript/packs/hello-world-bundle.ts

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails'
+
+import HelloWorld from '../bundles/HelloWorld/components/HelloWorld'
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld
+})