Merge pull request #336 from tjallingt/canary

chore: release
tjallingt · Apr 13, 2022 · 210efab · 210efab
2 parents b2559da + 0dd1160
commit 210efab
Show file tree

Hide file tree

Showing 14 changed files with 1,633 additions and 5,922 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,4 @@
 node_modules
 dist
+.cache
+.parcel-cache
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": ["react-app", "plugin:prettier/recommended", "prettier"],
+  "extends": ["react-app", "plugin:prettier/recommended"],
   "env": {
     "browser": true,
     "jest": true

diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ dist
 es
 .vscode/*
 .cache/*
+.parcel-cache/*
 build/*
diff --git a/README.md b/README.md
@@ -12,20 +12,35 @@ Simple [React](http://facebook.github.io/react/) component acting as a thin laye
 
 ## Installation
 
+### NPM
+
+```bash
+npm install react-youtube
+```
+
+### Yarn
+
 ```bash
-$ npm install react-youtube
+yarn add react-youtube
+```
+
+### PNPM
+
+```bash
+pnpm add react-youtube
 ```
 
 ## Usage
 
 ```js
 <YouTube
-  videoId={string}                  // defaults -> null
-  id={string}                       // defaults -> null
-  className={string}                // defaults -> null
+  videoId={string}                  // defaults -> ''
+  id={string}                       // defaults -> ''
+  className={string}                // defaults -> ''
   containerClassName={string}       // defaults -> ''
-  containerStyle={object}           // defaults -> null
-  title={string}                    // defaults -> null
+  containerStyle={object}           // defaults -> {}
+  title={string}                    // defaults -> ''
+  loading={string}                  // defaults -> undefined
   opts={obj}                        // defaults -> {}
   onReady={func}                    // defaults -> noop
   onPlay={func}                     // defaults -> noop
@@ -43,7 +58,8 @@ For convenience it is also possible to access the PlayerState constants through
 
 ## Example
 
-```js
+```jsx
+// js
 import React from 'react';
 import YouTube from 'react-youtube';
 
@@ -68,6 +84,30 @@ class Example extends React.Component {
 }
 ```
 
+```tsx
+// ts
+import React from 'react';
+import YouTube, { YouTubeProps } from 'react-youtube';
+
+function Example() {
+  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
+    // access to player in all event handlers via event.target
+    event.target.pauseVideo();
+  }
+
+  const opts: YouTubeProps['opts'] = {
+    height: '390',
+    width: '640',
+    playerVars: {
+      // https://developers.google.com/youtube/player_parameters
+      autoplay: 1,
+    },
+  };
+
+  return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={onPlayerReady} />;
+}
+```
+
 ## Controlling the player
 
 You can access & control the player in a way similar to the [official api](https://developers.google.com/youtube/iframe_api_reference#Events):

diff --git a/example/example.js → example/example.jsx b/example/example.js → example/example.jsx
diff --git a/example/index.html b/example/index.html
@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="./example.js"></script>
+    <script type="module" src="example.jsx"></script>
   </body>
 </html>
diff --git a/index.d.ts b/index.d.ts
diff --git a/package.json b/package.json
@@ -2,12 +2,17 @@
   "name": "react-youtube",
   "version": "1.0.0-semantic-release",
   "description": "React.js powered YouTube player component",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "index.d.ts",
+  "main": "dist/YouTube.js",
+  "module": "dist/YouTube.mjs",
+  "types": "dist/YouTube.d.ts",
+  "targets": {
+    "main": false,
+    "module": false,
+    "types": false
+  },
+  "sideEffects": false,
   "files": [
-    "dist",
-    "index.d.ts"
+    "dist/**"
   ],
   "repository": {
     "type": "git",
@@ -31,40 +36,30 @@
     "youtube-player": "5.5.2"
   },
   "devDependencies": {
-    "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.9",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.7",
     "@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",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "27.5.1",
-    "babel-loader": "8.2.4",
     "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-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.29.4",
-    "eslint-plugin-react-hooks": "4.4.0",
     "husky": "7.0.4",
     "jest": "27.5.1",
     "lint-staged": "12.3.7",
-    "npm-run-all": "4.1.5",
-    "parcel-bundler": "1.12.5",
+    "parcel": "2.4.1",
     "prettier": "2.6.2",
+    "process": "0.11.10",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "semantic-release": "19.0.2"
+    "ts-jest": "27.1.4",
+    "tsup": "5.12.4",
+    "typescript": "4.6.3"
   },
   "peerDependencies": {
     "react": ">=0.14.1"
@@ -75,18 +70,16 @@
   "scripts": {
     "test": "jest",
     "test:ci": "jest --ci --runInBand",
-    "compile:cjs": "babel src/YouTube.js --out-file dist/index.js",
-    "compile:es": "cross-env BABEL_ENV=es babel src/YouTube.js --out-file dist/index.esm.js",
-    "compile": "npm-run-all --parallel compile:*",
+    "compile": "tsup src/YouTube.tsx --format esm,cjs --dts --external react",
     "prepublishOnly": "npm run compile",
-    "lint": "eslint src example",
+    "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/ --out-dir build",
+    "example:build": "parcel build example/index.html --public-url /react-youtube/ --dist-dir build",
     "commit": "git-cz",
     "prepare": "husky install"
   },
   "lint-staged": {
-    "*.js": "eslint --fix",
+    "*.js": "eslint --ext .ts,.tsx,.js,.jsx --fix",
     "*.{html,json}": "prettier --write"
   },
   "config": {
@@ -95,6 +88,7 @@
     }
   },
   "jest": {
-    "testEnvironment": "jsdom"
+    "testEnvironment": "jsdom",
+    "preset": "ts-jest"
   }
 }