Preview for code components

Overview

Compile and present a preview for code components, so users can see the result of their work before their code component is put into action.

Proposed resolution

Using the JavaScript code, CSS code, and global CSS code being edited for the component in #3499988: Editing code components:

1. Compile and bundle JavaScript code authored as Preact components using the WebAssembly build of SWC (Speedy Web Compiler):
   • Note #3500020: Ensure base path is available in client app for including static assets at runtime, it will be needed to fetch the WASM module file when using @swc/wasm-web);
   • @swc/wasm-web needs to be excluded from Vite's dependency optimization until vitejs/vite#8427 is fixed.
2. Use the bundled JavaScript code with import maps to provide a live preview;
3. Compile component CSS (CSS tab) using the global CSS (global CSS tab) as Tailwind CSS v4 config in the browser with tailwindcss-in-browser;
   • tailwindcss-in-browser needs to be excluded from Vite's dependency optimization until vitejs/vite#8427 is fixed.
4. Include resulted CSS in the live preview;
5. Pass example/default prop values from #3500017: Defining props for code components in the preview

Use #3483267: [exploratory] PoC of Preact+Tailwind components editable via CodeMirror as a reference, all of this was implemented there.

User interface changes