@samitouri / QOSami-HFS-2 / commits / ae46c210

from CRA to Vite

Massimo Melina committed Aug 10, 2022 at 17:51 UTC ae46c21079591dc5f2ec759a12cf2aca53baf2bf
19 files changed +88 -90
admin/.babelrc.js deleted
-8
@@ -1,8 +0,0 @@
1 -const plugins = [
2 - [
3 - 'babel-plugin-direct-import',
4 - { modules: ['@mui/material', '@mui/icons-material'] },
5 - ],
6 -];
7 -
8 -module.exports = { plugins };
admin/.env deleted
-2
@@ -1,2 +0,0 @@
1 -PORT=3006
2 -GENERATE_SOURCEMAP=false
admin/config-overrides.js deleted
-4
@@ -1,4 +0,0 @@
1 -/* eslint-disable react-hooks/rules-of-hooks */
2 -const { useBabelRc, override } = require('customize-cra');
3 -
4 -module.exports = override(useBabelRc());
admin/index.html renamed
+4 -4
@@ -1,15 +1,15 @@
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 - <meta charset="utf-8" />
5 - <meta name="viewport" content="width=device-width, initial-scale=1" />
6 - <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
4 + <meta charset="UTF-8" />
5 + <link rel="icon" type="image/svg+xml" href="/logo.svg" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <script async src='https://unpkg.com/node-forge@1.3.1/dist/forge.min.js'></script>
8 <script>SESSION = _HFS_SESSION_</script>
9 <title>HFS Admin</title>
10 </head>
11 <body>
12 - <noscript>You need to enable JavaScript to run this app.</noscript>
12 <div id="root"></div>
13 + <script type="module" src="/src/index.ts"></script>
14 </body>
15 </html>
admin/package.json
+7 -9
@@ -3,11 +3,10 @@
3 "private": true,
4 "proxy": "http://localhost",
5 "scripts": {
6 - "start": "react-app-rewired start",
7 - "build": "cross-env GENERATE_SOURCEMAP=false BUILD_PATH='../dist/admin' react-app-rewired build",
8 - "test": "react-app-rewired test",
9 - "test-dep": "npm audit --production",
10 - "eject": "react-scripts eject"
6 + "start": "vite",
7 + "build": "tsc && vite build",
8 + "preview": "vite preview",
9 + "test-dep": "npm audit --production"
10 },
11 "dependencies": {
12 "@emotion/react": "^11.10.0",
@@ -25,6 +24,7 @@
24 "react-window": "^1.8.6",
25 "tssrp6a": "^3.0.0",
26 "valtio": "^1.2.9",
27 + "immer": "^9.0.15",
28 "web-vitals": "^2.1.4"
29 },
30 "devDependencies": {
@@ -33,10 +33,8 @@
33 "@types/react-dom": "^18.0.6",
34 "@types/react-window": "^1.8.5",
35 "@types/react-virtualized-auto-sizer": "^1.0.1",
36 - "react-app-rewired": "^2.2.1",
37 - "babel-plugin-direct-import": "^1.0.0",
38 - "customize-cra": "^1.0.0",
39 - "react-scripts": "^5.0.1"
36 + "vite": "^3.0.0",
37 + "vite-plugin-babel-import": "github:rejetto/vite-plugin-babel-import"
38 },
39 "eslintConfig": {
40 "extends": [
admin/public/manifest.json deleted
-15
@@ -1,15 +0,0 @@
1 -{
2 - "short_name": "React App",
3 - "name": "Create React App Sample",
4 - "icons": [
5 - {
6 - "src": "favicon.ico",
7 - "sizes": "64x64 32x32 24x24 16x16",
8 - "type": "image/x-icon"
9 - }
10 - ],
11 - "start_url": ".",
12 - "display": "standalone",
13 - "theme_color": "#000000",
14 - "background_color": "#ffffff"
15 -}
admin/public/robots.txt deleted
-3
@@ -1,3 +0,0 @@
1 -# https://www.robotstxt.org/robotstxt.html
2 -User-agent: *
3 -Disallow:
admin/vite.config.ts new
+32
@@ -0,0 +1,32 @@
1 +import { defineConfig } from 'vite'
2 +import vitePluginImport from 'vite-plugin-babel-import';
3 +
4 +// https://vitejs.dev/config/
5 +export default defineConfig({
6 + build: {
7 + outDir: '../dist/admin',
8 + emptyOutDir: true,
9 + target: "es2015",
10 + },
11 + plugins: [
12 + vitePluginImport([
13 + { // this is (currently) speeding up build process, by bringing "modules transformed" from 11k+ down to 1.5k+
14 + libraryName: '@mui/icons-material',
15 + libraryDirectory: '',
16 + libraryChangeCase: "camelCase",
17 + ignoreStyles: [],
18 + },
19 + ])
20 + ],
21 + server: {
22 + port: 3006,
23 + proxy: {
24 + '/~/': {
25 + target: 'http://localhost',
26 + proxyTimeout: 2000,
27 + changeOrigin: true,
28 + ws: true,
29 + }
30 + }
31 + }
32 +})
frontend/.env deleted
-2
@@ -1,2 +0,0 @@
1 -PORT=3005
2 -GENERATE_SOURCEMAP=false
frontend/index.html renamed
+1 -1
@@ -3,7 +3,6 @@
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
6 - <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
6 <link href="fontello.css" rel="stylesheet" />
7 <script>SESSION = _HFS_SESSION_</script>
8 <title>File Server</title>
@@ -11,6 +10,7 @@
10 <body>
11 <div hidden>_HFS_PLUGINS_</div>
12 <noscript>You need to enable JavaScript to run this app.</noscript>
13 + <script type="module" src="/src/index.ts"></script>
14 <div id="root"></div>
15 </body>
16 </html>
frontend/package.json
+7 -7
@@ -3,11 +3,10 @@
3 "private": true,
4 "proxy": "http://localhost",
5 "scripts": {
6 - "start": "react-scripts start",
7 - "build": "cross-env GENERATE_SOURCEMAP=false BUILD_PATH='../dist/frontend' react-scripts build",
8 - "test": "react-scripts test",
9 - "test-dep": "npm audit --production",
10 - "eject": "react-scripts eject"
6 + "start": "vite",
7 + "build": "tsc && vite build",
8 + "preview": "vite preview",
9 + "test-dep": "npm audit --production"
10 },
11 "dependencies": {
12 "@hfs/shared": "*",
@@ -18,6 +17,7 @@
17 "react-router-dom": "^6.1.1",
18 "tssrp6a": "^3.0.0",
19 "use-debounce": "^7.0.1",
20 + "usehooks-ts": "^2.6.0",
21 "valtio": "^1.2.7",
22 "web-vitals": "^2.1.4"
23 },
@@ -27,8 +27,8 @@
27 "@types/react": "^18.0.15",
28 "@types/react-dom": "^18.0.6",
29 "cross-env": "^7.0.3",
30 - "react-scripts": "^5.0.1",
31 - "sass": "^1.45.0"
30 + "sass": "^1.54.5",
31 + "vite": "^3.0.0"
32 },
33 "eslintConfig": {
34 "extends": [
frontend/public/manifest.json deleted
-15
@@ -1,15 +0,0 @@
1 -{
2 - "short_name": "HFS",
3 - "name": "HFS browser",
4 - "icons": [
5 - {
6 - "src": "favicon.ico",
7 - "sizes": "64x64 32x32 24x24 16x16",
8 - "type": "image/x-icon"
9 - }
10 - ],
11 - "start_url": ".",
12 - "display": "standalone",
13 - "theme_color": "#000000",
14 - "background_color": "#ffffff"
15 -}
frontend/public/robots.txt deleted
-3
@@ -1,3 +0,0 @@
1 -# https://www.robotstxt.org/robotstxt.html
2 -User-agent: *
3 -Disallow:
frontend/src/dialog.css
+2 -2
@@ -6,8 +6,8 @@
6 right: 0;
7 background: #888a;
8 display: flex;
9 - justify-Content: center;
10 - align-Items: center;
9 + justify-content: center;
10 + align-items: center;
11 z-index: 1000;
12 }
13 .dialog {
frontend/src/useTheme.ts
+4 -4
@@ -2,15 +2,15 @@
2
3 import { useSnapState } from './state'
4 import { useEffect } from 'react'
5 -import { useMediaQuery } from '@mui/material'
5 +import { useDarkMode } from 'usehooks-ts'
6
7 export default function useTheme() {
8 const { theme } = useSnapState()
9 - const systemDark = useMediaQuery('(prefers-color-scheme: dark)')
9 + const { isDarkMode } = useDarkMode()
10 useEffect(()=>{
11 const e = document.body
12 if (!e) return
13 - const name = theme || (systemDark ? 'dark' : 'light')
13 + const name = theme || (isDarkMode ? 'dark' : 'light')
14 const pre = 'theme-'
15 const ct = pre + name
16 const list = e.classList
@@ -19,5 +19,5 @@ export default function useTheme() {
19 list.remove(c)
20 if (name)
21 list.add(ct)
22 - }, [theme, systemDark])
22 + }, [theme, isDarkMode])
23 }
frontend/vite.config.ts new
+21
@@ -0,0 +1,21 @@
1 +import { defineConfig } from 'vite'
2 +
3 +// https://vitejs.dev/config/
4 +export default defineConfig({
5 + build: {
6 + outDir: '../dist/frontend',
7 + emptyOutDir: true,
8 + target: "es2015",
9 + },
10 + server: {
11 + port: 3005,
12 + proxy: {
13 + '/~/': {
14 + target: 'http://localhost',
15 + proxyTimeout: 2000,
16 + changeOrigin: true,
17 + ws: true,
18 + }
19 + }
20 + }
21 +})
mui-grid-form/package.json
-1
@@ -13,7 +13,6 @@
13 "devDependencies": {
14 "react": "*",
15 "react-dom": "*",
16 - "react-scripts": "*",
16 "typescript": "*"
17 }
18 }
server/src/serveGuiFiles.ts
+10 -9
@@ -2,12 +2,12 @@
2
3 import Koa from 'koa'
4 import fs from 'fs/promises'
5 -import { METHOD_NOT_ALLOWED, NO_CONTENT, PLUGINS_PUB_URI, UNAUTHORIZED } from './const'
5 +import { METHOD_NOT_ALLOWED, NO_CONTENT, PLUGINS_PUB_URI } from './const'
6 import { serveFile } from './serveFile'
7 import { mapPlugins } from './plugins'
8 import { refresh_session } from './api.auth'
9 import { ApiError } from './apiMiddleware'
10 -import path from 'path'
10 +import { join, extname } from 'path'
11 import { getOrSet } from './misc'
12
13 // in case of dev env we have our static files within the 'dist' folder'
@@ -25,10 +25,11 @@ function serveStatic(uri: string): Koa.Middleware {
25 if (ctx.method !== 'GET')
26 return ctx.status = METHOD_NOT_ALLOWED
27 const serveApp = shouldServeApp(ctx)
28 - const fullPath = path.join(__dirname, '..', DEV_STATIC, folder, serveApp ? '/index.html': ctx.path)
28 + const fullPath = join(__dirname, '..', DEV_STATIC, folder, serveApp ? '/index.html': ctx.path)
29 const content = await getOrSet(cache, ctx.path, async () => {
30 const data = await fs.readFile(fullPath).catch(() => null)
31 - return serveApp || !data ? data : adjustWebpackLinks(ctx.path, uri, data)
31 + return serveApp || !data ? data
32 + : adjustBundlerLinks(ctx.path, uri, data)
33 })
34 if (content === null)
35 return ctx.status = 404
@@ -45,10 +46,10 @@ function shouldServeApp(ctx: Koa.Context) {
46 return ctx.state.serveApp ||= ctx.path.endsWith('/')
47 }
48
48 -function adjustWebpackLinks(path: string, uri: string, data: string | Buffer) {
49 - return path.startsWith('/static/js') // webpack
50 - ? String(data).replace(/(")(static\/)/g, '$1' + uri.substring(1) + '$2')
51 - : data
49 +function adjustBundlerLinks(path: string, uri: string, data: string | Buffer) {
50 + const ext = extname(path)
51 + return ext && !ext.match(/\.(css|html|js|ts|scss)/) ? data
52 + : String(data).replace(/((?:import | from )['"])\//g, `$1${uri}`)
53 }
54
55 async function treatIndex(ctx: Koa.Context, body: string, filesUri: string) {
@@ -72,7 +73,7 @@ function serveProxied(port: string | undefined, uri: string) { // used for devel
73 shouldServeApp(ctx) ? '/' : ctx.path,
74 userResDecorator(res, data, ctx) {
75 return shouldServeApp(ctx) ? treatIndex(ctx, String(data), uri)
75 - : adjustWebpackLinks(ctx.path, uri, data)
76 + : adjustBundlerLinks(ctx.path, uri, data)
77 }
78 }) )
79 return function() { //@ts-ignore
shared/package.json
-1
@@ -12,7 +12,6 @@
12 "devDependencies": {
13 "react": "*",
14 "react-dom": "*",
15 - "react-scripts": "*",
15 "typescript": "*",
16 "sass": "*"
17 }