Add yjs as shared dependency

[hbcarlos]

Description

I'm trying to create a new shared model for an extension; for that reason, I need to import yjs. The problem comes from yjs that need only one copy of the library, and we have two (one in JupyterLab and another in the extension).

The solution would be to add yjs to resolutions in JupyterLab's package.json.
Another solution would be to add yjs to jupyterlab.sharedPackages in those core extension that uses yjs. Still, yjs is used in core packages, not in extensions (docprovider, docregistry and shared-models), and I think JupyterLab only deduplicates dependencies from extensions (core packages don't have jupyterlab.sharedPackages).

The second solution implicates to modify webpack.config to get shared packages from core packages.

Expected behavior

Import yjs on extensions.

Context

I have an error with yjs coming from:
https://github.com/QuantStack/jupyterlab-drawio/blob/f66b1c571b9b4007a7b08a0bd42c4e3c967cc916/src/model.ts#L167

It looks like there are two instances, one coming from JupyterLab and another from the extension.

Browser Output

9795.87a9ff4f3c3919e683d2.js?v=87a9ff4f3c3919e683d2:1 Uncaught Error: Unexpected content type in insert operation
    at 9795.87a9ff4f3c3919e683d2.js?v=87a9ff4f3c3919e683d2:1
    at Array.forEach ()
    at Vs (9795.87a9ff4f3c3919e683d2.js?v=87a9ff4f3c3919e683d2:1)
    at Ps (9795.87a9ff4f3c3919e683d2.js?v=87a9ff4f3c3919e683d2:1)
    at 9795.87a9ff4f3c3919e683d2.js?v=87a9ff4f3c3919e683d2:1
    at Yn (9795.87a9ff4f3c3919e683d2.js?v=87a9ff4f3c3919e683d2:1)
    at mr.insert (9795.87a9ff4f3c3919e683d2.js?v=87a9ff4f3c3919e683d2:1)
    at new Q (646.3107e1e3e0432c8636f0.js?v=3107e1e3e0432c8636f0:1)
    at Function.create (646.3107e1e3e0432c8636f0.js?v=3107e1e3e0432c8636f0:1)
    at new z (646.3107e1e3e0432c8636f0.js?v=3107e1e3e0432c8636f0:1)

This line returns false, being ydoc an instance coming from JupyterLab and Y.XmlFragment a class imported from Yjs in the extension.

this.ydoc.getXmlFragment('root') instanceof Y.XmlFragment

https://github.com/QuantStack/jupyterlab-drawio/blob/f66b1c571b9b4007a7b08a0bd42c4e3c967cc916/src/model.ts#L166

cc @jtpio @dmonad

[krassowski]

This looks very much like the issue with CodeMirror, which was solved by using a token that provides a "singleton" instance: #10095; would this pattern help here too?

[hbcarlos]

Hey, thanks for the help Michał.

That maybe works. I need to try it out.

[jtpio]

This looks very much like the issue with CodeMirror, which was solved by using a token that provides a "singleton" instance:

Looks like it refers to this plugin?

jupyterlab/packages/codemirror-extension/src/index.ts

Lines 55 to 60 in 8c608df

	/** The CodeMirror singleton. */
	const codemirrorSingleton: JupyterFrontEndPlugin<ICodeMirror> = {
	id: '@jupyterlab/codemirror-extension:codemirror',
	provides: ICodeMirror,
	activate: activateCodeMirror
	};

[jtpio]

The problem comes from yjs that need only one instance, and we have two (one in JupyterLab and another in the extension).

Just to double check: is the issue related to having two instances of Yjs (and does Yjs need to be a singleton on the page?), or two copies of the library (possibly with different versions)?

[hbcarlos]

Sorry, my bad. It's two copies of the library.

The problem is that yjs uses instanceof to check the type of item added https://github.com/yjs/yjs/blob/7bd764fba73fecb8bacd1eb82a4bd7c9e15a33ee/src/types/AbstractType.js#L670
and fails when coming from different libraries.

[jtpio]

Closing as fixed by #10301