Metodologia

1. Architettura dell'editor

L'area di lavoro utilizza tre editor di testo per HTML, CSS e JavaScript con gutter dei numeri di riga, gestione dell'indentazione con tab, controlli della dimensione del font e a capo opzionale.

2. Elaborazione HTML

L'HTML dal pannello HTML viene inserito nel body di un documento generato. Lo strumento non esegue HTML come interfaccia della pagina principale.

3. Iniezione CSS

Il CSS viene inserito in un elemento style nella head del documento generato affinché le regole si applichino solo al documento di anteprima.

4. Esecuzione JavaScript

JavaScript viene inserito in un elemento script all'interno del documento di anteprima. Viene eseguito nel contesto di navigazione dell'iframe dopo Run.

5. Rendering iframe

Il documento combinato viene assegnato a iframe.srcdoc, creando un nuovo documento di anteprima senza navigare la pagina principale.

6. Isolamento sandbox

L'iframe usa un attributo sandbox (script consentiti per l'anteprima). Le API DOM della pagina principale non sono esposte per l'esecuzione del codice utente.

7. Gestione della console

Un piccolo ponte all'interno dell'anteprima inoltra console.log/info/warn/error e errori di runtime al genitore tramite postMessage per la visualizzazione.

8. API del browser

Ciò che gli script possono fare dipende dalla policy del browser e dai permessi sandbox. Alcune API si comportano diversamente negli iframe rispetto alle pagine di primo livello.

9. Archiviazione locale

Lo stato dell'editor può essere scritto in chiavi localStorage limitate a questa origine così che un refresh non cancelli il lavoro in corso.

10. Limitazioni

Non c'è compilazione lato server per HTML/CSS/JS standard. Pipeline di build complesse, pacchetti privati e API di dispositivo privilegiate sono fuori ambito.

11. Considerazioni sulla privacy

L'assemblaggio dell'anteprima avviene lato client. La persistenza locale resta nel browser a meno che non esporti o copi il contenuto altrove.