setting up offline babel transpiling and nmp-ifying

README.md

@@ -1,10 +1,10 @@
 # Single-page chat with Tinode
 
-Example using [Tinode](https://github.com/tinode/chat/) to build a single-page chat application. The app uses
+Single-page web chat application built with [Tinode](https://github.com/tinode/chat/). The app uses
 [React](https://facebook.github.io/react/), Google's material design [fonts](https://www.google.com/fonts/)
 and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-web). The [Tinode javascript library](https://github.com/tinode/tinode-js/) has no external dependencies. Overall it's a lot like open source WhatsApp or Telegram web apps.
 
-Although the app is generally usable, keep in mind that this is work in progress. Some bugs probably exist. The app was tested in the latest Chrome & Firefox only.
+Although the app is generally usable, keep in mind that this is work in progress. Some bugs probably exist. The app was tested in the latest Chrome & Firefox only. NPM [is available](https://www.npmjs.com/package/tinode-webapp).
 
 Try possibly newer or older version live at https://api.tinode.co/. Login as one of `alice`, `bob`, `carol`, `dave`, `frank`. Password is `<login>123`, e.g. password for `alice` is `alice123`. You can discover other users by email or phone by prefixing them with `email:` or `tel:` respectively. Emails are `<login>@example.com`, e.g. `alice@example.com`, phones are `17025550001` through `17025550009`. The demo is reset every night at 2:15am Pacific time.
 

index-dev.html

@@ -0,0 +1,41 @@
+<!-- DEVELOPMENT version of the web app. Links to online babel transformer and non-babelified app script -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Tinode</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="application-name" content="Tinode">
+    <meta name="description" content="Instant messaging">
+    <meta name="application-url" content="https://api.tinode.co/">
+    <!-- Browser styling for Chrome, FF, Opera -->
+    <meta name="theme-color" content="#3949AB">
+    <!-- Ask Google not to offer page translation -->
+    <meta name="google" value="notranslate">
+
+    <link rel="manifest" href="manifest.json">
+    <link id="shortcut-icon" rel="shortcut icon" href="img/logo32x32.png" type="image/png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="img/logo192.png" type="image/png" />
+    <link rel="canonical" href="https://api.tinode.co/" />
+    <!-- Google's Roboto font -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700&subset=latin,cyrillic"
+      rel="stylesheet" type="text/css" />
+    <!-- Google's material design icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <!-- Styles for local elements -->
+    <link rel="stylesheet" href="css/base.css" />
+
+    <!-- ReactJs scripts -->
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- core tinode library -->
+    <script src="tinode.js"></script>
+    <!-- the application -->
+    <script type="text/babel" src="index.js"></script>
+  </head>
+  <body>
+    <div id="mountPoint"></div>
+  </body>
+</html>

index.html

@@ -27,13 +27,11 @@
     <!-- ReactJs scripts -->
     <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <!-- core tinode library -->
     <script src="tinode.js"></script>
-    <!-- the application -->
-    <script type="text/babel" src="index.js"></script>
   </head>
   <body>
     <div id="mountPoint"></div>
+    <script src="index.min.js"></script>
   </body>
 </html>

index.js

@@ -4083,7 +4083,7 @@ class SendMessage extends React.PureComponent {
         // Format data and initiate upload.
         let uploadCompletionPromise = uploader.upload(file);
         let msg = Drafty.attachFile(null, file.type, null, file.name, file.size, uploadCompletionPromise);
-        // Pass data and the uploader to the AppView.
+        // Pass data and the uploader to the TinodeWeb.
         this.props.sendMessage(msg, uploadCompletionPromise, uploader);
       } else {
         // Small enough to send inband.
@@ -4242,7 +4242,7 @@ class ImagePreview extends React.PureComponent {
 /* END Conversation panel */
 
 /* The top-level class to hold all fuinctionality together */
-class AppView extends React.Component {
+class TinodeWeb extends React.Component {
   constructor(props) {
     super(props);
 
@@ -4345,7 +4345,7 @@ class AppView extends React.Component {
     Tinode.enableLogging(true, true);
     Tinode.onConnect = this.handleConnected;
     Tinode.onDisconnect = this.handleDisconnect;
-    AppView.tnSetup(this.state.serverAddress, this.state.transport);
+    TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport);
     var token;
     if (localStorage.getObject("keep-logged-in")) {
       token = localStorage.getObject("auth-token");
@@ -4756,7 +4756,7 @@ class AppView extends React.Component {
     transport = transport || this.state.transport;
     serverAddress = serverAddress || this.state.serverAddress;
     this.setState({serverAddress: serverAddress, transport: transport, sidePanelSelected: 'login'});
-    AppView.tnSetup(serverAddress, transport);
+    TinodeWeb.tnSetup(serverAddress, transport);
   }
 
   // User clicked Cancel button in Setting or Sign Up panel.
@@ -4846,7 +4846,7 @@ class AppView extends React.Component {
   handleLogout() {
     localStorage.removeItem("auth-token");
     this.setState(this.getInitialState());
-    AppView.tnSetup(this.state.serverAddress, this.state.transport);
+    TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport);
     window.location.hash = "";
   }
 
@@ -5065,6 +5065,6 @@ class AppView extends React.Component {
 };
 
 ReactDOM.render(
-  <AppView />,
+  <TinodeWeb />,
   document.getElementById('mountPoint')
 );

package.json

@@ -1,10 +1,12 @@
 {
-  "name": "TinodeWeb",
+  "name": "tinode-webapp",
-  "description": "Javascript bindings for Tinode",
+  "description": "Tinode Web Client",
-  "version": "0.15.4-rc1",
+  "version": "0.15.4-rc3",
   "devDependencies": {
     "babel-cli": "^6.26.0",
+    "babel-minify": "^0.4.3",
     "babel-preset-env": "^1.7.0",
+    "babel-preset-minify": "^0.4.3",
     "babel-preset-react": "^6.24.1"
   },
   "repository": {
@@ -12,7 +14,7 @@
     "url": "https://github.com/tinode/example-react-js.git"
   },
   "scripts": {
-    "build": "babel --presets react ./ -d lib",
+    "build": "babel ./index.js --presets react,minify --out-file ./index.min.js",
     "babel-version": "babel --version"
   },
   "keywords": [
@@ -22,7 +24,7 @@
   ],
   "main": "index.js",
   "bugs": {
-    "url": "https://github.com/tinode/tinode-js/issues"
+    "url": "https://github.com/tinode/example-react-js/issues"
   },
   "homepage": "https://github.com/tinode/chat",
   "email": "gene@tinode.co",