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

- 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

View File

@@ -39,6 +39,15 @@ export const MODE_TABS = {
{ id: 'js', label: 'Svelte', lang: 'html' },
{ id: 'css', label: 'CSS', lang: 'css' },
],
'markdown': [
{ id: 'js', label: 'Markdown', lang: 'markdown' },
{ id: 'css', label: 'CSS', lang: 'css' },
],
'wasm': [
{ id: 'html', label: 'HTML', lang: 'html' },
{ id: 'css', label: 'CSS', lang: 'css' },
{ id: 'js', label: 'JavaScript', lang: 'javascript' },
],
};
// Map mode names to js_type values stored in DB
@@ -49,6 +58,8 @@ export const MODE_TO_JS_TYPE = {
'react-ts': 'tsx',
'vue': 'vue',
'svelte': 'svelte',
'markdown': 'markdown',
'wasm': 'wasm',
};
export const JS_TYPE_TO_MODE = Object.fromEntries(