Vite

.eslintrc.js

@@ -29,7 +29,6 @@ module.exports = {
         'eslint:recommended',
         'plugin:react/recommended',
         'plugin:@typescript-eslint/recommended',
-        'plugin:jest-dom/recommended',
     ],
     rules: {
         eqeqeq: 'error',

.github/workflows/build.yaml → .github/workflows/ui.yaml

@@ -1,4 +1,4 @@
-name: Build
+name: UI
 
 on:
   push:
@@ -10,7 +10,7 @@ on:
 
 jobs:
   ui:
-    name: UI
+    name: Build & Test
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -30,4 +30,7 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Build
-        run: yarn build:production
+        run: yarn build
+
+      - name: Tests
+        run: yarn test

.gitignore

@@ -6,6 +6,7 @@
 /storage/*.key
 /storage/clockwork/*
 /vendor
+/coverage
 *.DS_Store*
 .env
 .env.backup

app/Http/ViewComposers/AssetComposer.php

@@ -3,23 +3,14 @@
 namespace App\Http\ViewComposers;
 
 use Illuminate\View\View;
-use App\Services\Helpers\AssetHashService;
 
 class AssetComposer
 {
-    /**
-     * AssetComposer constructor.
-     */
-    public function __construct(private AssetHashService $assetHashService)
-    {
-    }
-
     /**
      * Provide access to the asset service in the views.
      */
     public function compose(View $view): void
     {
-        $view->with('asset', $this->assetHashService);
         $view->with('siteConfiguration', [
             'name' => config('app.name', 'Panel'),
             'locale' => config('app.locale') ?? 'en',

package.json

@@ -3,14 +3,22 @@
     "engines": {
         "node": ">=18"
     },
+    "scripts": {
+        "build": "vite build",
+        "clean": "rimraf public/build",
+        "coverage": "vitest run --coverage",
+        "dev": "vite",
+        "lint": "eslint ./resources/scripts/**/*.{ts,tsx} --ext .ts,.tsx",
+        "test": "vitest run",
+        "test:ui": "vitest --ui"
+    },
     "dependencies": {
         "@floating-ui/react-dom-interactions": "^0.6.6",
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.11",
         "@headlessui/react": "^1.6.4",
         "@heroicons/react": "^1.0.6",
-        "@hot-loader/react-dom": "^16.14.0",
         "@preact/signals-react": "^1.2.1",
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
@@ -33,9 +41,8 @@
         "qrcode.react": "^1.0.1",
         "react": "^16.14.0",
         "react-chartjs-2": "^4.2.0",
-        "react-dom": "npm:@hot-loader/react-dom",
+        "react-dom": "^16.14.0",
         "react-fast-compare": "^3.2.0",
-        "react-hot-loader": "^4.12.21",
         "react-i18next": "^11.2.1",
         "react-router-dom": "^5.1.2",
         "react-transition-group": "^4.4.1",
@@ -69,14 +76,12 @@
         "@babel/preset-typescript": "^7.12.1",
         "@babel/runtime": "^7.12.1",
         "@testing-library/dom": "^8.14.0",
-        "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "12.1.5",
         "@testing-library/user-event": "^14.2.1",
         "@types/codemirror": "^0.0.98",
         "@types/debounce": "^1.2.0",
         "@types/events": "^3.0.0",
-        "@types/jest": "^28.1.3",
-        "@types/node": "^14.11.10",
+        "@types/node": "^20.14.11",
         "@types/qrcode.react": "^1.0.1",
         "@types/react": "^16.14.0",
         "@types/react-copy-to-clipboard": "^4.3.0",
@@ -86,11 +91,15 @@
         "@types/react-router-dom": "^5.1.3",
         "@types/react-transition-group": "^4.4.0",
         "@types/styled-components": "^5.1.7",
+        "@types/tailwindcss": "^3.1.0",
         "@types/uuid": "^3.4.5",
         "@types/webpack-env": "^1.15.2",
         "@types/yup": "^0.29.3",
         "@typescript-eslint/eslint-plugin": "^5.29.0",
         "@typescript-eslint/parser": "^5.29.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "@vitest/coverage-v8": "^2.0.3",
+        "@vitest/ui": "^2.0.3",
         "autoprefixer": "^10.4.7",
         "babel-jest": "^28.1.1",
         "babel-loader": "^8.2.5",
@@ -99,45 +108,33 @@
         "css-loader": "^5.2.7",
         "eslint": "^8.18.0",
         "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-jest-dom": "^4.0.2",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "fork-ts-checker-webpack-plugin": "^6.2.10",
-        "identity-obj-proxy": "^3.0.0",
-        "jest": "^28.1.1",
+        "happy-dom": "^14.12.3",
+        "laravel-vite-plugin": "0.8",
+        "pathe": "^1.1.2",
         "postcss": "^8.4.35",
         "postcss-import": "^14.1.0",
         "postcss-loader": "^4.0.0",
         "postcss-nesting": "^10.1.8",
         "postcss-preset-env": "^7.7.1",
         "prettier": "^2.7.1",
         "redux-devtools-extension": "^2.13.8",
+        "rimraf": "3.0.2",
         "source-map-loader": "^1.1.3",
         "style-loader": "^2.0.0",
         "svg-url-loader": "^7.1.1",
         "terser-webpack-plugin": "^4.2.3",
         "ts-essentials": "^9.1.2",
-        "ts-jest": "^28.0.5",
         "twin.macro": "^2.8.2",
         "typescript": "^4.7.3",
-        "webpack": "^4.47.0",
-        "webpack-assets-manifest": "^3.1.1",
-        "webpack-bundle-analyzer": "^3.8.0",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "^3.11.0",
+        "vite": "^4.5.3",
+        "vitest": "^0.34.6",
         "yarn-deduplicate": "^1.1.1"
     },
-    "scripts": {
-        "clean": "cd public/assets && find . \\( -name \"*.js\" -o -name \"*.map\" \\) -type f -delete",
-        "test": "jest",
-        "lint": "eslint ./resources/scripts/**/*.{ts,tsx} --ext .ts,.tsx",
-        "watch": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
-        "build": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --progress",
-        "build:production": "yarn run clean && cross-env NODE_ENV=production ./node_modules/.bin/webpack --mode production",
-        "serve": "yarn run clean && cross-env WEBPACK_PUBLIC_PATH=/webpack@hmr/ NODE_ENV=development webpack-dev-server --host 0.0.0.0 --port 8080 --public https://panel.test --hot"
-    },
     "browserslist": [
         "> 0.5%",
         "last 2 versions",

resources/scripts/TransitionRouter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Route } from 'react-router';
 import { SwitchTransition } from 'react-transition-group';
 import Fade from '@/components/elements/Fade';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import tw from 'twin.macro';
 
 const StyledSwitchTransition = styled(SwitchTransition)`

resources/scripts/api/definitions/helpers.ts

@@ -5,7 +5,7 @@ import {
     getPaginationSet,
     PaginatedResult,
 } from '@/api/http';
-import { Model } from '@definitions/index';
+import type { Model } from '@definitions/index';
 
 type TransformerFunc<T> = (callback: FractalResponseData) => T;
 

resources/scripts/api/definitions/user/models.d.ts

@@ -1,4 +1,4 @@
-import { Model, UUID } from '@/api/definitions';
+import type { Model, UUID } from '@/api/definitions';
 import { SubuserPermission } from '@/state/server/subusers';
 
 interface User extends Model {

resources/scripts/api/definitions/user/transformers.ts

@@ -1,4 +1,4 @@
-import * as Models from '@definitions/user/models';
+import type * as Models from '@definitions/user/models';
 import { FractalResponseData } from '@/api/http';
 import { transform } from '@definitions/helpers';