shared: Set up a way to share some frontend code with the mobile app.

This adds the general machinery required, and sets it up for the file
`typing_status.js` as a first use case.

Co-authored-by: Anders Kaseorg <anders@zulipchat.com>

docs/subsystems/typing-indicators.md

@@ -45,7 +45,7 @@ repeated updates to the server, so that downstream clients know that the
 user is still typing.  (Zulip messages tend to be longer than
 messages in other chat/text clients, so this detail is important.)
 
-We have a small state machine in `static/js/typing_status.js` that
+We have a small state machine in `static/shared/js/typing_status.js` that
 makes sure subsequent "start" requests get sent out every ten
 seconds.  (This document is intended to describe the high level
 architecture; the actual time values may be tuned in future releases.

frontend_tests/node_tests/typing_status.js

@@ -1,7 +1,7 @@
 zrequire('typing');
 zrequire('people');
 zrequire('compose_pm_pill');
-const typing_status = zrequire('typing_status');
+const typing_status = zrequire('typing_status', 'shared/js/typing_status');
 
 function return_false() { return false; }
 function return_true() { return true; }

frontend_tests/zjsunit/index.js

@@ -6,6 +6,7 @@ require("@babel/register")({
     extensions: [".es6", ".es", ".jsx", ".js", ".mjs", ".ts"],
     only: [
         new RegExp("^" + escapeRegExp(path.resolve(__dirname, "../../static/js")) + path.sep),
+        new RegExp("^" + escapeRegExp(path.resolve(__dirname, "../../static/shared/js")) + path.sep),
     ],
     plugins: ["rewire-ts"],
 });

frontend_tests/zjsunit/namespace.js

@@ -22,7 +22,7 @@ exports.patch_builtin = function (name, val) {
 exports.zrequire = function (name, fn) {
     if (fn === undefined) {
         fn = '../../static/js/' + name;
-    } else if (/generated\/|js\/|third\//.test(fn)) {
+    } else if (/^generated\/|^js\/|^shared\/|^third\//.test(fn)) {
         // FIXME: Stealing part of the NPM namespace is confusing.
         fn = '../../static/' + fn;
     }

static/js/typing.js

@@ -1,4 +1,4 @@
-const typing_status = require("./typing_status");
+const typing_status = require("../shared/js/typing_status");
 
 var typing = (function () {
 var exports = {};

static/shared/README.md

@@ -0,0 +1,20 @@
+The files in this subtree are part of the Zulip web frontend,
+and are also incorporated by the Zulip mobile app.
+
+Note that the deployment cycles are different:
+
+ * In the webapp, this code is deployed in the same way as the rest of
+   the web frontend: it's part of the server tree, and the browser
+   gets it from the server, so the client is always running the same
+   version the server just gave it.
+
+ * In the mobile app, this code is deployed in the same way as the
+   rest of the mobile app: it's bundled up into the app binary which
+   is uploaded to app stores and users install on their devices.  The
+   client will be running the version built into their version of the
+   mobile app, which may be newer, older, or simply different from the
+   version on the server.
+
+   The mobile app always refers to a specific version of this code;
+   changes to this code will appear in the mobile app only after a
+   commit in the mobile app pulls them in.

static/shared/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@zulip/shared",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "underscore": "^1.9.1"
+  }
+}

tools/test-js-with-node

@@ -23,6 +23,8 @@ USAGE = '''
     '''
 
 enforce_fully_covered = {
+    'static/shared/js/typing_status.js',
+
     'static/js/activity.js',
     'static/js/alert_words.js',
     'static/js/alert_words_ui.js',
@@ -79,7 +81,6 @@ enforce_fully_covered = {
     'static/js/transmit.js',
     'static/js/typeahead_helper.js',
     'static/js/typing_data.js',
-    'static/js/typing_status.js',
     'static/js/unread.js',
     'static/js/user_events.js',
     'static/js/user_groups.js',

tools/webpack.config.ts

@@ -40,7 +40,10 @@ export default (env?: string): webpack.Configuration[] => {
                 // Transpile .js and .ts files with Babel
                 {
                     test: /\.(js|ts)$/,
-                    include: resolve(__dirname, '../static/js'),
+                    include: [
+                        resolve(__dirname, '../static/shared/js'),
+                        resolve(__dirname, '../static/js'),
+                    ],
                     loader: 'babel-loader',
                 },
                 // Uses script-loader on minified files so we don't change global variables in them.