chrisryn/fiddle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Tailwind CSS toggle, Markdown/WASM modes, and npm import resolution

Browse Source 
- Tailwind CSS: toolbar checkbox injects Play CDN into preview, persisted
  per-fiddle via new options JSON column
- Markdown mode: uses marked.js CDN, renders markdown to HTML preview with
  CSS tab for custom styling
- WASM mode: starter template with inline WebAssembly add function, supports
  top-level await via module detection
- npm imports: auto-detect bare import specifiers in module code and inject
  importmap pointing to esm.sh CDN
- Module auto-detection for html-css-js mode (import/export statements)
- DB migration adds options column, server passes through all API endpoints
- All features work across preview, export, and embed
This commit is contained in:
root
2026-02-26 15:15:53 -06:00
parent e41c3e7dc4
commit 77f64d2862
13 changed files with 273 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
server.js
View File

@@ -27,12 +27,12 @@ app.use(express.static('public', { index: false }));
// API: Create fiddle
app.post('/api/fiddles', (req, res) => {
const id = nanoid(10);
const { title = 'Untitled', html = '', css = '', css_type = 'css', js = '', js_type = 'javascript', listed = 1, tags = [] } = req.body;
const { title = 'Untitled', html = '', css = '', css_type = 'css', js = '', js_type = 'javascript', listed = 1, options = '{}', tags = [] } = req.body;
try {
stmts.insert.run({ id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0 });
stmts.insert.run({ id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0, options });
if (tags.length) setFiddleTags(id, tags);
const fiddleTags = stmts.getTagsForFiddle.all(id);
res.json({ id, title, html, css, css_type, js, js_type, listed, tags: fiddleTags });
res.json({ id, title, html, css, css_type, js, js_type, listed, options, tags: fiddleTags });
} catch (e) {
res.status(500).json({ error: e.message });
}
@@ -104,12 +104,13 @@ app.put('/api/fiddles/:id', (req, res) => {
js = existing.js,
js_type = existing.js_type || 'javascript',
listed = existing.listed,
options = existing.options || '{}',
tags,
} = req.body;
stmts.update.run({ id: req.params.id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0 });
stmts.update.run({ id: req.params.id, title, html, css, css_type, js, js_type, listed: listed ? 1 : 0, options });
if (Array.isArray(tags)) setFiddleTags(req.params.id, tags);
const fiddleTags = stmts.getTagsForFiddle.all(req.params.id);
res.json({ id: req.params.id, title, html, css, css_type, js, js_type, listed, tags: fiddleTags });
res.json({ id: req.params.id, title, html, css, css_type, js, js_type, listed, options, tags: fiddleTags });
});
// API: List tags