chem-rx 0.0.1 → 0.0.2

package/README.md

@@ -1,6 +1,6 @@
 # chem-rx
 
-`chem-rx` wraps`rx.js` to provide a state management solution focused on
+`chem-rx` wraps `rxjs` to provide a state management solution focused on
 simplicity. Useable with or without React!
 
 ## Atom
@@ -14,10 +14,10 @@ Atoms are state containers that take any value - object, array, or primitive.
 ```
 import { Atom } from 'chem-rx'
 
-const numberAtom: BaseAtom = Atom(0)
-const stringAtom: BaseAtom = Atom('hello')
-const arrayAtom: ArrayAtom = Atom(['hello', 'world'])
-const objectAtom: ObjectAtom = Atom({ 'hello': 'world', 'world': 'hello' })
+const number$: BaseAtom = Atom(0)
+const string$: BaseAtom = Atom('hello')
+const array$: ArrayAtom = Atom(['hello', 'world'])
+const object$: ObjectAtom = Atom({ 'hello': 'world', 'world': 'hello' })
 ```
 
 ### Getting & setting values
@@ -26,55 +26,293 @@ const objectAtom: ObjectAtom = Atom({ 'hello': 'world', 'world': 'hello' })
 `ObjectAtom` depending on the input.
 
 ```
-/*
- * BaseAtom
- */
-numberAtom.set(2)
-numberAtom.value()
+// Base Atom
+number$.set(2)
+number$.value()
 // 2
 
-/*
- * ArrayAtom
- */
-arrayAtom.push('!')
-arrayAtom.value()
+// ArrayAtom
+array$.push('!')
+array$.value()
 // ['hello', 'world', '!']
-arrayAtom.get(1)
+array$.get(1)
 // 'world'
 
-/*
- * ObjectAtom
- */
-objectAtom.set('world', 'hi')
-objectAtom.value()
+// ObjectAtom
+object$.set('world', 'hi')
+object$.value()
 // {'hello': 'world', 'world': 'hi'}
 
-objectAtom.set('sup', 'earth')
+object$.set('sup', 'earth')
 // {'hello': 'world', 'world': 'hi', 'sup': 'earth'}
 
-objectAtom.get('world')
+object$.get('world')
 // 'hi'
 ```
 
-### Transforming Atoms
+### Selecting Atoms
+
+You can select Object and Array atoms to return new Atoms that wrap the values
+at that key. This can be useful for working with different parts of nested Array
+and Object atoms.
+
+```
+const nestedData = Atom({
+  stacy: {
+    nickname: "stace",
+    education: {
+      school: "Penn",
+      graduation: 2014,
+    },
+  },
+});
+
+const stacy = nestedData.select("stacy");
+console.log(stacy.get('nickname'))
+// 'stace'
+
+const stacySchool = nestedData.select("stacy").select("education");
+console.log(stacySchool.get('school'))
+// 'Penn'
+```
+
+### Derived Atoms (read-only)
+
+You can derive new Atoms from any existing atoms. Any time the original atoms
+change, your derived atoms will automatically update with new values!
+
+```
+const atom$ = Atom(3);
+
+// square it
+const squared$ = atom$.derive((x) => x * x);
+
+// "9"
+console.log(squared$.value())
+
+// Update the original value
+atom$.set(4)
+
+// "16"
+console.log(squared$.value())
+```
+
+Every derived atom is **read-only**. This prevents you from overriding the
+derived output value, since it is automatically derived from another input!
+
+```
+// ERR: Property 'set' does not exist on type ReadOnlyAtom
+squared$.set(2)
+```
 
-### Composing Atoms & ReadOnlyAtoms
+You can optionally enforce `readOnly` on an atom at creation time if needed
+
+```
+const atom$ = Atom(3, true);
+
+// ERR: Property 'set' does not exist on type ReadOnlyAtom
+atom$.set(2)
+```
+
+### Combining Atoms
+
+Multiple atoms can also be **combined** to create brand new atoms!
+
+Here's an example of joining a set of normalized data models
+
+```
+const pets$ = Atom<{ [name: string]: { type: "dog" | "cat"; age: number } }>({
+  spot: {name: 'spot', type: "dog", age: 5 },
+  tabby: {name: 'tabby', type: "cat", age: 12 },
+});
+
+const people$ = Atom<{ [name: string]: { pets: string[] } }>({
+  mary: { pets: ["spot"] },
+  cam: { pets: ["tabby"] },
+});
+
+const mary$ = Atom.combine(pets$, people$.select("mary")).derive(
+  ([pets, mary]) => {
+    return {
+      ...mary,
+      pets: mary.pets.map((petName) => pets[petName]),
+    };
+  }
+);
+
+console.log(mary$.select('pets').value())
+/*
+ * [{
+ *   name: "spot",
+ *   type: "dog",
+ *   age: 5,
+ * }]
+ */
+```
 
 ### Subscribing to updates
 
+Atoms emit values each time they're updated. You can subscribe callbacks to them
+to act on updates
+
+```
+const atom$ = Atom(3);
+
+const subscription = atom$.subscribe(val => {
+    console.log("Received value: ", val)
+})
+
+atom$.set(4)
+// "Received value: 4"
+
+// Unsubscribe to clean up
+subscription.unsubscribe();
+```
+
+### Signals
+
+Sometimes, all you want is something to ping you when there's an update. Signals
+are stateless transceivers for signaling updates.
+
+```
+const signal$ = new Signal();
+
+const subscription = signal$.subscribe(() => {
+    console.log("PONG")
+})
+
+signal$.ping()
+// "PONG"
+
+// Unsubscribe to clean up
+subscription.unsubscribe();
+```
+
+Signals can also send values if needed.
+
+```
+const signal$ = new Signal();
+
+const subscription = signal$.subscribe((value) => {
+    console.log("PONGED: ", value)
+})
+
+signal$.ping("hello")
+// "PONGED: hello"
+
+// Unsubscribe to clean up
+subscription.unsubscribe();
+```
+
 ## Use with React
 
 ### useAtom
 
+`useAtom` automatically updates with new values in your react components.
+
+If you want to update your atoms, you can simply call the same `set`
+(Base/ObjectAtom) or `push` (ArrayAtom) methods you would typically use outside
+of react.
+
+```
+import { Atom, useAtom } from 'chem-rx'
+
+const count$ = Atom(0)
+
+function Counter() {
+  const count = useAtom(count$)
+  return (
+    <h1>
+      {count}
+        <button onClick={() => count$.set(count$.value() + 1)}>one up</button> ...
+```
+
+Remember that you can mix and match for any of your needs
+
+### useSelectAtom
+
+With `useSelect` can select a specific key from an atom, and still have it live
+update in your react component.
+
+```
+import { Atom, useAtom } from 'chem-rx'
+
+const count$ = Atom({ inner: 0 })
+
+function Counter() {
+  const count = useSelectAtom(count$, 'inner')
+  return (
+    <h1>
+      {count}
+        <button onClick={() => count$.set('inner', count + 2)}>one up</button> ...
+```
+
 ### hydrateAtoms
 
-## Use with rx.js
+With SSR, your atoms will likely need to be properly hydrated to prevent
+server/client mismatches. You can use `hydrateAtoms` as a simple solution for
+seeding your client-side Atoms with the correct data.
+
+```
+import { Atom, useAtom, hydrateAtoms } from 'chem-rx'
+
+const count$ = Atom(0)
+const CounterPage = ({ countFromServer }) => {
+  hydrateAtoms([[count$, countFromServer]])
+  const count = useAtom(count$)
+  // count would be the value of `countFromServer`, not 0.
+}
+```
+
+## Suggested Usage
+
+There are several suggested "patterns" when using Atoms:
+
+1. Suffix all atoms with `$` (for readability).
+2. Keep all data management **outside** of your views (e.g, React)
+3. Avoid using `set` and `push` directly from your client components. Instead,
+   create helper functions (actions)
+4. Name your helper actions as `<atomName>$<actionName>`, to easily see what
+   atoms are involved.
+5. Name your derived atoms as `<baseAtom>_<derivedValue>$` to easily see which
+   atoms it derives from.
+
+## Common Issues
+
+Here are some common issues you might run into when starting out.
+
+1. Keep your atoms in separate files to prevent circular dependencies.
+   1. I typically create a new file for every action, so I can easily see the
+      API surface at a glance
+
+## Advanced Usage with `rxjs`
+
+Behind the scenes, `chem-rx` uses
+[rxjs Observables](https://rxjs.dev/guide/operators) to enable reactivity.
+`Atom` abstracts away the majority of Rx intentionally, to extract the most
+common patterns used when managing front-end data.
+
+If you're coming in with prior experience and are seeking more complex operators
+enabled by Rx, you're in luck, because every Atom is simply a wrapper around a
+`BehaviorSubject`!
+
+You can use any rxjs operations you want with `Atom.pipe`, which wraps
+`Observable.pipe` to return an Atom.
+
+```
+import { map } from "rxjs";
+
+const atom$ = Atom(3);
+
+// Replace `map` with any operators from rxjs
+const squared$: Atom<number> = atom.pipe(map((x) => x * x));
+
+// "9"
+console.log(squared$.value());
+```
 
 ## Why...?
 
 This library spawned out of a love for the flexibility and expressiveness of
-[rx.js](https://github.com/ReactiveX/rxjs) Observables, and the simplicity of
+[rxjs](https://github.com/ReactiveX/rxjs) Observables, and the simplicity of
 atomic libraries like [jotai](https://github.com/pmndrs/jotai).
-
-Its primary focus is on ease of use and code cleanliness, and is my go-to
-library for all client-side state management

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chem-rx",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "react state primitives powered by rx.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/Atom.ts

@@ -1,13 +1,14 @@
 import {
   BehaviorSubject,
   combineLatest,
+  distinctUntilKeyChanged,
   isObservable,
   map,
   Observable,
   OperatorFunction,
   Subscription,
 } from "rxjs";
-import { OverloadedParameters, OverloadedReturnType } from "./types";
+import { OverloadedParameters } from "./types";
 
 export type AtomTuple<T> = {
   [K in keyof T]: ReadOnlyAtom<T[K]>;
@@ -112,7 +113,6 @@ export class ReadOnlyAtom<T> {
     op9: OperatorFunction<H, I>,
     ...operations: OperatorFunction<any, any>[]
   ): ReadOnlyAtom<unknown>;
-
   pipe(
     ...operations: OverloadedParameters<Observable<T>["pipe"]>
   ): ReadOnlyAtom<any> {
@@ -123,8 +123,8 @@ export class ReadOnlyAtom<T> {
     return newAtom;
   }
 
-  transform(transformFn: (value: T, index: number) => any): ReadOnlyAtom<any> {
-    return this.pipe(map(transformFn));
+  derive<A>(deriveFn: (value: T, index: number) => A): ReadOnlyAtom<A> {
+    return this.pipe(map(deriveFn));
   }
 
   subscribe(...params: Parameters<BehaviorSubject<T>["subscribe"]>) {
@@ -139,6 +139,45 @@ export class ReadOnlyAtom<T> {
   dispose() {
     this._fromObservableSubscription?.unsubscribe();
   }
+
+  get(
+    key: T extends (infer W)[]
+      ? number
+      : T extends { [key in keyof T]: infer W }
+      ? keyof T
+      : undefined
+  ): T extends (infer W)[]
+    ? T[number]
+    : T extends { [key in keyof T]: infer W }
+    ? T[keyof T]
+    : undefined {
+    const val = this.value() as T;
+    // @ts-ignore Can't figure out this type so i'm REALLY cheating
+    return val[key] as T extends (infer W)[]
+      ? T[number]
+      : T extends { [key in keyof T]: infer W }
+      ? T[keyof T]
+      : undefined;
+  }
+
+  select<K extends keyof T>(
+    key: K
+  ): T[K] extends (infer W)[]
+    ? ArrayAtom<W>
+    : T[K] extends { [key: string | symbol]: infer W }
+    ? ObjectAtom<T[K]>
+    : BaseAtom<T[K]> {
+    const newObs = this._behavior$.pipe(
+      distinctUntilKeyChanged(key),
+      map((k) => k?.[key])
+    );
+    // Can't get typescript to recognize the types here so I'm cheating
+    return Atom(newObs) as unknown as T[K] extends (infer W)[]
+      ? ArrayAtom<W>
+      : T[K] extends { [key: string | symbol]: infer W }
+      ? ObjectAtom<T[K]>
+      : BaseAtom<T[K]>;
+  }
 }
 
 export class BaseAtom<T> extends ReadOnlyAtom<T> {
@@ -148,17 +187,51 @@ export class BaseAtom<T> extends ReadOnlyAtom<T> {
 }
 
 export class ArrayAtom<T> extends ReadOnlyAtom<T[]> {
+  constructor(initialValue: T[]) {
+    super(initialValue);
+  }
+
   push(nextVal: T) {
     this._behavior$.next([...this._behavior$.getValue(), nextVal]);
   }
-  get(idx: number) {
-    return this.value()[idx];
-  }
 }
+//
+// export class ReadOnlyObjectAtom<
+//   T extends {
+//     [key in K]: V;
+//   },
+//   K extends string | number | symbol = keyof T,
+//   V = T[K]
+// > extends ReadOnlyAtom<T> {
+//   get(nextKey: K) {
+//     return this.value()[nextKey];
+//   }
+//
+//   select<K extends keyof T>(
+//     key: K
+//   ): T[K] extends (infer W)[]
+//     ? ArrayAtom<W>
+//     : T[K] extends { [key in infer L]?: infer W }
+//     ? ObjectAtom<T[K]>
+//     : BaseAtom<T> {
+//     const newObs = this._behavior$.pipe(
+//       distinctUntilKeyChanged(key),
+//       map((k) => k?.[key])
+//     );
+//     // Can't get typescript to recognize the types here so I'm cheating
+//     return Atom(newObs) as unknown as T[K] extends (infer W)[]
+//       ? ArrayAtom<W>
+//       : T[K] extends { [key in infer L]?: infer W }
+//       ? ObjectAtom<T[K]>
+//       : BaseAtom<T>;
+//   }
+// }
 
 export class ObjectAtom<
-  T extends Record<K, V>,
-  K extends keyof T = keyof T,
+  T extends {
+    [key in K]: V;
+  },
+  K extends string | number | symbol = keyof T,
   V = T[K]
 > extends ReadOnlyAtom<T> {
   set(nextKey: K, nextValue: V) {
@@ -167,21 +240,50 @@ export class ObjectAtom<
       [nextKey]: nextValue,
     });
   }
-  get(nextKey: K) {
-    return this.value()[nextKey];
-  }
 }
 
-export function Atom<T>(value: T[]): ArrayAtom<T>;
-export function Atom<T extends object, K extends keyof T = keyof T>(
-  _value: T
-): ObjectAtom<T>;
-export function Atom<T>(_value: Observable<T> | T): BaseAtom<T>;
+// catch-all for developers
+// export type AnyAtom<T> = BaseAtom<T> | ArrayAtom<T> | ObjectAtom<T>;
+
+// observable type (primitive)
 export function Atom<T>(
-  _value: T | Observable<T>
-): BaseAtom<T> | ArrayAtom<T> | ObjectAtom<T> {
+  value: T extends { [key: string]: infer V } | any[] ? never : Observable<T>
+): BaseAtom<T>;
+
+// observable<array> type
+export function Atom<T extends any[]>(
+  value: Observable<T>
+): ArrayAtom<T[number]>;
+
+// observable<object> type
+export function Atom<T>(
+  value: T extends {
+    [key in keyof T]: infer V;
+  }
+    ? Observable<T>
+    : never
+): ObjectAtom<T>;
+
+// array type
+export function Atom<T extends any[]>(value: T): ArrayAtom<T[number]>;
+
+// object type
+export function Atom<T extends { [key: string]: T[keyof T] }>(
+  value: T
+): ObjectAtom<T>;
+
+// primitive type
+export function Atom<T>(value: T): BaseAtom<T>;
+
+// readonly type
+export function Atom<T>(value: T, readOnly?: boolean): ReadOnlyAtom<T>;
+
+// function definition
+export function Atom<T>(_value: T, readOnly: boolean = false) {
   let atom;
-  if (Array.isArray(_value)) {
+  if (readOnly) {
+    atom = new ReadOnlyAtom(_value);
+  } else if (Array.isArray(_value)) {
     atom = new ArrayAtom<T>(_value); // For arrays
   } else if (typeof _value === "object" && _value !== null) {
     atom = new ObjectAtom<T>(_value); // For objects

package/src/Signal.ts

@@ -1,13 +1,6 @@
-import {
-  Subject,
-  isObservable,
-  Observable,
-  OperatorFunction,
-  Subscription,
-} from "rxjs";
-import { OverloadedParameters, OverloadedReturnType } from "./types";
+import { Subject } from "rxjs";
 
-export class Signal<T = void> {
+export class BaseSignal<T = any> {
   _subject$: Subject<T>;
 
   constructor() {
@@ -22,9 +15,6 @@ export class Signal<T = void> {
   subscribe(...params: Parameters<Subject<T>["subscribe"]>) {
     return this._subject$.subscribe(...params);
   }
-
-  // not needed?
-  dispose() {
-    this._subject$.unsubscribe();
-  }
 }
+
+export function Signal<T>() {}

package/src/index.ts

@@ -1,4 +1,5 @@
 export { Atom } from "./Atom";
 export { useAtom } from "./useAtom";
+export { useSelectAtom } from "./useSelectAtom";
 export { hydrateAtoms } from "./hydrateAtoms";
 export { Signal } from "./Signal";

package/src/useAtom.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
-import { Atom } from "./Atom";
+import { ReadOnlyAtom } from "./Atom";
 
-export function useAtom<T>(atom: Atom<T>): T {
-  const [value, setValue] = useState<T>(atom.getValue());
+export function useAtom<T>(atom: ReadOnlyAtom<T>): T {
+  const [value, setValue] = useState<T>(atom.value());
 
   useEffect(() => {
     const subscription = atom.subscribe((val) => {

package/src/useSelectAtom.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { ObjectAtom } from "./Atom";
+
+export function useSelectAtom<
+  T extends {
+    [key in K]: V;
+  },
+  K extends string | number | symbol = keyof T,
+  V = T[K]
+>(atom: ObjectAtom<T>, key: K): T[K] {
+  const [value, setValue] = useState<T[K]>(atom.get(key));
+
+  useEffect(() => {
+    const subscription = atom.select(key).subscribe((val) => {
+      setValue(val as T[K]);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [atom]);
+
+  return value;
+}

package/tests/atom.test.ts

@@ -5,7 +5,7 @@ import {
   ObjectAtom,
   ReadOnlyAtom,
 } from "../src/Atom";
-import { map, of } from "rxjs";
+import { BehaviorSubject, map } from "rxjs";
 
 test("Base Atom values test", () => {
   const atom = Atom("aweofij");
@@ -17,6 +17,15 @@ test("Base Atom values test", () => {
   expect(atom.value()).toBe("apro");
 });
 
+test("Test readonly", () => {
+  const atom = Atom({ a: 10 }, true);
+  expect(atom instanceof ReadOnlyAtom).toBe(true);
+  expect(atom instanceof BaseAtom).toBe(false);
+  expect(atom.get("a")).toBe(10);
+
+  expect(atom).not.toHaveProperty("set");
+});
+
 test("Object Atom values test", () => {
   const atom = Atom<{ [key: string]: string }>({
     firstKey: "firstValue",
@@ -53,8 +62,27 @@ test("Object Atom get function test", () => {
   expect(atom.get("thirdKey")).toBe("thirdValue");
 });
 
+test("Object Enum Atom test", () => {
+  enum testEnum {
+    first,
+    second,
+  }
+  const atom = Atom({
+    [testEnum.first]: "firstValue",
+    [testEnum.second]: "secondValue",
+  });
+  expect(atom instanceof ObjectAtom).toBe(true);
+  expect(atom.get(testEnum.first)).toBe("firstValue");
+
+  expect(atom.get(testEnum.second)).toBe("secondValue");
+  atom.set(testEnum.second, "newSecondValue");
+  expect(atom.get(testEnum.second)).toBe("newSecondValue");
+});
+
 test("Array Atom values test", () => {
-  const atom = Atom(["first"]);
+  const atom = Atom<string[]>(["first"]);
+  // this is not allowed
+  // atom.push(1);
   expect(atom instanceof ArrayAtom).toBe(true);
   expect(atom.value().length).toBe(1);
   expect(atom.value()[0]).toBe("first");
@@ -65,7 +93,8 @@ test("Array Atom values test", () => {
 });
 
 test("Array Atom get index test", () => {
-  const atom = Atom(["first"]);
+  const atom = Atom<string[]>(["first"]);
+
   expect(atom instanceof ArrayAtom).toBe(true);
   expect(atom.value().length).toBe(1);
   expect(atom.get(0)).toBe("first");
@@ -80,23 +109,38 @@ test("Test native pipe", () => {
   expect(atom instanceof BaseAtom).toBe(true);
   expect(atom.value()).toBe(3);
 
-  const transformedAtom = atom.pipe(map((x) => x * x));
-  expect(transformedAtom instanceof ReadOnlyAtom).toBe(true);
-  expect(transformedAtom).not.toHaveProperty("push");
+  const derivedAtom = atom.pipe(map((x) => x * x));
+  expect(derivedAtom instanceof ReadOnlyAtom).toBe(true);
+  expect(derivedAtom).not.toHaveProperty("set");
 
-  expect(transformedAtom.value()).toBe(9);
+  expect(derivedAtom.value()).toBe(9);
 });
 
-test("Test transform", () => {
+test("Test derive", () => {
   const atom = Atom(3);
   expect(atom instanceof BaseAtom).toBe(true);
   expect(atom.value()).toBe(3);
 
-  const transformedAtom = atom.transform((x) => x * x);
-  expect(transformedAtom instanceof ReadOnlyAtom).toBe(true);
-  expect(transformedAtom).not.toHaveProperty("push");
+  const derivedAtom = atom.derive((x) => x * x);
+  expect(derivedAtom instanceof ReadOnlyAtom).toBe(true);
+  expect(derivedAtom).not.toHaveProperty("set");
 
-  expect(transformedAtom.value()).toBe(9);
+  expect(derivedAtom.value()).toBe(9);
+});
+
+test("Test derive update", () => {
+  const atom = Atom(3);
+  expect(atom instanceof BaseAtom).toBe(true);
+  expect(atom.value()).toBe(3);
+
+  const derivedAtom = atom.derive((x) => x * x);
+  expect(derivedAtom instanceof ReadOnlyAtom).toBe(true);
+  expect(derivedAtom).not.toHaveProperty("set");
+
+  expect(derivedAtom.value()).toBe(9);
+
+  atom.set(4);
+  expect(derivedAtom.value()).toBe(16);
 });
 
 test("Test combine", () => {
@@ -106,20 +150,199 @@ test("Test combine", () => {
     c: { name: "c" },
   });
   const ids = Atom<string[]>(["a", "b", "c"]);
-  const combined = Atom.combine(normalizedData, ids).transform(
-    ([normed, ids]) => {
-      return ids.map((id) => normed[id]);
-    }
-  );
-  expect(combined).not.toHaveProperty("push");
+  const combined = Atom.combine(normalizedData, ids).derive(([normed, ids]) => {
+    return ids.map((id) => normed[id]);
+  });
+  expect(combined).not.toHaveProperty("set");
 
   expect(combined instanceof ReadOnlyAtom).toBe(true);
 
   expect(combined instanceof ReadOnlyAtom).toBe(true);
-  expect(combined).not.toHaveProperty("push");
+  expect(combined).not.toHaveProperty("set");
   const combinedValue = combined.value();
   expect(combinedValue.length).toBe(3);
   expect(combinedValue[0].name).toBe("a");
   expect(combinedValue[1].name).toBe("b");
   expect(combinedValue[2].name).toBe("c");
 });
+
+test("Test combine example", () => {
+  const pets$ = Atom<{ [name: string]: { type: "dog" | "cat"; age: number } }>({
+    spot: { type: "dog", age: 5 },
+    fido: { type: "dog", age: 3 },
+    tabby: { type: "cat", age: 12 },
+  });
+
+  const people$ = Atom<{ [name: string]: { pets: string[] } }>({
+    fred: { pets: [] },
+    mary: { pets: ["spot", "fido"] },
+    cam: { pets: ["tabby"] },
+  });
+
+  const mary$ = Atom.combine(pets$, people$.select("mary")).derive(
+    ([pets, mary]) => {
+      return {
+        ...mary,
+        pets: mary.pets.map((petName) => pets[petName]),
+      };
+    }
+  );
+  {
+    mary: {
+      pets: [
+        {
+          name: "spot",
+          type: "dog",
+          age: 5,
+        },
+      ];
+    }
+  }
+
+  const pets = mary$.select("pets").get(0);
+  expect(mary$.select("pets").value().length).toBe(2);
+  expect(mary$.select("pets").get(0)).toHaveProperty("type");
+  expect(mary$.select("pets").get(0)).toHaveProperty("age");
+  expect(mary$.select("pets").get(0).type).toBe("dog");
+  expect(mary$.select("pets").get(0).age).toBe(5);
+  expect(mary$.select("pets").get(1)).toHaveProperty("type");
+  expect(mary$.select("pets").get(1)).toHaveProperty("age");
+  expect(mary$.select("pets").get(1).type).toBe("dog");
+  expect(mary$.select("pets").get(1).age).toBe(3);
+});
+
+test("Test select (simple)", () => {
+  enum TEST_ENUM {
+    a = "weoifj",
+    b = "oh",
+    c = "ohoij",
+  }
+
+  // test types
+  const enumTest = Atom(TEST_ENUM.a);
+
+  const arrayTest = Atom([1, 2, 34]);
+  const arrayTest2 = Atom([{ a: "jwoi" }, 2, 34]);
+
+  const arrayAtom = Atom<{ [key: string]: number[] }>({
+    a: [0, 1, 2],
+    b: [1, 3, 4],
+    c: [5, 3, 4],
+  });
+
+  const primitiveNum = new BehaviorSubject(4);
+  const primitiveNumAtom = Atom<number>(primitiveNum);
+
+  const primitiveStr = new BehaviorSubject("a");
+  const primitiveStringAtom = Atom<string>(primitiveStr);
+
+  const arrayObs = new BehaviorSubject(["a"]);
+  const arrayObsAtom = Atom<string[]>(arrayObs);
+
+  const objObs = new BehaviorSubject({ a: 1 });
+  const objObsAtom2 = Atom(objObs);
+  const objObsAtom1 = Atom<{ [id: string]: number }>(objObs);
+
+  const stringData = Atom<{
+    [key: string]: { [key: string]: string };
+  }>({
+    a: { a: "a" },
+    b: { b: "b" },
+    c: { c: "c" },
+  });
+
+  const selectedString: ObjectAtom<{ [key: string]: string }> =
+    stringData.select("b");
+
+  const normalizedOptionalStringData = Atom<{
+    [key: string]: { [key in "a" | "b" | "c"]?: string };
+  }>({
+    a: { a: "a" },
+    b: { b: "b" },
+    c: { c: "c" },
+  });
+
+  const selectedOptionalString = normalizedOptionalStringData.select("b");
+
+  const normalizedEnumData = Atom<{
+    [key: string]: { [key in TEST_ENUM]?: string };
+  }>({
+    a: { [TEST_ENUM.a]: "a" },
+    b: { [TEST_ENUM.b]: "b" },
+    c: { [TEST_ENUM.c]: "c" },
+  });
+  const selected = normalizedEnumData.select("b");
+  const selected2 = normalizedEnumData.select("a");
+  const selectedArray = arrayAtom.select("b");
+
+  // THIS IS HTE LAST ONE THT STILL OES NOTWOK
+  const selectedArr = arrayAtom.select("a");
+
+  const sel3 = objObsAtom2.select("a");
+
+  expect(selected instanceof ObjectAtom).toBe(true);
+
+  expect(selected instanceof ObjectAtom).toBe(true);
+
+  // const combined = Atom.combine(normalizedData, ids).derive(([normed, ids]) => {
+  //   return ids.map((id) => normed[id]);
+  // });
+  //
+  // expect(combined).not.toHaveProperty("push");
+  //
+  // expect(combined instanceof ReadOnlyAtom).toBe(true);
+  //
+  // expect(combined instanceof ReadOnlyAtom).toBe(true);
+  // expect(combined).not.toHaveProperty("push");
+  // const combinedValue = combined.value();
+  // expect(combinedValue.length).toBe(3);
+  // expect(combinedValue[0].name).toBe("a");
+  // expect(combinedValue[1].name).toBe("b");
+  // expect(combinedValue[2].name).toBe("c");
+});
+
+test("Test select (nested objects)", () => {
+  const nestedData = Atom<{
+    [key: string]: {
+      nickname: string;
+      education: {
+        school: string;
+        graduation: number;
+      };
+    };
+  }>({
+    stacy: {
+      nickname: "stace",
+      education: {
+        school: "Penn",
+        graduation: 2014,
+      },
+    },
+    annie: {
+      nickname: "ann",
+      education: {
+        school: "Brown",
+        graduation: 2015,
+      },
+    },
+    prabhu: {
+      nickname: "prab",
+      education: {
+        school: "MIT",
+        graduation: 2016,
+      },
+    },
+  });
+  const stacy = nestedData.select("stacy");
+  const stacySchool = nestedData.select("stacy").select("education");
+
+  expect(stacy.get("nickname")).toBe("stace");
+  expect(stacySchool.get("school")).toBe("Penn");
+  expect(stacySchool.get("graduation")).toBe(2014);
+});
+
+/*
+ * TODO:
+ * - test react hooks
+ * - test subscriptions
+ */

package/tests/sample.ts

@@ -0,0 +1,123 @@
+export class ReadOnlyClass<T> {
+  value: T;
+  constructor(_value: T | Wrapper<T>) {
+    if (isWrapper(_value)) {
+    } else {
+      this.value = _value;
+    }
+  }
+}
+
+export class ArrayClass<T> extends ReadOnlyClass<T[]> {}
+
+export class BaseClass<T> extends ReadOnlyClass<T> {}
+
+export class ObjectClass<
+  K extends string | number | symbol,
+  V,
+  T extends {
+    [key in K]: V;
+  } = {
+    [key in K]: V;
+  }
+> extends ReadOnlyClass<T> {
+  select(
+    key: K
+  ): T[K] extends { [key: string]: infer V } ? ObjectClass<K, V> : BaseClass<V>;
+  select(key: K) {
+    const newObs = new Wrapper(this.value[key]);
+    return Class(newObs);
+  }
+}
+
+export class Wrapper<T> {
+  val: T;
+  constructor(val: T) {
+    this.val = val;
+  }
+  getValue(): T {
+    return this.val;
+  }
+}
+
+function isWrapper(val: any): val is Wrapper<unknown> {
+  if (val instanceof Wrapper) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+// wrapper type (primitive)
+export function Class<T>(
+  value: T extends { [key: string]: infer V } | any[] ? never : Wrapper<T>
+): BaseClass<T>;
+
+// wrapper<array> type
+export function Class<T extends any[]>(
+  value: Wrapper<T>
+): ArrayClass<T[number]>;
+
+// wrapper<object> type
+export function Class<T>(
+  value: T extends {
+    [key in keyof T]: infer V;
+  }
+    ? Wrapper<T>
+    : never
+): ObjectClass<keyof T, T[keyof T], T>;
+
+// array type
+export function Class<T extends any[]>(value: T): ArrayClass<T[number]>;
+
+// object type
+export function Class<T extends { [key: string]: T[keyof T] }>(
+  value: T
+): ObjectClass<keyof T, T[keyof T]>;
+
+// primitive type
+export function Class<T>(value: T): BaseClass<T>;
+
+// function definition
+export function Class<T>(_value: T) {
+  let cls;
+  if (Array.isArray(_value)) {
+    cls = new ArrayClass<T>(_value); // For arrays
+  } else if (typeof _value === "object" && _value !== null) {
+    cls = new ObjectClass<keyof T, T[keyof T]>(_value); // For objects
+  } else {
+    cls = new BaseClass(_value); // For other types
+  }
+  return cls;
+}
+
+const a = Class<{ [key: string]: { name: string } }>({
+  a: { name: "a" },
+  b: { name: "b" },
+  c: { name: "c" },
+});
+
+// this works
+const numbWrapper = new Wrapper(1);
+const numbClass = Class(numbWrapper); // BaseClass<number>
+
+// this works
+const arrayWrapper = new Wrapper(["a"]);
+const arrayWrapperClass = Class<string[]>(arrayWrapper); // ArrayClass<number>
+
+// this works
+const objObs = new Wrapper({ a: 1 });
+const objObsClass2 = Class(objObs); // ObjectClass<'a', number, { a: number }>
+
+// this does not work.
+const selectedItem = a.select("b"); // BaseClass<{name: string}>
+
+/*
+ * Why is this of type:
+ * const selectedItem: BaseClass<{
+ *   name: string;
+ * }>
+ *
+ * instead of:
+ * const selectedItem: BaseClass<ObjectClass<'name', string>
+ */