2c:null 2d:["$","title",null,{"children":"urlQueryFieldView: Non-invasive URL field persistence | Tom Larkworthy | Observable"}] 32:T535,urlQueryFieldView = ( field, { defaultValue = undefined, decode = (field) => field, write = false, hash = undefined, bindTo = undefined } = {} ) => { if (typeof decode !== "function") throw new Error("decode must be a function"); const id = DOM.uid().id; const readField = () => { const v = new URLSearchParams( /*allow overriding */ window.rEPseDFzXFSPYkNz || location.search ).get(field) || undefined; return v ? decode(v) : defaultValue; }; let cache = readField(); const ui = htl.html`

urlQueryFieldView("${field}"): ${inspect( cache )}

`; const holder = ui.querySelector(`#${id}`); const view = Object.defineProperty(ui, "value", { get: () => { return cache; }, set: (value) => { const search = new URLSearchParams(location.search); search.set(field, value); cache = value; if (write) { if (!hash.startsWith("#")) hash = "#" + hash; html``.click(); } }, enumerable: true }); if (bindTo) { Inputs.bind(bindTo, view); } return view; }33:[] 30:{"id":"1a271ff51d899f30","slug":"url-query-field-view","title":"urlQueryFieldView: Non-invasive URL field persistence","thumbnail":"0a36f289b5cf7b1f619b77df22b605715a1ae1544b379718275070358e55e8aa","access_level":"public","create_time":"$D2022-03-03T13:15:48.911Z","update_time":"$D2026-03-18T08:07:21.040Z","view_time":null,"first_public_time":"$D2022-03-03T16:01:04.841Z","has_unpublished_edits":null,"fork":{"id":"048a17a165be198d","slug":"local-storage-view","title":"localStorageView: Non-invasive local persistance","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":6,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","bio":"Tech Lead at Taktile.\nFormerly Firebase, Google"},"version":491,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"bio":"Tech Lead at Taktile. ex Firebase, Google.\n🦋 larkworthy.bsky.social"}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[{"id":"d8c01d29b349f621","reply_to_id":null,"content":"Is this input supposed to be writable? I'm not able to edit it (tested on Firefox and Chrome)","create_time":"$D2022-03-03T19:00:05.944Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}},{"id":"11193243d31ea99b","reply_to_id":"d8c01d29b349f621","content":"oh yeah! weird, ok, I fixed that bug, thanks so much for reporting!","create_time":"$D2022-03-03T19:08:17.149Z","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}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"d00b7aa83811f066","slug":"ui","title":"ui","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"titling":"auto","title":"urlQueryFieldView: Non-invasive URL field persistence","cells":[{"id":0,"value":"md`# urlQueryFieldView: Non-invasive URL field persistence`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`Lets make it simple to bind a URL query field to a UI control (e.g. [@observablehq/inputs](/@observablehq/inputs))\n\nWe exploit back-writability and input binding to avoid having to mess with existing UI control code.\n\n_urlQueryFieldView(field)_ creates a URL decoded view of the field in the URL query string. Because it's a view it can be [_synchronized_](https://observablehq.com/@observablehq/synchronized-inputs) to any control we want to provide persistence for.\n\nIf you want all users to share a networked value, consider [shareview](https://observablehq.com/@tomlarkworthy/shareview).\n\nThis works with an view that follows [design guidelines for views](https://observablehq.com/@tomlarkworthy/ui-linter?collection=@tomlarkworthy/ui). A similar notebook that uses local storageis the [localStorageView](https://observablehq.com/@tomlarkworthy/local-storage-view).\n\n~~~js\n import {urlQueryFieldView} from '@tomlarkworthy/url-query-field-view'\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"We can bind to a UI component inline with instanciating it with\n\n`Inputs.bind(, urlQueryFieldView())`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"viewof c1 = Inputs.bind(Inputs.text({ label: \"c1\" }), urlQueryFieldView(\"c1\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"c1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"Or we can bind in an adjacent cells with\n\n`Inputs.bind(viewof , urlQueryFieldView());`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":339,"value":"viewof c2 = Inputs.text({ label: \"c2\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"c2sideBind = {\n Inputs.bind(viewof c2, urlQueryFieldView(\"c2\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"### Links\n\nTo demonstrate it works just follow this links which updated the URL\n\n\nset [c1=foo](?c1=foo#c1)\n\nset [c2=nice](?c2=nice#c2)\n\n\nset [c1=bar&c2=nice](?c1=bar&c2=nice#c1)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"Tada! note the UI controls update based on the URL, if you know the name of the cells you can also set the URL hash to get the page to navigate after the load too","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":220,"value":"### Custom decode\n\nThe second argument is the *options*, which includes \"decode\". Here you can apply a function to the value so you can decode to types other than strings. Note all params have `decodeURIComponent` applied first\n\n\ntry clicking [json=[{t:0, c: red}]](?json=${encodeURIComponent(JSON.stringify({t:0, c: \"red\"}))}#json)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof json = urlQueryFieldView(\"json\", { decode: JSON.parse })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"json","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"## Back-writing\n\nThe view supports backwriting, which will cause a navigation event. As this is intrusive and not often required, it is turned off by default. To enable it, set the option `write` to `true`. This will do a top level navigation via link automation, so it will only works if the user initiates the action. It keeps unrelated fields and the URL hash unchanged.\n\nBy adding a `hash` parameter you can also control the URL hash","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"viewof c3 = Inputs.bind(\n Inputs.text({\n label: \"c3\",\n submit: true,\n placeholder: \"try something\"\n }),\n urlQueryFieldView(\"c3\", { write: true, hash: \"c3\" })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"import { inspect } from \"@tomlarkworthy/inspector\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"