2e:null 2f:["$","title",null,{"children":"Using CodePens in Observable | Fabian Iwand | Observable"}] 34:T726,viewof pen = { // Set custom dimensions. const w = 600, h = 600; // This override of Illustration allows us to fetch a reference to the // illustration instance and override some options. We set resize to false so // that no event listeners get attached to Window. let illo; const SneakyDog = { ...Zdog, Illustration: function(options) { illo = new Zdog.Illustration({...options, width: w, height: h, resize: false}); illo.setSize(w, h); return illo; } }; // Custom requestAnimationFrame that allows us to control the animation loop. const frame = rafProxy(); // Load the pen and override some of the scope. const pen = await loadCodePen(penUrl, { Zdog: SneakyDog, window: objectProxy(window, {innerWidth: w, innerHeight: h}), ...frame, }, invalidation); const id = DOM.uid().id; const view = html`

${html`${pen.html}`}

Visit the codepen! `; let raf; invalidation.then(() => cancelAnimationFrame(raf)); // Make sure all markup is attached to the DOM. yield view; // Execute the pen's Javascript. pen.js(); // Expose the illustration instance. view.value = illo; // Finally keep off our render loop. (function loop() { // Process our requestAnimationFrame replacement. if(!viewof paused.value) { frame(); view.dispatchEvent(new Event('input')); } raf = requestAnimationFrame(loop); }()); }35:T52e,md`--- # Library ${sig(loadCodePen, md` Loads the pen at penUrl and returns an object with the following properties: - html: The pen's unaltered HTML. - css: The pen's unaltered CSS. - js: The pen's script as an executable function. Global variables in the script scope can be overridden by passing them as properties in scopeVars. `)} ${sig(objectProxy, md` Wraps obj in a Proxy with get traps for the properties passed via scope. Example: \`\`\`javascript const pen = loadCodePen(url, { window: objectProxy(window, {innerWidth: w, innerHeight: h}) }); \`\`\` `)} ${sig(rafProxy, md` Returns a function that can be used as a replacement for *AnimationFrame. The function exposes the properties requestAnimationFrame and cancelAnimationFrame that can be injected into a script's scope. Example: \`\`\`javascript const step = rafProxy(); const pen = loadCodePen(url, {...step}); // Invoke function to iterate over raf callbacks. step(); \`\`\` `)} ${sig(prefixStrings, md` Prefixes all word bounded occurrences of the strings listed in array search. Example: \`\`\`javascript const css = prefixStrings(pen.css, '#my-id-', ['html', 'body']); \`\`\` `)} --- `36:[] 32:{"id":"7c8de40a9d2dd107","slug":"codepens-in-observable","title":"Using CodePens in Observable","thumbnail":"f3a53f1e1055bfdf1385857cffca85d4eb83367069c02df490157ee14fb04375","access_level":"public","create_time":"$D2019-06-10T08:26:44.140Z","update_time":"$D2021-05-27T20:48:14.516Z","view_time":null,"first_public_time":"$D2019-06-10T14:29:52.362Z","has_unpublished_edits":null,"fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":431,"publish_version":431,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Using CodePens in Observable","cells":[{"id":0,"value":"md`\n# Using CodePens in Observable\n\nThis notebook showcases how you can import a CodePen into Observable, and offers some tooling to control the script's scope.\n\n**Note: This only works for pens published by Pro accounts.**\n\nFor demonstration purposes we import several [Zdog](https://zzz.dog/) illustrations, created by Zdog's author [Dave DeSandro](https://codepen.io/desandro/).\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`Select a pen:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof penUrl = select({options: Object.entries({\n 'https://codepen.io/desandro/pen/aGOqjy': 'Cone mace',\n 'https://codepen.io/desandro/pen/RQeYYp': 'Celeste snowglobe',\n 'https://codepen.io/desandro/pen/RerqWW': 'On the go',\n 'https://codepen.io/desandro/pen/vdwMyW': 'Happy town',\n //'https://codepen.io/desandro/pen/MXPXGj': 'Solids',\n //'https://codepen.io/desandro/pen/gZMEBN': 'Tri-prism',\n}).map(([value, label])=>({label,value}))})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"viewof paused = checkbox({options: [{\n value: 1,\n label: 'Pause CodePen animation loop',\n}]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"md`And here we can view the current illustration instance (pen CSS might affect the colors). It's a good idea to pause the pen animation if you want to drill down into the object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"pen","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function loadCodePen(penUrl, scopeVars = {}, invalidation = null) {\n const controller = new AbortController();\n const fetchOpts = {signal: controller.signal};\n if(invalidation) invalidation.then(() => controller.abort());\n\n const html = fetch(penUrl + '.html', fetchOpts).then(res => res.text());\n const css = fetch(penUrl + '.css', fetchOpts).then(res => res.text());\n const js = fetch(penUrl + '.js', fetchOpts).then(res => res.text())\n .then(source => scopedScript(source, null, scopeVars));\n \n return Promise.all([html, css, js])\n .then(([html, css, js]) => ({html, css, js}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"function scopedScript(script, context = null, scope = {}) {\n const names = Object.keys(scope), values = Object.values(scope);\n // Wrap the script inside a function and inject our scoped variables.\n return (new Function(...names, script)).bind(context, ...values);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"function objectProxy(obj, scope = {}) {\n return new Proxy(obj, {\n get: (target, prop, receiver) => {\n return scope.hasOwnProperty(prop) ? scope[prop] : Reflect.get(...arguments);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function rafProxy() {\n const callbacks = new Map;\n let id = 0;\n const step = () => {\n // Map iterators are live, don't use them directly!\n const values = Array.from(callbacks.values());\n callbacks.clear();\n for(let cb of values) cb();\n };\n \n step.requestAnimationFrame = cb => (callbacks.set(++id, cb), id);\n step.cancelAnimationFrame = id => callbacks.delete(id);\n\n return step;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"function prefixStrings(str, prefix, search) {\n const j = search.join('|');\n return !j.length\n ? str\n : str.replace(new RegExp(`\\\\b(${j})\\\\b`, 'g'), `${prefix}$&`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"// ------ --------- -------- 80 char comment ruler -------- --------- ----------\nmd`---\n## Demo Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"Zdog = require('zdog@1.0.2/dist/zdog.dist.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"import {select, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"function sig(fn, desc = '') {\n const pattern = /\\)(?= *?\\{)/;\n const head = fn.toString().split(pattern, 1)[0] + ')';\n const code = md`\\`\\`\\`javascript\\n${head}\\n\\`\\`\\``;\n return html`

${code}

\n ${desc}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"