webpacker-for-component 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3b6b0cb036af66469919730cd4769282678d7f72
-  data.tar.gz: 16cf6c1acc92b8e570cc5867aa27e6643dd2c7da
+  metadata.gz: 58621a72e8320c778a101cc6570c4eeb78acc725
+  data.tar.gz: 7d8f23cb64174abad6bec861c75c0b6e2c3d70b8
 SHA512:
-  metadata.gz: 96f9e30c4bba49fe8150ad28b185659115f5c7c6ebfb2edc85fa231857e64bb4bd24dffe7bb077a7c7945cb2f174f2de2f2927b9de72eea0c84411fcd8ff20fa
-  data.tar.gz: d2c0e2e587d48b3b3855ed926897b373164d5d67fa237e642a9f20180d17b27a2cfe65e7a05c235670e9f94cbe6bc05e3d36ef7d0381c3f92a50a250ec56f575
+  metadata.gz: 4a6d1e19154c753d3e76b6949b8ae3eba80406126c55c330d884bba096d57c6470b4ada7c22b7200402e89f6f5e56809bfa88c8eda648e2bc3026a394cbf33f1
+  data.tar.gz: 0f6808de0db20c99892c59bc3c5e77bd248a3e90ba296e2f51429f61f7ead0501ab8159d8a4a470275f8fea206b73ba42a3c1233158849f4b0979f1ae9797653

data/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  'extends': 'airbnb',
+  'rules': {
+    'comma-dangle': ['error', 'never'],
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/extensions': 'off',
+    semi: ['error', 'never'],
+  },
+  'env': {
+    'browser': true,
+    'node': true,
+  },
+};

data/.gitignore

@@ -0,0 +1,6 @@
+/.bundle
+/pkg
+/test/test_app/log
+node_modules
+.byebug_history
+/test/test_app/tmp

data/.rubocop.yml

@@ -0,0 +1,124 @@
+AllCops:
+  TargetRubyVersion: 2.2
+  # RuboCop has a bunch of cops enabled by default. This setting tells RuboCop
+  # to ignore them, so only the ones explicitly set in this file are enabled.
+  DisabledByDefault: true
+  Exclude:
+    - 'lib/install/templates/**'
+    - 'vendor/**/*'
+    - 'node_modules/**/*'
+
+# Prefer &&/|| over and/or.
+Style/AndOr:
+  Enabled: true
+
+# Do not use braces for hash literals when they are the last argument of a
+# method call.
+Style/BracesAroundHashParameters:
+  Enabled: true
+
+# Align `when` with `case`.
+Layout/CaseIndentation:
+  Enabled: true
+
+# Align comments with method definitions.
+Layout/CommentIndentation:
+  Enabled: true
+
+# No extra empty lines.
+Layout/EmptyLines:
+  Enabled: true
+
+# In a regular class definition, no empty lines around the body.
+Layout/EmptyLinesAroundClassBody:
+  Enabled: true
+
+# In a regular method definition, no empty lines around the body.
+Layout/EmptyLinesAroundMethodBody:
+  Enabled: true
+
+# In a regular module definition, no empty lines around the body.
+Layout/EmptyLinesAroundModuleBody:
+  Enabled: true
+
+# Use Ruby >= 1.9 syntax for hashes. Prefer { a: :b } over { :a => :b }.
+Style/HashSyntax:
+  Enabled: true
+
+# Method definitions after `private` or `protected` isolated calls need one
+# extra level of indentation.
+Layout/IndentationConsistency:
+  Enabled: true
+  EnforcedStyle: rails
+
+# Two spaces, no tabs (for indentation).
+Layout/IndentationWidth:
+  Enabled: true
+
+Layout/SpaceAfterColon:
+  Enabled: true
+
+Layout/SpaceAfterComma:
+  Enabled: true
+
+Layout/SpaceAroundEqualsInParameterDefault:
+  Enabled: true
+
+Layout/SpaceAroundKeyword:
+  Enabled: true
+
+Layout/SpaceAroundOperators:
+  Enabled: true
+
+Layout/SpaceBeforeFirstArg:
+    Enabled: true
+
+# Defining a method with parameters needs parentheses.
+Style/MethodDefParentheses:
+  Enabled: true
+
+# Use `foo {}` not `foo{}`.
+Layout/SpaceBeforeBlockBraces:
+  Enabled: true
+
+# Use `foo { bar }` not `foo {bar}`.
+Layout/SpaceInsideBlockBraces:
+  Enabled: true
+
+# Use `{ a: 1 }` not `{a:1}`.
+Layout/SpaceInsideHashLiteralBraces:
+  Enabled: true
+
+Layout/SpaceInsideParens:
+  Enabled: true
+
+# Check quotes usage according to lint rule below.
+Style/StringLiterals:
+  Enabled: true
+  EnforcedStyle: double_quotes
+
+# Detect hard tabs, no hard tabs.
+Layout/Tab:
+  Enabled: true
+
+# Blank lines should not have any spaces.
+Layout/TrailingBlankLines:
+  Enabled: true
+
+# No trailing whitespace.
+Layout/TrailingWhitespace:
+  Enabled: true
+
+# Use quotes for string literals when they are enough.
+Style/UnneededPercentQ:
+  Enabled: true
+
+# Align `end` with the matching keyword or starting expression except for
+# assignments, where it should be aligned with the LHS.
+Lint/EndAlignment:
+  Enabled: true
+  EnforcedStyleAlignWith: variable
+
+# Use my_method(my_arg) not my_method( my_arg ) or my_method my_arg.
+Lint/RequireParentheses:
+  Enabled: true

data/.travis.yml

@@ -0,0 +1,22 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.2.6
+  - 2.3.3
+  - 2.4.1
+cache:
+  bundler: true
+  directories:
+    - node_modules
+  yarn: true
+
+install:
+  - bundle install
+  - nvm install node
+  - node -v
+  - npm i -g yarn
+  - yarn
+script:
+  - yarn lint
+  - bundle exec rubocop
+  - bundle exec rake test

data/Gemfile

@@ -0,0 +1,13 @@
+source "https://rubygems.org"
+
+gemspec
+
+gem "rails"
+gem "rake", ">= 11.1"
+gem "rubocop", ">= 0.49", require: false
+gem "rack-proxy", require: false
+
+group :test do
+  gem "minitest", "~> 5.0"
+  gem "byebug"
+end

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2016 David Heinemeier Hansson, Basecamp
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,325 @@
+# Webpacker-for-component
+
+
+Webpacker-for-component makes it easy to use the JavaScript pre-processor and bundler
+[Webpack 3.x.x+](https://webpack.js.org/) adapted to rails engines.
+It manages components JavaScript in Rails. It coexists with the asset pipeline,
+as the primary purpose for Webpack is app-like JavaScript, not images, CSS, or
+even JavaScript Sprinkles (that all continues to live in app/assets).
+
+However, it is possible to use Webpacker for CSS, images and fonts assets as well,
+in which case you may not even need the asset pipeline. This is mostly relevant when exclusively using component-based JavaScript frameworks.
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
+
+- [Prerequisites](#prerequisites)
+- [Features](#features)
+- [Installation](#installation)
+  - [Usage](#usage)
+  - [Development](#development)
+- [Integrations](#integrations)
+  - [React](#react)
+  - [Angular with TypeScript](#angular-with-typescript)
+  - [Vue](#vue)
+  - [Elm](#elm)
+- [Paths](#paths)
+  - [Resolved](#resolved)
+  - [Watched](#watched)
+- [Deployment](#deployment)
+- [Docs](#docs)
+- [License](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Credits
+This version of webpacker is highly adapted from the regular webpacker version povided by David Heinemeier Hansson and
+ Gaurav Tiwari. I would like to use webpacker inside an engine for a specific project and could not find a way to do it
+without modifying the code base of webpacker.
+
+## Prerequisites
+
+* Ruby 2.2+
+* Rails 4.2+
+* Node.js 6.0.0+
+* Yarn 0.25.2+
+
+
+## Features
+
+* [Webpack .x.x](https://webpack.js.org/)
+* ES6 with [babel](https://babeljs.io/)
+* Automatic code splitting using multiple entry points
+* Stylesheets - SASS and CSS
+* Images and fonts
+* PostCSS - Auto-Prefixer
+* Asset compression, source-maps, and minification
+* CDN support
+* React, Angular, Elm and Vue support out-of-the-box
+* Rails view helpers
+* Extensible and configurable
+
+
+## Installation
+
+# Gemfile
+gem 'webpacker-for-component', '~> 1.1.0'
+
+and run following within your component to install webpacker:
+
+```bash
+bundle
+bundle exec rails app:webpacker:install
+
+# OR (on rails version < 5.0)
+bundle exec rake webpacker:install
+```
+
+### Usage
+
+Once installed you can start writing modern ES6-flavored JavaScript app today:
+
+```yml
+app/javascript:
+  ├── packs:
+  │   # only webpack entry files here
+  │   └── application.js
+  └── src:
+  │   └── application.css
+  └── images:
+      └── logo.svg
+```
+
+You can then link the javascript pack in Rails view using `javascript_pack_tag` helper.
+If you have styles imported in your pack file, you can link using `stylesheet_pack_tag`:
+
+```erb
+<%= javascript_pack_tag 'application' %>
+<%= stylesheet_pack_tag 'application' %>
+```
+
+If you want to link a static asset for `<link rel="prefetch">` or `<img />` tag, you
+can use `asset_pack_path` helper:
+
+```erb
+<link rel="prefetch" href="<%= asset_pack_path 'application.css' %>" />
+<img src="<%= asset_pack_path 'images/logo.svg' %>" />
+```
+
+**Note:** In order for your styles or static assets files to be available in your view,
+you would need to link them in your "pack" or entry file.
+
+### Development
+
+Webpacker ships with two binstubs: `./bin/webpack` and `./bin/webpack-dev-server`.
+Both are thin wrappers around the standard `webpack.js` and `webpack-dev-server.js`
+executable to ensure that the right configuration file and environment variables
+are loaded depending on your environment.
+
+In development, Webpacker compiles on demand rather than upfront by default. This
+happens when you refer to any of the pack assets using the Webpacker helper methods.
+That means you don't have to run any separate process. Compilation errors are logged
+to the standard Rails log.
+
+If you want to use live code reloading, or you have enough JavaScript that on-demand compilation is too slow, you'll need to run `./bin/webpack-dev-server` or `ruby ./bin/webpack-dev-server` if on windows,
+in a separate terminal from `bundle exec rails s`. This process will watch for changes
+in the `app/javascript/packs/*.js` files and automatically reload the browser to match.
+
+```bash
+# webpack dev server
+./bin/webpack-dev-server
+
+# watcher
+./bin/webpack --colors --progress
+
+# standalone build
+./bin/webpack
+```
+
+Once you start this development server, Webpacker will automatically start proxying all
+webpack asset requests to this server. When you stop the server, it'll revert to
+on-demand compilation again.
+
+You can also pass CLI options supported by [webpack-dev-server](https://webpack.js.org/configuration/dev-server/). Please note that inline options will always take
+precedence over the ones already set in the configuration file.
+
+```bash
+./bin/webpack-dev-server --host example.com --inline true --hot false
+```
+
+By default, webpack dev server listens on `localhost` in development for security
+but if you want your app to be available over local LAN IP or VM instance like vagrant
+you can pass an additional config option `--listen-host`
+when running `./bin/webpack-dev-server` binstub:
+
+```bash
+./bin/webpack-dev-server --listen-host 0.0.0.0
+```
+
+**Note:** Don't forget to prefix `ruby` when running these binstubs on windows
+
+## Integrations
+
+Webpacker ships with basic out-of-the-box integration for React, Angular, Vue and Elm.
+You can see a list of available commands/tasks by running `bundle exec rails webpacker`:
+
+### React
+
+To use Webpacker with [React](https://facebook.github.io/react/), create a
+new Rails 5.1+ app using `--webpack=react` option:
+
+```bash
+# Rails 5.1+
+rails new myapp --webpack=react
+```
+
+(or run `bundle exec rails webpacker:install:react` in a existing Rails app already
+setup with webpacker).
+
+The installer will add all relevant dependencies using yarn, any changes
+to the configuration files and an example React component to your
+project in `app/javascript/packs` so that you can experiment with React right away.
+
+
+### Angular with TypeScript
+
+To use Webpacker with [Angular](https://angularjs.org/), create a
+new Rails 5.1+ app using `--webpack=angular` option:
+
+```bash
+# Rails 5.1+
+rails new myapp --webpack=angular
+```
+
+(or run `bundle exec rails webpacker:install:angular` on a Rails app already
+setup with webpacker).
+
+The installer will add TypeScript and Angular core libraries using yarn plus
+any changes to the configuration files. An example component is written in
+TypeScript will also be added to your project in `app/javascript` so that
+you can experiment with Angular right away.
+
+
+### Vue
+
+To use Webpacker with [Vue](https://vuejs.org/), create a
+new Rails 5.1+ app using `--webpack=vue` option:
+
+```bash
+# Rails 5.1+
+rails new myapp --webpack=vue
+```
+(or run `bundle exec rails webpacker:install:vue` on a Rails app already setup with webpacker).
+
+The installer will add Vue and required libraries using yarn plus
+any changes to the configuration files. An example component will
+also be added to your project in `app/javascript` so that you can
+experiment Vue right away.
+
+
+### Elm
+
+To use Webpacker with [Elm](http://elm-lang.org), create a
+new Rails 5.1+ app using `--webpack=elm` option:
+
+```
+# Rails 5.1+
+rails new myapp --webpack=elm
+```
+
+(or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with webpacker).
+
+The Elm library and core packages will be added via Yarn and Elm itself.
+An example `Main.elm` app will also be added to your project in `app/javascript`
+so that you can experiment with Elm right away.
+
+
+## Paths
+
+By default, webpacker ships with simple conventions for where the javascript
+app files and compiled webpack bundles will go in your rails app,
+but all these options are configurable from `config/webpacker.yml` file.
+
+The configuration for what Webpack is supposed to compile by default rests
+on the convention that every file in `app/javascript/packs/*`**(default)**
+or whatever path you set for `source_entry_path` in the `webpacker.yml` configuration
+is turned into their own output files (or entry points, as Webpack calls it). Therefore you don't want to put anything inside `packs` directory that you do want to be
+an entry file. As a rule thumb, put all files your want to link in your views inside
+"packs" directory and keep everything else under `app/javascript`.
+
+Suppose you want to change the source directory from `app/javascript`
+to `frontend` and output to `assets/packs`. This is how you would do it:
+
+```yml
+# config/webpacker.yml
+source_path: frontend
+source_entry_path: packs
+public_output_path: assets/packs # outputs to => public/assets/packs
+```
+
+Similarly you can also control and configure `webpack-dev-server` settings from `config/webpacker.yml` file:
+
+```yml
+# config/webpacker.yml
+development:
+  dev_server:
+    host: localhost
+    port: 3035
+```
+
+If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
+
+
+### Resolved
+
+If you are adding webpacker to an existing app that has most of the assets inside
+`app/assets` or inside an engine and you want to share that
+with webpack modules then you can use `resolved_paths`
+option available in `config/webpacker.yml`, which lets you
+add additional paths webpack should lookup when resolving modules:
+
+```yml
+resolved_paths: ['app/assets']
+```
+
+You can then import them inside your modules like so:
+
+```js
+// Note it's relative to parent directory i.e. app/assets
+import 'stylesheets/main'
+import 'images/rails.png'
+```
+
+**Note:** Please be careful when adding paths here otherwise it
+will make the compilation slow, consider adding specific paths instead of
+whole parent directory if you just need to reference one or two modules
+
+
+### Watched
+
+By default, the lazy compilation is cached until a file is changed under
+tracked paths. You can configure the paths tracked
+by adding new paths to `watched_paths` array, much like rails `autoload_paths`:
+
+```rb
+# config/initializers/webpacker.rb
+# or config/application.rb
+Webpacker::Compiler.watched_paths << 'bower_components'
+```
+
+
+## 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 you
+can manually trigger `NODE_ENV=production bundle exec rails webpacker:compile`
+during your app deploy.
+
+
+## Docs
+
+You can find more detailed guides under [docs](./docs).
+
+
+## License
+Webpacker is released under the [MIT License](https://opensource.org/licenses/MIT).