diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2018-05-07 22:46:42 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-05-07 22:46:42 +0300 |
commit | 797a080681233e97ccc0c9ba72431e4b450fff7b (patch) | |
tree | 4bbfcc9c05c033e28c5b8126a09489982b5b1603 /app | |
parent | ec970e8a3f060986d4e2c0da724c15f6b34587d7 (diff) | |
parent | caf49264b47999a5b888a3ada3b70cc76e94d2bd (diff) |
Merge branch 'upgrade-to-webpack-v4' into 'master'
Upgrade to Webpack 4
Closes #43400
See merge request gitlab-org/gitlab-ce!17218
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/ide/index.js | 18 | ||||
-rw-r--r-- | app/assets/javascripts/main.js | 61 | ||||
-rw-r--r-- | app/assets/javascripts/pages/ide/index.js | 9 | ||||
-rw-r--r-- | app/helpers/webpack_helper.rb | 45 | ||||
-rw-r--r-- | app/views/ide/index.html.haml | 3 | ||||
-rw-r--r-- | app/views/layouts/_head.html.haml | 3 |
6 files changed, 85 insertions, 54 deletions
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js index e5c47d09886..c5835cd3b06 100644 --- a/app/assets/javascripts/ide/index.js +++ b/app/assets/javascripts/ide/index.js @@ -4,7 +4,9 @@ import ide from './components/ide.vue'; import store from './stores'; import router from './ide_router'; -function initIde(el) { +Vue.use(Translate); + +export function initIde(el) { if (!el) return null; return new Vue({ @@ -27,8 +29,12 @@ function initIde(el) { }); } -const ideElement = document.getElementById('ide'); - -Vue.use(Translate); - -initIde(ideElement); +// tell webpack to load assets from origin so that web workers don't break +export function resetServiceWorkersPublicPath() { + // __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 = `${relativeRootPath}/assets/webpack/`; + __webpack_public_path__ = webpackAssetPath; // eslint-disable-line camelcase +} diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 2c80baba10b..247aeb481c6 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -1,22 +1,19 @@ -/* eslint-disable import/first */ /* global $ */ import jQuery from 'jquery'; import Cookies from 'js-cookie'; import svg4everybody from 'svg4everybody'; -// expose common libraries as globals (TODO: remove these) -window.jQuery = jQuery; -window.$ = jQuery; +// bootstrap webpack, common libs, polyfills, and behaviors +import './webpack'; +import './commons'; +import './behaviors'; // lib/utils import { handleLocationHash, addSelectOnFocusBehaviour } from './lib/utils/common_utils'; import { localTimeAgo } from './lib/utils/datetime_utility'; import { getLocationHash, visitUrl } from './lib/utils/url_utility'; -// behaviors -import './behaviors/'; - // everything else import loadAwardsHandler from './awards_handler'; import bp from './breakpoints'; @@ -31,9 +28,12 @@ import initLogoAnimation from './logo'; import './milestone_select'; import './projects_dropdown'; import initBreadcrumbs from './breadcrumb'; - import initDispatcher from './dispatcher'; +// expose jQuery as global (TODO: remove these) +window.jQuery = jQuery; +window.$ = jQuery; + // inject test utilities if necessary if (process.env.NODE_ENV !== 'production' && gon && gon.test_env) { $.fx.off = true; @@ -52,10 +52,14 @@ document.addEventListener('beforeunload', () => { }); window.addEventListener('hashchange', handleLocationHash); -window.addEventListener('load', function onLoad() { - window.removeEventListener('load', onLoad, false); - handleLocationHash(); -}, false); +window.addEventListener( + 'load', + function onLoad() { + window.removeEventListener('load', onLoad, false); + handleLocationHash(); + }, + false, +); gl.lazyLoader = new LazyLoader({ scrollContainer: window, @@ -89,9 +93,7 @@ document.addEventListener('DOMContentLoaded', () => { if (bootstrapBreakpoint === 'xs') { const $rightSidebar = $('aside.right-sidebar, .layout-page'); - $rightSidebar - .removeClass('right-sidebar-expanded') - .addClass('right-sidebar-collapsed'); + $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed'); } // prevent default action for disabled buttons @@ -108,7 +110,8 @@ document.addEventListener('DOMContentLoaded', () => { addSelectOnFocusBehaviour('.js-select-on-focus'); $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() { - $(this).tooltip('destroy') + $(this) + .tooltip('destroy') .closest('li') .fadeOut(); }); @@ -118,7 +121,9 @@ document.addEventListener('DOMContentLoaded', () => { }); $('.js-remove-tr').on('ajax:success', function removeTRAjaxSuccessCallback() { - $(this).closest('tr').fadeOut(); + $(this) + .closest('tr') + .fadeOut(); }); // Initialize select2 selects @@ -155,7 +160,9 @@ document.addEventListener('DOMContentLoaded', () => { // Form submitter $('.trigger-submit').on('change', function triggerSubmitCallback() { - $(this).parents('form').submit(); + $(this) + .parents('form') + .submit(); }); localTimeAgo($('abbr.timeago, .js-timeago'), true); @@ -204,9 +211,15 @@ document.addEventListener('DOMContentLoaded', () => { $this.toggleClass('active'); if ($this.hasClass('active')) { - notesHolders.show().find('.hide, .content').show(); + notesHolders + .show() + .find('.hide, .content') + .show(); } else { - notesHolders.hide().find('.content').hide(); + notesHolders + .hide() + .find('.content') + .hide(); } $(document).trigger('toggle.comments'); @@ -247,9 +260,11 @@ document.addEventListener('DOMContentLoaded', () => { const flashContainer = document.querySelector('.flash-container'); if (flashContainer && flashContainer.children.length) { - flashContainer.querySelectorAll('.flash-alert, .flash-notice, .flash-success').forEach((flashEl) => { - removeFlashClickListener(flashEl); - }); + flashContainer + .querySelectorAll('.flash-alert, .flash-notice, .flash-success') + .forEach(flashEl => { + removeFlashClickListener(flashEl); + }); } initDispatcher(); diff --git a/app/assets/javascripts/pages/ide/index.js b/app/assets/javascripts/pages/ide/index.js new file mode 100644 index 00000000000..efadf6967aa --- /dev/null +++ b/app/assets/javascripts/pages/ide/index.js @@ -0,0 +1,9 @@ +import { initIde, resetServiceWorkersPublicPath } from '~/ide/index'; + +document.addEventListener('DOMContentLoaded', () => { + const ideElement = document.getElementById('ide'); + if (ideElement) { + resetServiceWorkersPublicPath(); + initIde(ideElement); + } +}); diff --git a/app/helpers/webpack_helper.rb b/app/helpers/webpack_helper.rb index 8bcced70d63..e12e4ba70e9 100644 --- a/app/helpers/webpack_helper.rb +++ b/app/helpers/webpack_helper.rb @@ -1,12 +1,12 @@ -require 'webpack/rails/manifest' +require 'gitlab/webpack/manifest' module WebpackHelper - def webpack_bundle_tag(bundle, force_same_domain: false) - javascript_include_tag(*gitlab_webpack_asset_paths(bundle, force_same_domain: force_same_domain)) + def webpack_bundle_tag(bundle) + javascript_include_tag(*webpack_entrypoint_paths(bundle)) end def webpack_controller_bundle_tags - bundles = [] + chunks = [] action = case controller.action_name when 'create' then 'new' @@ -16,37 +16,44 @@ module WebpackHelper route = [*controller.controller_path.split('/'), action].compact - until route.empty? + until chunks.any? || route.empty? + entrypoint = "pages.#{route.join('.')}" begin - asset_paths = gitlab_webpack_asset_paths("pages.#{route.join('.')}", extension: 'js') - bundles.unshift(*asset_paths) - rescue Webpack::Rails::Manifest::EntryPointMissingError + chunks = webpack_entrypoint_paths(entrypoint, extension: 'js') + rescue Gitlab::Webpack::Manifest::AssetMissingError # no bundle exists for this path end - route.pop end - javascript_include_tag(*bundles) + if chunks.empty? + chunks = webpack_entrypoint_paths("default", extension: 'js') + end + + javascript_include_tag(*chunks) end - # override webpack-rails gem helper until changes can make it upstream - def gitlab_webpack_asset_paths(source, extension: nil, force_same_domain: false) + def webpack_entrypoint_paths(source, extension: nil, exclude_duplicates: true) return "" unless source.present? - paths = Webpack::Rails::Manifest.asset_paths(source) + paths = Gitlab::Webpack::Manifest.entrypoint_paths(source) if extension paths.select! { |p| p.ends_with? ".#{extension}" } end - unless force_same_domain - force_host = webpack_public_host - if force_host - paths.map! { |p| "#{force_host}#{p}" } - end + force_host = webpack_public_host + if force_host + paths.map! { |p| "#{force_host}#{p}" } end - paths + if exclude_duplicates + @used_paths ||= [] + new_paths = paths - @used_paths + @used_paths += new_paths + new_paths + else + paths + end end def webpack_public_host diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml index e0e8fe548d0..da9331b45dd 100644 --- a/app/views/ide/index.html.haml +++ b/app/views/ide/index.html.haml @@ -1,9 +1,6 @@ - @body_class = 'ide' - page_title 'IDE' -- content_for :page_specific_javascripts do - = webpack_bundle_tag 'ide', force_same_domain: true - #ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'), "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'), "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg') } } diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml index b981b5fdafa..02bdfe9aa3c 100644 --- a/app/views/layouts/_head.html.haml +++ b/app/views/layouts/_head.html.haml @@ -38,9 +38,6 @@ = yield :library_javascripts = javascript_include_tag locale_path unless I18n.locale == :en - = webpack_bundle_tag "webpack_runtime" - = webpack_bundle_tag "common" - = webpack_bundle_tag "main" = webpack_bundle_tag "raven" if Gitlab::CurrentSettings.clientside_sentry_enabled - if content_for?(:page_specific_javascripts) |