Merge pull request #1065 from TriliumNext/chore_port_setup-entrypoint

chore(client/ts): port setup entrypoint

bin/copy-dist.ts

@@ -89,7 +89,6 @@ const copy = async () => {
         "node_modules/jsplumb/dist/",
         "node_modules/vanilla-js-wheel-zoom/dist/",
         "node_modules/mark.js/dist/",
-        "node_modules/knockout/build/output/",
         "node_modules/normalize.css/",
         "node_modules/jquery.fancytree/dist/",
         "node_modules/bootstrap/dist/",

src/public/app/setup.js

@@ -1,107 +0,0 @@
-import utils from "./services/utils.js";
-import macInit from "./services/mac_init.js";
-
-macInit.init();
-
-function SetupModel() {
-    if (syncInProgress) {
-        setInterval(checkOutstandingSyncs, 1000);
-    }
-
-    const serverAddress = `${location.protocol}//${location.host}`;
-
-    $("#current-host").html(serverAddress);
-
-    this.step = ko.observable(syncInProgress ? "sync-in-progress" : "setup-type");
-    this.setupType = ko.observable();
-
-    this.setupNewDocument = ko.observable(false);
-    this.setupSyncFromDesktop = ko.observable(false);
-    this.setupSyncFromServer = ko.observable(false);
-
-    this.syncServerHost = ko.observable();
-    this.syncProxy = ko.observable();
-    this.password = ko.observable();
-
-    this.setupTypeSelected = () => !!this.setupType();
-
-    this.selectSetupType = () => {
-        if (this.setupType() === "new-document") {
-            this.step("new-document-in-progress");
-
-            $.post("api/setup/new-document").then(() => {
-                window.location.replace("./setup");
-            });
-        } else {
-            this.step(this.setupType());
-        }
-    };
-
-    this.back = () => {
-        this.step("setup-type");
-
-        this.setupType("");
-    };
-
-    this.finish = async () => {
-        const syncServerHost = this.syncServerHost();
-        const syncProxy = this.syncProxy();
-        const password = this.password();
-
-        if (!syncServerHost) {
-            showAlert("Trilium server address can't be empty");
-            return;
-        }
-
-        if (!password) {
-            showAlert("Password can't be empty");
-            return;
-        }
-
-        // not using server.js because it loads too many dependencies
-        const resp = await $.post("api/setup/sync-from-server", {
-            syncServerHost: syncServerHost,
-            syncProxy: syncProxy,
-            password: password
-        });
-
-        if (resp.result === "success") {
-            this.step("sync-in-progress");
-
-            setInterval(checkOutstandingSyncs, 1000);
-
-            hideAlert();
-        } else {
-            showAlert(`Sync setup failed: ${resp.error}`);
-        }
-    };
-}
-
-async function checkOutstandingSyncs() {
-    const { outstandingPullCount, initialized } = await $.get("api/sync/stats");
-
-    if (initialized) {
-        if (utils.isElectron()) {
-            const remote = utils.dynamicRequire("@electron/remote");
-            remote.app.relaunch();
-            remote.app.exit(0);
-        } else {
-            utils.reloadFrontendApp();
-        }
-    } else {
-        $("#outstanding-syncs").html(outstandingPullCount);
-    }
-}
-
-function showAlert(message) {
-    $("#alert").html(message);
-    $("#alert").show();
-}
-
-function hideAlert() {
-    $("#alert").hide();
-}
-
-ko.applyBindings(new SetupModel(), document.getElementById("setup-dialog"));
-
-$("#setup-dialog").show();

src/public/app/setup.ts

@@ -0,0 +1,130 @@
+import utils from "./services/utils.js";
+import macInit from "./services/mac_init.js";
+import ko from "knockout";
+
+macInit.init();
+
+// TriliumNextTODO: properly make use of below types
+// type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
+// type SetupModelStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop";
+
+class SetupModel {
+    syncInProgress: boolean;
+    step: ko.Observable<string>;
+    setupType: ko.Observable<string>;
+    setupNewDocument: ko.Observable<boolean>;
+    setupSyncFromDesktop: ko.Observable<boolean>;
+    setupSyncFromServer: ko.Observable<boolean>;
+    syncServerHost: ko.Observable<string | undefined>;
+    syncProxy: ko.Observable<string | undefined>;
+    password: ko.Observable<string | undefined>;
+
+    constructor(syncInProgress: boolean) {
+        this.syncInProgress = syncInProgress;
+        this.step = ko.observable(syncInProgress ? "sync-in-progress" : "setup-type");
+        this.setupType = ko.observable("");
+        this.setupNewDocument = ko.observable(false);
+        this.setupSyncFromDesktop = ko.observable(false);
+        this.setupSyncFromServer = ko.observable(false);
+        this.syncServerHost = ko.observable();
+        this.syncProxy = ko.observable();
+        this.password = ko.observable();
+
+        if (this.syncInProgress) {
+            setInterval(checkOutstandingSyncs, 1000);
+        }
+        const serverAddress = `${location.protocol}//${location.host}`;
+        $("#current-host").html(serverAddress);
+    }
+
+    // this is called in setup.ejs
+    setupTypeSelected() {
+        return !!this.setupType();
+    }
+
+    selectSetupType() {
+        if (this.setupType() === "new-document") {
+            this.step("new-document-in-progress");
+
+            $.post("api/setup/new-document").then(() => {
+                window.location.replace("./setup");
+            });
+        } else {
+            this.step(this.setupType());
+        }
+    }
+
+    back() {
+        this.step("setup-type");
+        this.setupType("");
+    }
+
+    async finish() {
+        const syncServerHost = this.syncServerHost();
+        const syncProxy = this.syncProxy();
+        const password = this.password();
+
+        if (!syncServerHost) {
+            showAlert("Trilium server address can't be empty");
+            return;
+        }
+
+        if (!password) {
+            showAlert("Password can't be empty");
+            return;
+        }
+
+        // not using server.js because it loads too many dependencies
+        const resp = await $.post("api/setup/sync-from-server", {
+            syncServerHost: syncServerHost,
+            syncProxy: syncProxy,
+            password: password
+        });
+
+        if (resp.result === "success") {
+            this.step("sync-in-progress");
+
+            setInterval(checkOutstandingSyncs, 1000);
+
+            hideAlert();
+        } else {
+            showAlert(`Sync setup failed: ${resp.error}`);
+        }
+    }
+}
+
+async function checkOutstandingSyncs() {
+    const { outstandingPullCount, initialized } = await $.get("api/sync/stats");
+
+    if (initialized) {
+        if (utils.isElectron()) {
+            const remote = utils.dynamicRequire("@electron/remote");
+            remote.app.relaunch();
+            remote.app.exit(0);
+        } else {
+            utils.reloadFrontendApp();
+        }
+    } else {
+        $("#outstanding-syncs").html(outstandingPullCount);
+    }
+}
+
+function showAlert(message: string) {
+    $("#alert").text(message);
+    $("#alert").show();
+}
+
+function hideAlert() {
+    $("#alert").hide();
+}
+
+function getSyncInProgress() {
+    const el = document.getElementById("syncInProgress");
+    if (!el || !(el instanceof HTMLMetaElement)) return false;
+    return !!parseInt(el.content);
+}
+
+addEventListener("DOMContentLoaded", (event) => {
+    ko.applyBindings(new SetupModel(getSyncInProgress()), document.getElementById("setup-dialog"));
+    $("#setup-dialog").show();
+});

src/routes/assets.ts

@@ -88,8 +88,6 @@ async function register(app: express.Application) {
     // Deprecated, https://www.npmjs.com/package/autocomplete.js?activeTab=readme
     app.use(`/${assetPath}/node_modules/autocomplete.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/autocomplete.js/dist/")));
 
-    app.use(`/${assetPath}/node_modules/knockout/build/output/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/knockout/build/output/")));
-
     app.use(`/${assetPath}/node_modules/normalize.css/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/normalize.css/")));
 
     app.use(`/${assetPath}/node_modules/jquery.fancytree/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/jquery.fancytree/dist/")));

src/views/setup.ejs

@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta id="syncInProgress" content="<%= syncInProgress ? 1 : 0 %>" />
     <title><%= t("setup.title") %></title>
 
     <style>
@@ -146,8 +147,6 @@
     window.glob = {
         componentId: ''
     };
-
-    window.syncInProgress = <%= syncInProgress ? 'true' : 'false' %>;
 </script>
 
 <!-- Required for correct loading of scripts in Electron -->
@@ -159,8 +158,6 @@
 <link href="<%= assetPath %>/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="<%= assetPath %>/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-<script src="<%= assetPath %>/node_modules/knockout/build/output/knockout-latest.js"></script>
-
 <script src="<%= appPath %>/setup.js" crossorigin type="module"></script>
 <link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet" />
 <link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet" />