webpacker 5.4.4 → 6.0.0.beta

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

@@ -1,73 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// 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/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** Evergreen browsers require these. **/
-import 'core-js/es/reflect';
-import 'core-js/proposals/reflect-metadata';
-
-
-/**
- * Required to support Web Animations `@angular/animation`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-
-/***************************************************************************************************
- * Zone JS is required by Angular itself.
- */
-import 'zone.js/dist/zone';
-// import 'zone.js/dist/long-stack-trace-zone' // async stack traces with zone.js
-
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
-
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-/**
- * Need to import at least one locale-data with intl.
- */
-// import 'intl/locale-data/jsonp/en';

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

@@ -1,7 +0,0 @@
-// 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/coffee/hello_coffee.coffee

@@ -1,4 +0,0 @@
-# Run this example by adding <%= javascript_pack_tag 'hello_coffee' %> to the head of your layout file,
-# like app/views/layouts/application.html.erb.
-
-console.log 'Hello world from coffeescript'

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

@@ -1,55 +0,0 @@
-module Main exposing (..)
-
-import Browser
-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", style "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 (Maybe {}) Model Message
-main =
-  Browser.element
-    {
-      init = always init,
-      view = view,
-      update = update,
-      subscriptions = subscriptions
-    }

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

@@ -1,16 +0,0 @@
-// 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.init({
-    node: target
-  })
-})

data/lib/install/examples/erb/hello_erb.js.erb

@@ -1,6 +0,0 @@
-// Run this example by adding <%%= javascript_pack_tag 'hello_erb' %> to the head of your layout file,
-// like app/views/layouts/application.html.erb. Don't forget to uncomment erb tag after adding it to your layout file.
-
-<% name = 'Erb' %>
-
-console.log('Hello world from <%= name %>')

data/lib/install/examples/react/babel.config.js

@@ -1,99 +0,0 @@
-module.exports = function(api) {
-  var validEnv = ['development', 'test', 'production']
-  var currentEnv = api.env()
-  var isDevelopmentEnv = api.env('development')
-  var isProductionEnv = api.env('production')
-  var isTestEnv = api.env('test')
-
-  if (!validEnv.includes(currentEnv)) {
-    throw new Error(
-      'Please specify a valid `NODE_ENV` or ' +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: ' +
-        JSON.stringify(currentEnv) +
-        '.'
-    )
-  }
-
-  return {
-    presets: [
-      isTestEnv && [
-        '@babel/preset-env',
-        {
-          targets: {
-            node: 'current'
-          },
-          modules: 'commonjs'
-        },
-        '@babel/preset-react'
-      ],
-      (isProductionEnv || isDevelopmentEnv) && [
-        '@babel/preset-env',
-        {
-          forceAllTransforms: true,
-          useBuiltIns: 'entry',
-          corejs: 3,
-          modules: false,
-          exclude: ['transform-typeof-symbol']
-        }
-      ],
-      [
-        '@babel/preset-react',
-        {
-          development: isDevelopmentEnv || isTestEnv,
-          useBuiltIns: true
-        }
-      ]
-    ].filter(Boolean),
-    plugins: [
-      'babel-plugin-macros',
-      '@babel/plugin-syntax-dynamic-import',
-      isTestEnv && 'babel-plugin-dynamic-import-node',
-      '@babel/plugin-transform-destructuring',
-      [
-        '@babel/plugin-proposal-class-properties',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-object-rest-spread',
-        {
-          useBuiltIns: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-private-methods',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-private-property-in-object',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-transform-runtime',
-        {
-          helpers: false,
-          regenerator: true,
-          corejs: false
-        }
-      ],
-      [
-        '@babel/plugin-transform-regenerator',
-        {
-          async: false
-        }
-      ],
-      isProductionEnv && [
-        'babel-plugin-transform-react-remove-prop-types',
-        {
-          removeImport: true
-        }
-      ]
-    ].filter(Boolean)
-  }
-}

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

@@ -1,26 +0,0 @@
-// 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/react/tsconfig.json

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

data/lib/install/examples/stimulus/application.js

@@ -1 +0,0 @@
-import "controllers"

data/lib/install/examples/stimulus/controllers/hello_controller.js

@@ -1,18 +0,0 @@
-// Visit The Stimulus Handbook for more details 
-// https://stimulusjs.org/handbook/introduction
-// 
-// This example controller works with specially annotated HTML like:
-//
-// <div data-controller="hello">
-//   <h1 data-target="hello.output"></h1>
-// </div>
-
-import { Controller } from "stimulus"
-
-export default class extends Controller {
-  static targets = [ "output" ]
-
-  connect() {
-    this.outputTarget.textContent = 'Hello, Stimulus!'
-  }
-}

data/lib/install/examples/stimulus/controllers/index.js

@@ -1,9 +0,0 @@
-// Load all the controllers within this directory and all subdirectories. 
-// Controller files must be named *_controller.js.
-
-import { Application } from "stimulus"
-import { definitionsFromContext } from "stimulus/webpack-helpers"
-
-const application = Application.start()
-const context = require.context("controllers", true, /_controller\.js$/)
-application.load(definitionsFromContext(context))

data/lib/install/examples/svelte/app.svelte

@@ -1,11 +0,0 @@
-<script>
-  export let name;
-</script>
-
-<style>
-  h1 {
-    color: #FF3E00;
-  }
-</style>
-
-<h1>Hello {name}!</h1>

data/lib/install/examples/svelte/hello_svelte.js

@@ -1,20 +0,0 @@
-/* eslint no-console: 0 */
-// Run this example by adding <%= javascript_pack_tag 'hello_svelte' %> (and
-// <%= stylesheet_pack_tag 'hello_svelte' %> 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 Svelte!</div> at the bottom of the page.
-
-import App from '../app.svelte'
-
-document.addEventListener('DOMContentLoaded', () => {
-  const app = new App({
-    target: document.body,
-    props: {
-      name: 'Svelte'
-    }
-  });
-
-  window.app = app;
-})
-

data/lib/install/examples/typescript/hello_typescript.ts

@@ -1,4 +0,0 @@
-// Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
-// like app/views/layouts/application.html.erb.
-
-console.log('Hello world from typescript');

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

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

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

@@ -1,22 +0,0 @@
-<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

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

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

data/lib/install/loaders/elm.js

@@ -1,25 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

data/lib/install/loaders/vue.js

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

data/lib/install/react.rb

@@ -1,18 +0,0 @@
-require "webpacker/configuration"
-require "fileutils"
-
-replace_babel_config = FileUtils.compare_file(Rails.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

@@ -1,12 +0,0 @@
-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

@@ -1,29 +0,0 @@
-require "webpacker/configuration"
-
-say "Copying svelte loader to config/webpack/loaders"
-copy_file "#{__dir__}/loaders/svelte.js", Rails.root.join("config/webpack/loaders/svelte.js").to_s
-
-say "Adding svelte loader to config/webpack/environment.js"
-insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "const svelte = require('./loaders/svelte')\n",
-  after: /require\(('|")@rails\/webpacker\1\);?\n/
-
-insert_into_file Rails.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