Merge pull request #476 from akunzai/vite

Migrate to Vite
akunzai · Jul 4, 2023 · 447c6d0 · 447c6d0
2 parents 72ab80b + 94952ba
commit 447c6d0
Show file tree

Hide file tree

Showing 29 changed files with 1,557 additions and 6,017 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,8 +3,8 @@
 # dependencies
 /node_modules
 
-# production
-public/build
+# dist
+/dist
 
 # IDE - VSCode
 .vscode/*

diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ yarn start
 # Running unit tests
 yarn test
 
-# build the project in production mode. The build artifacts will be stored in the `public/build/` directory
+# build the project in production mode. The build artifacts will be stored in the `dist/` directory
 yarn build
 
 # extracts i18n messages from source code
@@ -39,8 +39,7 @@ yarn i18n:extract src/locales/zh-Hant.json
 ## Reference
 
 - [Svelte API reference](https://svelte.dev/docs)
-- [Svelte Webpack Template](https://github.com/sveltejs/template-webpack)
-- [Svelte Preprocess](https://github.com/sveltejs/svelte-preprocess)
+- [Svelte plugin for Vite](https://github.com/sveltejs/vite-plugin-svelte)
 - [Svelte Routing](https://github.com/EmilTholin/svelte-routing)
 - [Svelte i18n Library](https://github.com/kaisermann/svelte-i18n)
 - [Svelte Forms Library](https://github.com/tjinauyeung/svelte-forms-lib)

diff --git a/babel.config.json b/babel.config.json
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Svelte Boilerplate</title>
+    <link rel="icon" type="image/png" href="/favicon.png" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/jest.config.js b/jest.config.js
diff --git a/jest.global-mocks.ts b/jest.global-mocks.ts
diff --git a/package.json b/package.json
@@ -1,57 +1,47 @@
 {
   "name": "svelte-boilerplate",
   "version": "0.0.0",
+  "type": "module",
   "private": true,
   "packageManager": "yarn@3.6.1",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack",
-    "start": "cross-env MOCK=true webpack serve --static-directory public",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "lint": "svelte-check",
     "i18n:extract": "svelte-i18n extract 'src/**/*.svelte'"
   },
   "dependencies": {
     "axios": "^1.4.0",
     "rxjs": "^7.8.1",
-    "svelte-routing": "^1.10.0"
+    "svelte-routing": "^1.11.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/svelte": "^3.2.2",
+    "@testing-library/svelte": "^4.0.3",
     "@testing-library/user-event": "^14.4.3",
-    "@tsconfig/svelte": "^4.0.1",
+    "@tsconfig/svelte": "^5.0.0",
     "@types/jest": "^29.5.2",
-    "@types/node": "^20.3.2",
-    "babel-jest": "^29.5.0",
+    "@types/node": "^20.3.3",
+    "@vitest/coverage-v8": "^0.32.4",
     "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.10.5",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.8.1",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "mini-css-extract-plugin": "^2.7.6",
+    "jsdom": "^22.1.0",
     "msw": "^1.2.2",
     "sass": "^1.63.6",
-    "sass-loader": "^13.3.2",
-    "svelte": "^3.59.2",
+    "svelte": "^4.0.3",
     "svelte-check": "^3.4.4",
     "svelte-forms-lib": "^2.0.1",
+    "svelte-htm": "^1.2.0",
     "svelte-i18n": "^3.6.0",
-    "svelte-jester": "^2.3.2",
-    "svelte-jsx": "^2.0.0",
-    "svelte-loader": "^3.1.9",
-    "svelte-preprocess": "^5.0.4",
-    "ts-loader": "^9.4.3",
     "tslib": "^2.6.0",
-    "typescript": "~5.1.3",
-    "webpack": "^5.88.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "typescript": "~5.1.6",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.4"
   },
   "resolutions": {
     "semver": "^7.5.3"

diff --git a/public/index.html b/public/index.html
diff --git a/src/actions/clickOutside.ts b/src/actions/clickOutside.ts
@@ -3,7 +3,7 @@ import type { Action } from './types';
 
 export function clickOutside(
   node: HTMLElement,
-  params: { enabled: boolean; cb: Function }
+  params: { enabled: boolean; cb: () => void }
 ): ReturnType<Action> {
   const { enabled: initialEnabled, cb } = params;
 

diff --git a/src/actions/types.ts b/src/actions/types.ts
@@ -1,4 +1,4 @@
-export type Action = (node: HTMLElement, parameters: any) => {
-	update?: (parameters: any) => void,
+export type Action = (node: HTMLElement, parameters: unknown) => {
+	update?: (parameters: unknown) => void,
 	destroy?: () => void
 }