Package JS API to be an ES6 module (#2733)

Both dh-core and dh-internal here have been changed, through the use of
a custom GWT linker.

Also updates html samples and web-client-ui to use the new module
packaging. Note that the web-client-ui build is an alpha release, but
will switch to a stable release soon.

---------
Fixes #2735
Co-authored-by: Colin Alworth <colinalworth@deephaven.io>

Author: vegegoku

proto/raw-js-openapi/webpack.config.js

@@ -8,7 +8,11 @@ module.exports = {
     output: {
         path: __dirname+'/build/js-out/',
         filename: 'dh-internal.js',
-        libraryTarget: "umd",
+        libraryTarget: 'module',
+        module:true,
+    },
+    experiments: {
+        outputModule:true
     },
     resolve : {
         modules: ['node_modules', __dirname + '/build/js-src'],

web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinker.java

@@ -9,7 +9,9 @@
 import com.google.gwt.core.ext.linker.*;
 import com.google.gwt.dev.About;
 import com.google.gwt.dev.util.DefaultTextOutput;
+import com.google.gwt.util.tools.Utility;
 
+import java.io.IOException;
 import java.util.Set;
 
 /**
@@ -35,8 +37,6 @@ public ArtifactSet link(TreeLogger logger, LinkerContext context, ArtifactSet ar
 
         ArtifactSet toReturn = new ArtifactSet(artifacts);
         DefaultTextOutput out = new DefaultTextOutput(true);
-        out.print("(function(){");
-        out.newline();
 
         // get compilation result
         Set<CompilationResult> results = artifacts.find(CompilationResult.class);
@@ -54,23 +54,41 @@ public ArtifactSet link(TreeLogger logger, LinkerContext context, ArtifactSet ar
 
         // get the generated javascript
         String[] javaScript = result.getJavaScript();
-        out.print("self.dh = {}");
-        out.newline();
-        out.print("var $wnd = self, $doc, $entry, $moduleName, $moduleBase;");
-        out.newline();
-        out.print("var $gwt_version = \"" + About.getGwtVersionNum() + "\";");
-        out.newlineOpt();
-        out.print(javaScript[0]);
-        out.newline();
-
-        out.print("gwtOnLoad(null,'" + context.getModuleName() + "',null);");
-        out.newline();
-        out.print("})();");
-        out.newline();
+
+        StringBuffer buffer = readFileToStringBuffer(getSelectionScriptTemplate(), logger);
+        replaceAll(buffer, "__GWT_VERSION__", About.getGwtVersionNum());
+        replaceAll(buffer, "__JAVASCRIPT_RESULT__", javaScript[0]);
+        replaceAll(buffer, "__MODULE_NAME__", context.getModuleName());
+
+        out.print(buffer.toString());
 
         toReturn.add(emitString(logger, out.toString(), "dh-core.js"));
 
         return toReturn;
     }
 
+    protected StringBuffer readFileToStringBuffer(String filename,
+            TreeLogger logger) throws UnableToCompleteException {
+        StringBuffer buffer;
+        try {
+            buffer = new StringBuffer(Utility.getFileFromClassPath(filename));
+        } catch (IOException e) {
+            logger.log(TreeLogger.ERROR, "Unable to read file: " + filename, e);
+            throw new UnableToCompleteException();
+        }
+        return buffer;
+    }
+
+    protected String getSelectionScriptTemplate() {
+        return "io/deephaven/web/DeephavenJsApiLinkerTemplate.js";
+    }
+
+    protected static void replaceAll(StringBuffer buf, String search,
+            String replace) {
+        int len = search.length();
+        for (int pos = buf.indexOf(search); pos >= 0; pos = buf.indexOf(search,
+                pos + replace.length())) {
+            buf.replace(pos, pos + len, replace);
+        }
+    }
 }

web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinkerTemplate.js

@@ -0,0 +1,29 @@
+function bindTo(target, source) {
+    var descriptors = Object.getOwnPropertyDescriptors(source);
+    for (var key in descriptors) {
+        if (!(key[0].toUpperCase() === key[0])) {
+            var descriptor = descriptors[key];
+            if (typeof (descriptor.value) === 'function') {
+                descriptor.value = descriptor.value.bind(source)
+            } else if (typeof (descriptor.get) === 'function') {
+                descriptor.get = descriptor.get.bind(source);
+            }
+        }
+    }
+    Object.defineProperties(target, descriptors);
+}
+
+var Scope = function () {
+};
+Scope.prototype = self;
+var $doc, $entry, $moduleName, $moduleBase;
+var $wnd = new Scope();
+bindTo($wnd, self);
+var dh = {}
+$wnd.dh = dh;
+import {dhinternal} from './dh-internal.js';
+$wnd.dhinternal = dhinternal;
+var $gwt_version = "__GWT_VERSION__";
+__JAVASCRIPT_RESULT__
+gwtOnLoad(null, '__MODULE_NAME__', null);
+export default dh;

web/client-api/src/main/java/io/deephaven/web/public/console.html

@@ -4,24 +4,25 @@
     <meta charset="utf-8" />
 
     <title>Deephaven JS API Console Interaction</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
 </head>
 <body>
 <div id="logs"></div>
 <div id="tools">
     <textarea id="command" placeholder="waiting for connection..." rows="1" cols="80" autofocus="autofocus" disabled="disabled" style="resize:vertical"></textarea><button id="run">Run</button>
 </div>
-<script type="text/javascript">
+<script type="module">
+    import dh from './dh-core.js';
+
+    const {CoreClient} = dh;
     var client;
     var connection;
     var ide;
     var table;
     (async () => {
         var url = new URL(window.location);
         // create a connection to the server
-        client = new dh.CoreClient(url.protocol + "//" + url.host);
-        await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+        client = new CoreClient(url.protocol + "//" + url.host);
+        await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
         connection = await client.getAsIdeConnection();
 
         // check if a language was specified

web/client-api/src/main/java/io/deephaven/web/public/format.html

@@ -3,8 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Deephaven Web API Formatting examples</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <style>
         .console {
             max-height: 200px;
@@ -73,8 +71,8 @@ <h4>Sample format strings (click to replace the current format)</h4>
         </ul>
     </div>
 </div>
-<script>
-
+<script type="module">
+  import dh from './dh-core.js';
 
   document.querySelectorAll(".section").forEach(section => {
     var patternInput = section.querySelector('.pattern');

web/client-api/src/main/java/io/deephaven/web/public/freeze.html

@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API table freeze</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         li.open ul { display:block; }
@@ -40,16 +38,18 @@ <h3>Selected table data</h3>
 <button id="next_frozen">&gt;</button>
 <button id="end_frozen">&gt;&gt;</button>
 
-<script>
+<script type="module">
+    import dh from './dh-core.js';
 
+    const {Client} = dh;
     var url = new URL('/socket', window.location);
     if (url.protocol === 'http:') {
         url.protocol = 'ws:';
     } else {
         url.protocol = 'wss:';
     }
 
-    window.c = new dh.Client(url.href);
+    window.c = new Client(url.href);
     c.addEventListener(dh.Client.EVENT_CONNECT, () => {
         connected();
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {

web/client-api/src/main/java/io/deephaven/web/public/grpc.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
 
     <title>Deephaven gRPC test page</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
 </head>
 <body>
 <h3>Simple test page to verify that gRPC is working</h3>

web/client-api/src/main/java/io/deephaven/web/public/index.html

@@ -4,8 +4,6 @@
     <meta charset="utf-8" />
 
     <title>Deephaven JS API samples</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
 </head>
 <body>
 Welcome to the Deephaven JS API. This page has the api loaded, open the browser console to interact with the server.

web/client-api/src/main/java/io/deephaven/web/public/input_table.html

@@ -3,8 +3,6 @@
 <head>
   <meta charset="utf-8" />
   <title>Deephaven Web API table viewport and updates</title>
-  <script src="dh-internal.js" type="text/javascript"></script>
-  <script src="dh-core.js" type="text/javascript"></script>
   <script src="input_tables.js" type="text/javascript"></script>
   <link href="basic.css" rel="stylesheet" type="text/css" />
   <style>
@@ -34,7 +32,10 @@ <h3>Table data (bold headers are keys)</h3>
 <button id="next">&gt;</button>
 <button id="end">&gt;&gt;</button>
 
-<script>
+<script type="module">
+  import dh from './dh-core.js'
+
+  const {CoreClient, Table} = dh;
   var table, inputTable;
   var connection;
   var ide;
@@ -43,8 +44,8 @@ <h3>Table data (bold headers are keys)</h3>
   var currentOffset;
   var PAGE_SIZE = 20;
   (async () => {
-    var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-    await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+    var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+    await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
     connection = await client.getAsIdeConnection();
 
     var types = await connection.getConsoleTypes();
@@ -137,7 +138,7 @@ <h3>Table data (bold headers are keys)</h3>
     simplePagingTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = t.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = t.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
       console.log("update event received, time to redraw data");
       // rebuild the current tbody from scratch
       var tbody = simplePagingTable.querySelector('tbody');

web/client-api/src/main/java/io/deephaven/web/public/linked/child.html

@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API linked table example: child window</title>
-    <script src="../dh-internal.js" type="text/javascript"></script>
-    <script src="../dh-core.js" type="text/javascript"></script>
     <link href="../basic.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
@@ -26,7 +24,10 @@ <h3>Outgoing link summary</h3>
 
 </ul>
 
-<script>
+<script type="module">
+  import dh from '../dh-core.js';
+
+  const {Client, FilterValue, Table} = dh;
   if (!window.opener) {
     alert("This page only works correctly when opened by another window.");
     throw "This page only works correctly when opened by another window.";
@@ -43,14 +44,14 @@ <h3>Outgoing link summary</h3>
     url.protocol = 'wss:';
   }
 
-  window.c = new dh.Client(url.href);
-  c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+  window.c = new Client(url.href);
+  c.addEventListener(Client.EVENT_CONNECT, () => {
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {
       console.log("login successful");
     });
   });
   //wait for the named config to load
-  c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+  c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
     var config = event.detail;
     if (config.name === configName) {
       if (config.status !== 'Running') {
@@ -136,9 +137,9 @@ <h3>Outgoing link summary</h3>
 
               // wrap the data so that we can handle it as a filter value
               if (typeof valueToFilterOn === 'string') {
-                valueToFilterOn = dh.FilterValue.ofString(valueToFilterOn);
+                valueToFilterOn = FilterValue.ofString(valueToFilterOn);
               } else {
-                valueToFilterOn = dh.FilterValue.ofNumber(valueToFilterOn);
+                valueToFilterOn = FilterValue.ofNumber(valueToFilterOn);
               }
 
               // apply a new filter (could also present a menu at this point to ask which filter to use)
@@ -166,7 +167,7 @@ <h3>Outgoing link summary</h3>
     simpleLinkedTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = table.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = table.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
       console.log("update event received, time to redraw data");
       // rebuild the current tbody from scratch
       var tbody = simpleLinkedTable.querySelector('tbody');