y-js/y-element

Polymer Web Component for sharing data with Yjs

<y-element>

Polymer Web Component for sharing data with Yjs. Perform data-binding on shared data!

Read the docs to get started!

This repository contains four elements:

• y-element - Configures the database and connector information
• y-map - Creates a map type. It exports the data as a shared javascript object
• y-array - Creates an array type. It exports the data as a shared javascript array
• y-type - Configuration for any Yjs type. It exports the Yjs type

Simple Yjs example in Javascript

Y({
  db: {
    name: 'memory'
  },
  connector: {
    name: 'websockets-client',
    room: 'example'
  },
  share: {
    map: 'Map'
  }
}).then(function (y) {
  y.share.map // is the shared map type
})

Same example in Polymer

<y-element
  db-name="memory"
  connector-name="websockets-client"
  connector-room="example">
  <y-map name="map" data="{{myMap}}"></y-map>
</y-element>

Before you start

Before you start remember to install all y-* modules you want to use. In particular you need to install a connector (e.g. y-websockets-client), and a database adapter (e.g. y-memory).

bower i --save y-element yjs y-map y-array y-memory y-websockets-client

<y-element>@>2.0.0 no longer supports automatic module finding. You need to explicitly include all y-* modules!

<script src="../bower_components/yjs/y.js"></script>
<script src="../bower_components/y-map/y-map.js"></script>
<script src="../bower_components/y-array/y-array.js"></script>
<script src="../bower_components/y-memory/y-memory.js"></script>
<script src="../bower_components/y-websockets-client/y-websockets-client.js"></script>

<link rel="import" href="../bower_components/y-element/y-element.html">

Contribute

Issues and Pull requests are very much welcome. If you want to help out you can also contribute to the docs ;) This project was build with Polymer CLI v0.16. Make sure the tests are still running ;)

License

y-element is licensed under the MIT License.

[email protected]

y-element's Issues

Not possible to update elements after splice

Steps to reproduce.

• Create shopping list example
• Delete elements
• Other elements are not anymore editable

Uncaught TypeError: this._mutualExcluse is not a function

I'm getting the following error when trying to follow the radio-button demo and things aren't being synced...

Uncaught TypeError: this._mutualExcluse is not a function (y-element.html:367)

HTML is per the demo:

<y-element connector-name="websockets-client" connector-room="room" db-name="memory">
	  	  <y-map name="elements" data="{{elements}}"></y-map>
</y-element>
Radio Buttons:
<paper-radio-group selected="{{elements.radio}}">
    <paper-radio-button name="cool">Cool</paper-radio-button>
    <paper-radio-button name="great">Great</paper-radio-button>
    <paper-radio-button name="awesome">Awesome!!</paper-radio-button>
</paper-radio-group>

Any idea what the issue might be?

y-array ordering with y-element seems to be faulty when pushing two elements after another

I'm facing a problem with synchronization of y-element using y-arrays and paper-text-fields.
I've attached a minimal example of the problem (modified starter kit): yjs-sync.zip

The faulty behavior can be produced as follows:
Starting with no elements in the y-array. Adding a new element in the y-array is done with the plus-button. Internally, the elements are added with a push on the y-array. Adding two elements with the button. They appear in the template (dom-repeat) with "test" already written in it (as expected). When modifying the first element an error is raised:

Uncaught Error: Error: The deletion range exceeds the range of the array!
    at HTMLElement.mutualExcluse [as _mutualExcluse] (y-element.html:597)
    at HTMLElement._onDataChange (y-element.html:378)
    at HTMLElement._complexObserverEffect (polymer.html:1613)
    at HTMLElement._complexObserverPathEffect (polymer.html:2225)
    at HTMLElement._pathEffector (polymer.html:2204)
    at HTMLElement._notifyPath (polymer.html:2105)
    at HTMLElement._annotationPathEffect (polymer.html:2219)
    at HTMLElement._pathEffector (polymer.html:2204)
    at HTMLElement._notifyPath (polymer.html:2105)
    at HTMLElement.<anonymous> (polymer.html:1547)

When doing everything as before and then instead of the modifying the first element, modifying the second element: The changes to the first element are also shown for the second element. After hitting refresh the changes are only applied to the first element and the second element (which should have been the only modified) is unchanged.

The problem does not occur when adding only one element and then doing changes.

System specs:
Ubuntu 17.04 (run with polymer serve)
Browser: Google Chrome Version 59.0.3071.104
Using the following yjs relevant bower packages:

├── polymer#1.9.2 (latest is 2.0.1)
├── y-array#10.1.3
├─┬ y-element#0.2.2
│ ├── polymer#1.9.2 (latest is 2.0.1)
│ └── yjs#12.3.1
├─┬ y-map#10.1.1
│ └── yjs#12.3.1
├─┬ y-memory#8.0.8
│ └── yjs#12.3.1
├─┬ y-text#9.4.0
│ ├─┬ y-array#10.1.3
│ │ └── yjs#12.3.1
│ └── yjs#12.3.1
├─┬ y-websockets-client#8.0.16
│ └── yjs#12.3.1
└── yjs#12.3.1

I hope this is the correct repo, I can move the issue to y-array if it belongs there.
Can you reproduce the problem with this?

Use type.observeDeep instead of own implementation