Web developer and autodidact with an interest in creative coding.
functionA = (a, b) => {
// first version
return a + b;
}
functionB = (a, b) => {
// second version
return a - b;
}
diff(functionA, functionB)
fetch('https://observablehq-api.glitch.me/document/@observablehq/demo/forks?type=all').then(r => r.json())
options = ({outputFormat, diffStyle})
diff(
(await getCells(source.slug)).map(([name, code]) => `// ${name}\n${code}`).join('\n'),
(await getCells(target.slug)).map(([name, code]) => `// ${name}\n${code}`).join('\n'),
{...options, drawFileHeaders: true}
)
diff = (leftOrPatch, right, options = {}) => {
const defaults = {
wrapper: htl.html`<div>`,
outputFormat: "side-by-side",
drawFileList: false,
drawFileHeaders: false,
css: '',
};
const { wrapper, drawFileHeaders, css, ...opts } = { ...defaults, ...options };
const diff = right == null ? leftOrPatch : jsdiff.createTwoFilesPatch(
leftOrPatch.name || "left",
right.name || "right",
"" + leftOrPatch,
"" + right,
undefined,
undefined,
{ context: options.context || 2 }
);
const json = diff2html.parse(diff);
const root = wrapper.attachShadow({mode: "open"});
root.innerHTML = diff2html.html(json, opts);
root.appendChild(htl.html`<style>${defaultCSS}${css}`);
if (!drawFileHeaders) {
for (const n of root.querySelectorAll(".d2h-file-header")) n.remove();
}
//wrapper.style.cssText += 'position:relative;max-height:300px;overflow:auto';
return wrapper;
}
diff2html = import("https://cdn.skypack.dev/diff2html@3.4.24?min")
defaultCSS = `
@import url("https://cdn.jsdelivr.net/npm/diff2html@3.4.17/bundles/css/diff2html.min.css");
.d2h-wrapper table {
border-collapse: collapse;
border-spacing: 0;
}
.d2h-wrapper td,
.d2h-wrapper th {
padding: 0;
}
.d2h-wrapper * {
box-sizing: border-box;
}
.d2h-code-line del, .d2h-code-line ins, .d2h-code-side-line del, .d2h-code-side-line ins {
vertical-align: initial;
}
`
diff2html
async function getCells(slug) {
const notebook = await import(`https://api.observablehq.com/${slug}.js?v=1`);
return notebook.default.modules[0].variables.filter(v => {
if(v.inputs[0] === 'Generators') {
console.groupCollapsed(slug);
console.log('skipping', v);
console.groupEnd();
return false;
}
return true;
}).map(({name, value}, i) => {
const body = value.toString();
const match = body.match(/^.+?\n(.+?)[^\n]+$/s);
return [name != null ? name : `unnamed-${i+1}`, match[1]];
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
