feat: convert to monorepo (#339)

.codesandbox/ci.json

@@ -1,4 +1,5 @@
 {
-  "buildCommand": "compile",
+  "buildCommand": "build",
+  "sandboxes": ["/packages/example"],
   "node": "16"
 }

.eslintignore

@@ -1,4 +1,5 @@
 node_modules
 dist
+build
 .cache
 .parcel-cache

.github/workflows/deploy.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build example
-        run: yarn example:build
+        run: yarn build --filter=react-youtube-example...
       - name: Deploy to GitHub pages
         if: success()
         uses: crazy-max/ghaction-github-pages@v2

.github/workflows/release.yml

@@ -20,11 +20,11 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Run tests
-        run: yarn test
+        run: yarn test --filter=react-youtube
       - name: Build
-        run: yarn compile
+        run: yarn build --filter=react-youtube
       - name: Semantic Release
-        uses: cycjimmy/semantic-release-action@v3
+        run: yarn release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/tests.yml

@@ -20,4 +20,4 @@ jobs:
       - name: Install dependencies
         run: yarn install
       - name: Run tests
-        run: yarn test:ci
+        run: yarn test --filter=react-youtube

.gitignore

@@ -1,8 +1,8 @@
 node_modules
 npm-debug.log
-dist
-es
-.vscode/*
-.cache/*
-.parcel-cache/*
-build/*
+dist/
+.vscode/
+.cache/
+.parcel-cache/
+build/
+.turbo

package.json

@@ -1,83 +1,32 @@
 {
-  "name": "react-youtube",
-  "version": "1.0.0-semantic-release",
-  "description": "React.js powered YouTube player component",
-  "main": "dist/YouTube.js",
-  "module": "dist/YouTube.mjs",
-  "types": "dist/YouTube.d.ts",
-  "targets": {
-    "main": false,
-    "module": false,
-    "types": false
-  },
-  "sideEffects": false,
-  "files": [
-    "dist/**"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "[email protected]:tjallingt/react-youtube.git"
-  },
-  "keywords": [
-    "react",
-    "youtube",
-    "player",
-    "react-component"
-  ],
-  "author": "Tjalling Tolle <[email protected]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/tjallingt/react-youtube/issues"
-  },
-  "homepage": "https://github.com/tjallingt/react-youtube",
-  "dependencies": {
-    "fast-deep-equal": "3.1.3",
-    "prop-types": "15.8.1",
-    "youtube-player": "5.5.2"
+  "private": true,
+  "scripts": {
+    "dev": "turbo run dev --parallel",
+    "build": "turbo run build",
+    "test": "turbo run test",
+    "clean": "turbo run clean && rm -rf node_modules",
+    "release": "turbo run release --concurrency=1",
+    "lint": "eslint packages --ext .ts,.tsx,.js,.jsx",
+    "commit": "git-cz",
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@commitlint/cli": "16.2.3",
     "@commitlint/config-conventional": "16.2.1",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.4",
-    "@types/jest": "27.4.1",
-    "@types/youtube-player": "5.5.6",
+    "@typescript-eslint/eslint-plugin": "5.19.0",
+    "@typescript-eslint/parser": "5.19.0",
     "commitizen": "4.2.4",
-    "cross-env": "7.0.3",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "8.13.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "7.0.0",
+    "eslint-config-react-app": "7.0.1",
     "eslint-plugin-prettier": "4.0.0",
     "husky": "7.0.4",
-    "jest": "27.5.1",
     "lint-staged": "12.3.7",
-    "parcel": "2.4.1",
     "prettier": "2.6.2",
-    "process": "0.11.10",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "ts-jest": "27.1.4",
-    "tsup": "5.12.4",
+    "turbo": "1.2.2",
     "typescript": "4.6.3"
   },
-  "peerDependencies": {
-    "react": ">=0.14.1"
-  },
-  "engines": {
-    "node": ">= 14.x"
-  },
-  "scripts": {
-    "test": "jest",
-    "test:ci": "jest --ci --runInBand",
-    "compile": "tsup src/YouTube.tsx --format esm,cjs --dts --external react",
-    "prepublishOnly": "npm run compile",
-    "lint": "eslint src example --ext .ts,.tsx,.js,.jsx",
-    "example": "parcel example/index.html --public-url /react-youtube/ --open",
-    "example:build": "parcel build example/index.html --public-url /react-youtube/ --dist-dir build",
-    "commit": "git-cz",
-    "prepare": "husky install"
-  },
   "lint-staged": {
     "*.js": "eslint --ext .ts,.tsx,.js,.jsx --fix",
     "*.{html,json}": "prettier --write"
@@ -87,8 +36,7 @@
       "path": "cz-conventional-changelog"
     }
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "preset": "ts-jest"
-  }
+  "workspaces": [
+    "packages/*"
+  ]
 }

example/README.md → packages/example/README.md

@@ -3,11 +3,11 @@
 Run with NPM:
 
 ```bash
-$ npm run example
+npm run dev
 ```
 
 or with Yarn:
 
 ```bash
-$ yarn example
+yarn dev
 ```

example/index.html → packages/example/index.html

@@ -5,7 +5,8 @@
     <title>react-youtube example</title>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="example.jsx"></script>
+    <div id="app"></div>
+
+    <script type="module" src="src/index.jsx"></script>
   </body>
 </html>

packages/example/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "react-youtube-example",
+  "version": "0.0.0",
+  "description": "react-youtube example starter project",
+  "scripts": {
+    "dev": "parcel index.html --public-url /react-youtube/ --open",
+    "build": "parcel build index.html --public-url /react-youtube/ --dist-dir build",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-youtube": "0.0.0"
+  },
+  "devDependencies": {
+    "parcel": "2.4.1",
+    "process": "0.11.10"
+  },
+  "keywords": [
+    "javascript",
+    "starter"
+  ],
+  "browserslist": "> 0.1%, not dead, not op_mini all, ie 11"
+}

packages/example/src/index.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import YouTube from 'react-youtube';
+
+import './styles.css';
+
+const VIDEOS = ['XxVg_s8xAms', '-DX3vJiqxm4'];
+
+function YouTubeComponentExample() {
+  const [player, setPlayer] = useState(0);
+  const [videoIndex, setVideoIndex] = useState(0);
+  const [width, setWidth] = useState(600);
+  const [hidden, setHidden] = useState(false);
+  const [autoplay, setAutoplay] = useState(false);
+
+  return (
+    <div className="App">
+      <div style={{ display: 'flex', marginBottom: '1em' }}>
+        <button type="button" onClick={() => player.seekTo(120)}>
+          Seek to 2 minutes
+        </button>
+        <button type="button" onClick={() => setVideoIndex((videoIndex + 1) % VIDEOS.length)}>
+          Change video
+        </button>
+        <label>
+          <input
+            type="range"
+            min="300"
+            max="1080"
+            value={width}
+            onChange={(event) => setWidth(event.currentTarget.value)}
+          />
+          Width ({width}px)
+        </label>
+        <button type="button" onClick={() => setHidden(!hidden)}>
+          {hidden ? 'Show' : 'Hide'}
+        </button>
+        <label>
+          <input type="checkbox" value={autoplay} onChange={(event) => setAutoplay(event.currentTarget.checked)} />
+          Autoplaying
+        </label>
+      </div>
+
+      {hidden ? (
+        'mysterious'
+      ) : (
+        <YouTube
+          videoId={VIDEOS[videoIndex]}
+          autoplay={autoplay}
+          width={width}
+          height={width * (9 / 16)}
+          className="container"
+          onReady={(event) => setPlayer(event.target)}
+        />
+      )}
+    </div>
+  );
+}
+
+ReactDOM.render(<YouTubeComponentExample />, document.getElementById('app'));

packages/example/src/styles.css

@@ -0,0 +1,6 @@
+#app {
+  font-family: sans-serif;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}