Initial commit

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint",
+        "prettier"
+    ],
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+}

.github/workflows/main.yml

@@ -0,0 +1,45 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node 16
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: artifact
+          path: dist

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,7 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+.idea
+.env

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint
+yarn test
+yarn build

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Piotr Oleś
+
+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.

README.md

@@ -0,0 +1,126 @@
+<div align="center">
+
+<img width="100" height="100" src="media/react-logo.svg" alt="React logo">
+
+<h1>use-transition-effect</h1>
+<p>Run long effects without blocking the main thread</p>
+
+[![npm version](https://img.shields.io/npm/v/use-transition-effect.svg)](https://www.npmjs.com/package/use-transition-effect)
+[![build status](https://github.com/piotr-oles/use-transition-effect/workflows/CI/badge.svg?branch=main&event=push)](https://github.com/piotr-oles/use-transition-effect/actions?query=branch%3Amain+event%3Apush)
+
+</div>
+
+## Motivation
+
+Let's say you want to render something complex on a canvas in a React application.
+Canvas API is imperative, so to interact with it, you need to use the `useEffect()` hook.
+Unfortunately, if rendering takes too long, you can block the main thread and make your
+application unresponsive (especially on low-end devices).
+
+The `useTransitionEffect()` hook provides a way to split long-running effects into smaller chunks
+to unblock the main thread. It uses [scheduler](https://www.npmjs.com/package/scheduler) package (from React)
+to schedule smaller units of work and coordinate it with React rendering.
+
+## Installation
+
+This package requires [React 17+](https://www.npmjs.com/package/react) and [scheduler 0.20+](https://www.npmjs.com/package/scheduler)
+
+```sh
+# with npm
+npm install use-transition-effect
+
+# with yarn
+yarn add use-transition-effect
+```
+
+## Usage
+
+```typescript
+const [
+  isPending,
+  startTransitionEffect,
+  stopTransitionEffect,
+] = useTransitionEffect();
+```
+
+The API is very similar to the `useTransition` hook from React.
+It returns a stateful value for the pending state of the transition effect, a function to start it, and a function to stop it.
+
+`startTransitionEffect` lets you schedule a long-running effect without blocking the main thread. It expects a generator
+function as an argument, so you can yield to unblock the main thread. The generator function receives the `shouldYield` function,
+which returns true if the current task takes too long:
+
+```typescript
+startTransitionEffect(function*(shouldYield) {
+  for (let item of items) {
+    doSomeComplexSideEffects(item);
+    if (shouldYield()) {
+      yield;
+    }
+  }
+});
+```
+
+Additionally, you can yield and return a cleanup function that will run on transition stop (including unmount):
+```typescript
+startTransitionEffect(function*(shouldYield) {
+  const cleanup = () => cleanupSideEffects();
+
+  for (let item of items) {
+    doSomeComplexSideEffects(item);
+    if (shouldYield()) {
+      yield cleanup;
+    }
+  }
+  return cleanup;
+});
+```
+
+`stopTransitionEffect` lets you stop the current long-running effect. You can use it as a `useEffect` cleanup:
+
+```typescript
+useEffect(() => {
+  startTransitionEffect(function*() {
+    // effect
+  });
+
+  return () => stopTransitionEffect();
+}, []);
+```
+
+`isPending` indicates when a transition effect is active to show a pending state:
+
+```tsx
+function App() {
+  const [
+    isPending,
+    startTransitionEffect,
+    stopTransitionEffect,
+  ] = useTransitionEffect();
+
+  function handleStartClick() {
+    startTransitionEffect(function*() {
+      // do stuff, for example render something on a canvas
+    });
+  }
+  function handleStopClick() {
+    stopTransitionEffect();
+  }
+
+  return (
+    <div>
+      {isPending && <Spinner />}
+      <button onClick={handleStartClick} disabled={isPending}>
+        Start
+      </button>
+      <button onClick={handleStopClick} disabled={!isPending}>
+        Stop
+      </button>
+    </div>
+  );
+}
+```
+
+## License
+
+MIT

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+};

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "use-transition-effect",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Piotr Oleś",
+  "main": "dist/use-transition-effect.js",
+  "module": "dist/use-transition-effect.mjs",
+  "typings": "dist/use-transition-effect.d.ts",
+  "repository": "https://github.com/piotr-oles/use-transition-effect.git",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "build": "rimraf dist && rollup -c rollup.config.js",
+    "test": "jest",
+    "lint": "eslint src test",
+    "prepare": "husky install",
+    "size": "size-limit"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "scheduler": ">=0.20"
+  },
+  "size-limit": [
+    {
+      "path": "dist/use-transition-effect.cjs.production.min.js",
+      "limit": "1 KB"
+    },
+    {
+      "path": "dist/use-transition-effect.esm.js",
+      "limit": "1 KB"
+    }
+  ],
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.0",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "@types/scheduler": "^0.16.2",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "eslint": "^8.16.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "husky": "^8.0.1",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "prettier": "^2.6.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.75.5",
+    "scheduler": "^0.22.0",
+    "size-limit": "^7.0.8",
+    "ts-jest": "^28.0.3",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.2"
+  }
+}

rollup.config.js

@@ -0,0 +1,19 @@
+import typescript from '@rollup/plugin-typescript';
+
+export default {
+  input: 'src/use-transition-effect.ts',
+  output: [
+    {
+      file: 'dist/use-transition-effect.js',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/use-transition-effect.mjs',
+      format: 'es',
+      sourcemap: true,
+    },
+  ],
+  plugins: [typescript({ tsconfig: './tsconfig.json' })],
+  external: ['react', 'scheduler'],
+};