opal-webpack-loader 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b195faad06e86f99145977d3551f71b22ff4717f9c3750572061a18e88b57c0e
-  data.tar.gz: 943969a8513c3acf8d28da2039a88d418f443c136fab28e3ddf689883b6e9c95
+  metadata.gz: e6c50ef73a0bbe4d3c9d4ed8cb9078866e5d3bc9472f0bb30c088aa34fa13d95
+  data.tar.gz: ecb28e8ef777e9e6615e1dc96efa86873ef822cd440c9d1721a13ca167cbfdb3
 SHA512:
-  metadata.gz: 565979248f76810bcb6783a18dac93276ea69bc6ca45bdeadf2b5c055a21e56f1829d83f3df4ec9ca29e5cea1355a4996efcf9c572fbd6d26429665499a5020f
-  data.tar.gz: 68a3c55de9b28a6ca91a6e98a68e5920cd5ac314aab15e38db09954ea8d9cf311970c768640d9251b4d10fd2c44f63d76a89d09f9ac07ee98f5ee2fdb599770e
+  metadata.gz: 1e87b208b7d296bc16d0f67a15a15a065d006c31f3e526fea78c2a19b3515eeb99ae246e1a9753b3016ce88bfd3637d1ba4305b970ecf54d803a33a79fed6633
+  data.tar.gz: 503e8c96600c0e7fe31a92a6c8d38f78db59b5ff2a5a5893161ea8942f226b91cc648be872eaa9f1db176162ef25f2094df437afd6f84bab13cac8b8d416a564

data/bin/owl-install

@@ -0,0 +1,8 @@
+#!/usr/bin/env ruby
+require 'erb'
+# require 'active_support/core_ext/string'
+require 'thor'
+require 'oj'
+require_relative '../lib/opal-webpack-loader/installer_cli'
+require_relative '../lib/opal-webpack-loader/version'
+OpalWebpackLoader::Installer::CLI.start(ARGV)

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

@@ -43,9 +43,9 @@ module OpalWebpackCompileServer
             result['source_map']['names'] = result['source_map']['names'].map(&:to_s)
           end
           result['required_trees'] = c.required_trees
-          Oj.dump(result)
+          Oj.dump(result, {})
         rescue Exception => e
-          Oj.dump({ 'error' => { 'name' => e.class, 'message' => e.message, 'backtrace' => e.backtrace } })
+          Oj.dump({ 'error' => { 'name' => e.class, 'message' => e.message, 'backtrace' => e.backtrace } }, {})
         end
       end
 
@@ -66,6 +66,7 @@ module OpalWebpackCompileServer
       dir_entries.each do |entry|
         next if entry == '.'
         next if entry == '..'
+        next unless entry
         absolute_path = File.join(path, entry)
         if File.directory?(absolute_path)
           more_path_entries = get_load_path_entries(absolute_path)
@@ -78,13 +79,13 @@ module OpalWebpackCompileServer
     end
 
     def self.get_load_paths
-      load_paths = if File.exist?('bin/rails')
+      load_paths = if File.exist?(File.join('bin', 'rails'))
                      %x{
                        bundle exec rails runner "puts (Rails.configuration.respond_to?(:assets) ? (Rails.configuration.assets.paths + Opal.paths).uniq : Opal.paths)"
                      }
                    else
                      %x{
-                       bundle exec ruby -e 'require "bundler/setup"; Bundler.require; set :run, false if defined? Sinatra; puts Opal.paths'
+                       bundle exec ruby -e 'if File.exist?("app_loader.rb"); require "./app_loader.rb"; else; require "bundler/setup"; Bundler.require; set :run, false if defined? Sinatra; end; puts Opal.paths'
                      }
                    end
       if $? == 0
@@ -102,7 +103,7 @@ module OpalWebpackCompileServer
         end
         cache_obj = { 'opal_load_paths' => load_path_lines, 'opal_load_path_entries' => load_path_entries }
         Dir.mkdir(OpalWebpackCompileServer::OWL_CACHE_DIR) unless Dir.exist?(OpalWebpackCompileServer::OWL_CACHE_DIR)
-        File.write(OpalWebpackCompileServer::OWL_LP_CACHE, Oj.dump(cache_obj))
+        File.write(OpalWebpackCompileServer::OWL_LP_CACHE, Oj.dump(cache_obj, {}))
         load_path_lines
       else
         raise 'Error getting load paths!'

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

@@ -0,0 +1,305 @@
+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_debug.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
+        @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'
+        create_common_directories
+        create_isomorfeus_directories
+        install_webpack_config
+        create_file_from_template('initializer.rb.erb', File.join('config', 'owl_init.rb'), {})
+        add_gem
+        print_message
+      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
+        @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'
+        create_directory(@styles_directory)
+        create_common_directories
+        install_common_things
+        create_file_from_template('initializer.rb.erb', 'owl_init.rb', {})
+        add_gem
+        print_message
+        puts "Make sure to require the owl initializer, e.g. `require './owl_init'`, in your projects startup file."
+      end
+
+      desc "rails", "Install owl configuration into a existing rails project, 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
+        @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')
+        create_directory('app')
+        create_directory(@styles_directory)
+        create_common_directories
+        install_common_things
+        create_file_from_template('initializer.rb.erb', File.join('config', 'initializers', 'opal_webpack_loader.rb'), {})
+        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)
+      end
+
+      def create_isomorfeus_directories
+        create_directory(File.join('isomorfeus', 'components'))
+        create_directory(File.join('isomorfeus', 'models'))
+        create_directory(File.join('isomorfeus', 'operations'))
+        create_directory(File.join('isomorfeus', 'policies'))
+        create_directory(File.join('isomorfeus', 'styles'))
+      end
+
+      def install_common_things
+        install_webpack_config
+        install_package_json
+        install_js_entries
+        install_opal_entry
+        install_procfile
+      end
+
+      def install_js_entries
+        erb_hash = { opal_dir: File.join(@js_rel_prefix, @opal_directory), opal_name: options[:opal_name] }
+        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_debug.js.erb', File.join(@js_entrypoints_directory, 'application_debug.js'), erb_hash)
+        create_file_from_template('application_ssr.js.erb', File.join(@js_entrypoints_directory, 'application_ssr.js'), erb_hash)
+      end
+
+      def install_opal_entry
+        create_file_from_template('opal_loader.rb.erb', File.join(@opal_directory, "#{options[:opal_name]}_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"]["compression-webpack-plugin"] = gem_package_json["devDependencies"]["compression-webpack-plugin"]
+          package_json["devDependencies"]["opal-webpack-loader"] = OpalWebpackLoader::VERSION
+          package_json["devDependencies"]["webpack"] = gem_package_json["devDependencies"]["webpack"]
+          package_json["devDependencies"]["webpack-cli"] = gem_package_json["devDependencies"]["webpack-cli"]
+          package_json["devDependencies"]["webpack-dev-server"] = gem_package_json["devDependencies"]["webpack-dev-server"]
+          package_json["devDependencies"]["webpack-manifest-plugin"] = gem_package_json["devDependencies"]["webpack-manifest-plugin"]
+          File.write('package.json', Oj.dump(package_json, mode: :strict))
+          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
+          create_file_from_template('Procfile.erb', 'Procfile',{})
+        end
+      end
+
+      def debug_script
+        "bundle exec opal-webpack-compile-server start webpack-dev-server --config #{File.join(@webpack_config_directory, 'debug.js')}"
+      end
+
+      def development_script
+        "bundle exec opal-webpack-compile-server start webpack-dev-server --config #{File.join(@webpack_config_directory, 'development.js')}"
+      end
+
+      def production_script
+        "bundle exec opal-webpack-compile-server start 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),
+          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_debug_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application_debug.js'),
+          js_ssr_entry: File.join(@conf_rel_prefix, @js_entrypoints_directory, 'application_ssr.js'),
+          opal_directory: File.join(@conf_rel_prefix, @opal_directory),
+          stylesheets_directory: File.join(@conf_rel_prefix, @styles_directory),
+        }
+        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)
+        create_file_from_template('production.js.erb', File.join(@webpack_config_directory, 'production.js'), erb_hash)
+      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
+        # STDERR.puts File.read('Gemfile')
+        # STDERR.puts OpalWebpackLoader::VERSION
+        # `bundle add opal-webpack-loader -v "#{OpalWebpackLoader::VERSION}" --skip-install`
+        # specifying a version results in a bundler printing a error and not adding the gem
+      end
+
+      def print_message
+        puts <<~TEXT
+        
+          Add the following lines to your Gemfile:
+
+            gem 'opal', github: 'janbiedermann/opal', branch: 'es6_import_export'
+            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

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

@@ -9,5 +9,9 @@ module OpalWebpackLoader
         javascript_include_tag("#{OpalWebpackLoader.client_asset_path}#{path}")
       end
     end
+
+    def application_script_tag
+      javascript_include_tag("#{OpalWebpackLoader.application_js_path}")
+    end
   end
 end

data/lib/opal-webpack-loader/templates/Procfile.erb

@@ -0,0 +1 @@
+webpack: yarn run development

data/lib/opal-webpack-loader/templates/application.js.erb

@@ -0,0 +1,25 @@
+// entry file for the browser environment
+// import npm modules that are valid to use only in the browser
+// for example modules which depend on the window or document objects of the browser
+//
+// example:
+//
+// import ReactDOM from 'react-dom';
+// global.ReactDOM = ReactDOM;
+
+// import modules common to browser and server side rendering (ssr)
+// environments from application_common.js
+import './application_common.js';
+
+// import and load opal ruby files
+import init_app from '<%= opal_dir %>/<%= opal_name %>_loader.rb';
+init_app();
+Opal.load('<%= opal_name %>_loader');
+
+
+// allow for hot reloading
+if (module.hot) {
+    module.hot.accept('./application.js', function() {
+        console.log('Accepting the updated application.js!');
+    })
+}

data/lib/opal-webpack-loader/templates/application_common.js.erb

@@ -0,0 +1,8 @@
+// import here all npm modules that are common to browser and server side rendering (ssr) environments
+// modules should not depend on the window or document objects of the browser
+// use global to make sure they are available globally
+//
+// example:
+//
+// import * as Redux from 'redux';
+// global.Redux = Redux;

data/lib/opal-webpack-loader/templates/application_debug.js.erb

@@ -0,0 +1,13 @@
+// entry file for the browser debugging environment
+
+// import application.js
+import './application.js';
+
+// space additional modules for debugging or helper code
+
+// allow for hot reloading
+if (module.hot) {
+    module.hot.accept('./application_debug.js', function() {
+        console.log('Accepting the updated application_debug.js!');
+    })
+}

data/lib/opal-webpack-loader/templates/application_ssr.js.erb

@@ -0,0 +1,23 @@
+// entry file for the server side rendering environment (ssr)
+// import npm modules that are only valid to use in the server side rendering environment
+// for example modules which depend on objects provided by node js
+//
+// example:
+//
+// import ReactDOMServer from 'react-dom/server';
+// global.ReactDOMServer = ReactDOMServer;
+
+// import modules common to browser and server side rendering (ssr)
+// environments from application_common.js
+import './application_common.js';
+
+// import and load opal ruby files
+import init_app from '<%= opal_dir %>/<%= opal_name %>_loader.rb';
+init_app();
+Opal.load('<%= opal_name %>_loader');
+
+if (module.hot) {
+    module.hot.accept('./application_ssr.js', function() {
+        console.log('Accepting the updated application_ssr.js!');
+    })
+}

data/lib/opal-webpack-loader/templates/debug.js.erb

@@ -0,0 +1,145 @@
+// require requirements used below
+const path = require('path');
+const webpack = require('webpack');
+const OwlResolver = require('opal-webpack-loader/resolver'); // to resolve ruby files
+
+module.exports = {
+    context: path.resolve(__dirname, '<%= opal_directory %>'),
+    mode: "development",
+    optimization: {
+        minimize: false // dont minimize for debugging
+    },
+    performance: {
+        maxAssetSize: 20000000,
+        maxEntrypointSize: 20000000
+    },
+    // use one of these below for source maps
+    devtool: 'source-map', // this works well, good compromise between accuracy and performance
+    // devtool: 'cheap-eval-source-map', // less accurate
+    // devtool: 'inline-source-map', // slowest
+    // devtool: 'inline-cheap-source-map',
+    entry: {
+        application: [path.resolve(__dirname, '<%= js_debug_entry %>')],
+        application_ssr: [path.resolve(__dirname, '<%= js_ssr_entry %>')]
+    },
+    output: {
+        // webpack-dev-server keeps the output in memory
+        filename: '[name].js',
+        path: path.resolve(__dirname, '<%= asset_output_directory %>'),
+        publicPath: 'http://localhost:3035/assets/'
+    },
+    resolve: {
+        plugins: [
+            // this makes it possible for webpack to find ruby files
+            new OwlResolver('resolve', 'resolved')
+        ],
+        alias: {
+            'react-dom': 'react-dom/profiling',
+            'schedule/tracing': 'schedule/tracing-profiling',
+        }
+    },
+    plugins: [
+        // both for hot reloading
+        new webpack.NamedModulesPlugin(),
+        new webpack.HotModuleReplacementPlugin()
+    ],
+    module: {
+        rules: [
+            {
+                // loader for .scss files
+                // test means "test for for file endings"
+                test: /.scss$/,
+                use: [
+                    {
+                        loader: "style-loader",
+                        options: {
+                            hmr: true
+                        }
+                    },
+                    {
+                        loader: "css-loader",
+                        options: {
+                            sourceMap: true, // set to false to speed up hot reloads
+                            minimize: false // set to false to speed up hot reloads
+                        }
+                    },
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            includePaths: [path.resolve(__dirname, '<%= stylesheets_directory %>')],
+                            sourceMap: true // set to false to speed up hot reloads
+                        }
+                    }
+                ]
+            },
+            {
+                // loader for .css files
+                test: /.css$/,
+                use: [
+                    {
+                        loader: "style-loader",
+                        options: {
+                            hmr: true
+                        }
+                    },
+                    {
+                        loader: "css-loader",
+                        options: {
+                            sourceMap: true, // set to false to speed up hot reloads
+                            minimize: false // set to false to speed up hot reloads
+                        }
+                    }
+                ]
+            },
+            {
+                test: /.(png|svg|jpg|gif)$/,
+                use: [
+                    'file-loader'
+                ]
+            },
+            {
+                test: /.(woff|woff2|eot|ttf|otf)$/,
+                use: [
+                    'file-loader'
+                ]
+            },
+            {
+                // opal-webpack-loader will compile and include ruby files in the pack
+                test: /.(rb|js.rb)$/,
+                use: [
+                    {
+                        loader: 'opal-webpack-loader',
+                        options: {
+                            sourceMap: true
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    // configuration for webpack-dev-server
+    devServer: {
+        open: false,
+        lazy: false,
+        port: 3035,
+        hot: true,
+        // hotOnly: true,
+        inline: true,
+        https: false,
+        disableHostCheck: true,
+        headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+        },
+        watchOptions: {
+            // in case of problems with hot reloading uncomment the following two lines:
+            // aggregateTimeout: 250,
+            // poll: 50,
+            ignored: /\bnode_modules\b/
+        },
+        contentBase: path.resolve(__dirname, 'public')
+        // watchContentBase: true
+    }
+};
+