Merge pull request #618 from thebuilder/feat/switch-to-pnpm

.github/workflows/release.yml

@@ -9,16 +9,20 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v3
+      - name: Install PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: 'pnpm'
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install
       - name: Build
-        run: yarn build
+        run: pnpm build
       - name: Release
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}

.github/workflows/test.yml

@@ -12,16 +12,20 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
       - name: Test
-        run: yarn test
+        run: pnpm test
         env:
           CI: true
       - name: Build

.gitignore

@@ -1,6 +1,5 @@
 .vscode
 .cache
-.docz
 node_modules
 reports
 example
@@ -11,10 +10,10 @@ nuget
 npm-debug.log*
 .DS_store
 .eslintcache
-.stylelintcache
 .idea
 .tern
 .tmp
 *.log
+storybook-static
 test-utils.js
 test-utils.d.ts

.npmignore

@@ -17,15 +17,13 @@ npm-debug.log
 .tmp
 .eslintignore
 .flowconfig
-.travis.yml
-.babelrc
 .editorconfig
-.storybook
-yarn.lock
+storybook/.storybook
+pnpm-lock.yaml
 
 # Project files
 coverage
-stories
+storybook/stories
 tests
 example
 jest-setup.js

CONTRIBUTING.md

@@ -0,0 +1,86 @@
+# Contribution Guidelines
+
+Welcome to `react-intersection-observer`! I'm thrilled that you're interested in
+contributing. Here are some guidelines to help you get started.
+
+The codebase is written in TypeScript, and split into two packages using PNPM
+workspaces:
+
+- `react-intersection-observer` - The main package, which contains the
+  `useInView` hook and the `InView` component.
+- `storybook` - A Storybook project that is used to develop and test the
+  `react-intersection-observer` package.
+
+## Development
+
+Start by forking the repository, and after cloning it locally you can install
+the dependencies using [PNPM](https://pnpm.io/):
+
+```shell
+pnpm install
+```
+
+Then you can start the Storybook development server with the `dev` task:
+
+```shell
+pnpm dev
+```
+
+## Semantic Versioning
+
+`react-intersection-observer` follows Semantic Versioning 2.0 as defined at
+http://semver.org. This means that releases will be numbered with the following
+format:
+
+`<major>.<minor>.<patch>`
+
+- Breaking changes and new features will increment the major version.
+- Backwards-compatible enhancements will increment the minor version.
+- Bug fixes and documentation changes will increment the patch version.
+
+## Pull Request Process
+
+Fork the repository and create a branch for your feature/bug fix.
+
+- Add tests for your feature/bug fix.
+- Ensure that all tests pass before submitting your pull request.
+- Update the README.md file if necessary.
+- Ensure that your commits follow the conventions outlined in the next section.
+
+### Commit Message Conventions
+
+- We use
+  [semantic-release](https://github.com/semantic-release/semantic-release) to
+  manage releases automatically. To ensure that releases are automatically
+  versioned correctly, we follow the
+  [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
+  Conventions. This means that your commit messages should have the following
+  format:
+
+`<type>: <subject>`
+
+Here's what each part of the commit message means:
+
+- `<type>`: The type of change that you're committing. Valid types include
+  `feat` for new features, `fix` for bug fixes, `docs` for documentation
+  changes, and `chore` for changes that don't affect the code itself (e.g.
+  updating dependencies).
+- `<subject>`: A short description of the change.
+
+### Code Style
+
+`react-intersection-observer` uses [Prettier](https://prettier.io/) for code
+formatting. Please ensure that your changes are formatted with Prettier before
+submitting your pull request.
+
+### Testing
+
+`react-intersection-observer` uses [Vitest](https://vitest.dev/) for testing.
+Please ensure that your changes are covered by tests, and that all tests pass
+before submitting your pull request.
+
+You can run the tests with the `test` task:
+
+```shell
+pnpm test
+```

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2022 React Intersection Observer authors
+Copyright (c) 2023 React Intersection Observer authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -25,6 +25,22 @@
     "url": "https://github.com/thebuilder/react-intersection-observer.git"
   },
   "license": "MIT",
+  "scripts": {
+    "prebuild": "rm -rf dist lib",
+    "build": "run-s build:*",
+    "build:bundle": "microbundle --name ReactIntersectionObserver --jsx React.createElement -f cjs,umd,es,modern --no-compress",
+    "build:utils": "tsc -p tsconfig.test.json",
+    "build:copy": "node scripts/build-copy.js",
+    "postbuild": "size-limit",
+    "dev": "run-p dev:*",
+    "dev:package": "microbundle --jsx React.createElement -f cjs,es,modern --no-compress --watch",
+    "dev:storybook": "pnpm --filter storybook dev",
+    "lint": "eslint . --ext js,ts,tsx",
+    "release": "np --contents dist",
+    "version": "pnpm build",
+    "storybook:build": "pnpm build:bundle && pnpm --filter storybook build",
+    "test": "vitest"
+  },
   "keywords": [
     "react",
     "component",
@@ -50,22 +66,6 @@
     "example/**",
     "webpack.config.js"
   ],
-  "scripts": {
-    "prebuild": "rm -rf dist lib",
-    "build": "run-s build:*",
-    "build:bundle": "microbundle --name ReactIntersectionObserver --jsx React.createElement -f cjs,umd,es,modern --no-compress",
-    "build:utils": "tsc -p tsconfig.test.json",
-    "build:copy": "node scripts/build-copy.js",
-    "postbuild": "size-limit",
-    "dev": "yarn run storybook",
-    "lint": "eslint . --ext js,ts,tsx",
-    "release": "np --contents dist",
-    "version": "yarn build",
-    "pretty": "prettier '**/*.{js,ts,tsx,md,json,yml,html}' --write",
-    "storybook": "start-storybook -p 9000",
-    "storybook:build": "build-storybook --output-dir example",
-    "test": "vitest"
-  },
   "release": {
     "branches": [
       "main",
@@ -122,47 +122,44 @@
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
-    "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-actions": "6.5.9",
-    "@storybook/addon-controls": "6.5.9",
-    "@storybook/addon-docs": "6.5.9",
-    "@storybook/addon-viewport": "6.5.9",
-    "@storybook/addons": "6.5.9",
-    "@storybook/builder-vite": "^0.2.0",
-    "@storybook/react": "6.5.9",
-    "@storybook/theming": "6.5.9",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^27.5.1",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
-    "autoprefixer": "^10.4.7",
-    "eslint": "^8.20.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
+    "@size-limit/preset-small-lib": "^8.2.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "eslint": "^8.35.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "framer-motion": "^6.5.1",
-    "intersection-observer": "^0.12.2",
-    "jsdom": "^20.0.0",
-    "lint-staged": "^13.0.3",
-    "microbundle": "^0.15.0",
+    "jsdom": "^21.1.0",
+    "lint-staged": "^13.1.2",
+    "microbundle": "^0.15.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.14",
-    "prettier": "^2.7.1",
-    "prettier-plugin-pkg": "^0.16.0",
-    "prettier-plugin-tailwindcss": "^0.1.12",
+    "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "simple-git-hooks": "^2.8.0",
-    "size-limit": "^7.0.8",
-    "tailwindcss": "^3.1.6",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.2",
-    "vitest": "^0.18.1"
+    "simple-git-hooks": "^2.8.1",
+    "size-limit": "^8.2.4",
+    "typescript": "^4.9.5",
+    "vitest": "^0.29.2"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "react": "18"
+      }
+    },
+    "allowedDeprecatedVersions": {
+      "rollup-plugin-terser": "*",
+      "sourcemap-codec": "*",
+      "source-map-resolve": "*",
+      "source-map-url": "*",
+      "stable": "*",
+      "urix": "*"
+    }
   }
 }