Update DeepHavenJsApiLinker to allow exporting GWT JsTypes as ES6 module

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');

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

@@ -3,8 +3,6 @@
 <head>
  <meta charset="utf-8" />
  <title>Deephaven Web API linked table example: parent window</title>
- <script src="../dh-internal.js" type="text/javascript"></script>
- <script src="../dh-core.js" type="text/javascript"></script>
  <style>
  p, ul {
  max-width: 800px;
@@ -68,16 +66,19 @@ <h3>Persistent Query Configurations</h3>
 <ul id="queries">
 
 </ul>
-<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);
- c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+ window.c = new Client(url.href);
+ c.addEventListener(Client.EVENT_CONNECT, () => {
  connected();
  c.login({username:'dh',token:'dh',type:'password'}).then(result => {
  console.log("login successful");
@@ -88,14 +89,14 @@ <h3>Persistent Query Configurations</h3>
  var configs = Object.create(null);
 
  function connected() {
- c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+ c.addEventListener(Client.EVENT_CONFIG_REMOVED, event => {
  removeQuery(event.detail);
  });
- c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+ c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
  removeQuery(event.detail);
  addQuery(event.detail);
  });
- c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+ c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
  addQuery(event.detail);
  });
  function removeQuery(queryInfo) {