webpacker-jets 3.2.100

data/docs/deployment.md

@@ -0,0 +1,74 @@
+# Deployment
+
+
+Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`. 
+If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`. Remember to set NODE_ENV environment variable to production during deployment or when running the rake task.
+
+The `javascript_pack_tag` and `stylesheet_pack_tag` helper method will automatically insert the correct HTML tag for compiled pack. Just like the asset pipeline does it.
+
+By default the output will look like this in different environments:
+
+```html
+  <!-- In development mode with webpack-dev-server -->
+  <script src="http://localhost:8080/calendar-0bd141f6d9360cf4a7f5.js"></script>
+  <link rel="stylesheet" media="screen" href="http://localhost:8080/calendar-dc02976b5f94b507e3b6.css">
+  <!-- In production or development mode -->
+  <script src="/packs/calendar-0bd141f6d9360cf4a7f5.js"></script>
+  <link rel="stylesheet" media="screen" href="/packs/calendar-dc02976b5f94b507e3b6.css">
+```
+
+
+## Heroku
+
+Heroku installs Yarn and node by default if you deploy a Rails app with
+Webpacker so all you would need to do:
+
+```bash
+heroku create shiny-webpacker-app
+heroku addons:create heroku-postgresql:hobby-dev
+git push heroku master
+```
+
+
+## Nginx
+
+Webpacker doesn't serve anything in production. You’re expected to configure your web server to serve files in public/ directly.
+
+Some servers support sending precompressed versions of files with the `.gz` extension when they're available. For example, nginx offers a `gzip_static` directive.
+
+Here's a sample nginx site config for a Rails app using Webpacker:
+
+```nginx
+upstream app {
+  # ...
+}
+
+server {
+  server_name www.example.com;
+  root /path/to/app/public;
+
+  location @app {
+    proxy_pass http://app;
+    proxy_redirect off;
+
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+
+  location / {
+    try_files $uri @app;
+  }
+
+  location ^~ /packs/ {
+    gzip_static on;
+    expires max;
+  }
+}
+```
+
+## CDN
+
+Webpacker out-of-the-box provides CDN support using your Rails app `config.action_controller.asset_host` setting. If you already have [CDN](http://guides.rubyonrails.org/asset_pipeline.html#cdns) added in your Rails app
+you don't need to do anything extra for Webpacker, it just works.

data/docs/docker.md

@@ -0,0 +1,49 @@
+# Docker
+
+To setup webpacker with a dockerized Rails application is trivial.
+
+First, add a new service for webpacker in docker-compose.yml:
+
+```Dockerfile
+version: '3'
+services:
+  webpacker:
+    build: .
+    env_file:
+      - '.env.docker'
+    command: bundle exec webpack-dev-server
+    volumes:
+      - .:/webpacker-example-app
+    ports:
+      - '3035:3035'
+```
+
+add nodejs and yarn as dependencies in Dockerfile,
+
+```dockerfile
+FROM ruby:2.4.1
+RUN apt-get update -qq
+
+RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
+RUN curl -sL https://deb.nodesource.com/setup_8.x | bash
+RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
+
+RUN apt-get install -y nodejs
+RUN apt-get update && apt-get install yarn
+
+# Rest of the commands....
+```
+
+and create an env file to load environment variables from:
+
+```env
+NODE_ENV=development
+RAILS_ENV=development
+WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
+```
+
+Lastly, rebuild your container:
+
+```bash
+docker-compose up --build
+```

data/docs/env.md

@@ -0,0 +1,65 @@
+# Environment variables
+
+
+Environment variables are supported out of the box in Webpacker. For example if
+you run the webpack dev server like so:
+```
+FOO=hello BAR=world ./bin/webpack-dev-server
+```
+
+You can then reference these variables in your JavaScript app code with
+`process.env`:
+
+```js
+console.log(process.env.FOO) // Compiles to console.log("hello")
+```
+
+You may want to store configuration in environment variables via `.env` files,
+similar to the [dotenv Ruby gem](https://github.com/bkeepers/dotenv).
+
+In development, if you use [Foreman](http://ddollar.github.io/foreman) or [Invoker](http://invoker.codemancers.com)
+to launch the webpack server, both of these tools have basic support for a
+`.env` file (Invoker also supports `.env.local`), so no further configuration
+is needed.
+
+However, if you run the webpack server without Foreman/Invoker, or if you
+want more control over what `.env` files to load, you can use the
+[dotenv npm package](https://github.com/motdotla/dotenv). Here is what you could
+do to support a "Ruby-like" dotenv:
+
+```
+yarn add dotenv
+```
+
+```javascript
+// config/webpack/environment.js
+
+...
+const { environment } = require('@rails/webpacker')
+const webpack = require('webpack')
+const dotenv = require('dotenv')
+
+const dotenvFiles = [
+  `.env.${process.env.NODE_ENV}.local`,
+  '.env.local',
+  `.env.${process.env.NODE_ENV}`,
+  '.env'
+]
+dotenvFiles.forEach((dotenvFile) => {
+  dotenv.config({ path: dotenvFile, silent: true })
+})
+
+environment.plugins.set('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
+
+module.exports = environment
+```
+
+**Warning:** using Foreman/Invoker and npm dotenv at the same time can result in
+confusing behavior, in that Foreman/Invoker variables take precedence over
+npm dotenv variables.
+
+If you'd like to pass custom variables to the on demand compiler, use `Webpacker::Compiler.env` attribute.
+
+```rb
+Webpacker::Compiler.env['FRONTEND_API_KEY'] = 'your_secret_key'
+```

data/docs/es6.md

@@ -0,0 +1,53 @@
+# ES6
+
+
+## Babel
+
+Webpacker ships with [babel](https://babeljs.io/) - a JavaScript compiler so
+you can use next generation JavaScript, today. The Webpacker installer sets up a
+standard `.babelrc` file in your app root, which will work great in most cases
+because of [babel-env-preset](https://github.com/babel/babel-preset-env).
+
+Following ES6/7 features are supported out of the box:
+
+* Async/await.
+* Object Rest/Spread Properties.
+* Exponentiation Operator.
+* Dynamic import() - useful for route level code-splitting
+* Class Fields and Static Properties.
+
+We have also included [babel polyfill](https://babeljs.io/docs/usage/polyfill/)
+that includes a custom regenerator runtime and core-js.
+
+Don't forget to import `babel-polyfill` in your main entry point like so:
+
+```js
+import "babel-polyfill"
+```
+
+
+## Module import() vs require()
+
+While you are free to use `require()` and `module.exports`, we encourage you
+to use `import` and `export` instead since it reads and looks much better.
+
+```js
+import Button from 'react-bootstrap/lib/Button'
+
+// or
+import { Button } from 'react-bootstrap'
+
+class Foo {
+  // code...
+}
+
+export default Foo
+import Foo from './foo'
+```
+
+You can also use named export and import
+
+```js
+export const foo = () => console.log('hello world')
+import { foo } from './foo'
+```

data/docs/folder-structure.md

@@ -0,0 +1,66 @@
+# Folder Structure
+
+
+## Packs a.k.a webpack entries
+
+"Packs" is a special directory made only for webpack entry files so don't put anything
+here that you don't want to link in your views.
+
+
+## Source
+
+You can put your app source under `app/javascript` folder or whatever you have configured
+in `config/webpacker.yml`.
+
+
+## Example
+
+Let's say you're building a calendar app. Your JS app structure could look like this:
+
+```js
+// app/javascript/packs/calendar.js
+
+import 'calendar'
+```
+
+```
+app/javascript/calendar/index.js // gets loaded by import 'calendar'
+app/javascript/calendar/components/grid.jsx
+app/javascript/calendar/styles/grid.sass
+app/javascript/calendar/models/month.js
+```
+
+```erb
+<%# app/views/layouts/application.html.erb %>
+
+<%= javascript_pack_tag 'calendar' %>
+<%= stylesheet_pack_tag 'calendar' %>
+```
+
+But it could also look a million other ways.
+
+
+## Namespacing
+
+You can also namespace your packs using directories similar to a Rails app.
+
+```
+app/javascript/packs/admin/orders.js
+app/javascript/packs/shop/orders.js
+```
+
+and reference them in your views like this:
+
+```erb
+<%# app/views/admin/orders/index.html.erb %>
+
+<%= javascript_pack_tag 'admin/orders' %>
+```
+
+and
+
+```erb
+<%# app/views/shop/orders/index.html.erb %>
+
+<%= javascript_pack_tag 'shop/orders' %>
+```

data/docs/misc.md

@@ -0,0 +1,23 @@
+# How-Tos
+
+
+## Ignoring swap files
+
+If you are using vim or emacs and want to ignore certain files you can add `ignore-loader`:
+
+```
+yarn add ignore-loader
+```
+
+and add `ignore-loader` to `config/webpack/environment.js`
+
+```js
+// ignores vue~ swap files
+const { environment } = require('@rails/webpacker')
+environment.loaders.set('ignore', {
+  test:  /.vue~$/,
+  loader: 'ignore-loader'
+})
+```
+
+And now all files with `.vue~` will be ignored by the webpack compiler.

data/docs/props.md

@@ -0,0 +1,223 @@
+# Props
+
+
+## React
+
+If you need more advanced React-integration, like server rendering, redux, or react-router, see [shakacode/react_on_rails](https://github.com/shakacode/react_on_rails), [react-rails](https://github.com/reactjs/react-rails), and [webpacker-react](https://github.com/renchap/webpacker-react).
+
+If you're not concerned with view helpers to pass props or server rendering, can do it yourself:
+
+```erb
+<%# views/layouts/application.html.erb %>
+
+<%= content_tag :div,
+  id: "hello-react",
+  data: {
+    message: 'Hello!',
+    name: 'David'
+}.to_json do %>
+<% end %>
+```
+
+```js
+// app/javascript/packs/hello_react.js
+
+const Hello = props => (
+  <div className='react-app-wrapper'>
+    <img src={clockIcon} alt="clock" />
+    <h5 className='hello-react'>
+      {props.message} {props.name}!
+    </h5>
+  </div>
+)
+
+// Render component with data
+document.addEventListener('DOMContentLoaded', () => {
+  const node = document.getElementById('hello-react')
+  const data = JSON.parse(node.getAttribute('data'))
+
+  ReactDOM.render(<Hello {...data} />, node)
+})
+```
+
+
+## Vue
+
+Add the data as attributes in the element you are going to use (or any other element for that matter).
+
+```erb
+<%= content_tag :div,
+  id: "hello-vue",
+  data: {
+    message: "Hello!",
+    name: "David"
+  }.to_json do %>
+<% end %>
+```
+
+This should produce the following HTML:
+
+```html
+<div id="hello-vue" data="{&quot;message&quot;:&quot;Hello!&quot;,&quot;name&quot;:&quot;David&quot;}"></div>
+```
+
+Now, modify your Vue app to expect the properties.
+
+```html
+<template>
+  <div id="app">
+    <p>{{test}}{{message}}{{name}}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    // A child component needs to explicitly declare
+    // the props it expects to receive using the props option
+    // See https://vuejs.org/v2/guide/components.html#Props
+    props: ["message","name"],
+    data: function () {
+      return {
+        test: 'This will display: '
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
+
+```
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+  // Get the properties BEFORE the app is instantiated
+  const node = document.getElementById('hello-vue')
+  const props = JSON.parse(node.getAttribute('data'))
+
+  // Render component with props
+  new Vue({
+    render: h => h(App, { props })
+  }).$mount('#hello-vue');
+})
+```
+
+You can follow same steps for Angular too.
+
+
+## Elm
+
+Just like with other implementations, we'll render our data inside a `data`
+attribute:
+
+```erb
+<%= content_tag :div,
+  id: "hello-elm",
+  data: {
+    message: "Hello",
+    name: "David"
+  }.to_json do %>
+<% end %>
+```
+
+We parse the JSON data and pass it to Elm as flags:
+
+```js
+import Elm from '../Main'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const node = document.getElementById('hello-elm')
+  const data = JSON.parse(node.getAttribute('data'))
+  Elm.Main.embed(node, data)
+})
+```
+
+Defining `Flags` as a `type alias`, we instruct Elm to demand flags `message`
+and `name` of type `String` on initialization.
+
+Using `programWithFlags` we bring all the pieces together:
+
+
+```elm
+module Main exposing (..)
+
+import Html exposing (Html, programWithFlags, h1, text)
+import Html.Attributes exposing (style)
+
+
+-- MODEL
+
+
+type alias Flags =
+    { message : String
+    , name : String
+    }
+
+
+type alias Model =
+    { message : String
+    , name : String
+    }
+
+
+type Msg
+    = NoOp
+
+
+
+-- INIT
+
+
+init : Flags -> ( Model, Cmd Msg )
+init flags =
+    let
+        { message, name } =
+            flags
+    in
+        ( Model message name, Cmd.none )
+
+
+
+-- UPDATE
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        NoOp ->
+            ( model, Cmd.none )
+
+
+
+-- SUBSCRIPTIONS
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Sub.none
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+    h1 [ style [ ( "display", "flex" ), ( "justify-content", "center" ) ] ]
+        [ text (model.message ++ ", " ++ model.name ++ "!") ]
+
+
+
+-- MAIN
+
+
+main : Program Flags Model Msg
+main =
+    programWithFlags
+        { view = view
+        , init = init
+        , update = update
+        , subscriptions = subscriptions
+        }
+
+```