opal-webpack-loader 0.11.4 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e7e5f3b220d06e291ef7a5805237d73c53b27313766b7891e0bc18a8b00ccc8
-  data.tar.gz: 5d1078190a7c4b286de96c8114e9692728b87f6063c558c7de5737e3513f4b0d
+  metadata.gz: cd885fbcf9cc014f09d6f42a31ad1d0b815b17d587d33808156ec79579255f86
+  data.tar.gz: 2558ff9c76e5a07d98b6f0a94f829dcd51460197ef7176ff25fed2f742af2c31
 SHA512:
-  metadata.gz: e4bd10876231791a4a9368212950c81e1b8f007daa895db6ae95d0c01571a3ea3672650e35bda7765c74b06e02000a1164deb264dc22980e413d290bae9cc3e4
-  data.tar.gz: 70ba5421ca317f15126577d6990d30d9b354ee1c6864b28518756d07d99b9df13a25912331fe67a8e6034a1d4f9fc40da5e8941cc2aa7402d21b5f540bedfefd
+  metadata.gz: '07961ad0a9c60e9de83f6caedb60c1038bd721e898b52a8eaf5e8b118b268baba5d4527764d500a1e6a8bacb2ae88543896a959fd45245e61f331dbf21809f6c'
+  data.tar.gz: 7ecd145ff65cee4b2c5f9b59a5f096736356e0283f8548ae7743bcd845e2d0400df5ed0dd8087166269622aeadf58cf1c06da8f555d52954338f0c0b1c918bb0

data/README.md

@@ -1,216 +1,212 @@
-<h1 align="center">
-  <img src="https://raw.githubusercontent.com/isomorfeus/opal-webpack-loader/master/docs/owl.png" 
-  align="center" title="Opal logo by Elia Schito combined with Webpack Logo" width="111" height="125" />
-  <br/>
-  opal-webpack-loader<br/>
-  <img src="https://img.shields.io/badge/Opal-Ruby%20💛%20JavaScript%20💛%20Webpack-yellow.svg?logo=ruby&style=social&logoColor=777"/>
-</h1>
-
-Bundle assets with webpack, resolve and compile opal ruby files and import them in the bundle, without sprockets or the webpacker gem
- (but can be used with both of them too).
-Includes a loader and resolver plugin for webpack.
-
-### Community and Support
-At the [Isomorfeus Framework Project](http://isomorfeus.com) 
-
-### Tested
-[TravisCI](https://travis-ci.org): [![Build Status](https://travis-ci.org/isomorfeus/opal-webpack-loader.svg?branch=master)](https://travis-ci.org/isomorfeus/opal-webpack-loader)
-
-### Features
-- comes with a installer for rails and other frameworks
-- webpack based build process
-- very fast, asynchronous and parallel builds of opal code:
-opal-webpack-loader-0.7.1 compiles all of opal, a bunch of gems and over 19000SLC on a
-Intel® Core™ i7-7700HQ CPU @ 2.80GHz × 8, with 8 workers in around 1850ms
-- support for memcached or redis as compiler cache
-- fast builds on windows too, parallel when building multiple assets with parallel-webpack
-- opal modules are packaged as es6 modules
-- support for rails with webpacker
-- other webpack features become available, like:
-  - source maps
-  - multiple targets: web (for browsers), node (for server side rendering) and webworker (for Web Workers)
-  - hot module reloading for opal ruby code and stylesheets and html views
-  - tree shaking
-  - code splitting
-  - lazy loading
-  - everything else webpack can do, like loading stylesheets, etc.
-
-### Requirements
-- npm or yarn
-- opal-webpack-loader consists of 2 parts, the npm package and the gem, both are required and must be the same version.
-- webpack ^4.46
-- webpack-dev-server ^3.11.0
-- one of the ES6 modules branches of opal
-  - [PR#1973](https://github.com/opal/opal/pull/1973), (experimental) implementing ES6 modules and changes for 'strict' mode,
-    based on Opal master 1.0.0 using javascript string objects "mutable strings" by default for all strings
-    
-    `gem 'opal', github: 'janbiedermann/opal', branch: 'es6_modules_string'`
-    
-  - [PR#1976](https://github.com/opal/opal/pull/1976), (recommended) implementing ES6 modules and changes for 'strict' mode,
-    based on Opal master 1.1.0 using javascript string primitives and providing nice features like `require_lazy 'my_module'`
-    
-    `gem 'opal', github: 'janbiedermann/opal', branch: 'es6_modules_1_1'`
-    
-- if you have the webpacker gem installed somewhere, it should be a version supporting webpack 4
-- ruby, version 2.5 or higher recommended
-- bundler, latest version recommended
-
-### Installation
-
-#### Using the installer
-First install the gem:
-```
-gem install 'opal-webpack-loader'
-```
-
-Continue here:
-- [Install for Rails like projects](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/installation_rails.md)
-- [Install for Cuba, Roda, Sinatra and other projects with a flat structure](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/installation_flat.md)           
-- [Manual Installation](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/installation_manual.md)
-
-### Example applications
-- [Are here](https://github.com/isomorfeus/opal-webpack-loader/tree/master/example_apps/)
-- A minimal webpack only example from @sunrick is [here](https://github.com/sunrick/opal-hello-world-webpack).
-
-### General Usage without Webpacker
-
-After installing owl with the installer, three scripts are provided in package.json:
-- `development` - runs the webpack-dev-server, use for general development, provides fast reloads, entry is application.js
-- `debug` - runs the webpack-dev-server, use for debugging, provides source maps, entry is application_debug.js. Additional debugging tools may be added there.
-- `production_build` - runs webpack to build assets for production, entry is application.js
-
-These scripts can for example be run with:
-`yarn run debug` or `npm run debug`
-
-The default config provides several targets and entries:
-
-- **Browser**: the webpack target is 'web' and the javascript entry file for imports is `application.js` - general use for the application with all
-browser features, the opal ruby entry file is `opal_loader.rb` in the opal or app/opal directory of the app.
-- **Server Side Rendering**: the webpack target is `node` and the javascript entry file for imports is `application_ssr.js` - general use for the
-application server side rendering, several Browser features are unavailable, no `window`, no `document`, some node features are available,
-like `Buffer`, the opal ruby entry file is `opal_loader.rb` in the opal or app/opal directory of the app.
-(meant to be used with isomorfeus-speednode, standard ExecJS limitations prevent certain webpack features)
-- **Web Worker**: the webpack target is 'webworker' and the javascript entry file for imports is `application_webworker.js` - used to initialize Web
-Workers in the browser, the opal ruby entry file is `opal_webworker_loader.rb` in the opal or app/opal directory of the app.
-
-Only the browser target is build by default. To builds the other target, just add the needed targets to the last line of the webpack config,
-for example to `development.js`:
-default config:
-```javascript
-module.exports = [ browser ];
-```
-modified config with ssr and web_worker targets enabled:
-```javascript
-module.exports = [ browser, ssr, web_worker ];
-```
-Same works for the `debug.js` and `production.js` webpack config files.
-
-Also a Procfile has been installed, for rails its easy to startup rails and webpack with foreman:
-`foreman start` (`gem install foreman` if you dont have it already). It will start rails and webpack-dev-server with the development script.
-
-For non rails installation check the Procfile and add a starter for your app.
-
-#### Opal Ruby Application Files
-For rails installations with the installer they all go into: `app/opal`, for flat installations in the `opal` directory.
-In this directory there already is a `opal_loader.rb` which is the entry point for your app.
-
-#### Stylesheets
-Stylesheets are hot reloaded too with the default config installed by the installer. Also they are imported into application.js by default.
-For rails like applications stylesheets are in `app/assets/stylesheets/application.css`, for flat applications they are in `styles/application.css`.
-SCSS is supported too by the default config.
-
-#### Views
-For rails like applications a watcher for `app/views` is installed by default. The watcher will trigger a page reload when views are changed.
-For flat applications nothing is configured by default, as there are to many ways to generate views, they are not even needed with
-frameworks like isomorfeus. Instead the section for configuring a view watcher is included in the development.js and debug.js webpack
-config, but it is commented out. Please see those files and adjust to your liking.
-
-#### Parallel compilation for speed
-
-Since version 0.8.0 the number of CPUs is automatically determined and a appropriate number of of compile server workers is started automatically.
-
-### Source Maps
-
-[Source Maps](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/source_maps.md)
-
-### Hot Module Reloading
-[Hot Module Reloading](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/hot_module_reloading.md)
-
-### Opal Load Path
-The projects directory for opal ruby files must be in the opal load path. This is done in the initializer for rails apps in
-config/initializers/opal_webpack_loader.rb or in 'owl_init.rb' for non rails apps, for example:
-```ruby
-Opal.append_path(File.realdirpath('app/opal'))
-```
-
-### View Helper
-In Rails or frameworks that support `javscript_include_tag`, add to the app/helpers/application_helper.rb
-```ruby
-module ApplicationHelper
-  include OpalWebpackLoader::RailsViewHelper
-```
-in other frameworks that dont have a `javascript_include_tag`:
-```ruby
-module MyProjectsViewThings
-  include OpalWebpackLoader::ViewHelper
-```
-
-Then you can use in your views:
-```ruby
-owl_script_tag('application.js')
-```
-#### Compile Server and app_loader.rb
-For non rails projects, determining Opal load paths, for the resolver and compile server to work properly, may not be obvious. For these cases
-a file `app_loader.rb` in the projects root can be created which just loads all requirements without starting anything.
-Usually it would just setup bundler with the appropriate options, for example:
-```ruby
-require 'bundler/setup'
-if ENV['RACK_ENV'] && ENV['RACK_ENV'] == 'test'
-  Bundler.require(:default, :test)
-elsif ENV['RACK_ENV'] && ENV['RACK_ENV'] == 'production'
-  Bundler.require(:default, :production)
-else
-  Bundler.require(:default, :development)
-end
-Opal.append_path(File.realdirpath('opal')) # this is a good place to add the directory with opal files to the opal load path
-```
-When this file exists, the compile server will load it and generate Opal load paths accordingly for the resolver.
-
-#### Project configuration options for the view helper
-These setting are in the initializer in config/initializers/opal_webpack_loader.rb for rails like apps, or owl_init.rb for others.
-```ruby
-OpalWebpackLoader.use_manifest = false
-```
-If the manifest file should be used, use_manifest should be true.
-```ruby
-OpalWebpackLoader.manifest_path = File.join(Dir.getwd, 'public', 'assets', 'manifest.json')
-```
-Sets the path to the webpack (with the [webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plugin)) generated manifest.json to look up assets.
-```ruby
-OpalWebpackLoader.client_asset_path = 'http://localhost:3035/assets/'
-```
-The path to prepend to the assets as configured in the webpack config 'publicPath'. 
-In the config example below its `publicPath: 'http://localhost:3025/assets'` so
-client_asset_path should be set to the same.
-
-For **production** use with readily precompiled and compressed assets which contain a fingerprint in the name (webpacks [chunkhash]),
-and if the path in the manifest is the full path to the asset as configured in webpack,
-these settings would work:
-```ruby
-OpalWebpackLoader.use_manifest = true
-OpalWebpackLoader.manifest_path = File.join(Dir.getwd, 'public', 'assets', 'manifest.json')
-OpalWebpackLoader.client_asset_path = ''
-```
-
-For **development** use with webpack-dev-server, with no manifest, these settings would work:
-```ruby
-OpalWebpackLoader.use_manifest = false
-OpalWebpackLoader.manifest_path = File.join(Dir.getwd, 'public', 'assets', 'manifest.json') # doesn't matter, not used
-OpalWebpackLoader.client_asset_path = 'http://localhost:3035/assets/'
-```
-### Advanced Options
-[Advanced Options](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/advanced_options.md)
-### Tests
-- clone the repo
-- `bundle install`
-- `bundle exec rspec`
+<h1 align="center">
+  <img src="https://raw.githubusercontent.com/isomorfeus/opal-webpack-loader/master/docs/owl.png" 
+  align="center" title="Opal logo by Elia Schito combined with Webpack Logo" width="111" height="125" />
+  <br/>
+  opal-webpack-loader<br/>
+  <img src="https://img.shields.io/badge/Opal-Ruby%20💛%20JavaScript%20💛%20Webpack-yellow.svg?logo=ruby&style=social&logoColor=777"/>
+</h1>
+
+Bundle assets with webpack, resolve and compile opal ruby files and import them in the bundle, without sprockets or the webpacker gem
+ (but can be used with both of them too).
+Includes a loader and resolver plugin for webpack.
+
+### Community and Support
+At the [Isomorfeus Framework Project](http://isomorfeus.com) 
+
+### Tested
+[TravisCI](https://travis-ci.org): [![Build Status](https://travis-ci.org/isomorfeus/opal-webpack-loader.svg?branch=master)](https://travis-ci.org/isomorfeus/opal-webpack-loader)
+
+### Features
+- comes with a installer for rails and other frameworks
+- webpack based build process
+- very fast, asynchronous and parallel builds of opal code:
+opal-webpack-loader-0.7.1 compiles all of opal, a bunch of gems and over 19000SLC on a
+Intel® Core™ i7-7700HQ CPU @ 2.80GHz × 8, with 8 workers in around 1850ms
+- support for memcached or redis as compiler cache
+- fast builds on windows too, parallel when building multiple assets with parallel-webpack
+- opal modules are packaged as es6 modules
+- support for rails with webpacker
+- other webpack features become available, like:
+  - source maps
+  - multiple targets: web (for browsers), node (for server side rendering) and webworker (for Web Workers)
+  - hot module reloading for opal ruby code and stylesheets and html views
+  - tree shaking
+  - code splitting
+  - lazy loading
+  - everything else webpack can do, like loading stylesheets, etc.
+
+### Requirements
+- npm or yarn
+- opal-webpack-loader consists of 2 parts, the npm package and the gem, both are required and must be the same version.
+- webpack ^4.46
+- webpack-dev-server ^3.11.0
+- the ES6 modules branch of opal
+
+  - [PR#2266](https://github.com/opal/opal/pull/2266),
+    based on Opal 1.2.0 using javascript string primitives and providing nice features like `require_lazy 'my_module'`
+    
+    `gem 'opal', github: 'janbiedermann/opal', branch: 'es6_modules_1_2'`
+    
+- if you have the webpacker gem installed somewhere, it should be a version supporting webpack 4
+- ruby, version 2.5 or higher recommended
+- bundler, latest version recommended
+
+### Installation
+
+#### Using the installer
+First install the gem:
+```
+gem install 'opal-webpack-loader'
+```
+
+Continue here:
+- [Install for Rails like projects](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/installation_rails.md)
+- [Install for Cuba, Roda, Sinatra and other projects with a flat structure](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/installation_flat.md)           
+- [Manual Installation](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/installation_manual.md)
+
+### Example applications
+- [Are here](https://github.com/isomorfeus/opal-webpack-loader/tree/master/example_apps/)
+- A minimal webpack only example from @sunrick is [here](https://github.com/sunrick/opal-hello-world-webpack).
+
+### General Usage without Webpacker
+
+After installing owl with the installer, three scripts are provided in package.json:
+- `development` - runs the webpack-dev-server, use for general development, provides fast reloads, entry is application.js
+- `debug` - runs the webpack-dev-server, use for debugging, provides source maps, entry is application_debug.js. Additional debugging tools may be added there.
+- `production_build` - runs webpack to build assets for production, entry is application.js
+
+These scripts can for example be run with:
+`yarn run debug` or `npm run debug`
+
+The default config provides several targets and entries:
+
+- **Browser**: the webpack target is 'web' and the javascript entry file for imports is `application.js` - general use for the application with all
+browser features, the opal ruby entry file is `opal_loader.rb` in the opal or app/opal directory of the app.
+- **Server Side Rendering**: the webpack target is `node` and the javascript entry file for imports is `application_ssr.js` - general use for the
+application server side rendering, several Browser features are unavailable, no `window`, no `document`, some node features are available,
+like `Buffer`, the opal ruby entry file is `opal_loader.rb` in the opal or app/opal directory of the app.
+(meant to be used with isomorfeus-speednode, standard ExecJS limitations prevent certain webpack features)
+- **Web Worker**: the webpack target is 'webworker' and the javascript entry file for imports is `application_webworker.js` - used to initialize Web
+Workers in the browser, the opal ruby entry file is `opal_webworker_loader.rb` in the opal or app/opal directory of the app.
+
+Only the browser target is build by default. To builds the other target, just add the needed targets to the last line of the webpack config,
+for example to `development.js`:
+default config:
+```javascript
+module.exports = [ browser ];
+```
+modified config with ssr and web_worker targets enabled:
+```javascript
+module.exports = [ browser, ssr, web_worker ];
+```
+Same works for the `debug.js` and `production.js` webpack config files.
+
+Also a Procfile has been installed, for rails its easy to startup rails and webpack with foreman:
+`foreman start` (`gem install foreman` if you dont have it already). It will start rails and webpack-dev-server with the development script.
+
+For non rails installation check the Procfile and add a starter for your app.
+
+#### Opal Ruby Application Files
+For rails installations with the installer they all go into: `app/opal`, for flat installations in the `opal` directory.
+In this directory there already is a `opal_loader.rb` which is the entry point for your app.
+
+#### Stylesheets
+Stylesheets are hot reloaded too with the default config installed by the installer. Also they are imported into application.js by default.
+For rails like applications stylesheets are in `app/assets/stylesheets/application.css`, for flat applications they are in `styles/application.css`.
+SCSS is supported too by the default config.
+
+#### Views
+For rails like applications a watcher for `app/views` is installed by default. The watcher will trigger a page reload when views are changed.
+For flat applications nothing is configured by default, as there are to many ways to generate views, they are not even needed with
+frameworks like isomorfeus. Instead the section for configuring a view watcher is included in the development.js and debug.js webpack
+config, but it is commented out. Please see those files and adjust to your liking.
+
+#### Parallel compilation for speed
+
+Since version 0.8.0 the number of CPUs is automatically determined and a appropriate number of of compile server workers is started automatically.
+
+### Source Maps
+
+[Source Maps](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/source_maps.md)
+
+### Hot Module Reloading
+[Hot Module Reloading](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/hot_module_reloading.md)
+
+### Opal Load Path
+The projects directory for opal ruby files must be in the opal load path. This is done in the initializer for rails apps in
+config/initializers/opal_webpack_loader.rb or in 'owl_init.rb' for non rails apps, for example:
+```ruby
+Opal.append_path(File.realdirpath('app/opal'))
+```
+
+### View Helper
+In Rails or frameworks that support `javscript_include_tag`, add to the app/helpers/application_helper.rb
+```ruby
+module ApplicationHelper
+  include OpalWebpackLoader::RailsViewHelper
+```
+in other frameworks that dont have a `javascript_include_tag`:
+```ruby
+module MyProjectsViewThings
+  include OpalWebpackLoader::ViewHelper
+```
+
+Then you can use in your views:
+```ruby
+owl_script_tag('application.js')
+```
+#### Compile Server and app_loader.rb
+For non rails projects, determining Opal load paths, for the resolver and compile server to work properly, may not be obvious. For these cases
+a file `app_loader.rb` in the projects root can be created which just loads all requirements without starting anything.
+Usually it would just setup bundler with the appropriate options, for example:
+```ruby
+require 'bundler/setup'
+if ENV['RACK_ENV'] && ENV['RACK_ENV'] == 'test'
+  Bundler.require(:default, :test)
+elsif ENV['RACK_ENV'] && ENV['RACK_ENV'] == 'production'
+  Bundler.require(:default, :production)
+else
+  Bundler.require(:default, :development)
+end
+Opal.append_path(File.realdirpath('opal')) # this is a good place to add the directory with opal files to the opal load path
+```
+When this file exists, the compile server will load it and generate Opal load paths accordingly for the resolver.
+
+#### Project configuration options for the view helper
+These setting are in the initializer in config/initializers/opal_webpack_loader.rb for rails like apps, or owl_init.rb for others.
+```ruby
+OpalWebpackLoader.use_manifest = false
+```
+If the manifest file should be used, use_manifest should be true.
+```ruby
+OpalWebpackLoader.manifest_path = File.join(Dir.getwd, 'public', 'assets', 'manifest.json')
+```
+Sets the path to the webpack (with the [webpack-manifest-plugin](https://www.npmjs.com/package/webpack-manifest-plugin)) generated manifest.json to look up assets.
+```ruby
+OpalWebpackLoader.client_asset_path = 'http://localhost:3035/assets/'
+```
+The path to prepend to the assets as configured in the webpack config 'publicPath'. 
+In the config example below its `publicPath: 'http://localhost:3025/assets'` so
+client_asset_path should be set to the same.
+
+For **production** use with readily precompiled and compressed assets which contain a fingerprint in the name (webpacks [chunkhash]),
+and if the path in the manifest is the full path to the asset as configured in webpack,
+these settings would work:
+```ruby
+OpalWebpackLoader.use_manifest = true
+OpalWebpackLoader.manifest_path = File.join(Dir.getwd, 'public', 'assets', 'manifest.json')
+OpalWebpackLoader.client_asset_path = ''
+```
+
+For **development** use with webpack-dev-server, with no manifest, these settings would work:
+```ruby
+OpalWebpackLoader.use_manifest = false
+OpalWebpackLoader.manifest_path = File.join(Dir.getwd, 'public', 'assets', 'manifest.json') # doesn't matter, not used
+OpalWebpackLoader.client_asset_path = 'http://localhost:3035/assets/'
+```
+### Advanced Options
+[Advanced Options](https://github.com/isomorfeus/opal-webpack-loader/blob/master/docs/advanced_options.md)
+### Tests
+- clone the repo
+- `bundle install`
+- `bundle exec rspec`

data/lib/opal-webpack-loader/installer_cli.rb

@@ -1,415 +1,415 @@
-module OpalWebpackLoader
-  module Installer
-    TARGETS = %w[development.js production.js test.js]
-    DEV_START_COMMAND = 'yarn run development'
-    DEV_SM_START_COMMAND = 'yarn run sourcemaps'
-
-    class CLI < Thor
-      desc "iso", "Install owl configuration into a existing isomorfeus project, meant to be called from the isomorfeus installer only."
-      # Showing directories and files relevant to iso owl:
-      #   project_root
-      #     +- config.ru # rack app starter
-      #     +- config # webpack and other config
-      #         +- owl.rb # owl.configuration
-      #     +- isomorfeus
-      #         +- components
-      #         +- imports # javascript entrypoints, import other components etc.
-      #              +- application.js
-      #              +- application_common.js
-      #              +- application_ssr.js
-      #         +- isomorfeus_loader.rb
-      #         +- models
-      #         +- operations
-      #         +- policies
-      #         +- styles
-      #              +- css
-      #     +- log
-      #     +- node_modules
-      #     +- package.json
-      #     +- Procfile
-      #     +- public
-      #          +- assets # compiled assets and other things
-      #     +- spec
-      #     +- tmp
-      def iso
-        @application_css = '../styles/application.css'
-        @asset_output_directory = File.join('public', 'assets')
-        @js_entrypoints_directory = File.join('isomorfeus', 'imports')
-        @conf_rel_prefix = '..'
-        @js_rel_prefix = '..'
-        @opal_directory = 'isomorfeus'
-        @styles_directory = File.join(@opal_directory, 'styles')
-        @webpack_config_directory = 'webpack'
-        @dev_default_targets = 'browser'
-        @pro_default_targets = 'browser, ssr'
-        @hmr_hook = 'Opal.Isomorfeus.$force_render()'
-        create_directory(@webpack_config_directory)
-        create_directory(@asset_output_directory)
-        FileUtils.touch(File.join(@asset_output_directory, '.keep'))
-        install_webpack_config
-        create_file_from_template('initializer.rb.erb', File.join('owl_init.rb'), { opal_load_path: '' })
-        # add_gem
-      end
-
-      desc "flat", "Install owl configuration into a existing project with a flat structure, execute from the projects root directory."
-      # <<~TEXT
-      #   Showing directories and files relevant to owl:
-      #     project_root
-      #         +- owl_init.rb           # initializer for owl
-      #         +- javascripts       # javascript entries directory
-      #         +- node_modules     # directory for node modules
-      #         +- opal             # directory for opal application files, can be changed with -o
-      #         +- package.json     # package config for npm/yarn and their scripts
-      #         +- public
-      #             +- assets       # directory for compiled output files
-      #         +- styles           # directory for stylesheets
-      #         +- webpack          # directory for webpack configuration files
-      #         +- Procfile         # config file for foreman
-      #
-      # TEXT
-      option :opal_name, required: false, type: :string, default: 'opal', aliases: '-o', desc: <<~TEXT
-        Set directory name for Opal source files.
-        Example: owl-installer rails -o isomorfeus  # will use project_root/app/isomorfeus for opal files
-      TEXT
-
-      def flat
-        @application_css = '../styles/application.css'
-        @asset_output_directory = File.join('public', 'assets')
-        @js_entrypoints_directory = File.join('javascripts')
-        @conf_rel_prefix = '..'
-        @js_rel_prefix = '..'
-        @opal_directory = options[:opal_name]
-        @styles_directory = 'styles'
-        @webpack_config_directory = 'webpack'
-        @dev_default_targets = 'browser'
-        @pro_default_targets = 'browser'
-        @hmr_hook = ''
-        create_common_directories
-        install_common_things
-        create_file_from_template('application.css.erb', File.join('styles', 'application.css'), {})
-        create_file_from_template('initializer.rb.erb', 'owl_init.rb', { opal_load_path: '' })
-        create_file_from_template('app_loader.rb.erb', 'app_loader.rb', { opal_directory: @opal_directory })
-        add_gem
-        print_message
-      end
-
-      desc "rails", "Install owl configuration into a existing rails project without webpacker, execute from the projects root directory."
-      # <<~TEXT
-      #   Showing directories and files relevant to owl:
-      #     project_root
-      #         +- app
-      #             +- assets
-      #                 +- javascripts  # javascript entries directory
-      #                 +- styles       # directory for stylesheets
-      #             +- opal             # directory for opal application files, can be changed with -o
-      #         +- config
-      #             +- webpack          # directory for webpack configuration files
-      #             +- initializers
-      #                 +- owl.rb       # initializer for owl
-      #         +- node_modules         # directory for node modules
-      #         +- package.json         # package config for npm/yarn and their scripts
-      #         +- public
-      #             +- assets           # directory for compiled output files
-      #         +- Procfile             # config file for foreman
-      #
-      # TEXT
-      option :opal_name, required: false, type: :string, default: 'opal', aliases: '-o', desc: <<~TEXT
-        Set directory name for Opal source files.
-        Example: owl-installer rails -o isomorfeus  # will use project_root/app/isomorfeus for opal files
-      TEXT
-
-      def rails
-        @application_css = '../stylesheets/application.css'
-        @asset_output_directory = File.join('public', 'assets')
-        @js_entrypoints_directory = File.join('app', 'assets', 'javascripts')
-        @conf_rel_prefix = File.join('..', '..')
-        @js_rel_prefix = File.join('..', '..', '..')
-        @opal_directory = File.join('app', options[:opal_name])
-        @styles_directory = File.join('app', 'assets', 'stylesheets')
-        @webpack_config_directory = File.join('config', 'webpack')
-        @dev_default_targets = 'browser'
-        @pro_default_targets = 'browser'
-        @hmr_hook = ''
-        create_directory('app')
-        create_common_directories
-        install_common_things
-        create_file_from_template('initializer.rb.erb', File.join('config', 'initializers', 'opal_webpack_loader.rb'),
-                                  { opal_load_path: "Opal.append_path(File.realdirpath('#{@opal_directory}'))" })
-        add_gem
-        print_message
-      end
-
-      desc "webpacker", "Install owl configuration into a existing rails project with webpacker, execute from the projects root directory."
-      # <<~TEXT
-      #   Showing directories and files relevant to owl:
-      #     project_root
-      #         +- app
-      #             +- assets
-      #                 +- javascripts  # javascript entries directory
-      #                 +- styles       # directory for stylesheets
-      #             +- opal             # directory for opal application files, can be changed with -o
-      #         +- config
-      #             +- webpack          # directory for webpack configuration files
-      #             +- initializers
-      #                 +- owl.rb       # initializer for owl
-      #         +- node_modules         # directory for node modules
-      #         +- package.json         # package config for npm/yarn and their scripts
-      #         +- public
-      #             +- assets           # directory for compiled output files
-      #         +- Procfile             # config file for foreman
-      #
-      # TEXT
-      option :opal_name, required: false, type: :string, default: 'opal', aliases: '-o', desc: <<~TEXT
-        Set directory name for Opal source files.
-        Example: owl-installer rails -o isomorfeus  # will use project_root/app/isomorfeus for opal files
-      TEXT
-
-      def webpacker
-        @application_css = '../stylesheets/application.css'
-        @asset_output_directory = File.join('public', 'assets')
-        @js_entrypoints_directory = File.join('app', 'assets', 'javascripts')
-        @conf_rel_prefix = File.join('..', '..')
-        @js_rel_prefix = File.join('..', '..', '..')
-        @opal_directory = File.join('app', options[:opal_name])
-        @styles_directory = File.join('app', 'assets', 'stylesheets')
-        @webpack_config_directory = File.join('config', 'webpack')
-        @dev_default_targets = 'browser'
-        @pro_default_targets = 'browser'
-        @hmr_hook = ''
-        create_directory('app')
-        create_common_directories
-        install_webpacker_config
-        install_webpacker_package_json
-        install_webpacker_js_entry
-        install_opal_entries
-        create_file_from_template('initializer.rb.erb', File.join('config', 'initializers', 'opal_webpack_loader.rb'),
-                                  { opal_load_path: "Opal.append_path(File.realdirpath('#{@opal_directory}'))" })
-        add_gem
-        print_message
-      end
-
-      private
-
-      def create_directory(directory)
-        unless Dir.exist?(directory)
-          puts "Creating directory #{directory}."
-          FileUtils.mkdir_p(directory)
-        end
-      end
-
-      def create_common_directories
-        create_directory(@webpack_config_directory)
-        create_directory(@js_entrypoints_directory)
-        create_directory(@opal_directory)
-        create_directory(@asset_output_directory)
-        FileUtils.touch(File.join(@asset_output_directory, '.gitkeep'))
-        create_directory(@styles_directory)
-      end
-
-      def install_common_things
-        install_webpack_config
-        install_package_json
-        install_js_entries
-        install_opal_entries
-        install_procfile
-      end
-
-      def install_js_entries
-        erb_hash = { opal_dir: File.join(@js_rel_prefix, @opal_directory), opal_name: options[:opal_name], application_css: @application_css }
-        create_file_from_template('application.js.erb', File.join(@js_entrypoints_directory, 'application.js'), erb_hash)
-        create_file_from_template('application_common.js.erb', File.join(@js_entrypoints_directory, 'application_common.js'),erb_hash)
-        create_file_from_template('application_ssr.js.erb', File.join(@js_entrypoints_directory, 'application_ssr.js'), erb_hash)
-        create_file_from_template('application_web_worker.js.erb', File.join(@js_entrypoints_directory, 'application_web_worker.js'), erb_hash)
-      end
-
-      def install_opal_entries
-        create_file_from_template('opal_loader.rb.erb', File.join(@opal_directory, "#{options[:opal_name]}_loader.rb"), {})
-        create_file_from_template('opal_web_worker_loader.rb.erb', File.join(@opal_directory, "#{options[:opal_name]}_web_worker_loader.rb"), {})
-      end
-
-      def install_package_json
-        if File.exist?('package.json')
-          gem_package_json_template = File.read(File.join(templates_path, 'package.json.erb'))
-          gem_package_json = Oj.load(gem_package_json_template, mode: :strict)
-          package_json_file = File.read('package.json')
-          package_json = Oj.load(package_json_file, mode: :strict)
-          package_json["scripts"] = {} unless package_json.has_key?("scripts")
-          package_json["scripts"]["debug"] = debug_script
-          package_json["scripts"]["development"] = development_script
-          package_json["scripts"]["production_build"] = production_script
-          package_json["devDependencies"] = {} unless package_json.has_key?("devDependencies")
-          package_json["devDependencies"].merge!(gem_package_json["devDependencies"])
-          package_json["dependencies"]["opal-webpack-loader"] = "^#{OpalWebpackLoader::VERSION}"
-          File.write('package.json', Oj.dump(package_json, mode: :strict, indent: 2))
-          puts "Updated package.json, updated scripts and owl dependencies"
-        else
-          erb_hash = {
-            debug_script: debug_script,
-            development_script: development_script,
-            production_script: production_script,
-            owl_version: OpalWebpackLoader::VERSION
-          }
-          create_file_from_template('package.json.erb', 'package.json', erb_hash)
-        end
-      end
-
-      def install_procfile
-        if File.exist?('Procfile')
-          procfile = File.read('Procfile')
-          has_webpack = false
-          lines = procfile.lines
-          lines.each do |line|
-            has_webpack = true if line.start_with?('webpack')
-          end
-          unless has_webpack
-            lines << 'webpack: yarn run development'
-            File.write('Procfile', lines.join("\n"))
-          end
-        else
-          erb_hash = { web_starter: '' }
-          if @js_entrypoints_directory.start_with?('app')
-            erb_hash[:web_starter] = 'web: bundle exec rails s'
-          end
-          create_file_from_template('Procfile.erb', 'Procfile',erb_hash)
-        end
-      end
-
-      def debug_script
-        "webpack-dev-server --config #{File.join(@webpack_config_directory, 'debug.js')}"
-      end
-
-      def development_script
-        "webpack-dev-server --config #{File.join(@webpack_config_directory, 'development.js')}"
-      end
-
-      def production_script
-        "parallel-webpack --config=#{File.join(@webpack_config_directory, 'production.js')}"
-      end
-
-      def install_webpack_config
-        erb_hash = {
-          asset_output_directory: File.join(@conf_rel_prefix, @asset_output_directory),
-          default_targets: @dev_default_targets,
-          js_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application.js'),
-          js_common_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application_common.js'),
-          js_ssr_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application_ssr.js'),
-          js_web_worker_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application_web_worker.js'),
-          opal_directory: File.join(@conf_rel_prefix, @opal_directory),
-          stylesheets_directory: File.join(@conf_rel_prefix, @styles_directory),
-          hmr_hook: @hmr_hook
-        }
-        if @js_entrypoints_directory.start_with?('app')
-          erb_hash[:dev_server_before] = <<~JAVASCRIPT
-                // enable page reload for updates within the app/views directory
-                before: function(app, server) {
-                    chokidar.watch(path.resolve(__dirname, path.join('..', '..', 'app', 'views'))).on('all', function () {
-                        server.sockWrite(server.sockets, 'content-changed');
-                    })
-                },
-          JAVASCRIPT
-        else
-          erb_hash[:dev_server_before] = <<~JAVASCRIPT
-                // uncomment to enable page reload for updates within another directory, which may contain just html files,
-                // for example the 'views' directory:
-                // before: function(app, server) {
-                //     chokidar.watch(path.resolve(__dirname, path.join('..', 'views')).on('all', function () {
-                //         server.sockWrite(server.sockets, 'content-changed');
-                //     })
-                // },
-          JAVASCRIPT
-        end
-        create_file_from_template('debug.js.erb', File.join(@webpack_config_directory, 'debug.js'), erb_hash)
-        create_file_from_template('development.js.erb', File.join(@webpack_config_directory, 'development.js'), erb_hash)
-        erb_hash[:default_targets] = @pro_default_targets
-        create_file_from_template('production.js.erb', File.join(@webpack_config_directory, 'production.js'), erb_hash)
-      end
-
-      def install_webpacker_config
-        environment_js = File.read(File.join('config', 'webpack', 'environment.js'), mode: 'r')
-        new_environment_js = ''
-        environment_js.lines.each do |line|
-          new_environment_js << line
-          if line.start_with?('const { environment }')
-            new_environment_js << "\n"
-            new_environment_js << File.read(File.join(templates_path, 'webpacker.js'), mode: 'r')
-            new_environment_js << "\n"
-          end
-        end
-        File.write(File.join('config', 'webpack', 'environment.js'), new_environment_js)
-      end
-
-      def install_webpacker_js_entry
-        application_js = File.read(File.join('app', 'javascript', 'packs', 'application.js'), mode: 'r')
-        application_js << <<~JAVASCRIPT
-
-        // import and load opal ruby files
-        import init_app from '#{options[:opal_name]}_loader.rb';
-        init_app();
-        Opal.load('#{options[:opal_name]}_loader');
-
-        JAVASCRIPT
-        File.write(File.join('app', 'javascript', 'packs', 'application.js'), application_js)
-      end
-
-      def install_webpacker_package_json
-        package_json_file = File.read('package.json')
-        package_json = Oj.load(package_json_file, mode: :strict)
-        package_json["dependencies"]["opal-webpack-loader"] = "^#{OpalWebpackLoader::VERSION}"
-        File.write('package.json', Oj.dump(package_json, mode: :strict, indent: 2))
-        puts "Updated package.json for opal-webpack-loader"
-      end
-
-      def templates_path
-        File.realpath(File.join(File.dirname(File.realpath(__FILE__)),  'templates'))
-      end
-
-      def create_file_from_template(template_path, target_file_path, data_hash)
-        template = ERB.new(File.read(File.join(templates_path, template_path), mode: 'r'))
-        result = template.result_with_hash(data_hash)
-        if File.exist?(target_file_path)
-          ext = '_owl_new'
-          puts "#{target_file_path} exists, not overwriting, creating #{target_file_path + ext} instead."
-        else
-          ext = ''
-          puts "Creating #{target_file_path}."
-        end
-
-        File.write(target_file_path + ext, result, mode: 'w')
-      end
-
-      def add_gem
-        # TODO specifying a version results in bundler printing a error and not adding the gem
-        # `bundle add opal-webpack-loader -v "#{OpalWebpackLoader::VERSION}" --skip-install`ß´
-      end
-
-      def print_message
-        puts <<~TEXT
-
-          Add the following lines to your Gemfile:
-
-            gem 'opal', github: 'janbiedermann/opal', branch: 'es6_modules_1_1'
-            gem 'opal-webpack-loader', '~> #{OpalWebpackLoader::VERSION}'
-
-          owl currently works only with above opal branch. If you have a existing "gem 'opal'", please replace it with above line.
-
-          Also check above output for files ending in '_owl_new' and merge their contents with the existing files.
-
-          After that run according to your preference either:
-
-            yarn install
-
-          or:
-
-            npm install
-
-          and then:
-
-            bundle install
-
-          For further instructions see http://github.com/isomorfeus/opal-webpack-loader
-
-        TEXT
-      end
-    end
-  end
-end
+module OpalWebpackLoader
+  module Installer
+    TARGETS = %w[development.js production.js test.js]
+    DEV_START_COMMAND = 'yarn run development'
+    DEV_SM_START_COMMAND = 'yarn run sourcemaps'
+
+    class CLI < Thor
+      desc "iso", "Install owl configuration into a existing isomorfeus project, meant to be called from the isomorfeus installer only."
+      # Showing directories and files relevant to iso owl:
+      #   project_root
+      #     +- config.ru # rack app starter
+      #     +- config # webpack and other config
+      #         +- owl.rb # owl.configuration
+      #     +- isomorfeus
+      #         +- components
+      #         +- imports # javascript entrypoints, import other components etc.
+      #              +- application.js
+      #              +- application_common.js
+      #              +- application_ssr.js
+      #         +- isomorfeus_loader.rb
+      #         +- models
+      #         +- operations
+      #         +- policies
+      #         +- styles
+      #              +- css
+      #     +- log
+      #     +- node_modules
+      #     +- package.json
+      #     +- Procfile
+      #     +- public
+      #          +- assets # compiled assets and other things
+      #     +- spec
+      #     +- tmp
+      def iso
+        @application_css = '../styles/application.css'
+        @asset_output_directory = File.join('public', 'assets')
+        @js_entrypoints_directory = File.join('isomorfeus', 'imports')
+        @conf_rel_prefix = '..'
+        @js_rel_prefix = '..'
+        @opal_directory = 'isomorfeus'
+        @styles_directory = File.join(@opal_directory, 'styles')
+        @webpack_config_directory = 'webpack'
+        @dev_default_targets = 'browser'
+        @pro_default_targets = 'browser, ssr'
+        @hmr_hook = 'Opal.Isomorfeus.$force_render()'
+        create_directory(@webpack_config_directory)
+        create_directory(@asset_output_directory)
+        FileUtils.touch(File.join(@asset_output_directory, '.keep'))
+        install_webpack_config
+        create_file_from_template('initializer.rb.erb', File.join('owl_init.rb'), { opal_load_path: '' })
+        # add_gem
+      end
+
+      desc "flat", "Install owl configuration into a existing project with a flat structure, execute from the projects root directory."
+      # <<~TEXT
+      #   Showing directories and files relevant to owl:
+      #     project_root
+      #         +- owl_init.rb           # initializer for owl
+      #         +- javascripts       # javascript entries directory
+      #         +- node_modules     # directory for node modules
+      #         +- opal             # directory for opal application files, can be changed with -o
+      #         +- package.json     # package config for npm/yarn and their scripts
+      #         +- public
+      #             +- assets       # directory for compiled output files
+      #         +- styles           # directory for stylesheets
+      #         +- webpack          # directory for webpack configuration files
+      #         +- Procfile         # config file for foreman
+      #
+      # TEXT
+      option :opal_name, required: false, type: :string, default: 'opal', aliases: '-o', desc: <<~TEXT
+        Set directory name for Opal source files.
+        Example: owl-installer rails -o isomorfeus  # will use project_root/app/isomorfeus for opal files
+      TEXT
+
+      def flat
+        @application_css = '../styles/application.css'
+        @asset_output_directory = File.join('public', 'assets')
+        @js_entrypoints_directory = File.join('javascripts')
+        @conf_rel_prefix = '..'
+        @js_rel_prefix = '..'
+        @opal_directory = options[:opal_name]
+        @styles_directory = 'styles'
+        @webpack_config_directory = 'webpack'
+        @dev_default_targets = 'browser'
+        @pro_default_targets = 'browser'
+        @hmr_hook = ''
+        create_common_directories
+        install_common_things
+        create_file_from_template('application.css.erb', File.join('styles', 'application.css'), {})
+        create_file_from_template('initializer.rb.erb', 'owl_init.rb', { opal_load_path: '' })
+        create_file_from_template('app_loader.rb.erb', 'app_loader.rb', { opal_directory: @opal_directory })
+        add_gem
+        print_message
+      end
+
+      desc "rails", "Install owl configuration into a existing rails project without webpacker, execute from the projects root directory."
+      # <<~TEXT
+      #   Showing directories and files relevant to owl:
+      #     project_root
+      #         +- app
+      #             +- assets
+      #                 +- javascripts  # javascript entries directory
+      #                 +- styles       # directory for stylesheets
+      #             +- opal             # directory for opal application files, can be changed with -o
+      #         +- config
+      #             +- webpack          # directory for webpack configuration files
+      #             +- initializers
+      #                 +- owl.rb       # initializer for owl
+      #         +- node_modules         # directory for node modules
+      #         +- package.json         # package config for npm/yarn and their scripts
+      #         +- public
+      #             +- assets           # directory for compiled output files
+      #         +- Procfile             # config file for foreman
+      #
+      # TEXT
+      option :opal_name, required: false, type: :string, default: 'opal', aliases: '-o', desc: <<~TEXT
+        Set directory name for Opal source files.
+        Example: owl-installer rails -o isomorfeus  # will use project_root/app/isomorfeus for opal files
+      TEXT
+
+      def rails
+        @application_css = '../stylesheets/application.css'
+        @asset_output_directory = File.join('public', 'assets')
+        @js_entrypoints_directory = File.join('app', 'assets', 'javascripts')
+        @conf_rel_prefix = File.join('..', '..')
+        @js_rel_prefix = File.join('..', '..', '..')
+        @opal_directory = File.join('app', options[:opal_name])
+        @styles_directory = File.join('app', 'assets', 'stylesheets')
+        @webpack_config_directory = File.join('config', 'webpack')
+        @dev_default_targets = 'browser'
+        @pro_default_targets = 'browser'
+        @hmr_hook = ''
+        create_directory('app')
+        create_common_directories
+        install_common_things
+        create_file_from_template('initializer.rb.erb', File.join('config', 'initializers', 'opal_webpack_loader.rb'),
+                                  { opal_load_path: "Opal.append_path(File.realdirpath('#{@opal_directory}'))" })
+        add_gem
+        print_message
+      end
+
+      desc "webpacker", "Install owl configuration into a existing rails project with webpacker, execute from the projects root directory."
+      # <<~TEXT
+      #   Showing directories and files relevant to owl:
+      #     project_root
+      #         +- app
+      #             +- assets
+      #                 +- javascripts  # javascript entries directory
+      #                 +- styles       # directory for stylesheets
+      #             +- opal             # directory for opal application files, can be changed with -o
+      #         +- config
+      #             +- webpack          # directory for webpack configuration files
+      #             +- initializers
+      #                 +- owl.rb       # initializer for owl
+      #         +- node_modules         # directory for node modules
+      #         +- package.json         # package config for npm/yarn and their scripts
+      #         +- public
+      #             +- assets           # directory for compiled output files
+      #         +- Procfile             # config file for foreman
+      #
+      # TEXT
+      option :opal_name, required: false, type: :string, default: 'opal', aliases: '-o', desc: <<~TEXT
+        Set directory name for Opal source files.
+        Example: owl-installer rails -o isomorfeus  # will use project_root/app/isomorfeus for opal files
+      TEXT
+
+      def webpacker
+        @application_css = '../stylesheets/application.css'
+        @asset_output_directory = File.join('public', 'assets')
+        @js_entrypoints_directory = File.join('app', 'assets', 'javascripts')
+        @conf_rel_prefix = File.join('..', '..')
+        @js_rel_prefix = File.join('..', '..', '..')
+        @opal_directory = File.join('app', options[:opal_name])
+        @styles_directory = File.join('app', 'assets', 'stylesheets')
+        @webpack_config_directory = File.join('config', 'webpack')
+        @dev_default_targets = 'browser'
+        @pro_default_targets = 'browser'
+        @hmr_hook = ''
+        create_directory('app')
+        create_common_directories
+        install_webpacker_config
+        install_webpacker_package_json
+        install_webpacker_js_entry
+        install_opal_entries
+        create_file_from_template('initializer.rb.erb', File.join('config', 'initializers', 'opal_webpack_loader.rb'),
+                                  { opal_load_path: "Opal.append_path(File.realdirpath('#{@opal_directory}'))" })
+        add_gem
+        print_message
+      end
+
+      private
+
+      def create_directory(directory)
+        unless Dir.exist?(directory)
+          puts "Creating directory #{directory}."
+          FileUtils.mkdir_p(directory)
+        end
+      end
+
+      def create_common_directories
+        create_directory(@webpack_config_directory)
+        create_directory(@js_entrypoints_directory)
+        create_directory(@opal_directory)
+        create_directory(@asset_output_directory)
+        FileUtils.touch(File.join(@asset_output_directory, '.gitkeep'))
+        create_directory(@styles_directory)
+      end
+
+      def install_common_things
+        install_webpack_config
+        install_package_json
+        install_js_entries
+        install_opal_entries
+        install_procfile
+      end
+
+      def install_js_entries
+        erb_hash = { opal_dir: File.join(@js_rel_prefix, @opal_directory), opal_name: options[:opal_name], application_css: @application_css }
+        create_file_from_template('application.js.erb', File.join(@js_entrypoints_directory, 'application.js'), erb_hash)
+        create_file_from_template('application_common.js.erb', File.join(@js_entrypoints_directory, 'application_common.js'),erb_hash)
+        create_file_from_template('application_ssr.js.erb', File.join(@js_entrypoints_directory, 'application_ssr.js'), erb_hash)
+        create_file_from_template('application_web_worker.js.erb', File.join(@js_entrypoints_directory, 'application_web_worker.js'), erb_hash)
+      end
+
+      def install_opal_entries
+        create_file_from_template('opal_loader.rb.erb', File.join(@opal_directory, "#{options[:opal_name]}_loader.rb"), {})
+        create_file_from_template('opal_web_worker_loader.rb.erb', File.join(@opal_directory, "#{options[:opal_name]}_web_worker_loader.rb"), {})
+      end
+
+      def install_package_json
+        if File.exist?('package.json')
+          gem_package_json_template = File.read(File.join(templates_path, 'package.json.erb'))
+          gem_package_json = Oj.load(gem_package_json_template, mode: :strict)
+          package_json_file = File.read('package.json')
+          package_json = Oj.load(package_json_file, mode: :strict)
+          package_json["scripts"] = {} unless package_json.has_key?("scripts")
+          package_json["scripts"]["debug"] = debug_script
+          package_json["scripts"]["development"] = development_script
+          package_json["scripts"]["production_build"] = production_script
+          package_json["devDependencies"] = {} unless package_json.has_key?("devDependencies")
+          package_json["devDependencies"].merge!(gem_package_json["devDependencies"])
+          package_json["dependencies"]["opal-webpack-loader"] = "^#{OpalWebpackLoader::VERSION}"
+          File.write('package.json', Oj.dump(package_json, mode: :strict, indent: 2))
+          puts "Updated package.json, updated scripts and owl dependencies"
+        else
+          erb_hash = {
+            debug_script: debug_script,
+            development_script: development_script,
+            production_script: production_script,
+            owl_version: OpalWebpackLoader::VERSION
+          }
+          create_file_from_template('package.json.erb', 'package.json', erb_hash)
+        end
+      end
+
+      def install_procfile
+        if File.exist?('Procfile')
+          procfile = File.read('Procfile')
+          has_webpack = false
+          lines = procfile.lines
+          lines.each do |line|
+            has_webpack = true if line.start_with?('webpack')
+          end
+          unless has_webpack
+            lines << 'webpack: yarn run development'
+            File.write('Procfile', lines.join("\n"))
+          end
+        else
+          erb_hash = { web_starter: '' }
+          if @js_entrypoints_directory.start_with?('app')
+            erb_hash[:web_starter] = 'web: bundle exec rails s'
+          end
+          create_file_from_template('Procfile.erb', 'Procfile',erb_hash)
+        end
+      end
+
+      def debug_script
+        "webpack-dev-server --config #{File.join(@webpack_config_directory, 'debug.js')}"
+      end
+
+      def development_script
+        "webpack-dev-server --config #{File.join(@webpack_config_directory, 'development.js')}"
+      end
+
+      def production_script
+        "parallel-webpack --config=#{File.join(@webpack_config_directory, 'production.js')}"
+      end
+
+      def install_webpack_config
+        erb_hash = {
+          asset_output_directory: File.join(@conf_rel_prefix, @asset_output_directory),
+          default_targets: @dev_default_targets,
+          js_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application.js'),
+          js_common_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application_common.js'),
+          js_ssr_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application_ssr.js'),
+          js_web_worker_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application_web_worker.js'),
+          opal_directory: File.join(@conf_rel_prefix, @opal_directory),
+          stylesheets_directory: File.join(@conf_rel_prefix, @styles_directory),
+          hmr_hook: @hmr_hook
+        }
+        if @js_entrypoints_directory.start_with?('app')
+          erb_hash[:dev_server_before] = <<~JAVASCRIPT
+                // enable page reload for updates within the app/views directory
+                before: function(app, server) {
+                    chokidar.watch(path.resolve(__dirname, path.join('..', '..', 'app', 'views'))).on('all', function () {
+                        server.sockWrite(server.sockets, 'content-changed');
+                    })
+                },
+          JAVASCRIPT
+        else
+          erb_hash[:dev_server_before] = <<~JAVASCRIPT
+                // uncomment to enable page reload for updates within another directory, which may contain just html files,
+                // for example the 'views' directory:
+                // before: function(app, server) {
+                //     chokidar.watch(path.resolve(__dirname, path.join('..', 'views')).on('all', function () {
+                //         server.sockWrite(server.sockets, 'content-changed');
+                //     })
+                // },
+          JAVASCRIPT
+        end
+        create_file_from_template('debug.js.erb', File.join(@webpack_config_directory, 'debug.js'), erb_hash)
+        create_file_from_template('development.js.erb', File.join(@webpack_config_directory, 'development.js'), erb_hash)
+        erb_hash[:default_targets] = @pro_default_targets
+        create_file_from_template('production.js.erb', File.join(@webpack_config_directory, 'production.js'), erb_hash)
+      end
+
+      def install_webpacker_config
+        environment_js = File.read(File.join('config', 'webpack', 'environment.js'), mode: 'r')
+        new_environment_js = ''
+        environment_js.lines.each do |line|
+          new_environment_js << line
+          if line.start_with?('const { environment }')
+            new_environment_js << "\n"
+            new_environment_js << File.read(File.join(templates_path, 'webpacker.js'), mode: 'r')
+            new_environment_js << "\n"
+          end
+        end
+        File.write(File.join('config', 'webpack', 'environment.js'), new_environment_js)
+      end
+
+      def install_webpacker_js_entry
+        application_js = File.read(File.join('app', 'javascript', 'packs', 'application.js'), mode: 'r')
+        application_js << <<~JAVASCRIPT
+
+        // import and load opal ruby files
+        import init_app from '#{options[:opal_name]}_loader.rb';
+        init_app();
+        Opal.load('#{options[:opal_name]}_loader');
+
+        JAVASCRIPT
+        File.write(File.join('app', 'javascript', 'packs', 'application.js'), application_js)
+      end
+
+      def install_webpacker_package_json
+        package_json_file = File.read('package.json')
+        package_json = Oj.load(package_json_file, mode: :strict)
+        package_json["dependencies"]["opal-webpack-loader"] = "^#{OpalWebpackLoader::VERSION}"
+        File.write('package.json', Oj.dump(package_json, mode: :strict, indent: 2))
+        puts "Updated package.json for opal-webpack-loader"
+      end
+
+      def templates_path
+        File.realpath(File.join(File.dirname(File.realpath(__FILE__)),  'templates'))
+      end
+
+      def create_file_from_template(template_path, target_file_path, data_hash)
+        template = ERB.new(File.read(File.join(templates_path, template_path), mode: 'r'))
+        result = template.result_with_hash(data_hash)
+        if File.exist?(target_file_path)
+          ext = '_owl_new'
+          puts "#{target_file_path} exists, not overwriting, creating #{target_file_path + ext} instead."
+        else
+          ext = ''
+          puts "Creating #{target_file_path}."
+        end
+
+        File.write(target_file_path + ext, result, mode: 'w')
+      end
+
+      def add_gem
+        # TODO specifying a version results in bundler printing a error and not adding the gem
+        # `bundle add opal-webpack-loader -v "#{OpalWebpackLoader::VERSION}" --skip-install`ß´
+      end
+
+      def print_message
+        puts <<~TEXT
+
+          Add the following lines to your Gemfile:
+
+            gem 'opal', github: 'janbiedermann/opal', branch: 'es6_modules_1_2'
+            gem 'opal-webpack-loader', '~> #{OpalWebpackLoader::VERSION}'
+
+          owl currently works only with above opal branch. If you have a existing "gem 'opal'", please replace it with above line.
+
+          Also check above output for files ending in '_owl_new' and merge their contents with the existing files.
+
+          After that run according to your preference either:
+
+            yarn install
+
+          or:
+
+            npm install
+
+          and then:
+
+            bundle install
+
+          For further instructions see http://github.com/isomorfeus/opal-webpack-loader
+
+        TEXT
+      end
+    end
+  end
+end