npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@superviz/yjs

v1.0.2

Published

SuperViz provides powerful SDKs and APIs that enable developers to easily integrate real-time features into web applications. Our platform accelerates development across various industries with robust, scalable infrastructure and a low-code approach.

Downloads

990

Readme

SuperViz Yjs Provider

SuperViz provides powerful SDKs and APIs that enable developers to easily integrate real-time features into web applications. Our platform accelerates development across various industries with robust, scalable infrastructure and a low-code approach.

The SuperVizYjsProvider component enables real-time collaboration and synchronization using Yjs, a library for building collaborative applications. It supports offline editing, real-time updates, and awareness for all participants within a shared room.

Overview

The SuperVizYjsProvider component is a powerful tool for enabling real-time collaboration within shared rooms using Yjs, a state-of-the-art Conflict-free Replicated Data Type (CRDT) implementation. Yjs is a robust library designed for building collaborative applications that can handle concurrent edits seamlessly.

By leveraging Yjs's CRDT technology, the SuperVizYjsProvider ensures that all participants in a room can edit shared content simultaneously without conflicts. This component facilitates:

  1. Offline editing: Users can make changes even when disconnected, with automatic synchronization upon reconnection.
  2. Real-time updates: All participants see changes instantly as they occur.
  3. Conflict resolution: The CRDT algorithm automatically merges concurrent edits without data loss.
  4. Awareness: Participants can see each other's presence and actions within the shared document.

This integration brings the power of Yjs's distributed data structures to SuperViz, enabling highly responsive and reliable collaborative experiences across various types of content, from text documents to complex data structures.

Quickstart

To add the SuperVizYjsProvider component to your application, follow these steps:

JavaScript

  1. Before we start: Initialize a room with a defined name and ID for the participant and the group.

  2. Install the package:

    npm install --save @superviz/yjs yjs
  3. Import the necessary components:

    import { SuperVizYjsProvider } from "@superviz/yjs";
    import * as Y from "yjs";
  4. Initialize Yjs document:

    const doc = new Y.Doc();
  5. Add the SuperVizYjsProvider:

    const provider = new SuperVizYjsProvider(doc);
    room.addComponent(provider);
  6. Configure SuperVizYjsProvider (Optional):

    const provider = new SuperVizYjsProvider(doc, { awareness: false });
    room.addComponent(provider);

React

  1. Before we start: Initialize a room and an editor such as Monaco or Quill.

  2. Install the package:

    npm install --save @superviz/react-sdk yjs
  3. Import and add the YjsProvider component:

    import { YjsProvider } from "@superviz/react-sdk";
    import * as Y from "yjs";
    import { useEffect, useState } from "react";
    
    function CollaborativeEditor() {
      const [doc, setDoc] = useState(null);
    
      useEffect(() => {
        const yDoc = new Y.Doc();
        setDoc(yDoc);
      }, []);
    
      if (!doc) return null;
    
      return (
        <YjsProvider doc={doc}>
          {/* Your collaborative editor component */}
        </YjsProvider>
      );
    }
    
    export default CollaborativeEditor;
  4. Configure YjsProvider (Optional):

    <YjsProvider doc={doc} awareness={false}>
      {/* Your collaborative editor component */}
    </YjsProvider>
  5. Using the useYjsProvider Hook:

    import { useYjsProvider } from "@superviz/react-sdk";
    
    function CollaborativeComponent() {
      const { 
        setLocalState, 
        setLocalStateField, 
        getStates, 
        getLocalState, 
        provider 
      } = useYjsProvider();
    
      // Use these methods as needed
    }
  6. Handling Events:

    <YjsProvider
      doc={doc}
      onMount={() => console.log("Component mounted")}
      onUnmount={() => console.log("Component unmounted")}
      onConnect={() => console.log("Connected to room")}
      onDisconnect={() => console.log("Disconnected from room")}
      onMessage={({ message, data }) => console.log("Received message", message, data)}
      onOutgoingMessage={({ message, data }) => console.log("Sending message", message, data)}
      onSync={() => console.log("Synced with latest updates")}
      onDestroy={() => console.log("Component destroyed")}
      onStateChange={(state) => console.log("Provider state changed", state)}
    >
      {/* Your collaborative editor component */}
    </YjsProvider>

For more information, please refer to the Yjs Provider API Reference.

Contributing

To report a new bug, request a new feature, or if you need any help, you can file an issue on GitHub. We have a few templates to help you out.

License

SuperViz Yjs Provider is licensed under the BSD 2-Clause License.