@tanstack/react-store 0.0.1-beta.118 → 0.0.1-beta.120

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,14 +12,34 @@
12
12
 
13
13
  Object.defineProperty(exports, '__esModule', { value: true });
14
14
 
15
+ require('react');
15
16
  var withSelector = require('use-sync-external-store/shim/with-selector');
16
17
  var store = require('@tanstack/store');
17
18
 
18
19
  function useStore(store, selector = d => d) {
19
20
  // const isMountedRef = React.useRef(false)
20
- // const [state, setState] = React.useState<{ ref: TSelected }>({
21
- // ref: undefined!,
22
- // })
21
+ // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({
22
+ // ref: selector(store.state),
23
+ // }))
24
+
25
+ // if (!shallow(selector(store.state), state.ref)) {
26
+ // setState(() => ({ ref: selector(store.state) }))
27
+ // }
28
+
29
+ // useLayoutEffect(() => {
30
+ // console.log('effect')
31
+
32
+ // const cb = () => {
33
+ // const next = selector(store.state)
34
+ // console.log('onsub')
35
+ // if (!shallow(next, state.ref)) {
36
+ // console.log('set')
37
+ // setState(() => ({ ref: selector(store.state) }))
38
+ // }
39
+ // }
40
+
41
+ // return store.subscribe(cb)
42
+ // }, [])
23
43
 
24
44
  const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
25
45
 
@@ -27,7 +47,7 @@ function useStore(store, selector = d => d) {
27
47
  // state.ref = slice
28
48
  // }
29
49
 
30
- // if (slice !== state.ref) {
50
+ // if (!shallow(slice, state.ref)) {
31
51
  // setState({ ref: slice })
32
52
  // }
33
53
 
@@ -1 +1 @@
1
- {"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 isMountedRef = React.useRef(false)\n // const [state, setState] = React.useState<{ ref: TSelected }>({\n // ref: undefined!,\n // })\n\n const slice = useSyncExternalStoreWithSelector(\n store.subscribe,\n () => store.state,\n () => store.state,\n selector,\n shallow,\n )\n\n // if (!isMountedRef.current) {\n // state.ref = slice\n // }\n\n // if (slice !== state.ref) {\n // setState({ ref: slice })\n // }\n\n // React.useEffect(() => {\n // isMountedRef.current = true\n // return () => {\n // isMountedRef.current = false\n // }\n // }, [])\n\n // return state.ref\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,QAAQ,CAKtBC,KAA8B,EAC9BC,QAA+C,GAAIC,CAAC,IAAKA,CAAQ,EACjE;AACA;AACA;AACA;AACA;;EAEA,MAAMC,KAAK,GAAGC,6CAAgC,CAC5CJ,KAAK,CAACK,SAAS,EACf,MAAML,KAAK,CAACM,KAAK,EACjB,MAAMN,KAAK,CAACM,KAAK,EACjBL,QAAQ,EACRM,OAAO,CACR,CAAA;;AAED;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,EAAA,OAAOJ,KAAK,CAAA;AACd,CAAA;AAEO,SAASI,OAAO,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,CAAC,CAAW,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;;;;;;;;;;;"}
1
+ {"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\nconst useLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\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 isMountedRef = React.useRef(false)\n // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({\n // ref: selector(store.state),\n // }))\n\n // if (!shallow(selector(store.state), state.ref)) {\n // setState(() => ({ ref: selector(store.state) }))\n // }\n\n // useLayoutEffect(() => {\n // console.log('effect')\n\n // const cb = () => {\n // const next = selector(store.state)\n // console.log('onsub')\n // if (!shallow(next, state.ref)) {\n // console.log('set')\n // setState(() => ({ ref: selector(store.state) }))\n // }\n // }\n\n // return store.subscribe(cb)\n // }, [])\n\n const slice = useSyncExternalStoreWithSelector(\n store.subscribe,\n () => store.state,\n () => store.state,\n selector,\n shallow,\n )\n\n // if (!isMountedRef.current) {\n // state.ref = slice\n // }\n\n // if (!shallow(slice, state.ref)) {\n // setState({ ref: slice })\n // }\n\n // React.useEffect(() => {\n // isMountedRef.current = true\n // return () => {\n // isMountedRef.current = false\n // }\n // }, [])\n\n // return state.ref\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":";;;;;;;;;;;;;;;;;;AAWO,SAASA,QAAQ,CAKtBC,KAA8B,EAC9BC,QAA+C,GAAIC,CAAC,IAAKA,CAAQ,EACjE;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;EAEA,MAAMC,KAAK,GAAGC,6CAAgC,CAC5CJ,KAAK,CAACK,SAAS,EACf,MAAML,KAAK,CAACM,KAAK,EACjB,MAAMN,KAAK,CAACM,KAAK,EACjBL,QAAQ,EACRM,OAAO,CACR,CAAA;;AAED;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,EAAA,OAAOJ,KAAK,CAAA;AACd,CAAA;AAEO,SAASI,OAAO,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,CAAC,CAAW,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;;;;;;;;;;;"}
@@ -8,14 +8,34 @@
8
8
  *
9
9
  * @license MIT
10
10
  */
11
+ import 'react';
11
12
  import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
12
13
  export * from '@tanstack/store';
13
14
 
14
15
  function useStore(store, selector = d => d) {
15
16
  // const isMountedRef = React.useRef(false)
16
- // const [state, setState] = React.useState<{ ref: TSelected }>({
17
- // ref: undefined!,
18
- // })
17
+ // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({
18
+ // ref: selector(store.state),
19
+ // }))
20
+
21
+ // if (!shallow(selector(store.state), state.ref)) {
22
+ // setState(() => ({ ref: selector(store.state) }))
23
+ // }
24
+
25
+ // useLayoutEffect(() => {
26
+ // console.log('effect')
27
+
28
+ // const cb = () => {
29
+ // const next = selector(store.state)
30
+ // console.log('onsub')
31
+ // if (!shallow(next, state.ref)) {
32
+ // console.log('set')
33
+ // setState(() => ({ ref: selector(store.state) }))
34
+ // }
35
+ // }
36
+
37
+ // return store.subscribe(cb)
38
+ // }, [])
19
39
 
20
40
  const slice = useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
21
41
 
@@ -23,7 +43,7 @@ function useStore(store, selector = d => d) {
23
43
  // state.ref = slice
24
44
  // }
25
45
 
26
- // if (slice !== state.ref) {
46
+ // if (!shallow(slice, state.ref)) {
27
47
  // setState({ ref: slice })
28
48
  // }
29
49
 
@@ -1 +1 @@
1
- {"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 isMountedRef = React.useRef(false)\n // const [state, setState] = React.useState<{ ref: TSelected }>({\n // ref: undefined!,\n // })\n\n const slice = useSyncExternalStoreWithSelector(\n store.subscribe,\n () => store.state,\n () => store.state,\n selector,\n shallow,\n )\n\n // if (!isMountedRef.current) {\n // state.ref = slice\n // }\n\n // if (slice !== state.ref) {\n // setState({ ref: slice })\n // }\n\n // React.useEffect(() => {\n // isMountedRef.current = true\n // return () => {\n // isMountedRef.current = false\n // }\n // }, [])\n\n // return state.ref\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,QAAQ,CAKtBC,KAA8B,EAC9BC,QAA+C,GAAIC,CAAC,IAAKA,CAAQ,EACjE;AACA;AACA;AACA;AACA;;EAEA,MAAMC,KAAK,GAAGC,gCAAgC,CAC5CJ,KAAK,CAACK,SAAS,EACf,MAAML,KAAK,CAACM,KAAK,EACjB,MAAMN,KAAK,CAACM,KAAK,EACjBL,QAAQ,EACRM,OAAO,CACR,CAAA;;AAED;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,EAAA,OAAOJ,KAAK,CAAA;AACd,CAAA;AAEO,SAASI,OAAO,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,CAAC,CAAW,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;;;;"}
1
+ {"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\nconst useLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\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 isMountedRef = React.useRef(false)\n // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({\n // ref: selector(store.state),\n // }))\n\n // if (!shallow(selector(store.state), state.ref)) {\n // setState(() => ({ ref: selector(store.state) }))\n // }\n\n // useLayoutEffect(() => {\n // console.log('effect')\n\n // const cb = () => {\n // const next = selector(store.state)\n // console.log('onsub')\n // if (!shallow(next, state.ref)) {\n // console.log('set')\n // setState(() => ({ ref: selector(store.state) }))\n // }\n // }\n\n // return store.subscribe(cb)\n // }, [])\n\n const slice = useSyncExternalStoreWithSelector(\n store.subscribe,\n () => store.state,\n () => store.state,\n selector,\n shallow,\n )\n\n // if (!isMountedRef.current) {\n // state.ref = slice\n // }\n\n // if (!shallow(slice, state.ref)) {\n // setState({ ref: slice })\n // }\n\n // React.useEffect(() => {\n // isMountedRef.current = true\n // return () => {\n // isMountedRef.current = false\n // }\n // }, [])\n\n // return state.ref\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":";;;;;;;;;;;;;;AAWO,SAASA,QAAQ,CAKtBC,KAA8B,EAC9BC,QAA+C,GAAIC,CAAC,IAAKA,CAAQ,EACjE;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;EAEA,MAAMC,KAAK,GAAGC,gCAAgC,CAC5CJ,KAAK,CAACK,SAAS,EACf,MAAML,KAAK,CAACM,KAAK,EACjB,MAAMN,KAAK,CAACM,KAAK,EACjBL,QAAQ,EACRM,OAAO,CACR,CAAA;;AAED;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,EAAA,OAAOJ,KAAK,CAAA;AACd,CAAA;AAEO,SAASI,OAAO,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,CAAC,CAAW,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;;;;"}
@@ -4024,7 +4024,7 @@ var drawChart = (function (exports) {
4024
4024
  </script>
4025
4025
  <script>
4026
4026
  /*<!--*/
4027
- const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.production.js","children":[{"name":"packages","children":[{"name":"store/build/esm/index.js","uid":"e526-5"},{"name":"react-store/src/index.tsx","uid":"e526-7"}]}]}],"isRoot":true},"nodeParts":{"e526-5":{"renderedLength":1359,"gzipLength":537,"brotliLength":0,"mainUid":"e526-4"},"e526-7":{"renderedLength":1244,"gzipLength":505,"brotliLength":0,"mainUid":"e526-6"}},"nodeMetas":{"e526-4":{"id":"/packages/store/build/esm/index.js","moduleParts":{"index.production.js":"e526-5"},"imported":[],"importedBy":[{"uid":"e526-6"}]},"e526-6":{"id":"/packages/react-store/src/index.tsx","moduleParts":{"index.production.js":"e526-7"},"imported":[{"uid":"e526-8"},{"uid":"e526-4"}],"importedBy":[],"isEntry":true},"e526-8":{"id":"use-sync-external-store/shim/with-selector","moduleParts":{},"imported":[],"importedBy":[{"uid":"e526-6"}],"isExternal":true}},"env":{"rollup":"2.79.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
4027
+ const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.production.js","children":[{"name":"packages","children":[{"name":"store/build/esm/index.js","uid":"a144-5"},{"name":"react-store/src/index.tsx","uid":"a144-7"}]}]}],"isRoot":true},"nodeParts":{"a144-5":{"renderedLength":1359,"gzipLength":537,"brotliLength":0,"mainUid":"a144-4"},"a144-7":{"renderedLength":1778,"gzipLength":607,"brotliLength":0,"mainUid":"a144-6"}},"nodeMetas":{"a144-4":{"id":"/packages/store/build/esm/index.js","moduleParts":{"index.production.js":"a144-5"},"imported":[],"importedBy":[{"uid":"a144-6"}]},"a144-6":{"id":"/packages/react-store/src/index.tsx","moduleParts":{"index.production.js":"a144-7"},"imported":[{"uid":"a144-8"},{"uid":"a144-9"},{"uid":"a144-4"}],"importedBy":[],"isEntry":true},"a144-8":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"a144-6"}],"isExternal":true},"a144-9":{"id":"use-sync-external-store/shim/with-selector","moduleParts":{},"imported":[],"importedBy":[{"uid":"a144-6"}],"isExternal":true}},"env":{"rollup":"2.79.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
4028
4028
 
4029
4029
  const run = () => {
4030
4030
  const width = window.innerWidth;
@@ -11,11 +11,11 @@
11
11
  "children": [
12
12
  {
13
13
  "name": "store/build/esm/index.js",
14
- "uid": "e526-10"
14
+ "uid": "a144-11"
15
15
  },
16
16
  {
17
17
  "name": "react-store/src/index.tsx",
18
- "uid": "e526-12"
18
+ "uid": "a144-13"
19
19
  }
20
20
  ]
21
21
  }
@@ -25,55 +25,69 @@
25
25
  "isRoot": true
26
26
  },
27
27
  "nodeParts": {
28
- "e526-10": {
28
+ "a144-11": {
29
29
  "renderedLength": 1359,
30
30
  "gzipLength": 537,
31
31
  "brotliLength": 0,
32
- "mainUid": "e526-9"
32
+ "mainUid": "a144-10"
33
33
  },
34
- "e526-12": {
35
- "renderedLength": 1244,
36
- "gzipLength": 505,
34
+ "a144-13": {
35
+ "renderedLength": 1778,
36
+ "gzipLength": 607,
37
37
  "brotliLength": 0,
38
- "mainUid": "e526-11"
38
+ "mainUid": "a144-12"
39
39
  }
40
40
  },
41
41
  "nodeMetas": {
42
- "e526-9": {
42
+ "a144-10": {
43
43
  "id": "/packages/store/build/esm/index.js",
44
44
  "moduleParts": {
45
- "index.production.js": "e526-10"
45
+ "index.production.js": "a144-11"
46
46
  },
47
47
  "imported": [],
48
48
  "importedBy": [
49
49
  {
50
- "uid": "e526-11"
50
+ "uid": "a144-12"
51
51
  }
52
52
  ]
53
53
  },
54
- "e526-11": {
54
+ "a144-12": {
55
55
  "id": "/packages/react-store/src/index.tsx",
56
56
  "moduleParts": {
57
- "index.production.js": "e526-12"
57
+ "index.production.js": "a144-13"
58
58
  },
59
59
  "imported": [
60
60
  {
61
- "uid": "e526-13"
61
+ "uid": "a144-14"
62
62
  },
63
63
  {
64
- "uid": "e526-9"
64
+ "uid": "a144-15"
65
+ },
66
+ {
67
+ "uid": "a144-10"
65
68
  }
66
69
  ],
67
70
  "importedBy": [],
68
71
  "isEntry": true
69
72
  },
70
- "e526-13": {
73
+ "a144-14": {
74
+ "id": "react",
75
+ "moduleParts": {},
76
+ "imported": [],
77
+ "importedBy": [
78
+ {
79
+ "uid": "a144-12"
80
+ }
81
+ ],
82
+ "isExternal": true
83
+ },
84
+ "a144-15": {
71
85
  "id": "use-sync-external-store/shim/with-selector",
72
86
  "moduleParts": {},
73
87
  "imported": [],
74
88
  "importedBy": [
75
89
  {
76
- "uid": "e526-11"
90
+ "uid": "a144-12"
77
91
  }
78
92
  ],
79
93
  "isExternal": true
@@ -9,10 +9,10 @@
9
9
  * @license MIT
10
10
  */
11
11
  (function (global, factory) {
12
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('use-sync-external-store/shim/with-selector')) :
13
- typeof define === 'function' && define.amd ? define(['exports', 'use-sync-external-store/shim/with-selector'], factory) :
14
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactLoaders = {}, global.withSelector));
15
- })(this, (function (exports, withSelector) { 'use strict';
12
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('use-sync-external-store/shim/with-selector')) :
13
+ typeof define === 'function' && define.amd ? define(['exports', 'react', 'use-sync-external-store/shim/with-selector'], factory) :
14
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactLoaders = {}, global.React, global.withSelector));
15
+ })(this, (function (exports, React, withSelector) { 'use strict';
16
16
 
17
17
  /**
18
18
  * @tanstack/store/src/index.ts
@@ -69,9 +69,28 @@
69
69
 
70
70
  function useStore(store, selector = d => d) {
71
71
  // const isMountedRef = React.useRef(false)
72
- // const [state, setState] = React.useState<{ ref: TSelected }>({
73
- // ref: undefined!,
74
- // })
72
+ // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({
73
+ // ref: selector(store.state),
74
+ // }))
75
+
76
+ // if (!shallow(selector(store.state), state.ref)) {
77
+ // setState(() => ({ ref: selector(store.state) }))
78
+ // }
79
+
80
+ // useLayoutEffect(() => {
81
+ // console.log('effect')
82
+
83
+ // const cb = () => {
84
+ // const next = selector(store.state)
85
+ // console.log('onsub')
86
+ // if (!shallow(next, state.ref)) {
87
+ // console.log('set')
88
+ // setState(() => ({ ref: selector(store.state) }))
89
+ // }
90
+ // }
91
+
92
+ // return store.subscribe(cb)
93
+ // }, [])
75
94
 
76
95
  const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, shallow);
77
96
 
@@ -79,7 +98,7 @@
79
98
  // state.ref = slice
80
99
  // }
81
100
 
82
- // if (slice !== state.ref) {
101
+ // if (!shallow(slice, state.ref)) {
83
102
  // setState({ ref: slice })
84
103
  // }
85
104
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.development.js","sources":["../../../store/build/esm/index.js","../../src/index.tsx"],"sourcesContent":["/**\n * @tanstack/store/src/index.ts\n *\n * Copyright (c) TanStack\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE.md file in the root directory of this source tree.\n *\n * @license MIT\n */\nclass Store {\n listeners = new Set();\n _batching = false;\n _flushing = 0;\n constructor(initialState, options) {\n this.state = initialState;\n this.options = options;\n }\n subscribe = listener => {\n this.listeners.add(listener);\n const unsub = this.options?.onSubscribe?.(listener, this);\n return () => {\n this.listeners.delete(listener);\n unsub?.();\n };\n };\n setState = updater => {\n const previous = this.state;\n this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);\n\n // Always run onUpdate, regardless of batching\n this.options?.onUpdate?.();\n\n // Attempt to flush\n this._flush();\n };\n _flush = () => {\n if (this._batching) return;\n const flushId = ++this._flushing;\n this.listeners.forEach(listener => {\n if (this._flushing !== flushId) return;\n listener();\n });\n };\n batch = cb => {\n if (this._batching) return cb();\n this._batching = true;\n cb();\n this._batching = false;\n this._flush();\n };\n}\n\nexport { Store };\n//# sourceMappingURL=index.js.map\n","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 isMountedRef = React.useRef(false)\n // const [state, setState] = React.useState<{ ref: TSelected }>({\n // ref: undefined!,\n // })\n\n const slice = useSyncExternalStoreWithSelector(\n store.subscribe,\n () => store.state,\n () => store.state,\n selector,\n shallow,\n )\n\n // if (!isMountedRef.current) {\n // state.ref = slice\n // }\n\n // if (slice !== state.ref) {\n // setState({ ref: slice })\n // }\n\n // React.useEffect(() => {\n // isMountedRef.current = true\n // return () => {\n // isMountedRef.current = false\n // }\n // }, [])\n\n // return state.ref\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":"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"}
1
+ {"version":3,"file":"index.development.js","sources":["../../../store/build/esm/index.js","../../src/index.tsx"],"sourcesContent":["/**\n * @tanstack/store/src/index.ts\n *\n * Copyright (c) TanStack\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE.md file in the root directory of this source tree.\n *\n * @license MIT\n */\nclass Store {\n listeners = new Set();\n _batching = false;\n _flushing = 0;\n constructor(initialState, options) {\n this.state = initialState;\n this.options = options;\n }\n subscribe = listener => {\n this.listeners.add(listener);\n const unsub = this.options?.onSubscribe?.(listener, this);\n return () => {\n this.listeners.delete(listener);\n unsub?.();\n };\n };\n setState = updater => {\n const previous = this.state;\n this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);\n\n // Always run onUpdate, regardless of batching\n this.options?.onUpdate?.();\n\n // Attempt to flush\n this._flush();\n };\n _flush = () => {\n if (this._batching) return;\n const flushId = ++this._flushing;\n this.listeners.forEach(listener => {\n if (this._flushing !== flushId) return;\n listener();\n });\n };\n batch = cb => {\n if (this._batching) return cb();\n this._batching = true;\n cb();\n this._batching = false;\n this._flush();\n };\n}\n\nexport { Store };\n//# sourceMappingURL=index.js.map\n","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\nconst useLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\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 isMountedRef = React.useRef(false)\n // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({\n // ref: selector(store.state),\n // }))\n\n // if (!shallow(selector(store.state), state.ref)) {\n // setState(() => ({ ref: selector(store.state) }))\n // }\n\n // useLayoutEffect(() => {\n // console.log('effect')\n\n // const cb = () => {\n // const next = selector(store.state)\n // console.log('onsub')\n // if (!shallow(next, state.ref)) {\n // console.log('set')\n // setState(() => ({ ref: selector(store.state) }))\n // }\n // }\n\n // return store.subscribe(cb)\n // }, [])\n\n const slice = useSyncExternalStoreWithSelector(\n store.subscribe,\n () => store.state,\n () => store.state,\n selector,\n shallow,\n )\n\n // if (!isMountedRef.current) {\n // state.ref = slice\n // }\n\n // if (!shallow(slice, state.ref)) {\n // setState({ ref: slice })\n // }\n\n // React.useEffect(() => {\n // isMountedRef.current = true\n // return () => {\n // isMountedRef.current = false\n // }\n // }, [])\n\n // return state.ref\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":"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"}
@@ -8,7 +8,7 @@
8
8
  *
9
9
  * @license MIT
10
10
  */
11
- !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("use-sync-external-store/shim/with-selector")):"function"==typeof define&&define.amd?define(["exports","use-sync-external-store/shim/with-selector"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ReactLoaders={},t.withSelector)}(this,(function(t,e){"use strict";
11
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("use-sync-external-store/shim/with-selector")):"function"==typeof define&&define.amd?define(["exports","react","use-sync-external-store/shim/with-selector"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).ReactLoaders={},t.React,t.withSelector)}(this,(function(t,e,s){"use strict";
12
12
  /**
13
13
  * @tanstack/store/src/index.ts
14
14
  *
@@ -18,5 +18,5 @@
18
18
  * LICENSE.md file in the root directory of this source tree.
19
19
  *
20
20
  * @license MIT
21
- */function s(t,e){if(Object.is(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;const s=Object.keys(t);if(s.length!==Object.keys(e).length)return!1;for(let i=0;i<s.length;i++)if(!Object.prototype.hasOwnProperty.call(e,s[i])||!Object.is(t[s[i]],e[s[i]]))return!1;return!0}t.Store=class{listeners=new Set;_batching=!1;_flushing=0;constructor(t,e){this.state=t,this.options=e}subscribe=t=>{this.listeners.add(t);const e=this.options?.onSubscribe?.(t,this);return()=>{this.listeners.delete(t),e?.()}};setState=t=>{const e=this.state;this.state=this.options?.updateFn?this.options.updateFn(e)(t):t(e),this.options?.onUpdate?.(),this._flush()};_flush=()=>{if(this._batching)return;const t=++this._flushing;this.listeners.forEach((e=>{this._flushing===t&&e()}))};batch=t=>{if(this._batching)return t();this._batching=!0,t(),this._batching=!1,this._flush()}},t.shallow=s,t.useStore=function(t,i=(t=>t)){return e.useSyncExternalStoreWithSelector(t.subscribe,(()=>t.state),(()=>t.state),i,s)},Object.defineProperty(t,"__esModule",{value:!0})}));
21
+ */function i(t,e){if(Object.is(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;const s=Object.keys(t);if(s.length!==Object.keys(e).length)return!1;for(let i=0;i<s.length;i++)if(!Object.prototype.hasOwnProperty.call(e,s[i])||!Object.is(t[s[i]],e[s[i]]))return!1;return!0}t.Store=class{listeners=new Set;_batching=!1;_flushing=0;constructor(t,e){this.state=t,this.options=e}subscribe=t=>{this.listeners.add(t);const e=this.options?.onSubscribe?.(t,this);return()=>{this.listeners.delete(t),e?.()}};setState=t=>{const e=this.state;this.state=this.options?.updateFn?this.options.updateFn(e)(t):t(e),this.options?.onUpdate?.(),this._flush()};_flush=()=>{if(this._batching)return;const t=++this._flushing;this.listeners.forEach((e=>{this._flushing===t&&e()}))};batch=t=>{if(this._batching)return t();this._batching=!0,t(),this._batching=!1,this._flush()}},t.shallow=i,t.useStore=function(t,e=(t=>t)){return s.useSyncExternalStoreWithSelector(t.subscribe,(()=>t.state),(()=>t.state),e,i)},Object.defineProperty(t,"__esModule",{value:!0})}));
22
22
  //# sourceMappingURL=index.production.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.production.js","sources":["../../src/index.tsx","../../../store/build/esm/index.js"],"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 isMountedRef = React.useRef(false)\n // const [state, setState] = React.useState<{ ref: TSelected }>({\n // ref: undefined!,\n // })\n\n const slice = useSyncExternalStoreWithSelector(\n store.subscribe,\n () => store.state,\n () => store.state,\n selector,\n shallow,\n )\n\n // if (!isMountedRef.current) {\n // state.ref = slice\n // }\n\n // if (slice !== state.ref) {\n // setState({ ref: slice })\n // }\n\n // React.useEffect(() => {\n // isMountedRef.current = true\n // return () => {\n // isMountedRef.current = false\n // }\n // }, [])\n\n // return state.ref\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","/**\n * @tanstack/store/src/index.ts\n *\n * Copyright (c) TanStack\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE.md file in the root directory of this source tree.\n *\n * @license MIT\n */\nclass Store {\n listeners = new Set();\n _batching = false;\n _flushing = 0;\n constructor(initialState, options) {\n this.state = initialState;\n this.options = options;\n }\n subscribe = listener => {\n this.listeners.add(listener);\n const unsub = this.options?.onSubscribe?.(listener, this);\n return () => {\n this.listeners.delete(listener);\n unsub?.();\n };\n };\n setState = updater => {\n const previous = this.state;\n this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);\n\n // Always run onUpdate, regardless of batching\n this.options?.onUpdate?.();\n\n // Attempt to flush\n this._flush();\n };\n _flush = () => {\n if (this._batching) return;\n const flushId = ++this._flushing;\n this.listeners.forEach(listener => {\n if (this._flushing !== flushId) return;\n listener();\n });\n };\n batch = cb => {\n if (this._batching) return cb();\n this._batching = true;\n cb();\n this._batching = false;\n this._flush();\n };\n}\n\nexport { Store };\n//# sourceMappingURL=index.js.map\n"],"names":["shallow","objA","objB","Object","is","keysA","keys","length","i","prototype","hasOwnProperty","call","listeners","Set","_batching","_flushing","constructor","initialState","options","this","state","subscribe","listener","add","unsub","onSubscribe","delete","setState","updater","previous","updateFn","onUpdate","_flush","flushId","forEach","batch","cb","store","selector","d","useSyncExternalStoreWithSelector"],"mappings":";;;;;;;;;;;;;;;;;;;;KAiDO,SAASA,EAAWC,EAASC,GAClC,GAAIC,OAAOC,GAAGH,EAAMC,GAClB,OAAO,EAGT,GACkB,iBAATD,GACE,OAATA,GACgB,iBAATC,GACE,OAATA,EAEA,OAAO,EAGT,MAAMG,EAAQF,OAAOG,KAAKL,GAC1B,GAAII,EAAME,SAAWJ,OAAOG,KAAKJ,GAAMK,OACrC,OAAO,EAGT,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAAME,OAAQC,IAChC,IACGL,OAAOM,UAAUC,eAAeC,KAAKT,EAAMG,EAAMG,MACjDL,OAAOC,GAAGH,EAAKI,EAAMG,IAAgBN,EAAKG,EAAMG,KAEjD,OAAO,EAGX,OAAO,CACT,SCnEA,MACEI,UAAY,IAAIC,IAChBC,WAAY,EACZC,UAAY,EACZC,YAAYC,EAAcC,GACxBC,KAAKC,MAAQH,EACbE,KAAKD,QAAUA,CAChB,CACDG,UAAYC,IACVH,KAAKP,UAAUW,IAAID,GACnB,MAAME,EAAQL,KAAKD,SAASO,cAAcH,EAAUH,MACpD,MAAO,KACLA,KAAKP,UAAUc,OAAOJ,GACtBE,KAAS,CACV,EAEHG,SAAWC,IACT,MAAMC,EAAWV,KAAKC,MACtBD,KAAKC,MAAQD,KAAKD,SAASY,SAAWX,KAAKD,QAAQY,SAASD,EAAtBV,CAAgCS,GAAWA,EAAQC,GAGzFV,KAAKD,SAASa,aAGdZ,KAAKa,QAAQ,EAEfA,OAAS,KACP,GAAIb,KAAKL,UAAW,OACpB,MAAMmB,IAAYd,KAAKJ,UACvBI,KAAKP,UAAUsB,SAAQZ,IACjBH,KAAKJ,YAAckB,GACvBX,GAAU,GACV,EAEJa,MAAQC,IACN,GAAIjB,KAAKL,UAAW,OAAOsB,IAC3BjB,KAAKL,WAAY,EACjBsB,IACAjB,KAAKL,WAAY,EACjBK,KAAKa,QAAQ,0BDzCV,SAKLK,EACAC,EAAmDC,IAAMA,IAgCzD,OAzBcC,EAAAA,iCACZH,EAAMhB,WACN,IAAMgB,EAAMjB,QACZ,IAAMiB,EAAMjB,OACZkB,EACAtC,EAqBJ"}
1
+ {"version":3,"file":"index.production.js","sources":["../../src/index.tsx","../../../store/build/esm/index.js"],"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\nconst useLayoutEffect =\n typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\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 isMountedRef = React.useRef(false)\n // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({\n // ref: selector(store.state),\n // }))\n\n // if (!shallow(selector(store.state), state.ref)) {\n // setState(() => ({ ref: selector(store.state) }))\n // }\n\n // useLayoutEffect(() => {\n // console.log('effect')\n\n // const cb = () => {\n // const next = selector(store.state)\n // console.log('onsub')\n // if (!shallow(next, state.ref)) {\n // console.log('set')\n // setState(() => ({ ref: selector(store.state) }))\n // }\n // }\n\n // return store.subscribe(cb)\n // }, [])\n\n const slice = useSyncExternalStoreWithSelector(\n store.subscribe,\n () => store.state,\n () => store.state,\n selector,\n shallow,\n )\n\n // if (!isMountedRef.current) {\n // state.ref = slice\n // }\n\n // if (!shallow(slice, state.ref)) {\n // setState({ ref: slice })\n // }\n\n // React.useEffect(() => {\n // isMountedRef.current = true\n // return () => {\n // isMountedRef.current = false\n // }\n // }, [])\n\n // return state.ref\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","/**\n * @tanstack/store/src/index.ts\n *\n * Copyright (c) TanStack\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE.md file in the root directory of this source tree.\n *\n * @license MIT\n */\nclass Store {\n listeners = new Set();\n _batching = false;\n _flushing = 0;\n constructor(initialState, options) {\n this.state = initialState;\n this.options = options;\n }\n subscribe = listener => {\n this.listeners.add(listener);\n const unsub = this.options?.onSubscribe?.(listener, this);\n return () => {\n this.listeners.delete(listener);\n unsub?.();\n };\n };\n setState = updater => {\n const previous = this.state;\n this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);\n\n // Always run onUpdate, regardless of batching\n this.options?.onUpdate?.();\n\n // Attempt to flush\n this._flush();\n };\n _flush = () => {\n if (this._batching) return;\n const flushId = ++this._flushing;\n this.listeners.forEach(listener => {\n if (this._flushing !== flushId) return;\n listener();\n });\n };\n batch = cb => {\n if (this._batching) return cb();\n this._batching = true;\n cb();\n this._batching = false;\n this._flush();\n };\n}\n\nexport { Store };\n//# sourceMappingURL=index.js.map\n"],"names":["shallow","objA","objB","Object","is","keysA","keys","length","i","prototype","hasOwnProperty","call","listeners","Set","_batching","_flushing","constructor","initialState","options","this","state","subscribe","listener","add","unsub","onSubscribe","delete","setState","updater","previous","updateFn","onUpdate","_flush","flushId","forEach","batch","cb","store","selector","d","useSyncExternalStoreWithSelector"],"mappings":";;;;;;;;;;;;;;;;;;;;KAuEO,SAASA,EAAWC,EAASC,GAClC,GAAIC,OAAOC,GAAGH,EAAMC,GAClB,OAAO,EAGT,GACkB,iBAATD,GACE,OAATA,GACgB,iBAATC,GACE,OAATA,EAEA,OAAO,EAGT,MAAMG,EAAQF,OAAOG,KAAKL,GAC1B,GAAII,EAAME,SAAWJ,OAAOG,KAAKJ,GAAMK,OACrC,OAAO,EAGT,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAAME,OAAQC,IAChC,IACGL,OAAOM,UAAUC,eAAeC,KAAKT,EAAMG,EAAMG,MACjDL,OAAOC,GAAGH,EAAKI,EAAMG,IAAgBN,EAAKG,EAAMG,KAEjD,OAAO,EAGX,OAAO,CACT,SCzFA,MACEI,UAAY,IAAIC,IAChBC,WAAY,EACZC,UAAY,EACZC,YAAYC,EAAcC,GACxBC,KAAKC,MAAQH,EACbE,KAAKD,QAAUA,CAChB,CACDG,UAAYC,IACVH,KAAKP,UAAUW,IAAID,GACnB,MAAME,EAAQL,KAAKD,SAASO,cAAcH,EAAUH,MACpD,MAAO,KACLA,KAAKP,UAAUc,OAAOJ,GACtBE,KAAS,CACV,EAEHG,SAAWC,IACT,MAAMC,EAAWV,KAAKC,MACtBD,KAAKC,MAAQD,KAAKD,SAASY,SAAWX,KAAKD,QAAQY,SAASD,EAAtBV,CAAgCS,GAAWA,EAAQC,GAGzFV,KAAKD,SAASa,aAGdZ,KAAKa,QAAQ,EAEfA,OAAS,KACP,GAAIb,KAAKL,UAAW,OACpB,MAAMmB,IAAYd,KAAKJ,UACvBI,KAAKP,UAAUsB,SAAQZ,IACjBH,KAAKJ,YAAckB,GACvBX,GAAU,GACV,EAEJa,MAAQC,IACN,GAAIjB,KAAKL,UAAW,OAAOsB,IAC3BjB,KAAKL,WAAY,EACjBsB,IACAjB,KAAKL,WAAY,EACjBK,KAAKa,QAAQ,0BDtCV,SAKLK,EACAC,EAAmDC,IAAMA,IAmDzD,OAzBcC,EAAAA,iCACZH,EAAMhB,WACN,IAAMgB,EAAMjB,QACZ,IAAMiB,EAAMjB,OACZkB,EACAtC,EAqBJ"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tanstack/react-store",
3
3
  "author": "Tanner Linsley",
4
- "version": "0.0.1-beta.118",
4
+ "version": "0.0.1-beta.120",
5
5
  "license": "MIT",
6
6
  "repository": "tanstack/react-store",
7
7
  "homepage": "https://tanstack.com/",
package/src/index.tsx CHANGED
@@ -6,6 +6,9 @@ export * from '@tanstack/store'
6
6
 
7
7
  export type NoInfer<T> = [T][T extends any ? 0 : never]
8
8
 
9
+ const useLayoutEffect =
10
+ typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
11
+
9
12
  export function useStore<
10
13
  TState,
11
14
  TSelected = NoInfer<TState>,
@@ -15,9 +18,28 @@ export function useStore<
15
18
  selector: (state: NoInfer<TState>) => TSelected = (d) => d as any,
16
19
  ) {
17
20
  // const isMountedRef = React.useRef(false)
18
- // const [state, setState] = React.useState<{ ref: TSelected }>({
19
- // ref: undefined!,
20
- // })
21
+ // const [state, setState] = React.useState<{ ref: TSelected }>(() => ({
22
+ // ref: selector(store.state),
23
+ // }))
24
+
25
+ // if (!shallow(selector(store.state), state.ref)) {
26
+ // setState(() => ({ ref: selector(store.state) }))
27
+ // }
28
+
29
+ // useLayoutEffect(() => {
30
+ // console.log('effect')
31
+
32
+ // const cb = () => {
33
+ // const next = selector(store.state)
34
+ // console.log('onsub')
35
+ // if (!shallow(next, state.ref)) {
36
+ // console.log('set')
37
+ // setState(() => ({ ref: selector(store.state) }))
38
+ // }
39
+ // }
40
+
41
+ // return store.subscribe(cb)
42
+ // }, [])
21
43
 
22
44
  const slice = useSyncExternalStoreWithSelector(
23
45
  store.subscribe,
@@ -31,7 +53,7 @@ export function useStore<
31
53
  // state.ref = slice
32
54
  // }
33
55
 
34
- // if (slice !== state.ref) {
56
+ // if (!shallow(slice, state.ref)) {
35
57
  // setState({ ref: slice })
36
58
  // }
37
59