Syncronize a YJS document to/from a plain old javascript object

Overview

y-pojo

Syncronize a YJS document to/from a plain old javascript object

This library enables multiple users to share state in the form of a Plain ol' Javascript object (POJO), by mapping changes on the POJO into a Y.Map, and mapping Y.Map changes back into a new copy of the POJO (via yMap.toJSON).

It supports regular, simple, javascript objects (called a Record in Typescript). It supports objects, arrays, and other simple types that can be JSON marshalled.

It contains two methods, syncronize and deepEquals. Call syncronize(yMap, pojo) to compare the current state of a YJS map to the state of the POJO, and apply the required changes to the YJS map to make it equal to the same value as the pojo. It assumes your network layer is registered with the YJS document to capture and communicate these updates to the other users.

When a remote user has updated the YJS document, simple call yMap.toJSON() to get the new copy of the POJO on the other clients.

Example

import {syncronize} from "y-pojo"
import * as Y from 'yjs'

let doc1 = new Y.Doc()
let root = doc1.getMap("r")
let targetObject = {
   name: "Tom",
   count: 42,
   pets: [{"name": "Jerry"}, {"name": "Bob"}]
}
syncronize(root, targetObject)
console.log(JSON.stringify(root.toJSON())) // {"name":"Tom","count":42,"pets":[{"name":"Jerry"},{"name":"Bob"}]}

let updatedTargetObject = {
   name: "Tom",
   count: 42,
   pets: [{"name": "Jerry"}, {"name": "Bob"},  {"name": "Carol"}]
}

syncronize(root, updatedTargetObject)
console.log(JSON.stringify(root.toJSON())) // {"name":"Tom","count":42,"pets":[{"name":"Jerry"},{"name":"Bob"},{"name":"Carol"}]}

Limitations

  • It won't work with Regex, or Date, or other classes.
  • strings within the javascript object are not represented as Y.Text and deep compared - they are static strings that get replaced when edited. So it would be better to use Y.Text directly for text document editing.
You might also like...

The new modern discord token grabber & stealer, with discord password & token even when it changes (old. PirateStealer)

๐ŸŒ Discord Server - ๐Ÿ’Ž Premium - ๐Ÿ”ง Builder - ๐Ÿ’ก Features Authors Stanley Bytixo Autist69420 PirateStealer (by Brooklyn inc) The new modern discord to

Jan 6, 2023

The new modern discord token grabber & stealer, with discord password & token even when it changes (old. PirateStealer)

๐ŸŒ Discord Server - ๐Ÿ’Ž Premium - ๐Ÿ”ง Builder - ๐Ÿ’ก Features Authors Stanley Bytixo Contributors Autist69420 HideakiAtsuyo PirateStealer (by Brooklyn inc

Apr 12, 2022

โŒ› Unofficial archive of old Scratch projects

Unofficial archive of old Scratch projects Due to the Scratch Team planning to remove the ability to view unshared projects (LLK/scratch-www#6773), I

Oct 7, 2022

Chrome & Firefox extension to return old Twitter layout from 2015.

Chrome & Firefox extension to return old Twitter layout from 2015.

OldTwitter (2022) Chrome extension to return old Twitter layout from 2015. This extension doesn't add any CSS on top of original Twitter. It's fully o

Jan 4, 2023

Rotating CSS dice in 3D using jQuery. Based on my old snippet on CodePen.

Dice Rotating CSS dice in 3D using jQuery. Based on my old CodePen Roll the dice!. Demo: https://alexerlandsson.github.io/dice/ How to use Include /do

Dec 14, 2022

a temporary solution to revert to the old ui. the new ui was put into effect since april

a temporary solution to revert to the old ui. the new ui was put into effect since april

Revert-YouTube-UI a temporary solution to revert to the old ui. the new ui was put into effect since april and is slowly rolling out to users. Feature

May 10, 2023

Use plain functions as modifiers. Polyfill for RFC: 757 | Default Modifier Manager

Use plain functions as modifiers. Polyfill for RFC: 757 | Default Modifier Manager

Jan 14, 2022

Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

SWTF (Simple Worklog Task Format) Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can wr

Apr 4, 2022

kakaolink-plugin is a remote-kakao plugin for sending KakaoLinks instead of plain text

kakaolink-plugin is a remote-kakao plugin for sending KakaoLinks instead of plain text

kakaolink-plugin Discord Server About kakaolink-plugin is a remote-kakao plugin for sending KakaoLinks instead of plain text. Requirements Node.js v17

Oct 1, 2022
Owner
null
Socket IO Connector for Yjs (Inspired by y-websocket)

Welcome to y-socket.io ?? Socket IO Connector for Yjs (Inspired by y-websocket) Y-socket.io is a YJS document synchronization implementation over the

Ivรกn Topp Sandoval 18 Dec 21, 2022
Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

Vineeth.TR 16 Dec 6, 2022
Device.js is a JavaScript library to detect device, viewport, and browser information using plain JavaScript.

Device.js Device.js is a JavaScript library to detect device, viewport, and browser information using plain JavaScript. Compatibility Works with all m

Emanuel R. Vรกsquez 5 Dec 16, 2022
Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.

You (Might) Don't Need jQuery Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs

NEFE 20.3k Dec 24, 2022
Awesome books: plain JavaScript with objects

Awesome books: plain JavaScript with objects Awesome books is an online book store. It's built with HTML, CSS and mostly JS based on a medium-fidelity

null 17 Aug 30, 2022
Plain JavaScript version of jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none.

dom-slider It works like jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none. Uses CSS3 transitions and element.scrollHei

Brenton Cozby 56 Dec 27, 2022
Linkify is a JavaScript plugin for finding links in plain-text and converting them to HTML tags.

Linkify Linkify is a JavaScript plugin. Use Linkify to find links in plain-text and convert them to HTML <a> tags. It automatically highlights URLs, #

Hypercontext 1.5k Dec 27, 2022
๐Ÿ“„ UI clone from vercel old site (Using basic tools)

vercel old site A portfolio site, made using the latest technologies. In the construction of the site using Sass. Quality: 1) Benchmark test using a s

Pedromdsn 2 Mar 1, 2022
C2Ladders - a reconstruction of old a2oj Ladders with new and updated problemset

C2Ladders is rating wise list of Codeforces problems which were solved by many people who have had stable rating increase. It's a reconstruction of old a2oj Ladders with new and updated problemset.

Prince Gupta 45 Dec 11, 2022