chore: Migrate to pnpm and modularise Nx tasks (#5234)

* Prepare to run pnpm import

* Run pnpm import

* Update github workflow

* Remove lerna

* Use workspace links

* More workflow tweaks

* Re-sync lockfile

* Delete lerna.json

* Make typecheck work

* Fix test:ci

* Delete yarn.lock

* Update gitignore

* Split up vitest command

* Add preinstall, tweak watch script

* Fix pr command

* Fix react-table tests

* Merge build-js and build

* Add vitest alias

* Add rimraf

* Fix task ordering

* Fix ts errors in rollup config

* Actually fix test ordering

* Fix publish script

* Delete unused root vitest config

.github/workflows/ci.yml

@@ -12,16 +12,20 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: '0'
-      - uses: actions/setup-node@v2
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-          cache: 'npm'
+          version: 8
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: pnpm
       - run: |
-          npm i --legacy-peer-deps
+          pnpm install --frozen-lockfile
           git config --global user.name 'Tanner Linsley'
           git config --global user.email 'tannerlinsley@users.noreply.github.com'
-          npm run cipublish
+          pnpm run cipublish
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           GH_TOKEN: ${{ secrets.GH_TOKEN }}

.github/workflows/pr.yml

@@ -2,24 +2,21 @@ name: pr
 on: [pull_request]
 jobs:
   test:
-    name: 'Test (node ${{ matrix.node }})'
+    name: 'Test'
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
-
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-
-      - name: Install Node.js
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node }}
-          cache: 'yarn'
-
+          node-version-file: .nvmrc
+          cache: pnpm
       - name: Install Dependencies
-        run: yarn --frozen-lockfile
-
+        run: pnpm install --frozen-lockfile
       - name: Run Checks
-        run: npm run pr
+        run: pnpm run pr

.gitignore

@@ -41,6 +41,7 @@ node_modules
 dist
 
 package-lock.json
+yarn.lock
 *.tsbuildinfo
 *.tsbuildinfo
 

.npmrc

@@ -1 +1 @@
-package-lock=false
+prefer-workspace-packages=true

CONTRIBUTING.md

@@ -28,16 +28,15 @@ Before proceeding with development, ensure you match one of the following criter
 ## Development Workflow
 
 - Fork this repository, we prefer the `feat-*` branch name style
-- Ensure you have `yarn` installed
-- Install projects dependencies and linkages by running `yarn`
-- Auto-build and auto-test files as you edit by running `yarn dev`
+- Ensure you have `pnpm` installed
+- Install projects dependencies and linkages by running `pnpm install`
+- Auto-build and auto-test files as you edit by running `pnpm dev`
 - Implement your changes and tests
 - To run examples, follow their individual directions. Usually this includes:
-  - Installing dependencies with `yarn`
-  - Starting the dev server with `yarn start`
+  - Installing dependencies with `pnpm install`
+  - Starting the dev server with `pnpm start`
 - To test in your own projects:
-  - Build/watch for changes with `yarn build`/`yarn dev`
-  - Link the appropriate package eg. `yarn link @tanstack/react-table`
+  - Build/watch for changes with `pnpm build`/`pnpm dev`
 - Document your changes in the appropriate documentation website markdown pages
 - Commit your work and open a pull request
 - Submit PR for review

examples/react/kitchen-sink/package.json

@@ -13,8 +13,8 @@
     "@emotion/styled": "^11.10.5",
     "@tanstack/match-sorter-utils": "8.7.6",
     "@tanstack/react-table": "8.11.2",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

nx.json

@@ -23,13 +23,11 @@
       "inputs": ["buildDeps", "^buildDeps"],
       "cache": true
     },
-    "build-js": {
+    "test:lib": {
       "cache": true
     },
-    "test:ci": {
-      "cache": true
-    },
-    "typecheck": {
+    "test:types": {
+      "dependsOn": ["^test:types"],
       "cache": true
     }
   }

old-examples/absolute-layout/README.md

@@ -3,4 +3,4 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 You can:
 
 - [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tanstack/react-table/tree/master/examples/absolute-layout)
-- `yarn` and `yarn start` to run and edit the example
+- `pnpm` and `pnpm start` to run and edit the example

package.json

@@ -1,78 +1,29 @@
 {
+  "name": "table",
   "private": true,
   "repository": "https://github.com/tanstack/table.git",
+  "packageManager": "pnpm@8.12.1",
   "scripts": {
-    "clean": "npm exec --workspaces -c \"rm -rf build || true\"",
-    "test": "(is-ci && npm run test:ci) || npm run test:dev",
-    "test:ci": "nx test:ci root",
-    "test:dev": "vitest --watch",
+    "clean": "pnpm --filter \"./packages/**\" run clean",
+    "preinstall": "node -e \"if(process.env.CI == 'true') {console.log('Skipping preinstall...'); process.exit(1)}\" || npx -y only-allow pnpm",
+    "test": "(is-ci && pnpm run test:lib) || pnpm run test:lib:dev",
+    "test:lib": "nx run-many -t test:lib",
+    "test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib",
+    "test:types": "nx run-many -t test:types",
     "build": "nx build root",
     "watch": "concurrently --kill-others \"rollup --config rollup.config.js -w\" \"tsc -b --watch\"",
-    "linkAll": "lerna exec 'npm link' --parallel",
-    "unlinkAll": "lerna exec 'npm unlink' --parallel",
-    "dev": "npm run watch",
+    "dev": "pnpm run watch",
     "prettier": "prettier \"packages/*/{src/**,examples/**/src/**}.{md,js,jsx,ts,tsx,json}\" --write",
-    "visualize": "lerna exec 'open build/stats-html.html'",
     "cipublish": "ts-node scripts/publish.ts",
-    "cipublishforce": "CI=true npm run cipublish",
-    "typecheck": "nx typecheck root",
-    "pr": "nx run-many --targets=test:ci,build,typecheck --projects=root"
+    "cipublishforce": "CI=true pnpm run cipublish",
+    "pr": "nx run-many --exclude=examples/** --targets=test:lib,build,test:types"
+  },
+  "nx": {
+    "includedScripts": [
+      "build"
+    ]
   },
   "namespace": "@tanstack",
-  "workspaces": [
-    "./examples/react/basic",
-    "./examples/react/bootstrap",
-    "./examples/react/column-dnd",
-    "./examples/react/column-groups",
-    "./examples/react/column-ordering",
-    "./examples/react/column-pinning",
-    "./examples/react/column-resizing-performant",
-    "./examples/react/column-sizing",
-    "./examples/react/column-visibility",
-    "./examples/react/editable-data",
-    "./examples/react/expanding",
-    "./examples/react/filters",
-    "./examples/react/full-width-resizable-table",
-    "./examples/react/full-width-table",
-    "./examples/react/fully-controlled",
-    "./examples/react/grouping",
-    "./examples/react/kitchen-sink",
-    "./examples/react/material-ui-pagination",
-    "./examples/react/pagination",
-    "./examples/react/pagination-controlled",
-    "./examples/react/row-dnd",
-    "./examples/react/row-pinning",
-    "./examples/react/row-selection",
-    "./examples/react/sorting",
-    "./examples/react/sub-components",
-    "./examples/react/virtualized-infinite-scrolling",
-    "./examples/react/virtualized-rows",
-    "./examples/solid/basic",
-    "./examples/solid/bootstrap",
-    "./examples/solid/column-groups",
-    "./examples/solid/column-ordering",
-    "./examples/solid/column-visibility",
-    "./examples/solid/sorting",
-    "./examples/svelte/basic",
-    "./examples/svelte/column-groups",
-    "./examples/svelte/column-ordering",
-    "./examples/svelte/column-pinning",
-    "./examples/svelte/column-visibility",
-    "./examples/svelte/sorting",
-    "./examples/vue/basic",
-    "./examples/vue/column-ordering",
-    "./examples/vue/column-pinning",
-    "./examples/vue/sorting",
-    "./examples/vue/pagination-controlled",
-    "./examples/vue/pagination",
-    "./packages/match-sorter-utils",
-    "./packages/react-table",
-    "./packages/react-table-devtools",
-    "./packages/solid-table",
-    "./packages/svelte-table",
-    "./packages/table-core",
-    "./packages/vue-table"
-  ],
   "devDependencies": {
     "@babel/core": "^7.17.9",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
@@ -90,21 +41,21 @@
     "@tsconfig/svelte": "^3.0.0",
     "@types/luxon": "^2.3.1",
     "@types/node": "^18.15.10",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/semver": "^7.3.10",
     "axios": "^0.26.1",
     "babel-plugin-transform-async-to-promises": "^0.8.18",
     "concurrently": "^7.1.0",
     "current-git-branch": "^1.1.0",
     "git-log-parser": "^1.2.0",
     "jsdom": "^21.1.1",
-    "lerna": "^4.0.0",
     "luxon": "^2.3.2",
     "nx": "^17.2.7",
     "prettier": "^3.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-size": "^0.2.2",

packages/match-sorter-utils/package.json

@@ -48,6 +48,12 @@
     "build/umd/*",
     "src"
   ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch"
+  },
   "dependencies": {
     "remove-accents": "0.4.2"
   }

vitest.config.ts → packages/match-sorter-utils/vitest.config.ts

@@ -6,6 +6,6 @@ export default defineConfig({
     setupFiles: ['test-setup.ts'],
     environment: 'jsdom',
     globals: true,
-    dir: 'packages'
-  }
+    dir: '__tests__',
+  },
 })

packages/react-table-devtools/package.json

@@ -42,11 +42,15 @@
     "build/umd/*",
     "src"
   ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc"
+  },
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
   },
   "dependencies": {
-    "@tanstack/react-table": "8.0.0-alpha.1"
+    "@tanstack/react-table": "workspace:*"
   }
 }

packages/react-table/__tests__/core/core.test.tsx

@@ -2,13 +2,12 @@ import * as React from 'react'
 
 import { act, renderHook } from '@testing-library/react-hooks'
 import * as RTL from '@testing-library/react'
-import '@testing-library/jest-dom'
 import {
   useReactTable,
   getCoreRowModel,
   ColumnDef,
   flexRender,
-} from '@tanstack/react-table'
+} from '../../src'
 
 type Person = {
   firstName: string

packages/react-table/__tests__/features/RowSelection.test.tsx

@@ -4,7 +4,7 @@ import {
   getCoreRowModel,
   TableOptions,
   useReactTable,
-} from '@tanstack/react-table'
+} from '../../src'
 import { fireEvent, render, screen } from '@testing-library/react'
 import React, { FC } from 'react'
 
@@ -82,15 +82,15 @@ const defaultPaginatedColumns: ColumnDef<Person>[] = [
       )
     },
     cell: ({ row }) => {
-      return ( row.getCanSelect() ? (
+      return row.getCanSelect() ? (
         <input
           data-testid="select-single"
           type="checkbox"
           disabled={row.getCanSelect()}
           checked={row.getIsSelected()}
           onChange={row.getToggleSelectedHandler()}
         />
-      ):null)
+      ) : null
     },
   },
   {
@@ -166,20 +166,19 @@ test(`Select all do not select rows which are not available for selection`, () =
   expect(title).not.toBePartiallyChecked()
   expect(notSelected).not.toBeChecked()
   expect(selected).not.toBeChecked()
-
 })
 
 // issue #4757
 test(`Select all is unchecked for current page if all rows are not available for selection`, () => {
-  let condition = row => row.original.age > 50;
+  let condition = row => row.original.age > 50
 
-  const {rerender} = render(
+  const { rerender } = render(
     <TableComponent
       options={{
         columns: defaultPaginatedColumns,
         data: defaultData,
-        enableRowSelection: condition
-    }}
+        enableRowSelection: condition,
+      }}
     />
   )
 
@@ -188,12 +187,13 @@ test(`Select all is unchecked for current page if all rows are not available for
   expect(selectedOnPage).not.toBeChecked()
   expect(selectedOnPage).not.toHaveAttribute('aria-checked', 'mixed')
 
-  condition = row => row.original.age > 40;
-  rerender(<TableComponent
+  condition = row => row.original.age > 40
+  rerender(
+    <TableComponent
       options={{
         columns: defaultPaginatedColumns,
         data: defaultData,
-        enableRowSelection: condition
+        enableRowSelection: condition,
       }}
     />
   )
@@ -205,7 +205,6 @@ test(`Select all is unchecked for current page if all rows are not available for
 
   fireEvent.click(screen.queryByTestId('select-single'))
   expect(selectedOnPage).toBeChecked()
-
 })
 
 test(`Select all when all rows are available for selection`, () => {

packages/react-table/__tests__/features/Visibility.test.tsx

@@ -8,7 +8,7 @@ import {
   getCoreRowModel,
   ColumnDef,
   flexRender,
-} from '@tanstack/react-table'
+} from '../../src'
 
 type Person = {
   firstName: string