@reactables/react 1.0.2-beta.0

package/README.md

@@ -0,0 +1,149 @@
+# Reactables React
+
+## Description
+
+Reactable bindings for React Components
+
+## Table of Contents
+
+1. [Installation](#installation)
+1. [Providers](#providers)
+    1. [`StoreProvider`](#store-provider)
+1. [Hooks](#hooks)
+    1. [`useReactable`](#use-reactable)
+    1. [`useAppStore`](#store-provider)
+
+## Installation <a name="installation"></a>
+
+`npm i @reactables/react`
+
+## Providers<a name="providers"></a>
+
+### `StoreProvider`<a name="store-provider"></a>
+
+Used to set up a context containing one reactable responsible for managing application (global) state. The reactable can be accessed via the `useAppStore` hook in components.
+
+**Note: The reactable used for application state must be decorated with the `storeValue` decorator to ensure subsequent subscriptions to the reactable by components receive the latest stored value.**
+
+Example:
+```typescript
+// index.js
+
+import { storeValue, RxBuilder } from '@reactables/core';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+export interface AppState {
+  userLoggedIn: boolean
+}
+
+export interface AppActions {
+  logout: () => void;
+}
+
+const config = {
+  name: 'rxAppStore',
+  initialState: {
+    userLoggedIn: false,
+  },
+  reducers: {
+    loginSuccess: () => ({ userLoggedIn: true })
+    logout: () => ({ userLoggedIn: false })
+  }
+};
+
+const rxAppStore = storeValue(RxBuilder(config));
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
+  <StoreProvider rxStore={rxAppStore}>
+    <App />
+  </StoreProvider>
+);
+
+```
+
+## Hooks<a name="hooks"></a>
+
+### `useReactable` <a name="use-reactable"></a>
+
+React hook for binding a reactable to a React component. Accepts a reactable factory, dependencies (if any) and returns a tuple with the state `T`, actions `S`, and the original observable state `Observable<T>`.
+
+```typescript
+export declare const useReactable: <T, S, U extends unknown[]>(
+  reactableFactory: (...deps: U) => Reactable<T, S>, ...deps: U
+) => [T, S, Observable<T>];
+
+```
+
+Example:
+
+```typescript
+import React from 'react';
+import { RxBuilder } from '@reactables/core';
+import { useReactable } from '@reactables/react';
+
+const RxToggle = (
+  initialState = false,
+) =>
+  RxBuilder({
+    initialState,
+    name: 'rxToggle',
+    reducers: {
+      toggle: (state) => !state,
+    },
+  });
+
+const Toggle = () => {
+  const [state, actions] = useReactable(RxToggle, false);
+
+  if (!state) return;
+
+  return (
+    <div>
+      <div>Toggle is: { state ? 'on' : 'off'} </div>
+      <button type="button" onClick={actions.toggle}></button>
+    </div>
+  )
+}
+
+export default Toggle;
+
+```
+
+### `useAppStore`<a name="useAppStore"></a>
+
+React hook for accessing reactable provided by [`StoreProvider`](#store-provider) and binding it to a React component. Like [`useReactable`](use-reactable) it returns a tuple with the state `T`, actions `S`, and the original observable state `Observable<T>`.
+
+```typescript
+export declare const useAppStore: <T, S = ActionMap>() => [T, S, Observable<T>];
+```
+
+Example using the setup from [`StoreProvider`](#store-provider) example above:
+
+```typescript
+import React from 'react';
+import { useAppStore } from '@reactables/react';
+import { AppState, AppActions } from '../index'
+
+const App = () => {
+  const [appState, appActions] = useAppStore<AppState, AppActions>();
+
+  if (!appState) return;
+
+  return (
+    <>
+      <div>
+        User is {appState.userLoggedIn ? 'logged in': 'not logged in'}.
+      </div>
+      <button type="button" onClick={appActions.logout}>Logout</button>
+    </>
+
+  )
+}
+
+export default App;
+
+```

package/dist/Components/StoreProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Reactable } from '@reactables/core';
+export declare const StoreContext: React.Context<Reactable<unknown, unknown>>;
+interface StoreProviderProps<T, S> {
+    rxStore: Reactable<T, S>;
+    children?: React.ReactNode;
+}
+export declare const StoreProvider: <T, S>({ rxStore, children }: StoreProviderProps<T, S>) => React.JSX.Element;
+export {};

package/dist/Components/index.d.ts

@@ -0,0 +1 @@
+export { StoreProvider } from './StoreProvider';

package/dist/Hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useReactable, HookedReactable } from './useReactable';
+export { useAppStore } from './useAppStore';

package/dist/Hooks/useAppStore.d.ts

@@ -0,0 +1,3 @@
+import { ActionMap } from '@reactables/core';
+import { Observable } from 'rxjs';
+export declare const useAppStore: <T, S = ActionMap>() => [T, S, Observable<T>];

package/dist/Hooks/useReactable.d.ts

@@ -0,0 +1,4 @@
+import { Observable } from 'rxjs';
+import { Reactable, Action } from '@reactables/core';
+export type HookedReactable<T, S> = [T, S, Observable<T>, Observable<Action<unknown>>?];
+export declare const useReactable: <T, S, U extends unknown[]>(reactableFactory: (...props: U) => Reactable<T, S>, ...props: U) => HookedReactable<T, S>;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Components';
+export * from './Hooks';

package/dist/index.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var StoreContext = React__default["default"].createContext(null);
+var StoreProvider = function (_a) {
+    var rxStore = _a.rxStore, children = _a.children;
+    return React__default["default"].createElement(StoreContext.Provider, { value: rxStore }, rxStore && children);
+};
+
+var useReactable = function (reactableFactory) {
+    var props = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        props[_i - 1] = arguments[_i];
+    }
+    var _a = React.useMemo(function () { return reactableFactory.apply(void 0, props); }, []), state$ = _a[0], actions = _a[1], messages$ = _a[2];
+    var _b = React.useState(), state = _b[0], setState = _b[1];
+    React.useEffect(function () {
+        var subscription = state$.subscribe(function (result) {
+            setState(result);
+        });
+        var unsubscribe = subscription.unsubscribe.bind(subscription);
+        return unsubscribe;
+    }, [state$]);
+    return [state, actions, state$, messages$];
+};
+
+var useAppStore = function () {
+    var rxStore$ = React.useContext(StoreContext);
+    var rxStore = useReactable(function () { return rxStore$; });
+    return rxStore;
+};
+
+exports.StoreProvider = StoreProvider;
+exports.useAppStore = useAppStore;
+exports.useReactable = useReactable;

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@reactables/react",
+  "description": "React Helpers for reactables",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rimraf dist && rollup --config",
+    "lint": "eslint --max-warnings 0 \"src/**/*.ts*\" && prettier --check src/",
+    "fix": "eslint --fix \"src/**/*.ts*\" && prettier --write \"src/**/*.(ts*|scss)\""
+  },
+  "author": "David Lai",
+  "license": "ISC",
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "version": "1.0.2-beta.0"
+}