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

.dockerignore

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

.gitignore

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

Makefile

@@ -116,8 +116,8 @@ 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/js/index.js public/css/index.css
-WEBPACK_DEST_ENTRIES := public/js public/css public/fonts public/img/webpack
+WEBPACK_DEST := public/static/index.js public/static/index.css
+WEBPACK_DEST_ENTRIES := public/static
 
 BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
 BINDATA_HASH := $(addsuffix .hash,$(BINDATA_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}}/static/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}}/static/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

@@ -44,4 +44,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}}/static/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}}/static/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}}/static/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}}/static/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}">
 {{end}}

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}}/static/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest ui container">
 	<div>
 		<h1>Button</h1>
@@ -252,6 +252,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}}/static/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}}/static/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}}/static/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/js/bootstrap.js

@@ -1,11 +1,13 @@
-import {joinPaths} from './utils.js';
+import $ from 'jquery';
+
+window.$ = window.jQuery = $;
 
 // 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}/static/`;
 
 export function showGlobalErrorMessage(msg) {
   const pageContent = document.querySelector('.page-content');

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

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]';

web_src/js/utils.test.js

@@ -1,6 +1,6 @@
 import {expect, test} from 'vitest';
 import {
-  basename, extname, isObject, stripTags, joinPaths, parseIssueHref,
+  basename, extname, isObject, stripTags, parseIssueHref,
   parseUrl, translateMonth, translateDay, blobToDataURI,
   toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64,
 } from './utils.js';
@@ -18,45 +18,6 @@ test('extname', () => {
   expect(extname('file.js')).toEqual('.js');
 });
 
-test('joinPaths', () => {
-  expect(joinPaths('', '')).toEqual('');
-  expect(joinPaths('', 'b')).toEqual('b');
-  expect(joinPaths('', '/b')).toEqual('/b');
-  expect(joinPaths('', '/b/')).toEqual('/b/');
-  expect(joinPaths('a', '')).toEqual('a');
-  expect(joinPaths('/a', '')).toEqual('/a');
-  expect(joinPaths('/a/', '')).toEqual('/a/');
-  expect(joinPaths('a', 'b')).toEqual('a/b');
-  expect(joinPaths('a', '/b')).toEqual('a/b');
-  expect(joinPaths('/a', '/b')).toEqual('/a/b');
-  expect(joinPaths('/a', '/b')).toEqual('/a/b');
-  expect(joinPaths('/a/', '/b')).toEqual('/a/b');
-  expect(joinPaths('/a', '/b/')).toEqual('/a/b/');
-  expect(joinPaths('/a/', '/b/')).toEqual('/a/b/');
-
-  expect(joinPaths('', '', '')).toEqual('');
-  expect(joinPaths('', 'b', '')).toEqual('b');
-  expect(joinPaths('', 'b', 'c')).toEqual('b/c');
-  expect(joinPaths('', '', 'c')).toEqual('c');
-  expect(joinPaths('', '/b', '/c')).toEqual('/b/c');
-  expect(joinPaths('/a', '', '/c')).toEqual('/a/c');
-  expect(joinPaths('/a', '/b', '')).toEqual('/a/b');
-
-  expect(joinPaths('', '/')).toEqual('/');
-  expect(joinPaths('a', '/')).toEqual('a/');
-  expect(joinPaths('', '/', '/')).toEqual('/');
-  expect(joinPaths('/', '/')).toEqual('/');
-  expect(joinPaths('/', '')).toEqual('/');
-  expect(joinPaths('/', 'b')).toEqual('/b');
-  expect(joinPaths('/', 'b/')).toEqual('/b/');
-  expect(joinPaths('/', '', '/')).toEqual('/');
-  expect(joinPaths('/', 'b', '/')).toEqual('/b/');
-  expect(joinPaths('/', 'b/', '/')).toEqual('/b/');
-  expect(joinPaths('a', '/', '/')).toEqual('a/');
-  expect(joinPaths('/', '/', 'c')).toEqual('/c');
-  expect(joinPaths('/', '/', 'c/')).toEqual('/c/');
-});
-
 test('isObject', () => {
   expect(isObject({})).toBeTruthy();
   expect(isObject([])).toBeFalsy();