From 623cb491f0e54775355f31fcbfa9e97dfa7ecbf3 Mon Sep 17 00:00:00 2001 From: exyi Date: Sat, 17 Oct 2020 19:42:33 +0000 Subject: [PATCH] Split out editor - reduce bundle size significantly fix #39 --- frontend/package.json | 1 + frontend/public/editor.html | 19 +++++++++++ frontend/rollup.config.js | 54 ++++++++++++++++++-------------- frontend/src/App.svelte | 30 ++++++------------ frontend/src/Editor-main.svelte | 27 ++++++++++++++++ frontend/src/Graph.svelte | 2 -- frontend/src/editor-main.ts | 8 +++++ frontend/src/main.ts | 3 +- frontend/src/typescripthack.d.ts | 1 + frontend/tsconfig.json | 3 +- frontend/yarn.lock | 10 +++++- 11 files changed, 108 insertions(+), 50 deletions(-) create mode 100644 frontend/public/editor.html create mode 100644 frontend/src/Editor-main.svelte create mode 100644 frontend/src/editor-main.ts create mode 100644 frontend/src/typescripthack.d.ts diff --git a/frontend/package.json b/frontend/package.json index 8325432..215b334 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,7 @@ "devDependencies": { "@rollup/plugin-commonjs": "^14.0.0", "@rollup/plugin-node-resolve": "^8.4.0", + "@rollup/plugin-replace": "^2.3.3", "@rollup/plugin-typescript": "^6.0.0", "@testing-library/svelte": "^3.0.0", "@tsconfig/svelte": "^1.0.0", diff --git a/frontend/public/editor.html b/frontend/public/editor.html new file mode 100644 index 0000000..e5509b3 --- /dev/null +++ b/frontend/public/editor.html @@ -0,0 +1,19 @@ + + + + + + + Editor úloh + + + + + + + + + +
+ + diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js index d7e8095..3c31de1 100644 --- a/frontend/rollup.config.js +++ b/frontend/rollup.config.js @@ -5,13 +5,13 @@ import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import sveltePreprocess from 'svelte-preprocess'; import typescript from '@rollup/plugin-typescript'; +import replace from '@rollup/plugin-replace' const production = !process.env.ROLLUP_WATCH; const halfProduction = production || !!process.env.HALF_PRODUCTION; function serve() { let server; - function toExit() { if (server) server.kill(0); } @@ -30,33 +30,19 @@ function serve() { }; } -export default { - input: 'src/main.ts', - output: { - sourcemap: true, - format: 'es', - name: 'app', - file: 'public/build/bundle.js' - }, - plugins: [ - // nodePolyfills(), - +function plugins(editor) { + return [ svelte({ // enable run-time checks when not in production dev: !halfProduction, // we'll extract any component CSS out into // a separate file - better for performance css: css => { - css.write('bundle.css'); + css.write(editor ? 'editor.css' : 'bundle.css'); }, preprocess: sveltePreprocess(), }), - // 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'] @@ -66,20 +52,42 @@ export default { sourceMap: !halfProduction, inlineSources: !halfProduction }), + replace({ + "allowEditor": false, + }), // In dev mode, call `npm run start` once // the bundle has been generated - !production && serve(), + !production && !editor && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production - !halfProduction && livereload('public'), + !halfProduction && !editor && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify - halfProduction && terser() - ], + // halfProduction && terser() + ] +} + +export default [{ + input: 'src/main.ts', + output: { + sourcemap: !halfProduction, + format: 'es', + file: 'public/build/bundle.js' + }, + plugins: plugins(false), watch: { clearScreen: false } -}; +}, +{ + input: 'src/editor-main.ts', + output: { + sourcemap: !halfProduction, + format: 'es', + file: 'public/build/editor.js' + }, + plugins: plugins(true) +}]; diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index b2541f4..d14a0ad 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -4,13 +4,9 @@ import type { TasksFile, TaskDescriptor } from "./tasks"; import TasksLoader from "./TasksLoader.svelte"; import TaskPanel from "./TaskPanel.svelte"; - import Editor from "./Editor.svelte"; - import Modal from "svelte-simple-modal"; const tasksPromise: Promise = loadTasks(); - let taskPanel: TaskPanel; - // react to hash changes let hash = window.location.hash.substr(1); window.onhashchange = () => { @@ -28,21 +24,13 @@
- - {#if hash == 'editor'} - - - - {:else} - - -
- { if (e.detail.type != "label") (location.hash = `#task/${e.detail.id}`)}} - on:closeTask={() => {location.hash = '#'}} /> -
- - {/if} - + + +
+ { location.hash = ""}} + on:selectTask={(e) => { if (e.detail.type != "label") (location.hash = `#task/${e.detail.id}`)}}/> +
+
diff --git a/frontend/src/Editor-main.svelte b/frontend/src/Editor-main.svelte new file mode 100644 index 0000000..718a12f --- /dev/null +++ b/frontend/src/Editor-main.svelte @@ -0,0 +1,27 @@ + + + + +
+ + + + + +
diff --git a/frontend/src/Graph.svelte b/frontend/src/Graph.svelte index 448a5e8..99764d0 100644 --- a/frontend/src/Graph.svelte +++ b/frontend/src/Graph.svelte @@ -6,8 +6,6 @@ import type { TasksFile, TaskDescriptor } from "./tasks"; import { createEdges } from "./tasks"; import { taskStatuses } from "./task-status-cache"; -import { grabAssignment } from "./ksp-task-grabber"; -import TaskDetailEditor from "./TaskDetailEditor.svelte"; export let tasks: TasksFile; export let nodeDraggingEnabled: boolean = false; diff --git a/frontend/src/editor-main.ts b/frontend/src/editor-main.ts new file mode 100644 index 0000000..3baf555 --- /dev/null +++ b/frontend/src/editor-main.ts @@ -0,0 +1,8 @@ +import Editor from './Editor-main.svelte'; +import { loadTasks } from './tasks'; +import type { TasksFile } from './tasks' + +const app = new Editor({ + target: document.getElementById("svelte-root")!, + props: {} +}); diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 65190cf..b6e5acc 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -2,8 +2,7 @@ import App from './App.svelte'; const app = new App({ target: document.getElementById("svelte-root")!, - props: { - } + props: { } }); export default app; diff --git a/frontend/src/typescripthack.d.ts b/frontend/src/typescripthack.d.ts new file mode 100644 index 0000000..f5e9162 --- /dev/null +++ b/frontend/src/typescripthack.d.ts @@ -0,0 +1 @@ +declare const allowEditor: boolean diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 74d8523..f1454a5 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -3,7 +3,8 @@ "compilerOptions": { // "target": "ES2019" "strict": true, - "types": ["jest", "node"] + "types": ["jest", "node"], + "module": "esnext" }, "include": ["src/**/*"], diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 07c6749..1fd24b7 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -524,6 +524,14 @@ is-module "^1.0.0" resolve "^1.17.0" +"@rollup/plugin-replace@^2.3.3": + version "2.3.3" + resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.3.tgz#cd6bae39444de119f5d905322b91ebd4078562e7" + integrity sha512-XPmVXZ7IlaoWaJLkSCDaa0Y6uVo5XQYHhiMFzOd5qSv5rE+t/UJToPIOE56flKIxBFQI27ONsxb7dqHnwSsjKQ== + dependencies: + "@rollup/pluginutils" "^3.0.8" + magic-string "^0.25.5" + "@rollup/plugin-typescript@^6.0.0": version "6.0.0" resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-6.0.0.tgz#08635d9d04dc3a099ef0150c289ba5735200bc63" @@ -3215,7 +3223,7 @@ lower-case@^2.0.1: dependencies: tslib "^1.10.0" -magic-string@^0.25.2: +magic-string@^0.25.2, magic-string@^0.25.5: version "0.25.7" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051" integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==