feat(update): Add auto updater.

Author: walkthunder

src/components/PendingStatsView.tsx

@@ -21,23 +21,13 @@ export const PendingStatsViewComponent = (props: { plugin: InvioPlugin }) => {
 
     const toRemoteTouched = getToRemoteFileList();
     console.log('toRemoteTouched - ', toRemoteTouched)
-    const selectedKeys = [];
-    if (!(toLocalTouched.length > 0) && !(toRemoteTouched.length > 0)) {
-        return <>
-            <h4 className={styles['header']}><Logo className={styles['icon']} />Changed Files</h4>
-            <div className={styles['emptyReport']}>
-                <ScrollText className={styles['icon']} />
-                <span>No file changed</span>
-            </div>
-        </>
-    }
 
-    const treeToLocalData: DataNode[] = toLocalTouched.map((item: any) => {
+    const treeToLocalData: DataNode[] = toLocalTouched?.map((item: any) => {
         item.title = item.key
         item.key = item.key
         return item;
     })
-    const treeToRemoteData: DataNode[] = toRemoteTouched.map((item: any) => {
+    const treeToRemoteData: DataNode[] = toRemoteTouched?.map((item: any) => {
         item.title = item.key
         item.key = item.key
         return item;
@@ -49,7 +39,7 @@ export const PendingStatsViewComponent = (props: { plugin: InvioPlugin }) => {
         props.plugin.viewFileDiff(key, type === 'ToLocal' ? 'RemoteToLocal' : 'LocalToRemote')
         setTimeout(() => {
             selectedKeys = []
-        }, 3000)
+        }, 300)
     };
 
     const onToLocalSelect: TreeProps['onSelect'] = (selectedKeys: any, info: any) => {
@@ -80,7 +70,20 @@ export const PendingStatsViewComponent = (props: { plugin: InvioPlugin }) => {
         const modal = new CheckSettingsModal(props.plugin.app, props.plugin);
         modal.open();
     }
-
+    if (!(toLocalTouched.length > 0) && !(toRemoteTouched.length > 0)) {
+        return <>
+            <h4 className={styles['header']}>
+                <Logo className={styles['icon']} />
+                Touched Files Status
+                <Cog className={styles['settings']} onClick={openSettings} />
+            </h4>
+            
+            <div className={styles['emptyReport']}>
+                <ScrollText className={styles['icon']} />
+                <span>No file changed</span>
+            </div>
+        </>
+    }
     return (
         <>
             <h4 className={styles['header']}>

src/constants.ts

@@ -0,0 +1 @@
+export const GITHUB_PATH = 'frontend-engineering/Invio'

src/langs/en.json

@@ -124,6 +124,9 @@
   "modal_project_slug_err": "The slug can only contain letters and numbers, with a length of 6 to 12 characters.",
   "modal_project_slug_case_err": "Invio project slug is case-insensitive, it can only contain lower case characters.",
 
+  "settings_update_title": "New version detected",
+  "settings_update_desc": "Latest version: {{updateVersion}}, Current version: {{currentVersion}}",
+  "settings_update_btn": "Update",
   "settings_basic": "Basic Settings",
   "settings_domain": "Domain",
   "settings_domain_desc": "The option to point a domain to your S3 (or other COS) is optional, but recommended for previewing and generating a website that is SEO-friendly. \n Like https://search.google.com",

src/langs/zh_cn.json

@@ -123,6 +123,9 @@
   "modal_project_slug_err": "slug只能包含字母和数字，长度6～12位",
   "modal_project_slug_case_err": "Invio project slug 大小写不敏感，不允许包含大写字母",
 
+  "settings_update_title": "检测到新版本",
+  "settings_update_desc": "最新版本: {{updateVersion}}, 当前版本: {{currentVersion}}",
+  "settings_update_btn": "升级",
   "settings_basic": "基本设置",
   "settings_domain": "域名",
   "settings_domain_desc": "（可选）绑定的指向S3（或其他COS）的域名，主要用于预览和部署网页时SEO相关配置的自动注入。\n例如：https://search.google.com",

src/langs/zh_tw.json

@@ -123,6 +123,9 @@
   "modal_project_slug_err": "slug只能包含字母和数字，长度6～12位",
   "modal_project_slug_case_err": "Invio project slug 大小写不敏感，不允许包含大写字母",
 
+  "settings_update_title": "检测到新版本",
+  "settings_update_desc": "最新版本: {{updateVersion}}, 当前版本: {{currentVersion}}",
+  "settings_update_btn": "升级",
   "settings_basic": "基本設定",
   "settings_domain": "域名",
   "settings_domain_desc": "（可选）绑定的指向S3（或其他COS）的域名，主要用于预览和部署网页时SEO相关配置的自动注入。\n例如：https://search.google.com",

src/main.ts

@@ -59,6 +59,7 @@ import { syncWithRemoteProject, switchProject } from './hosting';
 import Utils from './utils';
 import { Analytics4, loadGA } from './ga';
 import { TDiffType, openDiffModal } from './diff/index';
+import AutoUpdater from './updater'
 
 const { iconNameSyncWait, iconNameSyncPending, iconNameSyncRunning, iconNameLogs, iconNameSyncLogo } = UsingIconNames;
 const Menu_Tab = `    `;
@@ -89,6 +90,7 @@ export default class InvioPlugin extends Plugin {
   recentSyncedFiles: any;
   ga: Analytics4;
   syncRunAbort: boolean | ((params: any) => void);
+  updater: AutoUpdater;
 
   isUnderWatch(file: TAbstractFile) {
     const rootDir = this.settings.localWatchDir;
@@ -871,12 +873,12 @@ export default class InvioPlugin extends Plugin {
     const touched = [ ...(toRemoteFiles || []), ...(toLocalFiles || []) ]
     await StatsView.activateStatsView(this);
     const view = StatsView.getStatsView(this, 'PendingStats');
-    view.setStatsType('PendingStats')
+    view?.setStatsType('PendingStats')
     const fileMap: Record<string, FileOrFolderMixedState>  = {};
     touched.forEach(item => {
       fileMap[item.key] = item;
     })
-    view.init(fileMap)
+    view?.init(fileMap)
   }
 
   async onload() {
@@ -947,7 +949,8 @@ export default class InvioPlugin extends Plugin {
 
     // must AFTER preparing DB
     this.enableAutoClearSyncPlanHist();
-
+    this.updater = new AutoUpdater(this);
+  
     this.app.workspace.onLayoutReady(() => {
       log.debug('layout ready...');
       // Add custom icon for root dir
@@ -974,6 +977,13 @@ export default class InvioPlugin extends Plugin {
       }, 300);
       // TODO: Change file icons to show sync status, like sync done, sync failed, pending to sync, etc.
     })
+
+    setTimeout(async () => {
+      this.updater.autoUpdate((info) => {
+        log.info('update info: ', info);
+        // TODO: Setup update alert
+      })
+    }, 60 * 1000)
     this.syncRunAbort = false;
     this.syncStatus = "idle";
 

src/settings.ts

@@ -98,7 +98,7 @@ export const getDEFAULT_SETTINGS = (): InvioPluginSettings => {
     // vaultRandomID: "", // deprecated
     autoRunEveryMilliseconds: -1,
     initRunAfterMilliseconds: -1,
-    autoCheckEveryMilliseconds: 1000 * 60, 
+    autoCheckEveryMilliseconds: 1000 * 60 * 5, 
     initCheckAfterMilliseconds: 1000 * 10,
     agreeToUploadExtraMetadata: false,
     concurrency: 5,
@@ -469,6 +469,27 @@ export class InvioSettingTab extends PluginSettingTab {
 
     containerEl.createEl("h1", { text: "Invio" });
 
+    const updateDiv = containerEl.createEl("div");
+    this.plugin.updater.update(true).then(updateInfo => {
+      if ((typeof updateInfo !== 'boolean') && updateInfo?.updateVersion) {
+        const desc = t('settings_update_desc', updateInfo);
+        new Setting(updateDiv)
+        .setName(t('settings_update_title'))
+        .setDesc(desc)
+        .addButton((button) => {
+          button.setButtonText(t('settings_update_btn'));
+          button.onClick(() => {
+            this.plugin.updater.update()
+            this.hide();
+          }); 
+        })
+      } else {
+        new Setting(updateDiv)
+        .setName('update')
+        .setDesc('latest version')
+      }
+    })
+
     // const dirChooserDiv = containerEl.createDiv();
     // dirChooserDiv.createEl("h2", { text: t("settings_chooseservice") });
     const dirDiv = containerEl.createEl("div");