bigbinary / babel-preset-neeto Goto Github PK

Code quality

• Use eslint, prettier, jsconfig configuration from neeto-commons-frontend. Make sure that lint-staged is correctly configured to cover all files in the package during commit.
• Use zustand for state management. Remove the use of contexts.

Dead code removal

• Remove unused configuration files like webpack config from projects which use rollup: example: neeto-form-frontend
• Remove commons functions. Remove boilerplate code, that is already present in neeto-commons-frontend: example: neeto-form-frontend
• Delete legacy exports & unused code.

Dependency management

• Move dependencies to devDependencies this will speed up package installation time. We don't need dependencies as we are serving bundles. Try to move packages to peerDependencies if the package exists on host project too. Refer: neetoui, neeto-commons-frontend
• Audit & remove unused dependencies.

General enhancements

• Clean up documentation & include exported functions, development & release instructions.
• Mark function call wrappings of exports as PURE. Reference: arrays.js
• Have a mechanism to test changes without depending on a host project and yalc: example: neeto-team-members-frontend
• Have type declaration for all exports: example: neetoui

Building & releasing

• Standardize release process: release on merge. Example: neetoui
• Use rollup for bundling
• Export ESM bundles

Reference: https://github.com/bigbinary/neeto-engineering-web/issues/282#issuecomment-1415911052

Right now, zustand pick operator returns an object containing the picked keys. It is inefficient for picking a single item from the store.

const { setUser } = useUserStore.pick();

import { shallow } from "zustand/shallow";

const { setUser } = useUserStore(
  store => ({ setUser: store.setUser }),
  shallow
);

const { name } = useUserStore.pick("user");

import { shallow } from "zustand/shallow";

const { name } = useUserStore(
  store => ({ name: store.user?.name }),
  shallow
);

const setUser = useUserStore.pickFrom();

const setUser = useUserStore(store => store.setUser);

const name = useUserStore.pickFrom("user");

const name = useUserStore(store => store.user?.name);

@ajmaln _a please assign someone to work on this.

Description:

• Update the regex, used to check the store name, to accept useStore

Currently the following approach causes the following error:

  const { status, error } = useStore.pick();

In the source:

// from this
test(/^use[a-zA-Z0-9]+Store$/)

// to this
test(/^use[a-zA-Z0-9]*Store$/)

cc: @Amaljith-K

Check whether it is feasible to create a babel transformer that will make these transformations:

// from
const { x, y, z} = useSampleStore.pick();
    // to
    import { shallow } from "zustand/shallow";
    const { x, y, z} = useSampleStore(store => ({ x: store.x, y: store.y, z: store.z }), shallow);

// from
const { x, y, z} = useSampleStore.pick("nested");
    // to
    import { shallow } from "zustand/shallow";
    const { x, y, z} = useSampleStore(store => ({ x: store.nested.x, y: store.nested.y, z: store.nested.z }), shallow);

// from
const { x, y, z} = useSampleStore.pick(["nested", "data"]);
    // to
    import { shallow } from "zustand/shallow";
    const { x, y, z} = useSampleStore(store => ({ x: store.nested.data.x, y: store.nested.data.y, z: store.nested.data.z }), shallow);

// from
const isOpen = useSampleStore.prop();
    // to
    const isOpen = useSampleStore(store => store.isOpen);

Below syntax with default value assignment, doesn't seem to be allowed by zustand-pick tranformer currently:

const {
    solution = {},
    packages = null,
  } = useConfigStore.pick();

cc: @Amaljith-K

https://joseph-mathew.neetorecord.com/watch/a61f2797-57ac-4568-85ef-48813168fc53

@labeebklatif _a

cc: @sumanranjanpanda