chore: npm -> pnpm

.gitignore

@@ -93,10 +93,10 @@ temp/
 .fusebox/
 .dynamodb/
 
-# Package manager lock files (keeping npm for this setup)
-# package-lock.json  # Uncommented for npm workspace
+# Package manager lock files (keeping pnpm for this setup)
+package-lock.json  
 yarn.lock
-pnpm-lock.yaml
+# pnpm-lock.yaml # Uncommented for pnpm workspace
 bun.lockb
 
 # Monorepo specific

.npmrc

@@ -0,0 +1,2 @@
+node-version=22.19.0
+use-node-version=22.19.0

.nvmrc

@@ -0,0 +1 @@
+22.19.0

README.md

@@ -63,7 +63,11 @@ vjs-10-monorepo/
 ### Installation
 
 ```bash
-npm install
+nvm use
+```
+
+```bash
+pnpm install
 ```
 
 ### Building
@@ -71,32 +75,38 @@ npm install
 Build all packages:
 
 ```bash
-npm run build
+pnpm build
 ```
 
-Build specific package:
+Build specific packages:
 
 ```bash
-npm run build --workspace=@vjs-10/core
+pnpm -F media build
+
+pnpm -F html build
+pnpm -F html-icons build
+
+pnpm -F react build
+pnpm -F react-icons build
 ```
 
 ### Development
 
 ```bash
 # Install dependencies
-npm install
+pnpm install
 
 # Build all packages
-npm run build
+pnpm build
 
 # Run type checking
-npm run typecheck
+pnpm typecheck
 
 # Run linting
-npm run lint
+pnpm lint
 
 # Run dev build
-npm run dev
+pnpm dev
 ```
 
 ## Package Dependencies

examples/html-demo/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vjs-10/html": "*"
+    "@vjs-10/html": "workspace:*"
   },
   "devDependencies": {
     "typescript": "^5.9.2",

examples/react-demo/package.json

@@ -10,12 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vjs-10/react": "*",
+    "@vjs-10/react": "workspace:*",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4.1.13"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.0",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.3",

package.json

@@ -2,14 +2,6 @@
   "name": "vjs-10-monorepo",
   "version": "1.0.0",
   "description": "A monorepo for Video.js 10 related library packages",
-  "private": true,
-  "workspaces": [
-    "packages/core/*",
-    "packages/html/*",
-    "packages/react/*",
-    "packages/react-native/*",
-    "examples/*"
-  ],
   "scripts": {
     "build:libs": "turbo run build --filter=!./examples/*",
     "build": "turbo run build",
@@ -26,17 +18,15 @@
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
     "prettier": "^3.6.2",
     "react": "^18.0.0",
-    "tsup": "^8.0.0",
     "turbo": "^2.5.5",
     "typescript": "^5.9.2"
   },
-  "packageManager": "npm@10.9.2",
+  "packageManager": "pnpm@10.17.0",
   "engines": {
-    "node": ">=18.0.0",
-    "npm": ">=9.0.0"
+    "node": ">=22.19.0",
+    "npm": ">=10.9.3"
   },
   "repository": {
     "type": "git",

packages/core/icons/package.json

@@ -35,6 +35,7 @@
     "rollup": "^4.0.0",
     "rollup-plugin-string": "^3.0.0",
     "tslib": "^2.6.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   },
   "publishConfig": {

packages/core/icons/src/index.ts

@@ -16,7 +16,7 @@ export const SVG_ICONS = {
   volumeOff: volumeOffSvg,
   fullscreenEnter: fullscreenEnterSvg,
   fullscreenExit: fullscreenExitSvg,
-} as const;
+};
 
 // Legacy interface for backward compatibility
 export interface IconDefinition {

packages/core/media-store/package.json

@@ -32,11 +32,12 @@
     "nanostores": "^1.0.1"
   },
   "devDependencies": {
-    "rollup": "^4.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "rollup": "^4.0.0",
     "tslib": "^2.6.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   },
   "publishConfig": {

packages/core/media/package.json

@@ -29,9 +29,10 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/playback-engine": "*"
+    "@vjs-10/playback-engine": "workspace:*"
   },
   "devDependencies": {
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   },
   "publishConfig": {

packages/core/playback-engine/package.json

@@ -33,6 +33,7 @@
     "hls.js": "^1.6.7"
   },
   "devDependencies": {
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   },
   "publishConfig": {

packages/html/html-icons/package.json

@@ -30,7 +30,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/icons": "*"
+    "@vjs-10/icons": "workspace:*"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.0",
@@ -38,6 +38,7 @@
     "@rollup/plugin-typescript": "^11.0.0",
     "rollup": "^4.0.0",
     "tslib": "^2.6.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   },
   "publishConfig": {

packages/html/html-media-elements/package.json

@@ -31,9 +31,10 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@open-wc/context-protocol": "^0.0.9",
-    "@vjs-10/media-store": "*"
+    "@vjs-10/media-store": "workspace:*"
   },
   "devDependencies": {
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   },
   "publishConfig": {

packages/html/html-media-store/package.json

@@ -29,10 +29,11 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/media-store": "*",
-    "@vjs-10/html-media-elements": "*"
+    "@vjs-10/html-media-elements": "workspace:*",
+    "@vjs-10/media-store": "workspace:*"
   },
   "devDependencies": {
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   },
   "publishConfig": {

packages/html/html/package.json

@@ -30,16 +30,19 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/html-icons": "*",
-    "@vjs-10/html-media-elements": "*",
-    "@vjs-10/html-media-store": "*"
+    "@open-wc/context-protocol": "^0.0.9",
+    "@vjs-10/html-icons": "workspace:*",
+    "@vjs-10/html-media-elements": "workspace:*",
+    "@vjs-10/html-media-store": "workspace:*",
+    "@vjs-10/media-store": "workspace:*"
   },
   "devDependencies": {
-    "rollup": "^4.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "rollup": "^4.0.0",
     "tslib": "^2.6.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   },
   "publishConfig": {

packages/react-native/react-native-icons/package.json

@@ -28,14 +28,14 @@
     "mobile"
   ],
   "license": "Apache-2.0",
-  "dependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.2",
     "@types/react": "^18.0.0",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

packages/react-native/react-native-media-elements/package.json

@@ -28,14 +28,14 @@
     "mobile"
   ],
   "license": "Apache-2.0",
-  "dependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.2",
     "@types/react": "^18.0.0",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

packages/react-native/react-native/package.json

@@ -29,16 +29,17 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/react-native-icons": "*",
-    "@vjs-10/react-native-media-elements": "*"
+    "@vjs-10/react-native-icons": "workspace:*",
+    "@vjs-10/react-native-media-elements": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.2",
     "@types/react": "^18.0.0",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

packages/react/react-icons/README.md

@@ -71,26 +71,26 @@ interface IconProps extends SVGAttributes<SVGElement> {
 ### Adding New Icons
 
 1. **Add SVG file** to `packages/core/icons/assets/filename.svg`
-2. **Regenerate components**: Run `npm run generate` in this package
+2. **Regenerate components**: Run `pnpm generate` in this package
 3. **New component** will be available as `FilenameIcon`
 
 ### Modifying Existing Icons
 
 1. **Edit SVG file** in `packages/core/icons/assets/`
-2. **Regenerate components**: Run `npm run generate` in this package
+2. **Regenerate components**: Run `pnpm generate` in this package
 3. **Component updates automatically**
 
 ### Build Process
 
 ```bash
 # Generate React components from SVG files
-npm run generate
+pnpm generate
 
 # Build the package (includes generation step)
-npm run build
+pnpm build
 
 # Clean generated files and dist
-npm run clean
+pnpm clean
 ```
 
 ## 📦 Package Scripts

packages/react/react-icons/package.json

@@ -16,7 +16,8 @@
     "dist"
   ],
   "scripts": {
-    "generate": "svgr --config-file svgr.config.js --out-dir src/generated-icons ../../core/icons/assets",
+    "generate": "svgr --config-file svgr.config.js --out-dir src/generated-icons ../../core/icons/assets && pnpm format:icons",
+    "format:icons": "prettier src/generated-icons --write --log-level warn --cache",
     "build": "npm run generate && rollup -c && tsc --project tsconfig.build.json",
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist src/generated-icons"
@@ -30,24 +31,24 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/icons": "*"
+    "@vjs-10/icons": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "rollup": "^4.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
-    "tslib": "^2.6.0",
-    "typescript": "^5.9.2",
-    "@types/react": "^18.0.0",
-    "react": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
     "@svgr/cli": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@svgr/plugin-prettier": "^8.1.0",
-    "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0"
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "rollup": "^4.0.0",
+    "tslib": "^2.6.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

packages/react/react-icons/svgr.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
+  plugins: ['@svgr/plugin-jsx'],
   typescript: true,
   jsxRuntime: 'automatic',
   icon: false, // Don't set height/width attributes.
@@ -28,7 +28,7 @@ module.exports = {
  *
  * To modify this icon:
  * 1. Edit the corresponding SVG file in packages/core/icons/assets/
- * 2. Run \`npm run generate\` in this package to regenerate components
+ * 2. Run \`pnpm generate\` in this package to regenerate components
  *
  * @generated
  */
@@ -62,7 +62,7 @@ ${variables.exports};
  *
  * To modify icons or add new ones:
  * 1. Add/edit SVG files in packages/core/icons/assets/
- * 2. Run \`npm run generate\` in this package to regenerate components
+ * 2. Run \`pnpm generate\` in this package to regenerate components
  *
  * @generated
  */

packages/react/react-media-elements/package.json

@@ -29,16 +29,17 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/media": "*",
-    "@vjs-10/playback-engine": "*"
+    "@vjs-10/media": "workspace:*",
+    "@vjs-10/playback-engine": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.2",
     "@types/react": "^18.0.0",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

packages/react/react-media-store/package.json

@@ -30,15 +30,16 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/media-store": "*"
+    "@vjs-10/media-store": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.2",
     "@types/react": "^18.0.0",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

packages/react/react/package.json

@@ -30,24 +30,26 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@vjs-10/media": "*",
-    "@vjs-10/react-icons": "*",
-    "@vjs-10/react-media-elements": "*",
-    "@vjs-10/react-media-store": "*"
+    "@vjs-10/media": "workspace:*",
+    "@vjs-10/media-store": "workspace:*",
+    "@vjs-10/react-icons": "workspace:*",
+    "@vjs-10/react-media-elements": "workspace:*",
+    "@vjs-10/react-media-store": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "rollup": "^4.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "rollup": "^4.0.0",
     "rollup-plugin-postcss": "^4.0.0",
     "tslib": "^2.6.0",
-    "typescript": "^5.9.2",
-    "@types/react": "^18.0.0",
-    "react": "^18.0.0"
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+packages:
+  - 'packages/core/*'
+  - 'packages/html/*'
+  - 'packages/react/*'
+  - 'packages/react-native/*'
+  - 'examples/*'
+minimumReleaseAge: 1440