@solid-primitives/context - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

./dist/index.cjs

+'use strict';
+
+var solidJs = require('solid-js');
+
+// src/index.ts
+function createContextProvider(factoryFn, defaults) {
+  const ctx = solidJs.createContext(defaults);
+  return [
+    (props) => {
+      return solidJs.createComponent(ctx.Provider, {
+        value: factoryFn(props),
+        get children() {
+          return props.children;
+        }
+      });
+    },
+    () => solidJs.useContext(ctx)
+  ];
+}
+function MultiProvider(props) {
+  const { values } = props;
+  const fn = (i) => {
+    let item = values[i];
+    if (!item)
+      return props.children;
+    const ctxProps = {
+      get children() {
+        return fn(i + 1);
+      }
+    };
+    if (Array.isArray(item)) {
+      ctxProps.value = item[1];
+      item = item[0];
+      if (typeof item !== "function")
+        item = item.Provider;
+    }
+    return solidJs.createComponent(item, ctxProps);
+  };
+  return fn(0);
+}
+
+exports.MultiProvider = MultiProvider;
+exports.createContextProvider = createContextProvider;

dist/index.d.cts

+import { JSX, Context, FlowComponent } from 'solid-js';
+import { ContextProviderComponent } from '../node_modules/solid-js/types/reactive/signal.js';
+
+type ContextProviderProps = {
+    children?: JSX.Element;
+} & Record<string, unknown>;
+type ContextProvider<T extends ContextProviderProps> = (props: {
+    children: JSX.Element;
+} & T) => JSX.Element;
+/**
+ * Create the Context Provider component and useContext function with types inferred from the factory function.
+ * @param factoryFn Factory function will run when the provider component in executed. It takes the provider component `props` as it's argument, and what it returns will be available in the contexts for all the underlying components.
+ * @param defaults fallback returned from useContext function if the context wasn't provided
+ * @returns tuple of `[provider component, useContext function]`
+ * @example
+ * ```tsx
+ * const [CounterProvider, useCounter] = createContextProvider((props: { initial: number }) => {
+ *    const [count, setCount] = createSignal(props.initial);
+ *    const increment = () => setCount(count() + 1)
+ *    return { count, increment };
+ * });
+ * // Provide the context
+ * <CounterProvider initial={1}>
+ *    <App/>
+ * </CounterProvider>
+ * // get the context
+ * const ctx = useCounter()
+ * ctx?.count() // => 1
+ * ```
+ */
+declare function createContextProvider<T, P extends ContextProviderProps>(factoryFn: (props: P) => T, defaults: T): [provider: ContextProvider<P>, useContext: () => T];
+declare function createContextProvider<T, P extends ContextProviderProps>(factoryFn: (props: P) => T): [provider: ContextProvider<P>, useContext: () => T | undefined];
+/**
+ * A component that allows you to provide multiple contexts at once. It will work exactly like nesting multiple providers as separate components, but it will save you from the nesting.
+ *
+ * @param values Array of tuples of `[ContextProviderComponent, value]` or `[Context, value]` or bound `ContextProviderComponent` (that doesn't take a `value` property).
+ *
+ * @example
+ * ```tsx
+ * // before
+ * <CounterCtx.Provider value={1}>
+ *   <NameCtx.Provider value="John">
+ *     <App/>
+ *   </NameCtx.Provider>
+ * </CounterCtx.Provider>
+ *
+ * // after
+ * <MultiProvider values={[
+ *  [CounterCtx.Provider, 1],
+ *  [NameCtx.Provider, "John"]
+ * ]}>
+ *  <App/>
+ * </MultiProvider>
+ * ```
+ */
+declare function MultiProvider<T extends readonly [unknown?, ...unknown[]]>(props: {
+    values: {
+        [K in keyof T]: readonly [
+            Context<T[K]> | ContextProviderComponent<T[K]>,
+            [
+                T[K]
+            ][T extends unknown ? 0 : never]
+        ] | FlowComponent;
+    };
+    children: JSX.Element;
+}): JSX.Element;
+
+export { ContextProvider, ContextProviderProps, MultiProvider, createContextProvider };

dist/index.d.ts

 import { JSX, Context, FlowComponent } from 'solid-js';
-import { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from '../node_modules/solid-js/types/reactive/signal.js';
 
@@ -4,0 +4,0 @@ type ContextProviderProps = {

package.json

 {
   "name": "@solid-primitives/context",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Primitives simplifying or extending the SolidJS Context API",
@@ -39,3 +39,6 @@ "author": "Damian Tarnawski @thetarnav <[e-mail]>",
     },
-    "require": "./dist/index.cjs"
+    "require": {
+      "types": "./dist/index.d.cts",
+      "default": "./dist/index.cjs"
+    }
   },
@@ -52,9 +55,12 @@ "keywords": [
   "typesVersions": {},
+  "devDependencies": {
+    "solid-js": "^1.8.7"
+  },
   "scripts": {
-    "dev": "vite serve dev",
-    "page": "vite build dev",
-    "build": "jiti ../../scripts/build.ts",
-    "test": "vitest -c ../../configs/vitest.config.ts",
-    "test:ssr": "pnpm run test --mode ssr"
+    "dev": "tsx ../../scripts/dev.ts",
+    "build": "tsx ../../scripts/build.ts",
+    "vitest": "vitest -c ../../configs/vitest.config.ts",
+    "test": "pnpm run vitest",
+    "test:ssr": "pnpm run vitest --mode ssr"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

16096

32.04%

Number of package files

8

33.33%

Lines of code

184

27.78%

Worsened metrics

Dev dependency count

1

Infinity%

No dependency changes