wassname/optuna-dashboard
1
0
Fork 0
mirror of https://github.com/wassname/optuna-dashboard.git synced 2026-09-11 12:30:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to Vite on standalone app

Browse Source
This commit is contained in:
c-bata
2024-03-08 09:49:08 +09:00
parent 120b7329a1
commit 6f0f783dab
12 changed files with 1281 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/e2e-standalone-tests.yml
+4 -1
View File
@@ -42,7 +42,10 @@ jobs:
python -m pip install --progress-bar off pytest-playwright==0.4.3 # next version is flaky
- name: Build standalone_app
run: make MODE="prd" standalone_app/public/bundle.js
working-directory: standalone_app
run: |
npm install
npx vite build --outDir dist
- name: Install the required browsers
run: playwright install
.github/workflows/gh-pages.yml
+2 -9
View File
@@ -31,15 +31,8 @@ jobs:
with:
node-version: '18'
- name: Build standalone_app
env:
PUBLIC_PATH: /optuna-dashboard/public/
run: make MODE="prd" standalone_app/public/bundle.js
- name: Create publish directory
run: |
mkdir gh-publish
cp -r standalone_app/public gh-publish/public
cp standalone_app/favicon.ico gh-publish/favicon.ico
cp standalone_app/github-pages.html gh-publish/index.html
working-directory: standalone_app
run: npx vite build --base=/optuna-dashboard/public/ --outDir ../gh-pages
- name: Upload artifact
uses: actions/upload-pages-artifact@v2
with:
.gitignore
-1
View File
@@ -10,7 +10,6 @@ optuna_dashboard/public/
# JS
node_modules/
standalone_app/public/
# VSCode
vscode/assets/
Makefile
+7 -11
View File
@@ -4,27 +4,23 @@ PYTHON ?= python3
MODE ?= dev
RST_FILES := $(shell find docs -name '*.rst')
PYTHON_FILES := $(shell find optuna_dashboard/ -name '*.py')
DASHBOARD_TS_IN := $(shell find ./optuna_dashboard -name '*.ts' -o -name '*.tsx')
DASHBOARD_TS_SRC := $(shell find ./optuna_dashboard -name '*.ts' -o -name '*.tsx')
DASHBOARD_TS_OUT = optuna_dashboard/public/bundle.js optuna_dashboard/public/favicon.ico
RUSTLIB_OUT = rustlib/pkg/optuna_wasm.js rustlib/pkg/optuna_wasm_bg.wasm rustlib/pkg/package.json
STANDALONE_OUT = standalone_app/public/bundle.js vscode/assets/bundle.js
STANDALONE_SRC := $(shell find ./standalone_app/src -name '*.ts' -o -name '*.tsx')
$(RUSTLIB_OUT): rustlib/src/*.rs rustlib/Cargo.toml
cd rustlib && wasm-pack build --target web
$(STANDALONE_OUT): $(RUSTLIB_OUT)
cd standalone_app && npm install && npm run build:$(MODE)
vscode/assets/bundle.js: $(RUSTLIB_OUT) $(STANDALONE_SRC)
cd standalone_app && npm install && npm run build:vscode
$(DASHBOARD_TS_OUT): $(DASHBOARD_TS_IN)
$(DASHBOARD_TS_OUT): $(DASHBOARD_TS_SRC)
npm install && npm run build:$(MODE)
.PHONY: watch-standalone-app
watch-standalone-app: standalone_app/public/bundle.js
cd standalone_app && npm run watch
.PHONY: serve-browser-app
serve-browser-app: standalone_app/public/bundle.js
$(PYTHON) -m http.server 9000 --directory ./standalone_app/
serve-browser-app: $(RUSTLIB_OUT)
cd standalone_app && npm run watch
.PHONY: vscode-extension
vscode-extension: vscode/assets/bundle.js
e2e_tests/test_server.py
+1 -1
View File
@@ -43,7 +43,7 @@ def make_test_server(
def make_standalone_server(request: pytest.FixtureRequest) -> str:
addr = "127.0.0.1"
port = get_free_port()
directory = "./standalone_app/"
directory = "./standalone_app/dist/"
Handler = http.server.SimpleHTTPRequestHandler
httpd = socketserver.TCPServer(
standalone_app/github-pages.html
-19
View File
@@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Optuna Dashboard (Wasm ver.)</title>
<script defer type="module" src="/optuna-dashboard/public/bundle.js"></script>
<link rel="icon" href="/optuna-dashboard/favicon.ico" />
<!-- ogp -->
<meta property="og:title" content="Optuna Dashboard (Wasm ver.)" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://optuna.github.io/optuna-dashboard/" />
<meta property="og:image" content="/img/ogp_image.png" />
<meta property="og:description" content="Web Dashboard for Optuna, Python library for hyperparameter optimization" />
</head>
<body>
<div id="root"></div>
</body>
</html>
standalone_app/index.html
+7 -2
View File
@@ -3,8 +3,13 @@
<head>
<meta charset="utf-8" />
<title>Optuna Dashboard (Wasm ver.)</title>
<script defer type="module" src="/public/bundle.js"></script>
<link rel="icon" href="/favicon.ico" />
<script defer type="module" src="/src/browser_app_entry.tsx"></script>
<link rel="icon" href="/public/favicon.ico" />
<meta property="og:title" content="Optuna Dashboard (Wasm ver.)" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://optuna.github.io/optuna-dashboard/" />
<meta property="og:description" content="Web Dashboard for Optuna, Python library for hyperparameter optimization" />
</head>
<body>
<div id="root"></div>
standalone_app/package-lock.json
Generated
+1198 -342
View File
File diff suppressed because it is too large Load Diff
standalone_app/package.json
+4 -6
View File
@@ -4,20 +4,18 @@
"version": "0.0.0",
"description": "",
"scripts": {
"watch": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack --watch",
"serve": "python3 -m http.server 9000 --directory .",
"build:dev": "NODE_ENV=development TYPESCRIPT_LOADER=esbuild-loader webpack",
"build:prd": "NODE_ENV=production webpack"
"watch": "vite",
"build:vscode": "webpack"
},
"devDependencies": {
"@types/plotly.js": "^2.29.2",
"@types/react": "^18.2.64",
"@types/react-dom": "^18.2.21",
"@types/react-router-dom": "^5.3.3",
"@vitejs/plugin-react": "^4.2.1",
"compression-webpack-plugin": "^11.1.0",
"esbuild-loader": "^4.0.3",
"ts-loader": "^9.5.1",
"typescript": "^5.4.2",
"vite": "^5.1.5",
"webpack": "^5.90.3",
"webpack-cli": "^5.1.4"
},
standalone_app/favicon.ico → standalone_app/public/favicon.ico
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

standalone_app/vite.config.js
+18
View File
@@ -0,0 +1,18 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
define: {
'IS_VSCODE': JSON.stringify(false),
},
optimizeDeps: {
exclude: ['@sqlite.org/sqlite-wasm'],
},
server: {
fs: {
// Allow serving wasm files in node_modules
allow: ['..'],
},
},
});
standalone_app/webpack.config.js
+40 -93
View File
@@ -1,101 +1,48 @@
const webpack = require('webpack');
const path = require('path');
const CompressionPlugin = require("compression-webpack-plugin");
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
const isDev = mode === 'development';
const PUBLIC_PATH = process.env.PUBLIC_PATH ?? '/public/';
if (!PUBLIC_PATH.endsWith('/')) {
PUBLIC_PATH += '/';
}
const typeScriptLoader = process.env.TYPESCRIPT_LOADER === "esbuild-loader" ? {
test: /\.tsx?$/,
exclude: [/node_modules/],
loader: 'esbuild-loader',
options: {
loader: 'tsx',
tsconfigRaw: require('./tsconfig.json')
}
} : {
test: /\.tsx?$/,
exclude: [/node_modules/],
loader: 'ts-loader',
options: {
configFile: __dirname + '/tsconfig.json',
transpileOnly: isDev,
happyPackMode: true
}
}
var config = [
{
mode,
experiments: {
syncWebAssembly: true,
asyncWebAssembly: true,
},
entry: [__dirname + '/src/browser_app_entry.tsx'],
output: {
path: __dirname + '/public/',
filename: 'bundle.js',
publicPath: PUBLIC_PATH
},
module: {
rules: [{ oneOf: [typeScriptLoader] }]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
plugins: [
new webpack.DefinePlugin({'IS_VSCODE': JSON.stringify(false)})
]
module.exports = {
mode: "production",
devtool: 'source-map',
experiments: {
syncWebAssembly: true,
asyncWebAssembly: true,
},
{
mode,
experiments: {
syncWebAssembly: true,
asyncWebAssembly: true,
},
entry: [__dirname + '/src/vscode_entry.tsx'],
output: {
path: path.resolve(__dirname, '../vscode/assets/'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{ oneOf: [typeScriptLoader] },
{
test: /\.wasm$/,
type: "asset/inline",
},
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
plugins: [
new webpack.DefinePlugin({'IS_VSCODE': JSON.stringify(true)})
]
},
];
if (isDev) {
config[0].devtool = 'source-map';
config[0].cache = {
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename],
}
}
console.log('= = = = = = = = = = = = = = = = = = =');
console.log('DEVELOPMENT BUILD');
console.log(process.env.TYPESCRIPT_LOADER === 'esbuild-loader' ? 'esbuild-loader' : 'ts-loader');
console.log('= = = = = = = = = = = = = = = = = = =');
} else {
const CompressionPlugin = require("compression-webpack-plugin");
config[0].plugins.push(new CompressionPlugin())
config[1].plugins.push(new CompressionPlugin())
}
module.exports = config;
},
entry: [__dirname + '/src/vscode_entry.tsx'],
output: {
path: path.resolve(__dirname, '../vscode/assets/'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{ oneOf: [{
test: /\.tsx?$/,
exclude: [/node_modules/],
loader: 'esbuild-loader',
options: {
loader: 'tsx',
tsconfigRaw: require('./tsconfig.json')
}
}] },
{
test: /\.wasm$/,
type: "asset/inline",
},
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
plugins: [
new webpack.DefinePlugin({ 'IS_VSCODE': JSON.stringify(true) }),
new CompressionPlugin()
]
};