opal-webpack-loader 0.5.0 → 0.5.1

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

@@ -0,0 +1,130 @@
+// 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 in development, to speed up hot reloads
+    },
+    performance: {
+        maxAssetSize: 20000000,
+        maxEntrypointSize: 20000000
+    },
+    entry: {
+        application: [path.resolve(__dirname, '<%= js_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')
+        ]
+    },
+    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: {
+                            minimize: false // set to false to speed up hot reloads
+                        }
+                    },
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            includePaths: [path.resolve(__dirname, '<%= stylesheets_directory %>')],
+                        }
+                    }
+                ]
+            },
+            {
+                // loader for .css files
+                test: /.css$/,
+                use: [
+                    {
+                        loader: "style-loader",
+                        options: {
+                            hmr: true
+                        }
+                    },
+                    {
+                        loader: "css-loader",
+                        options: {
+                            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',
+                    }
+                ]
+            }
+        ]
+    },
+    // 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
+    }
+};
+

data/lib/opal-webpack-loader/templates/initializer.rb.erb

@@ -0,0 +1,11 @@
+env = defined? Rails ? Rails.env : 'development'
+
+if env != 'development'
+  OpalWebpackLoader.client_asset_path = '' # the full path is in the manifest already, like: /packs/website_packs-97fd9c2b7e7bdb112fc1.js
+  OpalWebpackLoader.manifest_path = 'public/assets/manifest.json'
+  OpalWebpackLoader.use_manifest = true
+else
+  OpalWebpackLoader.client_asset_path = 'http://localhost:3035/assets/'
+  OpalWebpackLoader.manifest_path = nil
+  OpalWebpackLoader.use_manifest = false
+end

data/lib/opal-webpack-loader/templates/opal_loader.rb.erb

@@ -0,0 +1,9 @@
+require 'opal'
+
+# the gem opal-autoloader may be used, so its not necessary to use 'require' all the time,
+# just using 'require_tree' to bundle everything is enough:
+#
+# require 'opal-autoloader'
+# require_tree 'my_app' # for a sub directory 'my_app'
+
+

data/lib/opal-webpack-loader/templates/package.json.erb

@@ -0,0 +1,17 @@
+{
+  "dependencies": {
+  },
+  "scripts": {
+    "debug": "<%= debug_script %>",
+    "development": "<%= development_script %>",
+    "production_build": "<%= production_script %>"
+  },
+  "devDependencies": {
+    "compression-webpack-plugin": "^2.0.0",
+    "opal-webpack-loader": "^<%= owl_version %>",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1",
+    "webpack-manifest-plugin": "^2.0.4"
+  }
+}

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

@@ -0,0 +1,107 @@
+const path = require('path');
+const OwlResolver = require('opal-webpack-loader/resolver');
+const CompressionPlugin = require("compression-webpack-plugin"); // for gzipping the packs
+const ManifestPlugin = require('webpack-manifest-plugin');  // for generating the manifest
+
+module.exports = {
+    context: path.resolve(__dirname, '<%= opal_directory %>'),
+    mode: "production",
+    optimization: {
+        minimize: true // minimize
+    },
+    performance: {
+        maxAssetSize: 20000000,
+        maxEntrypointSize: 20000000
+    },
+    entry: {
+        application: [path.resolve(__dirname, '<%= js_entry %>')],
+        application_ssr: [path.resolve(__dirname, '<%= js_ssr_entry %>')]
+    },
+    output: {
+        filename: '[name]-[chunkhash].js', // include fingerprint in file name, so browsers get the latest
+        path: path.resolve(__dirname, '<%= asset_output_directory %>'),
+        publicPath: '/assets/'
+    },
+    resolve: {
+        plugins: [
+            new OwlResolver('resolve', 'resolved') // resolve ruby files
+        ]
+    },
+    plugins: [
+        new CompressionPlugin({ test: /^((?!application_ssr).)*$/ }), // gzip compress, exclude application_ssr.js
+        new ManifestPlugin({ fileName: 'manifest.json' }) // generate manifest
+    ],
+    module: {
+        rules: [
+            {
+                test: /.scss$/,
+                use: [
+                    {
+                        loader: "style-loader",
+                        options: {
+                            hmr: false
+                        }
+                    },
+                    {
+                        loader: "css-loader",
+                        options: {
+                            sourceMap: false, // set to false to speed up hot reloads
+                            minimize: true // set to false to speed up hot reloads
+                        }
+                    },
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            includePath: [path.resolve(__dirname, '<%= stylesheets_directory %>')],
+                            sourceMap: false // set to false to speed up hot reloads
+                        }
+                    }
+                ]
+            },
+            {
+                // loader for .css files
+                test: /.css$/,
+                use: [
+                    {
+                        loader: "style-loader",
+                        options: {
+                            hmr: false
+                        }
+                    },
+                    {
+                        loader: "css-loader",
+                        options: {
+                            sourceMap: false, // set to false to speed up hot reloads
+                            minimize: true // 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: false
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+};
+

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

@@ -1,3 +1,3 @@
 module OpalWebpackLoader
-  VERSION="0.5.0"
+  VERSION="0.5.1"
 end

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

@@ -8,5 +8,9 @@ module OpalWebpackLoader
         "<script type=\"application/javascript\" src=\"#{OpalWebpackLoader.client_asset_path}#{path}\"></script>"
       end
     end
+
+    def application_script_tag
+      "<script type=\"application/javascript\" src=\"#{OpalWebpackLoader.application_js_path}\"></script>"
+    end
   end
 end

data/lib/opal-webpack-loader.rb

@@ -3,28 +3,28 @@ require 'opal-webpack-loader/version'
 require 'opal-webpack-loader/manifest'
 
 module OpalWebpackLoader
-  def self.manifest_path
-    @manifest_path
-  end
-
-  def self.manifest_path=(path)
-    @manifest_path = path
-  end
-
-  def self.client_asset_path
-    @client_asset_path
-  end
-
-  def self.client_asset_path=(path)
-    @client_asset_path = path
-  end
-
-  def self.use_manifest
-    @use_manifest
-  end
-
-  def self.use_manifest=(bool)
-    @use_manifest = bool
+  class << self
+    attr_accessor :client_asset_path
+    attr_accessor :manifest_path
+    attr_accessor :use_manifest
+
+    def application_js_path
+      if OpalWebpackLoader.use_manifest
+        asset_path = OpalWebpackLoader::Manifest.lookup_path_for("application.js")
+        "OpalWebpackLoader.client_asset_path}#{asset_path}"
+      else
+        "#{OpalWebpackLoader.client_asset_path}application.js"
+      end
+    end
+
+    def application_ssr_js_path
+      if OpalWebpackLoader.use_manifest
+        asset_path = OpalWebpackLoader::Manifest.lookup_path_for("application_ssr.js")
+        "OpalWebpackLoader.client_asset_path}#{asset_path}"
+      else
+        "#{OpalWebpackLoader.client_asset_path}application_ssr.js"
+      end
+    end
   end
 end
 
@@ -38,18 +38,20 @@ OpalWebpackLoader.manifest_path = File.join(Dir.getwd, 'public', 'assets', 'mani
 OpalWebpackLoader.client_asset_path = 'http://localhost:3035/assets/'
 OpalWebpackLoader.use_manifest = false
 
+# TODO require yarn instead of npm
+# TODO don't depend on which for non unixes
 npm = `which npm`.chop
 
 if npm != ''
   bin_dir = `npm bin`.chop
   begin
-    owl_npm_version = `#{bin_dir}/opal-webpack-loader-npm-version`.chop
+    owl_npm_version = `#{File.join(bin_dir, 'opal-webpack-loader-npm-version')}`.chop
   rescue
     owl_npm_version = nil
   end
 
   if owl_npm_version != OpalWebpackLoader::VERSION
-    raise "opal-webpack-loader: Incorrect version of npm package found or npm package not installed.\n" +
+    STDERR.puts "opal-webpack-loader: Incorrect version of npm package found or npm package not installed.\n" +
       "Please install the npm package for opal-webpack-loader:\n" +
       "\twith npm:\tnpm install opal-webpack-loader@#{OpalWebpackLoader::VERSION} --save-dev\n" +
       "\tor with yarn:\tyarn add opal-webpack-loader@#{OpalWebpackLoader::VERSION} --dev\n"

data/spec/fixtures/flattering/Gemfile

@@ -0,0 +1,10 @@
+source 'https://rubygems.org'
+git_source(:github) { |repo| "https://github.com/#{repo}.git" }
+
+gem 'puma', '~> 3.12.0', require: false
+
+gem 'roda', '~> 3.15.0'
+
+
+
+

data/spec/fixtures/flattering/app_loader.rb

@@ -0,0 +1,8 @@
+require 'bundler/setup'
+if ENV['FLATTERING_ENV'] && ENV['FLATTERING_ENV'] == 'test'
+  Bundler.require(:default, :test)
+elsif ENV['FLATTERING_ENV'] && ENV['FLATTERING_ENV'] == 'production'
+  Bundler.require(:default, :production)
+else
+  Bundler.require(:default, :development)
+end

data/spec/fixtures/flattering/config.ru

@@ -0,0 +1,22 @@
+require './app_loader.rb'
+
+class App < Roda
+
+
+  route do |r|
+    r.root do
+      <<~HTML
+      <html>
+        <head>
+          <title>Welcome</title>
+        </head>
+        <body>
+          <div>Hello world!</div>
+        </body>
+      </html>
+      HTML
+    end
+  end
+end
+
+run App.app

data/spec/installer_spec.rb

@@ -0,0 +1,96 @@
+require 'spec_helper'
+
+RSpec.describe 'owl installer' do
+  context 'structure: :app' do
+    before do
+      Dir.chdir('spec')
+      Dir.chdir('test_apps')
+      FileUtils.rm_rf('railing') if Dir.exist?('railing')
+    end
+
+    after do
+      Dir.chdir('..') if Dir.pwd.end_with?('railing')
+      FileUtils.rm_rf('railing') if Dir.exist?('railing')
+      Dir.chdir('..')
+      Dir.chdir('..')
+    end
+
+    it 'can install in a rails app without sprockets and webpacker gem' do
+      `bundle exec rails new railing --skip-git --skip-bundle --skip-sprockets --skip-spring --skip-bootsnap`
+      expect(Dir.exist?('railing')).to be true
+      Dir.chdir('railing')
+      arg_val = %w[rails]
+      expect(Dir.exist?(File.join('railing', 'config', 'webpack'))).to be false
+      OpalWebpackLoader::Installer::CLI.start(arg_val)
+
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application.js'))).to be true
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application.js_owl_new'))).to be true
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application_common.js'))).to be true
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application_debug.js'))).to be true
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application_ssr.js'))).to be true
+      expect(File.exist?(File.join('app', 'opal', 'opal_loader.rb'))).to be true
+      expect(File.exist?(File.join('config', 'initializers', 'opal_webpack_loader.rb'))).to be true
+      expect(File.exist?(File.join('config', 'webpack', 'debug.js'))).to be true
+      expect(File.exist?(File.join('config', 'webpack', 'development.js'))).to be true
+      expect(File.exist?(File.join('config', 'webpack', 'production.js'))).to be true
+      expect(File.exist?('package.json')).to be true
+      expect(File.exist?('Procfile')).to be true
+    end
+
+    it 'can install in a rails app without sprockets and webpacker gem specifying another opal files dir' do
+      `bundle exec rails new railing --skip-git --skip-bundle --skip-sprockets  --skip-spring --skip-bootsnap`
+      expect(Dir.exist?('railing')).to be true
+      Dir.chdir('railing')
+      arg_val = %w[rails -o hyperhyper]
+      expect(Dir.exist?(File.join('railing', 'config', 'webpack'))).to be false
+      OpalWebpackLoader::Installer::CLI.start(arg_val)
+
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application.js'))).to be true
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application.js_owl_new'))).to be true
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application_common.js'))).to be true
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application_debug.js'))).to be true
+      expect(File.exist?(File.join('app', 'assets', 'javascripts', 'application_ssr.js'))).to be true
+      expect(File.exist?(File.join('app', 'hyperhyper', 'hyperhyper_loader.rb'))).to be true
+      expect(File.exist?(File.join('config', 'initializers', 'opal_webpack_loader.rb'))).to be true
+      expect(File.exist?(File.join('config', 'webpack', 'debug.js'))).to be true
+      expect(File.exist?(File.join('config', 'webpack', 'development.js'))).to be true
+      expect(File.exist?(File.join('config', 'webpack', 'production.js'))).to be true
+      expect(File.exist?('package.json')).to be true
+      expect(File.exist?('Procfile')).to be true
+    end
+  end
+
+  context 'structure: :flat' do
+    before do
+      Dir.chdir('spec')
+      Dir.chdir('test_apps')
+      FileUtils.rm_rf('flattering') if Dir.exist?('flattering')
+    end
+
+    after do
+      Dir.chdir('..') if Dir.pwd.end_with?('flattering')
+      FileUtils.rm_rf('flattering') if Dir.exist?('flattering')
+      Dir.chdir('..')
+      Dir.chdir('..')
+    end
+
+    it 'can install in a roda app' do
+      FileUtils.cp_r(File.join('..', 'fixtures', 'flattering'), File.join('.'))
+      expect(Dir.exist?('flattering')).to be true
+      Dir.chdir('flattering')
+      arg_val = %w[flat]
+      OpalWebpackLoader::Installer::CLI.start(arg_val)
+      expect(File.exist?(File.join('javascripts', 'application.js'))).to be true
+      expect(File.exist?(File.join('javascripts', 'application_common.js'))).to be true
+      expect(File.exist?(File.join('javascripts', 'application_debug.js'))).to be true
+      expect(File.exist?(File.join('javascripts', 'application_ssr.js'))).to be true
+      expect(File.exist?(File.join('opal', 'opal_loader.rb'))).to be true
+      expect(File.exist?(File.join('owl_init.rb'))).to be true
+      expect(File.exist?(File.join('webpack', 'debug.js'))).to be true
+      expect(File.exist?(File.join('webpack', 'development.js'))).to be true
+      expect(File.exist?(File.join('webpack', 'production.js'))).to be true
+      expect(File.exist?('package.json')).to be true
+      expect(File.exist?('Procfile')).to be true
+    end
+  end
+end

data/spec/owl_spec.rb

@@ -0,0 +1,86 @@
+require 'spec_helper'
+
+RSpec.describe 'owl' do
+  context 'in a rails app' do
+    before do
+      Dir.chdir('spec')
+      Dir.chdir('test_apps')
+      FileUtils.rm_rf('railing') if Dir.exist?('railing')
+    end
+
+    after do
+      Dir.chdir('..') if Dir.pwd.end_with?('railing')
+      FileUtils.rm_rf('railing') if Dir.exist?('railing')
+      Dir.chdir('..')
+      Dir.chdir('..')
+    end
+
+    it 'can run the production build script' do
+      `bundle exec rails new railing --skip-git --skip-bundle --skip-sprockets --skip-spring --skip-bootsnap`
+      expect(Dir.exist?('railing')).to be true
+      Dir.chdir('railing')
+      arg_val = %w[rails]
+      expect(Dir.exist?(File.join('railing', 'config', 'webpack'))).to be false
+      OpalWebpackLoader::Installer::CLI.start(arg_val)
+      FileUtils.mv(File.join('app', 'assets', 'javascripts', 'application.js_owl_new'), File.join('app', 'assets', 'javascripts', 'application.js´'))
+      gemfile = File.read('Gemfile')
+      gemfile << <<~GEMS
+
+      gem 'opal', github: 'janbiedermann/opal', branch: 'es6_import_export'
+      gem 'opal-webpack-loader', path: '#{File.realpath(File.join('..','..', '..', '..', 'opal-webpack-loader'))}'
+
+      GEMS
+      File.write('Gemfile', gemfile)
+      `yarn install`
+      # bundler set some environment things, but we need a clean environment, so things don't get mixed up, use env
+      `env -i PATH="#{ENV['PATH']}" bundle install`
+      expect(File.exist?('Gemfile.lock')).to be true
+      `env -i PATH="#{ENV['PATH']}" yarn run production_build`
+      expect(File.exist?(File.join('public', 'assets', 'manifest.json'))).to be true
+      manifest = Oj.load(File.read(File.join('public', 'assets', 'manifest.json')), mode: :strict)
+      application_js = manifest['application.js']
+      expect(File.exist?(File.join('public', application_js))).to be true
+    end
+  end
+
+  context 'in a roda app' do
+    before do
+      Dir.chdir('spec')
+      Dir.chdir('test_apps')
+      FileUtils.rm_rf('flattering') if Dir.exist?('flattering')
+    end
+
+    after do
+      Dir.chdir('..') if Dir.pwd.end_with?('flattering')
+      FileUtils.rm_rf('flattering') if Dir.exist?('flattering')
+      Dir.chdir('..')
+      Dir.chdir('..')
+    end
+
+    it 'can install in a roda app' do
+      FileUtils.cp_r(File.join('..', 'fixtures', 'flattering'), File.join('.'))
+      expect(Dir.exist?('flattering')).to be true
+      Dir.chdir('flattering')
+      arg_val = %w[flat]
+      OpalWebpackLoader::Installer::CLI.start(arg_val)
+
+      gemfile = File.read('Gemfile')
+      gemfile << <<~GEMS
+
+      gem 'opal', github: 'janbiedermann/opal', branch: 'es6_import_export'
+      gem 'opal-webpack-loader', path: '#{File.realpath(File.join('..','..', '..', '..', 'opal-webpack-loader'))}'
+
+      GEMS
+      File.write('Gemfile', gemfile)
+      `yarn install`
+      # bundler set some environment things, but we need a clean environment, so things don't get mixed up, use env
+      `env -i PATH="#{ENV['PATH']}" bundle install`
+      expect(File.exist?('Gemfile.lock')).to be true
+      `env -i PATH="#{ENV['PATH']}" yarn run production_build`
+      expect(File.exist?(File.join('public', 'assets', 'manifest.json'))).to be true
+      manifest = Oj.load(File.read(File.join('public', 'assets', 'manifest.json')), mode: :strict)
+      application_js = manifest['application.js']
+      expect(File.exist?(File.join('public', application_js))).to be true
+    end
+  end
+end

data/spec/spec_helper.rb

@@ -0,0 +1,16 @@
+require 'fileutils'
+require 'oj'
+require 'thor'
+require_relative '../lib/opal-webpack-loader/installer_cli'
+
+RSpec.configure do |config|
+  config.expect_with :rspec do |expectations|
+    expectations.include_chain_clauses_in_custom_matcher_descriptions = true
+  end
+
+  config.mock_with :rspec do |mocks|
+    mocks.verify_partial_doubles = true
+  end
+
+  config.shared_context_metadata_behavior = :apply_to_host_groups
+end