29:null 2a:["$","title",null,{"children":"Storage | Fabian Iwand | Observable"}] 30:T4db,class MapStorageInterface { constructor(storage) { this.storage = storage; } get size() { return this.storage.length; } set(key, value) { this.storage.setItem(key + '', value); } get(key) { const ret = this.storage.getItem(key + ''); return ret !== null ? ret : undefined; } has(key) { return this.storage.getItem(key + '') !== null; } // Prevents indentation from getting screwed. ['delete'](key) { return this.storage.removeItem(key + ''); } [Symbol.iterator]() { return this.entries()[Symbol.iterator](); } entries() { return this._iterable(key => [key, this.storage.getItem(key)]); } keys() { return this._iterable(key => key); } values() { return this._iterable(key => this.storage.getItem(key)); } forEach(callback, thisArg) { for(const [key, value] of this) callback.call(thisArg, value, key, this); } _iterable(valueFn) { return {[Symbol.iterator]: () => { let index = 0; return {next: () => { const key = this.storage.key(index++); return { value: key !== null ? valueFn.call(this, key) : undefined, done: key === null, }; }}; }}; } }31:T531,class ObjectStorageInterface { constructor(storage) { this.mapStorage = new MapStorageInterface(storage); return new Proxy({}, this._getTraps()); } _trapGet(target, key) { if(typeof key === 'symbol') return target[key]; return this.mapStorage.get(key); } _trapSet(target, key, value) { return this.mapStorage.get(key); } _trapHas(target, key) { return this.mapStorage.has(key); } _trapDeleteProperty(target, key) { return this.mapStorage.delete(key); } _trapOwnKeys(target) { return Array.from(this.mapStorage.keys()); } _trapDefineProperty(target, key, desc) { throw new TypeError('Unsupported operation'); } _trapGetOwnPropertyDescriptor(target, key) { if(!this.mapStorage.has(key)) return undefined; return { value: this.mapStorage.get(key), writable: true, enumerable: true, configurable: true, }; } _getTraps() { return { get: this._trapGet.bind(this), set: this._trapSet.bind(this), deleteProperty: this._trapDeleteProperty.bind(this), ownKeys: this._trapOwnKeys.bind(this), has: this._trapHas.bind(this), defineProperty: this._trapDefineProperty.bind(this), getOwnPropertyDescriptor: this._trapGetOwnPropertyDescriptor.bind(this), } } }32:T543,class MemoryStorage { get [Symbol.toStringTag]() { return this.constructor.name; } constructor(options = {}) { const { serializer = new StringSerializer(), } = options; this.serializer = serializer; this.data = new Map(); } get length() { return this.data.size; } key(index) { if(!arguments.length) throw new TypeError('1 argument required, but only 0 present.'); let n = -1; for(const key of this.data.keys()) { if(n == index) return key; } return null; } setItem(key, value) { this.data.set(key + '', this.serializer.serialize(value)); } getItem(key) { key += ''; return this.data.has(key) ? this.serializer.deserialize(this.data.get(key)) : null; } /* // Extension of the Storage interface. Required because // getItem() can return null values for existing entries. hasItem(key) { return this.data.has(key + ''); } */ removeItem(key) { this.data.delete(key + ''); } clear() { this.data.clear(); } /* export() { return Object.fromEntries(this.data.entries()); } import(obj, {replace = true} = {}) { let key, value; for([key, value] of obj.entries()) { key += ''; if(replace || !this.data.has(key)) this.data.set(key, value); } } */ }33:T614,doc_serializers = md`--- ## Serializers A serializer's task is to convert arbitrary data to a string and back. More advanced serializers like \`JSONSerializer\` and \`EvalSerializer\` can handle a broader range of data types, but also have more complex rules with respect to their limitations. Each serializer should implement the following interface: - \`serialize(value: any): DOMString\` - \`deserialize(text: DOMString): value\` Be default the following serializer classes are provided: - **StringSerializer:** Casts all values to String. Makes no attempt to cast serialized values back to their original type. This behavior is closest to \`localStorage.setItem()\`. - **JSONSerializer:** Converts values to and from JSON. All restrictions of \`JSON.stringify()\` apply. - **EvalSerializer:** Converts values to Javascript code. Values are restored by evaluating the code. Can restore a broad range of types. Note that this serializer will throw if it encounters an unsupported value. Accepts a scope to restore references on deserialization. The table below shows a comparison of conversion results for each serializer class, computed by passing the test value through \`serialize()\` and \`deserialize()\`. Mismatched results are highlighted. *Notes:* - *"Blob" is listed as a common failing value. Blob instances cannot be serialized synchronously outside of workers.* - *Deserialization errors in JSONSerializer stem from trying to parse the value \`undefined\`. If encountered within an object, JSON.stringify() will omit these properties.* `34:T958,doc_serializers_table = { const data = { 'String': 'foo', 'null': null, 'Array': ['foo', 'bar'], 'Object': {foo: 'bar'}, 'Boolean': false, 'Number': -1.2345e-67, 'NaN': NaN, 'Infinity': -Infinity, 'undefined': undefined, 'Function': foo => {return foo}, 'Map': new Map([['foo', 'bar']]), 'Set': new Set(['foo', 'bar']), 'RegExp': /^foo|(?bar)/g, 'Date': new Date(), 'TypedArray': new Float32Array([-1.2345e-6, Math.PI]), 'Blob': new Blob(['foo'], {type: 'text/plain'}), }; const serializers = [ new StringSerializer, new JSONSerializer, new EvalSerializer ]; const {Inspector} = await require('@observablehq/inspector'), inspect = (value, refMarkup) => { if(value instanceof Error) { return html`${value.message}`; } const n = html``; new Inspector(n).fulfilled(value); if(refMarkup && refMarkup !== n.innerHTML) n.classList.add('error'); return n; }, headers = ['Data type', 'Test value', ...serializers.map(s => s.constructor.name)], rows = [], id = DOM.uid().id; for(const [type, value] of Object.entries(data)) { const nval = inspect(value), ref = nval.innerHTML; rows.push([ html`${type}`, nval, ...serializers.map(s => { let restored; try { restored = s.serialize(value); try { restored = s.deserialize(restored) } catch(e) { restored = new Error('deserialize error') } } catch(e) { restored = new Error('serialize error') } return inspect(restored, ref); }) ]); } return html`

${headers.map(s => html`${rows.map(r => html`${r}`)} `; }35:T764,class EvalSerializer { serialize(value) { return this.replace(value); } deserialize(text, scope = {}) { const keys = scope instanceof Map ? scope.keys() : Object.keys(scope); const values = scope instanceof Map ? scope.values() : Object.values(scope); return new Function(...keys, 'return (' + text + ')')(...values); } replace(value) { const type = typeof value, json = JSON.stringify; switch(type) { case 'string': case 'boolean': return json(value); case 'number': case 'function': return value.toString(); case 'undefined': return type; case 'object': if(value === null) { return json(value); } if(value.constructor) { const name = value.constructor.name; switch(name) { case 'RegExp': return value.toString(); case 'Date': return 'new ' + name + '(' + json(value) + ')'; case 'Int8Array': case 'Uint8Array': case 'Uint8ClampedArray': case 'Int16Array': case 'Uint16Array': case 'Int32Array': case 'Uint32Array': case 'Float32Array': case 'Float64Array': return 'new ' + name + '([' + value.toString() + '])'; case 'Map': case 'Set': return 'new ' + name + '(' + this.replace(Array.from(value)) + ')'; case 'Array': return '[' + value.map(this.replace.bind(this)).join(',') + ']'; case 'Object': const body = Object.keys(value).map(key => json(key) + ':' + this.replace(value[key])); return '{' + body.join(',') + '}'; } } } throw Error(`Unsupported value: ${type === 'object' ? value + '' : type}`); } }36:[] 2d:{"id":"8c7f8188efcab0d5","slug":"storage","title":"Storage","thumbnail":"fca2e03fa04fcd331308c99ed7b1a1baac680513f18bcde44102e0531da0a13a","access_level":"unlisted","create_time":"$D2021-01-02T13:43:25.087Z","update_time":"$D2022-10-07T23:31:57.025Z","view_time":null,"first_public_time":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":688,"publish_version":688,"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":[{"id":"e5a5ac8a005ad653","reply_to_id":null,"content":"Just discovered this which is very interesting https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm","create_time":"$D2021-04-29T16:46:05.819Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"0d2ceae54dd72d06","reply_to_id":"e5a5ac8a005ad653","content":"In what regard, as an interface to support? With the exception of Buffer related stuff (which requires async), I think all of these are supported by the EvalSerializer (+ it handles functions to some extent).","create_time":"$D2021-04-29T20:52:36.321Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Storage","cells":[{"id":0,"value":"md`# Storage\n\n*<todo>Insert inspirational quote about persistence.</todo>*\n\nThe one-size-fits-all storage solution for Observable. Whether you want your data to survive page reloads, cache large chunks, or persist data externally – this notebook has you covered!\n\n**Features:**\n- Interfaces\n- Serializers\n- Backends\n\n### Goals\n\n- provide storage wrappers for various storage backends: memory, localStorage, png, URL, file, json\n- customizable write frequency (always, interval, manually)\n- offer the ability to take storage snapshots and restore them,\n- export and import snapshots to and from various formats\n- switch backends on the fly\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"/*\n function setupStorage(options = {}) {\n \n const {\n name = getNamespace(),\n backend = null,\n serializer: getSerializer = 'string',\n interface: getInterface = 'storage',\n } = options;\n \n const serializer = keyOrCallback(serializers, getSerializer)();\n \n function keyOrCallback(obj, value) {\n return typeof value === 'function' ? value : obj[value];\n }\n}*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"doc_interfaces = md`---\n## Storage Interfaces\n\nTired of \\`setItem()\\` / \\`getItem()\\`? Then these abstractions are your friends! Each one provides a different API around the original Storage interface.\n\n- **StorageStorageInterface:** Default [Storage]() interface.\n- **MapStorageInterface:** Mimics the complete [Map API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map). Keys are coerced to strings.\n- **ObjectStorageInterface:**: Plain object interface. Values are managed by setting, changing or deleting object properties.\n\nImplementation notes:\n- All interfaces *must* cast keys to String.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"class StorageStorageInterface {\n constructor(storage) {\n this.storage = storage;\n }\n get length() {\n return this.storage.length;\n }\n getItem(key) {\n return this.storage.getItem(key + '');\n }\n setItem(key, value) {\n this.storage.setItem(key + '', value);\n }\n removeItem(key) {\n this.storage.removeItem(key + '');\n }\n clear() {\n this.storage.clear();\n }\n key(index) {\n return this.storage.key(index);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"storageInterfaces = ({\n 'storage': storage => new StorageStorageInterface(storage),\n 'map': storage => new MapStorageInterface(storage),\n 'object': storage => new ObjectStorageInterface(storage),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`---\n## [Draft] Storage Backends\n\nA storage backend persists a storage state, either automatically or through user interaction.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"// Todo: todo\nclass LocalStorageBackend {\n export() {\n \n }\n \n import() {\n \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"class StringSerializer {\n \n serialize(value) {\n return value + '';\n }\n \n deserialize(text) {\n return text;\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"class JSONSerializer {\n \n serialize(value) {\n return JSON.stringify(value);\n }\n \n deserialize(text) {\n return JSON.parse(text);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"serializers = ({\n 'string': () => new StringSerializer(),\n 'json': () => new JSONSerializer(),\n 'eval': () => new EvalSerializer(),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`---\n## [Draft] Concept\n\n- Offer a variety of storage backends\n\nCommon interface:\n- storage key\n- import()\n- export()\n- label\n- *value\n- view\n\nStorage methods:\n- localStorage\n- file\n- image\n- data url\n- object url\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`---\n## Utilities\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"function getNamespace(url = document.baseURI) {\n return new URL(url).pathname.replace(/[^a-z0-9-_]/g, '_').replace(/^_+/, '');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"compat = {\n const queue = [];\n \n // EventTarget() constructor\n try {\n (new EventTarget).constructor;\n }\n catch(e) {\n queue.push(require('@ungap/event-target').catch(e => {}));\n }\n \n return Promise.allSettled(queue).then(v => !v.some(v => v.status !== 'fulfilled'));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`---\n## References\n\n- https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/\n- https://www.tutorialspoint.com/Maximum-size-of-a-canvas-element-in-HTML\n- https://medium.com/@homam/making-almost-every-non-interactive-web-page-work-offline-7798ed68baac\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

${s}`)}