feat : more js framework support#7
Open
finnyfound wants to merge 5 commits into
Open
Conversation
- Added console.clear, console.table, console.group, console.groupCollapsed, console.groupEnd, console.time, console.timeEnd, console.timeLog, console.count, console.countReset, console.assert, and console.dir methods to the ConsoleEngine. - Improved output handling in the addOutput method to support new console features. - Enhanced rendering of console output in the HTML renderer to accommodate new console methods and groupings. refactor: Update HTMLRenderer to support pipeline payloads and improve error handling - Refactored buildCompleteDocument to accept a payload for dynamic content rendering. - Improved error handling with inline error banners for build errors. - Updated styles and scripts handling for better performance and readability. chore: Update main.js to include new modules - Imported autocomplete and build-pipeline modules in main.js. fix: Bump state version and refactor state management - Updated STATE_VERSION to force state migration. - Refactored state management to support new file structure and improved validation. feat: Add manifest.json for PWA support - Created manifest.json to define app metadata and icons for progressive web app capabilities. security: Enhance security headers in Vercel configuration - Added Content-Security-Policy, X-Content-Type-Options, X-Frame-Options, Referrer-Policy, and Permissions-Policy headers to improve security posture.
…oop safety - Configure Monaco's language services for better JSX and ESNext support. - Register minimal ambient types for popular frameworks (React, Preact, Vue, Lit, Solid, Svelte). - Implement loop safety checks in the build pipeline to prevent infinite loops during execution. - Refactor ConsoleEngine to streamline command execution and remove legacy methods. - Inject helper functions into the iframe for user convenience. - Update HTMLRenderer to improve console message handling and serialization.
There was a problem hiding this comment.
Pull request overview
This PR expands the in-browser “project” model from single-tab JS/HTML/CSS to a multi-file VFS with a build pipeline that can transpile additional JS framework formats (JSX/TS/TSX + framework-specific compilers) and render via a unified sandboxed iframe preview, along with significant UI/theming updates.
Changes:
- Added a build pipeline with language plugins, transpilation, loop-safety injection, and importmap generation targeting
esm.sh. - Migrated persisted state to a multi-file schema (
files[]) and updated app boot/module wiring to include new pipeline + autocomplete. - Updated UI layout, PWA manifest support, and token-driven theming/styles; added security headers (CSP + common hardening headers).
Reviewed changes
Copilot reviewed 9 out of 11 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
vercel.json |
Adds security-related response headers (CSP + hardening headers). |
src/public/manifest.json |
Introduces PWA manifest metadata and icons. |
src/js/state-manager.js |
Migrates persisted state to files[] schema and improves autosave behavior. |
src/js/main.js |
Wires new modules (autocomplete, build-pipeline) into startup order. |
src/js/html-renderer.js |
Updates iframe document generation, console proxying, importmap injection, and inline build error display. |
src/js/console-engine.js |
Updates console capture and rendering to support richer value display, groups, and tables. |
src/js/build-pipeline.js |
New build/transpile/importmap pipeline enabling more framework/language support. |
src/js/autocomplete.js |
Minor autocomplete logic changes; removes dropdown positioning method. |
src/index.html |
Major UI markup updates (toolbar, modals, file UI, sandbox changes, new CDN deps). |
src/css/styles.css |
Large redesign with token-driven theming, responsive layout, and new component styling. |
| }, | ||
| { | ||
| "key": "Content-Security-Policy", | ||
| "value": "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://unpkg.com https://esm.sh; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self' https://esm.sh https://registry.npmjs.org; frame-src 'self' blob:; worker-src 'self' blob:;" |
Comment on lines
+318
to
+321
| buildImportMap(codeFiles) { | ||
| const bareImportRe = | ||
| /(?:^|\n)\s*import\s+(?:[\s\S]*?\s+from\s+)?['"]([^./][^'"]*)['"]/g; | ||
| const packages = new Set(); |
Comment on lines
+829
to
+833
| color: var(--error); | ||
| } | ||
|
|
||
| .context-menu-item--danger:hover { | ||
| background-color: color-mix(in srgb, var(--error) 12%, transparent); |
Comment on lines
+5
to
+26
| "start_url": "/", | ||
| "display": "standalone", | ||
| "background_color": "#132440", | ||
| "theme_color": "#67e8f9", | ||
| "icons": [ | ||
| { | ||
| "src": "/favicon-16x16.png", | ||
| "sizes": "16x16", | ||
| "type": "image/png" | ||
| }, | ||
| { | ||
| "src": "/favicon-32x32.png", | ||
| "sizes": "32x32", | ||
| "type": "image/png" | ||
| }, | ||
| { | ||
| "src": "/apple-touch-icon.png", | ||
| "sizes": "180x180", | ||
| "type": "image/png" | ||
| }, | ||
| { | ||
| "src": "/favicon.png", |
Comment on lines
516
to
518
| this.isVisible = false; | ||
| this.selectedIndex = -1; | ||
| } |
Comment on lines
271
to
+273
| const logEntry = document.createElement('div'); | ||
| logEntry.className = `console-entry console-${item.type}`; | ||
| logEntry.className = `console-entry console-${item.type === 'dir' || item.type === 'result' ? 'result' : item.type === 'table' ? 'log' : item.type === 'group-start' ? 'log' : item.type === 'group-collapsed' ? 'log' : item.type}`; | ||
|
|
Comment on lines
+404
to
+418
| createExpandableNode(value, kind) { | ||
| const wrapper = document.createElement('span'); | ||
| wrapper.className = 'console-inspector'; | ||
|
|
||
| const toggle = document.createElement('span'); | ||
| toggle.className = 'console-inspector-toggle'; | ||
| toggle.textContent = '▶'; | ||
|
|
||
| const preview = document.createElement('span'); | ||
| preview.className = 'console-inspector-preview'; | ||
| preview.textContent = this.getPreview(value, kind); | ||
|
|
||
| const detail = document.createElement('div'); | ||
| detail.className = 'console-inspector-detail'; | ||
| detail.style.display = 'none'; |
| display: flex; | ||
| gap: 4px; | ||
| .sidebar-folder-toggle:hover { | ||
| background-color: var(--hover); |
Comment on lines
+771
to
+790
| /* Rename input */ | ||
| .rename-input { | ||
| width: 100%; | ||
| padding: 2px 6px; | ||
| border: 1px solid var(--accent); | ||
| border-radius: 3px; | ||
| background-color: var(--bg-input); | ||
| color: var(--text-primary); | ||
| font-size: 12px; | ||
| font-family: inherit; | ||
| outline: none; | ||
| -webkit-appearance: none; | ||
| appearance: none; | ||
| line-height: 1.4; | ||
| } | ||
|
|
||
| .rename-input::selection { | ||
| background: var(--accent); | ||
| color: var(--bg-primary); | ||
| } |
Comment on lines
+1252
to
+1256
| /* Console value types */ | ||
| .console-value-null, | ||
| .console-value-undefined { | ||
| color: var(--text-tertiary); | ||
| font-style: italic; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Brief description of the changes.
Type of Change
How Has This Been Tested?
Local Testing
Describe how you tested these changes.
Checklist