🔧 Move from npm to pnpm

.github/workflows/pr.yml

@@ -30,10 +30,13 @@ jobs:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
 
       - name: Install dependencies
-        run: npm install
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
 
       - name: Build the package
-        run: npm run build
+        run: pnpm run build
 
   run-unit-tests:
     name: Test on Node ${{ matrix.node_version }}
@@ -49,10 +52,13 @@ jobs:
           node-version: ${{ matrix.node-version }}
 
       - name: Install dependencies
-        run: npm install
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
 
       - name: Run unit tests (with experimental VM modules)
-        run: npm test
+        run: pnpm run test
 
   trufflehog:
     name: TruffleHog

.github/workflows/publish-all.yml

@@ -24,10 +24,13 @@ jobs:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
 
       - name: Install dependencies
-        run: npm install
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
 
       - name: Build the package
-        run: npm run build
+        run: pnpm run build
 
       - name: Publish Vue 2 package to npm registry
         run: |

.github/workflows/publish-vue2.yml

@@ -21,10 +21,13 @@ jobs:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
 
       - name: Install dependencies
-        run: npm install
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
 
       - name: Build the package
-        run: npm run build
+        run: pnpm run build
 
       - name: Publish to npm registry
         run: |

.github/workflows/publish-vue3.yml

@@ -21,10 +21,13 @@ jobs:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
 
       - name: Install dependencies
-        run: npm install
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
 
       - name: Build the package
-        run: npm run build
+        run: pnpm run build
 
       - name: Publish to npm registry
         run: |

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .idea/
 .cache/
+.pnpm-store/
 
 .env
 

.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

build/postbuild.js

@@ -1,7 +1,7 @@
 import { existsSync } from 'fs';
 import { appendFile, mkdir, readFile, rm, writeFile } from 'fs/promises';
 import glob from 'glob';
-import { compile } from 'sass';
+import sass from 'sass';
 
 const COMPONENT_STYLE_COMMENT = '\n/** Lume component styles */\n';
 
@@ -27,7 +27,7 @@ async function run() {
 
   try {
     // Compile main.scss to CSS
-    const mainCompileResult = compile(
+    const mainCompileResult = sass.compile(
       '../lib/src/styles/main.scss',
       sassCompilerOptions
     );

docker-compose.yml

@@ -9,5 +9,8 @@ services:
       context: .
       args:
         docker_image: $DOCKER_IMAGE
+    ports:
+      - '9002:9002' # Vue 2 Storybook
+      - '9003:9003' # Vue 3 Storybook
     volumes:
       - ./:/home/node/lume

package.json

@@ -3,11 +3,6 @@
   "version": "0.8.0",
   "description": "Lume is a component library for visual representations of data, built for Vue with D3.",
   "type": "module",
-  "workspaces": [
-    "packages/lib",
-    "packages/vue2",
-    "packages/vue3"
-  ],
   "license": "MIT",
   "contributors": [
     {
@@ -32,66 +27,32 @@
     "url": "https://github.com/Adyen/lume.git"
   },
   "scripts": {
-    "build": "nx run-many --target=build",
-    "build:storybook": "NODE_ENV=production build-storybook -c .storybook -o storybook",
+    "build": "pnpm --parallel -r --filter='./packages/*' run build",
+    "build:storybook": "NODE_ENV=production pnpm --filter='./packages/vue3' run build:storybook -o ../../storybook",
     "confighooks": "git config core.hooksPath ./git-hooks",
-    "prepare": "npm run confighooks && echo \" ✔ Git hooks path configured to ./git-hooks\"",
+    "pack": "pnpm -r --filter='./packages/vue*' run pack",
+    "prepare": "pnpm run confighooks && echo \" ✔ Git hooks path configured to ./git-hooks\"",
     "release": "release-it",
-    "storybook": "start-storybook -p 9001 -c .storybook",
-    "test": "nx test lib",
-    "test:watch": "nx test:watch lib",
-    "test:update:snapshot": "nx test:update:snapshot lib",
-    "test:coverage": "nx test:coverage lib"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.11.4",
-    "d3": "7.8.4",
-    "d3-sankey": "0.12.3"
+    "storybook": "pnpm --parallel -r --filter='./packages/*' run storybook",
+    "test": "pnpm --filter='./packages/vue3' run test"
   },
   "devDependencies": {
     "@release-it-plugins/workspaces": "^3.2.0",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-storysource": "^6.5.12",
-    "@storybook/addons": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/theming": "^6.5.12",
-    "@storybook/vue3": "^6.5.12",
-    "@types/d3": "^7.4.0",
-    "@types/d3-sankey": "^0.12.0",
-    "@types/jest": "^29.2.2",
     "@types/node": "^18.11.5",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.43.0",
-    "@vitest/coverage-istanbul": "^0.30.0",
-    "@vue/test-utils": "^2.3.0",
     "auto-changelog": "^2.4.0",
     "css-loader": "^6.7.2",
     "eslint": "^8.27.0",
     "eslint-plugin-vue": "^9.9.0",
     "glob": "^8.0.3",
-    "html-webpack-plugin": "^5.5.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jsdom": "^20.0.3",
     "mini-css-extract-plugin": "^2.7.0",
-    "nx": "14.8.2",
     "prettier": "^2.7.1",
     "release-it": "^15.6.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.63.3",
+    "sass": "^1.62.1",
     "sass-loader": "^13.2.0",
-    "storybook-addon-designs": "^6.2.1",
-    "ts-jest": "^29.0.3",
     "typescript": "^4.6.3",
-    "vite": "^4.0.0",
-    "vite-plugin-static-copy": "^0.14.0",
-    "vitest": "^0.30.0",
-    "vue": "^3.2.47",
-    "vue-loader": "^15.10.0",
-    "vue-style-loader": "^4.1.3",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0"
   },

packages/lib/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@adyen/lume-core",
-  "version": "*",
+  "version": "0.8.0",
   "description": "",
+  "private": true,
   "main": "index.js",
-  "directories": {
-    "test": "test"
-  },
   "exports": {
     ".": "./src/index.ts",
     "./plugin": "./src/plugin.ts",
@@ -14,11 +12,17 @@
   "scripts": {
     "lint:fix": "npm run lint -- --fix",
     "lint:pretty": "prettier --write --ignore-unknown .",
-    "lint": "eslint ./src ./test --ext .js,.ts,.vue",
-    "test": "vitest run --config=vitest.config.ts --silent",
-    "test:watch": "vitest --config=vitest.config.ts",
-    "test:update:snapshot": "vitest --config=vitest.config.ts -u",
-    "test:coverage": "vitest run --coverage"
+    "lint": "eslint ./src ./test --ext .js,.ts,.vue"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.4",
+    "d3": "7.8.0",
+    "d3-sankey": "0.12.3"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "7.2.1",
+    "@vue/test-utils": "^2.3.2",
+    "vitest": "^0.32.0"
   },
   "keywords": [],
   "author": "",