@tanstack/react-store 0.0.1 → 0.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-store",
   "author": "Tanner Linsley",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "license": "MIT",
   "repository": "tanstack/react-store",
   "homepage": "https://tanstack.com/",
@@ -10,7 +10,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "keywords": [
-    "loaders",
+    "store",
     "react",
     "typescript"
   ],
@@ -18,17 +18,27 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
-  "module": "build/esm/index.js",
-  "main": "build/cjs/index.js",
-  "browser": "build/umd/index.production.js",
-  "types": "build/types/index.d.ts",
-  "engines": {
-    "node": ">=12"
-  },
   "files": [
-    "build/**",
+    "build",
     "src"
   ],
+  "type": "module",
+  "types": "build/legacy/index.d.ts",
+  "main": "build/legacy/index.cjs",
+  "module": "build/legacy/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./build/modern/index.d.ts",
+        "default": "./build/modern/index.js"
+      },
+      "require": {
+        "types": "./build/modern/index.d.cts",
+        "default": "./build/modern/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16",
@@ -36,12 +46,18 @@
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.0",
-    "@tanstack/store": "0.0.1"
+    "@tanstack/store": "0.1.0"
   },
   "devDependencies": {
     "@types/use-sync-external-store": "^0.0.3"
   },
   "scripts": {
-    "build": "rollup --config rollup.config.js"
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc",
+    "test:lib": "vitest run --coverage",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "tsup"
   }
 }

package/src/__tests__/index.test.tsx

@@ -0,0 +1,79 @@
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as React from 'react'
+import { Store } from '@tanstack/store'
+import { useStore } from '../index'
+import { useState } from 'react'
+import userEvent from '@testing-library/user-event'
+
+const user = userEvent.setup()
+
+describe('useStore', () => {
+  it('allows us to select state using a selector', async () => {
+    const store = new Store({
+      select: 0,
+      ignored: 1,
+    })
+
+    function Comp() {
+      const storeVal = useStore(store, (state) => state.select)
+
+      return <p>Store: {storeVal}</p>
+    }
+
+    const { getByText } = render(<Comp />)
+    expect(getByText('Store: 0')).toBeInTheDocument()
+  })
+
+  it('only triggers a re-render when selector state is updated', async () => {
+    const store = new Store({
+      select: 0,
+      ignored: 1,
+    })
+
+    function Comp() {
+      const storeVal = useStore(store, (state) => state.select)
+      const [fn] = useState(vi.fn)
+      fn()
+
+      return (
+        <div>
+          <p>Number rendered: {fn.mock.calls.length}</p>
+          <p>Store: {storeVal}</p>
+          <button
+            onClick={() =>
+              store.setState((v) => ({
+                ...v,
+                select: 10,
+              }))
+            }
+          >
+            Update select
+          </button>
+          <button
+            onClick={() =>
+              store.setState((v) => ({
+                ...v,
+                ignored: 10,
+              }))
+            }
+          >
+            Update ignored
+          </button>
+        </div>
+      )
+    }
+
+    const { getByText } = render(<Comp />)
+    expect(getByText('Store: 0')).toBeInTheDocument()
+    expect(getByText('Number rendered: 1')).toBeInTheDocument()
+
+    await user.click(getByText('Update select'))
+
+    await waitFor(() => expect(getByText('Store: 10')).toBeInTheDocument())
+    expect(getByText('Number rendered: 2')).toBeInTheDocument()
+
+    await user.click(getByText('Update ignored'))
+    expect(getByText('Number rendered: 2')).toBeInTheDocument()
+  })
+})

package/src/index.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
-import { AnyUpdater, Store } from '@tanstack/store'
+import type { AnyUpdater, Store } from '@tanstack/store'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
 export * from '@tanstack/store'

package/build/cjs/index.js

@@ -1,49 +0,0 @@
-/**
- * @tanstack/react-store/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var withSelector = require('use-sync-external-store/shim/with-selector');
-var store = require('@tanstack/store');
-
-function useStore(store, selector = d => d) {
-  const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
-  return slice;
-}
-function shallow(objA, objB) {
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  if (keysA.length !== Object.keys(objB).length) {
-    return false;
-  }
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
-exports.shallow = shallow;
-exports.useStore = useStore;
-Object.keys(store).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () { return store[k]; }
-  });
-});
-//# sourceMappingURL=index.js.map

package/build/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AnyUpdater, Store } from '@tanstack/store'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'\n\nexport * from '@tanstack/store'\n\nexport type NoInfer<T> = [T][T extends any ? 0 : never]\n\nexport function useStore<\n  TState,\n  TSelected = NoInfer<TState>,\n  TUpdater extends AnyUpdater = AnyUpdater,\n>(\n  store: Store<TState, TUpdater>,\n  selector: (state: NoInfer<TState>) => TSelected = (d) => d as any,\n) {\n  const slice = useSyncExternalStoreWithSelector(\n    store.subscribe,\n    () => store.state,\n    () => store.state,\n    selector,\n    shallow,\n  )\n\n  return slice\n}\n\nexport function shallow<T>(objA: T, objB: T) {\n  if (Object.is(objA, objB)) {\n    return true\n  }\n\n  if (\n    typeof objA !== 'object' ||\n    objA === null ||\n    typeof objB !== 'object' ||\n    objB === null\n  ) {\n    return false\n  }\n\n  const keysA = Object.keys(objA)\n  if (keysA.length !== Object.keys(objB).length) {\n    return false\n  }\n\n  for (let i = 0; i < keysA.length; i++) {\n    if (\n      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||\n      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])\n    ) {\n      return false\n    }\n  }\n  return true\n}\n"],"names":["useStore","store","selector","d","slice","useSyncExternalStoreWithSelector","subscribe","state","shallow","objA","objB","Object","is","keysA","keys","length","i","prototype","hasOwnProperty","call"],"mappings":";;;;;;;;;;;;;;;;;AAQO,SAASA,QAAQA,CAKtBC,KAA8B,EAC9BC,QAA+C,GAAIC,CAAC,IAAKA,CAAQ,EACjE;EACA,MAAMC,KAAK,GAAGC,6CAAgC,CAC5CJ,KAAK,CAACK,SAAS,EACf,MAAML,KAAK,CAACM,KAAK,EACjB,MAAMN,KAAK,CAACM,KAAK,EACjBL,QAAQ,EACRM,OACF,CAAC,CAAA;AAED,EAAA,OAAOJ,KAAK,CAAA;AACd,CAAA;AAEO,SAASI,OAAOA,CAAIC,IAAO,EAAEC,IAAO,EAAE;EAC3C,IAAIC,MAAM,CAACC,EAAE,CAACH,IAAI,EAAEC,IAAI,CAAC,EAAE;AACzB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,IACE,OAAOD,IAAI,KAAK,QAAQ,IACxBA,IAAI,KAAK,IAAI,IACb,OAAOC,IAAI,KAAK,QAAQ,IACxBA,IAAI,KAAK,IAAI,EACb;AACA,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,MAAMG,KAAK,GAAGF,MAAM,CAACG,IAAI,CAACL,IAAI,CAAC,CAAA;AAC/B,EAAA,IAAII,KAAK,CAACE,MAAM,KAAKJ,MAAM,CAACG,IAAI,CAACJ,IAAI,CAAC,CAACK,MAAM,EAAE;AAC7C,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,KAAK,CAACE,MAAM,EAAEC,CAAC,EAAE,EAAE;AACrC,IAAA,IACE,CAACL,MAAM,CAACM,SAAS,CAACC,cAAc,CAACC,IAAI,CAACT,IAAI,EAAEG,KAAK,CAACG,CAAC,CAAW,CAAC,IAC/D,CAACL,MAAM,CAACC,EAAE,CAACH,IAAI,CAACI,KAAK,CAACG,CAAC,CAAC,CAAY,EAAEN,IAAI,CAACG,KAAK,CAACG,CAAC,CAAC,CAAY,CAAC,EAChE;AACA,MAAA,OAAO,KAAK,CAAA;AACd,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;;;;;;;;"}

package/build/esm/index.js

@@ -1,38 +0,0 @@
-/**
- * @tanstack/react-store/src/index.tsx
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
-export * from '@tanstack/store';
-
-function useStore(store, selector = d => d) {
-  const slice = useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
-  return slice;
-}
-function shallow(objA, objB) {
-  if (Object.is(objA, objB)) {
-    return true;
-  }
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  if (keysA.length !== Object.keys(objB).length) {
-    return false;
-  }
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-
-export { shallow, useStore };
-//# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AnyUpdater, Store } from '@tanstack/store'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'\n\nexport * from '@tanstack/store'\n\nexport type NoInfer<T> = [T][T extends any ? 0 : never]\n\nexport function useStore<\n  TState,\n  TSelected = NoInfer<TState>,\n  TUpdater extends AnyUpdater = AnyUpdater,\n>(\n  store: Store<TState, TUpdater>,\n  selector: (state: NoInfer<TState>) => TSelected = (d) => d as any,\n) {\n  const slice = useSyncExternalStoreWithSelector(\n    store.subscribe,\n    () => store.state,\n    () => store.state,\n    selector,\n    shallow,\n  )\n\n  return slice\n}\n\nexport function shallow<T>(objA: T, objB: T) {\n  if (Object.is(objA, objB)) {\n    return true\n  }\n\n  if (\n    typeof objA !== 'object' ||\n    objA === null ||\n    typeof objB !== 'object' ||\n    objB === null\n  ) {\n    return false\n  }\n\n  const keysA = Object.keys(objA)\n  if (keysA.length !== Object.keys(objB).length) {\n    return false\n  }\n\n  for (let i = 0; i < keysA.length; i++) {\n    if (\n      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||\n      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])\n    ) {\n      return false\n    }\n  }\n  return true\n}\n"],"names":["useStore","store","selector","d","slice","useSyncExternalStoreWithSelector","subscribe","state","shallow","objA","objB","Object","is","keysA","keys","length","i","prototype","hasOwnProperty","call"],"mappings":";;;;;;;;;;;;;AAQO,SAASA,QAAQA,CAKtBC,KAA8B,EAC9BC,QAA+C,GAAIC,CAAC,IAAKA,CAAQ,EACjE;EACA,MAAMC,KAAK,GAAGC,gCAAgC,CAC5CJ,KAAK,CAACK,SAAS,EACf,MAAML,KAAK,CAACM,KAAK,EACjB,MAAMN,KAAK,CAACM,KAAK,EACjBL,QAAQ,EACRM,OACF,CAAC,CAAA;AAED,EAAA,OAAOJ,KAAK,CAAA;AACd,CAAA;AAEO,SAASI,OAAOA,CAAIC,IAAO,EAAEC,IAAO,EAAE;EAC3C,IAAIC,MAAM,CAACC,EAAE,CAACH,IAAI,EAAEC,IAAI,CAAC,EAAE;AACzB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,IACE,OAAOD,IAAI,KAAK,QAAQ,IACxBA,IAAI,KAAK,IAAI,IACb,OAAOC,IAAI,KAAK,QAAQ,IACxBA,IAAI,KAAK,IAAI,EACb;AACA,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,MAAMG,KAAK,GAAGF,MAAM,CAACG,IAAI,CAACL,IAAI,CAAC,CAAA;AAC/B,EAAA,IAAII,KAAK,CAACE,MAAM,KAAKJ,MAAM,CAACG,IAAI,CAACJ,IAAI,CAAC,CAACK,MAAM,EAAE;AAC7C,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,KAAK,CAACE,MAAM,EAAEC,CAAC,EAAE,EAAE;AACrC,IAAA,IACE,CAACL,MAAM,CAACM,SAAS,CAACC,cAAc,CAACC,IAAI,CAACT,IAAI,EAAEG,KAAK,CAACG,CAAC,CAAW,CAAC,IAC/D,CAACL,MAAM,CAACC,EAAE,CAACH,IAAI,CAACI,KAAK,CAACG,CAAC,CAAC,CAAY,EAAEN,IAAI,CAACG,KAAK,CAACG,CAAC,CAAC,CAAY,CAAC,EAChE;AACA,MAAA,OAAO,KAAK,CAAA;AACd,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}