tricu

import-folds.mjs (6973B)

---

 // Cursor-driven import folding and inline module browsing; no runtime assets required.
 // nix shell nixpkgs#nodejs nixpkgs#chromium -c node ext/demo-site/test/import-folds.mjs
 import assert from 'node:assert/strict';
 import {createServer} from 'node:http';
 import {spawn} from 'node:child_process';
 import {mkdtemp,readFile,rm} from 'node:fs/promises';
 import {tmpdir} from 'node:os';
 import {join} from 'node:path';
 const dir=await mkdtemp(join(tmpdir(),'arboricx-import-folds-'));
 let browser,socket,server;
 try{
  const root=new URL('../',import.meta.url);
  browser=spawn(process.argv[2]||'chromium',['--headless','--no-sandbox','--disable-dev-shm-usage','--remote-debugging-port=0',`--user-data-dir=${join(dir,'profile')}`,'about:blank'],{stdio:['ignore','ignore','pipe']});
  const endpoint=await new Promise((resolve,reject)=>{
   let log='';const timer=setTimeout(()=>reject(Error(log)),15000);
   browser.on('error',reject);
   browser.stderr.on('data',chunk=>{log+=chunk;const m=log.match(/DevTools listening on (ws:\/\/\S+)/);if(m){clearTimeout(timer);resolve(new URL(m[1]));}});
  });
  const tab=await(await fetch(`http://${endpoint.host}/json/new?about:blank`,{method:'PUT'})).json();
  socket=new WebSocket(tab.webSocketDebuggerUrl);
  await new Promise((resolve,reject)=>{socket.onopen=resolve;socket.onerror=reject;});
  let id=0;const pending=new Map();
  socket.onmessage=({data})=>{const event=JSON.parse(data);if(event.id){const p=pending.get(event.id);pending.delete(event.id);event.error?p.reject(Error(JSON.stringify(event.error))):p.resolve(event.result);}};
  const send=(method,params={})=>new Promise((resolve,reject)=>{pending.set(++id,{resolve,reject});socket.send(JSON.stringify({id,method,params}));});
  const evaluate=async expression=>{const r=await send('Runtime.evaluate',{expression,returnByValue:true,awaitPromise:true});if(r.exceptionDetails)throw Error(JSON.stringify(r.exceptionDetails));return r.result.value;};
 
  server=createServer(async(req,res)=>{
   try {
    if(req.url==='/'){res.setHeader('Content-Type','text/html');res.end('<link rel="stylesheet" href="/style.css"><div id="editor" style="height:500px;position:relative"></div>');return;}
    res.setHeader('Content-Type',req.url.endsWith('.js')?'text/javascript':'text/css');
    res.end(await readFile(new URL('.'+req.url,root)));
   }catch{res.statusCode=404;res.end();}
  });
  await new Promise(resolve=>server.listen(0,'127.0.0.1',resolve));
  await send('Page.navigate',{url:`http://127.0.0.1:${server.address().port}/`});
  for(let i=0;!await evaluate("!!document.getElementById('editor')");i++){assert(i<200);await new Promise(r=>setTimeout(r,25));}
  const result=await evaluate(`(async()=>{
   const {SourceEditor}=await import('/dist/source-editor.js');
   const {moduleInspector}=await import('/dist/module-inspector.js');
   const editor=new SourceEditor(document.getElementById('editor'));globalThis.editor=editor;
   const hash='a'.repeat(64),other='b'.repeat(64);
   const source='!import '+hash+' as A\\n!import '+other+' as B\\nanswer = 42';
   editor.replaceSource(source);
   moduleInspector(editor,()=>[{manifest:hash,label:'Local test',names:['one','two']}]);
   const check=(ok,message)=>{if(!ok)throw Error(message);};
   const full=()=>editor.dom.querySelectorAll('.import-hash-full');
   const folded=()=>editor.dom.querySelectorAll('.import-hash');
   check(full().length===1&&folded().length===1,'Initial cursor line expands');
   editor.select(source.length);check(full().length===0,'Leaving folds all imports');
   folded()[0].click();check(full().length===1,'Folded click selects line');
   check(editor.view.state.selection.main.head===8+64,'Folded click selects end');
   check(editor.dom.querySelector('.module-card').hidden,'Folded click does not open card');
   full()[0].click();await Promise.resolve();
   check(!editor.dom.querySelector('.module-card').hidden,'Expanded click opens card');
   check(editor.dom.querySelectorAll('.module-exports button').length===2,'Exact module exports');
   const search=editor.dom.querySelector('.module-card input');search.value='two';search.dispatchEvent(new Event('input'));
   check(editor.dom.querySelectorAll('.module-exports button').length===1,'Shared export filtering');
   check(full().length===1,'Card focus preserves expansion');
   editor.select(0,source.indexOf('!import '+other));await Promise.resolve();
   check(full().length===1&&full()[0].textContent===other,'Selection head alone expands');
   check(editor.dom.querySelector('.module-card').hidden,'Moving cursor dismisses card');
   check(editor.getSource()===source&&!editor.undo(),'Presentation preserves document/history');
   return 'cursor-line folding and module card passed';
  })()`);
  // Exercise native hit testing as well as programmatic/keyboard cursor changes.
  await evaluate('editor.select(editor.getSource().length)');
  const click=async selector=>{
   const point=await evaluate(`(()=>{const r=document.querySelector(${JSON.stringify(selector)}).getBoundingClientRect();return {x:r.left+r.width/2,y:r.top+r.height/2};})()`);
   await send('Input.dispatchMouseEvent',{type:'mousePressed',...point,button:'left',clickCount:1});
   await send('Input.dispatchMouseEvent',{type:'mouseReleased',...point,button:'left',clickCount:1});
  };
  await click('.import-hash');
  assert.equal(await evaluate("document.querySelectorAll('.import-hash-full').length"),1);
  assert.equal(await evaluate("document.querySelector('.module-card').hidden"),true);
  await click('.import-hash-full');
  assert.equal(await evaluate("document.querySelector('.module-card').hidden"),false);
  assert.equal(await evaluate("document.querySelectorAll('.module-exports button').length"),2);
  // Export labels must fit their buttons at both desktop and narrow widths.
  for(const width of [1440,390]){
   await send('Emulation.setDeviceMetricsOverride',{width,height:900,deviceScaleFactor:1,mobile:false});
   const layout=await evaluate(`(async()=>{
    const {renderLibraryExports}=await import('/dist/library-browser.js');
    const list=document.querySelector('.module-exports');
    renderLibraryExports(list,['false_', 'resultMatch', 'mapMaybe', 'iterateUntil', 'extraordinarilyLongExportName'.repeat(5)],'',()=>{});
    await new Promise(resolve=>requestAnimationFrame(resolve));
    const buttons=[...list.querySelectorAll('button')];
    return buttons.every(button=>{
     const box=button.getBoundingClientRect(),range=document.createRange();range.selectNodeContents(button);
     const text=range.getBoundingClientRect();
     return text.left>=box.left&&text.right<=box.right&&text.top>=box.top&&text.bottom<=box.bottom&&button.scrollWidth<=button.clientWidth;
    })&&list.scrollWidth<=list.clientWidth;
   })()`);
   assert.equal(layout,true,`Export labels fit without overlap at ${width}px`);
  }
  console.log(result+'; trusted mouse clicks and export layout passed');
 }finally{socket?.close();browser?.kill();server?.close();await rm(dir,{recursive:true,force:true,maxRetries:10,retryDelay:100});}