How to use yjs - 10 common examples

To help you get started, we’ve selected a few yjs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github lukebarlow / y-plain-state / src / specs / specHelper / createUsers.js View on Github external
async function createUsers (numberOfUsers) {
  if (Y.utils.globalRoom.users[0] != null) {
    await Y.utils.globalRoom.flushAll()
  }
  // destroy old users
  for (var u in Y.utils.globalRoom.users) {
    Y.utils.globalRoom.users[u].y.destroy()
  }
  var promises = []
  for (var i = 0; i < numberOfUsers; i++) {
    promises.push(Y({
      db: {
        name: 'memory',
        namespace: 'User ' + i,
        // cleanStart: true,
        gcTimeout: -1
      },
      connector: {
        name: 'Test',
        debug: false
      },
      share: {
        root: 'Map'
      }
    }))
  }
  const yUsers = await Promise.all(promises).catch(console.log.bind(console))
github citrusbyte / thicket / packages / thicket-webapp / src / database / index.js View on Github external
if (action === 'userJoined') {
              this._syncing = true
              this.emit(`syncing-${communityId}`)
              y.connector.whenSynced(() => {
                setTimeout(() => {
                  this._syncing = false
                  this.emit(`synced-${communityId}`)
                }, 1000)
              })
            }
          })
        }

        const options = yConfig(node, communityId)
        options.connector = { ...options.connector, onSubscribed }
        const y = new Y(`thicket:${communityId}`, options, persistence)
        y.share.publications = y.define('publications', Y.Array)
        y.share.metadata = y.define('map', Y.Map)
        y.share.publicationsMetadata = y.define('map', Y.Map)
        y.share.nicknames = y.define('map', Y.Map)

        // updates to the community metadata (eg change community title)
        y.share.metadata.observe(({ value, type }) => {
          if (value && type !== 'delete') {
            if (!this._syncing) {
              this.emit(`update-${communityId}`, value)
            }
          }
        })
        // updates to the publications (eg new publication)
        y.share.publications.observe(async ({ type, values }) => {
          if (!this._syncing) {
github spacecraft-repl / SpaceCraft / src / editor.js View on Github external
lineNumbers: true,
  theme: 'one-dark',
  tabSize: 2,
  mode: 'ruby',
  lineWrapping: true,
  // Prevent bug with Yjs syncing.
  // - disable auto-re-indenting on certain characters (eg: `end`).
  electricChars: false
})
Y.extend(yWebsocketsClient, yMemory, yArray, yText)

// @todo: Check if this is always a valid way to get url.
const url = window.location.href
const socket = io(url)

Y({
  db: {
    name: 'memory' // store the shared data in memory
  },
  connector: {
    name: 'websockets-client',
    room: 'spacecraft-repl', // instances connected to the same room share data
    socket,
    url
  },
  share: { // specify the shared content
    editorText: 'Text' // new Y.Text
  }
}).then((y) => { // Yjs is successfully initialized
  console.log('Yjs instance ready!')
  window.y = y
  y.share.editorText.bindCodeMirror(editor)
github citrusbyte / thicket / packages / thicket-webapp / src / database / index.js View on Github external
y.connector.whenSynced(() => {
                setTimeout(() => {
                  this._syncing = false
                  this.emit(`synced-${communityId}`)
                }, 1000)
              })
            }
          })
        }

        const options = yConfig(node, communityId)
        options.connector = { ...options.connector, onSubscribed }
        const y = new Y(`thicket:${communityId}`, options, persistence)
        y.share.publications = y.define('publications', Y.Array)
        y.share.metadata = y.define('map', Y.Map)
        y.share.publicationsMetadata = y.define('map', Y.Map)
        y.share.nicknames = y.define('map', Y.Map)

        // updates to the community metadata (eg change community title)
        y.share.metadata.observe(({ value, type }) => {
          if (value && type !== 'delete') {
            if (!this._syncing) {
              this.emit(`update-${communityId}`, value)
            }
          }
        })
        // updates to the publications (eg new publication)
        y.share.publications.observe(async ({ type, values }) => {
          if (!this._syncing) {
            this.emit(`update-${communityId}-publications`, await this.publicationsGetAll(communityId))
          }
          // async remove local blocks
github citrusbyte / thicket / packages / thicket-webapp / src / database / index.js View on Github external
this.emit(`syncing-${communityId}`)
              y.connector.whenSynced(() => {
                setTimeout(() => {
                  this._syncing = false
                  this.emit(`synced-${communityId}`)
                }, 1000)
              })
            }
          })
        }

        const options = yConfig(node, communityId)
        options.connector = { ...options.connector, onSubscribed }
        const y = new Y(`thicket:${communityId}`, options, persistence)
        y.share.publications = y.define('publications', Y.Array)
        y.share.metadata = y.define('map', Y.Map)
        y.share.publicationsMetadata = y.define('map', Y.Map)
        y.share.nicknames = y.define('map', Y.Map)

        // updates to the community metadata (eg change community title)
        y.share.metadata.observe(({ value, type }) => {
          if (value && type !== 'delete') {
            if (!this._syncing) {
              this.emit(`update-${communityId}`, value)
            }
          }
        })
        // updates to the publications (eg new publication)
        y.share.publications.observe(async ({ type, values }) => {
          if (!this._syncing) {
            this.emit(`update-${communityId}-publications`, await this.publicationsGetAll(communityId))
          }
github lukebarlow / y-plain-state / examples / jigsaw / index.js View on Github external
}).then((y) => {
  const state = Y.PlainState(y.share.state)
  setDefaults(state, {
    piece1: {translation: {x: 0, y: 0}},
    piece2: {translation: {x: 0, y: 0}},
    piece3: {translation: {x: 0, y: 0}},
    piece4: {translation: {x: 0, y: 0}}
  })

  window.state = state
  var origin // mouse start position - translation of piece
  var drag = d3Drag()
    .on('start', function (params) {
      // get the translation of the element
      var translation = select(this).attr('transform').slice(10, -1).split(',').map(Number)
      // mouse coordinates
      var mouse = d3Mouse(this.parentNode)
      origin = {
github citrusbyte / thicket / packages / thicket-webapp / src / database / index.js View on Github external
this._syncing = true
              this.emit(`syncing-${communityId}`)
              y.connector.whenSynced(() => {
                setTimeout(() => {
                  this._syncing = false
                  this.emit(`synced-${communityId}`)
                }, 1000)
              })
            }
          })
        }

        const options = yConfig(node, communityId)
        options.connector = { ...options.connector, onSubscribed }
        const y = new Y(`thicket:${communityId}`, options, persistence)
        y.share.publications = y.define('publications', Y.Array)
        y.share.metadata = y.define('map', Y.Map)
        y.share.publicationsMetadata = y.define('map', Y.Map)
        y.share.nicknames = y.define('map', Y.Map)

        // updates to the community metadata (eg change community title)
        y.share.metadata.observe(({ value, type }) => {
          if (value && type !== 'delete') {
            if (!this._syncing) {
              this.emit(`update-${communityId}`, value)
            }
          }
        })
        // updates to the publications (eg new publication)
        y.share.publications.observe(async ({ type, values }) => {
          if (!this._syncing) {
            this.emit(`update-${communityId}-publications`, await this.publicationsGetAll(communityId))
github peer-base / peer-pad / src / crdt.js View on Github external
name: 'ipfs',
    room: roomName(id),
    ipfs: ipfs,
    verifySignature: verifySignature,
    auth: authToken,
    checkAuth: checkAuth,
    roomEmitter: roomEmitter
  }

  if (canEdit) {
    connectorOptions.sign = sign
  }

  connectorOptions.role = canEdit ? 'master' : 'slave'

  return Y({
    db: {
      name: 'indexeddb'
    },
    connector: connectorOptions,
    share: {
      richtext: 'Richtext'
    }
  }).then((y) => {
    y.share.richtext.bindQuill(editor)
  })

  // Signatures

  function sign (m, callback) {
    keys.private.sign(m, callback)
  }
github FujitsuLaboratories / cattaz / server.js View on Github external
function getInstanceOfY(room) {
  if (yInstances[room] == null) {
    yInstances[room] = Y({
      db: {
        name: 'memory',
        dir: 'y-leveldb-databases',
        namespace: room,
      },
      connector: {
        name: 'websockets-server',
        // TODO: Will be solved in future https://github.com/y-js/y-websockets-server/commit/2c8588904a334631cb6f15d8434bb97064b59583#diff-e6a5b42b2f7a26c840607370aed5301a
        room: encodeURIComponent(room),
        io,
        debug: !isProduction,
      },
      share: {},
    });
    metadata[room] = {
      created: new Date(),
github lukebarlow / y-plain-state / examples / basic / index.js View on Github external
import YPlainState from '../../src/index'

import Y from 'yjs'
import YWebsocketsClient from 'y-websockets-client'
import YMemory from 'y-memory'

Y.extend(YWebsocketsClient, YMemory, YPlainState)

function draw (state) {
  var data = document.getElementById('data')
  data.innerHTML = JSON.stringify(state, null, 2)
}

Y({
  db: {
    name: 'memory'
  },
  connector: {
    name: 'websockets-client',
    room: 'y-plain-state-examples-basic'
  },
  share: { state: 'Map' }
}).then((y) => {
  const state = Y.PlainState(y.share.state)
  window.state = state // for debugging convenience
  draw(state)
  state.observe(() => {
    draw(state)
  })
})