Skip to content

Instantly share code, notes, and snippets.

@lukaw3d

lukaw3d/bookmarklet-render-snap.js

Last active December 9, 2022 03:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lukaw3d/00a19b2b64acb0098ee78910e932179a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lukaw3d/00a19b2b64acb0098ee78910e932179a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bookmarklet-render-snap.js
javascript:
/* use on https://github.com/oasisprotocol/oasis-wallet-web/blob/master/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap */
if (!document.querySelector('#raw-url').href.endsWith('.snap')) throw 'not .snap file';
function parseSnapToHtml(snapFile) {
return snapFile.split('`;').slice(0, -1)
.map((pair) => pair.trim().split(' = `'))
/* Fix CommissionBounds */
.map(([snapshotName, snapshotRaw]) => [snapshotName, snapshotRaw.replace('<body>', '').replace('</body>', '')])
.map(([snapshotName, snapshotRaw]) => {
const div = document.createElement('div');
div.style.marginBottom = '30px';
if (snapshotRaw.includes('</div>') || snapshotRaw.includes('</span>')) {
div.innerHTML = `
<div class="name"></div>
html
<iframe class="iframe-html" sandbox style="display: block; width: 100%; height: 300px;"></iframe>
html + css
<iframe class="iframe-styled" sandbox style="display: block; width: 100%; height: 600px;"></iframe>
`;
const snapshotHtml = snapshotRaw.slice(snapshotRaw.indexOf('<'));
const snapshotStyle = '<style>' + snapshotRaw.slice(0, snapshotRaw.indexOf('<')) + '</style>';
div.querySelector('.name').textContent = snapshotName;
div.querySelector('.iframe-html').srcdoc = snapshotHtml;
div.querySelector('.iframe-styled').srcdoc = snapshotStyle + snapshotHtml;
} else {
div.innerText = snapshotName + '\n' + snapshotRaw;
}
return div;
});
}
(async function () {
const snapFile = await (await fetch(document.querySelector('#raw-url').href)).text();
const parsedElements = parseSnapToHtml(snapFile);
document.querySelector('[data-test-selector="blob-container"]').prepend(...parsedElements);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment