@nano_kit/react 1.0.0-alpha.3

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 - present, TrigenSoftware
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,63 @@
+# @nano_kit/react
+
+[![ESM-only package][package]][package-url]
+[![NPM version][npm]][npm-url]
+[![Dependencies status][deps]][deps-url]
+[![Install size][size]][size-url]
+[![Build status][build]][build-url]
+[![Coverage status][coverage]][coverage-url]
+
+[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
+[package-url]: https://nodejs.org/api/esm.html
+
+[npm]: https://img.shields.io/npm/v/%40nano_kit%2Freact.svg
+[npm-url]: https://npmjs.com/package/@nano_kit/react
+
+[deps]: https://img.shields.io/librariesio/release/npm/%40nano_kit%2Freact
+[deps-url]: https://libraries.io/npm/%40nano_kit%2Freact/tree
+
+[size]: https://deno.bundlejs.com/badge?q=%40nano_kit%2Freact
+[size-url]: https://bundlejs.com/?q=%40nano_kit%2Freact
+
+[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/nano_kit/tests.yml?branch=main
+[build-url]: https://github.com/TrigenSoftware/nano_kit/actions
+
+[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/nano_kit.svg
+[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/nano_kit
+
+The `@nano_kit/react` package provides seamless integration between [@nano_kit/store](../store) signals, dependency injection and React components.
+
+## Installation
+
+```bash
+pnpm add @nano_kit/store @nano_kit/react
+# or
+npm install @nano_kit/store @nano_kit/react
+# or
+yarn add @nano_kit/store @nano_kit/react
+```
+
+## Quick Start
+
+Here is a minimal example demonstrating reactive state in React:
+
+```tsx
+import { signal } from '@nano_kit/store'
+import { useSignal } from '@nano_kit/react'
+
+const $count = signal(0)
+
+export function Counter() {
+  const count = useSignal($count)
+
+  return (
+    <button onClick={() => $count(count + 1)}>
+      Count: {count}
+    </button>
+  )
+}
+```
+
+## Documentation
+
+For comprehensive guides, API reference, and integration patterns, visit the [documentation website](https://nano_kit.js.org/integrations/react).

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import { type ReadableSignal, type InjectionProvider, type InjectionFactory, InjectionContext } from '@nano_kit/store';
+import { type ReactNode } from 'react';
+/**
+ * Get signal store value and subscribe to changes.
+ * @param $signal - The signal store.
+ * @returns The signal store value.
+ */
+export declare function useSignal<T>($signal: ReadableSignal<T>): T;
+export declare const ReactInjectionContext: import("react").Context<InjectionContext | undefined>;
+/**
+ * Inject a dependency.
+ * @param factory - The factory function to create or get the dependency.
+ * @returns The dependency.
+ */
+export declare function useInject<T>(factory: InjectionFactory<T>): T;
+/**
+ * Create a hook to inject a dependency.
+ * @param factory - The factory function to create or get the dependency.
+ * @returns A hook function to get the dependency.
+ */
+export declare function hook<T>(factory: InjectionFactory<T>): () => T;
+export interface InjectionContextProps {
+    context?: InjectionContext | InjectionProvider[];
+    children: ReactNode;
+}
+/**
+ * Provide dependencies to children.
+ * @param props
+ * @param props.context - The dependencies to provide or InjectionContext instance.
+ * @param props.children - The children to provide the dependencies to.
+ * @returns The component.
+ */
+export declare function InjectionContextProvider({ context, children }: InjectionContextProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export interface IsolateProps {
+    children: ReactNode;
+}
+/**
+ * Isolate children to new isolated injection context.
+ * @param props
+ * @param props.children - The children to isolate.
+ * @returns The component.
+ */
+export declare function Isolate({ children }: IsolateProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,gBAAgB,EAGjB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAA;AAEd;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,KAkBtD;AAED,eAAO,MAAM,qBAAqB,uDAAyE,CAAA;AAE3G;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,CAQ5D;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAE7D;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,gBAAgB,GAAG,iBAAiB,EAAE,CAAA;IAChD,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,QAAQ,EACT,EAAE,qBAAqB,+TAiBvB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAMjD"}

package/dist/index.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { effect, inject, InjectionContext } from '@nano_kit/store';
+import { createContext, useRef, useCallback, useSyncExternalStore, useContext, useMemo } from 'react';
+
+function useSignal($signal) {
+  const snapshotRef = useRef(void 0);
+  const sub = useCallback(
+    (emit) => effect(() => {
+      const value = $signal();
+      if (snapshotRef.current !== value) {
+        snapshotRef.current = value;
+        emit();
+      }
+    }),
+    [$signal]
+  );
+  const get = () => snapshotRef.current;
+  snapshotRef.current = $signal();
+  return useSyncExternalStore(sub, get, get);
+}
+const ReactInjectionContext = /* @__PURE__ */ createContext(void 0);
+function useInject(factory) {
+  const currentContext = useContext(ReactInjectionContext);
+  const dependency = useMemo(
+    () => inject(factory, currentContext),
+    [currentContext, factory]
+  );
+  return dependency;
+}
+function hook(factory) {
+  return () => useInject(factory);
+}
+function InjectionContextProvider({
+  context,
+  children
+}) {
+  const currentContext = useContext(ReactInjectionContext);
+  const contextRef = useRef(null);
+  if (!context && currentContext) {
+    return children;
+  }
+  const value = contextRef.current ??= context instanceof InjectionContext ? context : new InjectionContext(context, currentContext);
+  return /* @__PURE__ */ jsx(ReactInjectionContext.Provider, { value, children });
+}
+function Isolate({ children }) {
+  return /* @__PURE__ */ jsx(ReactInjectionContext.Provider, { value: void 0, children });
+}
+
+export { InjectionContextProvider, Isolate, ReactInjectionContext, hook, useInject, useSignal };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import {\n  type ReadableSignal,\n  type InjectionProvider,\n  type InjectionFactory,\n  InjectionContext,\n  inject,\n  effect\n} from '@nano_kit/store'\nimport {\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n  createContext,\n  useContext\n} from 'react'\n\n/**\n * Get signal store value and subscribe to changes.\n * @param $signal - The signal store.\n * @returns The signal store value.\n */\nexport function useSignal<T>($signal: ReadableSignal<T>) {\n  const snapshotRef = useRef(undefined as T)\n  const sub = useCallback(\n    (emit: () => void) => effect(() => {\n      const value = $signal()\n\n      if (snapshotRef.current !== value) {\n        snapshotRef.current = value\n        emit()\n      }\n    }),\n    [$signal]\n  )\n  const get = () => snapshotRef.current\n\n  snapshotRef.current = $signal()\n\n  return useSyncExternalStore(sub, get, get)\n}\n\nexport const ReactInjectionContext = /* @__PURE__ */ createContext<InjectionContext | undefined>(undefined)\n\n/**\n * Inject a dependency.\n * @param factory - The factory function to create or get the dependency.\n * @returns The dependency.\n */\nexport function useInject<T>(factory: InjectionFactory<T>): T {\n  const currentContext = useContext(ReactInjectionContext)\n  const dependency = useMemo(\n    () => inject(factory, currentContext),\n    [currentContext, factory]\n  )\n\n  return dependency\n}\n\n/**\n * Create a hook to inject a dependency.\n * @param factory - The factory function to create or get the dependency.\n * @returns A hook function to get the dependency.\n */\nexport function hook<T>(factory: InjectionFactory<T>): () => T {\n  return () => useInject(factory)\n}\n\nexport interface InjectionContextProps {\n  context?: InjectionContext | InjectionProvider[]\n  children: ReactNode\n}\n\n/**\n * Provide dependencies to children.\n * @param props\n * @param props.context - The dependencies to provide or InjectionContext instance.\n * @param props.children - The children to provide the dependencies to.\n * @returns The component.\n */\nexport function InjectionContextProvider({\n  context,\n  children\n}: InjectionContextProps) {\n  const currentContext = useContext(ReactInjectionContext)\n  const contextRef = useRef<InjectionContext>(null)\n\n  if (!context && currentContext) {\n    return children\n  }\n\n  const value = contextRef.current ??= context instanceof InjectionContext\n    ? context\n    : new InjectionContext(context, currentContext)\n\n  return (\n    <ReactInjectionContext.Provider value={value}>\n      {children}\n    </ReactInjectionContext.Provider>\n  )\n}\n\nexport interface IsolateProps {\n  children: ReactNode\n}\n\n/**\n * Isolate children to new isolated injection context.\n * @param props\n * @param props.children - The children to isolate.\n * @returns The component.\n */\nexport function Isolate({ children }: IsolateProps) {\n  return (\n    <ReactInjectionContext.Provider value={undefined}>\n      {children}\n    </ReactInjectionContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;AAuBO,SAAS,UAAa,OAAA,EAA4B;AACvD,EAAA,MAAM,WAAA,GAAc,OAAO,MAAc,CAAA;AACzC,EAAA,MAAM,GAAA,GAAM,WAAA;AAAA,IACV,CAAC,IAAA,KAAqB,MAAA,CAAO,MAAM;AACjC,MAAA,MAAM,QAAQ,OAAA,EAAQ;AAEtB,MAAA,IAAI,WAAA,CAAY,YAAY,KAAA,EAAO;AACjC,QAAA,WAAA,CAAY,OAAA,GAAU,KAAA;AACtB,QAAA,IAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAC,CAAA;AAAA,IACD,CAAC,OAAO;AAAA,GACV;AACA,EAAA,MAAM,GAAA,GAAM,MAAM,WAAA,CAAY,OAAA;AAE9B,EAAA,WAAA,CAAY,UAAU,OAAA,EAAQ;AAE9B,EAAA,OAAO,oBAAA,CAAqB,GAAA,EAAK,GAAA,EAAK,GAAG,CAAA;AAC3C;AAEO,MAAM,qBAAA,iCAAoF,MAAS;AAOnG,SAAS,UAAa,OAAA,EAAiC;AAC5D,EAAA,MAAM,cAAA,GAAiB,WAAW,qBAAqB,CAAA;AACvD,EAAA,MAAM,UAAA,GAAa,OAAA;AAAA,IACjB,MAAM,MAAA,CAAO,OAAA,EAAS,cAAc,CAAA;AAAA,IACpC,CAAC,gBAAgB,OAAO;AAAA,GAC1B;AAEA,EAAA,OAAO,UAAA;AACT;AAOO,SAAS,KAAQ,OAAA,EAAuC;AAC7D,EAAA,OAAO,MAAM,UAAU,OAAO,CAAA;AAChC;AAcO,SAAS,wBAAA,CAAyB;AAAA,EACvC,OAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,cAAA,GAAiB,WAAW,qBAAqB,CAAA;AACvD,EAAA,MAAM,UAAA,GAAa,OAAyB,IAAI,CAAA;AAEhD,EAAA,IAAI,CAAC,WAAW,cAAA,EAAgB;AAC9B,IAAA,OAAO,QAAA;AAAA,EACT;AAEA,EAAA,MAAM,KAAA,GAAQ,WAAW,OAAA,KAAY,OAAA,YAAmB,mBACpD,OAAA,GACA,IAAI,gBAAA,CAAiB,OAAA,EAAS,cAAc,CAAA;AAEhD,EAAA,uBACE,GAAA,CAAC,qBAAA,CAAsB,QAAA,EAAtB,EAA+B,OAC7B,QAAA,EACH,CAAA;AAEJ;AAYO,SAAS,OAAA,CAAQ,EAAE,QAAA,EAAS,EAAiB;AAClD,EAAA,2BACG,qBAAA,CAAsB,QAAA,EAAtB,EAA+B,KAAA,EAAO,QACpC,QAAA,EACH,CAAA;AAEJ;;;;"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@nano_kit/react",
+  "type": "module",
+  "version": "1.0.0-alpha.3",
+  "description": "Seamless integration between @nano_kit/store signals, dependency injection and React components.",
+  "author": "dangreen",
+  "license": "MIT",
+  "homepage": "https://nano_kit.js.org/integrations/react",
+  "funding": "https://ko-fi.com/dangreen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TrigenSoftware/nano_kit.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/TrigenSoftware/nano_kit/issues"
+  },
+  "keywords": [
+    "react",
+    "store",
+    "state",
+    "state-management",
+    "signal",
+    "reactive",
+    "hooks",
+    "nano_kit"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@nano_kit/store": "^1.0.0-alpha.0"
+  }
+}