Migrate from yarn to pnpm (#460)

dflex-js · Apr 5, 2022 · f1af4d2 · f1af4d2
1 parent 98be414
commit f1af4d2
Show file tree

Hide file tree

Showing 49 changed files with 9,536 additions and 13,681 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -30,24 +30,21 @@ jobs:
         with:
           node-version: "*"
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache yarn cache
+      - name: Cache pnpm modules
         uses: actions/cache@v3
-        id: yarn-cache #`steps.yarn-cache.outputs.cache-hit != 'true'
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-
 
-      - name: Install Dependencies
-        run: yarn install
+      - uses: pnpm/[email protected]
+        with:
+          version: 6.32.4
+          run_install: true
 
       - name: Run lint
-        run: yarn eslint . --ext .js,.jsx,.ts,.tsx --fix
+        run: pnpm eslint . --ext .js,.jsx,.ts,.tsx --fix
 
   types:
     name: Check Types
@@ -62,24 +59,21 @@ jobs:
         with:
           node-version: "*"
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache yarn cache
+      - name: Cache pnpm modules
         uses: actions/cache@v3
-        id: yarn-cache #`steps.yarn-cache.outputs.cache-hit != 'true'
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-
 
-      - name: Install Dependencies
-        run: yarn install
+      - uses: pnpm/[email protected]
+        with:
+          version: 6.32.4
+          run_install: true
 
       - name: check types
-        run: "yarn tsc --noEmit"
+        run: "pnpm tsc --noEmit"
 
   unit-test:
     name: Unit Test
@@ -95,26 +89,18 @@ jobs:
         with:
           node-version: "*"
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache yarn cache
+      - name: Cache pnpm modules
         uses: actions/cache@v3
-        id: yarn-cache #`steps.yarn-cache.outputs.cache-hit != 'true'
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-
 
-      - name: Install Dependencies
-        run: yarn install
+      - uses: pnpm/[email protected]
+        with:
+          version: 6.32.4
+          run_install: true
 
       - name: Run Test
-        run: CI=true yarn jest --coverage
-
-      - name: Upload coverage to Codecov
-        run: bash <(curl -s https://codecov.io/bash) -C $GITHUB_SHA -B ${GITHUB_REF#refs/heads/} -Z
-        env:
-          CODECOV_TOKEN: 98cfb3ef-e3ad-4ffc-aaa1-314731222d1b
+        run: CI=true pnpm jest --coverage
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -27,73 +27,30 @@ jobs:
         with:
           node-version: "*"
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache yarn cache
+      - name: Cache pnpm modules
         uses: actions/cache@v3
-        id: yarn-cache #`steps.yarn-cache.outputs.cache-hit != 'true'
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-
 
-      - name: Install Dependencies
-        run: yarn install
+      - uses: pnpm/[email protected]
+        with:
+          version: 6.32.4
+          run_install: true
 
       - name: Build packages
-        run: yarn build
-
-      # - name: Essential Features Test for DnD React APP - Firefox
-      #   uses: cypress-io/github-action@v2
-      #   with:
-      #     project: ./packages/dnd
-      #     start: yarn workspace dflex-react-dnd start
-      #     wait-on: "http://localhost:3001/"
-      #     browser: firefox
-      #     headless: true
-      #     spec: "packages/dnd/cypress/integration/essential/**/*.spec.js"
-      #   env:
-      #     Cypress_isNextJS: false
-      #     Cypress_extended: true
-
-      # - name: SSR Test - Testing DnD work with NextJS
-      #   uses: cypress-io/github-action@v2
-      #   with:
-      #     project: ./packages/dnd
-      #     start: yarn workspace dflex-next-dnd dev
-      #     wait-on: "http://localhost:3000/"
-      #     browser: chrome
-      #     headless: true
-      #     spec: "packages/dnd/cypress/integration/nextjs/**/*.spec.js"
-      #   env:
-      #     Cypress_isNextJS: true
-      #     Cypress_extended: false
-
-      # - name: Extended Features Test for DnD React APP - Chrome
-      #   uses: cypress-io/github-action@v2
-      #   with:
-      #     project: ./packages/dnd
-      #     start: yarn workspace dflex-react-dnd start
-      #     wait-on: "http://localhost:3001/"
-      #     browser: chrome
-      #     headless: true
-      #     spec: |
-      #       packages/dnd/cypress/integration/differentHeights/**/*.spec.js
-      #       packages/dnd/cypress/integration/restrictions/**/*.spec.js
-      #       packages/dnd/cypress/integration/extended/**/*.spec.js
-      #   env:
-      #     Cypress_isNextJS: false
-      #     Cypress_extended: false
+        run: pnpm build
 
       - name: Testing all features for DnD with React APP - Chrome
         uses: cypress-io/github-action@v2
         with:
-          project: ./packages/dnd
-          start: yarn workspace dflex-react-dnd start
+          install: false
+          working-directory: packages/dnd
+          start: pnpm run server -F @dflex/dnd
           wait-on: "http://localhost:3001/"
+          wait-on-timeout: 120
           browser: chrome
           headless: true
         env:

diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,3 @@
+link-workspace-packages = true
+prefer-workspace-packages = true
+recursive-install = true
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,24 +1,24 @@
 # Prerequisites
 
-- [Node.js](https://nodejs.org/en/) >= v10 must be installed.
-- [Yarn](https://classic.yarnpkg.com/en/docs/install)
+- [Node.js](https://nodejs.org/en/) >= v16 must be installed.
+- [PNPM](https://pnpm.io/)
 
 ## Installation
 
-- Run `yarn` in the repository's root directory to install everything you need
+- Run `pnpm install` in the repository's root directory to install everything you need
   for development.
-- Run `yarn build` in the root directory to build the modules.
+- Run `pnpm build` in the root directory to build the modules.
 
 ## Running Tests
 
-- `yarn test` to run the tests in each package available in workspace.
+- `pnpm test` to run the tests in each package available in workspace.
 
 ## Dealing with packages
 
-- Use `yarn workspace` followed by DFlex package name in `package.json`.
+- Use `pnpm --filter` followed by DFlex package name in `package.json`.
   So, If you deal with `dflex/dnd` for example you can use:
 
-  `yarn workspace @dflex/dnd add -D dotenv`
+  `pnpm --filter @dflex/dnd add -D dotenv`
 
 ## Development
 
@@ -29,29 +29,29 @@ and playground or at lease this is the initial plan.
 DFlex is written entirely in plain JavaScript/TypeScript and doesn't depend on
 any specific framework. However, it's using the
 [**React**](https://reactjs.org/) for playground and
-[**Cypress**](https://www.cypress.io/) for end to end testing. It's also using
-[**Jest**](https://jestjs.io/) for unit testing and
-[**Lerna**](https://lerna.js.org/) to manage the packages.
+[**Cypress**](https://www.cypress.io/) for end to end testing. It's also
+using [**Jest**](https://jestjs.io/) for unit testing and
+[**PNPM**](https://pnpm.io/) to manage the packages.
 
 Clone the repository
 
 ```bash
 git clone https://github.com/dflex-js/dflex.git
 cd dflex
-yarn install
+pnpm install
 ```
 
 This will clone and install all development dependencies. If you are using
 windows you probably have to install cypress manually as following:
 
 ```bash
-yarn cy:install:win
+pnpm cy:install:win
 ```
 
 To start development you can use the following command:
 
 ```bash
-yarn workspace @dflex/dnd dev
+pnpm --filter @dflex/dnd server
 ```
 
 This will run the development playground for the DnD package. Open the browser
@@ -64,7 +64,7 @@ If you want to change the codebase and live edit the playground you have to
 compile while running the playground. You can use the following command:
 
 ```bash
-yarn workspace @dflex/dnd compile:w && yarn workspace @dflex/dnd dev
+pnpm --filter @dflex/dnd build:w && pnpm --filter @dflex/dnd server
 
 ```
 
@@ -73,7 +73,7 @@ break the code. You can do that by running the test and have some fun watching
 Cypress do the job:
 
 ```bash
-yarn workspace @dflex/dnd dev:cy:extended
+pnpm --filter @dflex/dnd test
 ```
 
 ## Submitting a PR

diff --git a/README.md b/README.md
@@ -99,27 +99,27 @@ any specific framework. However, it's using the
 [**React**](https://reactjs.org/) for playground and
 [**Cypress**](https://www.cypress.io/) for end to end testing. It's also
 using [**Jest**](https://jestjs.io/) for unit testing and
-[**Lerna**](https://lerna.js.org/) to manage the packages.
+[**PNPM**](https://pnpm.io/) to manage the packages.
 
 Clone the repository
 
 ```bash
 git clone https://github.com/dflex-js/dflex.git
 cd dflex
-yarn install
+pnpm install
 ```
 
 This will clone and install all development dependencies. If you are using
 windows you probably have to install cypress manually as following:
 
 ```bash
-yarn cy:install:win
+pnpm cy:install:win
 ```
 
 To start development you can use the following command:
 
 ```bash
-yarn workspace @dflex/dnd dev
+pnpm --filter @dflex/dnd server
 ```
 
 This will run the development playground for the DnD package. Open the browser
@@ -132,7 +132,7 @@ If you want to change the codebase and live edit the playground you have to
 compile while running the playground. You can use the following command:
 
 ```bash
-yarn workspace @dflex/dnd compile:w && yarn workspace @dflex/dnd dev
+pnpm --filter @dflex/dnd build:w && pnpm --filter @dflex/dnd server
 
 ```
 
@@ -141,7 +141,7 @@ break the code. You can do that by running the test and have some fun watching
 Cypress do the job:
 
 ```bash
-yarn workspace @dflex/dnd dev:cy:extended
+pnpm --filter @dflex/dnd test
 ```
 
 ## Contribution 🌎

diff --git a/package.json b/package.json
@@ -10,20 +10,22 @@
   "scripts": {
     "cy:install:win": "cypress cache clear && .\\node_modules\\.bin\\cypress.cmd install --force",
     "test:unit": "jest",
-    "test:e2e": "yarn workspace @dflex/dnd test",
-    "test": "yarn test:unit && yarn test:e2e",
-    "build": "lerna run build"
+    "test:e2e": "pnpm -f @dflex/dnd test",
+    "test": "pnpm test:unit && pnpm test:e2e",
+    "build": "pnpm build -r"
   },
   "devDependencies": {
-    "@types/jest": "^27.4.0",
+    "@types/jest": "^27.4.1",
     "esbuild": "^0.14.30",
     "esbuild-jest": "^0.5.0",
+    "eslint-config-dflex": "*",
     "istanbul-lib-instrument": "^5.1.0",
-    "jest": "^27.0.5",
+    "jest": "^27.5.1",
     "lerna": "^4.0.0",
-    "prettier": "^2.0.5",
+    "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
     "ts-node": "^10.7.0",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1"
   }
 }
diff --git a/packages/core-instance/package.json b/packages/core-instance/package.json
@@ -8,20 +8,19 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/dflex-core.js",
-      "require": "./dist/dflex-core.mjs",
+      "require": "./dist/dflex-core.js",
+      "import": "./dist/dflex-core.mjs",
       "types": "./dist/index.d.ts"
     },
     "./production": "./dist/dflex-core.min.js"
   },
   "scripts": {
-    "clean": "yarn rimraf ./dist tsconfig.tsbuildinfo",
-    "compile": "yarn clean && yarn tsc -b",
+    "clean": "pnpm rimraf ./dist tsconfig.tsbuildinfo",
     "emit": "tsc --emitDeclarationOnly",
     "build:cjs": "esbuild src/index.ts --bundle --format=cjs --outfile=dist/dflex-core.js",
     "build:esm": "esbuild src/index.ts --bundle --format=esm --outfile=dist/dflex-core.mjs",
     "build:prod": "esbuild src/index.ts --bundle --format=cjs  --minify --outfile=dist/dflex-core.min.js",
-    "build": "yarn clean && yarn build:cjs && yarn build:esm  && yarn build:prod && yarn emit"
+    "build": "pnpm clean && pnpm build:cjs && pnpm build:esm  && pnpm build:prod && pnpm emit"
   },
   "repository": "https://github.com/dflex-js/dflex",
   "homepage": "https://github.com/dflex-js/dflex/tree/master/packages/core-instance",