tricu

import-picker.ts (12458B)

---

 import type { SourceEditor } from './source-editor.js';
 import { loadLibraries, renderLibraryExports } from './library-browser.js';
 import { moduleInspector } from './module-inspector.js';
 import { 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; definition?: string; }
 interface Options {
   source: SourceEditor;
   backend(): string;
   available(): boolean;
   editable(): boolean;
   tryLibrary(library: Library, definition?: string): void;
   local(): { label: string; manifest: string; names: string[] }[];
   inputs(): LocalModuleInput[];
 }
 export function importPicker(options: Options): { cancel(): void } {
   const inspector = moduleInspector(options.source, options.local);
   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 tryButton = get<HTMLButtonElement>('try-library');
   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; tryButton.disabled = false; insert.textContent = 'Insert import'; preview.textContent = statement();
     if (!selected) return;
     if (!options.editable()) { message('Browse references, copy an import, or open this library in the Playground.'); 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; tryButton.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.definition ? `${choice.definition} · ${choice.title}` : 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;
     get('import-definition').textContent = choice.definition ? `Definition: ${choice.definition} · from ${choice.title}. Adding an import makes the whole library available.` : 'Explore exports below. Imports make the whole library available.';
     tryButton.hidden = options.editable() || !choice.library;
     tryButton.textContent = 'Open library';
     get<HTMLButtonElement>('copy-qualified').hidden = !choice.definition;
     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();
     renderLibraryExports(get('import-exports'), selected?.names ?? [], query, name => {
       if (selected) show({ ...selected, alias: alias.value, definition: name }, false);
     });
   }
 
   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));
     const heading = (text: string): void => { const h = document.createElement('h3'); h.textContent = text; results.append(h); };
     const addChoice = (choice: Choice): void => {
       const button = document.createElement('button'); button.type = 'button'; button.dataset['manifest'] = choice.manifest;
       const title = document.createElement('strong'); title.textContent = (choice.definition ? choice.definition + ' · ' : '') + 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);
     };
     heading('Libraries');
     for (const choice of choices) addChoice(choice);
     if (search.value.trim()) {
       heading('Definitions');
       const query = search.value.toLowerCase().trim();
       const matches = choices.flatMap(choice => choice.names.filter(name => name.toLowerCase().includes(query)).map(definition => ({ ...choice, definition })));
       matches.sort((a, b) => Number(b.definition.toLowerCase() === query) - Number(a.definition.toLowerCase() === query) || a.definition.localeCompare(b.definition));
       for (const match of matches.slice(0, 80)) addChoice(match);
       if (matches.length > 80) { const note = document.createElement('p'); note.textContent = 'Showing 80 definitions. Refine your search for more specific results.'; results.append(note); }
       if (!matches.length) { const note = document.createElement('p'); note.textContent = 'No matching definitions.'; results.append(note); }
     }
     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.getSource(); backend = options.backend(); search.value = ''; dialog.showModal(); browse(); search.focus();
     if (!libraries) {
       message('Loading library references…');
       void loadLibraries().then(rows => {
         libraries = rows;
         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, ...(selected?.definition && row.names.includes(selected.definition) ? { definition: selected.definition } : {}) }, false); };
   get('import-back').onclick = () => { browse(); search.focus(); };
   get('import-cancel').onclick = finish;
   dialog.addEventListener('cancel', () => stop()); dialog.addEventListener('close', () => { if (!dialog.open) stop(); });
   tryButton.onclick = () => {
     if (selected?.library) { const choice = selected; finish(); options.tryLibrary(choice.library!, choice.definition); }
   };
   const qualifiedName = (name: string): string => {
     const namespace = plan?.existing?.alias ?? alias.value;
     return namespace === '*' ? name : `${namespace}.${name}`;
   };
   get('copy-qualified').onclick = () => {
     if (!selected?.definition) return;
     void navigator.clipboard.writeText(qualifiedName(selected.definition)).then(() => message('Qualified name copied.'), () => message('Clipboard unavailable. Use the namespace and definition shown above.'));
   };
   get('copy-import').onclick = () => { void navigator.clipboard.writeText(statement()).then(() => message('Import copied.'), () => message('Select and copy the import preview.')); };
   function applyPlan(): void {
     if (!plan || !options.available() || options.source.getSource() !== 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.select(checked.existing.start, checked.existing.end); return; }
     options.source.edit(0,0,checked.statement);
     options.source.select(0,checked.statement.length);
 
   }
   insert.onclick = () => applyPlan();
   return { cancel: () => { inspector.hide(); if (dialog.open) finish(); } };
 }