mikael-lovqvists-claude-agent/electronics-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add test data box to template editor for live preview

Browse Source 
Enter a JS snippet returning a fields object (e.g. return { resistance: '10k' })
to preview the formatter against synthetic data instead of the first real component.
Both the formatter and test data textareas update the preview on input.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-03-21 00:18:26 +00:00
parent 896b6fcb39
commit b66b2f95d3
2 changed files with 29 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/app.mjs
View File

@@ -584,13 +584,15 @@ function open_template_dialog(tmpl = null) {
} catch (err) { alert(`Error: ${err.message}`); }
});
// Live preview against first component
// Live preview
qs(template_dialog, '#tmpl-formatter').addEventListener('input', update_tmpl_preview);
qs(template_dialog, '#tmpl-test-data').addEventListener('input', update_tmpl_preview);
}
qs(template_dialog, '.dialog-title').textContent = tmpl ? 'Edit template' : 'Add template';
qs(template_dialog, '#tmpl-name').value = tmpl?.name ?? '';
qs(template_dialog, '#tmpl-formatter').value = tmpl?.formatter ?? '';
qs(template_dialog, '#tmpl-test-data').value = '';
update_tmpl_preview();
template_dialog_callback = async () => {
@@ -617,15 +619,32 @@ function update_tmpl_preview() {
const preview_el = qs(template_dialog, '#tmpl-preview');
const formatter_str = qs(template_dialog, '#tmpl-formatter').value.trim();
if (!formatter_str) { preview_el.textContent = '—'; return; }
const sample = all_components[0];
if (!sample) { preview_el.textContent = '(no components to preview)'; return; }
// Build the component to preview against
let preview_comp;
const test_data_str = qs(template_dialog, '#tmpl-test-data').value.trim();
if (test_data_str) {
try {
// eslint-disable-next-line no-new-func
const test_fields = new Function(test_data_str)();
preview_comp = { name: '(test)', fields: test_fields ?? {} };
} catch (err) {
preview_el.textContent = `Test data error: ${err.message}`;
return;
}
} else {
const sample = all_components[0];
if (!sample) { preview_el.textContent = '(no components to preview)'; return; }
preview_comp = named_fields_comp(sample);
}
try {
// eslint-disable-next-line no-new-func
const fn = new Function('c', `"use strict"; return (${formatter_str})(c);`);
const result = fn(named_fields_comp(sample));
preview_el.textContent = result != null ? String(result) : `null — falls back to "${sample.name}"`;
const result = fn(preview_comp);
preview_el.textContent = result != null ? String(result) : `null — falls back to "${preview_comp.name}"`;
} catch (err) {
preview_el.textContent = `Error: ${err.message}`;
preview_el.textContent = `Formatter error: ${err.message}`;
}
}