@pluv/react 0.4.0 → 0.5.1

package/.turbo/turbo-build.log

@@ -1,17 +1,17 @@
 
-> @pluv/react@0.4.0 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.5.1 build /home/runner/work/pluv/pluv/packages/react
 > tsup src/index.ts --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
-CLI tsup v6.5.0
+CLI tsup v6.6.3
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 10.35 KB
-CJS ⚡️ Build success in 126ms
-ESM dist/index.mjs 8.27 KB
-ESM ⚡️ Build success in 149ms
+ESM dist/index.mjs 8.56 KB
+ESM ⚡️ Build success in 119ms
+CJS dist/index.js 10.98 KB
+CJS ⚡️ Build success in 123ms
 DTS Build start
-DTS ⚡️ Build success in 4416ms
+DTS ⚡️ Build success in 6158ms
 DTS dist/index.d.ts 4.37 KB

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @pluv/react
 
+## 0.5.1
+
+### Patch Changes
+
+- 161e00e: fixed links to other pluv packages in readmes
+- f6c0e65: bumped dependencies
+- Updated dependencies [161e00e]
+- Updated dependencies [f6c0e65]
+  - @pluv/client@0.5.1
+  - @pluv/types@0.1.3
+
+## 0.5.0
+
+### Minor Changes
+
+- 327a6ef: renamed y.unstable\_\_object to y.object
+
+### Patch Changes
+
+- 78a6119: Fixed MockedRoom not sending storage updates
+- 8bf62cb: bumped dependencies
+- 7e52685: Bumped dependencies
+- b1cb325: Updated dependencies
+- b4e34bc: chore(deps): update dependency @types/react to v18.0.28
+- ec50c73: fix: fixed mocked room not working
+- 8e97fb2: Updated dependencies
+- Updated dependencies [78a6119]
+- Updated dependencies [8bf62cb]
+- Updated dependencies [7e52685]
+- Updated dependencies [b1cb325]
+- Updated dependencies [327a6ef]
+- Updated dependencies [8e97fb2]
+  - @pluv/client@0.5.0
+  - @pluv/types@0.1.3
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -2,11 +2,11 @@
 > This package is currently in preview and may have breaking changes between versions. Please wait for a `v1.0.0` stable release before using this in production.
 
 <h1 align="center">
-  <br>
-  <img src="https://github.com/pluv-io/pluv/blob/master/assets/pluv-icon-192x192.png?raw=true" alt="Pluv.IO" width="180" style="border-radius:16px">
-  <br>
+  <br />
+  <img src="https://github.com/pluv-io/pluv/blob/master/assets/pluv-icon-192x192.png?raw=true" alt="Pluv.IO" width="180" style="border-radius:16px" />
+  <br />
   Pluv.IO (preview)
-  <br>
+  <br />
 </h1>
 
 <h3 align="center">Multi-platform, E2E type-safe realtime packages</h3>
@@ -19,7 +19,7 @@
   <a href="https://github.com/pluv-io/pluv/blob/master/LICENSE">
     <img alt="GitHub" src="https://img.shields.io/github/license/pluv-io/pluv" alt="License MIT" />
   </a>
-  <img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript">
+  <img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript" />
   <a href="https://commitizen.github.io/cz-cli/">
     <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen friendly" />
   </a>
@@ -32,7 +32,7 @@
 
 ## `@pluv/react`
 
-> [React.js](https://reactjs.org/) bindings for [@pluv/client](https://img.shields.io/npm/v/@pluv/client).
+> [React.js](https://reactjs.org/) bindings for [@pluv/client](https://www.npmjs.com/package/@pluv/client).
 
 ## Installation
 
@@ -95,7 +95,7 @@ export const {
 } = createRoomBundle({
     initialStorage: () => ({
         messages: y.array([
-            y.unstable__object({
+            y.object({
                 message: "Hello World!",
                 name: "johnathan_doe",
             }),

package/dist/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -54,7 +58,7 @@ var useRerender = () => {
 };
 
 // src/internal/hooks/useSyncExternalStoreWithSelector.ts
-var import_with_selector = require("use-sync-external-store/with-selector");
+var import_with_selector = require("use-sync-external-store/with-selector.js");
 
 // src/internal/utils/identity.ts
 var identity = (x) => x;
@@ -68,6 +72,7 @@ var shallowArrayEqual = (a, b) => {
 var import_jsx_runtime = require("react/jsx-runtime");
 var createRoomBundle = (client, options = {}) => {
   const PluvRoomContext = (0, import_react2.createContext)(null);
+  const MockedRoomContext = (0, import_react2.createContext)({ room: null });
   const MockedRoomProvider = (0, import_react3.memo)((props) => {
     const {
       children,
@@ -80,14 +85,11 @@ var createRoomBundle = (client, options = {}) => {
       return new import_client.MockedRoom(_room, {
         events,
         initialPresence,
-        initialStorage,
+        initialStorage: typeof initialStorage === "function" ? initialStorage : options.initialStorage,
         presence: options.presence
       });
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, {
-      value: room,
-      children
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MockedRoomContext.Provider, { value: { room }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, { value: room, children }) });
   });
   MockedRoomProvider.displayName = "MockedRoomProvider";
   const PluvRoomProvider = (0, import_react3.memo)((props) => {
@@ -100,6 +102,7 @@ var createRoomBundle = (client, options = {}) => {
       room: _room
     } = props;
     const rerender = useRerender();
+    const { room: mockedRoom } = (0, import_react3.useContext)(MockedRoomContext);
     const [room] = (0, import_react2.useState)(() => {
       return client.createRoom(_room, {
         debug,
@@ -123,10 +126,7 @@ var createRoomBundle = (client, options = {}) => {
         client.leave(room);
       };
     }, [room]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, {
-      value: room,
-      children
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
   });
   PluvRoomProvider.displayName = "PluvRoomProvider";
   const usePluvRoom = () => (0, import_react3.useContext)(PluvRoomContext);
@@ -299,8 +299,10 @@ var createRoomBundle = (client, options = {}) => {
     return [data, sharedType];
   };
   return {
+    // components
     MockedRoomProvider,
     PluvRoomProvider,
+    // hooks
     usePluvBroadcast,
     usePluvConnection,
     usePluvEvent,
@@ -319,10 +321,7 @@ var createBundle = (client) => {
   const PluvContext = (0, import_react4.createContext)(null);
   const PluvProvider = (0, import_react5.memo)((props) => {
     const { children } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PluvContext.Provider, {
-      value: client,
-      children
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PluvContext.Provider, { value: client, children });
   });
   PluvProvider.displayName = "PluvProvider";
   const usePluvClient = () => (0, import_react5.useContext)(PluvContext);

package/dist/index.mjs

@@ -21,7 +21,7 @@ var useRerender = () => {
 };
 
 // src/internal/hooks/useSyncExternalStoreWithSelector.ts
-import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
 
 // src/internal/utils/identity.ts
 var identity = (x) => x;
@@ -35,6 +35,7 @@ var shallowArrayEqual = (a, b) => {
 import { jsx } from "react/jsx-runtime";
 var createRoomBundle = (client, options = {}) => {
   const PluvRoomContext = createContext(null);
+  const MockedRoomContext = createContext({ room: null });
   const MockedRoomProvider = memo((props) => {
     const {
       children,
@@ -47,14 +48,11 @@ var createRoomBundle = (client, options = {}) => {
       return new MockedRoom(_room, {
         events,
         initialPresence,
-        initialStorage,
+        initialStorage: typeof initialStorage === "function" ? initialStorage : options.initialStorage,
         presence: options.presence
       });
     });
-    return /* @__PURE__ */ jsx(PluvRoomContext.Provider, {
-      value: room,
-      children
-    });
+    return /* @__PURE__ */ jsx(MockedRoomContext.Provider, { value: { room }, children: /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: room, children }) });
   });
   MockedRoomProvider.displayName = "MockedRoomProvider";
   const PluvRoomProvider = memo((props) => {
@@ -67,6 +65,7 @@ var createRoomBundle = (client, options = {}) => {
       room: _room
     } = props;
     const rerender = useRerender();
+    const { room: mockedRoom } = useContext(MockedRoomContext);
     const [room] = useState2(() => {
       return client.createRoom(_room, {
         debug,
@@ -90,10 +89,7 @@ var createRoomBundle = (client, options = {}) => {
         client.leave(room);
       };
     }, [room]);
-    return /* @__PURE__ */ jsx(PluvRoomContext.Provider, {
-      value: room,
-      children
-    });
+    return /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
   });
   PluvRoomProvider.displayName = "PluvRoomProvider";
   const usePluvRoom = () => useContext(PluvRoomContext);
@@ -266,8 +262,10 @@ var createRoomBundle = (client, options = {}) => {
     return [data, sharedType];
   };
   return {
+    // components
     MockedRoomProvider,
     PluvRoomProvider,
+    // hooks
     usePluvBroadcast,
     usePluvConnection,
     usePluvEvent,
@@ -286,10 +284,7 @@ var createBundle = (client) => {
   const PluvContext = createContext2(null);
   const PluvProvider = memo2((props) => {
     const { children } = props;
-    return /* @__PURE__ */ jsx2(PluvContext.Provider, {
-      value: client,
-      children
-    });
+    return /* @__PURE__ */ jsx2(PluvContext.Provider, { value: client, children });
   });
   PluvProvider.displayName = "PluvProvider";
   const usePluvClient = () => useContext2(PluvContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -20,21 +20,21 @@
     "@types/use-sync-external-store": "^0.0.3",
     "fast-deep-equal": "^3.1.3",
     "use-sync-external-store": "^1.2.0",
-    "@pluv/client": "^0.4.0",
-    "@pluv/types": "^0.1.2"
+    "@pluv/client": "^0.5.1",
+    "@pluv/types": "^0.1.3"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
     "yjs": "^13.0.0"
   },
   "devDependencies": {
-    "@types/react": "18.0.27",
+    "@types/react": "18.0.28",
     "react": "18.2.0",
-    "tsup": "^6.5.0",
-    "typescript": "^4.9.4",
-    "yjs": "^13.5.44",
-    "@pluv/tsconfig": "^0.1.2",
-    "eslint-config-pluv": "^0.1.3"
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5",
+    "yjs": "^13.5.50",
+    "@pluv/tsconfig": "^0.1.3",
+    "eslint-config-pluv": "^0.1.5"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createRoomBundle.tsx

@@ -145,6 +145,10 @@ export const createRoomBundle = <
         AbstractRoom<TIO, TPresence, TStorage>
     >(null as any);
 
+    const MockedRoomContext = createContext<{
+        room: AbstractRoom<TIO, TPresence, TStorage> | null;
+    }>({ room: null });
+
     const MockedRoomProvider = memo<
         MockedRoomProviderProps<TIO, TPresence, TStorage>
     >((props) => {
@@ -160,15 +164,20 @@ export const createRoomBundle = <
             return new MockedRoom<TIO, TPresence, TStorage>(_room, {
                 events,
                 initialPresence,
-                initialStorage,
+                initialStorage:
+                    typeof initialStorage === "function"
+                        ? initialStorage
+                        : options.initialStorage,
                 presence: options.presence,
             });
         });
 
         return (
-            <PluvRoomContext.Provider value={room}>
-                {children}
-            </PluvRoomContext.Provider>
+            <MockedRoomContext.Provider value={{ room }}>
+                <PluvRoomContext.Provider value={room}>
+                    {children}
+                </PluvRoomContext.Provider>
+            </MockedRoomContext.Provider>
         );
     });
 
@@ -187,6 +196,7 @@ export const createRoomBundle = <
         } = props;
 
         const rerender = useRerender();
+        const { room: mockedRoom } = useContext(MockedRoomContext);
 
         const [room] = useState<PluvRoom<TIO, TPresence, TStorage>>(() => {
             return client.createRoom<TPresence, TStorage>(_room, {
@@ -220,7 +230,7 @@ export const createRoomBundle = <
         }, [room]);
 
         return (
-            <PluvRoomContext.Provider value={room}>
+            <PluvRoomContext.Provider value={mockedRoom ?? room}>
                 {children}
             </PluvRoomContext.Provider>
         );

package/src/internal/hooks/useSyncExternalStore.ts

@@ -5,10 +5,11 @@ export const useSyncExternalStore = <TSnapshot extends unknown>(
     subscribe: (onStoreChange: () => void) => () => void,
     getSnapshot: () => TSnapshot,
     getServerSnapshot: undefined | null | (() => TSnapshot)
-) =>
-    useSyncExternalStoreWithSelector(
+) => {
+    return useSyncExternalStoreWithSelector(
         subscribe,
         getSnapshot,
         getServerSnapshot,
         identity
     );
+};

package/src/internal/hooks/useSyncExternalStoreWithSelector.ts

@@ -1 +1 @@
-export { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
+export { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";