Babel transformer to minimize Zustand boilerplate

[Amaljith-K]

This is how we pick some properties from a nested Zustand store:

import { shallow } from "zustand/shallow";

const { order, customer } = useGlobalStore(
  store => ({
    order: store[sessionId]?.globals.order,
    customer: store[sessionId]?.globals.customer,
  }),
  shallow
);

This involves a lot of boilerplate code just to access two properties from a store containing nested values.

We have built a transformer capable of generating the boilerplate at the time of transpiling (during bundling): https://www.npmjs.com/package/@bigbinary/babel-preset-neeto.

If this plugin is added to your babel configuration, you can rewrite the previous example as:

const { order, customer } = useGlobalStore.pick([sessionId, "globals"]);

The array inside pick() is the path of the nested object to be accessed.

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 transpiling.

The plugin detects that order and customer properties are to be accessed from the store[sessionId].globals property from useGlobalStore and it generates code for it.
It will also add optional chaining (store[sessionId]?.globals) for all the nested properties automatically to make the picks free from null-pointer errors.

You can read more about it here: https://github.com/bigbinary/babel-preset-neeto/blob/main/docs/zustand-pick.md