Added the use of useShallow instead of shallow to construct a single object with multiple state picks (#36)

* Refactored zustand-pick AST to use `useShallow` instead of `shallow`

* Updated tests for zustand-pick as per useShallow use

* Updated zustand-pick documentation to reflect the use of `useShallow` instead of `shallow`.

Author: SumitPanda0

docs/zustand-pick.md

@@ -6,14 +6,13 @@ When we wanted to pick some properties from a zustand store, this is what we
 need to do:
 
 ```js
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 
 const { order, customer } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     order: store[sessionId]?.globals.order,
     customer: store[sessionId]?.globals.customer,
-  }),
-  shallow
+  }))
 );
 ```
 
@@ -30,14 +29,14 @@ const { order, customer } = useGlobalStore.pick([sessionId, "globals"]);
 ```
 
 You might also notice that we don't have the
-`import { shallow } from "zustand/shallow"` statement in this piece of code. We
-don't need that. The plugin will automatically add it for us at the time of
+`import { useShallow } from "zustand/shallow"` statement in this piece of code.
+We don't need that. The plugin will automatically add it for us at the time of
 transpiling.
 
 The plugin detects that `order` and `customer` properties are to be fetched from
 the `store[sessionId].globals` property from `useGlobalStore` and it generates
 code for it. Note that the plugin will automatically add
-`import { shallow } from "zustand/shallow"` for us. We don't need to add it
+`import { useShallow } from "zustand/shallow"` for us. We don't need to add it
 ourselves.
 
 ## Allowed syntaxes
@@ -170,13 +169,12 @@ const { order, customer } = useGlobalStore.pick([sessionId, "globals"]);
 Will be transformed to:
 
 ```js
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { order, customer } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     order: store[sessionId]?.["globals"]?.["order"],
     customer: store[sessionId]?.["globals"]?.["customer"],
-  }),
-  shallow
+  }))
 );
 ```
 

src/plugins/zustand-pick/index.js

@@ -62,21 +62,22 @@ module.exports = function ({ types }) {
         declarator.init = types.callExpression(
           types.identifier(declarator.init.callee.object.name),
           [
-            types.arrowFunctionExpression(
-              [types.identifier("store")],
-              types.objectExpression(
-                declarator.id.properties.map(toObjectProperty)
-              )
-            ),
-            types.identifier("shallow"),
+            types.callExpression(types.identifier("useShallow"), [
+              types.arrowFunctionExpression(
+                [types.identifier("store")],
+                types.objectExpression(
+                  declarator.id.properties.map(toObjectProperty)
+                )
+              ),
+            ]),
           ]
         );
 
         addNamedImport({
           path: astPath,
           types,
           source: "zustand/shallow",
-          importName: "shallow",
+          importName: "useShallow",
         });
       },
       CallExpression(astPath) {

src/tests/zustand-pick/transformations/array-pick/output.js

@@ -1,8 +1,7 @@
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { order, customer } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     order: store["state"]?.[sessionId]?.["current"]?.[data]?.["order"],
     customer: store["state"]?.[sessionId]?.["current"]?.[data]?.["customer"],
-  }),
-  shallow
+  }))
 );

src/tests/zustand-pick/transformations/default-value/output.js

@@ -1,8 +1,7 @@
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { orderId = "#1001", customer = {} } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     orderId: store["orderId"],
     customer: store["customer"],
-  }),
-  shallow
+  }))
 );

src/tests/zustand-pick/transformations/dynamic-declare/output.js

@@ -1,13 +1,11 @@
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { [`customer ${id}`]: customer } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     [`customer ${id}`]: store[sessionId]?.[`customer ${id}`],
-  }),
-  shallow
+  }))
 );
 const { [orderId]: order } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     [orderId]: store[sessionId]?.["orders"]?.[orderId],
-  }),
-  shallow
+  }))
 );

src/tests/zustand-pick/transformations/dynamic-pick/output.js

@@ -1,7 +1,6 @@
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { customer } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     customer: store[sessionId]?.["customer"],
-  }),
-  shallow
+  }))
 );

src/tests/zustand-pick/transformations/empty-pick/output.js

@@ -1,8 +1,7 @@
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { order, customer } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     order: store["order"],
     customer: store["customer"],
-  }),
-  shallow
+  }))
 );

src/tests/zustand-pick/transformations/no-duplicate-import/input.js

@@ -1,2 +1,2 @@
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { order, customer } = useGlobalStore.pick();

src/tests/zustand-pick/transformations/no-duplicate-import/output.js

@@ -1,8 +1,7 @@
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { order, customer } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     order: store["order"],
     customer: store["customer"],
-  }),
-  shallow
+  }))
 );

src/tests/zustand-pick/transformations/string-pick/output.js

@@ -1,9 +1,8 @@
-import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/shallow";
 const { order, customer, address } = useGlobalStore(
-  store => ({
+  useShallow(store => ({
     order: store["state"]?.["order"],
     customer: store["state"]?.["customer"],
     address: store["state"]?.["address"],
-  }),
-  shallow
+  }))
 );