Remove htmx

eslint.config.ts

@@ -574,7 +574,6 @@ export default defineConfig([
       'no-restricted-properties': [2, ...restrictedProperties],
       'no-restricted-imports': [2, {paths: [
         {name: 'jquery', message: 'Use the global $ instead', allowTypeImports: true},
-        {name: 'htmx.org', message: 'Use the global htmx instead', allowTypeImports: true},
       ]}],
       'no-restricted-syntax': [2, 'WithStatement', 'ForInStatement', 'LabeledStatement', 'SequenceExpression'],
       'no-return-assign': [0],
@@ -1021,6 +1020,6 @@ export default defineConfig([
   },
   {
     files: ['web_src/**/*'],
-    languageOptions: {globals: {...globals.browser, ...globals.jquery, htmx: false}},
+    languageOptions: {globals: {...globals.browser, ...globals.jquery}},
   },
 ]);

package.json

@@ -49,7 +49,6 @@
     "dropzone": "6.0.0-beta.2",
     "easymde": "2.20.0",
     "esbuild": "0.28.0",
-    "htmx.org": "2.0.8",
     "idiomorph": "0.7.4",
     "jquery": "4.0.0",
     "js-yaml": "4.1.1",

routers/common/markup.go

@@ -26,6 +26,8 @@ func RenderMarkup(ctx *context.Base, ctxRepo *context.Repository, mode, text, ur
 	// filePath is the path of the file to render if the end user is trying to preview a repo file (mode == "file")
 	// filePath will be used as RenderContext.RelativePath
 
+	// TODO: MARKUP-RENDER-CONTEXT: this logic is unnecessarily complicated.
+	//  Ideally: the "file path" should not appear in the "url path context", but it needs a lot of refactoring to achieve that
 	// for example, when previewing file "/gitea/owner/repo/src/branch/features/feat-123/doc/CHANGE.md", then filePath is "doc/CHANGE.md"
 	// and the urlPathContext is "/gitea/owner/repo/src/branch/features/feat-123/doc"
 

templates/repo/actions/workflow_dispatch_inputs.tmpl

@@ -12,14 +12,12 @@
 		<div class="ui field {{if .Required}}required{{end}}">
 			{{if eq .Type "choice"}}
 				<label>{{or .Description .Name}}:</label>
-				{{/* htmx won't initialize the fomantic dropdown, so it is a standard "select" input */}}
 				<select class="ui selection dropdown" name="{{.Name}}">
 					{{range .Options}}
 						<option value="{{.}}" {{if eq $item.Default .}}selected{{end}}>{{.}}</option>
 					{{end}}
 				</select>
 			{{else if eq .Type "boolean"}}
-				{{/* htmx doesn't trigger our JS code to attach fomantic label to checkbox, so here we use standard checkbox */}}
 				<label class="tw-flex flex-text-inline">
 					<input type="checkbox" name="{{.Name}}" {{if eq .Default "true"}}checked{{end}}>
 					{{or .Description .Name}}

templates/repo/editor/edit.tmpl

@@ -19,13 +19,11 @@
 						<div class="field">
 							<div class="ui top attached header">
 								<div class="flex-text-block tw-justify-between tw-flex-wrap">
-									<div class="ui compact small menu small-menu-items repo-editor-menu tw-self-start">
+									<div class="ui compact small menu small-menu-items repo-editor-menu" data-repo-link="{{.RepoLink}}" data-ref-sub-url="{{.RefTypeNameSubURL}}" data-branch-name="{{.BranchName}}">
 										<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
-										<a class="item{{if not .CodeEditorConfig.Previewable}} tw-hidden{{end}}" data-tab="preview" data-preview-url="{{.Repository.Link}}/markup" data-preview-context-ref="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
+										<a class="item {{if not .CodeEditorConfig.Previewable}}tw-hidden{{end}}" data-tab="preview">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
 										{{if not .IsNewFile}}
-										{{/*FIXME: the related logic is totally a mess, need to completely rewrite, that's also the root reason for
-												why the "migrate to CodeMirror" PR  took very long time on the legacy code and introduced "#file-name (filenameInput)" regressions many times*/}}
-										<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
+										<a class="item" data-tab="diff">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
 										{{end}}
 									</div>
 									{{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}}
@@ -39,10 +37,10 @@
 									<div class="editor-loading is-loading"></div>
 								</div>
 								<div class="ui tab tw-px-4 tw-py-3" data-tab="preview">
-									{{ctx.Locale.Tr "loading"}}
+									<div class="editor-loading is-loading"></div>
 								</div>
 								<div class="ui tab" data-tab="diff">
-									<div class="tw-p-16"></div>
+									<div class="editor-loading is-loading"></div>
 								</div>
 							</div>
 						</div>

templates/repo/editor/patch.tmpl

@@ -22,7 +22,7 @@
 			<div class="field">
 				<div class="ui top attached header">
 					<div class="flex-text-block tw-justify-between tw-flex-wrap">
-						<div class="ui compact small menu small-menu-items repo-editor-menu tw-self-start">
+						<div class="ui compact small menu small-menu-items repo-editor-menu">
 							<a class="active item" data-tab="write">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
 						</div>
 						{{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}}

templates/repo/view_list.tmpl

@@ -3,7 +3,7 @@
 	{{if .HasFilesWithoutLatestCommit}}
 		data-fetch-url="{{.LastCommitLoaderURL}}"
 		data-fetch-trigger="load" data-fetch-sync="$morph"
-		data-fetch-indicator="#repo-files-table .repo-file-cell.notready.message"
+		data-fetch-indicator=".repo-file-cell.notready.message"
 	{{end}}
 >
 	<div class="repo-file-line repo-file-last-commit">

tests/e2e/codeeditor.test.ts

@@ -8,7 +8,7 @@ test('codeeditor textarea updates correctly', async ({page, request}) => {
   try {
     await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/_new/main`);
     await page.getByPlaceholder('Name your file…').fill('test.js');
-    await expect(page.locator('.editor-loading')).toBeHidden();
+    await expect(page.locator('[data-tab="write"] .editor-loading')).toBeHidden();
     const editor = page.locator('.cm-content[role="textbox"]');
     await expect(editor).toBeVisible();
     await editor.click();

types.d.ts

@@ -36,11 +36,6 @@ declare module '*.vue' {
   export function initRepositoryActionView(): void;
 }
 
-declare module 'htmx.org/dist/htmx.esm.js' {
-  const value = await import('htmx.org');
-  export default value;
-}
-
 declare module 'idiomorph' {
   interface Idiomorph {
     morph(existing: Node | string, replacement: Node | string, options?: {morphStyle: 'innerHTML' | 'outerHTML'}): void;

vite.config.ts

@@ -40,7 +40,6 @@ const webComponents = new Set([
 
 const commonRolldownOptions: Rolldown.RolldownOptions = {
   checks: {
-    eval: false, // htmx needs eval
     pluginTimings: false,
   },
 };

web_src/css/repo.css

@@ -187,10 +187,6 @@ td .commit-summary {
   padding: 0 !important;
 }
 
-.repo-editor-menu {
-  min-height: auto !important;
-}
-
 .repo-editor-header {
   display: flex;
   margin: 1rem 0;

web_src/js/features/common-fetch-action.test.ts

@@ -0,0 +1,39 @@
+import {execPseudoSelectorCommands} from './common-fetch-action.ts';
+
+test('execPseudoSelectorCommands', () => {
+  window.document.body.innerHTML = `
+<div id="d1">
+    <ul id="u1">
+        <li class="x"></li>
+    </ul>
+    <ul id="u2">
+        <li class="x"></li>
+    </ul>
+</div>
+<div id="d2">
+    <ul id="u3">
+        <li class="x"></li>
+    </ul>
+</div>`;
+
+  let ret = execPseudoSelectorCommands(document.querySelector('#u1')!, '');
+  expect(ret.targets).toEqual([document.querySelector('#u1')]);
+
+  ret = execPseudoSelectorCommands(document.querySelector('#u1')!, '$this');
+  expect(ret.targets).toEqual([document.querySelector('#u1')]);
+  expect(ret.cmdInnerHTML).toBeFalsy();
+  expect(ret.cmdMorph).toBeFalsy();
+
+  ret = execPseudoSelectorCommands(document.querySelector('#u1')!, '$body $morph $innerHTML');
+  expect(ret.targets).toEqual([document.body]);
+  expect(ret.cmdInnerHTML).toBeTruthy();
+  expect(ret.cmdMorph).toBeTruthy();
+
+  ret = execPseudoSelectorCommands(document.querySelector('#u1')!, '$body .x');
+  expect(ret.targets.length).toEqual(3);
+  expect(ret.targets).toEqual(Array.from(document.querySelectorAll('.x')));
+
+  ret = execPseudoSelectorCommands(document.querySelector('#u1 .x')!, '$closest(div) .x');
+  expect(ret.targets.length).toEqual(2);
+  expect(ret.targets).toEqual(Array.from(document.querySelectorAll('#d1 .x')));
+});