xoidlabs / xoid Goto Github PK

First of all, thank you for the library with it's simple API, super awesome work!

How did this happen?

It happens when the consuming project uses pnpm & tries to generate .d.ts files via either tsup(uses tsc under the hood) or tsc.

Example

import { create } from 'xoid/esm'

const atom = create({ one: true })

const atom2 = create({ two: true })

Workaround

The workaround is to define type, at least once per file where create is used.

import { create, Atom } from 'xoid/esm'

const atom: Atom<{ one: boolean }> = create({ one: true })

const atom2 = create({ two: true })

IMO, this only happens on libraries with some sort of shared module structure, xoid/etc.... So I'm not sure on which one's end, tsc, pnpm or xoid. Another similar issue is with nuxt's sub-modules.

Might also related to this tsc issue: #42873

Great library, I'm surprised it's so unknown because it's really good. Thanks for sharing it!

I was looking through the code and saw you're taking a different approach to creating stores in your /tree dir. I assume this is the bit inspired by MST. I tried messing around with this but didn't get very far.

How do you intend for the experimental tree stores to work exactly? It's really intriguing. Keen to learn more!

I was wondering if you might consider extending the useAtom hook to take a focusSelector: string | function as an optional second parameter. It might provide a familiar syntax for those migrating away from useState, and reduce down on the number of variables you need to name and maintain. As an example, this is a simple wrapper illustrating the point...

// Hook
const useAtomWrapper = (atom, selector) => {
  const result = selector ? atom.focus(selector) : atom;
  return [ useAtom(result), result.update ];
}

// Usage
const Component = () => {
  const $state = useSetup(() => create({ count: 0, theme: 'dark' }));

  const [ count, setCount ] = useAtomWrapper($state, 'count');
  const [ theme, setTheme ] = useAtomWrapper($state, s => s.theme);

  return <button className={theme} onClick={() => setCount(v => v+1)}>{count}</button>;
}

Without the above convenience wrapper, I found myself needing to produce a lot of similarly named intermediate Atoms and it wasn't always instinctive which to read from and which to update with unless you are really careful with your naming. For example:

const Component = () => {
  const $state = useSetup(() => create({ count: 0, theme: 'dark' }));

  const $count = $state.focus('count');
  const $theme = $state.focus(s => s.theme);

  const count = useAtom($count);
  const theme = useAtom($theme);

  return <button className={theme} onClick={() => $count.update(v => v+1)}>{count}</button>;
}

Would love to know your thoughts on this.

Cheers,
Jon

Great docs, the library looks great!

I'm starting with something simple, and was hoping to provide a simple types definition, such as:

const table = create({legs: 4, painted: false}: {legs: number, painted: boolean})

But it seems that's not possible. Is there another simple syntax, or would I need to follow what you have in the examples?

Hi @onurkerimov, first of all thanks for xoid :) enjoying its simplicity

I've noticed that this code stopped propagating react updates

import { create, use } from "xoid";
import { useAtom } from "@xoid/react";

const state = create({ key: null });

const slice = use(state, (s) => s.key);

const useSlice = () => useAtom(slice);

// passing identity selector fixes it 
const useSliceWorks = () => useAtom(slice, s => s);

const useSliceWorksToo = () => useAtom(state, (s) => s.key);

// this is not triggering re-renders of useSlice inside React ctx
// but useSliceWorks is working
const setSlice = (value) => slice(value);

so using useSlice+setSlice is not causing re-renders anymore, but useSliceWorks is correctly updated

First of all, great work with the API! I'm exploring options for implementing an state management library in a low-code no-code editor we are working on, and I have so far xoid as the first option, as it checks a lot of the requirements we have.

One of those requirements though, is that it will be reused across multiple frontend clients, built using any number of frameworks. Seems like the library is supposed to be agnostic, but I still see that there's a dependency on react and react-dom in the package.json, why is this needed? Am I missing something?
If I'm just planning on using the core, would this package still require react? Thanks in advance.

Uncaught TypeError: atom.update is not a function