Glossary

Soft render

The playground sandbox technique for reloading a snippet without rebuilding the iframe: swap the markup, re-run ng.init(), keep everything else alive.

The playground runs snippets in a sandboxed iframe with the full framework loaded. Re-rendering by rewriting the iframe's srcdoc (a hard rebuild) would re-download and re-execute every ng_*.js module on each keystroke. The soft render path makes the edit-preview loop instant instead.

How it works

The sandbox exposes __pgRender({html, css, js}):

sandbox/boot.html
window.__pgRender = function (payload) {
    // 1. swap the user CSS in place
    styleEl.textContent = payload.css || '';

    // 2. replace the body markup
    document.body.innerHTML = payload.html || '';

    // 3. re-init NG on the new DOM
    window.ng.cleanRegistry();   // drop instances whose roots just vanished
    window.ng.init();            // mount the fresh markup

    // 4. run the user JS
    if (payload.js) new Function('"use strict";' + payload.js)();
};

Replacing document.body.innerHTML destroys the old roots, so cleanRegistry() first drops their orphaned instances (running each component's teardown), then ng.init() mounts the new markup — the standard lifecycle, just retriggered by hand.

What survives, what doesn't

SurvivesRegistered components (no re-download of ng_*.js), ng.state and its storage, the mutation observer, theme.
RebuiltThe DOM inside <body>, every component instance (fresh data-ng-uid), user CSS and user JS.

When a hard rebuild is still needed

Only when the set of loaded modules must change — e.g. the snippet needs a ng_<comp>.js that the sandbox hasn't loaded. Then the iframe srcdoc is regenerated from scratch and every module reloads.

Related

__pgRender({html, css, js}) ng.cleanRegistry() ng.init() srcdoc