Dbudzinski/new build (#49)

chore: migrate build from snowpack to vite, improve build and lint
jwplayer · May 6, 2022 · 6fcd9d8 · 6fcd9d8
1 parent 97940a0
commit 6fcd9d8
Show file tree

Hide file tree

Showing 166 changed files with 2,017 additions and 5,816 deletions.
diff --git a/.depcheckrc.yaml b/.depcheckrc.yaml
@@ -0,0 +1,15 @@
+ignores: [
+    # These are dependencies for vite and vite plugins that depcheck doesn't recognize as being used
+    "postcss-scss",
+    "stylelint-order",
+    "stylelint-config-recommended-scss",
+    "stylelint-declaration-strict-value",
+    "stylelint-scss",
+    # This is used by commitlint in .commitlintrc.js
+    " @commitlint/config-conventional",
+    # These are vite aliases / tsconfig paths that point to specific local directories
+    # Note the \\ is apparently necessary to escape the # or the ignore doesn't work
+    "\\#src",
+    "\\#test",
+    "\\#types"
+]
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -30,10 +30,6 @@ module.exports = {
     // Browser conf
     browser: true,
     es6    : true,
-
-    // Jest conf
-    jest: true,
-    node: true,
   },
 
   rules    : {
@@ -64,6 +60,8 @@ module.exports = {
         'newlines-between': 'always',
       },
     ],
+    // Not needed in React 17
+    'react/react-in-jsx-scope': 'off'
   },
   overrides: [
     {

diff --git a/.github/workflows/codeceptjs.yml b/.github/workflows/codeceptjs.yml
@@ -8,6 +8,7 @@ jobs:
     runs-on: ubuntu-latest
 
     strategy:
+      fail-fast: false
       matrix:
         node-version: [14.x]
         config: [desktop, mobile]
@@ -25,6 +26,6 @@ jobs:
       - name: Start dev server
         run: yarn start &
       - name: Run tests
-        run: wait-on http://localhost:8080 && yarn codecept:${{ matrix.config }}
+        run: wait-on -v -t 30000 -c ./scripts/waitOnConfig.js http-get://localhost:8080 && yarn codecept:${{ matrix.config }}
         env:
           CI: true
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -1,4 +1,4 @@
-name: Jest
+name: Test
 
 on: [pull_request]
 

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+build
+coverage
+node_modules
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -92,7 +92,7 @@ While far from comprehensive, following these guidelines will get the easy stuff
 
 ##### Style
 
-1. This project uses snowpack + webpack plugin to build and compile. **Code produced by the build must work across all supported browsers and devices - Chrome, FF, Safari, Edge, and IE 9-11**
+1. This project uses vite to build and compile. **Code produced by the build must work across all supported browsers and devices - modern Chrome, FF, Safari, and Edge**
 2. Ensure that your code matches the formatting of the codebase by running ```yarn format```
 3. Ensure that your code follows our styleguide by passing our ESLint rules
    - You can run lint analysis by running ```yarn lint```
@@ -152,4 +152,4 @@ This section lists the labels we use to help us track and manage issues and pull
 
 ### Attribution
 
-Parts of this Code of Conduct have been adapted from the contribution guidelines found in the [atom/atom repository](https://github.com/atom/atom/blob/master/CONTRIBUTING.md)
+Parts of this Code of Conduct have been adapted from the contribution guidelines found in the [atom/atom repository](https://github.com/atom/atom/blob/master/CONTRIBUTING.md)
diff --git a/docs/easy-deployments.md b/docs/easy-deployments.md
@@ -40,8 +40,8 @@ Github pages have some [usage limits](https://docs.github.com/en/pages/getting-s
 
 The `yarn deploy:github` command executes a simple nodejs script located in `scripts/deploy-github.js`. The script executes the following commands:
 
-1. Runs `yarn build` with `SNOWPACK_PUBLIC_BASE_URL` envvar.<br/><br />That envvar is used to set the URL location of the project. By default if `SNOWPACK_PUBLIC_BASE_URL` is empty, the value will be based on the `git remote get-url origin` command. You can also pass your own `SNOWPACK_PUBLIC_BASE_URL` envvar by running `SNOWPACK_PUBLIC_BASE_URL=/my-base/ yarn deploy:github`.
-2. Runs `yarn gh-pages -o origin -d build`.<br /><br />You can change the remote from *origin* to *myremote* by running `yarn deploy:github --github-remote=myremote`.  The `yarn deploy:github` command uses the GitHub remote to compute the default value for `SNOWPACK_PUBLIC_BASE_URL`.
+1. Runs `yarn build` with `APP_GITHUB_PUBLIC_BASE_URL` envvar.<br/><br />That envvar is used to set the URL location of the project. By default if `APP_GITHUB_PUBLIC_BASE_URL` is empty, the value will be based on the `git remote get-url origin` command. You can also pass your own `APP_GITHUB_PUBLIC_BASE_URL` envvar by running `APP_GITHUB_PUBLIC_BASE_URL=/my-base/ yarn deploy:github`.
+2. Runs `yarn gh-pages -o origin -d build`.<br /><br />You can change the remote from *origin* to *myremote* by running `yarn deploy:github --github-remote=myremote`.  The `yarn deploy:github` command uses the GitHub remote to compute the default value for `APP_GITHUB_PUBLIC_BASE_URL`.
 
 <br />
 

diff --git a/docs/frameworks.md b/docs/frameworks.md
@@ -27,16 +27,16 @@ The Virtual DOM compares the components’ previous states and updates only the
 
 [Read more.](https://reactjs.org/docs/getting-started.html)
 
-## Snowpack
+## Vite
 
-Snowpack is a frontend build tool. Snowpack leverages JavaScript's native module system (known as ESM) to avoid unnecessary work.
+Vite is a modern frontend build tool. It takes advantage of modern browser support form ES modules to drastically decrease bundling overhead and improve build and dev server start time.
 
 - Instant startup
 - Build once, cache forever
 - HMR feat. Fast Refresh
 - Easy configuration
 
-[Read more.](https://www.snowpack.dev/tutorials/quick-start)
+[Read more.](https://vitejs.dev/guide/)
 
 ## React query
 
@@ -60,17 +60,18 @@ React Router is a collection of navigational components that compose declarative
 
 [Read more.](https://reactrouter.com/web/guides/quick-start)
 
-## Jest
+## Vitest
 
-Jest is a JavaScript test runner, that is, a JavaScript library for creating, running, and structuring tests. It allows the developer to write tests that are easy to read and maintain.
+Vitest is a JavaScript test runner explicitly written to work with vite builds without requiring any duplicated build pipeline.
 
 - Fast in execution
 - Simple mock functions
 - Manual module mocks
 - Snapshot testing
 - Built-in coverage reports
+- Works seamlessly with vite
 
-[Read more.](https://jestjs.io/docs/getting-started)
+[Read more.](https://vitest.dev/guide/)
 
 ## Sass
 

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -9,9 +9,9 @@
   <meta name="twitter:card" content="summary" data-react-helmet="true"  />
   <meta property="og:title" content="JW OTT Webapp" data-react-helmet="true" >
   <meta property="og:description" content="JW OTT Webapp is an open-source, dynamically generated video website." data-react-helmet="true">
-  <meta property="og:image" content="%PUBLIC_URL%/images/icon-256x256.png" data-react-helmet="true">
+  <meta property="og:image" content="/images/icon-256x256.png" data-react-helmet="true">
 
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-icon" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
 
   <!-- Pre-connect JW Player origins -->
   <link rel="preconnect" href="https://content.jwplatform.com"/>
@@ -20,22 +20,22 @@
 
   <!-- Safari web app -->
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/images/apple-touch-icon.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon.png">
 
   <!-- Chrome, Firefox OS and Opera -->
   <meta name="theme-color" content="#000000">
   <!-- Windows Phone -->
   <meta name="msapplication-navbutton-color" content="#000000">
-  <meta name="msapplication-config" content="%PUBLIC_URL%/browserconfig.xml">
+  <meta name="msapplication-config" content="/browserconfig.xml">
   <!-- iOS Safari -->
   <meta name="apple-mobile-web-app-status-bar-style" content="#000000">
 
   <!-- Manifest -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="manifest" href="/manifest.json" />
 </head>
 <body>
   <div id="root"></div>
   <noscript>You need to enable JavaScript to run this app.</noscript>
-  <script type="module" src="/dist/index.js"></script>
+  <script type="module" src="/src/index.tsx"></script>
 </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
diff --git a/jest.setup.js b/jest.setup.js
diff --git a/package.json b/package.json
@@ -7,23 +7,24 @@
   "private": true,
   "scripts": {
     "prepare": "husky install",
-    "start": "snowpack dev",
-    "build": "snowpack build",
-    "test": "TZ=UTC jest",
-    "test-watch": "TZ=UTC jest --watch",
-    "test-coverage": "TZ=UTC jest --coverage",
+    "start": "vite",
+    "build": "vite build",
+    "test": "TZ=UTC vitest run",
+    "test-watch": "TZ=UTC vitest",
+    "test-coverage": "TZ=UTC vitest run --coverage",
     "i18next": "i18next src/{components,containers,screens}/**/{**/,/}*.tsx && node ./scripts/i18next/generate.js",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
+    "format": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "lint": "prettier --check \"{**/*,*}.{js,ts,jsx,tsx}\" && eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "lint:styles": "stylelint \"src/**/*.scss\"",
     "commit-msg": "commitlint --edit $1",
-    "pre-commit": "lint-staged && TZ=UTC yarn test --coverage --watchAll=false --ci --bail=1",
+    "pre-commit": "depcheck && lint-staged && TZ=UTC yarn test --coverage",
     "codecept:mobile": "cd test-e2e && codeceptjs -c codecept.mobile.js run --steps",
     "codecept:desktop": "cd test-e2e && codeceptjs -c codecept.desktop.js run --steps",
     "deploy:github": "node ./scripts/deploy-github.js"
   },
   "dependencies": {
     "classnames": "^2.3.1",
+    "history": "^4.10.1",
     "i18next": "^20.3.1",
     "i18next-browser-languagedetector": "^6.1.1",
     "jwt-decode": "^3.1.2",
@@ -37,88 +38,82 @@
     "react-query": "^3.13.10",
     "react-router-dom": "^5.2.0",
     "react-virtualized": "^9.22.3",
-    "tile-dock": "https://github.com/RCVZ/tile-dock-temp",
     "wicg-inert": "^3.1.1",
     "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.14.5",
+    "@codeceptjs/configure": "^0.8.0",
     "@commitlint/cli": "^12.1.1",
     "@commitlint/config-conventional": "^12.1.1",
-    "@snowpack/app-scripts-react": "^2.0.1",
-    "@snowpack/plugin-build-script": "^2.1.0",
-    "@snowpack/plugin-dotenv": "^2.1.0",
-    "@snowpack/plugin-postcss": "^1.4.3",
-    "@snowpack/plugin-react-refresh": "^2.5.0",
-    "@snowpack/plugin-run-script": "^2.3.0",
-    "@snowpack/plugin-sass": "^1.4.0",
-    "@snowpack/plugin-typescript": "^1.2.1",
-    "@snowpack/plugin-webpack": "^3.0.0",
-    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^11.2.6",
-    "@types/jest": "^26.0.22",
     "@types/jwplayer": "^8.2.7",
     "@types/lodash.merge": "^4.6.6",
+    "@types/node": "^17.0.23",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
     "@types/react-virtualized": "^9.21.12",
-    "@types/snowpack-env": "^2.3.4",
-    "@typescript-eslint/eslint-plugin": "^4.28.3",
-    "@typescript-eslint/parser": "^4.28.3",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "@vitejs/plugin-react": "^1.0.7",
+    "c8": "^7.11.2",
     "codeceptjs": "^3.2.3",
     "confusing-browser-globals": "^1.0.10",
+    "depcheck": "^1.4.3",
     "eslint": "^7.31.0",
-    "eslint-config-react": "^1.1.7",
     "eslint-plugin-codeceptjs": "^1.3.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-rulesdir": "^0.2.0",
-    "eslint-watch": "^7.0.0",
+    "faker": "^5.5.1",
     "husky": "^6.0.0",
     "i18next-parser": "^4.2.0",
-    "jest": "^26.6.3",
-    "jest-css-modules-transform": "^4.3.0",
+    "jsdom": "^19.0.0",
     "lint-staged": "^10.5.4",
     "playwright": "^1.12.3",
     "postcss": "^8.3.5",
-    "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2",
-    "postcss-scss": "^4.0.0",
+    "postcss-scss": "^4.0.4",
     "prettier": "^2.3.2",
-    "snowpack": "^3.8.2",
-    "start-server-and-test": "^1.12.6",
+    "react-app-polyfill": "^3.0.0",
+    "sass": "^1.49.10",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended-scss": "^4.3.0",
     "stylelint-declaration-strict-value": "^1.7.12",
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.20.0",
-    "ts-node": "^10.4.0",
+    "ts-node": "^10.7.0",
     "typescript": "^4.3.4",
-    "workbox-webpack-plugin": "^6.1.5"
+    "vite": "^2.9.0",
+    "vite-plugin-eslint": "^1.3.0",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-pwa": "^0.11.13",
+    "vite-plugin-static-copy": "^0.4.4",
+    "vite-plugin-stylelint": "^2.1.0",
+    "vitest": "^0.10.0",
+    "workbox-build": "^6.5.2",
+    "workbox-window": "^6.5.2"
   },
   "peerDependencies": {
-    "webpack": "^5.34.0"
+    "react-router": "^5.2.1"
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx}": [
-      "prettier --write"
+    "{**/*,*}.{js,ts,jsx,tsx}": [
+      "prettier --check",
+      "eslint"
     ],
     "src/**/*.scss": [
       "stylelint"
     ]
   },
-  "browserslist": [
-    "defaults",
-    "not IE 11"
-  ],
   "optionalDependencies": {
     "gh-pages": "^3.2.3",
     "lighthouse": "^8.6.0"
+  },
+  "resolutions": {
+    "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3",
+    "glob-parent": "^5.1.2"
   }
 }
diff --git a/scripts/.eslintrc.js b/scripts/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    // Browser conf
+    browser: false,
+    node: true,
+  }
+};
diff --git a/scripts/_dotenv.js b/scripts/_dotenv.js