jetpacker 0.1.0 → 0.2.0

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

@@ -0,0 +1,72 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
+// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
+// 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', () => {
+  const app = new Vue({
+    render: h => h(App)
+  }).$mount()
+  document.body.appendChild(app.$el)
+
+  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 }
+//   })
+// })
+//
+//
+//
+// If the project is using turbolinks, install 'vue-turbolinks':
+//
+// yarn add vue-turbolinks
+//
+// Then uncomment the code block below:
+//
+// import TurbolinksAdapter from 'vue-turbolinks'
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// Vue.use(TurbolinksAdapter)
+//
+// document.addEventListener('turbolinks:load', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: () => {
+//       return {
+//         message: "Can you say hello?"
+//       }
+//     },
+//     components: { App }
+//   })
+// })

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

@@ -0,0 +1,18 @@
+/* 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/lib/install/loaders/coffee.js

@@ -0,0 +1,6 @@
+module.exports = {
+  test: /\.coffee(\.erb)?$/,
+  use: [{
+    loader: 'coffee-loader'
+  }]
+}

data/lib/install/loaders/elm.js

@@ -0,0 +1,25 @@
+const { resolve } = require('path')
+
+const isProduction = process.env.NODE_ENV === 'production'
+const isDevelopment = process.env.NODE_ENV === 'development'
+const elmSource = resolve(process.cwd())
+const elmBinary = `${elmSource}/node_modules/.bin/elm`
+
+const options = { 
+  cwd: elmSource, 
+  pathToElm: elmBinary, 
+  optimize: isProduction, 
+  verbose: isDevelopment, 
+  debug: isDevelopment  
+}
+
+const elmWebpackLoader = {
+  loader: 'elm-webpack-loader',
+  options: options
+}
+
+module.exports = {
+  test: /\.elm(\.erb)?$/,
+  exclude: [/elm-stuff/, /node_modules/],
+  use: isProduction ? [elmWebpackLoader] : [{ loader: 'elm-hot-webpack-loader' }, elmWebpackLoader]
+}

data/lib/install/loaders/erb.js

@@ -0,0 +1,11 @@
+module.exports = {
+  test: /\.erb$/,
+  enforce: 'pre',
+  exclude: /node_modules/,
+  use: [{
+    loader: 'rails-erb-loader',
+    options: {
+      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
+    }
+  }]
+}

data/lib/install/loaders/svelte.js

@@ -0,0 +1,9 @@
+module.exports = {
+  test: /\.svelte$/,
+  use: [{
+    loader: 'svelte-loader',
+    options: {
+      hotReload: true
+    }
+  }],
+}

data/lib/install/loaders/typescript.js

@@ -0,0 +1,11 @@
+const PnpWebpackPlugin = require('pnp-webpack-plugin')
+
+module.exports = {
+  test: /\.tsx?(\.erb)?$/,
+  use: [
+    {
+      loader: 'ts-loader',
+      options: PnpWebpackPlugin.tsLoaderOptions()
+    }
+  ]
+}

data/lib/install/loaders/vue.js

@@ -0,0 +1,6 @@
+module.exports = {
+  test: /\.vue(\.erb)?$/,
+  use: [{
+    loader: 'vue-loader'
+  }]
+}

data/lib/install/react.rb

@@ -0,0 +1,18 @@
+require "webpacker/configuration"
+require "fileutils"
+
+replace_babel_config = FileUtils.compare_file(Jets.root.join("babel.config.js"), "#{__dir__}/config/babel.config.js")
+
+say "Copying babel.config.js to app root directory"
+copy_file "#{__dir__}/examples/react/babel.config.js", "babel.config.js", force: replace_babel_config
+
+say "Copying react example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/react/hello_react.jsx", "#{Webpacker.config.source_entry_path}/hello_react.jsx"
+
+say "Updating webpack paths to include .jsx file extension"
+insert_into_file Webpacker.config.config_path, "- .jsx\n".indent(4), after: /\s+extensions:\n/
+
+say "Installing all react dependencies"
+run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types"
+
+say "Webpacker now supports react.js 🎉", :green

data/lib/install/stimulus.rb

@@ -0,0 +1,12 @@
+say "Appending Stimulus setup code to #{Webpacker.config.source_entry_path}/application.js"
+append_to_file "#{Webpacker.config.source_entry_path}/application.js" do
+  "\n" + open("#{__dir__}/examples/stimulus/application.js").read
+end
+
+say "Creating controllers directory"
+directory "#{__dir__}/examples/stimulus/controllers", "#{Webpacker.config.source_path}/controllers"
+
+say "Installing all Stimulus dependencies"
+run "yarn add stimulus"
+
+say "Webpacker now supports Stimulus.js 🎉", :green

data/lib/install/svelte.rb

@@ -0,0 +1,29 @@
+require "webpacker/configuration"
+
+say "Copying svelte loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/svelte.js", Jets.root.join("config/webpack/loaders/svelte.js").to_s
+
+say "Adding svelte loader to config/webpack/environment.js"
+insert_into_file Jets.root.join("config/webpack/environment.js").to_s,
+  "const svelte = require('./loaders/svelte')\n",
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
+
+insert_into_file Jets.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.prepend('svelte', svelte)\n",
+  before: "module.exports"
+
+say "Copying Svelte example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/svelte/hello_svelte.js",
+  "#{Webpacker.config.source_entry_path}/hello_svelte.js"
+
+say "Copying Svelte app file to #{Webpacker.config.source_path}"
+copy_file "#{__dir__}/examples/svelte/app.svelte",
+  "#{Webpacker.config.source_path}/app.svelte"
+
+say "Installing all Svelte dependencies"
+run "yarn add svelte svelte-loader"
+
+say "Updating webpack paths to include .svelte file extension"
+insert_into_file Webpacker.config.config_path, "- .svelte\n".indent(4), after: /\s+extensions:\n/
+
+say "Webpacker now supports Svelte 🎉", :green

data/lib/install/template.rb

@@ -0,0 +1,55 @@
+# Install Webpacker
+copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
+
+puts "Copying webpack core config"
+directory "#{__dir__}/config/webpack", "config/webpack"
+
+say "Copying postcss.config.js to app root directory"
+copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"
+
+say "Copying babel.config.js to app root directory"
+copy_file "#{__dir__}/config/babel.config.js", "babel.config.js"
+
+say "Copying .browserslistrc to app root directory"
+copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"
+
+if Dir.exists?(Webpacker.config.source_path)
+  say "The JavaScript app source directory already exists"
+else
+  say "Creating JavaScript app source directory"
+  directory "#{__dir__}/javascript", Webpacker.config.source_path
+end
+
+apply "#{__dir__}/binstubs.rb"
+
+if File.exists?(".gitignore")
+  append_to_file ".gitignore" do
+    "\n"                   +
+    "/public/packs\n"      +
+    "/public/packs-test\n" +
+    "/node_modules\n"      +
+    "/yarn-error.log\n"    +
+    "yarn-debug.log*\n"    +
+    ".yarn-integrity\n"
+  end
+end
+
+if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
+  say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
+  run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
+else
+  say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
+  run "yarn add @rails/webpacker@next"
+end
+
+say "Installing dev server for live reloading"
+run "yarn add --dev webpack-dev-server"
+
+if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
+  say "You need to allow webpack-dev-server host as allowed origin for connect-src.", :yellow
+  say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow
+  say "config/initializers/content_security_policy.rb with a snippet like this:", :yellow
+  say "policy.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Jets.env.development?", :yellow
+end
+
+say "Webpacker successfully installed 🎉 🍰", :green

data/lib/install/typescript.rb

@@ -0,0 +1,46 @@
+require "webpacker/configuration"
+
+additional_packages = ""
+example_source = "typescript"
+
+# Additional configuration is required for React projects
+package_json = Jets.root.join("package.json")
+if File.exist?(package_json)
+  package = JSON.parse(File.read(package_json))
+  package["dependencies"] ||= {}
+
+  if package["dependencies"].keys.include?("react")
+    additional_packages = "@types/react @types/react-dom"
+    example_source = "react"
+  end
+end
+
+say "Copying typescript loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/typescript.js", Jets.root.join("config/webpack/loaders/typescript.js").to_s
+
+say "Adding typescript loader to config/webpack/environment.js"
+insert_into_file Jets.root.join("config/webpack/environment.js").to_s,
+  "const typescript =  require('./loaders/typescript')\n",
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
+
+insert_into_file Jets.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.prepend('typescript', typescript)\n",
+  before: "module.exports"
+
+say "Copying tsconfig.json to the Rails root directory for typescript"
+copy_file "#{__dir__}/examples/#{example_source}/tsconfig.json", "tsconfig.json"
+
+say "Updating webpack paths to include .ts file extension"
+insert_into_file Webpacker.config.config_path, "- .ts\n".indent(4), after: /\s+extensions:\n/
+
+say "Updating webpack paths to include .tsx file extension"
+insert_into_file Webpacker.config.config_path, "- .tsx\n".indent(4), after: /\s+extensions:\n/
+
+say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/typescript/hello_typescript.ts",
+  "#{Webpacker.config.source_entry_path}/hello_typescript.ts"
+
+say "Installing all typescript dependencies"
+run "yarn add typescript ts-loader #{additional_packages}"
+
+say "Webpacker now supports typescript 🎉", :green

data/lib/install/vue.rb

@@ -0,0 +1,49 @@
+require "webpacker/configuration"
+
+say "Copying vue loader to config/webpack/loaders"
+copy_file "#{__dir__}/loaders/vue.js", Jets.root.join("config/webpack/loaders/vue.js").to_s
+
+say "Adding vue loader plugin to config/webpack/environment.js"
+insert_into_file Jets.root.join("config/webpack/environment.js").to_s,
+  "const { VueLoaderPlugin } = require('vue-loader')\n",
+  after: /require\(('|")@rails\/webpacker\1\);?\n/
+
+insert_into_file Jets.root.join("config/webpack/environment.js").to_s,
+  "environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())\n",
+  before: "module.exports"
+
+say "Adding vue loader to config/webpack/environment.js"
+insert_into_file Jets.root.join("config/webpack/environment.js").to_s,
+  "const vue = require('./loaders/vue')\n",
+  after: "require('vue-loader')\n"
+
+insert_into_file Jets.root.join("config/webpack/environment.js").to_s,
+  "environment.loaders.prepend('vue', vue)\n",
+  before: "module.exports"
+
+say "Updating webpack paths to include .vue file extension"
+insert_into_file Webpacker.config.config_path, "- .vue\n".indent(4), after: /\s+extensions:\n/
+
+say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/vue/hello_vue.js",
+  "#{Webpacker.config.source_entry_path}/hello_vue.js"
+
+say "Copying Vue app file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/examples/vue/app.vue",
+  "#{Webpacker.config.source_path}/app.vue"
+
+say "Installing all Vue dependencies"
+run "yarn add vue vue-loader vue-template-compiler"
+
+if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
+  say "You need to enable unsafe-eval rule.", :yellow
+  say "This can be done in Rails 5.2+ for development environment in the CSP initializer", :yellow
+  say "config/initializers/content_security_policy.rb with a snippet like this:", :yellow
+  say "if Jets.env.development?", :yellow
+  say "  policy.script_src :self, :https, :unsafe_eval", :yellow
+  say "else", :yellow
+  say "  policy.script_src :self, :https", :yellow
+  say "end", :yellow
+end
+
+say "Webpacker now supports Vue.js 🎉", :green

data/lib/jetpacker/version.rb

@@ -1,3 +1,4 @@
+# Separate version from Webpacker version for the jetpacker gem
 module Jetpacker
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/tasks/installers.rake

@@ -0,0 +1,37 @@
+installers = {
+  "Angular": :angular,
+  "Elm": :elm,
+  "React": :react,
+  "Vue": :vue,
+  "Erb": :erb,
+  "Coffee": :coffee,
+  "Typescript": :typescript,
+  "Svelte": :svelte,
+  "Stimulus": :stimulus
+}.freeze
+
+dependencies = {
+  "Angular": [:typescript]
+}
+
+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
+        require "rails/generators"
+        require "rails/generators/rails/app/app_generator"
+        generator = Rails::Generators::AppGenerator.new [Jets.root], {force: ENV['FORCE']}, destination_root: Jets.root
+
+        template = File.expand_path("../install/#{task_name}.rb", __dir__)
+        generator.apply template, verbose: false
+
+        dependencies[name] ||= []
+        dependencies[name].each do |dependency|
+          dependency_template = File.expand_path("../install/#{dependency}.rb", __dir__)
+          generator.apply dependency_template, verbose: false
+        end
+      end
+    end
+  end
+end

data/lib/tasks/webpacker.rake

@@ -0,0 +1,28 @@
+tasks = {
+  "webpacker:info"                    => "Provides information on Webpacker's environment",
+  "webpacker:install"                 => "Installs and setup webpack with Yarn",
+  "webpacker:compile"                 => "Compiles webpack bundles based on environment",
+  "webpacker:clean"                   => "Remove old compiled webpacks",
+  "webpacker:clobber"                 => "Removes the webpack compiled output directory",
+  "webpacker:check_node"              => "Verifies if Node.js is installed",
+  "webpacker:check_yarn"              => "Verifies if Yarn is installed",
+  "webpacker:check_binstubs"          => "Verifies that webpack & webpack-dev-server are present",
+  "webpacker:binstubs"                => "Installs Webpacker binstubs in this application",
+  "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",
+  "webpacker:install:svelte"          => "Installs and setup example Svelte component",
+  "webpacker:install:stimulus"        => "Installs and setup example Stimulus component",
+  "webpacker:install:erb"             => "Installs Erb loader with an example",
+  "webpacker:install:coffee"          => "Installs CoffeeScript loader with an example",
+  "webpacker:install:typescript"      => "Installs Typescript loader with an example"
+}.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