fix(createSingleLoading, useReactive): use create option to avoid i…

…mport and ESM require error

examples/vite-unocss-csr/src/app.tsx

@@ -1,19 +1,19 @@
+import { useMount } from '@shined/react-use'
 // import { PartSix } from './parts/part-six'
 // import { PartFive } from './parts/part-five'
 // import { PartFour } from './parts/part-four'
 // import { PartOne } from './parts/part-one'
 // import { PartThree } from './parts/part-three'
 // import { PartTwo } from './parts/part-two'
-// import { Playground } from './playground'
-import { useMount } from '@shined/react-use'
+import { Playground } from './playground'
 
 export function App() {
   useMount(() => {})
 
   return (
     <div className="min-h-screen w-screen flex justify-center">
       <div className="flex flex-col gap-2 w-800px">
-        {/* <Playground /> */}
+        <Playground />
         {/* <PartSix /> */}
         {/* <PartFive /> */}
         {/* <PartFour /> */}

src/create-single-loading/demo.tsx

@@ -1,7 +1,8 @@
 import { Button, Card, KeyValue, OTP, Zone, wait as mockFetch } from '@/components'
 import { createSingleLoading } from '@shined/react-use'
+import { create } from '@shined/reactive'
 
-const pageLoading = createSingleLoading()
+const pageLoading = createSingleLoading({ create })
 
 const fetchOutsideReact = pageLoading.bind(async (otp: string) => {
   await mockFetch()

src/create-single-loading/index.mdx

@@ -38,7 +38,8 @@ import { Source } from '@/components'
 ## API
 
 ```tsx
-const pageLoading = createSingleLoading(options)
+import { create } from '@shined/reactive'
+const pageLoading = createSingleLoading({ create })
 const { set, get, bind, useLoding, useAsyncFn } = pageLoading
 ```
 

src/create-single-loading/index.ts

@@ -1,4 +1,5 @@
 import { useAsyncFn as useAsyncFnOrigin } from '../use-async-fn'
+import { isFunction } from '../utils/basic'
 
 import type { create } from '@shined/reactive'
 import type { UseAsyncFnReturns } from '../use-async-fn'
@@ -51,6 +52,10 @@ export interface CreateSingleLoadingReturns {
 }
 
 export interface CreateSingleLoadingOptions {
+  /**
+   * `Create` function of Reactive
+   */
+  create: typeof create
   /**
    * Whether set to false on error
    *
@@ -75,11 +80,14 @@ export interface CreateSingleLoadingOptions {
  *
  * @see {@link https://sheinsight.github.io/reactive/ | Reactive - Documentation}
  */
-export function createSingleLoading(options: CreateSingleLoadingOptions = {}): CreateSingleLoadingReturns {
-  const { resetOnError = true, initialState = false } = options
+export function createSingleLoading(options: CreateSingleLoadingOptions): CreateSingleLoadingReturns {
+  const { resetOnError = true, create, initialState = false } = options
+
+  if (!isFunction(create)) {
+    throw new Error('Please provide the `create` function from `@shined/reactive`')
+  }
 
-  const createStore = require('@shined/reactive').create as typeof create
-  const store = createStore({ loading: initialState })
+  const store = create({ loading: initialState })
 
   function bind<T extends AnyFunc>(func: T): T {
     return (async (...args: Parameters<T>) => {

src/create-single-loading/index_zh-cn.mdx

@@ -38,7 +38,8 @@ import { Source } from '@/components'
 ## API
 
 ```tsx
-const pageLoading = createSingleLoading(options)
+import { create } from '@shined/reactive'
+const pageLoading = createSingleLoading({ create })
 const { set, get, bind, useLoading, useAsyncFn } = pageLoading
 ```
 

src/use-reactive/demo.tsx

@@ -1,12 +1,16 @@
 import { Button, Card, KeyValue, OTP, Zone } from '@/components'
 import { useReactive } from '@shined/react-use'
+import { create } from '@shined/reactive'
 
 export function App() {
-  const [state, mutate] = useReactive({
-    name: 'Bob',
-    age: 20,
-    hobbies: ['running', 'coding'],
-  })
+  const [state, mutate] = useReactive(
+    {
+      name: 'Bob',
+      age: 20,
+      hobbies: ['running', 'coding'],
+    },
+    { create },
+  )
 
   return (
     <Card>

src/use-reactive/index.mdx

@@ -37,7 +37,8 @@ import { Source } from '@/components'
 ## API
 
 ```tsx
-const [state, mutate] = useReactive(initialState, options)
+import { create } from '@shined/reactive';
+const [state, mutate] = useReactive(initialState, { create })
 ```
 
 ### InitialState

src/use-reactive/index.ts

@@ -1,4 +1,5 @@
 import { useCreation } from '../use-creation'
+import { isFunction } from '../utils/basic'
 
 import type { create } from '@shined/reactive'
 
@@ -11,19 +12,23 @@ interface SnapshotOptions<StateSlice> {
 /**
  * A React Hook that helps to use [Reactive](https://sheinsight.github.io/reactive) in React with ease.
  */
-export function useReactive<State extends object>(initialState: State): readonly [State, State]
 export function useReactive<State extends object>(
   initialState: State,
-  options?: SnapshotOptions<State>,
-): readonly [State, State]
-export function useReactive<State extends object>(
-  initialState: State,
-  options: SnapshotOptions<State> = {},
+  options: SnapshotOptions<State> & { create: typeof create },
 ): readonly [State, State] {
   const store = useCreation(() => {
-    const createStore = require('@shined/reactive').create as typeof create
-    return createStore(initialState)
+    if (!isFunction(options.create)) {
+      throw new Error('Please provide the `create` function from `@shined/reactive`')
+    }
+
+    return options.create(initialState)
   })
 
-  return [store.useSnapshot(options), store.mutate] as const
+  return [
+    store.useSnapshot({
+      sync: options.sync,
+      isEqual: options.isEqual,
+    }),
+    store.mutate,
+  ] as const
 }

src/use-reactive/index_zh-cn.mdx

@@ -37,7 +37,8 @@ import { Source } from '@/components'
 ## API
 
 ```tsx
-const [state, mutate] = useReactive(initialState, options)
+import { create } from '@shined/reactive';
+const [state, mutate] = useReactive(initialState, { create })
 ```
 
 ### InitialState