30: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', } ]} })31: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" } } })*/32:[{"id":"2a437c58b8bee561de91896441515b25d0123d6cbfbeeb0c5cd041e6f4cde0b54e44afb5bcb606bbd068e7db3551be1278963caf599ed82f590d4c65eb7f3499","href":"https://static.observableusercontent.com/files/2a437c58b8bee561de91896441515b25d0123d6cbfbeeb0c5cd041e6f4cde0b54e44afb5bcb606bbd068e7db3551be1278963caf599ed82f590d4c65eb7f3499","name":"hi-yjs@1.png","type":"image/png","lastModified":1655155744874.488,"size":319610}] 2e:{"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"},{"id":158,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"$${await FileAttachment(\"hi-yjs@1.png\").image({style: `width:640px; max-width:width`})}","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":908,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":472,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":978,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":653,"value":"viewof slider = Inputs.range([0, 100], {step: 1, value: 50, label: html`Shared slider`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"observeSlider = slider","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"____","pinned":false,"hidden":false,"mode":"md"},{"id":654,"value":"Client ID : ${yDoc.clientID}

(${provider.room.peerId})","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":162,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":894,"value":"observePeers = peers","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":651,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1071,"value":"#### Config","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":1063,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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   'wss://y-webrtc-ckynwnzncc.now.sh'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"____","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":647,"value":"yMap = yDoc.getMap('slider')","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"___\n\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"Y = module.Y","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":430,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"WebrtcProvider = module.WebrtcProvider","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}
</article></body></html>