webpacker-react-on-rails 2.0

data/lib/install/config/webpack/test.js

@@ -0,0 +1,6 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {})

data/lib/install/config/webpacker.yml

@@ -0,0 +1,47 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_output_path: packs
+
+  compile: false
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  extensions:
+    - .coffee
+    - .erb
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+
+  dev_server:
+    host: localhost
+    port: 8080
+    https: false
+    hot: false
+
+test:
+  <<: *default
+
+  public_output_path: packs-test
+  # Compile webpack assets during lookup when running tests
+  compile: true
+
+production:
+  <<: *default

data/lib/install/elm.rb

@@ -0,0 +1,29 @@
+require "webpacker/configuration"
+
+puts "Copying elm loader to config/webpack/loaders"
+copy_file "#{__dir__}/config/loaders/installers/elm.js",
+          "config/webpack/loaders/elm.js"
+
+puts "Copying elm example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/elm/Main.elm", "#{Webpacker::Configuration.entry_path}/Main.elm"
+
+puts "Copying elm app file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/elm/hello_elm.js",
+          "#{Webpacker::Configuration.entry_path}/hello_elm.js"
+
+puts "Installing all elm dependencies"
+run "yarn add elm elm-webpack-loader"
+run "yarn add --dev elm-hot-loader"
+run "yarn run elm package install -- --yes"
+
+puts "Updating Webpack paths to include Elm file extension"
+insert_into_file Webpacker::Configuration.file_path, "    - .elm\n", after: /extensions:\n/
+
+puts "Updating elm source location"
+source_path = File.join(Webpacker::Configuration.source, Webpacker::Configuration.fetch(:source_entry_path))
+gsub_file "elm-package.json", /\"\.\"\n/, %("#{source_path}"\n)
+
+puts "Updating .gitignore to include elm-stuff folder"
+insert_into_file ".gitignore", "/elm-stuff\n", before: "/node_modules\n"
+
+puts "Webpacker now supports elm 🎉"

data/lib/install/examples/angular/hello_angular.js

@@ -0,0 +1,7 @@
+// Run this Angular example by adding the following HTML markup to your view:
+//
+// <hello-angular>Loading...</hello-angular>
+//
+// <%= javascript_pack_tag 'hello_angular' %>
+
+require('../hello_angular')

data/lib/install/examples/angular/hello_angular/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hello-angular',
+  template: `<h1>Hello {{name}}</h1>`
+})
+export class AppComponent {
+  name = 'Angular!';
+}

data/lib/install/examples/angular/hello_angular/app/app.module.ts

@@ -0,0 +1,16 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

data/lib/install/examples/angular/hello_angular/index.ts

@@ -0,0 +1,6 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

data/lib/install/examples/angular/hello_angular/polyfills.ts

@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';

data/lib/install/examples/angular/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "module": "es6",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "target": "es5"
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "node_modules",
+    "vendor",
+    "public"
+  ],
+  "compileOnSave": false
+}

data/lib/install/examples/elm/Main.elm

@@ -0,0 +1,54 @@
+module Main exposing (..)
+
+import Html exposing (Html, h1, text)
+import Html.Attributes exposing (style)
+
+-- MODEL
+
+type alias Model =
+  {
+  }
+
+-- INIT
+
+init : (Model, Cmd Message)
+init =
+  (Model, Cmd.none)
+
+-- VIEW
+
+view : Model -> Html Message
+view model =
+  -- The inline style is being used for example purposes in order to keep this example simple and
+  -- avoid loading additional resources. Use a proper stylesheet when building your own app.
+  h1 [style [("display", "flex"), ("justify-content", "center")]]
+     [text "Hello Elm!"]
+
+-- MESSAGE
+
+type Message
+  = None
+
+-- UPDATE
+
+update : Message -> Model -> (Model, Cmd Message)
+update message model =
+  (model, Cmd.none)
+
+-- SUBSCRIPTIONS
+
+subscriptions : Model -> Sub Message
+subscriptions model =
+  Sub.none
+
+-- MAIN
+
+main : Program Never Model Message
+main =
+  Html.program
+    {
+      init = init,
+      view = view,
+      update = update,
+      subscriptions = subscriptions
+    }

data/lib/install/examples/elm/hello_elm.js

@@ -0,0 +1,11 @@
+// Run this example by adding <%= javascript_pack_tag "hello_elm" %> to the head of your layout
+// file, like app/views/layouts/application.html.erb. It will render "Hello Elm!" within the page.
+
+import Elm from './Main'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const target = document.createElement('div')
+
+  document.body.appendChild(target)
+  Elm.Main.embed(target)
+})

data/lib/install/examples/react/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["env", { "modules": false } ],
+    "react"
+  ]
+}

data/lib/install/examples/react/hello_react.jsx

@@ -0,0 +1,26 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

data/lib/install/examples/vue/app.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      message: "Hello Vue!"
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

data/lib/install/examples/vue/hello_vue.js

@@ -0,0 +1,43 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> and
+// <%= stylesheet_pack_tag 'hello_vue' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Vue</div> at the bottom of the page.
+
+import Vue from 'vue'
+import App from './app.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.body.appendChild(document.createElement('hello'))
+  const app = new Vue(App).$mount('hello')
+
+  console.log(app)
+})
+
+
+// The above code uses Vue without the compiler, which means you cannot
+// use Vue to target elements in your existing html templates. You would
+// need to always use single file components.
+// To be able to target elements in your existing html/erb templates,
+// comment out the above code and uncomment the below
+// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
+// Then add this markup to your html template:
+//
+// <div id='hello'>
+//   {{message}}
+//   <app></app>
+// </div>
+
+
+// import Vue from 'vue/dist/vue.esm'
+// import App from './app.vue'
+//
+// document.addEventListener('DOMContentLoaded', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: {
+//       message: "Can you say hello?"
+//     },
+//     components: { App }
+//   })
+// })

data/lib/install/javascript/packs/application.js

@@ -0,0 +1,10 @@
+/* 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
+
+console.log('Hello World from Webpacker')

data/lib/install/react.rb

@@ -0,0 +1,31 @@
+require "webpacker/configuration"
+
+babelrc = Rails.root.join(".babelrc")
+
+if File.exist?(babelrc)
+  react_babelrc = JSON.parse(File.read(babelrc))
+  react_babelrc["presets"] ||= []
+
+  unless react_babelrc["presets"].include?("react")
+    react_babelrc["presets"].push("react")
+    puts "Copying react preset to your .babelrc file"
+
+    File.open(babelrc, "w") do |f|
+      f.puts JSON.pretty_generate(react_babelrc)
+    end
+  end
+else
+  puts "Copying .babelrc to app root directory"
+  copy_file "#{__dir__}/examples/react/.babelrc", ".babelrc"
+end
+
+puts "Copying react loader to config/webpack/loaders"
+copy_file "#{__dir__}/config/loaders/installers/react.js", "config/webpack/loaders/react.js"
+
+puts "Copying react example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker::Configuration.entry_path}/hello_react.jsx"
+
+puts "Installing all react dependencies"
+run "yarn add react react-dom babel-preset-react prop-types"
+
+puts "Webpacker now supports react.js 🎉"

data/lib/install/template.rb

@@ -0,0 +1,42 @@
+# Install webpacker
+copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
+
+puts "Copying webpack core config and loaders"
+directory "#{__dir__}/config/webpack", "config/webpack"
+directory "#{__dir__}/config/loaders/core", "config/webpack/loaders"
+
+puts "Copying .postcssrc.yml to app root directory"
+copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
+
+puts "Copying .babelrc to app root directory"
+copy_file "#{__dir__}/config/.babelrc", ".babelrc"
+
+puts "Creating javascript app source directory"
+directory "#{__dir__}/javascript", "#{Webpacker::Configuration.source}"
+
+puts "Copying binstubs"
+directory "#{__dir__}/bin", "bin"
+
+chmod "bin", 0755 & ~File.umask, verbose: false
+
+if File.exists?(".gitignore")
+  append_to_file ".gitignore", <<-EOS
+/public/packs
+/public/packs-test
+/node_modules
+EOS
+end
+
+puts "Installing all JavaScript dependencies"
+run "yarn add webpack webpack-merge js-yaml path-complete-extname " \
+"webpack-manifest-plugin babel-loader@7.x coffee-loader coffee-script " \
+"babel-core babel-preset-env babel-polyfill compression-webpack-plugin rails-erb-loader glob " \
+"extract-text-webpack-plugin node-sass file-loader sass-loader css-loader style-loader " \
+"postcss-loader postcss-cssnext postcss-smart-import resolve-url-loader " \
+"babel-plugin-syntax-dynamic-import babel-plugin-transform-class-properties " \
+"babel-plugin-transform-object-rest-spread"
+
+puts "Installing dev server for live reloading"
+run "yarn add --dev webpack-dev-server"
+
+puts "Webpacker successfully installed 🎉 🍰"

data/lib/install/vue.rb

@@ -0,0 +1,15 @@
+require "webpacker/configuration"
+
+puts "Copying vue loader to config/webpack/loaders"
+copy_file "#{__dir__}/config/loaders/installers/vue.js", "config/webpack/loaders/vue.js"
+
+puts "Copying the example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/vue/hello_vue.js", "#{Webpacker::Configuration.entry_path}/hello_vue.js"
+
+puts "Copying vue app file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{__dir__}/examples/vue/app.vue", "#{Webpacker::Configuration.entry_path}/app.vue"
+
+puts "Installing all vue dependencies"
+run "yarn add vue vue-loader vue-template-compiler"
+
+puts "Webpacker now supports vue.js 🎉"