Feat/solid bindings

jest.config.js

@@ -6,5 +6,8 @@ module.exports = {
   moduleNameMapper: {
     "@syncedstore/core": "<rootDir>/packages/core/src",
     "@syncedstore/yjs-reactive-bindings": "<rootDir>/packages/yjs-reactive-bindings/src",
+    "solid-js/web": "<rootDir>/node_modules/solid-js/web/dist/web.cjs",
+    "solid-js/store": "<rootDir>/node_modules/solid-js/store/dist/store.cjs",
+    "solid-js": "<rootDir>/node_modules/solid-js/dist/solid.cjs",
   },
 };

packages/core/package.json

@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@vue/reactivity": "^3.2.21",
+    "solid-js": "^1.6.10",
     "microbundle": "^0.13.0",
     "rimraf": "^3.0.2"
   },

packages/core/src/array.ts

@@ -207,6 +207,17 @@ export function crdtArray<T>(initializer: T[], arr = new Y.Array<T>()) {
       if (p === "length") {
         return arr.length;
       }
+
+      // proxy-trap to enable an idiomatic use of arrays and objects in Solid's Flow-component (without spreading)
+      // if (typeof p === "symbol" && p !== $reactiveproxy && p !== $reactive && p !== $skipreactive) {
+      //   let ic = receiver[$reactiveproxy]?.implicitObserver;
+      //   // (arr as any)._implicitObserver = ic;
+      //   return arr.map((item) => {
+      //     const ret = parseYjsReturnValue(item, ic);
+      //     return ret;
+      //   });
+      // }
+
       // forward to arrayimplementation
       const ret = Reflect.get(target, p, receiver);
       return ret;

packages/core/src/index.ts

@@ -11,7 +11,7 @@ import {
 } from "yjs";
 import { crdtDoc, DocTypeDescription } from "./doc";
 
-export { enableMobxBindings, enableVueBindings } from "@syncedstore/yjs-reactive-bindings";
+export { enableMobxBindings, enableVueBindings, enableSolidBindings } from "@syncedstore/yjs-reactive-bindings";
 export { Box, boxed } from "./boxed";
 export * from "./util";
 /**

packages/core/test/solid.test.ts

@@ -0,0 +1,62 @@
+import { createEffect, createRoot } from "solid-js";
+import * as solid from "solid-js/store";
+import { createMutable } from "solid-js/store";
+
+import { enableSolidBindings, syncedStore, Y } from "../src";
+
+describe("solid", () => {
+  type StoreType = {
+    arr: number[];
+    object: {
+      nested?: number;
+    };
+    todosNotBoxed: { text: string; completed: boolean }[];
+  };
+
+  let fnSpy1: jest.Mock<void, []>;
+  let fnSpy2: jest.Mock<void, []>;
+  let implicitStore1: StoreType;
+  let doc1: Y.Doc;
+  let doc2: Y.Doc;
+  let store: StoreType;
+
+  beforeEach(() => {
+    enableSolidBindings(solid);
+    fnSpy1 = jest.fn(() => {});
+    fnSpy2 = jest.fn(() => {});
+
+    doc1 = new Y.Doc();
+
+    store = syncedStore(
+      {
+        arr: [],
+        object: {} as { nested?: number },
+        todos: [],
+        todosNotBoxed: [],
+        xml: "xml" as "xml",
+      },
+      doc1
+    );
+  });
+
+  it("indexOf works on store", async () => {
+    let renderCount = 0;
+
+    createRoot(() => {
+      createEffect(() => {
+        renderCount++;
+        // should first log undefined then 'text'
+        console.log(store.todosNotBoxed[0]);
+      });
+      queueMicrotask(() => {
+        store.todosNotBoxed.push({
+          text: "text",
+          completed: false,
+        });
+      });
+    });
+
+    await new Promise<void>((resolve) => setTimeout(() => resolve(), 500));
+    expect(renderCount).toBe(2);
+  });
+});

packages/yjs-reactive-bindings/src/index.ts

@@ -105,4 +105,9 @@ export function makeYDocObservable(doc: Y.Doc) {
   });
 }
 
-export { enableMobxBindings, enableReactiveBindings, enableVueBindings } from "./observableProvider";
+export {
+  enableMobxBindings,
+  enableReactiveBindings,
+  enableVueBindings,
+  enableSolidBindings,
+} from "./observableProvider";

packages/yjs-reactive-bindings/src/observableProvider.ts

@@ -73,6 +73,31 @@ export function enableVueBindings(vue: any) {
   customReaction = undefined;
 }
 
+/**
+ * Enable Solid integration
+ *
+ * @param solid An instance of Solid, e.g. import * as solid from "solid/store";
+ */
+export function enableSolidBindings(solid: any) {
+  customCreateAtom = function (name: any, onBecomeObserved: any) {
+    let id = 0;
+    const data = solid.createMutable({ data: id });
+    const atom = {
+      reportObserved() {
+        return data.data as any as boolean;
+      },
+      reportChanged() {
+        data.data = ++id;
+      },
+    };
+    if (onBecomeObserved) {
+      onBecomeObserved();
+    }
+    return atom;
+  };
+  customReaction = undefined;
+}
+
 export function enableReactiveBindings(reactive: any) {
   customCreateAtom = function (name, onBecomeObserved, onBecomeUnobserved) {
     // TMP