webpacker-legacy 0.1.0

data/lib/install/elm.rb

@@ -0,0 +1,33 @@
+# encoding: UTF-8
+
+require "webpacker/configuration"
+
+current_dir = File.dirname(__FILE__)
+
+puts "Copying elm loader to config/webpack/loaders"
+copy_file "#{current_dir}/config/loaders/installers/elm.js",
+          "config/webpack/loaders/elm.js"
+
+puts "Copying elm example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{current_dir}/examples/elm/Main.elm", "#{Webpacker::Configuration.entry_path}/Main.elm"
+
+puts "Copying elm app file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{current_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,15 @@
+/* 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)
+})

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,36 @@
+# encoding: UTF-8
+
+require "webpacker/configuration"
+
+
+current_dir = File.dirname(__FILE__)
+
+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 "#{current_dir}/examples/react/.babelrc", ".babelrc"
+end
+
+puts "Copying react loader to config/webpack/loaders"
+copy_file "#{current_dir}/config/loaders/installers/react.js", "config/webpack/loaders/react.js"
+
+puts "Copying react example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{current_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,44 @@
+# encoding: UTF-8
+
+# Install webpacker
+current_dir = File.dirname(__FILE__)
+
+copy_file "#{current_dir}/config/webpacker.yml", "config/webpacker.yml"
+
+puts "Copying webpack core config and loaders"
+directory "#{current_dir}/config/webpack", "config/webpack"
+directory "#{current_dir}/config/loaders/core", "config/webpack/loaders"
+
+puts "Copying .postcssrc.yml to app root directory"
+copy_file "#{current_dir}/config/.postcssrc.yml", ".postcssrc.yml"
+
+puts "Copying .babelrc to app root directory"
+copy_file "#{current_dir}/config/.babelrc", ".babelrc"
+
+puts "Creating javascript app source directory"
+directory "#{current_dir}/javascript", "#{Webpacker::Configuration.source}"
+
+puts "Copying binstubs"
+directory "#{current_dir}/bin", "bin"
+
+chmod "bin", 0755 & ~File.umask, verbose: false
+
+if File.exists?(".gitignore")
+  append_to_file ".gitignore", <<-EOS
+/public/packs
+/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"
+
+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,19 @@
+# encoding: UTF-8
+
+require "webpacker/configuration"
+
+current_dir = File.dirname(__FILE__)
+
+puts "Copying vue loader to config/webpack/loaders"
+copy_file "#{current_dir}/config/loaders/installers/vue.js", "config/webpack/loaders/vue.js"
+
+puts "Copying the example entry file to #{Webpacker::Configuration.entry_path}"
+copy_file "#{current_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 "#{current_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 🎉"

data/lib/tasks/installers.rake

@@ -0,0 +1,22 @@
+INSTALLERS = {
+  Angular: :angular,
+  Elm: :elm,
+  React: :react,
+  Vue: :vue
+}.freeze
+
+namespace :webpacker do
+  namespace :install do
+    INSTALLERS.each do |name, task_name|
+      desc "Install everything needed for #{name}"
+      task task_name => ["webpacker:verify_install"] do
+        template = File.expand_path("../install/#{task_name}.rb", File.dirname(__FILE__))
+        if Rails::VERSION::MAJOR >= 5
+          exec "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{template}"
+        else
+          exec "rake rails:template LOCATION=#{template}"
+        end
+      end
+    end
+  end
+end

data/lib/tasks/webpacker.rake

@@ -0,0 +1,19 @@
+tasks = {
+  "webpacker:install"                 => "Installs and setup webpack with yarn",
+  "webpacker:compile"                 => "Compiles webpack bundles based on environment",
+  "webpacker:check_node"              => "Verifies if Node.js is installed",
+  "webpacker:check_yarn"              => "Verifies if yarn is installed",
+  "webpacker:check_webpack_binstubs"  => "Verifies that bin/webpack & bin/webpack-dev-server are present",
+  "webpacker:verify_install"          => "Verifies if webpacker is installed",
+  "webpacker:yarn_install"            => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn",
+  "webpacker:install:react"           => "Installs and setup example React component",
+  "webpacker:install:vue"             => "Installs and setup example Vue component",
+  "webpacker:install:angular"         => "Installs and setup example Angular component",
+  "webpacker:install:elm"             => "Installs and setup example Elm component"
+}.freeze
+
+desc "Lists all available tasks in webpacker"
+task :webpacker do
+  puts "Available webpacker tasks are:"
+  tasks.each { |task, message| puts task.ljust(30) + message }
+end

data/lib/tasks/webpacker/check_node.rake

@@ -0,0 +1,20 @@
+namespace :webpacker do
+  desc "Verifies if Node.js is installed"
+  task :check_node do
+    begin
+      node_version = `node -v`
+      node_version = `nodejs -v` if node_version.blank?
+      required_node_version = "6.4"
+
+      raise Errno::ENOENT if node_version.blank?
+      if Gem::Version.new(node_version.strip.tr("v", "")) < Gem::Version.new(required_node_version)
+        puts "Webpacker requires Node.js >= v#{required_node_version} and you are using #{node_version}"
+        puts "Please upgrade Node.js https://nodejs.org/en/download/"
+        puts "Exiting!" && exit!
+      end
+    rescue Errno::ENOENT
+      puts "Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/"
+      puts "Exiting!" && exit!
+    end
+  end
+end