webpack_native 0.2.9

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: f7f1a68d09162386737acf2c548fa7f5b15f41b583d442d11d3a4f565f79c9c8
+  data.tar.gz: 2f0e25eb8bd5716680a903b5fefe38dc0f798971b43755b452f67bba7b8057a1
+SHA512:
+  metadata.gz: c7c21e4f8779da0840b67d4521ee2b6860cfacdd8378c42f0f4442200e73a7f24dfe36fcf9b30cc4aa9b16666f886d65c9d31fd7de92f03d286771f60b400c2f
+  data.tar.gz: acf37985bcfded4ad4f3f61ab63aa7844145200004441555517d301d119b8316f5e7dade17ccdcab9c0ee1ac7a12caa737839a289aff477964c5f58fd0320386

data/lib/generators/webpack_native/dev_generator.rb

@@ -0,0 +1,16 @@
+class WebpackNative::DevGenerator < Rails::Generators::Base
+
+  def generate_development_assets
+    compiling_notice = "Compiling for development..."
+    puts "\n" + "\e[36m#{compiling_notice}\e[0m" + "\n\n"
+
+    Mutex.new.synchronize do
+      Dir.chdir "#{Rails.root}/app/webpack_native" do
+        result = %x{ npm run build:dev }
+        puts "\n"
+        puts result
+      end
+    end
+  end
+
+end

data/lib/generators/webpack_native/helper_generator.rb

@@ -0,0 +1,22 @@
+class WebpackNative::HelperGenerator < Rails::Generators::Base
+
+  # our templates location:
+  source_root File.expand_path('templates', __dir__)
+
+  #this is used to generate/add the helper file to rails project
+  def add_webpack_helper
+    template "webpack_native_helper.rb", File.join("app/helpers", "webpack_native_helper.rb")
+  end
+
+  # include_webpack_helper in application_controller.rb
+  def include_webpack_helper
+    application_controller = "#{Rails.root}/app/controllers/application_controller.rb"
+
+    include_webpack_helper = "\n\tinclude WebpackNativeHelper"
+
+    class_declaration = 'class ApplicationController < ActionController::Base'
+
+    inject_into_file application_controller, include_webpack_helper, after: class_declaration
+  end
+
+end

data/lib/generators/webpack_native/install_generator.rb

@@ -0,0 +1,60 @@
+class WebpackNative::InstallGenerator < Rails::Generators::Base
+
+  # our templates location:
+  source_root File.expand_path('templates', __dir__)
+
+  desc "Generates webpack_native foldere with basic files package.json webpack.config.js as well as the src folder with stylesheets & javascripts & images folders"
+
+  # Note: everything we we will copy to our Rails app is within 'templates' folder
+
+  # (1) we copy webpack_native folder into Rails /app folder
+  def add_webpack_native_folder
+    directory 'webpack_native', 'app/webpack_native'
+    # Not sure but using the gem from rubygems... seems like the "images" directory isn't created when this generator runs, in the meantime let's add it (once again maybe?)
+    images_directory = 'app/webpack_native/src/images'
+    empty_directory(images_directory) unless Dir.exist?(images_directory)
+  end
+
+  # (2) insert necessary helpers in the layouts/application.html.erb to render the <link> and <javascript> tags
+  def inject_stylesheets_and_javascript_tags
+    application_layout = "#{Rails.root}/app/views/layouts/application.html.erb"
+
+    stylesheets_tag = "<%= webpack_stylesheet_url 'application', media: 'all', 'data-turbolinks-track': 'reload' %>"
+
+    javascripts_tag = "<%= webpack_javascript_url 'application', 'data-turbolinks-track': 'reload' %>"
+
+    inject_into_file application_layout, "\n\t\t#{stylesheets_tag}\n\t\t#{javascripts_tag}\n", :before => '</head>'
+  end
+
+  # (3) run 'npm install' inside app/webpack_native folder to install the base modules
+  def run_npm_install
+    install_notice = "\n||==>> Installing Node Modules... \n"
+    wait_notice = "** This can take a while. Please be patient!\n\n"
+
+    puts "\e[36m#{install_notice}\e[0m" # colorize output in cyan
+    puts "\e[33m#{wait_notice}\e[0m" # colorize output in brown
+    # more colors can be found at: https://stackoverflow.com/questions/1489183/colorized-ruby-output-to-the-terminal
+
+    Dir.chdir "#{Rails.root}/app/webpack_native" do
+      %x{ npm install }
+    end
+  end
+
+  # This step was moved to railtie class, it's better to run webpack within the gem after initialize than injecting the code in config.ru
+  # (4) When the server starts, start webpack in a separate thread (this should be done in config.ru)
+  # def inject_webpack_command
+  #   webpack_command = <<-RUBY
+  #   Thread.new do
+  #     Dir.chdir "#{Rails.root}/app/webpack_native" do
+  #       %x{ npm run build }
+  #     end
+  #   end
+  #   RUBY
+  #
+  #   # https://stackoverflow.com/questions/8543904/how-to-run-my-ruby-code-after-rails-server-start
+  #   config_ru = "#{Rails.root}/config.ru"
+  #
+  #   inject_into_file config_ru, webpack_command, before: 'run Rails.application'
+  # end
+
+end

data/lib/generators/webpack_native/prod_generator.rb

@@ -0,0 +1,16 @@
+class WebpackNative::ProdGenerator < Rails::Generators::Base
+
+  def generate_production_assets
+    compiling_notice = "Compiling for production..."
+    puts "\n" + "\e[36m#{compiling_notice}\e[0m" + "\n\n"
+
+    Mutex.new.synchronize do
+      Dir.chdir "#{Rails.root}/app/webpack_native" do
+        result = %x{ npm run build:prod }
+        puts "\n"
+        puts result
+      end
+    end
+  end
+
+end

data/lib/generators/webpack_native/templates/webpack_native/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "webpack_native",
+  "version": "1.0.0",
+  "description": "",
+  "main": "webpack.config.js",
+  "scripts": {
+    "build": "webpack --mode=development --watch --colors",
+    "build:dev": "webpack --mode=development --colors",
+    "build:prod": "webpack --mode=production --colors"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "autoprefixer": "^10.0.0",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^4.3.0",
+    "file-loader": "^6.1.0",
+    "mini-css-extract-plugin": "^0.11.2",
+    "node-sass": "^4.14.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "postcss-loader": "^4.0.2",
+    "sass-loader": "^10.0.2",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-manifest-plugin": "^2.2.0"
+  },
+  "dependencies": {
+    "turbolinks": "^5.2.0",
+    "@rails/ujs": "^6.0.0"
+  }
+}

data/lib/generators/webpack_native/templates/webpack_native/src/javascripts/application.js

@@ -0,0 +1,12 @@
+// Do not remove this line, all your @import will goes into webpack_native/stylesheets/application.scss
+import '../stylesheets/application.scss';
+// the following line requires that images folder exists
+require.context('../images', true, /\.(gif|jpeg|jpg|png|svg)$/i);
+
+require("@rails/ujs").start();
+require("turbolinks").start();
+
+// your JavaScript code here...
+// document.addEventListener('turbolinks:load', () => {
+//   alert('hello webpackNative!')
+// });

data/lib/generators/webpack_native/templates/webpack_native/src/stylesheets/application.scss

@@ -0,0 +1 @@
+// This is where you write your css or import other scss/css files

data/lib/generators/webpack_native/templates/webpack_native/webpack.config.js

@@ -0,0 +1,94 @@
+const path = require('path');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const WebpackManifestPlugin = require('webpack-manifest-plugin');
+const webpack = require('webpack');
+
+module.exports = (env, options) => {
+
+  const devMode = options.mode !== 'production';
+
+  return {
+
+    devtool: "cheap-module-eval-source-map",
+    optimization: {
+      minimizer: [
+        new TerserJSPlugin({}),
+        new OptimizeCSSAssetsPlugin({})
+      ],
+    },
+    entry: {
+      application: "./src/javascripts/application.js"
+    },
+    output: {
+      filename: devMode ? '[name].js' : '[name]-[contenthash].js',
+      path: path.resolve(__dirname, '../../public/webpack_native')
+    },
+    module: {
+      rules: [
+        {
+          test: /\.m?js$/,
+          exclude: /(node_modules|bower_components)/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env']
+            }
+          }
+        },
+        {
+          test: /\.css|.scss$/i,
+          use: [
+            // 'style-loader',
+            // MiniCssExtractPlugin.loader,
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                hmr: true,
+              },
+            },
+            { loader: 'css-loader', options: { importLoaders: 1 } },
+
+            'sass-loader'
+          ],
+        },
+        {
+          test: /\.(png|jpg|gif|svg)$/i,
+          use: [
+            {
+              loader: 'url-loader',
+              options: {
+                limit: 8192,
+                name: devMode ? '[name].[ext]' : '[name]-[hash:7].[ext]'
+              },
+            },
+            // { loader: 'image-webpack-loader' }
+          ],
+        }
+      ]
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        // $: 'jquery',
+        // jQuery: 'jquery'
+      }),
+      new WebpackManifestPlugin(),
+      new CleanWebpackPlugin(),
+      new MiniCssExtractPlugin({
+        filename: devMode ? '[name].css' : '[name]-[contenthash].css',
+      })
+    ],
+    // resolve: {
+    //   alias: {},
+    //   modules: [
+    //     path.resolve(__dirname, '../../vendor/javascripts'),
+    //     path.resolve(__dirname, '../../vendor/stylesheets',
+    //     'node_modules'
+    //   ]
+    // }
+
+  }
+
+}

data/lib/generators/webpack_native/templates/webpack_native_helper.rb

@@ -0,0 +1,45 @@
+module WebpackNativeHelper
+
+  def webpack_stylesheet_url(asset, **html_options)
+    html_options = html_options.merge(
+      href: "/webpack_native/#{webpack_manifest_file.fetch("#{asset}.css")}",
+      rel: "stylesheet"
+    )
+    tag.link(html_options).html_safe
+  end
+
+  def webpack_javascript_url(asset, **html_options)
+    html_options = html_options.merge(
+      type: "text/javascript",
+      src: "/webpack_native/#{webpack_manifest_file.fetch("#{asset}.js")}"
+    )
+    content_tag("script".freeze, nil, html_options).html_safe
+    # or tag.script(html_options).html_safe
+  end
+
+  def webpack_image_url(file_name, **options)
+    image_tag("/webpack_native/#{file_name}", **options)
+  end
+
+  private
+
+    def webpack_manifest_file
+      # in production, webpack_manifest_file is initialized in railtie.rb file to load one time only, while in development we call load_webpack_manifest on each new request
+
+      # so we always start by checking webpack_manifest_file from the initialized configuration, if not found (which is the case for development) we fetch get it from the filesystem
+
+      Rails.configuration.x.webpack_native.webpack_manifest_file || load_webpack_manifest
+    end
+
+    def load_webpack_manifest
+      # Set WEBPACK_MANIFEST_PATH to point to the manifest file
+      webpack_manifest_path = Rails.root.join('public', 'webpack_native', 'manifest.json')
+      JSON.parse(File.read(webpack_manifest_path))
+    rescue Errno::ENOENT
+      fail "The webpack manifest file does not exist. Hint: run webpack command."
+    end
+
+    # we make load_webpack_manifest method as a module function so we can call it from railtie.rb file withing the initializer.
+    module_function :load_webpack_manifest
+
+end

data/lib/webpack_native.rb

@@ -0,0 +1,20 @@
+require "webpack_native/version"
+require 'generators/webpack_native/templates/webpack_native_helper'
+require 'webpack_native/runner'
+require 'webpack_native/railtie' if defined?(Rails)
+
+module WebpackNative
+  # require the webpack_helper file which is within templates folder
+  def self.logger
+    @@logger ||= defined?(Rails) ? ActiveSupport::Logger.new(STDOUT) : nil
+  end
+
+  def self.logger=(logger)
+    @@logger = logger
+  end
+end
+
+# include WebpackNativeHelper for ActionView
+ActiveSupport.on_load :action_view do
+  ::ActionView::Base.send :include, WebpackNativeHelper
+end

data/lib/webpack_native/railtie.rb

@@ -0,0 +1,35 @@
+require 'rails'
+require "open3"
+
+class WebpackNative::Railtie < ::Rails::Railtie
+
+  initializer 'Rails logger' do
+    WebpackNative.logger = ActiveSupport::Logger.new(STDOUT)
+  end
+
+  initializer "webpack_native_set_manifest" do
+    if Rails.env.production?
+      require_relative 'generators/webpack_native/templates/webpack_native_helper.rb'
+      Rails.configuration.x.webpack_native.webpack_manifest_file = WebpackNativeHelper.load_webpack_manifest
+    end
+  end
+
+  def start_webpack
+    Mutex.new.synchronize do
+      Dir.chdir "#{Rails.root}/app/webpack_native" do
+        # %x{ ./bin/webpack --watch --colors --progress }
+        runner = WebpackNative::Runner.new('npm run build')
+        runner.run
+      end
+    end
+  end
+
+  initializer "run_webpack_build_cmd" do
+    config.after_initialize do
+      if defined?(Rails::Server)
+        Thread.new { start_webpack }
+      end
+    end
+  end
+
+end

data/lib/webpack_native/runner.rb

@@ -0,0 +1,88 @@
+require 'open3'
+
+class WebpackNative::Runner
+  attr_reader :cmd, :exit_status, :stdout, :stderr
+
+  # Run a command, return runner instance
+  # @param cmd [String,Array<String>] command to execute
+  def self.run(*cmd)
+    Runner.new(*cmd).run
+  end
+
+  # Run a command, raise Runner::Error if it fails
+  # @param cmd [String,Array<String>] command to execute
+  # @raise [Runner::Error]
+  def self.run!(*cmd)
+    Runner.new(*cmd).run!
+  end
+
+  # Run a command, return true if it succeeds, false if not
+  # @param cmd [String,Array<String>] command to execute
+  # @return [Boolean]
+  def self.run?(*cmd)
+    Runner.new(*cmd).run?
+  end
+
+  Error = Class.new(StandardError)
+
+  # @param cmd [String,Array<String>] command to execute
+  def initialize(cmd)
+    @cmd = cmd.is_a?(Array) ? cmd.join(' ') : cmd
+    @stdout = +''
+    @stderr = +''
+    @exit_status = nil
+  end
+
+  # @return [Boolean] success or failure?
+  def success?
+    exit_status.zero?
+  end
+
+  # Run the command, return self
+  # @return [Runner]
+  def run
+    Open3.popen3(cmd) do |stdin, stdout, stderr, wait_thr|
+      until [stdout, stderr].all?(&:eof?)
+        readable = IO.select([stdout, stderr])
+        next unless readable&.first
+
+        readable.first.each do |stream|
+          data = +''
+          # rubocop:disable Lint/HandleExceptions
+          begin
+            stream.read_nonblock(1024, data)
+          rescue EOFError
+            # ignore, it's expected for read_nonblock to raise EOFError
+            # when all is read
+          end
+
+          if stream == stdout
+            @stdout << data
+            $stdout.write(data)
+          else
+            @stderr << data
+            $stderr.write(data)
+          end
+        end
+      end
+      @exit_status = wait_thr.value.exitstatus
+    end
+
+    self
+  end
+
+  # Run the command and return stdout, raise if fails
+  # @return stdout [String]
+  # @raise [Runner::Error]
+  def run!
+    return run.stdout if run.success?
+
+    raise(Error, "command failed, exit: %d - stdout: %s / stderr: %s" % [exit_status, stdout, stderr])
+  end
+
+  # Run the command and return true if success, false if failure
+  # @return success [Boolean]
+  def run?
+    run.success?
+  end
+end

data/lib/webpack_native/version.rb

@@ -0,0 +1,3 @@
+module WebpackNative
+  VERSION = "0.2.9"
+end

metadata

@@ -0,0 +1,57 @@
+--- !ruby/object:Gem::Specification
+name: webpack_native
+version: !ruby/object:Gem::Version
+  version: 0.2.9
+platform: ruby
+authors:
+- scratchoo
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-10-03 00:00:00.000000000 Z
+dependencies: []
+description: Use vanilla webpack to manage your assets efficiently, no webpacker or
+  asset pipeline anymore!
+email:
+- hello@scratchoo.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/generators/webpack_native/dev_generator.rb
+- lib/generators/webpack_native/helper_generator.rb
+- lib/generators/webpack_native/install_generator.rb
+- lib/generators/webpack_native/prod_generator.rb
+- lib/generators/webpack_native/templates/webpack_native/package.json
+- lib/generators/webpack_native/templates/webpack_native/src/javascripts/application.js
+- lib/generators/webpack_native/templates/webpack_native/src/stylesheets/application.scss
+- lib/generators/webpack_native/templates/webpack_native/webpack.config.js
+- lib/generators/webpack_native/templates/webpack_native_helper.rb
+- lib/webpack_native.rb
+- lib/webpack_native/railtie.rb
+- lib/webpack_native/runner.rb
+- lib/webpack_native/version.rb
+homepage: https://www.github.com/scratchoo/webpack_native
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.3.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.1.2
+signing_key: 
+specification_version: 4
+summary: Vanilla Webpack For Rails Applications
+test_files: []