Merge pull request #60 from bollwyvl/perf/async-load-again

Re-apply load performance and bundle size/content changes

Author: SylvainCorlay

.gitignore

@@ -3,4 +3,5 @@ lib/
 node_modules/
 *.egg-info/
 .ipynb_checkpoints
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+*.tgz

binder/environment.yml

@@ -1,5 +1,8 @@
 name: jupyterlab-drawio
+
 channels:
-- conda-forge
+  - conda-forge
+
 dependencies:
-- jupyterlab=1.0
+  - jupyterlab >=2,<3.0.0a0
+  - nodejs >=10

binder/postBuild

@@ -1 +1,8 @@
-jupyter labextension install jupyterlab-drawio
+#!/usr/bin/env bash
+set -eux
+npm install
+npm run build
+npm pack
+jupyter labextension install ./jupyterlab-drawio-*.tgz --no-build --debug
+jupyter lab build --dev-build=False --minimize=True --debug
+jupyter labextension list

package.json

@@ -27,8 +27,7 @@
   "scripts": {
     "build": "node scripts/copyfiles.js && tsc",
     "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo",
-    "watch": "tsc -w",
-    "prepublish": "npm run clean && npm run build"
+    "watch": "tsc -w"
   },
   "dependencies": {
     "@jupyterlab/application": "^2.0.0",

scripts/copyfiles.js

@@ -1,6 +1,8 @@
 var fs = require('fs-extra');
-fs.copySync('src/mxgraph/', 'lib/mxgraph/');
+
+fs.copySync('src/mxgraph/javascript/src/', 'lib/mxgraph/javascript/src/');
+fs.copySync('src/mxgraph/javascript/examples/grapheditor/www/', 'lib/mxgraph/javascript/examples/grapheditor/www/');
 // fs.copySync('src/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.txt',
 // 			'lib/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.md');
 // fs.copySync('src/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.txt',
-// 			'src/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.md');
+// 			'src/mxgraph/javascript/examples/grapheditor/www/resources/grapheditor.md');

src/editor.ts

@@ -28,7 +28,10 @@ w.OPEN_FORM = web_path +  'open.html';
 w.mxLoadStylesheets = false;  // disable loading stylesheets
 w.mxLoadResources = false;
 
-import * as mx from './mxgraph/javascript/examples/grapheditor/www/modulated.js';
+/* This is a typing-only import. If you use it directly, the mxgraph content
+   will be included in the main JupyterLab js bundle.
+*/
+import * as MXModuleType from './mxgraph/javascript/examples/grapheditor/www/modulated.js';
 
 import {
   ABCWidgetFactory, DocumentRegistry,  DocumentWidget,
@@ -69,21 +72,29 @@ class DrawioWidget extends DocumentWidget<Widget> {
     constructor(options: DocumentWidget.IOptions<Widget>) {
         super({ ...options });
         this.context = options['context'];
+        void Private.ensureMx().then((mx) => this.onMxLoaded(mx));
+    }
 
+    protected async onMxLoaded(mx: Private.MX) {
+        this.mx = mx;
         this._onTitleChanged();
         this.context.pathChanged.connect(this._onTitleChanged, this);
 
-        this.context.ready.then(() => { this._onContextReady(); });
-        this.context.ready.then(() => { this._handleDirtyStateNew(); });
+        await this.context.ready;
+
+        this._onContextReady();
+        this._handleDirtyStateNew();
     }
 
-    protected onAfterShow(msg: Message): void {
-        this._loadEditor(this.node);
-        this._onContentChanged();
+    onAfterShow(msg: Message): void {
+        Private.ensureMx().then(() => {
+            this._loadEditor(this.node);
+            this._onContentChanged();
+        });
     }
 
     public getSVG() : string {
-        return mx.mxUtils.getXml(this._editor.editor.graph.getSvg());
+        return this.mx.mxUtils.getXml(this._editor.editor.graph.getSvg());
     }
 
     private _onContextReady() : void {
@@ -116,6 +127,7 @@ class DrawioWidget extends DocumentWidget<Widget> {
     }
 
     private _loadEditor(node: HTMLElement, contents?: string): void {
+        const {mx} = this;
         // Adds required resources (disables loading of fallback properties, this can only
         // be used if we know that all keys are defined in the language specific file)
         mx.mxResources.loadDefaultBundle = false;
@@ -145,6 +157,7 @@ class DrawioWidget extends DocumentWidget<Widget> {
     }
 
     private _onContentChanged() : void {
+        const {mx} = this;
         if (this._editor === undefined)
         {
             return;
@@ -167,7 +180,7 @@ class DrawioWidget extends DocumentWidget<Widget> {
         {
             this._editor.editor.graph.stopEditing();
         }
-        let xml = mx.mxUtils.getXml(this._editor.editor.getGraphXml());
+        let xml = this.mx.mxUtils.getXml(this._editor.editor.getGraphXml());
         this.context.model.fromString(xml);
     }
 
@@ -198,6 +211,7 @@ class DrawioWidget extends DocumentWidget<Widget> {
     readonly context: DocumentRegistry.Context;
     private _editor : any;
     private _ready = new PromiseDelegate<void>();
+    protected mx: Private.MX;
 }
 
 /**
@@ -216,3 +230,38 @@ class DrawioFactory extends ABCWidgetFactory<DrawioWidget, DocumentRegistry.IMod
         return new DrawioWidget({context, content: new Widget()});
     }
 }
+
+
+/**
+ * A namespace for module-level concerns like loading mxgraph
+ */
+
+namespace Private {
+    export type MX = typeof MXModuleType;
+
+    let _mx: typeof MXModuleType;
+    let _mxLoading: PromiseDelegate<MX>;
+
+    /**
+     * Asynchronously load the mx bundle, or return it if already available
+     */
+    export async function ensureMx(): Promise<MX> {
+        if (_mx)
+        {
+            return _mx;
+        }
+
+        if (_mxLoading)
+        {
+            return await _mxLoading.promise;
+        }
+
+        _mxLoading = new PromiseDelegate();
+        _mx = await import(
+            /* webpackChunkName: "mxgraph" */
+            './mxgraph/javascript/examples/grapheditor/www/modulated.js'
+        );
+        _mxLoading.resolve(_mx);
+        return _mx;
+    }
+}