2c:null 2d:["$","title",null,{"children":"Cached Widget | John Alexis Guerra Gómez | Observable"}] 32:Tf14,async function CachedWidget( name, input, { storageName = "CachedWidgetDB", // Name of IndexedDB storage showControls = true, template = (input, controls) => htl.html`

${input}${controls}

`, // how to render the input // use (input) => input to render passed input directly loadFromCacheCondition = (v) => v === "" || v === undefined || v === null || (Array.isArray(v) && v?.length === 0), debug = false, blob = false, schema = "" // for indexedDB } = {} ) { // Check for input if ( !input?.addEventListener || typeof input?.addEventListener !== "function" ) { throw new Error( "second parameter should be an input and support addEventListener" ); } let value = input?.value; let originalValue = value; let loadedFromCache = false; // IndexedDB Initialization const db = new Dexie(storageName); // TODO: Handle versions? db.version(1).stores({ data: schema }); const btnClear = htl.html``; const info = htl.html``; // if (loadFromCacheCondition(value)) { debug && console.log("🤔 Value seems empty, trying to load from cache", value); // try to load from cache await loadFromCache(); // } // *** Load from Cache *** async function loadFromCache() { const before = performance.now(); debug && console.log("Loading from cache", name); try { const res = await db.data.get(name); if (!res) { debug && console.log("No value found", name); info.innerText = "🕳️"; return; } loadedFromCache = true; debug && console.log( "data loaded from cache", res, ` in ${(performance.now() - before) / 1000}` ); info.innerText = "🛟"; value = blob ? fromBlob(res) : res; input.value = value; input.dispatchEvent(new Event("input", { bubbles: true })); } catch (err) { info.innerText = "❌"; console.error(err.message); } } function showAndCacheValue() { input.value = value; const before = performance.now(); debug && console.log("🛟 Caching data", value); info.innerText = "⏳"; const valueToStore = blob ? toBlob(value) : value; db.data .put(valueToStore, name) .then((res) => { debug && console.log( "data stored", name, value, `in ${(performance.now() - before) / 1000}` ); info.innerText = "✅"; }) .catch((err) => { console.error(err.message); info.innerText = "❌"; }); } btnClear.addEventListener("click", () => { db.data.delete(name).then(() => { value = originalValue; info.innerText = "🕳️"; debug && console.log("Data Cleared"); }); }); const controls = showControls ? htl.html`

${info} ${btnClear}

` : htl.html``; const wrappedInput = template(input, controls); const widget = ReactiveWidget(wrappedInput, { value, showValue: showAndCacheValue }); if (!loadedFromCache) showAndCacheValue(); // Listen for changes on the input to store them in the cache input.addEventListener("input", (evt) => { debug && console.log("✉️ Input value changed", input.value, value); evt.stopPropagation(); info.innerText = "Input value changed"; value = input.value; // showAndCacheValue(); widget.setValue(input.value); }); widget.addEventListener("input", (evt) => { debug && console.log("❤️ Input value changed", input.value, value, widget.value); value = widget.value; showAndCacheValue(); }); widget.clearCache = () => { db.data.delete(name); widget.setValue(originalValue); }; return widget; }33:T81d,// async function CachedValue( // name, // { value, schema = "", storageName = "CachedWidgetDB" } = {} // ) { // const btnClear = htl.html``; // const info = htl.html``; // const db = new Dexie(storageName); // db.version(1).stores({ data: schema }); // let loaded = false; // if (value === undefined) { // // try to load from cache // await loadFromCache(); // } // console.log("after load", value); // // When the Reactive Widget gets an update value event, store the data in the indexedDB // function showValue() { // console.log("caching data", { id: name, data: value }); // db.data // .put({ id: name, data: value }, name) // .then((res) => { // // db[name].bulkPut(value).then((res) => { // info.innerText = "Data stored"; // console.log("data stored", name, value); // }) // .catch((err) => console.error(err.message)); // } // async function loadFromCache() { // console.log("Loading from db", name); // try { // const res = await db.data.get(name); // console.log("cache get", res); // if (!res) { // info.innerText = "No value provided and no cache found"; // value = null; // console.log("No value found", name); // return; // } // loaded = true; // console.log("data loaded from cache", res); // value = res.data; // info.innerText = "Data loaded from cache"; // } catch (err) { // console.error(err.message); // } // } // btnClear.addEventListener("click", () => { // db.data.delete(name).then(() => { // // db[name].clear().then(() => { // info.innerText = "Data Cleared"; // console.log("data Cleared"); // }); // }); // console.log("creating rw", name, value); // const widget = ReactiveWidget( // htl.html`

// ${info}
// ${btnClear} //

`, // { // value, // showValue // } // ); // if (!loaded) showValue(); // return widget; // }34:T4d0,// { // var db = new Dexie("FriendDatabase"); // // DB with single table "friends" with primary key "id" and // // indexes on properties "name" and "age" // db.version(1).stores({ // friends: ` // id, // name, // age` // }); // // Now add some values. // db.friends // .bulkPut([ // { id: 1, name: "Josephine", age: 21 }, // { id: 2, name: "Per", age: 75 }, // { id: 3, name: "Simon", age: 5 }, // { id: 4, name: "Sara", age: 50, notIndexedProperty: "foo" } // ]) // .then(() => { // return db.friends.where("age").between(0, 25).toArray(); // }) // .then((friends) => { // alert("Found young friends: " + friends.map((friend) => friend.name)); // return db.friends.orderBy("age").reverse().toArray(); // }) // .then((friends) => { // alert( // "Friends in reverse age order: " + // friends.map((friend) => `${friend.name} ${friend.age}`) // ); // return db.friends.where("name").startsWith("S").keys(); // }) // .then((friendNames) => { // alert("Friends on 'S': " + friendNames); // }) // .catch((err) => { // alert("Ouch... " + err); // }); // }35:T494,// Generated with Claude 3.7 /** * Convert a variable to a Blob * @param {any} data - The data to convert to a Blob * @param {string} [type="application/octet-stream"] - The MIME type of the Blob * @returns {Blob} - The created Blob object */ function toBlob(data, type = "application/octet-stream") { // Handle different data types let blobData; if (data instanceof Blob) { // Already a Blob, just return it return data; } else if (typeof data === "string") { // Convert string directly blobData = [data]; } else if (data instanceof ArrayBuffer || ArrayBuffer.isView(data)) { // Handle ArrayBuffer and typed arrays blobData = [data]; } else { // For objects and other types, convert to JSON string try { blobData = [JSON.stringify(data)]; // If no type was specified and we're converting an object, use JSON MIME type if (type === "application/octet-stream") { type = "application/json"; } } catch (e) { // If JSON conversion fails, use string representation blobData = [String(data)]; } } // Create and return the Blob return new Blob(blobData, { type }); }36:T56d,// Generated with Claude 3.7 /** * Convert a Blob back to a variable * @param {Blob} blob - The Blob to convert * @param {string} [outputType="auto"] - The desired output type: "text", "json", "arraybuffer", or "auto" (detects from MIME type) * @returns {Promise} - A promise that resolves to the converted data */ async function fromBlob(blob, outputType = "auto") { // Determine output type based on blob's MIME type if set to auto if (outputType === "auto") { const mimeType = blob.type.toLowerCase(); if (mimeType.includes("json")) { outputType = "json"; } else if (mimeType.includes("text") || mimeType.includes("javascript") || mimeType.includes("html") || mimeType.includes("xml") || mimeType.includes("css")) { outputType = "text"; } else { outputType = "arraybuffer"; } } // Read the blob according to the output type switch (outputType) { case "text": return await blob.text(); case "json": const text = await blob.text(); try { return JSON.parse(text); } catch (e) { throw new Error("Failed to parse blob as JSON: " + e.message); } case "arraybuffer": return await blob.arrayBuffer(); default: throw new Error(`Unsupported output type: ${outputType}`); } }37:[] 30:{"id":"ace7e42b52e11555","slug":"cached-widget","title":"Cached Widget","thumbnail":"94a23584157606beca2595b608047580ffb429e421c8fca78cbd4885cf4836f3","access_level":"public","create_time":"$D2025-04-04T00:24:54.378Z","update_time":"$D2025-04-07T13:56:09.315Z","view_time":null,"first_public_time":"$D2025-04-22T19:02:01.702Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":496,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"},{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4fff0797efc0b59f","slug":"visualization-widgets","title":"Reactive Widgets and Inputs","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"titling":"auto","title":"Cached Widget","cells":[{"id":0,"value":"# Cached Widget\n\nCache a reactive widget using IndexedDB. This way the browser can keep the current selection in stored locally\n\n## Usage\n\n~~~js\nimport {CachedWidget} from \"@john-guerra/cached-widget\"\n\nviewof cachedvalue = CachedWidget(\"nameInCache\", widget)\n\n// clear the cache\nviewof cachedvalue.clearCache()\n~~~\n\n### TODO\n\n* Add a tooltip to the icons\n* Add download and load buttons\n* Cache variable when creating. Get name from variable?\n* Array with state like functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"viewof cachedvalue = CachedWidget(\"data\", dataInput({ value: [] }), {blob: true, debug: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"cachedvalue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"viewof name.value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"viewof name = CachedWidget(\"name\", Inputs.text({label: \"Name will be cached:\"}), {showControls: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"Inputs.bind(Inputs.text(), viewof name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"CachedWidget(\"range\", \n Inputs.range([1, 10], { label: \"Name will be cached:\" }), \n {\n showControls: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"ReactiveWidget = require(\"reactive-widget-helper\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"Dexie = require(\"dexie\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"// Generate sample data (replace this with your actual data)\nsampleData = Array.from({ length: 1000000 }, (_, i) => ({\n id: i,\n name: `Item ${i}`,\n value: Math.random() * 1000,\n category: [\"A\", \"B\", \"C\", \"D\"][Math.floor(Math.random() * 4)],\n timestamp: Date.now() - Math.random() * 10000000\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"import {dataInput} from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"// Gemini \"js create object from blob\"\nfunction createObjectFromBlob(blob, type = \"json\") {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n\n reader.onload = (event) => {\n const fileContent = event.target.result;\n\n let resultObject;\n\n switch (type) {\n case \"json\":\n try {\n resultObject = JSON.parse(fileContent);\n } catch (error) {\n reject(\"Error parsing JSON: \" + error);\n return;\n }\n break;\n case \"text\":\n resultObject = fileContent;\n break;\n default:\n reject(\"Unsupported type: \" + type);\n return;\n }\n resolve(resultObject);\n };\n\n reader.onerror = (error) => {\n reject(\"Error reading Blob: \" + error);\n };\n\n if (type === \"json\") {\n reader.readAsText(blob);\n } else if (type === \"text\") {\n reader.readAsText(blob);\n } else {\n reader.readAsArrayBuffer(blob);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"