webpack 5

Gemfile

@@ -37,7 +37,6 @@ gem 'sprockets-rails', '~> 3.0'
 gem 'responders', '~> 3.0'
 gem 'roadie-rails', '~> 3.0'
 gem 'deacon', '~> 1.0'
-gem 'webpack-rails', '~> 0.9.8'
 gem 'mail', '~> 2.7'
 gem 'sshkey', '~> 2.0'
 gem 'dynflow', '>= 1.6.5', '< 2.0.0'

Procfile

@@ -2,4 +2,7 @@
 # If you wish to use a different server then the default, use e.g. `export RAILS_STARTUP='puma -w 3 -p 3000 --preload'`
 rails: [ -n "$RAILS_STARTUP" ] && env PRY_WARNING=1 $RAILS_STARTUP || [ -n "$BIND" ] && bin/rails server -b $BIND || env PRY_WARNING=1 bin/rails server
 # you can use WEBPACK_OPTS to customize webpack server, e.g. 'WEBPACK_OPTS='--https --key /path/to/key --cert /path/to/cert.pem --cacert /path/to/cacert.pem' foreman start '
-webpack: [ -n "$NODE_ENV" ] && ./node_modules/.bin/webpack-dev-server-without-h2 --config config/webpack.config.js $WEBPACK_OPTS || env NODE_ENV=development ./node_modules/.bin/webpack-dev-server-without-h2 --config config/webpack.config.js $WEBPACK_OPTS
+webpack: [ -n "$NODE_ENV" ] && npx webpack --config config/webpack.config.js --watch $WEBPACK_OPTS || env NODE_ENV=development npx webpack --config config/webpack.config.js --watch --analyze
+#TODO readme/forklift to change/remove --key to --server-options-key
+# --public -> --client-web-socket-url and see why it doesnt work
+# --https --> --server-type

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
+//= link late_load.js
 //= link_tree ../../../vendor/assets/fonts
 //= link_tree ../images
 //= link application.css

app/assets/javascripts/application.js

@@ -7,9 +7,22 @@
 //= require lookup_keys
 
 $(function() {
-  $(document).trigger('ContentLoad');
+  if(window.allJsLoaded){
+    $(document).trigger('ContentLoad');
+  }
+  else {
+  $(document).on('loadJS', function() {
+    $(document).trigger('ContentLoad');
+  });}
 });
 
+
+// Override jQuery's ready function to run only after all scripts are loaded instead of when the DOM is ready
+$.fn.ready = function(fn) {
+  this.on('loadJS', fn);
+  return this;
+};
+
 // Prevents all links with the disabled attribute set to "disabled"
 // from being clicked.
 var handleDisabledClick = function(event, element){
@@ -21,7 +34,6 @@ var handleDisabledClick = function(event, element){
 $(document).on('click', 'a[disabled="disabled"]', function(event) {
   return handleDisabledClick(event, this);
 });
-
 function onContentLoad() {
   if ($('input[focus_on_load=true]').length > 0) {
     $('input[focus_on_load]')

app/assets/javascripts/late_load.js

@@ -0,0 +1,53 @@
+function load_dynamic_javascripts(html) {
+  function waitForAllLoaded() {
+    // Wait for all plugins js modules to be loaded before loading the javascript content
+    return new Promise(function(resolve) {
+      // window.allPluginsLoaded is set to {} when plugins are starting to load
+      // if there are no plugins window.allPluginsLoaded is never defined
+      if (window.allPluginsLoaded === undefined || Object.values(window.allPluginsLoaded).every(Boolean)) {
+        resolve();
+      } else {
+        function handleLoad() {
+          if (window.allPluginsLoaded === undefined || Object.values(window.allPluginsLoaded).every(Boolean)) {
+            resolve();
+            // Remove the event listener
+            document.removeEventListener('loadPlugin', handleLoad);
+          }
+        }
+        document.addEventListener('loadPlugin', handleLoad);
+      }
+    });
+  }
+  waitForAllLoaded().then(async function() {
+    // parse html string
+    var template = document.createElement('template');
+    template.innerHTML = html;
+    var doc = new DOMParser().parseFromString(html, 'text/html');
+    var copyChildren = [...doc.head.children];
+    const loadScript = async scripts => {
+      if (scripts.length === 0) {
+        // All scripts are loaded
+        window.allJsLoaded = true;
+        const loadJS = new Event('loadJS');
+        document.dispatchEvent(loadJS);
+        return;
+      }
+      const script = scripts.shift();
+      if (script.src) {
+        // if script is just a link, add it to the head
+        const scriptTag = document.createElement('script');
+        scriptTag.src = script.src;
+        scriptTag.onload = function() {
+          // To load the next script only after the current one is loaded
+          loadScript(scripts);
+        };
+        document.head.appendChild(scriptTag);
+      } else {
+        // if the script is a script tag, evaluate it and load the next one
+        await eval(script.innerHTML);
+        loadScript(scripts);
+      }
+    };
+    loadScript(copyChildren);
+  });
+}

app/controllers/application_controller.rb

@@ -23,7 +23,6 @@ class ApplicationController < ActionController::Base
   before_action :set_taxonomy, :require_mail, :check_empty_taxonomy
   before_action :authorize
   before_action :welcome, :find_selected_columns, :only => :index, :unless => :api_request?
-  prepend_before_action :allow_webpack, if: -> { Rails.configuration.webpack.dev_server.enabled }
   around_action :set_timezone
 
   attr_reader :original_search_parameter
@@ -399,21 +398,6 @@ def parameter_filter_context
     Foreman::ParameterFilter::Context.new(:ui, controller_name, params[:action])
   end
 
-  def allow_webpack
-    webpack_csp = {
-      script_src: [webpack_server], connect_src: [webpack_server],
-      style_src: [webpack_server], img_src: [webpack_server],
-      font_src: ["data: #{webpack_server}"], default_src: [webpack_server]
-    }
-
-    append_content_security_policy_directives(webpack_csp)
-  end
-
-  def webpack_server
-    port = Rails.configuration.webpack.dev_server.port
-    @dev_server ||= "#{request.protocol}#{request.host}:#{port}"
-  end
-
   class << self
     def parameter_filter_context
       Foreman::ParameterFilter::Context.new(:ui, controller_name, nil)

app/helpers/application_helper.rb

@@ -348,11 +348,6 @@ def hosts_count(resource_name = controller.resource_name)
     @hosts_count ||= HostCounter.new(resource_name)
   end
 
-  def webpack_dev_server
-    return unless Rails.configuration.webpack.dev_server.enabled
-    javascript_include_tag "#{@dev_server}/webpack-dev-server.js"
-  end
-
   def accessible_resource_records(resource, order = :name)
     klass = resource.to_s.classify.constantize
     klass = klass.with_taxonomy_scope_override(@location, @organization) if klass.include? Taxonomix

app/helpers/layout_helper.rb

@@ -98,6 +98,29 @@ def javascript(*args)
     content_for(:javascripts) { javascript_include_tag(*args) }
   end
 
+  def javascript_include_tag(*params, **kwargs)
+    # Workaround for overriding javascript load with webpack_asset_paths, should be removed when webpack_asset_paths is removed
+    if kwargs[:source] == "webpack_asset_paths"
+      kwargs[:webpacked]
+    else
+      super(*params, **kwargs)
+    end
+  end
+
+  # @deprecated Previously provided by webpack-rails
+  def webpack_asset_paths(plugin_name, extension: 'js')
+    if extension == 'js'
+      Foreman::Deprecation.deprecation_warning('3.12', '`webpack_asset_paths` is deprecated, use `content_for(:javascripts) { webpacked_plugins_js_for(plugin_name) }` instead.')
+      [{
+        source: 'webpack_asset_paths',
+        webpacked: webpacked_plugins_js_for(plugin_name.to_sym),
+      }]
+    elsif extension == 'css'
+      Foreman::Deprecation.deprecation_warning('3.12', '`webpack_asset_paths` is deprecated and not needed for css assets.')
+      nil
+    end
+  end
+
   # The target should have class="collapse [out|in]" out means collapsed on load and in means expanded.
   # Target must also have a unique id.
   def collapsing_header(title, target, collapsed = '')

app/helpers/reactjs_helper.rb

@@ -1,4 +1,5 @@
-require 'webpack-rails'
+require 'json'
+
 module ReactjsHelper
   # Mount react component in views
   # Params:
@@ -11,10 +12,6 @@ def react_component(name, props = {})
     content_tag('foreman-react-component', '', :name => name, :data => { props: props })
   end
 
-  def webpacked_plugins_with_global_css
-    global_css_tags(global_plugins_list).join.html_safe
-  end
-
   def webpacked_plugins_js_for(*plugin_names)
     js_tags_for(select_requested_plugins(plugin_names)).join.html_safe
   end
@@ -24,7 +21,25 @@ def webpacked_plugins_with_global_js
   end
 
   def webpacked_plugins_css_for(*plugin_names)
-    css_tags_for(select_requested_plugins(plugin_names)).join.html_safe
+    Foreman::Deprecation.deprecation_warning('3.12', '`webpacked_plugins_css_for` is deprecated, plugin css is already loaded.')
+  end
+
+  def read_webpack_manifest
+    JSON.parse(Rails.root.join('public/webpack/manifest.json').read)
+  end
+
+  def get_webpack_foreman_vendor_js
+    Rails.cache.fetch('webpack_foreman_vendor_js', expires_in: 1.minute) do
+      data = read_webpack_manifest
+      foreman_vendor_js = data['assetsByChunkName']['foreman-vendor'].find { |value| value.end_with?('.js') }
+      javascript_include_tag("/webpack/#{foreman_vendor_js}")
+    end
+  end
+
+  def get_webpack_foreman_vendor_css
+    data = read_webpack_manifest
+    foreman_vendor_css = data['assetsByChunkName']['foreman-vendor'].find { |value| value.end_with?('.css') }
+    stylesheet_link_tag("/webpack/#{foreman_vendor_css}")
   end
 
   def select_requested_plugins(plugin_names)
@@ -39,30 +54,23 @@ def select_requested_plugins(plugin_names)
 
   def js_tags_for(requested_plugins)
     requested_plugins.map do |plugin|
-      javascript_include_tag(*webpack_asset_paths(plugin.to_s, :extension => 'js'))
+      name = plugin.to_s.tr('-', '_')
+      javascript_tag("window.tfm.tools.loadPluginModule('/webpack/#{name}','#{name}','./index');".html_safe)
     end
   end
 
   def global_js_tags(requested_plugins)
     requested_plugins.map do |plugin|
       plugin[:files].map do |file|
-        javascript_include_tag(*webpack_asset_paths("#{plugin[:id]}:#{file}", :extension => 'js'))
-      end
-    end
-  end
-
-  def global_css_tags(requested_plugins)
-    requested_plugins.map do |plugin|
-      plugin[:files].map do |file|
-        stylesheet_link_tag(*webpack_asset_paths("#{plugin[:id]}:#{file}", :extension => 'css'))
+        name = plugin[:id].to_s.tr('-', '_')
+        javascript_tag("window.tfm.tools.loadPluginModule('/webpack/#{name}','#{name}','./#{file}_index');".html_safe)
       end
     end
   end
 
   def css_tags_for(requested_plugins)
-    requested_plugins.map do |plugin|
-      stylesheet_link_tag(*webpack_asset_paths(plugin.to_s, :extension => 'css'))
-    end
+    Foreman::Deprecation.deprecation_warning('3.12', '`css_tags_for` is deprecated, No need to load CSS separately, since it should be referenced from the corresponding JS file.')
+    []
   end
 
   def locale_js_tags

app/services/foreman/env_settings_loader.rb

@@ -31,8 +31,6 @@ def settings_map
         'FOREMAN_REQUIRE_SSL' => [:boolean, :require_ssl],
         'FOREMAN_SUPPORT_JSONP' => [:boolean, :support_jsonp],
         'FOREMAN_MARK_TRANSLATED' => [:boolean, :mark_translated],
-        'FOREMAN_WEBPACK_DEV_SERVER' => [:boolean, :webpack_dev_server],
-        'FOREMAN_WEBPACK_DEV_SERVER_HTTPS' => [:boolean, :webpack_dev_server_https],
         'FOREMAN_ASSETS_DEBUG' => [:boolean, :assets_debug],
         'FOREMAN_HSTS_ENABLED' => [:boolean, :hsts_enabled],
         'FOREMAN_DOMAIN' => [:string, :domain],

app/views/layouts/base.html.erb

@@ -9,11 +9,8 @@
     <%= yield(:meta) %>
 
     <%= favicon_link_tag "favicon.ico"%>
-
-    <%= stylesheet_link_tag *webpack_asset_paths('foreman-vendor', :extension => 'css') %>
-    <%= stylesheet_link_tag *webpack_asset_paths('bundle', :extension => 'css') %>
+    <%= get_webpack_foreman_vendor_css %>
     <%= stylesheet_link_tag 'application' %>
-    <%= webpacked_plugins_with_global_css %>
     <%= yield(:stylesheets) %>
 
     <%= csrf_meta_tags %>
@@ -33,18 +30,20 @@
     </script>
     <%= javascript_include_tag "locale/#{FastGettext.locale}/app" %>
     <%= locale_js_tags %>
-    
     <%= yield(:head) %>
   </head>
-
   <body class='<%= body_css_classes %>'>
-    <%= javascript_include_tag *webpack_asset_paths('foreman-vendor', :extension => 'js') %>
-    <%= javascript_include_tag *webpack_asset_paths('vendor', :extension => 'js') %>
-    <%= javascript_include_tag *webpack_asset_paths('bundle', :extension => 'js') %>
+    <%= get_webpack_foreman_vendor_js %>
+    <%= javascript_include_tag('/webpack/vendor.js') %>
+    <%= javascript_include_tag('/webpack/bundle.js') %>
+
     <%= javascript_include_tag 'application' %>
     <%= webpacked_plugins_with_global_js %>
-    <%= webpack_dev_server %>
-    <%= yield(:javascripts) %>
+    <%= javascript_include_tag('late_load') %>
+    <script type="text/javascript">
+      const html = "<%= escape_javascript(yield(:javascripts)) %>"
+      load_dynamic_javascripts(html);
+    </script>
     <script type="text/javascript">
       <%= yield(:inline_javascripts) %>
     </script>

bundler.d/assets.rb

@@ -4,7 +4,7 @@
   gem 'gettext_i18n_rails_js', '~> 1.4'
   gem 'po_to_json', '~> 1.1'
   gem 'execjs', '>= 1.4.0', '< 3.0'
-  gem 'uglifier', '>= 1.0.3'
+  gem "terser", "~> 1.1"
   gem 'sass-rails', '~> 6.0'
   # this one is a dependecy for x-editable-rails
   gem 'coffee-rails', '~> 5.0.0'

config/environments/development.rb

@@ -55,10 +55,6 @@
     end
   end
 
-  # Allow disabling the webpack dev server from the settings
-  config.webpack.dev_server.enabled = SETTINGS.fetch(:webpack_dev_server, true)
-  config.webpack.dev_server.https = SETTINGS.fetch(:webpack_dev_server_https, false)
-
   config.hosts += SETTINGS[:hosts]
   config.hosts << SETTINGS[:fqdn]
   # Backporting from Rails 7.0

config/environments/production.rb

@@ -19,7 +19,7 @@
   config.public_file_server.enabled = ENV.fetch('RAILS_SERVE_STATIC_FILES', false) == 'true'
 
   # Compress JavaScripts and CSS.
-  config.assets.js_compressor = :uglifier
+  config.assets.js_compressor = :terser
   # config.assets.css_compressor = :sass
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.
@@ -73,8 +73,6 @@
   # Do not dump schema after migrations.
   config.active_record.dump_schema_after_migration = false
 
-  config.webpack.dev_server.enabled = false
-
   # Log denied attributes into logger
   config.action_controller.action_on_unpermitted_parameters = :log
 

config/environments/test.rb

@@ -64,8 +64,6 @@
   # Randomize the order test cases are executed.
   config.active_support.test_order = :random
 
-  config.webpack.dev_server.enabled = false
-
   # Whitelist all plugin engines by default from raising errors on deprecation warnings for
   # compatibility, allow them to override it by adding an ASDT configuration file.
   config.after_initialize do