chore: switch to vite and vitest for examples and tests

Aeolun · Feb 14, 2024 · c0c99f5 · c0c99f5
1 parent a1571ab
commit c0c99f5
Show file tree

Hide file tree

Showing 20 changed files with 2,056 additions and 7,363 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -1,12 +1,31 @@
-name: Release
+name: Test & Release
 on:
   push:
-    branches:
-      - master
-      - next
+
 jobs:
+  test:
+    name: Unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+      - uses: pnpm/[email protected]
+        with:
+          version: latest
+      - name: Install dependencies
+        run: pnpm i
+      - name: Run unit tests
+        run: pnpm run test
   release:
     name: Release
+    needs: test
+    if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/next'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
diff --git a/.prettierrc b/.prettierrc
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Pranesh Ravi
+Copyright (c) 2023 Bart Riepe
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
+    <title>React Diff Viewer</title>
+    <meta name="author" content="Bart Riepe" />
+    <meta name="description" content="A simple and beautiful text diff viewer for React" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#11171C" />
+
+    <meta content="https://i.ibb.co/585KcMw/diff-viewer-v3.png" property="og:image"/>
+    <meta content="React Diff Viewer" property="og:site_name" />
+    <meta content="object" property="og:type" />
+    <meta content="React Diff Viewer" property="og:title" />
+    <meta content="https://github.com/aeolun/react-diff-viewer-continued" property="og:url" />
+    <meta content="A simple and beautiful text diff viewer for React" property="og:description" />
+</head>
+<body>
+<div id="app"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-json.min.js"></script>
+<script type="module" src="./src/index.tsx"></script>
+</body>
+</html>
diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -6,14 +6,14 @@ import logo from '../../logo.png';
 import cn from 'classnames';
 import {render} from "react-dom";
 
-const oldJs = require('./diff/javascript/old.rjs').default;
-const newJs = require('./diff/javascript/new.rjs').default;
+import oldJs from './diff/javascript/old.rjs?raw';
+import newJs from './diff/javascript/new.rjs?raw';
 
-const oldYaml = require('./diff/massive/old.yaml').default;
-const newYaml = require('./diff/massive/new.yaml').default;
+import oldYaml from './diff/massive/old.yaml?raw';
+import newYaml from './diff/massive/new.yaml?raw';
 
-const oldJson = require('./diff/json/old.json');
-const newJson = require('./diff/json/new.json');
+import oldJson from './diff/json/old.json';
+import newJson from './diff/json/new.json';
 
 interface ExampleState {
   splitView?: boolean;
@@ -75,11 +75,11 @@ class Example extends Component<{}, ExampleState> {
   };
 
   public render(): JSX.Element {
-    let oldValue = '', newValue = '';
-    if (this.state.dataType == 'json') {
+    let oldValue: string | object = ''
+    let newValue: string | object = '';
+    if (this.state.dataType === 'json') {
       oldValue = oldJson
       newValue = newJson
-
     } else if (this.state.dataType === 'javascript') {
       oldValue = oldJs
       newValue = newJs
@@ -107,6 +107,9 @@ class Example extends Component<{}, ExampleState> {
             Featuring split view, inline view, word diff, line highlight and
             more.
           </p>
+          <p>
+            This documentation is for the `next` release branch, e.g. v4.x
+          </p>
           <div className="cta">
             <a href="https://github.com/aeolun/react-diff-viewer-continued#install">
               <button type="button" className="btn btn-primary btn-lg">

diff --git a/examples/src/style.scss b/examples/src/style.scss
@@ -169,6 +169,15 @@ body.light {
   color: #eee;
 }
 
+.select {
+  select {
+    border-radius: 50px;
+    padding: 4px 12px;
+    border: 2px solid #125dec;
+    background: white;
+  }
+}
+
 .react-diff-viewer-example {
   a {
     color: #125dec;

diff --git a/examples/vite.config.ts b/examples/vite.config.ts
@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+})
diff --git a/jest.config.js b/jest.config.js
diff --git a/package.json b/package.json
@@ -19,76 +19,46 @@
     "Pranesh Ravi<[email protected]>",
     "Bart Riepe <[email protected]>"
   ],
-  "main": "lib/src/index",
-  "typings": "lib/src/index",
+  "main": "lib/cjs/src/index",
+  "module": "lib/esm/src/index",
+  "typings": "lib/cjs/src/index",
   "scripts": {
-    "build": "tsc --outDir lib/",
-    "build:examples": "webpack --progress",
-    "build:watch": "tsc --outDir lib/ -w",
+    "build": "tsc --project tsconfig.json && tsc --project tsconfig.esm.json",
+    "build:examples": "vite build examples",
     "publish:examples": "NODE_ENV=production pnpm run build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
     "publish:examples:local": "NODE_ENV=production pnpm run build:examples && gh-pages -d examples/dist",
-    "start:examples": "webpack-dev-server --open --hot",
-    "test": "jest ./test/**",
-    "test:watch": "jest",
-    "lint": "eslint src/ test/",
-    "lint:fix": "eslint --fix src/ test/",
+    "start:examples": "vite examples",
+    "test": "vitest",
+    "lint": "biome lint src/ test/",
+    "lint:fix": "biome lint --apply-unsafe src/ test/",
     "prettier": "prettier --write ."
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
     "classnames": "^2.3.2",
-    "diff": "^5.1.0",
-    "memoize-one": "^6.0.0",
-    "prop-types": "^15.8.1"
+    "diff": "^5.2.0",
+    "memoize-one": "^6.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@biomejs/biome": "^1.5.3",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
     "@testing-library/react": "^13.4.0",
     "@types/diff": "^5.0.6",
-    "@types/expect": "^1.20.4",
-    "@types/memoize-one": "^4.1.1",
-    "@types/mocha": "^5.2.7",
-    "@types/node": "^12.20.55",
-    "@types/prop-types": "15.7.5",
-    "@types/react": "^16.14.49",
-    "@types/react-dom": "^16.9.20",
-    "@types/webpack": "^4.41.34",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.51.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "expect": "^28.1.3",
-    "file-loader": "^6.2.0",
+    "@types/memoize-one": "^5.1.2",
+    "@types/node": "^20.11.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "gh-pages": "^4.0.0",
-    "html-webpack-plugin": "^5.5.3",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "mini-css-extract-plugin": "^2.7.6",
-    "mocha": "^10.2.0",
-    "prettier": "^2.8.8",
-    "raw-loader": "^4.0.2",
+    "happy-dom": "^13.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.69.3",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.70.0",
     "semantic-release": "^19.0.5",
-    "spy": "^1.0.0",
-    "ts-loader": "^9.5.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.15.1"
+    "vite": "^5.1.1",
+    "vitest": "^1.2.2"
   },
   "peerDependencies": {
     "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",