feat(client): reload UI on www source change

Jigsaw-Code · Aug 8, 2024 · 41177cc · 41177cc
1 parent 5cc2a74
commit 41177cc
Show file tree

Hide file tree

Showing 6 changed files with 2,838 additions and 34,398 deletions.
diff --git a/client/package.json b/client/package.json
@@ -95,6 +95,7 @@
     "eslint-plugin-import": "^2.26.0",
     "esm": "^3.2.25",
     "file-loader": "^6.2.0",
+    "folder-hash": "^4.0.4",
     "html-webpack-plugin": "^5.1.0",
     "husky": "^1.3.1",
     "i18n-strings-files": "^2.0.0",

diff --git a/client/src/cordova/start.action.mjs b/client/src/cordova/start.action.mjs
@@ -0,0 +1,87 @@
+// Copyright 2022 The Outline Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import path from 'path';
+import url from 'url';
+
+import {createReloadServer} from '@outline/infrastructure/build/create_reload_server.mjs';
+import {getRootDir} from '@outline/infrastructure/build/get_root_dir.mjs';
+import {runAction} from '@outline/infrastructure/build/run_action.mjs';
+import cordovaLib from 'cordova-lib';
+import {hashElement} from 'folder-hash';
+import * as fs from "fs-extra";
+const {cordova} = cordovaLib;
+
+import {getBuildParameters} from '../../build/get_build_parameters.mjs';
+
+const getUIHash = async () => {
+  const hashResult = await hashElement(
+    path.join(getRootDir(), 'client/src/www'),
+    {
+      files: {include: ['**/*.ts', '**/*.html', '**/*.css', '**/*.js']},
+    }
+  );
+
+  return hashResult.hash;
+};
+
+/**
+ * @description Builds the parameterized cordova binary (ios, macos, maccatalyst, android).
+ *
+ * @param {string[]} parameters
+ */
+export async function main(...parameters) {
+  const {platform, verbose} = getBuildParameters(parameters);
+
+  if (platform !== 'macos') {
+    throw new Error('Only macos platform is currently supported');
+  }
+
+  await runAction('client/src/www/build', ...parameters);
+  await runAction('client/go/build', ...parameters);
+  await runAction('client/src/cordova/setup', ...parameters);
+
+  if (verbose) {
+    cordova.on('verbose', message =>
+      console.debug(`[cordova:verbose] ${message}`)
+    );
+  }
+
+  let previousUIHashResult = await getUIHash();
+
+  console.log('Starting reload server @ port 35729...');
+  createReloadServer(async () => {
+    const currentUIHashResult = await getUIHash();
+
+    if (previousUIHashResult === currentUIHashResult) {
+      return false;
+    }
+
+    previousUIHashResult = currentUIHashResult;
+
+    await runAction('client/src/www/build', ...parameters);
+
+    console.log('Copying www folder to platforms/osx/www...');
+    fs.copySync(
+      path.join(getRootDir(), 'client/www'),
+      path.join(getRootDir(), 'client/platforms/osx/www')
+    );
+
+    return true;
+  }).listen(35729);
+}
+
+if (import.meta.url === url.pathToFileURL(process.argv[1]).href) {
+  await main(...process.argv.slice(2));
+}
diff --git a/client/src/www/index_cordova.html b/client/src/www/index_cordova.html
@@ -26,5 +26,16 @@
   </head>
   <body unresolved>
     <app-root></app-root>
+
+    <script>
+      try {
+        const reloadSocket = new WebSocket("ws://localhost:35729");
+
+        reloadSocket.onopen = () => console.log("LiveReload connected~");
+        reloadSocket.onmessage = ({ data }) => data === "reload" && location.reload();
+      } catch (e) {
+        // nevermind
+      }
+    </script>
   </body>
 </html>
diff --git a/infrastructure/build/create_reload_server.mjs b/infrastructure/build/create_reload_server.mjs
@@ -0,0 +1,36 @@
+// Copyright 2024 The Outline Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {createServer} from 'node:http';
+
+import {WebSocketServer} from 'ws';
+
+export function createReloadServer(
+  shouldReload = () => true,
+  reloadCheckIntervalMs = 1000
+) {
+  const server = createServer();
+  const websocket = new WebSocketServer({server});
+
+  websocket.on('connection', connection => {
+    setInterval(async () => {
+      if (!(await shouldReload())) return;
+
+      console.log('Reloading...');
+      connection.send('reload');
+    }, reloadCheckIntervalMs);
+  });
+
+  return server;
+}
diff --git a/infrastructure/package.json b/infrastructure/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "node-fetch": "^3.3.2",
-    "node-forge": "^1.3.1"
+    "node-forge": "^1.3.1",
+    "ws": "^8.18.0"
   }
 }