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

Author: lachlancollins

.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"
   },

lerna.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
     }
   }

nx.json

@@ -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

old-examples/absolute-layout/README.md

@@ -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",

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"
   }

packages/match-sorter-utils/package.json

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

test-setup.ts renamed to packages/match-sorter-utils/test-setup.ts

@@ -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:*"
   }
 }

vitest.config.ts renamed to packages/match-sorter-utils/vitest.config.ts

@@ -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-devtools/package.json

@@ -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__/core/core.test.tsx

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

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

@@ -42,8 +42,20 @@
     "build/umd/*",
     "src"
   ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch"
+  },
   "dependencies": {
-    "@tanstack/table-core": "8.11.2"
+    "@tanstack/table-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "react": ">=16",

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

packages/react-table/package.json

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'node:path'
+
+export default defineConfig({
+  test: {
+    watch: false,
+    setupFiles: ['test-setup.ts'],
+    environment: 'jsdom',
+    globals: true,
+    dir: '__tests__',
+  },
+  resolve: {
+    alias: {
+      '@tanstack/table-core': resolve(__dirname, '../table-core/src'),
+    },
+  },
+})

packages/react-table/test-setup.ts

@@ -43,8 +43,12 @@
     "build/umd/*",
     "src"
   ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc"
+  },
   "dependencies": {
-    "@tanstack/table-core": "8.11.2"
+    "@tanstack/table-core": "workspace:*"
   },
   "peerDependencies": {
     "solid-js": "^1.3.13"

packages/react-table/vitest.config.ts

@@ -41,8 +41,12 @@
     "build/umd/*",
     "src"
   ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc"
+  },
   "dependencies": {
-    "@tanstack/table-core": "8.11.2"
+    "@tanstack/table-core": "workspace:*"
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^3.49.0"

packages/solid-table/package.json

@@ -43,5 +43,11 @@
     "build/lib/*",
     "build/umd/*",
     "src"
-  ]
+  ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch"
+  }
 }

packages/svelte-table/package.json

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

packages/table-core/package.json

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    watch: false,
+    setupFiles: ['test-setup.ts'],
+    environment: 'jsdom',
+    globals: true,
+    dir: '__tests__',
+  },
+})

packages/table-core/test-setup.ts

@@ -42,8 +42,12 @@
     "build/umd/*",
     "src"
   ],
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test:types": "tsc"
+  },
   "dependencies": {
-    "@tanstack/table-core": "8.11.2"
+    "@tanstack/table-core": "workspace:*"
   },
   "peerDependencies": {
     "vue": "^3.2.33"

packages/table-core/vitest.config.ts

@@ -0,0 +1,6 @@
+packages:
+  - 'packages/*'
+  - 'examples/react/*'
+  - 'examples/solid/*'
+  - 'examples/svelte/*'
+  - 'examples/vue/*'

packages/vue-table/package.json

@@ -2,31 +2,13 @@
   "$schema": "node_modules/nx/schemas/project-schema.json",
   "name": "root",
   "targets": {
-    "build-js": {
+    "build": {
       "command": "rollup --config rollup.config.js",
       "inputs": ["packageSources"],
       "outputs": [
         "{workspaceRoot}/packages/*/build/stats*",
         "{workspaceRoot}/packages/*/build/**/*.(cjs|mjs|js)*"
       ]
-    },
-    "typecheck": {
-      "command": "tsc -b",
-      "inputs": ["packageSources"],
-      "outputs": [
-        "{workspaceRoot}/packages/*/build/**/*d.ts",
-        "{workspaceRoot}/packages/*/build/.tsbuildinfo"
-      ]
-    },
-    "build": {
-      "command": "echo \"  @tanstack/table > All packages built! 📦\"",
-      "dependsOn": ["build-js", "typecheck"],
-      "inputs": ["packageSources"]
-    },
-    "test:ci": {
-      "command": "vitest",
-      "inputs": ["packageSources", "{workspaceRoot}/packages/*/__tests__/**/*"],
-      "dependsOn": ["build-js"]
     }
   }
 }

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import { RollupOptions } from 'rollup'
 import babel from '@rollup/plugin-babel'
 import { terser } from 'rollup-plugin-terser'
+// @ts-ignore
 import size from 'rollup-plugin-size'
 import visualizer from 'rollup-plugin-visualizer'
 import replace from '@rollup/plugin-replace'
@@ -133,7 +134,7 @@ function buildConfigs(opts: {
 }): RollupOptions[] {
   const input = path.resolve(opts.packageDir, opts.entryFile)
 
-  const external = moduleName => opts.external.includes(moduleName)
+  const external = (moduleName: string) => opts.external.includes(moduleName)
   const umdExternal = Object.keys(opts.globals)
   const banner = createBanner(opts.name)
 
@@ -153,7 +154,6 @@ function buildConfigs(opts: {
     cjs(options),
     umdDev({ ...options, external: umdExternal }),
     umdProd({ ...options, external: umdExternal }),
-    // types(options),
   ]
 }
 
@@ -310,25 +310,6 @@ function umdProd({
   }
 }
 
-function types({
-  input,
-  packageDir,
-  external,
-  banner,
-}: Options): RollupOptions {
-  return {
-    // TYPES
-    external,
-    input,
-    output: {
-      format: 'es',
-      file: `${packageDir}/build/types/index.d.ts`,
-      banner,
-    },
-    plugins: [dts()],
-  }
-}
-
 function createBanner(libraryName: string) {
   return `/**
  * ${libraryName}

pnpm-workspace.yaml

@@ -344,12 +344,12 @@ async function run() {
   console.info()
 
   console.info('Building packages...')
-  execSync(`npm run build`, { encoding: 'utf8', stdio: 'inherit' })
+  execSync(`pnpm build`, { encoding: 'utf8', stdio: 'inherit' })
   console.info('')
 
-  // console.info('Building types...')
-  // execSync(`npm run types`, { encoding: 'utf8', stdio: 'inherit' })
-  // console.info('')
+  console.info('Building types...')
+  execSync(`pnpm test:types`, { encoding: 'utf8', stdio: 'inherit' })
+  console.info('')
 
   console.info('Validating packages...')
   const failedValidations: string[] = []
@@ -394,7 +394,7 @@ async function run() {
   }
 
   console.info('Testing packages...')
-  execSync(`npm run test:ci`, { encoding: 'utf8' })
+  execSync(`npm run test:lib`, { encoding: 'utf8' })
   console.info('')
 
   console.info(`Updating all changed packages to version ${version}...`)