feat(core): add sideEffects flag and enhance useContext functionality (#568)

productdevbook · web-flow · commit 5bfc6754fb43 · 2024-11-18T08:29:22.000+03:00
* feat(core): add sideEffects flag and enhance useContext functionality

* feat(core): include InjectionKey in createContext return type
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -13,7 +13,7 @@
   "bugs": {
     "url": "https://github.com/oku-ui/primitives/issues"
   },
-
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
diff --git a/packages/core/src/hooks/createContext.ts b/packages/core/src/hooks/createContext.ts
@@ -6,17 +6,20 @@ import { inject, type InjectionKey, provide } from 'vue'
  * @see https://vueuse.org/createInjectionState
  *
  */
-export function createContext<T>(contextName: string, defaultValue: T): readonly [useProvidingState: (state: T) => void, useContext: (consumerName?: string) => T]
-export function createContext<T>(contextName: string): readonly [useProvidingState: (state: T) => void, useContext: (consumerName: string) => T]
-export function createContext<T>(contextName: string, defaultValue?: T): readonly [useProvidingState: (state: T) => void, useContext: (consumerName?: string) => T] {
-  const key: string | InjectionKey<T> = Symbol(contextName)
+export function createContext<T>(contextName: string, defaultValue: T): readonly [useProvidingState: (state: T) => void, useContext: (consumerName?: string) => T, key: InjectionKey<T>]
+export function createContext<T>(contextName: string): readonly [useProvidingState: (state: T) => void, useContext: (consumerName: string) => T, key: InjectionKey<T>]
+export function createContext<T>(contextName: string, defaultValue?: T): readonly [useProvidingState: (state: T) => void, useContext: (consumerName?: string) => T, key: InjectionKey<T>] {
+  const key: InjectionKey<T> = Symbol(contextName)
 
   const provideContext = (state: T) => {
     provide(key, state)
   }
 
-  const useContext = (consumerName?: string) => {
-    const state = inject(key, defaultValue)
+  const useContext = (consumerName?: string, value?: any) => {
+    const state = inject(key, value ?? defaultValue)
+
+    if (state === null)
+      return state as any
 
     if (!state) {
       throw new Error(`\`${consumerName}\` must be used within \`${contextName}\``)
@@ -25,5 +28,5 @@ export function createContext<T>(contextName: string, defaultValue?: T): readonl
     return state
   }
 
-  return [provideContext, useContext]
+  return [provideContext, useContext, key]
 }
