build: switch from Rollup to Vite, upgrade Svelte
parent
41d0e55ca7
commit
48140c6daa
|
|
@ -1,6 +1,6 @@
|
|||
node_modules
|
||||
|
||||
/public/build/
|
||||
/dist
|
||||
/public/vendor/
|
||||
|
||||
.pnp.*
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
<title>UpEnd</title>
|
||||
|
||||
<link rel="icon" type="image/png" href="assets/upend.svg" />
|
||||
<link rel="stylesheet" href="build/bundle.css" />
|
||||
|
||||
<script type="module" src="build/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
|
@ -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 @@
|
|||
</Router>
|
||||
|
||||
<DropPasteHandler />
|
||||
|
||||
<style global lang="scss">
|
||||
@use "normalize.css/normalize.css";
|
||||
@use "styles/colors-app";
|
||||
@use "styles/fonts";
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#main,
|
||||
#header {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
#footer > * {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid var(--foreground);
|
||||
border-radius: 4px;
|
||||
|
||||
background: var(--background-lighter);
|
||||
color: var(--foreground);
|
||||
|
||||
padding: 0.25em 1em;
|
||||
line-height: 1;
|
||||
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { readable, Readable } from "svelte/store";
|
||||
import { readable, type Readable } from "svelte/store";
|
||||
|
||||
import type { UpEntry, UpListing } from "upend";
|
||||
import { query } from "../../lib/entity";
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
import type { IValue } from "upend/types";
|
||||
import Editable from "../utils/Editable.svelte";
|
||||
import { query } from "../../lib/entity";
|
||||
import { Readable, readable } from "svelte/store";
|
||||
import { type Readable, readable } from "svelte/store";
|
||||
import { defaultEntitySort, entityValueSort } from "../../util/sort";
|
||||
import { attributeLabels } from "../../util/labels";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// import { useSWR } from "sswr";
|
||||
import { derived, Readable } from "svelte/store";
|
||||
import { derived, type Readable } from "svelte/store";
|
||||
import { UpListing, UpObject } from "upend";
|
||||
import type { ListingResult } from "upend/types";
|
||||
import { useSWR } from "../util/fetch";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import url("../assets/fonts/inter.css");
|
||||
@import url("/assets/fonts/inter.css");
|
||||
|
||||
html {
|
||||
--default-font: "Inter", sans-serif;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
@use "normalize.css/normalize.css";
|
||||
@use "colors-app";
|
||||
@use "fonts";
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#main,
|
||||
#header {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
#footer > * {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid var(--foreground);
|
||||
border-radius: 4px;
|
||||
|
||||
background: var(--background-lighter);
|
||||
color: var(--foreground);
|
||||
|
||||
padding: 0.25em 1em;
|
||||
line-height: 1;
|
||||
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { readable, Readable } from "svelte/store";
|
||||
import { readable, type Readable } from "svelte/store";
|
||||
import type { VaultInfo } from "upend/types";
|
||||
import { fetchInfo } from "../lib/api";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { readable, Readable } from "svelte/store";
|
||||
import { readable, type Readable } from "svelte/store";
|
||||
import { fetchAllAttributes } from "../lib/api";
|
||||
|
||||
const DEFAULT_ATTRIBUTE_LABELS = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import debounce from "lodash/debounce";
|
||||
import { Readable, readable } from "svelte/store";
|
||||
import { type Readable, readable } from "svelte/store";
|
||||
import type { UpListing } from "upend";
|
||||
import Spinner from "../components/utils/Spinner.svelte";
|
||||
import UpEntryDisplay from "../components/display/UpEntry.svelte";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
import sveltePreprocess from 'svelte-preprocess'
|
||||
|
||||
export default {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: sveltePreprocess()
|
||||
}
|
||||
|
|
@ -1,8 +1,21 @@
|
|||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"include": ["src/**/*", "node_modules/upend/*"],
|
||||
"exclude": ["**/test.ts"],
|
||||
"compilerOptions": {
|
||||
"lib": ["es2019"]
|
||||
}
|
||||
}
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"resolveJsonModule": true,
|
||||
"baseUrl": ".",
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||
* Note that setting allowJs false does not prevent the use
|
||||
* of JS in `.svelte` files.
|
||||
*/
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node"
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { defineConfig } from "vite";
|
||||
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
||||
import { viteStaticCopy } from "vite-plugin-static-copy";
|
||||
import * as path from "path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
svelte(),
|
||||
viteStaticCopy({
|
||||
targets: [
|
||||
{
|
||||
src: path.join(__dirname, "node_modules/boxicons", "fonts"),
|
||||
dest: path.resolve(__dirname, "public/vendor/boxicons"),
|
||||
},
|
||||
{
|
||||
src: path.join(__dirname, "node_modules/boxicons", "css"),
|
||||
dest: path.resolve(__dirname, "public/vendor/boxicons"),
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:8093/",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
2611
webui/yarn.lock
2611
webui/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue