enhance: user-friendly packages setup manual (#38946)

* replace #35564
* fix #36992

web_src/css/repo/packages.css

@@ -9,6 +9,24 @@
   width: calc(100% - 250px - 16px);
 }
 
+.packages-content-left .markup {
+  margin: var(--gap-block) 0;
+}
+
+.packages-content-left .markup pre.code-block {
+  margin: 0;
+}
+
+.package-manual-vars {
+  display: flex;
+  gap: 1em;
+  flex-wrap: wrap;
+}
+
+.package-manual-vars select {
+  border-radius: var(--border-radius);
+}
+
 .packages-content-right {
   margin: 0 !important;
   width: 250px;

web_src/js/features/packages.test.ts

@@ -0,0 +1,18 @@
+import {initPackagesManualVars} from './packages.ts';
+import {createElementFromHTML} from '../utils/dom.ts';
+
+test('initPackagesManualVars', () => {
+  const el = createElementFromHTML<HTMLElement>(`
+<div>
+  <select data-code-var="foo"><option value="v1"></option><option value="v2"></option></select>
+  <span>$foo</span>
+</div>
+`);
+  initPackagesManualVars(el);
+  const elSelect = el.querySelector<HTMLSelectElement>('select')!;
+  const elSpan = el.querySelector('span')!;
+  expect(elSpan.textContent).toBe('v1');
+  elSelect.value = 'v2';
+  elSelect.dispatchEvent(new Event('change'));
+  expect(elSpan.textContent).toBe('v2');
+});

web_src/js/features/packages.ts

@@ -0,0 +1,24 @@
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+import {queryElems} from '../utils/dom.ts';
+
+export function initPackagesManualVars(el: HTMLElement) {
+  queryElems(el, 'span', (elSpan: HTMLElement) => {
+    const text = elSpan.textContent;
+    if (!text.startsWith('$')) return;
+    elSpan.setAttribute('data-code-var', text.substring(1));
+  });
+  const syncVar = (elSelect: HTMLSelectElement) => {
+    const varName = elSelect.getAttribute('data-code-var')!;
+    const elSpans = el.querySelectorAll(`span[data-code-var="${CSS.escape(varName)}"]`);
+    if (elSpans.length === 0) throw new Error(`No span found for variable ${varName}`);
+    for (const elSpan of elSpans) elSpan.textContent = elSelect.value;
+  };
+  queryElems(el, 'select[data-code-var]', (elSelect: HTMLSelectElement) => {
+    syncVar(elSelect);
+    elSelect.addEventListener('change', () => syncVar(elSelect));
+  });
+}
+
+export function initPackagesView() {
+  registerGlobalInitFunc('initPackagesManualVars', initPackagesManualVars);
+}

web_src/js/index.ts

@@ -66,6 +66,7 @@ import {initRefIssueContextPopup} from './features/ref-issue.ts';
 import {initGlobalShortcut} from './modules/shortcut.ts';
 import {initDevtest} from './modules/devtest.ts';
 import {initRepoWatch} from './features/repo-watch.ts';
+import {initPackagesView} from './features/packages.ts';
 
 const initStartTime = performance.now();
 const initPerformanceTracer = callInitFunctions([
@@ -103,6 +104,7 @@ const initPerformanceTracer = callInitFunctions([
   initTableSort,
   initRepoFileSearch,
   initCopyContent,
+  initPackagesView,
 
   initAdminCommon,
   initAdminUserListSearchForm,