tricu

local-modules-ui.js (5343B)

---

 import { BUNDLE_LIMIT } from './bundle.js';
 import { LOCAL_MODULE_BYTES, LOCAL_MODULE_COUNT } from './local-modules.js';
 // Hold local module files in page memory until removal or page departure.
 export function localModulesUI(changed) {
     const input = document.getElementById('local-module-file');
     const list = document.getElementById('local-module-list');
     const status = document.getElementById('local-module-status');
     const cancel = document.getElementById('cancel-local-module');
     const modules = new Map();
     let busy = false, checking = false, abort;
     const render = () => {
         input.disabled = busy || checking;
         cancel.hidden = !checking;
         list.replaceChildren();
         for (const [manifest, { label, module }] of modules) {
             const row = document.createElement('li'), title = document.createElement('p');
             title.textContent = `${label} · ${module.names.length} export(s) · ${module.bytes.byteLength.toLocaleString()} bytes`;
             const code = document.createElement('code');
             code.textContent = `!import ${manifest} as Local`;
             const details = document.createElement('details'), summary = document.createElement('summary'), names = document.createElement('p');
             summary.textContent = 'Exports and bundle hash';
             names.textContent = `${module.names.join(', ')}\nBundle SHA-256: ${module.hash}`;
             details.append(summary, names);
             const copy = document.createElement('button');
             copy.textContent = 'Copy import';
             copy.onclick = () => { void (async () => { try {
                 await navigator.clipboard.writeText(code.textContent);
                 status.textContent = 'Import copied.';
             }
             catch {
                 status.textContent = code.textContent;
             } })(); };
             const remove = document.createElement('button');
             remove.textContent = 'Remove';
             remove.dataset['removeModule'] = manifest;
             remove.disabled = busy || checking;
             remove.onclick = () => { modules.delete(manifest); render(); status.textContent = 'Local module removed. Draft imports will be resolved again.'; changed(); };
             row.append(title, code, details, copy, remove);
             list.append(row);
         }
     };
     cancel.onclick = () => abort?.();
     input.onchange = () => {
         const file = input.files?.[0];
         input.value = '';
         if (!file || busy || checking)
             return;
         if (!file.size || file.size > BUNDLE_LIMIT) {
             status.textContent = 'Choose a nonempty .arboricx file of at most 16 MiB.';
             return;
         }
         checking = true;
         render();
         status.textContent = 'Checking module locally…';
         void (async () => {
             let worker, active = true;
             let timer;
             try {
                 const current = new Worker(new URL('./local-module-worker.js', import.meta.url), { type: 'module' });
                 worker = current;
                 const module = await new Promise((resolve, reject) => {
                     abort = () => reject(new Error('Local file check cancelled.'));
                     timer = setTimeout(() => reject(new Error('Local file check timed out.')), 60_000);
                     current.onmessage = ({ data }) => data.module ? resolve(data.module) : reject(new Error(data.error ?? 'Invalid local module'));
                     current.onerror = event => { event.preventDefault(); reject(new Error(event.message || 'Local file check failed')); };
                     void file.arrayBuffer().then(bytes => { if (active)
                         current.postMessage(new Uint8Array(bytes)); }).catch(reject);
                 });
                 if (modules.has(module.manifest)) {
                     status.textContent = 'This module manifest is already available locally.';
                     return;
                 }
                 const total = [...modules.values()].reduce((n, item) => n + item.module.bytes.byteLength, module.bytes.byteLength);
                 if (modules.size >= LOCAL_MODULE_COUNT || total > LOCAL_MODULE_BYTES)
                     throw new Error('Local collection limit: 32 modules / 64 MiB. Remove a module first.');
                 modules.set(module.manifest, { label: file.name.slice(0, 256), module });
                 status.textContent = 'Available locally by manifest hash.';
                 changed();
             }
             catch (error) {
                 status.textContent = String(error);
             }
             finally {
                 active = false;
                 clearTimeout(timer);
                 worker?.terminate();
                 abort = undefined;
                 checking = false;
                 render();
             }
         })();
     };
     render();
     return { entries: () => [...modules.values()].map(({ label, module }) => ({ label, manifest: module.manifest, names: [...module.names] })), inputs: () => [...modules.values()].map(({ module }) => ({ manifest: module.manifest, bytes: module.bytes })), disable: value => { busy = value; input.disabled = busy || checking; for (const button of list.querySelectorAll('[data-remove-module]'))
             button.disabled = busy || checking; } };
 }