switch laravel mix to vite (#423)

* switching laravel mix to vite

* fix build target

* trying to fix jest issues

* refactors for jest

* removing ts-expect-errors

* fixing issues

* fixing tests

* update workflow

* fix build script

* try to improve efficiency of build step

.eslintrc.js

@@ -10,11 +10,6 @@ module.exports = {
     'plugin:import/errors',
     'plugin:import/typescript',
   ],
-  globals: {
-    Lang: 'readonly',
-    TSMLReactConfig: 'readonly',
-    Translation: 'readonly',
-  },
   'overrides': [
     {
       'env': {

.github/workflows/build.yml

@@ -11,16 +11,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '16'
-          cache: 'npm'
-      - run: npm install
+          node-version: '18'
+      - run: npm ci
       - run: npm run test-coverage
-      - run: npx mix --production
+      - run: npm run build
 
       - name: Coveralls
         uses: coverallsapp/github-action@master

.gitignore

@@ -1,4 +1,18 @@
-/node_modules
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
 mix-manifest.json
 npm-debug.log
 coverage
@@ -7,4 +21,9 @@ playwright-report/
 public/custom
 .vscode
 .DS_Store
-.idea
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

public/tests/aasanjose.html → example.html

@@ -53,6 +53,6 @@
           : {},
       };
     </script>
-    <script src="/app.js" async></script>
+    <script src="/src/app.tsx" type="module" async></script>
   </body>
 </html>

jest.config.ts

@@ -0,0 +1,19 @@
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jest-environment-jsdom',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    // process `*.tsx` files with `ts-jest`
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.(j|t)s*',
+    '!<rootDir>/src/(types|i18n)/*',
+    '!<rootDir>/**/__snapshots__/*',
+    '!<rootDir>/src/**/index.ts',
+  ],
+  moduleNameMapper: {
+    '\\.(css)$': '<rootDir>/test/__mocks__/styleMock.js',
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
+  },
+};

jest.setup.ts

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+
+global.React = React;
+
+const savedLocation = window.location;
+const savedHistory = window.history;
+
+beforeEach(() => {
+  Object.defineProperties(window, {
+    ga: {
+      value: jest.fn(),
+      writable: true,
+    },
+    gtag: {
+      value: jest.fn(),
+      writable: true,
+    },
+    history: {
+      value: {
+        back: jest.fn(),
+        forward: jest.fn(),
+        go: jest.fn(),
+        pushState: jest.fn(),
+        replaceState: jest.fn(),
+      },
+      writable: true,
+    },
+    location: {
+      value: new URL('https://test.com'),
+      writable: true,
+    },
+  });
+});
+
+afterEach(() => {
+  window.location = savedLocation;
+  window.history = savedHistory;
+});

netlify.toml

@@ -1,4 +1,4 @@
 [build]
-  publish = "public/"
-  command = "npx mix --production"
+  publish = "dist/"
+  command = "npm run build"