Enable Webpack ESM output and move assets to /assets/ without subdirectories

.dockerignore

@@ -75,10 +75,8 @@ cpu.out
 /yarn.lock
 /yarn-error.log
 /npm-debug.log*
-/public/assets/js
-/public/assets/css
-/public/assets/fonts
-/public/assets/img/webpack
+/public/assets/*
+!/public/assets/img
 /vendor
 /web_src/fomantic/node_modules
 /web_src/fomantic/build/*

.gitignore

@@ -72,10 +72,8 @@ cpu.out
 /yarn.lock
 /yarn-error.log
 /npm-debug.log*
-/public/assets/js
-/public/assets/css
-/public/assets/fonts
-/public/assets/img/webpack
+/public/assets/*
+!/public/assets/img
 /vendor
 /web_src/fomantic/node_modules
 /web_src/fomantic/build/*

Makefile

@@ -116,8 +116,7 @@ FOMANTIC_WORK_DIR := web_src/fomantic
 
 WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
 WEBPACK_CONFIGS := webpack.config.js
-WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
-WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts public/assets/img/webpack
+WEBPACK_DEST := public/assets/index.js public/assets/index.css
 
 BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
 BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))
@@ -271,8 +270,9 @@ node-check:
 	fi
 
 .PHONY: clean-all
-clean-all: clean
-	rm -rf $(WEBPACK_DEST_ENTRIES) node_modules
+clean-all:
+	$(eval WEBPACK_ASSETS := $(filter-out public/assets/img, $(wildcard public/assets/*)))
+	@rm -rf $(WEBPACK_ASSETS) node_modules
 
 .PHONY: clean
 clean:
@@ -433,7 +433,6 @@ watch:
 
 .PHONY: watch-frontend
 watch-frontend: node-check node_modules
-	@rm -rf $(WEBPACK_DEST_ENTRIES)
 	NODE_ENV=development npx webpack --watch --progress
 
 .PHONY: watch-backend
@@ -950,7 +949,6 @@ webpack: $(WEBPACK_DEST)
 
 $(WEBPACK_DEST): $(WEBPACK_SOURCES) $(WEBPACK_CONFIGS) package-lock.json
 	@$(MAKE) -s node-check node_modules
-	rm -rf $(WEBPACK_DEST_ENTRIES)
 	npx webpack
 	@touch $(WEBPACK_DEST)
 

package.json

@@ -26,7 +26,6 @@
     "escape-goat": "4.0.0",
     "fast-glob": "3.3.0",
     "jquery": "3.7.0",
-    "jquery.are-you-sure": "1.9.0",
     "katex": "0.16.8",
     "license-checker-webpack-plugin": "0.2.1",
     "lightningcss-loader": "2.1.0",

templates/base/footer.tmpl

@@ -25,7 +25,7 @@
 		<script src='https://challenges.cloudflare.com/turnstile/v0/api.js'></script>
 	{{end}}
 {{end}}
-	<script src="{{AssetUrlPrefix}}/js/index.js?v={{AssetVersion}}" onerror="alert('Failed to load asset files from ' + this.src + '. Please make sure the asset files can be accessed.')"></script>
+	<script type="module" src="{{AssetUrlPrefix}}/index.js?v={{AssetVersion}}" onerror="alert('Failed to load asset files from ' + this.src + '. Please make sure the asset files can be accessed.')"></script>
 {{template "custom/footer" .}}
 </body>
 </html>

templates/base/footer_content.tmpl

@@ -23,7 +23,7 @@
 				{{end}}
 			</div>
 		</div>
-		<a href="{{AssetUrlPrefix}}/js/licenses.txt">{{.locale.Tr "licenses"}}</a>
+		<a href="{{AssetUrlPrefix}}/licenses.txt">{{.locale.Tr "licenses"}}</a>
 		{{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
 		{{template "custom/extra_links_footer" .}}
 	</div>

templates/base/head_script.tmpl

@@ -4,7 +4,10 @@ If you are customizing Gitea, please do not change this file.
 If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 */}}
 <script>
-	window.addEventListener('error', function(e) {window._globalHandlerErrors=window._globalHandlerErrors||[]; window._globalHandlerErrors.push(e);});
+	window._globalHandlerErrors = [];
+	window.addEventListener('error', function(e) {
+		window._globalHandlerErrors.push(e);
+	});
 	window.config = {
 		appUrl: '{{AppUrl}}',
 		appSubUrl: '{{AppSubUrl}}',
@@ -44,4 +47,4 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 	{{/* in case some pages don't render the pageData, we make sure it is an object to prevent null access */}}
 	window.config.pageData = window.config.pageData || {};
 </script>
-<script src="{{AssetUrlPrefix}}/js/webcomponents.js?v={{AssetVersion}}"></script>
+<script type="module" src="{{AssetUrlPrefix}}/webcomponents.js?v={{AssetVersion}}"></script>

templates/base/head_style.tmpl

@@ -1,8 +1,8 @@
-<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{AssetVersion}}">
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/index.css?v={{AssetVersion}}">
 {{if .IsSigned}}
 	{{if ne .SignedUser.Theme "gitea"}}
-		<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{AssetVersion}}">
+		<link rel="stylesheet" href="{{AssetUrlPrefix}}/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{AssetVersion}}">
 	{{end}}
 {{else if ne DefaultTheme "gitea"}}
-	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}">
+	<link rel="stylesheet" href="{{AssetUrlPrefix}}/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}">
 {{end}}

templates/devtest/fomantic-modal.tmpl

@@ -1,4 +1,5 @@
 {{template "base/head" .}}
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest ui container">
 	{{template "base/alert" .}}
 
@@ -47,16 +48,6 @@
 	</div>
 
 	<div class="modal-buttons"></div>
-	<script type="module">
-		for (const el of $('.ui.modal')) {
-			const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => {
-				$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
-			});
-			$('.modal-buttons').append($btn);
-		}
-	</script>
-	<style>
-		.modal-buttons button { margin: 5px; }
-	</style>
+	<script src="{{AssetUrlPrefix}}/devtest.js?v={{AssetVersion}}"></script>
 </div>
 {{template "base/footer" .}}

templates/devtest/gitea-ui.tmpl

@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest ui container">
 	<div>
 		<h1>Button</h1>
@@ -67,15 +67,6 @@
 					</div>
 				</li>
 			</ul>
-			<script type="module">
-				const $buttons = $('#devtest-button-samples').find('button.ui');
-
-				const $buttonStyles = $('input[name*="button-style"]');
-				$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
-
-				const $buttonStates = $('input[name*="button-state"]');
-				$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
-			</script>
 		</div>
 	</div>
 
@@ -252,6 +243,6 @@
 		<div>ps: no JS code attached, so just a layout</div>
 		{{template "shared/combomarkdowneditor" .}}
 	</div>
-	<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
+	<script src="{{AssetUrlPrefix}}/devtest.js?v={{AssetVersion}}"></script>
 </div>
 {{template "base/footer" .}}

templates/swagger/ui.tmpl

@@ -2,11 +2,11 @@
 <html lang="en">
 	<head>
 		<title>Gitea API</title>
-		<link href="{{AssetUrlPrefix}}/css/swagger.css?v={{AssetVersion}}" rel="stylesheet">
+		<link href="{{AssetUrlPrefix}}/swagger.css?v={{AssetVersion}}" rel="stylesheet">
 	</head>
 	<body>
 		<a class="swagger-back-link" href="{{AppSubUrl}}/">{{svg "octicon-reply"}}{{.locale.Tr "return_to_gitea"}}</a>
 		<div id="swagger-ui" data-source="{{AppSubUrl}}/swagger.{{.APIJSONVersion}}.json"></div>
-		<script src="{{AssetUrlPrefix}}/js/swagger.js?v={{AssetVersion}}"></script>
+		<script type="module" src="{{AssetUrlPrefix}}/swagger.js?v={{AssetVersion}}"></script>
 	</body>
 </html>

web_src/css/index.css

@@ -1,3 +1,6 @@
+@import "../fomantic/build/semantic.css";
+@import "easymde/dist/easymde.min.css";
+
 @import "./modules/normalize.css";
 @import "./modules/animations.css";
 @import "./modules/button.css";

web_src/css/standalone/devtest.css

@@ -14,3 +14,7 @@ h1, h2 {
   margin: 0;
   padding: 10px 0;
 }
+
+.modal-buttons button {
+  margin: 5px;
+}

web_src/js/bootstrap.js

@@ -1,11 +1,9 @@
-import {joinPaths} from './utils.js';
-
 // DO NOT IMPORT window.config HERE!
 // to make sure the error handler always works, we should never import `window.config`, because some user's custom template breaks it.
 
 // This sets up the URL prefix used in webpack's chunk loading.
 // This file must be imported before any lazy-loading is being attempted.
-__webpack_public_path__ = joinPaths(window?.config?.assetUrlPrefix ?? '/', '/');
+__webpack_public_path__ = `${window.config?.assetUrlPrefix ?? '/assets'}/`;
 
 export function showGlobalErrorMessage(msg) {
   const pageContent = document.querySelector('.page-content');
@@ -29,18 +27,20 @@ function processWindowErrorEvent(e) {
   showGlobalErrorMessage(`JavaScript error: ${e.message} (${e.filename} @ ${e.lineno}:${e.colno}). Open browser console to see more details.`);
 }
 
-function initGlobalErrorHandler() {
-  if (!window.config) {
-    showGlobalErrorMessage(`Gitea JavaScript code couldn't run correctly, please check your custom templates`);
-  }
-  // we added an event handler for window error at the very beginning of <script> of page head
-  // the handler calls `_globalHandlerErrors.push` (array method) to record all errors occur before this init
-  // then in this init, we can collect all error events and show them
-  for (const e of window._globalHandlerErrors || []) {
-    processWindowErrorEvent(e);
-  }
-  // then, change _globalHandlerErrors to an object with push method, to process further error events directly
-  window._globalHandlerErrors = {'push': (e) => processWindowErrorEvent(e)};
+if (!window.config) {
+  showGlobalErrorMessage(`Gitea JavaScript code couldn't run correctly, please check your custom templates`);
 }
 
-initGlobalErrorHandler();
+// we added an event handler for window error at the very beginning of <script> of page head
+// the handler calls `_globalHandlerErrors.push` (array method) to record all errors occur,
+// now we display any errors that had occured
+for (const e of window._globalHandlerErrors) {
+  processWindowErrorEvent(e);
+}
+
+// watch for further mutations on the array
+window._globalHandlerErrors = new Proxy(window._globalHandlerErrors, {
+  set: (_target, _property, value) => {
+    processWindowErrorEvent(value);
+  }
+});

web_src/js/features/common-global.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import 'jquery.are-you-sure';
+import '../vendor/ays.js';
 import {createDropzone} from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';

web_src/js/features/notification.js

@@ -81,7 +81,7 @@ export function initNotificationCount() {
 
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
+    const worker = new SharedWorker(`${__webpack_public_path__}eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });

web_src/js/features/stopwatch.js

@@ -43,7 +43,7 @@ export function initStopwatch() {
   // if the browser supports EventSource and SharedWorker, use it instead of the periodic poller
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
+    const worker = new SharedWorker(`${__webpack_public_path__}eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });

web_src/js/index.js

@@ -1,5 +1,7 @@
 // bootstrap module must be the first one to be imported, it handles webpack lazy-loading and global errors
 import './bootstrap.js';
+import './jquery.js';
+import '../fomantic/build/semantic.js';
 
 import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
 import {initScopedAccessTokenCategories} from './components/ScopedAccessTokenSelector.vue';

web_src/js/standalone/devtest.js

@@ -1,11 +1,30 @@
+import '../bootstrap.js';
+import '../jquery.js';
+import '../../fomantic/build/semantic.js';
+import $ from 'jquery';
 import {showInfoToast, showWarningToast, showErrorToast} from '../modules/toast.js';
 
-document.getElementById('info-toast').addEventListener('click', () => {
+document.getElementById('info-toast')?.addEventListener('click', () => {
   showInfoToast('success 😀');
 });
-document.getElementById('warning-toast').addEventListener('click', () => {
+document.getElementById('warning-toast')?.addEventListener('click', () => {
   showWarningToast('warning 😐');
 });
-document.getElementById('error-toast').addEventListener('click', () => {
+document.getElementById('error-toast')?.addEventListener('click', () => {
   showErrorToast('error 🙁');
 });
+
+const $buttons = $('#devtest-button-samples').find('button.ui');
+
+const $buttonStyles = $('input[name*="button-style"]');
+$buttonStyles.on('click', () => $buttonStyles.map((_, el) => $buttons.toggleClass(el.value, el.checked)));
+
+const $buttonStates = $('input[name*="button-state"]');
+$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
+
+for (const el of $('.ui.modal')) {
+  const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => {
+    $(el).modal({onApprove() {alert('confirmed')}}).modal('show');
+  });
+  $('.modal-buttons').append($btn);
+}

web_src/js/utils.js

@@ -11,16 +11,6 @@ export function extname(path = '') {
   return ext || '';
 }
 
-// join a list of path segments with slashes, ensuring no double slashes
-export function joinPaths(...parts) {
-  let str = '';
-  for (const part of parts) {
-    if (!part) continue;
-    str = !str ? part : `${str.replace(/\/$/, '')}/${part.replace(/^\//, '')}`;
-  }
-  return str;
-}
-
 // test whether a variable is an object
 export function isObject(obj) {
   return Object.prototype.toString.call(obj) === '[object Object]';