Merge branch 'slashmanov/vite-js-dev-2' into 'master'

Add Vite for javascript assets

See merge request gitlab-org/gitlab!129392



Merged-by: Stanislav Lashmanov <slashmanov@gitlab.com>

.gitignore

@@ -106,3 +106,10 @@ tags.lock
 tags.temp
 .stylelintcache
 .solargraph.yml
+
+# Vite Ruby
+/public/vite*
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local
+

Gemfile

@@ -19,6 +19,8 @@ gem 'rails', '~> 7.0.6'
 
 gem 'activerecord-gitlab', path: 'gems/activerecord-gitlab'
 
+gem 'vite_rails'
+
 gem 'bootsnap', '~> 1.16.0', require: false
 
 gem 'openssl', '~> 3.0'

Gemfile.checksum

@@ -125,6 +125,7 @@
 {"name":"doorkeeper","version":"5.6.6","platform":"ruby","checksum":"2344e86c77770526efcda893b5217aa13d1c7eb1b40de840b58b19eb1ff757e0"},
 {"name":"doorkeeper-openid_connect","version":"1.8.7","platform":"ruby","checksum":"71edaf33118deefe25674ba3f8280c32835f057351f70e9beb222c0fd6b8e786"},
 {"name":"dotenv","version":"2.7.6","platform":"ruby","checksum":"2451ed5e8e43776d7a787e51d6f8903b98e446146c7ad143d5678cc2c409d547"},
+{"name":"dry-cli","version":"1.0.0","platform":"ruby","checksum":"28ead169f872954dd08910eb8ead59cf86cd18b4aab321e8eeefe945749569f0"},
 {"name":"dry-core","version":"1.0.0","platform":"ruby","checksum":"7a92099870967f0d2c9997950608cb8bb622dafeea20b2fe1dd49e9ba1d0f305"},
 {"name":"dry-inflector","version":"1.0.0","platform":"ruby","checksum":"6ad22361ca2d6f3f001ae3037ffcfea01163f644280d13a9195d3c3a94dd1626"},
 {"name":"dry-logic","version":"1.5.0","platform":"ruby","checksum":"99ed2180f1970c3d8247004f277a01dffbe8e82cf6680de9c7209312d86cd416"},
@@ -675,6 +676,8 @@
 {"name":"version_sorter","version":"2.3.0","platform":"ruby","checksum":"2147f2a1a3804fbb8f60d268b7d7c1ec717e6dd727ffe2c165b4e05e82efe1da"},
 {"name":"view_component","version":"3.2.0","platform":"ruby","checksum":"1dfaa85e13b5393f30b60bd3a03348b5298240a13137985d71eb2b8cc94c4c22"},
 {"name":"virtus","version":"2.0.0","platform":"ruby","checksum":"8841dae4eb7fcc097320ba5ea516bf1839e5d056c61ee27138aa4bddd6e3d1c2"},
+{"name":"vite_rails","version":"3.0.15","platform":"ruby","checksum":"b8ec528aedf7e24b54f222b449cd9250810ea2456d5f8dd4ef87f06b475cf860"},
+{"name":"vite_ruby","version":"3.3.4","platform":"ruby","checksum":"025e438385a6dc2320c8c148dff453f5bb1d4f056ce69c3386f47d4c388ad80c"},
 {"name":"vmstat","version":"2.3.0","platform":"ruby","checksum":"ab5446a3e3bd0a9cdb9d9ac69a0bbd119c4f161d945a0846a519dd7018af656d"},
 {"name":"warden","version":"1.2.9","platform":"ruby","checksum":"46684f885d35a69dbb883deabf85a222c8e427a957804719e143005df7a1efd0"},
 {"name":"warning","version":"1.3.0","platform":"ruby","checksum":"23695a5d8e50bd5c46068931b529bee0b28e4982cbcefbe77d867800dde8069e"},

Gemfile.lock

@@ -459,6 +459,7 @@ GEM
       doorkeeper (>= 5.5, < 5.7)
       jwt (>= 2.5)
     dotenv (2.7.6)
+    dry-cli (1.0.0)
     dry-core (1.0.0)
       concurrent-ruby (~> 1.0)
       zeitwerk (~> 2.6)
@@ -1672,6 +1673,13 @@ GEM
       axiom-types (~> 0.1)
       coercible (~> 1.0)
       descendants_tracker (~> 0.0, >= 0.0.3)
+    vite_rails (3.0.15)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.3.4)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     vmstat (2.3.0)
     warden (1.2.9)
       rack (>= 2.0.9)
@@ -2029,6 +2037,7 @@ DEPENDENCIES
   validates_hostname (~> 1.0.11)
   version_sorter (~> 2.3)
   view_component (~> 3.2.0)
+  vite_rails
   vmstat (~> 2.3.0)
   warning (~> 1.3.0)
   webauthn (~> 3.0)

app/assets/javascripts/entrypoints/jira_connect_app.js

+import '../jira_connect/subscriptions';

app/assets/javascripts/entrypoints/main.js

+import '../main';
+import { runModules } from '~/run_modules';
+
+const modules = import.meta.glob('../pages/**/index.js');
+
+runModules(modules, '../pages/');

app/assets/javascripts/entrypoints/main_ee.js

+import { runModules } from '~/run_modules';
+
+const modules = import.meta.glob('../../../../ee/app/assets/javascripts/pages/**/index.js');
+
+runModules(modules, '../../../../ee/app/assets/javascripts/pages/');

app/assets/javascripts/entrypoints/main_jh.js

+import { runModules } from '~/run_modules';
+
+const modules = import.meta.glob('../../../../jh/app/assets/javascripts/pages/**/index.js');
+
+runModules(modules, '../../../../jh/app/assets/javascripts/pages/');

app/assets/javascripts/entrypoints/performance_bar.js

+import '../performance_bar';

app/assets/javascripts/entrypoints/redirect_listbox.js

+import './behaviors/redirect_listbox';

app/assets/javascripts/entrypoints/sandboxed_mermaid.js

+import '../lib/mermaid';

app/assets/javascripts/entrypoints/sentry.js

+import '../sentry/index';

app/assets/javascripts/lib/utils/webpack.js

@@ -5,10 +5,11 @@ import { joinPaths } from '~/lib/utils/url_utility';
  * See https://gitlab.com/gitlab-org/gitlab/-/issues/321656 for a fix
  */
 export function resetServiceWorkersPublicPath() {
+  // No-op if we're running Vite instead of Webpack
+  if (typeof __webpack_public_path__ === 'undefined') return; // eslint-disable-line camelcase
   // __webpack_public_path__ is a global variable that can be used to adjust
   // the webpack publicPath setting at runtime.
   // see: https://webpack.js.org/guides/public-path/
   const relativeRootPath = (gon && gon.relative_url_root) || '';
-  const webpackAssetPath = joinPaths(relativeRootPath, '/assets/webpack/');
-  __webpack_public_path__ = webpackAssetPath; // eslint-disable-line camelcase
+  __webpack_public_path__ = joinPaths(relativeRootPath, '/assets/webpack/'); // eslint-disable-line camelcase
 }

app/assets/javascripts/run_modules.js

+export const runModules = (modules, prefix) => {
+  document
+    .querySelector('meta[name="controller-path"]')
+    .content.split('/')
+    .forEach((part, index, arr) => {
+      const path = `${prefix}${[...arr.slice(0, index), part].join('/')}/index.js`;
+      modules[path]?.();
+    });
+};

app/assets/javascripts/webpack.js

@@ -7,6 +7,7 @@
  * e.g. the `window` scope, because it needs to be executed in the scope of webpack.
  */
 
-if (gon && gon.webpack_public_path) {
+// eslint-disable-next-line camelcase
+if (gon && gon.webpack_public_path && typeof __webpack_public_path__ !== 'undefined') {
   __webpack_public_path__ = gon.webpack_public_path; // eslint-disable-line camelcase
 }

app/controllers/application_controller.rb

@@ -115,6 +115,24 @@ def self.endpoint_id_for_action(action_name)
 
   content_security_policy do |p|
     next if p.directives.blank?
+
+    if Rails.env.development? && Feature.enabled?(:vite)
+      vite_host = ViteRuby.instance.config.host
+      vite_port = ViteRuby.instance.config.port
+      vite_origin = "#{vite_host}:#{vite_port}"
+      http_origin = "http://#{vite_origin}"
+      ws_origin = "ws://#{vite_origin}"
+      wss_origin = "wss://#{vite_origin}"
+      gitlab_ws_origin = Gitlab::Utils.append_path(Gitlab.config.gitlab.url, 'vite-dev/')
+      http_path = Gitlab::Utils.append_path(http_origin, 'vite-dev/')
+
+      connect_sources = p.directives['connect-src']
+      p.connect_src(*(Array.wrap(connect_sources) | [ws_origin, wss_origin, http_path]))
+
+      worker_sources = p.directives['worker-src']
+      p.worker_src(*(Array.wrap(worker_sources) | [gitlab_ws_origin, http_path]))
+    end
+
     next unless Gitlab::CurrentSettings.snowplow_enabled? && !Gitlab::CurrentSettings.snowplow_collector_hostname.blank?
 
     default_connect_src = p.directives['connect-src'] || p.directives['default-src']

app/helpers/application_helper.rb

@@ -485,6 +485,15 @@ def hidden_resource_icon(resource, css_class: nil)
     end
   end
 
+  def controller_full_path
+    action = case controller.action_name
+             when 'create' then 'new'
+             when 'update' then 'edit'
+             else controller.action_name
+             end
+    "#{controller.controller_path}/#{action}"
+  end
+
   private
 
   def browser_id

app/helpers/vite_helper.rb

+# frozen_string_literal: true
+
+module ViteHelper
+  def universal_javascript_include_tag(*args)
+    if vite_enabled
+      vite_javascript_tag(*args)
+    else
+      javascript_include_tag(*args)
+    end
+  end
+
+  def universal_asset_path(*args)
+    if vite_enabled
+      vite_asset_path(*args)
+    else
+      asset_path(*args)
+    end
+  end
+
+  private
+
+  def vite_enabled
+    Feature.enabled?(:vite) && !Rails.env.test? && vite_running
+  end
+
+  def vite_running
+    ViteRuby.instance.dev_server_running?
+  end
+end

app/helpers/webpack_helper.rb

 # frozen_string_literal: true
 
 module WebpackHelper
+  include ViteHelper
+
   def prefetch_link_tag(source)
     href = asset_path(source)
 
@@ -14,7 +16,11 @@ def prefetch_link_tag(source)
   end
 
   def webpack_bundle_tag(bundle)
-    javascript_include_tag(*webpack_entrypoint_paths(bundle))
+    if vite_running
+      vite_javascript_tag bundle
+    else
+      javascript_include_tag(*webpack_entrypoint_paths(bundle))
+    end
   end
 
   def webpack_preload_asset_tag(asset, options = {})
@@ -32,6 +38,8 @@ def webpack_preload_asset_tag(asset, options = {})
   end
 
   def webpack_controller_bundle_tags
+    return if Feature.enabled?(:vite) && !Rails.env.test?
+
     chunks = []
 
     action = case controller.action_name

app/views/layouts/_head.html.haml

@@ -48,6 +48,16 @@
     = webpack_bundle_tag 'legacy_sentry'
   = webpack_bundle_tag 'performance_bar' if performance_bar_enabled?
 
+  - if vite_enabled
+    %meta{ name: 'controller-path', content: controller_full_path }
+    - if Rails.env.development?
+      = vite_client_tag
+    = vite_javascript_tag "main"
+    - if Gitlab.ee?
+      = vite_javascript_tag "main_ee"
+    - if Gitlab.jh?
+      = vite_javascript_tag "main_jh"
+
   = yield :page_specific_javascripts
 
   = webpack_bundle_tag 'super_sidebar' if show_super_sidebar?