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

* replace #35564 * fix #36992
2026-08-20 06:58:07 +00:00 · 2026-08-18 01:43:34 +08:00
parent 596b7f7a25
commit dea71bb8ba
16 changed files with 205 additions and 46 deletions
@@ -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);
+}