Merge pull request #12 from smithki/development

v0.5.3

.circleci/config.yml

@@ -212,7 +212,7 @@ jobs:
           name: Run tests
           command: npx lerna run test
 
-  # Publish the package to NPM. This should depend on the `build` job.
+  # Publish the packages to NPM. This should depend on the `build` job.
   create-release:
     executor: default
     steps:
@@ -222,10 +222,10 @@ jobs:
           name: Authenticate with registry
           command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
       - run:
-          name: Publish package to NPM
+          name: Publish packages to NPM
           command: npx lerna publish from-package --yes
 
-  # Publish the package as a pre-release version to NPM. This should depend on
+  # Publish the packages as a pre-release versions to NPM. This should depend on
   # the `build` job.
   create-prerelease:
     executor: default
@@ -236,7 +236,7 @@ jobs:
           name: Authenticate with registry
           command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
       - run:
-          name: Publish pre-release package to NPM
+          name: Publish pre-release packages to NPM
           command: npx lerna publish from-package --canary --yes
 
   # Create a git tag for this release and push to the remote repository.
@@ -246,7 +246,7 @@ jobs:
       - checkout
       - *attach-workspace
       - run:
-          name: Git tag the release with the `package.json` version number
+          name: Git tag the release with the `lerna.json` version number
           command: |
             PACKAGE_VERSION=$(node -pe "require('./lerna.json')['version']")
             git tag v$PACKAGE_VERSION
@@ -305,7 +305,7 @@ workflows:
             - build
 
   # Builds modules, verifies code with the linter, runs unit tests, and
-  # publishes the built package to NPM.
+  # publishes the built packages to NPM.
   publish-to-npm:
     jobs:
       - install-dependencies: *filter-release-branches-only

README.md

@@ -7,18 +7,79 @@
 
 ## 🔗 Installation
 
-Install via `yarn` (recommended):
+Install via `yarn`:
 
 ```sh
 yarn add usable-react
+
+# or, install hooks individually:
+yarn add @usable-react/use-compare
+yarn add @usable-react/use-debounced
+# ...and so on :)
 ```
 
 Install via `npm`:
 
 ```sh
 npm install usable-react
+
+# or, install hooks individually:
+npm install @usable-react/use-dom-event
+npm install @usable-react/use-force-update
+# ...and so on :)
 ```
 
 ## Hooks
 
-Hooks documentation coming soon. For now, please explore the source code. Nothing too scary in here as long as you're familiar with the basics of hooks.
+`usable-react` is managed as a monorepo so that hooks can be used collectively, or optimized as separate dependencies.
+
+| Package directory | Package Name | Description |
+| ----------------- | ------------ | ----------- |
+| [`usable-react`](./packages/usable-react) | `usable-react` | A package containing all the hooks! |
+| [`use-compare`](./packages/use-compare) | `@usable-react/use-compare` | Description coming soon! |
+| [`use-debounced`](./packages/use-debounced) | `@usable-react/use-debounced` | Description coming soon! |
+| [`use-deferred-children`](./packages/use-deferred-children) | `@usable-react/use-deferred-children` | Description coming soon! |
+| [`use-dom-event`](./packages/use-dom-event) | `@usable-react/use-dom-event` | Description coming soon! |
+| [`use-effect-after-mount`](./packages/use-effect-after-mount) | `@usable-react/use-effect-after-mount` | Description coming soon! |
+| [`use-effect-trigger`](./packages/use-effect-trigger) | `@usable-react/use-effect-trigger` | Description coming soon! |
+| [`use-filter`](./packages/use-filter) | `@usable-react/use-filter` | Description coming soon! |
+| [`use-force-update`](./packages/use-force-update) | `@usable-react/use-force-update` | Description coming soon! |
+| [`use-hash`](./packages/use-hash) | `@usable-react/use-hash` | Description coming soon! |
+| [`use-hash-compare`](./packages/use-hash-compare) | `@usable-react/use-hash-compare` | Description coming soon! |
+| [`use-initial-render`](./packages/use-initial-render) | `@usable-react/use-initial-render` | Description coming soon! |
+| [`use-interval`](./packages/use-interval) | `@usable-react/use-interval` | Description coming soon! |
+| [`use-previous`](./packages/use-previous) | `@usable-react/use-previous` | Description coming soon! |
+| [`use-timer`](./packages/use-timer) | `@usable-react/use-timer` | Description coming soon! |
+
+## Contributing
+
+`usable-react` is at an early stage of development, so contributing is a great way to both move the project forward and have your ideas represented! We care deeply about building tools that foster a more creative, approachable development cycle to the decentralized application space—but we need the community's help to get there! Here are some steps to open a PR:
+
+1. Fork it!
+2. Create a branch based off `development` named with a package directory (or directories), leading label, and a descriptive title:
+    - `{package}/{label}/{descriptive title}`
+    - For features: `usable-react/feature/my-brand-spankin-new-thing` or `use-hash/feature/my-brand-spankin-new-thing`
+    - For bug fixes: `usable-react/fix/my-bug-fix` or something like `use-timer/fix/my-bug-fix`
+3. Set up your local development environment:
+    1. `yarn install`
+    2. `yarn bootstrap`
+    3. `PKG=$PACKAGE_TARGET yarn dev`
+3. Make your changes! Commit early and often and [write good commit messages](https://chris.beams.io/posts/git-commit/).
+4. Open a [draft PR](https://github.blog/2019-02-14-introducing-draft-pull-requests/) so that a core contributor can review the code and merge your changes!
+
+As aforementioned, this project is still taking shape :baby: More formal contributor processes will undoubtedly be added over time according to the project's (and community's) wants or needs!
+
+## Development Scripts
+
+| NPM Script | Usage | Description |
+| ---------- | ----- | ----------- |
+| `bootstrap` | `yarn bootstrap` | Install dependencies/set up a local development environment. |
+| `exec` | `PKG=$PACKAGE_TARGET yarn exec -- ...` | Execute commands in the specified package. |
+| `dev` | `PKG=$PACKAGE_TARGET yarn dev` | Start the specified package in development mode, or all packages if `$PKG` is omitted. |
+| `build` | `PKG=$PACKAGE_TARGET yarn build` | Build the specified package for production, or all packages if `$PKG` is omitted. |
+| `clean` | `PKG=$PACKAGE_TARGET yarn clean` | Run cleaning scripts for the specified package (NOTE: removes `node_modules`), or all packages if `$PKG` is omitted. |
+| `lint` | `PKG=$PACKAGE_TARGET yarn lint` | Run the linter for the specified package, or all packages if `$PKG` is omitted. |
+| `test` | `PKG=$PACKAGE_TARGET yarn test` | Run tests for the specified package, or all packages if `$PKG` is omitted. |
+| `release` | `yarn release` | Publishes all packages with unreleased versions. |
+| `release` | `yarn release_canary` | Publishes all packages with unreleased versions. |
+

lerna.json

@@ -5,7 +5,7 @@
   "workspaces": [
     "packages/*"
   ],
-  "version": "0.5.2",
+  "version": "0.5.3",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/usable-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "usable-react",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -14,7 +14,7 @@
   "main": "dist/index.js",
   "umd:main": "dist/index.umd.js",
   "module": "dist/index.m.js",
-  "types": "dist/src/index.d.ts",
+  "types": "dist/usable-react/src/index.d.ts",
   "unpkg": "dist/index.umd.js",
   "scripts": {
     "dev": "microbundle watch src/index.ts --name UsableReact --target web --external react",
@@ -28,19 +28,19 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-compare": "^0.5.2",
-    "@usable-react/use-debounced": "^0.5.2",
-    "@usable-react/use-deferred-children": "^0.5.2",
-    "@usable-react/use-dom-event": "^0.5.2",
-    "@usable-react/use-effect-after-mount": "^0.5.2",
-    "@usable-react/use-effect-trigger": "^0.5.2",
-    "@usable-react/use-filter": "^0.5.2",
-    "@usable-react/use-force-update": "^0.5.2",
-    "@usable-react/use-hash": "^0.5.2",
-    "@usable-react/use-hash-compare": "^0.5.2",
-    "@usable-react/use-initial-render": "^0.5.2",
-    "@usable-react/use-interval": "^0.5.2",
-    "@usable-react/use-previous": "^0.5.2",
-    "@usable-react/use-timer": "^0.5.2"
+    "@usable-react/use-compare": "^0.5.3",
+    "@usable-react/use-debounced": "^0.5.3",
+    "@usable-react/use-deferred-children": "^0.5.3",
+    "@usable-react/use-dom-event": "^0.5.3",
+    "@usable-react/use-effect-after-mount": "^0.5.3",
+    "@usable-react/use-effect-trigger": "^0.5.3",
+    "@usable-react/use-filter": "^0.5.3",
+    "@usable-react/use-force-update": "^0.5.3",
+    "@usable-react/use-hash": "^0.5.3",
+    "@usable-react/use-hash-compare": "^0.5.3",
+    "@usable-react/use-initial-render": "^0.5.3",
+    "@usable-react/use-interval": "^0.5.3",
+    "@usable-react/use-previous": "^0.5.3",
+    "@usable-react/use-timer": "^0.5.3"
   }
 }

packages/use-compare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-compare",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-previous": "^0.5.2"
+    "@usable-react/use-previous": "^0.5.3"
   }
 }

packages/use-debounced/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-debounced",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",

packages/use-deferred-children/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-deferred-children",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-initial-render": "^0.5.2"
+    "@usable-react/use-initial-render": "^0.5.3"
   }
 }

packages/use-dom-event/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-dom-event",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",

packages/use-effect-after-mount/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-effect-after-mount",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-initial-render": "^0.5.2"
+    "@usable-react/use-initial-render": "^0.5.3"
   }
 }

packages/use-effect-trigger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-effect-trigger",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-compare": "^0.5.2"
+    "@usable-react/use-compare": "^0.5.3"
   }
 }

packages/use-filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-filter",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,9 +26,9 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-compare": "^0.5.2",
-    "@usable-react/use-hash": "^0.5.2",
-    "@usable-react/use-timer": "^0.5.2",
+    "@usable-react/use-compare": "^0.5.3",
+    "@usable-react/use-hash": "^0.5.3",
+    "@usable-react/use-timer": "^0.5.3",
     "fuse.js": "3.4.6"
   }
 }

packages/use-filter/src/index.ts

@@ -2,7 +2,8 @@ import Fuse from 'fuse.js';
 import { useEffect, useMemo, useState } from 'react';
 import { useCompare } from '@usable-react/use-compare';
 import { useHash } from '@usable-react/use-hash';
-import { useTimer } from '@usable-react/use-timer';
+import { useTimer, useTimerComplete } from '@usable-react/use-timer';
+import { useEffectTrigger } from '../../usable-react/src';
 
 interface UseFilterOptions<TData> {
   needle?: string;
@@ -35,16 +36,21 @@ export function useFilter<TData = any>({ needle, haystack, debounce, searchOptio
   const didHaystackChange = useCompare(haystackHash);
   const didOptionsChange = useCompare(optionsHash);
 
+  const search = useEffectTrigger(() => {
+    const fuse = new Fuse<TData, Fuse.FuseOptions<TData>>(haystack || [], optionsWithDefaults);
+    if (needle) setResults(fuse.search(needle) as TData[]);
+  }, [needle, haystackHash, optionsHash, debounce]);
+
   // Execute a search if the needle/haystack changes.
   useEffect(() => {
     if (!cooldownTimer.isRunning && (didNeedleChange || didHaystackChange || didOptionsChange)) {
       cooldownTimer.reset(debounce);
       cooldownTimer.start();
-
-      const fuse = new Fuse<TData, Fuse.FuseOptions<TData>>(haystack || [], optionsWithDefaults);
-      if (needle) setResults(fuse.search(needle) as TData[]);
+      search();
     }
-  }, [needle, haystackHash, debounce, optionsHash]);
+  }, [needle, haystackHash, optionsHash, debounce, search]);
+
+  useTimerComplete(cooldownTimer, () => search(), [search]);
 
   return results;
 }

packages/use-force-update/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-force-update",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",

packages/use-hash-compare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-hash-compare",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-compare": "^0.5.2",
-    "@usable-react/use-hash": "^0.5.2"
+    "@usable-react/use-compare": "^0.5.3",
+    "@usable-react/use-hash": "^0.5.3"
   }
 }

packages/use-hash/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-hash",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",

packages/use-initial-render/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-initial-render",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",

packages/use-interval/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-interval",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-effect-trigger": "^0.5.2",
-    "@usable-react/use-initial-render": "^0.5.2"
+    "@usable-react/use-effect-trigger": "^0.5.3",
+    "@usable-react/use-initial-render": "^0.5.3"
   }
 }

packages/use-previous/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-previous",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",