feat: add with-reselect package (#7)

* Core functionality for Reselect utils

* Begin docs

* Upgrade devDependencies

* Add CONTRIBUTING.md

package.json

@@ -57,7 +57,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@testing-library/jest-dom": "5.11.4",
+    "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "11.1.0",
     "@types/react-dom": "16.9.8",
     "coveralls": "3.1.0",
@@ -66,7 +66,7 @@
     "gh-pages": "3.1.0",
     "husky": "4.3.0",
     "lerna": "3.22.1",
-    "lint-staged": "10.4.0",
+    "lint-staged": "10.4.2",
     "prettier": "2.1.2",
     "standard-version": "9.0.0",
     "tsdx": "0.14.1",

packages/core/CONTRIBUTING.md

@@ -37,7 +37,7 @@ to discuss your idea and make sure it is inline with the project goals.
    git checkout -b my-topic-branch
    ```
 
-4. To test your local dev version of `dynamic-selectors` in other projects, [Yalc](https://github.com/whitecolor/yalc)
+4. To test your local dev version of `@dynamic-selectors/core` in other projects, [Yalc](https://github.com/whitecolor/yalc)
    is an excellent tool.
 
 5. After you have made your changes, submit a pull request. Issues and pull requests are monitored, and you should receive a reply.

packages/with-reselect/CONTRIBUTING.md

@@ -0,0 +1,70 @@
+# Contributing
+
+Thanks for your interest in Dynamic Selectors! You are very welcome to contribute.
+
+By contributing to Dynamic Selectors, you agree to abide by the [code of conduct](./CODE_OF_CONDUCT.md).
+
+## Reporting Bugs and Asking Questions
+
+Before opening an issue, please search the [issue tracker](https://github.com/spautz/dynamic-selectors/issues)
+to make sure your issue hasn't already been reported.
+
+### New Features and Ideas
+
+If you are proposing a new feature, make sure to [open an issue](https://github.com/spautz/dynamic-selectors/issues/new/choose)
+to discuss your idea and make sure it is inline with the project goals.
+
+## Setup and Development
+
+1. Fork this repository to your own GitHub account and clone it to your local device:
+
+   ```
+   git clone https://github.com/your-name/dynamic-selectors.git
+   cd dynamic-selectors
+   git remote add upstream https://github.com/spautz/dynamic-selectors.git
+   ```
+
+2. Install the dependencies and ensure everything runs properly:
+
+   ```
+   yarn install
+   yarn all
+   ```
+
+3. Create a new topic branch:
+
+   ```
+   git checkout -b my-topic-branch
+   ```
+
+4. To test your local dev version of `@dynamic-selectors/with-reselect` in other projects, [Yalc](https://github.com/whitecolor/yalc)
+   is an excellent tool.
+
+5. After you have made your changes, submit a pull request. Issues and pull requests are monitored, and you should receive a reply.
+
+## Code and Project Standards
+
+Eslint, Typescript, and Prettier enforce most code standards. A pre-push hook will validate the project against those standards.
+
+Running `yarn test` will check the code against unit tests and generate a code coverage report (in `coverage/`).
+This project's goal is to be near 100% code coverage.
+
+Running `yarn all` will check _everything_: tests, code standards, and all packages' builds.
+Your pull request is more likely to be accepted if this passes for your branch.
+
+## Overall Process
+
+In general, the contribution workflow looks like this:
+
+1. Open a new issue in the [Issue tracker](https://github.com/spautz/dynamic-selectors/issues).
+2. Fork the repo and set up your local development environment.
+3. Make changes in a branch in your fork.
+4. Make sure all tests pass and there are no errors.
+5. Submit a [pull request](https://github.com/spautz/dynamic-selectors/pulls), referencing any issues it addresses.
+
+Please try to keep your pull request focused in scope and avoid including unrelated commits.
+
+After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some
+changes or improvements.
+
+Thank you for contributing!

packages/with-reselect/README.md

@@ -10,3 +10,36 @@
 
 Helper functions to make it easy to use [Dynamic Selectors](https://github.com/spautz/dynamic-selectors) and
 [Reselect](https://github.com/reduxjs/reselect) together.
+
+## Usage
+
+```
+import {
+  createReselectSelectorFromDynamic,
+  createDynamicSelectorFromReselect,
+  wrapReselect,
+} from '@dynamic-selectors/with-reselect';
+```
+
+#### `createReselectSelectorFromDynamic(dynamicSelector, params?)`
+
+```javascript
+const originalSelector = createDynamicSelector(...);
+const newSelector = createReselectSelectorFromDynamic(originalSelector);
+```
+
+#### `createDynamicSelectorFromReselect(reselectSelector)`
+
+```javascript
+const originalSelector = createSelector(...);
+const newSelector = createDynamicSelectorFromReselect(originalSelector);
+```
+
+#### `wrapReselect(reselectSelector)`
+
+```javascript
+const myCustomSelectorFactory = dynamicSelectorForState(...);
+
+const originalSelector = createSelector(...);
+const newSelector = myCustomSelectorFactory(wrapSelector(originalSelector));
+```

packages/with-reselect/package.json

@@ -56,7 +56,12 @@
     "test:watchcoverage": "tsdx test --watchAll --coverage",
     "types": "tsc --p tsconfig.json"
   },
-  "dependencies": {
-    "@dynamic-selectors/core": "^0.1.1"
+  "peerDependencies": {
+    "@dynamic-selectors/core": "^0.1.1",
+    "reselect": "^4.0.0"
+  },
+  "devDependencies": {
+    "@dynamic-selectors/core": "0.1.1",
+    "reselect": "4.0.0"
   }
 }

packages/with-reselect/src/dynamicSelectorFromReselect.ts

@@ -0,0 +1,34 @@
+import { createDynamicSelector, DynamicSelectorInnerFn } from '@dynamic-selectors/core';
+import { Selector } from 'reselect';
+
+/**
+ * Wraps a Reselect selector in a new function, which can be passed to createDynamicSelector()
+ */
+const wrapReselect = <StateType = any, ReturnType = any>(
+  reselectSelectorFn: Selector<StateType, ReturnType>,
+): DynamicSelectorInnerFn<ReturnType> => {
+  const innerFn: DynamicSelectorInnerFn = (getState) => {
+    return reselectSelectorFn(getState(null));
+  };
+
+  innerFn.displayName = reselectSelectorFn.name;
+  return innerFn;
+};
+
+/**
+ * For convenience, a helper that wraps the Reselect selector and passes it to createDynamicSelector, in a single step.
+ *
+ * If you make your own selector creator (via `dynamicSelectorForState`), you would create a similar "create..."
+ * function around it.
+ */
+const createDynamicSelectorFromReselect = <StateType = any, ReturnType = any>(
+  reselectSelectorFn: Selector<StateType, ReturnType>,
+  dynamicSelectorOptions: Parameters<typeof createDynamicSelector>[1],
+) => {
+  return createDynamicSelector<ReturnType>(
+    wrapReselect(reselectSelectorFn),
+    dynamicSelectorOptions,
+  );
+};
+
+export { wrapReselect, createDynamicSelectorFromReselect };

packages/with-reselect/src/index.ts

@@ -1 +1,2 @@
-export default {};
+export * from './dynamicSelectorFromReselect';
+export * from './reselectSelectorFromDynamic';

packages/with-reselect/src/reselectSelectorFromDynamic.ts

@@ -0,0 +1,10 @@
+import { DynamicSelectorArgsWithoutState, DynamicSelectorFn } from '@dynamic-selectors/core';
+
+const createReselectSelectorFromDynamic = <StateType = any, ReturnType = any>(
+  dynamicSelectorFn: DynamicSelectorFn<ReturnType>,
+  ...paramsAndOtherArgs: DynamicSelectorArgsWithoutState
+) => {
+  return (state: StateType) => dynamicSelectorFn(state, ...paramsAndOtherArgs);
+};
+
+export { createReselectSelectorFromDynamic };