Typescript Typings

.circleci/config.yml

@@ -39,7 +39,7 @@ jobs:
 
       - run:
           name: Run Type checking
-          command: npm run flow -s
+          command: npm run types -s
 
       - run:
           name: Run Unit Tests

.eslintrc.js

@@ -7,7 +7,8 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
-    'plugin:flowtype/recommended',
+    'plugin:prettier/recommended',
+    'prettier/react',
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -18,20 +19,59 @@ module.exports = {
   },
   settings: {
     react: {
-      version: 'latest',
+      version: 'detect',
     },
   },
-  plugins: ['react', 'react-hooks', 'flowtype', 'import'],
+  globals: {
+    // fix for eslint-plugin-flowtype/384 not supporting wildcard
+    _: 'readonly'
+  },
+  plugins: ['react', 'react-hooks', 'import'],
   rules: {
     'no-shadow': ['error'],
     indent: ['off'],
     'linebreak-style': ['off'],
     quotes: ['off'],
     semi: ['off'],
+    'prettier/prettier': ['warn'],
     'react/no-direct-mutation-state': ['off'],
     'react/display-name': ['off'],
     'react-hooks/rules-of-hooks': ['error'],
     'react-hooks/exhaustive-deps': ['warn'],
-    'flowtype/generic-spacing': ['off'],
   },
+
+  overrides: [
+    {
+      // Flow specific rules
+      files: ['src/index.js.flow', '*/*flow.js', 'examples/*-flow/*/*.js'],
+      extends: ['plugin:flowtype/recommended'],
+      plugins: ['flowtype'],
+      rules: {
+        'flowtype/generic-spacing': ['off'],
+      },
+    },
+    {
+      // TypeScript specific rules
+      files: ['*.{ts,tsx}'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'prettier/@typescript-eslint',
+      ],
+      rules: {
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-use-before-define': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/explicit-member-accessibility': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-empty-interface': 'off',
+      },
+    },
+    {
+      // Jest env
+      files: ['*.test.{js,ts,tsx}'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
 };

.gitignore

@@ -1,4 +1,7 @@
 node_modules
 lib
 coverage
-yarn.lock   
+yarn.lock   
+
+# misc
+.vscode

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'es5',
+}

docs/_sidebar.md

@@ -33,4 +33,5 @@
 * **Recipes**
 
   - [Flow types](/recipes/flow.md)
+  - [Typescript types](/recipes/typescript.md)
   - [Composition](/recipes/composition.md)

docs/recipes/README.md

@@ -1,4 +1,5 @@
 ## Recipes
 
 - [Flow types](./flow.md)
+- [Typescript types](./typescript.md)
 - [Composition](./composition.md)

docs/recipes/typescript.md

@@ -0,0 +1,104 @@
+## Typing sweet-state with Typescript
+
+This is a basic example:
+
+```ts
+import {
+  createStore,
+  createSubscriber,
+  createHook,
+  createContainer,
+  ActionApi,
+} from 'react-sweet-state';
+
+type State = { count: number };
+type Actions = typeof actions;
+
+const initialState: State = {
+  count: 0,
+};
+
+const actions = {
+  increment: (by = 1) => ({ setState, getState }: ActionApi<State>) => {
+    setState({
+      count: getState().count + by,
+    });
+  },
+};
+
+const Store = createStore<State, Actions>({
+  initialState,
+  actions,
+});
+
+const CounterSubscriber = createSubscriber(Store);
+const useCounter = createHook(Store);
+const CounterContainer = createContainer(Store);
+```
+
+You don't have to manually type all the `create*` methods, as they can be inferred for the simpler use cases.
+
+#### Actions patterns
+
+If your actions require `Container` props:
+
+```ts
+type ContainerProps = { multiplier: number };
+
+const actions = {
+  increment: (by = 1) => (
+    { setState, getState }: ActionApi<State>,
+    { multiplier }: ContainerProps
+  ) => {
+    setState({ count: getState().count + by * multiplier });
+  },
+};
+```
+
+#### createSubscriber / createHook patterns
+
+If you provide a selector to your components, you need to defined two additional flow arguments to `createSubscriber`/`createHook`: the selector output and the selector props.
+
+```js
+type SelectorState = boolean;
+const selector = (state: State): SelectorState => state.count > 0;
+
+// this component does not accept props
+const CounterSubscriber = createSubscriber<State, Actions, SelectorState, void>(Store, {
+  selector
+});
+
+// this hook does not accept arguments
+const useCounter = createHook<State, Actions, SelectorState, void>(Store, {
+  selector
+});
+```
+
+In case your component/hook needs also some props, you can define them as fourth argument:
+
+```js
+type SelectorProps = { min: number };
+type SelectorState = boolean;
+const selector = (state: State, props: SelectorProps): SelectorState => state.count > props.min;
+
+// this component requires props
+const CounterSubscriber = createSubscriber<State, Actions, SelectorState, SelectorProps>(Store, {
+  selector
+});
+
+// this hook requires an argument
+const useCounter = createHook<State, Actions, SelectorState, SelectorProps>(Store, {
+  selector
+});
+```
+
+#### createContainer patterns
+
+If your container requires additional props:
+
+```js
+type ContainerProps = { multiplier: number };
+
+// this component requires props
+const CounterContainer = createContainer<State, Actions, ContainerProps>(Store);
+```

examples/basic-flow/components.js

@@ -7,9 +7,9 @@ import {
   type Action,
 } from 'react-sweet-state';
 
-type State = {
+type State = {|
   count: number,
-};
+|};
 
 type Actions = typeof actions;
 

examples/basic-ts/components.tsx

@@ -0,0 +1,33 @@
+import {
+  createStore,
+  createSubscriber,
+  createHook,
+  ActionApi,
+} from 'react-sweet-state';
+
+type State = {
+  count: number;
+};
+
+type Actions = typeof actions;
+
+const initialState: State = {
+  count: 0,
+};
+
+const actions = {
+  increment: () => ({ setState, getState }: ActionApi<State>) => {
+    setState({
+      count: getState().count + 1,
+    });
+  },
+};
+
+const Store = createStore({
+  initialState,
+  actions,
+});
+
+export const CounterSubscriber = createSubscriber(Store);
+
+export const useCounter = createHook(Store);

examples/basic-ts/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Advanced example with TypeScript</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      main {
+        display: flex;
+        line-height: 1.5;
+      }
+      hr {
+        margin: 1em;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./bundle.js" type="text/javascript"></script>
+  </body>
+</html>

examples/basic-ts/index.tsx

@@ -0,0 +1,46 @@
+// @flow
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import '@babel/polyfill';
+
+import { CounterSubscriber, useCounter } from './components';
+
+const CounterHook = () => {
+  const [{ count }, { increment }] = useCounter();
+  return (
+    <div>
+      <h3>With Hooks</h3>
+      <p>{count}</p>
+      <button onClick={increment}>+1</button>
+    </div>
+  );
+};
+
+const CounterRpc = () => (
+  <CounterSubscriber>
+    {({ count }, { increment }) => (
+      <div>
+        <h3>With Render-props</h3>
+        <p>{count}</p>
+        <button onClick={increment}>+1</button>
+      </div>
+    )}
+  </CounterSubscriber>
+);
+
+/**
+ * Main App
+ */
+const App = () => (
+  <div>
+    <h1>Simple counter example</h1>
+    <main>
+      <CounterRpc />
+      <hr />
+      <CounterHook />
+    </main>
+  </div>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));