mirror of
https://github.com/openswarm-ai/openswarm.git
synced 2026-09-11 12:17:45 +02:00
[hAIk]: migrate frontend from webpack to vite: replace webpack.config.js with vite.config.ts, move index.html to project root with module script entry, swap build/dev npm scripts to vite commands, remove webpack/swc/css-loader devDependencies in favor of vite and @vitejs/plugin-react-swc, and drop browserslist config
This commit is contained in:
haikdc
@@ -4,11 +4,12 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Open Swarm</title>
|
||||
<link rel="icon" href="./favicon.ico?v=2" sizes="16x16 32x32 48x48" />
|
||||
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
|
||||
<link rel="icon" href="/favicon.ico?v=2" sizes="16x16 32x32 48x48" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
+6
-19
@@ -3,9 +3,9 @@
|
||||
"version": "1.0.0",
|
||||
"description": "Open Swarm — Agent Orchestrator frontend built with React",
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production",
|
||||
"build:watch": "webpack --mode=development --watch",
|
||||
"dev": "webpack serve --mode=development",
|
||||
"build": "vite build",
|
||||
"build:watch": "vite build --watch",
|
||||
"dev": "vite",
|
||||
"clean": "rm -rf dist",
|
||||
"lint": "eslint src/",
|
||||
"lint:fix": "eslint src/ --fix",
|
||||
@@ -50,30 +50,17 @@
|
||||
"zustand": "^5.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@swc/core": "^1.15.26",
|
||||
"@tailwindcss/postcss": "^4.2.2",
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.0",
|
||||
"copy-webpack-plugin": "^14.0.0",
|
||||
"css-loader": "^6.8.0",
|
||||
"css-modules-types-loader": "^0.6.10",
|
||||
"@vitejs/plugin-react-swc": "^4.3.0",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"knip": "^6.1.0",
|
||||
"postcss": "^8.5.8",
|
||||
"postcss-loader": "^8.2.1",
|
||||
"sass": "^1.89.2",
|
||||
"sass-loader": "^16.0.5",
|
||||
"style-loader": "^3.3.0",
|
||||
"swc-loader": "^0.2.7",
|
||||
"typescript": "^5.0.0",
|
||||
"typescript-eslint": "^8.58.0",
|
||||
"webpack": "^5.88.0",
|
||||
"webpack-cli": "^5.1.0",
|
||||
"webpack-dev-server": "^4.15.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 2 Chrome versions"
|
||||
]
|
||||
"vite": "^8.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
import path from 'path'
|
||||
import portsConfig from '../ports.config.json'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
[path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-full.mjs')]:
|
||||
path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-web.mjs'),
|
||||
[path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/langs.mjs')]:
|
||||
path.resolve(__dirname, 'src/shims/shiki-langs-noop.mjs'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: portsConfig.frontend.dev,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: `http://localhost:${portsConfig.backend.dev}`,
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
base: './',
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
},
|
||||
})
|
||||
@@ -1,115 +0,0 @@
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
|
||||
const portsConfig = require('../ports.config.json');
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
const isDevelopment = argv.mode === 'development';
|
||||
|
||||
return {
|
||||
entry: './src/index.tsx',
|
||||
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'bundle.js',
|
||||
publicPath: isDevelopment ? '/' : './',
|
||||
clean: true
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx|ts|tsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'swc-loader',
|
||||
options: {
|
||||
jsc: {
|
||||
parser: {
|
||||
syntax: 'typescript',
|
||||
tsx: true,
|
||||
dynamicImport: true,
|
||||
},
|
||||
transform: {
|
||||
react: {
|
||||
runtime: 'automatic',
|
||||
},
|
||||
},
|
||||
target: 'es2017',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader', 'postcss-loader']
|
||||
},
|
||||
{
|
||||
test: /\.module\.(scss|sass)$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-modules-types-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: {
|
||||
localIdentName: '[name]__[local]___[hash:base64:5]'
|
||||
}
|
||||
}
|
||||
},
|
||||
'sass-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
resolve: {
|
||||
extensions: ['.tsx', '.ts', '.js'],
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
[path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-full.mjs')]:
|
||||
path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-web.mjs'),
|
||||
[path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/langs.mjs')]:
|
||||
path.resolve(__dirname, 'src/shims/shiki-langs-noop.mjs'),
|
||||
}
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: './public/index.html',
|
||||
filename: 'index.html',
|
||||
favicon: './public/favicon.ico'
|
||||
}),
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: 'public',
|
||||
to: '.',
|
||||
globOptions: { ignore: ['**/index.html', '**/favicon.ico'] },
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
|
||||
cache: isDevelopment ? { type: 'filesystem' } : false,
|
||||
|
||||
devtool: isDevelopment ? 'eval-cheap-module-source-map' : false,
|
||||
|
||||
devServer: {
|
||||
static: { directory: path.join(__dirname, 'public') },
|
||||
compress: true,
|
||||
port: portsConfig.frontend.dev,
|
||||
hot: true,
|
||||
open: false,
|
||||
historyApiFallback: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: `http://localhost:${portsConfig.backend.dev}`,
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user