app.js

import { stripComments } from './src/comment-stripper.js';
import { getProfiles, detectLanguageByContent, detectLanguageByFilename } from './src/languages.js';
import { renderAdditionalSnippets } from './src/test-snippets.js';

const codeInput=document.querySelector('#codeInput');const output=document.querySelector('#outputCode');const languageSelect=document.querySelector('#languageSelect');const fileInput=document.querySelector('#fileInput');const fileName=document.querySelector('#fileName');const stats=document.querySelector('#stats');const whitespaceToggle=document.querySelector('#trimWhitespace');const wrapToggle=document.querySelector('#wrapText');const copyInputButton=document.querySelector('#copyInputButton');const copyButton=document.querySelector('#copyButton');const downloadButton=document.querySelector('#downloadButton');const swapButton=document.querySelector('#swapButton');const clearButton=document.querySelector('#clearButton');const themeButton=document.querySelector('#themeButton');const sampleButton=document.querySelector('#sampleButton');

let currentFileName='';
function loadLanguages(){languageSelect.innerHTML='<option value="auto">Auto detect</option>'+getProfiles().filter(p=>p.id!=='generic').map(p=>`<option value="${p.id}">${p.name}</option>`).join('');}
function lineCount(value){return value.length?value.split(/\r\n|\r|\n/).length:0;}
function byteCount(value){return new Blob([value]).size;}
function process(){const selected=languageSelect.value;const language=selected==='auto'?detectLanguageByContent(codeInput.value):selected;let result=stripComments(codeInput.value,language);if(whitespaceToggle.checked)result=result.replace(/^[ \t]+$/gm,'').replace(/\n{3,}/g,'\n\n');output.value=result;const removed=Math.max(0,codeInput.value.length-result.length);const inputLines=lineCount(codeInput.value);const outputLines=lineCount(result);const reduction=codeInput.value.length?Math.round((removed/codeInput.value.length)*100):0;stats.textContent=`${language} · ${removed.toLocaleString()} chars removed (${reduction}%) · ${inputLines} → ${outputLines} lines · ${byteCount(result).toLocaleString()} bytes`;
}
function readFile(file){const reader=new FileReader();reader.onload=()=>{codeInput.value=String(reader.result||'');currentFileName=file.name;fileName.textContent=file.name;const detected=detectLanguageByFilename(file.name);languageSelect.value=detected==='generic'?'auto':detected;process();};reader.readAsText(file);}
async function copyText(value,button,label){await navigator.clipboard.writeText(value);const original=button.textContent;button.textContent=label;setTimeout(()=>{button.textContent=original;},1200);}
function setWrap(){const value=wrapToggle.checked?'pre-wrap':'pre';codeInput.style.whiteSpace=value;output.style.whiteSpace=value;localStorage.setItem('ncc-wrap',String(wrapToggle.checked));}
function swap(){const input=codeInput.value;codeInput.value=output.value;output.value=input;currentFileName='';fileName.textContent='No file selected';process();}
function clearAll(){codeInput.value='';output.value='';currentFileName='';fileName.textContent='No file selected';process();codeInput.focus();}
function loadSample(){const sample='// Remove this comment\nconst endpoint = "https://example.com/api//users";\n\n/* Temporary value */\nconst message = "Keep // this string";\nconsole.log(message);';codeInput.value=sample;currentFileName='';fileName.textContent='Sample code';languageSelect.value='javascript';process();codeInput.focus();}
function downloadOutput(){const base=currentFileName?currentFileName.replace(/\.[^.]+$/,''):'code';const extension=currentFileName&&currentFileName.includes('.')?currentFileName.slice(currentFileName.lastIndexOf('.')):'.txt';const blob=new Blob([output.value],{type:'text/plain;charset=utf-8'});const url=URL.createObjectURL(blob);const link=document.createElement('a');link.href=url;link.download=`${base}-stripped${extension}`;document.body.appendChild(link);link.click();link.remove();setTimeout(()=>URL.revokeObjectURL(url),0);}
function toggleTheme(){const dark=document.body.classList.toggle('dark');themeButton.textContent=dark?'Light mode':'Dark mode';localStorage.setItem('ncc-theme',dark?'dark':'light');}
loadLanguages();wrapToggle.checked=localStorage.getItem('ncc-wrap')!=='false';setWrap();if(localStorage.getItem('ncc-theme')==='dark'){document.body.classList.add('dark');themeButton.textContent='Light mode';}renderAdditionalSnippets();codeInput.addEventListener('input',process);languageSelect.addEventListener('change',process);whitespaceToggle.addEventListener('change',process);wrapToggle.addEventListener('change',setWrap);document.querySelector('#uploadButton').addEventListener('click',()=>fileInput.click());fileInput.addEventListener('change',e=>{const file=e.target.files?.[0];if(file)readFile(file);});codeInput.addEventListener('dragover',e=>{e.preventDefault();codeInput.classList.add('drag');});codeInput.addEventListener('dragleave',()=>codeInput.classList.remove('drag'));codeInput.addEventListener('drop',e=>{e.preventDefault();codeInput.classList.remove('drag');const file=e.dataTransfer.files?.[0];if(file)readFile(file);});copyInputButton.addEventListener('click',()=>copyText(codeInput.value,copyInputButton,'Copied'));copyButton.addEventListener('click',()=>copyText(output.value,copyButton,'Copied'));downloadButton.addEventListener('click',downloadOutput);swapButton.addEventListener('click',swap);clearButton.addEventListener('click',clearAll);sampleButton.addEventListener('click',loadSample);themeButton.addEventListener('click',toggleTheme);codeInput.addEventListener('keydown',e=>{if(e.ctrlKey&&e.key==='Enter')process();if(e.ctrlKey&&e.shiftKey&&e.key.toLowerCase()==='s'){e.preventDefault();swap();}if(e.ctrlKey&&e.key.toLowerCase()==='d'){e.preventDefault();downloadOutput();}if(e.ctrlKey&&e.key.toLowerCase()==='l'){e.preventDefault();clearAll();}});process();