3e:null 3f:["$","title",null,{"children":"Shared state with [ yjs ] | Fada | Observable"}] 45:T512,peerOpts = ({ config: { iceServers: [ // { urls: "stun:stun.l.google.com:19302" }, // { urls: "stun:global.stun.twilio.com:3478?transport=udp" }, { urls: "stun:openrelay.metered.ca:80" }, { urls: "turn:openrelay.metered.ca:80", username: "openrelayproject", credential: "openrelayproject", }, { urls: "turn:openrelay.metered.ca:443", username: "openrelayproject", credential: "openrelayproject", }, { urls: "turn:openrelay.metered.ca:443?transport=tcp", username: "openrelayproject", credential: "openrelayproject", }, { urls: "turn:openrelay.metered.ca:80?transport=tcp", username: "openrelayproject", credential: "openrelayproject", }, { urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun1.l.google.com:19302' }, { urls: 'stun:stun2.l.google.com:19302' }, { urls: 'stun:stun3.l.google.com:19302' }, { urls: 'stun:stun4.l.google.com:19302' }, { urls: 'turn:turn.bistri.com:80', credential: 'homeo', username: 'homeo', }, { urls: 'turn:turn.anyfirewall.com:443?transport=tcp', credential: 'webrtc', username: 'webrtc', } ]} })46:T17ac,esmap = ({ "imports": { "y-webrtc": "https://ga.jspm.io/npm:y-webrtc@10.2.3/src/y-webrtc.js", "yjs": "https://ga.jspm.io/npm:yjs@13.5.38/dist/yjs.mjs" }, "scopes": { "https://ga.jspm.io/": { "isomorphic.js": "https://ga.jspm.io/npm:isomorphic.js@0.2.5/browser.mjs", "lib0/array": "https://ga.jspm.io/npm:lib0@0.2.51/array.js", "lib0/binary": "https://ga.jspm.io/npm:lib0@0.2.51/binary.js", "lib0/broadcastchannel": "https://ga.jspm.io/npm:lib0@0.2.51/broadcastchannel.js", "lib0/buffer": "https://ga.jspm.io/npm:lib0@0.2.51/buffer.js", "lib0/decoding": "https://ga.jspm.io/npm:lib0@0.2.51/decoding.js", "lib0/encoding": "https://ga.jspm.io/npm:lib0@0.2.51/encoding.js", "lib0/error": "https://ga.jspm.io/npm:lib0@0.2.51/error.js", "lib0/function": "https://ga.jspm.io/npm:lib0@0.2.51/function.js", "lib0/iterator": "https://ga.jspm.io/npm:lib0@0.2.51/iterator.js", "lib0/logging": "https://ga.jspm.io/npm:lib0@0.2.51/logging.js", "lib0/map": "https://ga.jspm.io/npm:lib0@0.2.51/map.js", "lib0/math": "https://ga.jspm.io/npm:lib0@0.2.51/math.js", "lib0/mutex": "https://ga.jspm.io/npm:lib0@0.2.51/mutex.js", "lib0/object": "https://ga.jspm.io/npm:lib0@0.2.51/object.js", "lib0/observable": "https://ga.jspm.io/npm:lib0@0.2.51/observable.js", "lib0/promise": "https://ga.jspm.io/npm:lib0@0.2.51/promise.js", "lib0/random": "https://ga.jspm.io/npm:lib0@0.2.51/random.js", "lib0/set": "https://ga.jspm.io/npm:lib0@0.2.51/set.js", "lib0/string": "https://ga.jspm.io/npm:lib0@0.2.51/string.js", "lib0/time": "https://ga.jspm.io/npm:lib0@0.2.51/time.js", "lib0/websocket": "https://ga.jspm.io/npm:lib0@0.2.51/websocket.js", "simple-peer/simplepeer.min.js": "https://ga.jspm.io/npm:simple-peer@9.11.1/simplepeer.min.js", "y-protocols/awareness": "https://ga.jspm.io/npm:y-protocols@1.0.5/awareness.js", "y-protocols/sync": "https://ga.jspm.io/npm:y-protocols@1.0.5/sync.js" } } }) /*({ "imports": { "y-webrtc": "https://ga.jspm.io/npm:y-webrtc@10.2.3/src/y-webrtc.js", "y-websocket": "https://ga.jspm.io/npm:y-websocket@1.4.3/src/y-websocket.js", "yjs": "https://ga.jspm.io/npm:yjs@13.2.0/dist/yjs.cjs" }, "scopes": { "https://ga.jspm.io/": { "buffer": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/buffer.js", "isomorphic.js": "https://ga.jspm.io/npm:isomorphic.js@0.2.5/browser.mjs", "lib0/array": "https://ga.jspm.io/npm:lib0@0.2.51/array.js", "lib0/binary": "https://ga.jspm.io/npm:lib0@0.2.51/binary.js", "lib0/broadcastchannel": "https://ga.jspm.io/npm:lib0@0.2.51/broadcastchannel.js", "lib0/buffer": "https://ga.jspm.io/npm:lib0@0.2.51/buffer.js", "lib0/decoding": "https://ga.jspm.io/npm:lib0@0.2.51/decoding.js", "lib0/dist/array.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/array.cjs", "lib0/dist/binary.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/binary.cjs", "lib0/dist/buffer.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/buffer.cjs", "lib0/dist/decoding.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/decoding.cjs", "lib0/dist/encoding.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/encoding.cjs", "lib0/dist/error.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/error.cjs", "lib0/dist/function.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/function.cjs", "lib0/dist/iterator.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/iterator.cjs", "lib0/dist/logging.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/logging.cjs", "lib0/dist/map.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/map.cjs", "lib0/dist/math.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/math.cjs", "lib0/dist/object.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/object.cjs", "lib0/dist/observable.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/observable.cjs", "lib0/dist/random.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/random.cjs", "lib0/dist/set.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/set.cjs", "lib0/dist/time.cjs": "https://ga.jspm.io/npm:lib0@0.2.51/dist/time.cjs", "lib0/encoding": "https://ga.jspm.io/npm:lib0@0.2.51/encoding.js", "lib0/error": "https://ga.jspm.io/npm:lib0@0.2.51/error.js", "lib0/function": "https://ga.jspm.io/npm:lib0@0.2.51/function.js", "lib0/iterator": "https://ga.jspm.io/npm:lib0@0.2.51/iterator.js", "lib0/logging": "https://ga.jspm.io/npm:lib0@0.2.51/logging.js", "lib0/map": "https://ga.jspm.io/npm:lib0@0.2.51/map.js", "lib0/math": "https://ga.jspm.io/npm:lib0@0.2.51/math.js", "lib0/mutex": "https://ga.jspm.io/npm:lib0@0.2.51/mutex.js", "lib0/object": "https://ga.jspm.io/npm:lib0@0.2.51/object.js", "lib0/observable": "https://ga.jspm.io/npm:lib0@0.2.51/observable.js", "lib0/promise": "https://ga.jspm.io/npm:lib0@0.2.51/promise.js", "lib0/random": "https://ga.jspm.io/npm:lib0@0.2.51/random.js", "lib0/set": "https://ga.jspm.io/npm:lib0@0.2.51/set.js", "lib0/string": "https://ga.jspm.io/npm:lib0@0.2.51/string.js", "lib0/time": "https://ga.jspm.io/npm:lib0@0.2.51/time.js", "lib0/url": "https://ga.jspm.io/npm:lib0@0.2.51/url.js", "lib0/websocket": "https://ga.jspm.io/npm:lib0@0.2.51/websocket.js", "process": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/process-production.js", "simple-peer/simplepeer.min.js": "https://ga.jspm.io/npm:simple-peer@9.11.1/simplepeer.min.js", "y-protocols/auth": "https://ga.jspm.io/npm:y-protocols@1.0.5/auth.js", "y-protocols/awareness": "https://ga.jspm.io/npm:y-protocols@1.0.5/awareness.js", "y-protocols/sync": "https://ga.jspm.io/npm:y-protocols@1.0.5/sync.js", "yjs": "https://ga.jspm.io/npm:yjs@13.5.39/dist/yjs.mjs" } } })*/47:[{"id":"2a437c58b8bee561de91896441515b25d0123d6cbfbeeb0c5cd041e6f4cde0b54e44afb5bcb606bbd068e7db3551be1278963caf599ed82f590d4c65eb7f3499","href":"https://static.observableusercontent.com/files/2a437c58b8bee561de91896441515b25d0123d6cbfbeeb0c5cd041e6f4cde0b54e44afb5bcb606bbd068e7db3551be1278963caf599ed82f590d4c65eb7f3499","name":"hi-yjs@1.png","type":"image/png","lastModified":1685647648403.462,"size":319610}] 43:{"id":"3bc4c5fd3511d658","slug":null,"title":"Shared state with [ yjs ]","thumbnail":"3b9549eca48e10ea694afcf0bd078f557b34ffa9d2e0b316092fcb6e912e26ba","access_level":"public","create_time":"$D2023-06-01T19:27:28.403Z","update_time":"$D2023-06-01T19:27:28.403Z","view_time":null,"first_public_time":"$D2023-06-01T19:27:28.403Z","has_unpublished_edits":null,"fork":{"id":"8513b28526eabfa0","slug":"shared-state","title":"Shared state with [ yjs ]","owner":{"id":"10e70264ea4e147e","login":"dleeftink","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"4515d6b4ef7f23fb","login":"scenaristeur","name":"Fada","avatar_url":"https://avatars-next.observableusercontent.com/8f61238cb2766a17179b09667cd047ff0a07b4bfad72a686eef121f7f179f5ab","tier":"starter_2024","bio":"","following":false},"version":1166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e98107320169e1d3","login":"scenaristeur","name":"Fada","avatar_url":"https://avatars-next.observableusercontent.com/8f61238cb2766a17179b09667cd047ff0a07b4bfad72a686eef121f7f179f5ab","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e98107320169e1d3","login":"scenaristeur","name":"Fada","avatar_url":"https://avatars-next.observableusercontent.com/8f61238cb2766a17179b09667cd047ff0a07b4bfad72a686eef121f7f179f5ab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Shared state with [ yjs ]","cells":[{"id":0,"value":"# Shared state with [ *yjs* ]\n## Bringing shared CRDT's to Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":455,"value":"$${await FileAttachment(\"hi-yjs@1.png\").image({style: `width:640px; max-width:width`})}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"The [`yJs ecosystem`](https://yjs.dev/) provides a user friendly way to sharing state between clients.\nIt offers a handful of 'shared types' that can be interacted with akin to regular\nobjects and arrays, with one big difference: their state is instantly synced across peers.\n*Shared state, without the (Fire)base!*\n> Shoutout [@mootari](https://observablehq.com/@mootari/) for *observablifying* suggestions!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":908,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":905,"value":"#### Log\n- 22-06-15:\n - Added peer view\n - Added custom STUN / TURN iceServer config \n- 22-06-14: Issue setting the wsclient url\n \n \n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"### Setup\nUsing the library is as easy as drawing up some HTML, defining a `yDoc` and `yMap`\nand updating / observing input values as they come in.\n\n> - For more examples, visit the [yJs documentation](https://docs.yjs.dev/getting-started/working-with-shared-types).\n> - Bonus: it even syncs [across contexts](https://stackblitz.com/edit/shared-slider?file=index.ts).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":978,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":653,"value":"viewof slider = Inputs.range([0, 100], {step: 1, value: 50, label: html`Shared slider`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"observeSlider = slider","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":654,"value":"Client ID : ${yDoc.clientID}

(${provider.room.peerId})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":787,"value":"viewof peers = {\n  \n  const output = html`?`;\n  const guids = html`You: ${provider.room.peerId}`;\n  const view = html`Peers: ${output}${guids}`;\n  let id;\n  const probe = () => (update(), id = setTimeout(probe, 1000));\n  probe();\n  invalidation.then(() => clearTimeout(id));\n  return view;\n\n  function update() {\n    const peers = [...provider.room.webrtcConns.values()];\n    if(!changedPeers(view.value, peers)) return;\n    \n    output.value = peers.length;\n    while(guids.children.length > 1) guids.lastElementChild.remove();\n    for(const p of peers) guids.appendChild(html`
Ext: ${p.remotePeerId}`);\n    view.value = peers;\n    view.dispatchEvent(new Event('input', {bubbles: true}));\n  }\n\n  function changedPeers(a, b) {\n    return a?.length !== b?.length || a.some((p, i) => p.remotePeerId !== b[i].remotePeerId);\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"viewof roomName = Inputs.text({\n  value: 'observable-shared-state',\n  submit: true,\n  required: true,\n  label: html`Room name`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":894,"value":"observePeers = peers","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"observeEvents = {\n  \n  const lastEvent = new Mutable();\n  const input = viewof slider;\n\n  // remember to trigger dataflow on transaction\n  const transaction = (e) => {\n    lastEvent.value = e;\n    input.value = yMap.get('value')\n    input.dispatchEvent(new Event('input'))}\n\n  const setMap = (e) => {\n    if( e.isTrusted ) yMap.set('value', input.value )}\n  \n  input.addEventListener('input', setMap);\n   yMap.observe(transaction)\n  \n  invalidation.then(() => {\n   input.removeEventListener('input', setMap)\n    yMap.unobserve(transaction)})\n  \n  return lastEvent.generator }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"#### Config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":648,"value":"provider = {\n  \n  const p = new WebrtcProvider(roomName, yDoc, {signaling,peerOpts});\n  invalidation.then(() => p.destroy());\n  return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"signaling = [ \n// 'wss://y-webrtc-signaling-eu.herokuapp.com', \n// 'wss://y-webrtc-signaling-us.herokuapp.com'\n// 'wss://signaling.yjs.dev' \n   'wss://y-webrtc-eu.fly.dev'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"____","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":649,"value":"yDoc = {\n\n  try { // flag console logging\n  let storage = window.localStorage;\n      storage.log = 'true'  } \n      catch { }\n  \n  const doc = new Y.Doc();\n  invalidation.then(() => doc.destroy() );\n  return doc\n  \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"yMap = yDoc.getMap('slider')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"___\n\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"Y = module.Y","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"module = { // esmap via iframe\n \n  const proxy = htl.html``;\n        document.body.appendChild(proxy)\n        invalidation.then(()=> proxy.remove())\n\n  return new Promise((resolve, reject) => {\n    proxy.contentWindow.__resolveModules = resolve;\n    proxy.contentWindow.document.write(`\n   <script async type=\"importmap\">${JSON.stringify(esmap)}</script>\n   <script async crossorigin=\"anonymous\"\n     src=\"https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js\"></script>\n\n   <script async type=\"module\">\n     import * as Y from \"yjs\";\n     import { WebrtcProvider } from \"y-webrtc\";\n     // import { WebsocketProvider } from \"y-websocket\";\n     window.__resolveModules({ Y, WebrtcProvider });\n   </script>`)})\n  \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"WebrtcProvider = module.WebrtcProvider","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}}
44:"$43:body"
</article></body></html>