⚡ optimize DOM rendering for file previews

.gitignore

@@ -1,2 +1,3 @@
 __pycache__/
 *.pyc
+node_modules/

benchmark.js

@@ -0,0 +1,83 @@
+const fs = require('fs');
+const { JSDOM } = require('jsdom');
+
+const html = fs.readFileSync('docs/index.html', 'utf8');
+
+function extractScriptContext(htmlStr) {
+    const startIdx = htmlStr.indexOf('<script type="module">') + '<script type="module">'.length;
+    const endIdx = htmlStr.lastIndexOf('</script>');
+    return htmlStr.substring(startIdx, endIdx);
+}
+
+const scriptContent = extractScriptContext(html);
+
+// We'll mock the DOM and some globals
+const dom = new JSDOM(`
+  <div id="fileInput"></div>
+  <div id="targetFormat"></div>
+  <div id="convertBtn"></div>
+  <div id="status"></div>
+  <div id="downloads-container"></div>
+  <div id="preview-container"></div>
+  <div id="fileStatusText"></div>
+`, { runScripts: "outside-only" });
+
+const window = dom.window;
+const document = window.document;
+
+window.URL = {
+    createObjectURL: () => "blob:test",
+    revokeObjectURL: () => {}
+};
+window.fetch = () => Promise.resolve({ ok: true, json: () => Promise.resolve([]) });
+window.alert = () => {};
+
+// Remove imports from the script
+const cleanedScript = scriptContent
+    .replace(/import .*/g, '')
+    .replace(/loadFormats\(\);/g, '')
+    .replace(/initWasm\(\);/g, '');
+
+// Run the script in the context
+window.eval(`
+    ${cleanedScript}
+    window.renderPreviews = renderPreviews;
+    window.selectedFiles = selectedFiles;
+    window.fileStatusText = fileStatusText;
+    window.previewContainer = previewContainer;
+    window.fileInput = fileInput;
+
+    window.simulateAddFiles = (files) => {
+        const e = { target: { files: files } };
+        // Trigger the listener
+        const event = new window.Event('change');
+        Object.defineProperty(event, 'target', {writable: false, value: {files}});
+        fileInput.dispatchEvent(event);
+    }
+`);
+
+const numFiles = 100;
+const mockFiles = Array.from({ length: numFiles }, (_, i) => ({
+    name: `file${i}.jpg`,
+    type: 'image/jpeg'
+}));
+
+console.log("Measuring Baseline for 100 files...");
+
+let start = Date.now();
+
+for (let i = 0; i < numFiles; i++) {
+    window.simulateAddFiles([mockFiles[i]]);
+}
+
+let end = Date.now();
+console.log(`Time to add 100 files sequentially: ${end - start} ms`);
+
+start = Date.now();
+for (let i = numFiles - 1; i >= 0; i--) {
+    // We just call the remove button click for the last element
+    const removeBtn = window.previewContainer.lastChild.querySelector('.remove-btn');
+    removeBtn.click();
+}
+end = Date.now();
+console.log(`Time to remove 100 files sequentially: ${end - start} ms`);

benchmark_500.js

@@ -0,0 +1,83 @@
+const fs = require('fs');
+const { JSDOM } = require('jsdom');
+
+const html = fs.readFileSync('docs/index.html', 'utf8');
+
+function extractScriptContext(htmlStr) {
+    const startIdx = htmlStr.indexOf('<script type="module">') + '<script type="module">'.length;
+    const endIdx = htmlStr.lastIndexOf('</script>');
+    return htmlStr.substring(startIdx, endIdx);
+}
+
+const scriptContent = extractScriptContext(html);
+
+// We'll mock the DOM and some globals
+const dom = new JSDOM(`
+  <div id="fileInput"></div>
+  <div id="targetFormat"></div>
+  <div id="convertBtn"></div>
+  <div id="status"></div>
+  <div id="downloads-container"></div>
+  <div id="preview-container"></div>
+  <div id="fileStatusText"></div>
+`, { runScripts: "outside-only" });
+
+const window = dom.window;
+const document = window.document;
+
+window.URL = {
+    createObjectURL: () => "blob:test",
+    revokeObjectURL: () => {}
+};
+window.fetch = () => Promise.resolve({ ok: true, json: () => Promise.resolve([]) });
+window.alert = () => {};
+
+// Remove imports from the script
+const cleanedScript = scriptContent
+    .replace(/import .*/g, '')
+    .replace(/loadFormats\(\);/g, '')
+    .replace(/initWasm\(\);/g, '');
+
+// Run the script in the context
+window.eval(`
+    ${cleanedScript}
+    window.renderPreviews = renderPreviews;
+    window.selectedFiles = selectedFiles;
+    window.fileStatusText = fileStatusText;
+    window.previewContainer = previewContainer;
+    window.fileInput = fileInput;
+
+    window.simulateAddFiles = (files) => {
+        const e = { target: { files: files } };
+        // Trigger the listener
+        const event = new window.Event('change');
+        Object.defineProperty(event, 'target', {writable: false, value: {files}});
+        fileInput.dispatchEvent(event);
+    }
+`);
+
+const numFiles = 500;
+const mockFiles = Array.from({ length: numFiles }, (_, i) => ({
+    name: `file${i}.jpg`,
+    type: 'image/jpeg'
+}));
+
+console.log("Measuring Baseline for 500 files...");
+
+let start = Date.now();
+
+for (let i = 0; i < numFiles; i++) {
+    window.simulateAddFiles([mockFiles[i]]);
+}
+
+let end = Date.now();
+console.log(`Time to add 500 files sequentially: ${end - start} ms`);
+
+start = Date.now();
+for (let i = numFiles - 1; i >= 0; i--) {
+    // We just call the remove button click for the last element
+    const removeBtn = window.previewContainer.lastChild.querySelector('.remove-btn');
+    removeBtn.click();
+}
+end = Date.now();
+console.log(`Time to remove 500 files sequentially: ${end - start} ms`);

docs/index.html

@@ -183,71 +183,87 @@ <h2>Online Converter</h2>
             }
         }
 
-        // Handle file selection
-        fileInput.addEventListener('change', (e) => {
-            if (e.target.files.length > 0) {
-                // Add new files to our array
-                selectedFiles = selectedFiles.concat(Array.from(e.target.files));
-                renderPreviews();
-            }
-            // Clear input so selecting the same file again triggers change event
-            fileInput.value = '';
-        });
-
-        // Render thumbnails
-        function renderPreviews() {
-            previewContainer.innerHTML = '';
-
+        function updateFileStatusText() {
             if (selectedFiles.length === 0) {
                 fileStatusText.textContent = "No file chosen";
             } else if (selectedFiles.length === 1) {
                 fileStatusText.textContent = selectedFiles[0].name;
             } else {
                 fileStatusText.textContent = `${selectedFiles.length} files selected`;
             }
+        }
 
-            selectedFiles.forEach((file, index) => {
-                const wrapper = document.createElement('div');
-                wrapper.className = 'thumbnail-wrapper';
-                wrapper.title = file.name;
-
-                // Create remove button
-                const removeBtn = document.createElement('button');
-                removeBtn.className = 'remove-btn';
-                removeBtn.innerHTML = '&times;';
-                removeBtn.onclick = () => {
+        function createThumbnail(file) {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'thumbnail-wrapper';
+            wrapper.title = file.name;
+
+            // Create remove button
+            const removeBtn = document.createElement('button');
+            removeBtn.className = 'remove-btn';
+            removeBtn.innerHTML = '&times;';
+            removeBtn.onclick = () => {
+                const index = selectedFiles.indexOf(file);
+                if (index > -1) {
                     selectedFiles.splice(index, 1);
-                    renderPreviews();
-                };
-
-                // Create image preview
-                const img = document.createElement('img');
-                img.className = 'thumbnail-img';
-
-                // If it's a standard web image, browsers can render it natively
-                if (file.type.startsWith('image/') && !file.name.toLowerCase().endsWith('.heic')) {
-                    img.src = URL.createObjectURL(file);
-                    img.onload = () => URL.revokeObjectURL(img.src); // Free memory
-                } else {
-                    // Fallback for RAW/HEIC that browsers can't render natively
-                    img.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23ddd"/><text x="50" y="50" font-family="sans-serif" font-size="12" text-anchor="middle" dominant-baseline="middle" fill="%23666">RAW/Data</text></svg>';
                 }
+                wrapper.remove();
+                updateFileStatusText();
+            };
+
+            // Create image preview
+            const img = document.createElement('img');
+            img.className = 'thumbnail-img';
+
+            // If it's a standard web image, browsers can render it natively
+            if (file.type.startsWith('image/') && !file.name.toLowerCase().endsWith('.heic')) {
+                img.src = URL.createObjectURL(file);
+                img.onload = () => URL.revokeObjectURL(img.src); // Free memory
+            } else {
+                // Fallback for RAW/HEIC that browsers can't render natively
+                img.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23ddd"/><text x="50" y="50" font-family="sans-serif" font-size="12" text-anchor="middle" dominant-baseline="middle" fill="%23666">RAW/Data</text></svg>';
+            }
 
-                wrapper.appendChild(img);
-                wrapper.appendChild(removeBtn);
+            wrapper.appendChild(img);
+            wrapper.appendChild(removeBtn);
 
-                // Overlay the name at the bottom
-                const nameLabel = document.createElement('div');
-                nameLabel.className = 'thumbnail-name';
-                nameLabel.style.position = 'absolute';
-                nameLabel.style.bottom = '0';
-                nameLabel.style.width = '100%';
-                nameLabel.style.background = 'rgba(255,255,255,0.8)';
-                nameLabel.textContent = file.name.length > 12 ? file.name.substring(0, 10) + '...' : file.name;
+            // Overlay the name at the bottom
+            const nameLabel = document.createElement('div');
+            nameLabel.className = 'thumbnail-name';
+            nameLabel.style.position = 'absolute';
+            nameLabel.style.bottom = '0';
+            nameLabel.style.width = '100%';
+            nameLabel.style.background = 'rgba(255,255,255,0.8)';
+            nameLabel.textContent = file.name.length > 12 ? file.name.substring(0, 10) + '...' : file.name;
 
-                wrapper.appendChild(nameLabel);
-                previewContainer.appendChild(wrapper);
+            wrapper.appendChild(nameLabel);
+            return wrapper;
+        }
+
+        // Handle file selection
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                const newFiles = Array.from(e.target.files);
+                // Add new files to our array
+                selectedFiles = selectedFiles.concat(newFiles);
+
+                // Append only new thumbnails
+                newFiles.forEach(file => {
+                    previewContainer.appendChild(createThumbnail(file));
+                });
+                updateFileStatusText();
+            }
+            // Clear input so selecting the same file again triggers change event
+            fileInput.value = '';
+        });
+
+        // For backwards compatibility or any other potential usage
+        function renderPreviews() {
+            previewContainer.innerHTML = '';
+            selectedFiles.forEach(file => {
+                previewContainer.appendChild(createThumbnail(file));
             });
+            updateFileStatusText();
         }
 
         // 2. Initialize the WebAssembly Engine