Enable production source maps for index.js, fix CSS sourcemaps (#27291) (#27295)

Backport #27291 by @silverwind

Previously, the production build never output sourcemaps. Now we emit
one file for `index.js` because it is the most likely one where we need
to be able to better debug reported issues like
https://github.com/go-gitea/gitea/issues/27213. This will currently
increase the binary size of gitea by around 700kB which is what the
gzipped source map file has.

Also, I fixed the CSS sourcemap generation which was broken since the
introduction of lightningcss.

The chinese docs are machine-translated, please correct accordingly.

Co-authored-by: silverwind <me@silverwind.io>

.yamllint.yaml

@@ -44,5 +44,3 @@ rules:
 ignore: |
   .venv
   node_modules
-  /models/fixtures
-  /models/migrations/fixtures

docs/content/installation/from-source.en-us.md

@@ -128,8 +128,6 @@ If pre-built frontend files are present it is possible to only build the backend
 TAGS="bindata" make backend
 ```
 
-Webpack source maps are by default enabled in development builds and disabled in production builds. They can be enabled by setting the `ENABLE_SOURCEMAP=true` environment variable.
-
 ## Test
 
 After following the steps above, a `gitea` binary will be available in the working directory.
@@ -260,3 +258,11 @@ GOARCH=amd64 \
 TAGS="bindata sqlite sqlite_unlock_notify" \
 make build
 ```
+
+## Source Maps
+
+By default, gitea generates reduced source maps for frontend files to conserve space. This can be controlled with the `ENABLE_SOURCEMAP` environment variable:
+
+- `ENABLE_SOURCEMAP=true` generates all source maps, the default for development builds
+- `ENABLE_SOURCEMAP=reduced` generates limited source maps, the default for production builds
+- `ENABLE_SOURCEMAP=false` generates no source maps

docs/content/installation/from-source.zh-cn.md

@@ -100,8 +100,6 @@ TAGS="bindata sqlite sqlite_unlock_notify" make build
 TAGS="bindata" make backend
 ```
 
-在开发构建中，默认启用 Webpack 源映射，在生产构建中禁用。可以通过设置`ENABLE_SOURCEMAP=true`环境变量来启用它们。
-
 ## 测试
 
 按照上述步骤完成后，工作目录中将会有一个`gitea`二进制文件。可以从该目录进行测试，或将其移动到带有测试数据的目录中。当手动从命令行启动 Gitea 时，可以通过按下`Ctrl + C`来停止程序。
@@ -221,3 +219,11 @@ GOARCH=amd64 \
 TAGS="bindata sqlite sqlite_unlock_notify" \
 make build
 ```
+
+## 源映射
+
+默认情况下，gitea 会为前端文件生成精简的源映射以节省空间。 这可以通过“ENABLE_SOURCEMAP”环境变量进行控制：
+
+- `ENABLE_SOURCEMAP=true` 生成所有源映射，这是开发版本的默认设置
+- `ENABLE_SOURCEMAP=reduced` 生成有限的源映射，这是生产版本的默认设置
+- `ENABLE_SOURCEMAP=false` 不生成源映射

models/fixtures/access.yml

@@ -135,4 +135,3 @@
   user_id: 31
   repo_id: 28
   mode: 4
-

models/fixtures/review.yml

@@ -150,6 +150,7 @@
   content: "review approved by user20"
   updated_unix: 946684833
   created_unix: 946684833
+
 -
   id: 18
   type: 4
@@ -169,4 +170,3 @@
   content: "review request for user15"
   updated_unix: 946684835
   created_unix: 946684835
-

models/migrations/fixtures/Test_DeleteOrphanedIssueLabels/issue_label.yml

@@ -26,4 +26,3 @@
   id: 5
   issue_id: 2
   label_id: 87
-

models/migrations/fixtures/Test_RemoveInvalidLabels/label.yml

@@ -23,4 +23,3 @@
   id: 5
   repo_id: 3
   org_id: 0
-

models/migrations/fixtures/Test_StoreWebauthnCredentialIDAsBytes/webauthn_credential.yml

@@ -28,4 +28,3 @@
   attestation_type: 'fido-u2f'
   sign_count: 1
   clone_warning: false
-

templates/projects/new.tmpl

@@ -29,7 +29,7 @@
 					<div class="default text">{{ctx.Locale.Tr "repo.projects.template.desc_helper"}}</div>
 					<div class="menu">
 						{{range $element := .BoardTypes}}
-							<div class="item" data-id="{{$element.BoardType}}" data-value="{{$element.BoardType}}">{{ctx.Locale.Tr ctx.Locale.Translation}}</div>
+							<div class="item" data-id="{{$element.BoardType}}" data-value="{{$element.BoardType}}">{{ctx.Locale.Tr $element.Translation}}</div>
 						{{end}}
 					</div>
 				</div>
@@ -43,12 +43,12 @@
 				{{range $element := .CardTypes}}
 					{{if or (eq $.card_type $element.CardType) (and (not $.PageIsEditProjects) (eq $element.CardType 1))}}
 						<input type="hidden" name="card_type" value="{{$element.CardType}}">
-						<div class="default text">{{ctx.Locale.Tr ctx.Locale.Translation}}</div>
+						<div class="default text">{{ctx.Locale.Tr $element.Translation}}</div>
 					{{end}}
 				{{end}}
 				<div class="menu">
 					{{range $element := .CardTypes}}
-						<div class="item" data-id="{{$element.CardType}}" data-value="{{$element.CardType}}">{{ctx.Locale.Tr ctx.Locale.Translation}}</div>
+						<div class="item" data-id="{{$element.CardType}}" data-value="{{$element.CardType}}">{{ctx.Locale.Tr $element.Translation}}</div>
 					{{end}}
 				</div>
 			</div>

templates/user/settings/security/accountlinks.tmpl

@@ -29,7 +29,7 @@
 			<div class="flex-item">
 				{{$providerData := index $.OAuth2Providers $loginSource.Name}}
 				<div class="flex-item-leading">
-					{{$providerData.IconHTML}}
+					{{$providerData.IconHTML 20}}
 				</div>
 				<div class="flex-item-main">
 					<span class="flex-item-title" data-tooltip-content="{{$provider}}">

web_src/js/components/RepoActionView.vue

@@ -225,7 +225,8 @@ const sfc = {
             this.fetchArtifacts(), // refresh artifacts if upload-artifact step done
           ]);
         } catch (err) {
-          if (!(err instanceof TypeError)) throw err; // avoid network error while unloading page
+          if (err instanceof TypeError) return; // avoid network error while unloading page
+          throw err;
         }
 
         this.artifacts = artifacts['artifacts'] || [];

web_src/js/modules/fomantic.js

@@ -25,41 +25,55 @@ export function initGiteaFomantic() {
     return escape(text, preserveHTML) + svg('octicon-x', 16, `${className.delete} icon`);
   };
 
+  const transitionNopBehaviors = new Set([
+    'clear queue', 'stop', 'stop all', 'destroy',
+    'force repaint', 'repaint', 'reset',
+    'looping', 'remove looping', 'disable', 'enable',
+    'set duration', 'save conditions', 'restore conditions',
+  ]);
   // stand-in for removed transition module
-  $.fn.transition = function (arg) {
+  $.fn.transition = function (arg0, arg1, arg2) {
-    if (arg === 'is supported') return true;
+    if (arg0 === 'is supported') return true;
-    if (arg === 'is animating') return false;
+    if (arg0 === 'is animating') return false;
-    if (arg === 'is inward') return false;
+    if (arg0 === 'is inward') return false;
-    if (arg === 'is outward') return false;
+    if (arg0 === 'is outward') return false;
-    if (arg === 'stop all') return;
 
-    const isIn = arg?.animation?.endsWith(' in');
+    let argObj;
-    const isOut = arg?.animation?.endsWith(' out');
+    if (typeof arg0 === 'string') {
-
+      // many behaviors are no-op now. https://fomantic-ui.com/modules/transition.html#/usage
-    let ret;
+      if (transitionNopBehaviors.has(arg0)) return this;
-    if (arg === 'show' || isIn) {
+      // now, the arg0 is an animation name, the syntax: (animation, duration, complete)
-      arg?.onStart?.(this);
+      argObj = {animation: arg0, ...(arg1 && {duration: arg1}), ...(arg2 && {onComplete: arg2})};
-      ret = this.each((_, el) => {
+    } else if (typeof arg0 === 'object') {
-        el.classList.remove('hidden');
+      argObj = arg0;
-        el.classList.add('visible');
+    } else {
-        if (isIn) el.classList.add('transition');
+      throw new Error(`invalid argument: ${arg0}`);
-        if (arg?.displayType) el.style.setProperty('display', arg.displayType, 'important');
-        arg?.onShow?.(this);
-      });
-      arg?.onComplete?.(this);
-    } else if (arg === 'hide' || isOut) {
-      arg?.onStart?.(this);
-      ret = this.each((_, el) => {
-        el.classList.add('hidden');
-        el.classList.remove('visible');
-        // don't remove the transition class because fomantic didn't do it either
-        el.style.removeProperty('display');
-        arg?.onHidden?.(this);
-      });
-      arg?.onComplete?.(this);
     }
 
-    return ret;
+    const isAnimationIn = argObj.animation?.startsWith('show') || argObj.animation?.endsWith(' in');
+    const isAnimationOut = argObj.animation?.startsWith('hide') || argObj.animation?.endsWith(' out');
+    this.each((_, el) => {
+      let toShow = isAnimationIn;
+      if (!isAnimationIn && !isAnimationOut) {
+        // If the animation is not in/out, then it must be a toggle animation.
+        // Fomantic uses computed styles to check "visibility", but to avoid unnecessary arguments, here it only checks the class.
+        toShow = this.hasClass('hidden'); // maybe it could also check "!this.hasClass('visible')", leave it to the future until there is a real problem.
+      }
+      argObj.onStart?.call(el);
+      if (toShow) {
+        el.classList.remove('hidden');
+        el.classList.add('visible', 'transition');
+        if (argObj.displayType) el.style.setProperty('display', argObj.displayType, 'important');
+        argObj.onShow?.call(el);
+      } else {
+        el.classList.add('hidden');
+        el.classList.remove('visible'); // don't remove the transition class because the Fomantic animation style is `.hidden.transition`.
+        el.style.removeProperty('display');
+        argObj.onHidden?.call(el);
+      }
+      argObj.onComplete?.call(el);
+    });
+    return this;
   };
 
   initFomanticApiPatch();

webpack.config.js

@@ -28,11 +28,15 @@ for (const path of glob('web_src/css/themes/*.css')) {
 
 const isProduction = env.NODE_ENV !== 'development';
 
-let sourceMapEnabled;
+// ENABLE_SOURCEMAP accepts the following values:
+// true - all enabled, the default in development
+// reduced - minimal sourcemaps, the default in production
+// false - all disabled
+let sourceMaps;
 if ('ENABLE_SOURCEMAP' in env) {
-  sourceMapEnabled = env.ENABLE_SOURCEMAP === 'true';
+  sourceMaps = ['true', 'false'].includes(env.ENABLE_SOURCEMAP) ? env.ENABLE_SOURCEMAP : 'reduced';
 } else {
-  sourceMapEnabled = !isProduction;
+  sourceMaps = isProduction ? 'reduced' : 'true';
 }
 
 const filterCssImport = (url, ...args) => {
@@ -105,7 +109,9 @@ export default {
         css: !LightningCssMinifyPlugin,
         legalComments: 'none',
       }),
-      LightningCssMinifyPlugin && new LightningCssMinifyPlugin(),
+      LightningCssMinifyPlugin && new LightningCssMinifyPlugin({
+        sourceMap: sourceMaps === 'true',
+      }),
     ],
     splitChunks: {
       chunks: 'async',
@@ -143,7 +149,7 @@ export default {
           {
             loader: 'css-loader',
             options: {
-              sourceMap: sourceMapEnabled,
+              sourceMap: sourceMaps === 'true',
               url: {filter: filterCssImport},
               import: {filter: filterCssImport},
             },
@@ -181,9 +187,10 @@ export default {
       filename: 'css/[name].css',
       chunkFilename: 'css/[name].[contenthash:8].css',
     }),
-    sourceMapEnabled && (new SourceMapDevToolPlugin({
+    sourceMaps !== 'false' && new SourceMapDevToolPlugin({
       filename: '[file].[contenthash:8].map',
-    })),
+      ...(sourceMaps === 'reduced' && {include: /^js\/index\.js$/}),
+    }),
     new MonacoWebpackPlugin({
       filename: 'js/monaco-[name].[contenthash:8].worker.js',
     }),