tricu

import-picker.ts (9901B)

---

 import { fetchBytes } from './bundle.js';
 import { libraryIndex, latestLibraries, matchesLibrary, type Library } from './library-index.js';
 import { packageReleases } from './packages.js';
 import type { ImportPlan } from './import-plan.js';
 import type { LocalModuleInput } from './local-modules.js';
 interface Choice { title: string; description: string; manifest: string; names: string[]; alias: string; library?: Library; }
 interface Options {
   source: HTMLTextAreaElement;
   backend(): string;
   available(): boolean;
   local(): { label: string; manifest: string; names: string[] }[];
   inputs(): LocalModuleInput[];
 }
 export function importPicker(options: Options): { cancel(): void } {
   const get = <T extends HTMLElement>(id: string): T => document.getElementById(id) as T;
   const dialog = get<HTMLDialogElement>('import-dialog'), open = get<HTMLButtonElement>('add-import');
   const search = get<HTMLInputElement>('import-search'), results = get('import-results'), detail = get('import-detail');
   const alias = get<HTMLInputElement>('import-alias'), versions = get<HTMLSelectElement>('import-version');
   const status = get('import-status'), preview = get('import-preview'), insert = get<HTMLButtonElement>('insert-import');
   let libraries: Library[] | undefined, selected: Choice | undefined, plan: ImportPlan | undefined;
   let worker: Worker | undefined, timer: ReturnType<typeof setTimeout> | undefined, debounce: ReturnType<typeof setTimeout> | undefined;
   let revision = 0, snapshot = '', backend = '';
   const stop = (): void => { revision++; worker?.terminate(); worker = undefined; clearTimeout(timer); clearTimeout(debounce); };
   const finish = (): void => { stop(); dialog.close(); open.focus(); };
   const message = (text: string): void => { status.textContent = text; };
   const statement = (): string => selected ? `!import ${selected.manifest} as ${alias.value}` : '';
   function check(): void {
     stop(); plan = undefined; insert.disabled = true; insert.textContent = 'Insert import'; preview.textContent = statement();
     if (!selected) return;
     if (!/^[A-Za-z_][A-Za-z0-9_]{0,127}$/u.test(alias.value)) { message('Choose a namespace using letters, digits and underscores, starting with a letter or underscore.'); return; }
     message('Checking with the native compiler…');
     const current = revision;
     debounce = setTimeout(() => {
       if (!dialog.open || current !== revision) return;
       const url = new URL('./wasm-worker.js', import.meta.url); url.searchParams.set('backend', backend);
       const next = new Worker(url, { type: 'module' }); worker = next;
       const fail = (text: string): void => { if (current !== revision) return; stop(); message(`${text} You can copy the import and finish editing the source.`); };
       timer = setTimeout(() => fail('Import check timed out.'), 60_000);
       next.onerror = event => { event.preventDefault(); fail(event.message || 'Import check failed.'); };
       next.onmessage = ({ data }: MessageEvent<{ type: string; plan?: ImportPlan; message?: string }>) => {
         if (current !== revision || !dialog.open) return;
         if (data.type === 'error') { fail(data.message ?? 'Import check failed.'); return; }
         if (data.type !== 'import-checked' || !data.plan) return;
         plan = data.plan; stop(); insert.disabled = false;
         insert.textContent = plan.existing ? 'Show existing import' : 'Insert import';
         message(plan.existing ? `Already imported ${plan.existing.alias === '*' ? 'openly' : 'as ' + plan.existing.alias}.` : 'Ready to insert.');
       };
       next.postMessage({ type: 'check-import', source: snapshot, manifest: selected!.manifest, alias: alias.value, localModules: options.inputs() });
     }, 250);
   }
   function show(choice: Choice, focus = true): void {
     selected = choice; get('import-actions').hidden = false; results.hidden = true; get('import-browse').hidden = true; detail.hidden = false;
     get('import-title').textContent = choice.title; get('import-description').textContent = choice.description;
     get('import-usage').replaceChildren(...(choice.library?.usage ?? '').split('`').map((text, i) => {
       if (i % 2 === 0) return document.createTextNode(text);
       const code = document.createElement('code'); code.textContent = text; return code;
     })); get('import-usage-details').hidden = !choice.library?.usage;
     get('import-example').textContent = choice.library?.example ?? ''; get('import-example-details').hidden = !choice.library?.example;
     (get('import-usage-details') as HTMLDetailsElement).open = false; (get('import-example-details') as HTMLDetailsElement).open = false;
     alias.value = choice.alias; versions.replaceChildren(); versions.hidden = !choice.library;
     get('import-version-label').hidden = !choice.library;
     if (choice.library) for (const release of packageReleases(libraries!, choice.library.name)) {
       const option = new Option(release.version, release.version); option.selected = release.version === choice.library.version; versions.add(option);
     }
     const reference = get<HTMLAnchorElement>('import-reference'); reference.hidden = !choice.library;
     if (choice.library) reference.href = new URL('../reference/' + choice.library.reference, import.meta.url).href;
     get<HTMLInputElement>('import-export-search').value = ''; renderExports(); check();
     if (focus) { get('import-content').scrollTop = 0; get('import-title').focus({ preventScroll: true }); }
   }
   function renderExports(): void {
     const query = get<HTMLInputElement>('import-export-search').value.toLowerCase();
     get('import-exports').textContent = selected?.names.filter(n => n.toLowerCase().includes(query)).join('\n') || 'No matching exports.';
   }
   function browse(): void {
     stop(); selected = undefined; plan = undefined; detail.hidden = true; get('import-actions').hidden = true; get('import-content').scrollTop = 0; get('import-browse').hidden = false; results.hidden = false; message(''); results.replaceChildren();
     const choices: Choice[] = [
       ...options.local().map(row => ({ title: row.label, description: 'Local file', manifest: row.manifest, names: row.names, alias: 'Local' })),
       ...latestLibraries(libraries ?? []).map(row => ({ title: row.title, description: row.description, manifest: row.manifest, names: row.names, alias: row.alias, library: row })),
     ].filter(row => matchesLibrary(row, search.value));
     for (const choice of choices) {
       const button = document.createElement('button'); button.type = 'button'; button.dataset['manifest'] = choice.manifest;
       const title = document.createElement('strong'); title.textContent = choice.title + (choice.library ? ' · ' + choice.library.version : '');
       const description = document.createElement('span'); description.textContent = choice.description;
       const label = document.createElement('small');
       const match = choice.names.filter(n => search.value.trim() && n.toLowerCase().includes(search.value.toLowerCase().trim())).slice(0, 5);
       label.textContent = `${choice.library ? 'Published library' : 'Local file'} · ${choice.names.length} exports${match.length ? ' · ' + match.join(', ') : ''}`;
       button.append(title, description, label); button.onclick = () => show(choice); results.append(button);
     }
     if (!choices.length) results.textContent = 'No matching libraries. Try an exported name or a broader search.';
   }
   open.onclick = () => {
     if (!options.available()) return;
     snapshot = options.source.value; backend = options.backend(); search.value = ''; dialog.showModal(); browse(); search.focus();
     if (!libraries) {
       message('Loading library references…');
       void fetchBytes(new URL('../reference/libraries.json', import.meta.url), 2_097_152).then(bytes => {
         libraries = libraryIndex(JSON.parse(new TextDecoder('utf-8', { fatal: true }).decode(bytes)) as unknown);
         if (dialog.open && !selected) browse();
       }).catch(error => { if (dialog.open) message(`Library references could not be loaded: ${String(error)}. Close and reopen to retry. Local modules remain available.`); });
     }
   };
   search.oninput = browse; alias.oninput = check; get<HTMLInputElement>('import-export-search').oninput = renderExports;
   versions.onchange = () => { const row = libraries?.find(r => r.name === selected?.library?.name && r.version === versions.value); if (row) show({ title: row.title, description: row.description, manifest: row.manifest, names: row.names, alias: alias.value, library: row }, false); };
   get('import-back').onclick = () => { browse(); search.focus(); };
   get('import-cancel').onclick = finish;
   dialog.addEventListener('cancel', () => stop()); dialog.addEventListener('close', () => { if (!dialog.open) stop(); });
   get('copy-import').onclick = () => { void navigator.clipboard.writeText(statement()).then(() => message('Import copied.'), () => message('Select and copy the import preview.')); };
   insert.onclick = () => {
     if (!plan || !options.available() || options.source.value !== snapshot || options.backend() !== backend) { stop(); insert.disabled = true; message('The editor changed. Close and reopen the picker to use the current source.'); return; }
     const checked = plan; finish(); options.source.focus();
     if (checked.existing) { options.source.setSelectionRange(checked.existing.start, checked.existing.end); return; }
     // Native textarea editing supplies one undo transaction on supported browsers.
     options.source.setSelectionRange(0, 0);
     if (!document.execCommand('insertText', false, checked.statement)) {
       message('Your browser could not insert an undoable edit. Copy the import from the picker.');
       dialog.showModal(); return;
     }
     options.source.setSelectionRange(0, checked.statement.length);
   };
   return { cancel: () => { if (dialog.open) finish(); } };
 }