Alok Pepakayala

Read Local TXT File From An Observable Notebook

XSLT IN Observable

🔥 Serverless Notebooks with Firebase

ImportCell into Existing DOM node

Inline export test

Notebook Packer

Directional Arrows For SVG Paths

Guide to make Observable notebooks work in IE11

Toolbox

Power BI

What is the purpose of the encodeURIComponent + unescape combo?

Fabian Iwand

I'm not really an expert on this, but my understanding is:
utf8bytes = unescape(encodeURIComponent(unicodecharacters));

If we don't do it we run into: InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. 

Example:
str = "var test = '→';"
encodeURIComponent(str)  //"var%20test%20%3D%20'%E2%86%92'%3B"
unescape(encodeURIComponent(str)) //"var test = 'â';"
atob(btoa(unescape(encodeURIComponent(str)))) //works
atob(btoa(str)) //gives the above error

This stackoverflow question seems to explain it better I guess: https://stackoverflow.com/questions/619323/decodeuricomponent-vs-unescape-what-is-wrong-with-unescape

hi @a10k this is a cool idea! I've done a quick project inside salesforce and try to use Observable, but they have such sandboxed env. One quick point is, what if your notebook has other requires? they wills rely on npm/jsdelivr so you might get the same problem. You might need to do this trick recursively on all notebook dependencies, I'm wondering how that would be possible.

Radamés Ajna

Hi, Thanks for your comments! I have the same issue too, I'm using acorn to parse the script and replace them( in a nodejs script currently), but the process is not recursive, as I know exactly which dependencies I'm trying to replace and files etc., its just looking for those references and swapping them.

If you're using node to do that, have you tried using rollup node resolve to bundle you observable notebook into a single js file? here is one reference https://github.com/severo/observable-to-standalone/blob/master/bundle/joyplot/rollup.config.js it works pretty well doing exactly that, fetching the requires and bundling into your final js.

This is very helpful, thanks for sharing it!  I tried to do something similar with https://observablehq.com/@a10k/guide-to-make-observable-notebooks-work-in-ie11 few months back, but I'm now trying to build a new tool that lets people create custom visuals and download directly from observable, I'll need to use rollup directly in observable with the plugins etc., I made a similar observable based template for Tableau and since Tableau extensions are network enabled they don't have this issue https://observablehq.com/collection/@a10k/tableau  (Although powerbi extension are supposed to work offline for submitting to their portal, even they seem to work fine with pulling resources from cdn in my testing so far, so,  I'm still not sure if I need to make them fully offline yet.) but thanks for the link, i'll start there!

the idea of running on the browser is pretty neat! the issue would be parse cells that needs require, then you can use your approach here right? you know you can resolve the require here on Observable doing for example `require.resolve('d3')`. this notebook might be helpful but currently is broken https://observablehq.com/@chriszs/module-loading-with-rollup

I made a couple of changes to add d3@6  and inline all file attachments, it's a dirty fix for this particular use case that solves the problem for now with my use case, thanks again for your feedback! I'll add more fixes as I run into them.