webpacker-for-component 1.0.0 → 1.1.0

data/lib/webpacker-for-component/commands.rb

@@ -0,0 +1,23 @@
+class Webpacker::Commands
+  delegate :config, :compiler, :manifest, to: :@webpacker
+
+  def initialize(webpacker)
+    @webpacker = webpacker
+  end
+
+  def clobber
+    config.public_output_path.rmtree if config.public_output_path.exist?
+    config.cache_path.rmtree if config.cache_path.exist?
+  end
+
+  def bootstrap
+    config.refresh
+    manifest.refresh
+  end
+
+  def compile
+    compiler.compile.tap do |success|
+      manifest.refresh if success
+    end
+  end
+end

data/lib/webpacker-for-component/compiler.rb

@@ -0,0 +1,78 @@
+require "open3"
+require "digest/sha1"
+
+class Webpacker::Compiler
+  # Additional paths that test compiler needs to watch
+  # Webpacker::Compiler.watched_paths << 'bower_components'
+  mattr_accessor(:watched_paths) { [] }
+
+  # Additional environment variables that the compiler is being run with
+  # Webpacker::Compiler.env['FRONTEND_API_KEY'] = 'your_secret_key'
+  mattr_accessor(:env) { {} }
+
+  delegate :config, :logger, to: :@webpacker
+
+  def initialize(webpacker)
+    @webpacker = webpacker
+  end
+
+  def compile
+    if stale?
+      record_compilation_digest
+      run_webpack
+    else
+      true
+    end
+  end
+
+  # Returns true if all the compiled packs are up to date with the underlying asset files.
+  def fresh?
+    watched_files_digest == last_compilation_digest
+  end
+
+  # Returns true if the compiled packs are out of date with the underlying asset files.
+  def stale?
+    !fresh?
+  end
+
+  private
+    def last_compilation_digest
+      compilation_digest_path.read if compilation_digest_path.exist? && config.public_manifest_path.exist?
+    end
+
+    def watched_files_digest
+      files = Dir[*default_watched_paths, *watched_paths].reject { |f| File.directory?(f) }
+      Digest::SHA1.hexdigest(files.map { |f| "#{File.basename(f)}/#{File.mtime(f).utc.to_i}" }.join("/"))
+    end
+
+    def record_compilation_digest
+      config.cache_path.mkpath
+      compilation_digest_path.write(watched_files_digest)
+    end
+
+    def run_webpack
+      logger.info "Compiling…"
+
+      sterr, stdout, status = Open3.capture3(webpack_env, "#{RbConfig.ruby} ./bin/webpack")
+
+      if status.success?
+        logger.info "Compiled all packs in #{config.public_output_path}"
+      else
+        logger.error "Compilation failed:\n#{sterr}\n#{stdout}"
+      end
+
+      status.success?
+    end
+
+    def default_watched_paths
+      ["#{config.source_path}/**/*", "yarn.lock", "package.json", "config/webpack/**/*"].freeze
+    end
+
+    def compilation_digest_path
+      config.cache_path.join(".last-compilation-digest")
+    end
+
+    def webpack_env
+      env.merge("NODE_ENV" => @webpacker.env, "ASSET_HOST" => ActionController::Base.helpers.compute_asset_host)
+    end
+end

data/lib/webpacker-for-component/configuration.rb

@@ -0,0 +1,88 @@
+class Webpacker::Configuration
+  delegate :root_path, :env, to: :@webpacker
+
+  def initialize(webpacker)
+    @webpacker = webpacker
+  end
+
+  def refresh
+    @data = load_for_refresh
+  end
+
+  def dev_server
+    fetch(:dev_server)
+  end
+
+  def compile?
+    fetch(:compile)
+  end
+
+  def source_path
+    root_path.join(fetch(:source_path))
+  end
+
+  def source_entry_path
+    source_path.join(fetch(:source_entry_path))
+  end
+
+  def public_path
+    root_path.join("public")
+  end
+
+  def public_output_path
+    public_path.join(fetch(:public_output_path))
+  end
+
+  def public_manifest_path
+    public_output_path.join("manifest.json")
+  end
+
+  def cache_manifest?
+    fetch(:cache_manifest)
+  end
+
+  def cache_path
+    root_path.join(fetch(:cache_path))
+  end
+
+  private
+  def fetch(key)
+    data.fetch(key, defaults[key])
+  end
+
+  def data
+    @data ||= load
+  end
+
+  def load
+    YAML.load(root_path.join("config/webpacker.yml").read)[env].deep_symbolize_keys
+
+  rescue Errno::ENOENT => e
+    raise "Webpacker configuration file not found #{root_path.join("config/webpacker.yml")}. " \
+      "Please run rails webpacker:install " \
+      "Error: #{e.message}"
+
+    rescue Psych::SyntaxError => e
+      raise "YAML syntax error occurred while parsing #{root_path.join("config/webpacker.yml")}. " \
+        "Please note that YAML must be consistently indented using spaces. Tabs are not allowed. " \
+        "Error: #{e.message}"
+        end
+
+    def load_for_refresh
+      YAML.load(root_path.join("components/angular/config/webpacker.yml").read)[env].deep_symbolize_keys
+    rescue Errno::ENOENT => e
+      raise "Webpacker configuration file not found #{root_path.join("components/angular/config/webpacker.yml")}. " \
+        "Please run rails webpacker:install " \
+        "Error: #{e.message}"
+
+      rescue Psych::SyntaxError => e
+        raise "YAML syntax error occurred while parsing #{config_path.join("components/angular/config/webpacker.yml")}. " \
+          "Please note that YAML must be consistently indented using spaces. Tabs are not allowed. " \
+          "Error: #{e.message}"
+          end
+
+      def defaults
+        @defaults ||= \
+          HashWithIndifferentAccess.new(YAML.load_file(File.expand_path("../../install/config/webpacker.yml", __FILE__))[env])
+      end
+    end

data/lib/webpacker-for-component/dev_server.rb

@@ -0,0 +1,51 @@
+class Webpacker::DevServer
+  # Configure dev server connection timeout (in seconds), default: 0.01
+  # Webpacker.dev_server.connect_timeout = 1
+  mattr_accessor(:connect_timeout) { 0.01 }
+
+  delegate :config, to: :@webpacker
+
+  def initialize(webpacker)
+    @webpacker = webpacker
+  end
+
+  def running?
+    Socket.tcp(host, port, connect_timeout: connect_timeout).close
+    true
+  rescue Errno::ECONNREFUSED, Errno::ETIMEDOUT, NoMethodError
+    false
+  end
+
+  def hot_module_replacing?
+    fetch(:hmr)
+  end
+
+  def host
+    fetch(:host)
+  end
+
+  def port
+    fetch(:port)
+  end
+
+  def https?
+    fetch(:https)
+  end
+
+  def protocol
+    https? ? "https" : "http"
+  end
+
+  def host_with_port
+    "#{host}:#{port}"
+  end
+
+  private
+    def fetch(key)
+      config.dev_server.fetch(key, defaults[key])
+    end
+
+    def defaults
+      config.send(:defaults)[:dev_server]
+    end
+end

data/lib/webpacker-for-component/dev_server_proxy.rb

@@ -0,0 +1,25 @@
+require "rack/proxy"
+
+class Webpacker::DevServerProxy < Rack::Proxy
+  def rewrite_response(response)
+    status, headers, body = response
+    headers.delete "transfer-encoding"
+    headers.delete "content-length" if Webpacker.dev_server.running? && Webpacker.dev_server.https?
+    response
+  end
+
+  def perform_request(env)
+    if env["PATH_INFO"] =~ /#{public_output_uri_path}/ && Webpacker.dev_server.running?
+      env["HTTP_HOST"] = env["HTTP_X_FORWARDED_HOST"] = env["HTTP_X_FORWARDED_SERVER"] = Webpacker.dev_server.host_with_port
+
+      super(env)
+    else
+      @app.call(env)
+    end
+  end
+
+  private
+    def public_output_uri_path
+      Webpacker.config.public_output_path.relative_path_from(Webpacker.config.public_path)
+    end
+end

data/lib/webpacker-for-component/helper.rb

@@ -0,0 +1,65 @@
+module Webpacker::Helper
+  # Computes the full path for a given webpacker asset.
+  # Return relative path using manifest.json and passes it to asset_url helper
+  # This will use asset_path internally, so most of their behaviors will be the same.
+  # Examples:
+  #
+  # In development mode:
+  #   <%= asset_pack_path 'calendar.js' %> # => "/packs/calendar.js"
+  # In production mode:
+  #   <%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"
+  def asset_pack_path(name, **options)
+    asset_path(Webpacker.manifest.lookup(name), **options)
+  end
+  # Creates a script tag that references the named pack file, as compiled by Webpack per the entries list
+  # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
+  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
+  #
+  # Examples:
+  #
+  #   # In development mode:
+  #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <script src="/packs/calendar.js" data-turbolinks-track="reload"></script>
+  #
+  #   # In production mode:
+  #   <%= javascript_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+  def javascript_pack_tag(*names, **options)
+    javascript_include_tag(*sources_from_pack_manifest(names, type: :javascript), **options)
+  end
+
+  # Creates a link tag that references the named pack file, as compiled by Webpack per the entries list
+  # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
+  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
+  #
+  # Note: If the development server is running and hot module replacement is active, this will return nothing.
+  # In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
+  #
+  # Examples:
+  #
+  #   # In development mode:
+  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <link rel="stylesheet" media="screen" href="/packs/calendar.css" data-turbolinks-track="reload" />
+  #
+  #   # In development mode with hot module replacement:
+  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   nil
+  #
+  #   # In production mode:
+  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
+  def stylesheet_pack_tag(*names, **options)
+    unless Webpacker.dev_server.running? && Webpacker.dev_server.hot_module_replacing?
+      stylesheet_link_tag(*sources_from_pack_manifest(names, type: :stylesheet), **options)
+    end
+  end
+
+  private
+    def sources_from_pack_manifest(names, type:)
+      names.map { |name| Webpacker.manifest.lookup(pack_name_with_extension(name, type: type)) }
+    end
+
+    def pack_name_with_extension(name, type:)
+      "#{name}#{compute_asset_extname(name, type: type)}"
+    end
+end

data/lib/webpacker-for-component/instance.rb

@@ -0,0 +1,44 @@
+class Webpacker::Instance
+  cattr_accessor(:logger) { ActiveSupport::TaggedLogging.new(ActiveSupport::Logger.new(STDOUT)) }
+
+  attr_reader :root_path, :config_path
+
+  def initialize(root_path: Rails.root)
+    @root_path = root_path
+  end
+
+  def env
+    (ENV["NODE_ENV"].presence_in(available_environments) ||
+     Rails.env.presence_in(available_environments) ||
+     "production".freeze).inquiry
+  end
+
+  def config
+    @config ||= Webpacker::Configuration.new self
+  end
+
+  def compiler
+    @compiler ||= Webpacker::Compiler.new self
+  end
+
+  def dev_server
+    @dev_server ||= Webpacker::DevServer.new self
+  end
+
+  def manifest
+    @manifest ||= Webpacker::Manifest.new self
+  end
+
+  def commands
+    @commands ||= Webpacker::Commands.new self
+  end
+
+  private
+  def available_environments
+    if root_path.join("components/angular/config/webpacker.yml").exist?
+      YAML.load(root_path.join("components/angular/config/webpacker.yml").read).keys
+    else
+      [].freeze
+    end
+  end
+end

data/lib/webpacker-for-component/manifest.rb

@@ -0,0 +1,79 @@
+# Singleton registry for accessing the packs path using a generated manifest.
+# This allows javascript_pack_tag, stylesheet_pack_tag, asset_pack_path to take a reference to,
+# say, "calendar.js" or "calendar.css" and turn it into "/packs/calendar.js" or
+# "/packs/calendar.css" in development.
+#
+# In production mode, it returns compiles files, like
+# "/packs/calendar-1016838bab065ae1e314.js" and "/packs/calendar-1016838bab065ae1e314.css",
+# for long-term caching.
+#
+# When the configuration is set to on-demand compilation, with the `compile: true` option in
+# the webpacker.yml file, any lookups will be preceeded by a compilation if one is needed.
+class Webpacker::Manifest
+  class MissingEntryError < StandardError; end
+
+  delegate :config, :compiler, :dev_server, to: :@webpacker
+
+  def initialize(webpacker)
+    @webpacker = webpacker
+  end
+
+  def refresh
+    @data = load
+  end
+
+  def lookup(name)
+    compile if compiling?
+    find name
+  end
+
+  private
+    def compiling?
+      config.compile? && !dev_server.running?
+    end
+
+    def compile
+      Webpacker.logger.tagged("Webpacker") { compiler.compile }
+    end
+
+    def find(name)
+      data[name.to_s] || handle_missing_entry(name)
+    end
+
+    def handle_missing_entry(name)
+      raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
+    end
+
+    def missing_file_from_manifest_error(bundle_name)
+      msg = <<-MSG
+Webpacker can't find #{bundle_name} in #{config.public_manifest_path}. Possible causes:
+1. You want to set webpacker.yml value of compile to true for your environment
+   unless you are using the `webpack -w` or the webpack-dev-server.
+2. Webpack has not yet re-run to reflect updates.
+3. You have misconfigured Webpacker's config/webpacker.yml file.
+4. Your Webpack configuration is not creating a manifest.
+Your manifest contains:
+#{JSON.pretty_generate(@data)}
+      MSG
+    end
+
+    def data
+      if config.cache_manifest?
+        @data ||= load
+      else
+        refresh
+      end
+    end
+
+    def load
+      if config.public_manifest_path.exist?
+        react_json=JSON.parse Rails.root.join("public/packs/react/manifest.json").read
+        vue_json=JSON.parse Rails.root.join("public/packs/vue/manifest.json").read
+        angular_json=JSON.parse config.public_manifest_path.read
+        angular_react=react_json.merge(angular_json)
+        angular_react.merge(vue_json)
+      else
+        {}
+      end
+    end
+end