From 48140c6daa9616313d0b5d03c93db9c95c25f1c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= Date: Mon, 1 Aug 2022 21:08:34 +0200 Subject: [PATCH] build: switch from Rollup to Vite, upgrade Svelte --- webui/.gitignore | 2 +- webui/{public => }/index.html | 8 +- webui/package.json | 48 +- webui/rollup.config.js | 102 - webui/src/App.svelte | 67 +- webui/src/components/widgets/Gallery.svelte | 2 +- webui/src/components/widgets/Table.svelte | 2 +- webui/src/lib/entity.ts | 2 +- webui/src/styles/fonts.scss | 2 +- webui/src/styles/main.scss | 63 + webui/src/util/info.ts | 2 +- webui/src/util/labels.ts | 2 +- webui/src/views/Search.svelte | 2 +- webui/svelte.config.js | 7 + webui/tsconfig.json | 23 +- webui/tsconfig.node.json | 8 + webui/vite.config.ts | 30 + webui/yarn.lock | 2611 ++++--------------- 18 files changed, 663 insertions(+), 2320 deletions(-) rename webui/{public => }/index.html (66%) delete mode 100644 webui/rollup.config.js create mode 100644 webui/src/styles/main.scss create mode 100644 webui/svelte.config.js create mode 100644 webui/tsconfig.node.json create mode 100644 webui/vite.config.ts diff --git a/webui/.gitignore b/webui/.gitignore index 89f850b..47ab3a2 100644 --- a/webui/.gitignore +++ b/webui/.gitignore @@ -1,6 +1,6 @@ node_modules -/public/build/ +/dist /public/vendor/ .pnp.* diff --git a/webui/public/index.html b/webui/index.html similarity index 66% rename from webui/public/index.html rename to webui/index.html index 7892e4d..907342f 100644 --- a/webui/public/index.html +++ b/webui/index.html @@ -7,10 +7,10 @@ UpEnd - - - - + +
+ + diff --git a/webui/package.json b/webui/package.json index 60633f6..a6597bb 100644 --- a/webui/package.json +++ b/webui/package.json @@ -1,44 +1,26 @@ { - "name": "svelte-app", + "name": "upend-kestrel", "version": "1.0.0", "private": true, + "type": "module", "scripts": { - "build": "rollup -c", - "dev": "rollup -c -w", + "dev": "vite", + "build": "vite build", + "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.json", "lint": "eslint src", - "clean": "rm -frv public/vendor public/build" + "clean": "rm -frv dist public/vendor" }, "devDependencies": { - "@rollup/plugin-commonjs": "^17.0.0", - "@rollup/plugin-node-resolve": "^11.0.0", - "@rollup/plugin-replace": "^3.0.0", - "@rollup/plugin-typescript": "^8.3.0", - "@tsconfig/svelte": "^2.0.0", - "@types/history": "^4.7.9", - "@types/lodash": "^4.14.178", - "@types/lru-cache": "^5.1.1", - "@types/three": "^0.135.0", - "@types/wavesurfer.js": "^6.0.0", - "@typescript-eslint/eslint-plugin": "^5.10.1", - "@typescript-eslint/parser": "^5.10.1", - "@yarnpkg/fslib": "^2.6.0", - "@yarnpkg/libzip": "^2.2.2", - "eslint": "^8.7.0", - "eslint-plugin-svelte3": "^3.4.0", - "postcss": "^8.3.11", - "rollup": "^2.59.0", - "rollup-plugin-copy": "^3.4.0", - "rollup-plugin-css-only": "^3.1.0", - "rollup-plugin-dev": "^2.0.0", - "rollup-plugin-livereload": "^2.0.0", - "rollup-plugin-svelte": "^7.0.0", - "rollup-plugin-terser": "^7.0.0", - "svelte": "^3.0.0", - "svelte-check": "^2.0.0", - "svelte-preprocess": "^4.0.0", - "tslib": "^2.0.0", - "typescript": "^4.0.0" + "@sveltejs/vite-plugin-svelte": "^1.0.1", + "@tsconfig/svelte": "^3.0.0", + "svelte": "^3.49.0", + "svelte-check": "^2.8.0", + "svelte-preprocess": "^4.10.7", + "tslib": "^2.4.0", + "typescript": "^4.6.4", + "vite": "^3.0.0", + "vite-plugin-static-copy": "^0.7.0" }, "dependencies": { "@recogito/annotorious": "^2.7.1", diff --git a/webui/rollup.config.js b/webui/rollup.config.js deleted file mode 100644 index 9e41d78..0000000 --- a/webui/rollup.config.js +++ /dev/null @@ -1,102 +0,0 @@ -import replace from "@rollup/plugin-replace"; -import svelte from "rollup-plugin-svelte"; -import commonjs from "@rollup/plugin-commonjs"; -import path from "path"; -import copy from "rollup-plugin-copy"; -import resolve from "@rollup/plugin-node-resolve"; -import livereload from "rollup-plugin-livereload"; -import { terser } from "rollup-plugin-terser"; -import sveltePreprocess from "svelte-preprocess"; -import typescript from "@rollup/plugin-typescript"; -import css from "rollup-plugin-css-only"; -import dev from "rollup-plugin-dev"; - -const production = !process.env.ROLLUP_WATCH; - -export default { - input: "src/main.ts", - output: { - sourcemap: true, - format: "esm", - name: "app", - dir: "public/build", - }, - plugins: [ - // To fix `history` - replace({ - "process.env.NODE_ENV": JSON.stringify("production"), - }), - svelte({ - preprocess: sveltePreprocess({ - sourceMap: !production, - }), - compilerOptions: { - // enable run-time checks when not in production - dev: !production, - }, - exclude: [path.resolve(__dirname, "public/vendor")], - }), - // we'll extract any component CSS out into - // a separate file - better for performance - css({ output: "bundle.css" }), - - // If you have external dependencies installed from - // npm, you'll most likely need these plugins. In - // some cases you'll need additional configuration - - // consult the documentation for details: - // https://github.com/rollup/plugins/tree/master/packages/commonjs - resolve({ - browser: true, - dedupe: ["svelte"], - }), - commonjs(), - typescript({ - sourceMap: !production, - inlineSources: !production, - }), - - copy({ - copyOnce: true, - hook: "closeBundle", - verbose: true, - targets: [ - { - src: path.join( - path.dirname(require.resolve("boxicons/package.json")), - "fonts" - ), - dest: path.resolve(__dirname, "public/vendor/boxicons"), - }, - { - src: path.join( - path.dirname(require.resolve("boxicons/package.json")), - "css" - ), - dest: path.resolve(__dirname, "public/vendor/boxicons"), - }, - ], - }), - - !production && - dev({ - dirs: ["public"], - proxy: [ - { - from: "/api/", - to: "http://localhost:8093/api/", - }, - ], - }), - - // Watch the `public` directory and refresh the - // browser on changes when not in production - !production && livereload("public"), - - // If we're building for production (npm run build - // instead of npm run dev), minify - production && terser(), - ], - watch: { - clearScreen: false, - }, -}; diff --git a/webui/src/App.svelte b/webui/src/App.svelte index 8b40db2..944f760 100644 --- a/webui/src/App.svelte +++ b/webui/src/App.svelte @@ -9,6 +9,7 @@ import DropPasteHandler from "./components/DropPasteHandler.svelte"; import AddModal from "./components/AddModal.svelte"; import Store from "./views/Store.svelte"; + import "./styles/main.scss"; const history = createHistory(createHashSource()); @@ -43,69 +44,3 @@ - - diff --git a/webui/src/components/widgets/Gallery.svelte b/webui/src/components/widgets/Gallery.svelte index 804402a..f23bb38 100644 --- a/webui/src/components/widgets/Gallery.svelte +++ b/webui/src/components/widgets/Gallery.svelte @@ -1,5 +1,5 @@