@bottom-sheet/react-hooks - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/cjs/index.js

@@ -16,19 +16,32 @@ var $dYZEH$react = require("react");
 function $882b6d93070905b3$var$createStore() {
+    console.debug("createStore");
     const service = (0, $dYZEH$xstate.interpret)((0, $dYZEH$bottomsheetstatemachine.BottomSheetMachine));
-    const matches = (parentStateValue)=>service.initialized ? service.state.matches(parentStateValue) : service.initialState.matches(parentStateValue);
+    let snapshot = service.initialState;
+    // transient is updated more frequently than the snapshot, outside of react render cycles
+    let transient = snapshot;
     return {
         subscribe: (onStoreChange)=>{
-            console.log("subscribe called!");
+            console.debug("store.subscribe");
             service.onTransition((state)=>{
                 // @TODO: flesh out the logic for when to notify react of state changes or not (as state updates can be expensive and we should be transient when possible)
-                if (state.changed) onStoreChange();
+                // @TODO: put updateSnapshot actions in the state machine as declared events
+                // for now just re-render on every change and map out events in userland before abstracting them to the state machine
+                if (state.changed) {
+                    console.groupCollapsed("state.changed");
+                    transient = snapshot = state;
+                    console.log(state.value, state.context);
+                    onStoreChange();
+                    console.groupEnd();
+                } else console.debug("state.changed: false");
             });
+            console.debug("service.start");
             service.start();
-            return ()=>void service.stop();
+            // return () => void service.stop()
+            return ()=>{
+                console.debug("service.stop");
+                service.stop();
+            };
         },
-        getInitialized () {
-            return service.initialized;
-        },
-        getSnapshot: ()=>service.initialized ? service.state : service.initialState,
-        matches: matches,
+        getSnapshot: ()=>snapshot,
+        getTransientSnapshot: ()=>transient,
         dispatch (event) {
@@ -39,4 +52,4 @@ return service.send(event);
 }
-const $882b6d93070905b3$var$store = $882b6d93070905b3$var$createStore();
 function $882b6d93070905b3$export$a93bae334d1de14f() {
+    const [store] = (0, $dYZEH$react.useState)(()=>$882b6d93070905b3$var$createStore());
     /*
@@ -74,3 +87,3 @@ // useState lets us create the store exactly once, which is a guarantee that useMemo doesn't provide
   })
-  // */ const state = (0, $dYZEH$usesyncexternalstoreshim.useSyncExternalStore)($882b6d93070905b3$var$store.subscribe, $882b6d93070905b3$var$store.getSnapshot);
+  // */ const state = (0, $dYZEH$usesyncexternalstoreshim.useSyncExternalStore)(store.subscribe, store.getSnapshot);
     /*
@@ -83,11 +96,9 @@ const [inc, tick] = useState(0)
   // */ return (0, $dYZEH$react.useMemo)(()=>({
-            context: state.context,
-            getSnapshot: $882b6d93070905b3$var$store.getSnapshot,
-            dispatch: $882b6d93070905b3$var$store.dispatch,
-            matches: $882b6d93070905b3$var$store.matches,
-            get initialized () {
-                return $882b6d93070905b3$var$store.getInitialized();
-            }
+            state: state,
+            getTransientSnapshot: store.getTransientSnapshot,
+            dispatch: store.dispatch
         }), [
-        state.context
+        state,
+        store.dispatch,
+        store.getTransientSnapshot
     ]);
@@ -94,0 +105,0 @@ }

dist/dts/index.d.ts

 import { BottomSheetEvent } from "@bottom-sheet/state-machine";
 export function useBottomSheetMachine(): {
-    context: import("@bottom-sheet/state-machine").BottomSheetContext;
-    getSnapshot: () => import("xstate").State<import("@bottom-sheet/state-machine").BottomSheetContext, BottomSheetEvent, any, {
+    state: import("xstate").State<import("@bottom-sheet/state-machine").BottomSheetContext, BottomSheetEvent, any, {
         value: any;
         context: import("@bottom-sheet/state-machine").BottomSheetContext;
     }, import("xstate").ResolveTypegenMeta<import("@bottom-sheet/state-machine/dist/dts/index.typegen").Typegen0, BottomSheetEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;
+    getTransientSnapshot: () => import("xstate").State<import("@bottom-sheet/state-machine").BottomSheetContext, BottomSheetEvent, any, {
+        value: any;
+        context: import("@bottom-sheet/state-machine").BottomSheetContext;
+    }, import("xstate").ResolveTypegenMeta<import("@bottom-sheet/state-machine/dist/dts/index.typegen").Typegen0, BottomSheetEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;
     dispatch: (event: BottomSheetEvent) => import("xstate").State<import("@bottom-sheet/state-machine").BottomSheetContext, BottomSheetEvent, any, {
@@ -12,18 +15,4 @@ value: any;
     }, import("xstate").ResolveTypegenMeta<import("@bottom-sheet/state-machine/dist/dts/index.typegen").Typegen0, BottomSheetEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>>;
-    matches: {
-        <TSV extends "closed" | "open" | "open.initially" | "open.opening" | "open.opening.waiting" | "open.opening.autofocusing" | "open.opening.animating" | "open.resting" | "open.dragging" | "open.resizing" | "open.snapping" | "open.closing" | {
-            open?: "initially" | "opening" | "resting" | "dragging" | "resizing" | "snapping" | "closing" | {
-                opening?: "waiting" | "autofocusing" | "animating";
-            };
-        }>(parentStateValue: TSV): boolean;
-        <TSV_1 extends never>(parentStateValue: TSV_1): this is import("xstate").State<import("@bottom-sheet/state-machine").BottomSheetContext, BottomSheetEvent, any, {
-            value: any;
-            context: import("@bottom-sheet/state-machine").BottomSheetContext;
-        }, import("xstate").ResolveTypegenMeta<import("@bottom-sheet/state-machine/dist/dts/index.typegen").Typegen0, BottomSheetEvent, import("xstate").BaseActionObject, import("xstate").ServiceMap>> & {
-            value: TSV_1;
-        };
-    };
-    readonly initialized: boolean;
 };
 
 //# sourceMappingURL=index.d.ts.map

dist/esm/index.js

@@ -1,2 +0,2 @@
-import {useMemo as $26Zo0$useMemo} from "react";
+import {useState as $26Zo0$useState, useMemo as $26Zo0$useMemo} from "react";
 import {interpret as $26Zo0$interpret} from "xstate";
@@ -11,19 +11,32 @@ import {useSyncExternalStore as $26Zo0$useSyncExternalStore} from "use-sync-external-store/shim";
 function $149c1bd638913645$var$createStore() {
+    console.debug("createStore");
     const service = (0, $26Zo0$interpret)((0, $26Zo0$BottomSheetMachine));
-    const matches = (parentStateValue)=>service.initialized ? service.state.matches(parentStateValue) : service.initialState.matches(parentStateValue);
+    let snapshot = service.initialState;
+    // transient is updated more frequently than the snapshot, outside of react render cycles
+    let transient = snapshot;
     return {
         subscribe: (onStoreChange)=>{
-            console.log("subscribe called!");
+            console.debug("store.subscribe");
             service.onTransition((state)=>{
                 // @TODO: flesh out the logic for when to notify react of state changes or not (as state updates can be expensive and we should be transient when possible)
-                if (state.changed) onStoreChange();
+                // @TODO: put updateSnapshot actions in the state machine as declared events
+                // for now just re-render on every change and map out events in userland before abstracting them to the state machine
+                if (state.changed) {
+                    console.groupCollapsed("state.changed");
+                    transient = snapshot = state;
+                    console.log(state.value, state.context);
+                    onStoreChange();
+                    console.groupEnd();
+                } else console.debug("state.changed: false");
             });
+            console.debug("service.start");
             service.start();
-            return ()=>void service.stop();
+            // return () => void service.stop()
+            return ()=>{
+                console.debug("service.stop");
+                service.stop();
+            };
         },
-        getInitialized () {
-            return service.initialized;
-        },
-        getSnapshot: ()=>service.initialized ? service.state : service.initialState,
-        matches: matches,
+        getSnapshot: ()=>snapshot,
+        getTransientSnapshot: ()=>transient,
         dispatch (event) {
@@ -34,4 +47,4 @@ return service.send(event);
 }
-const $149c1bd638913645$var$store = $149c1bd638913645$var$createStore();
 function $149c1bd638913645$export$a93bae334d1de14f() {
+    const [store] = (0, $26Zo0$useState)(()=>$149c1bd638913645$var$createStore());
     /*
@@ -69,3 +82,3 @@ // useState lets us create the store exactly once, which is a guarantee that useMemo doesn't provide
   })
-  // */ const state = (0, $26Zo0$useSyncExternalStore)($149c1bd638913645$var$store.subscribe, $149c1bd638913645$var$store.getSnapshot);
+  // */ const state = (0, $26Zo0$useSyncExternalStore)(store.subscribe, store.getSnapshot);
     /*
@@ -78,11 +91,9 @@ const [inc, tick] = useState(0)
   // */ return (0, $26Zo0$useMemo)(()=>({
-            context: state.context,
-            getSnapshot: $149c1bd638913645$var$store.getSnapshot,
-            dispatch: $149c1bd638913645$var$store.dispatch,
-            matches: $149c1bd638913645$var$store.matches,
-            get initialized () {
-                return $149c1bd638913645$var$store.getInitialized();
-            }
+            state: state,
+            getTransientSnapshot: store.getTransientSnapshot,
+            dispatch: store.dispatch
         }), [
-        state.context
+        state,
+        store.dispatch,
+        store.getTransientSnapshot
     ]);
@@ -89,0 +100,0 @@ }

package.json

 {
   "name": "@bottom-sheet/react-hooks",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "The hooks that power `@bottom-sheet/react-spring`",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28119

increased by6.77%

Lines of code

203

increased by5.73%

No dependency changes