attempting to fix jupyterlab version of scriptedforms

Author: SimonBiggs

scriptedforms/package.json

@@ -26,6 +26,7 @@
     "build": "rimraf lib && webpack --config webpack.dev.js",
     "build:prod": "rimraf lib && webpack --config webpack.prod.js",
     "build:jlab": "rimraf ./jlab-build && copyfiles -u 1 './src/**/*.{css,html,scss}' ./jlab-build && tsc && yarn package",
+    "watch:jlab": "tsc -w",
     "package": "rimraf simonbiggs-scriptedforms*.tgz && yarn pack",
     "selenium": "./scripts/selenium.sh",
     "test": "yarn --cwd ./e2e e2e",

scriptedforms/src/app.ts

@@ -27,17 +27,21 @@ document.getElementsByTagName('head').item(0).appendChild(userStyle);
 import { Widget } from '@phosphor/widgets';
 import { ServiceManager, ContentsManager } from '@jupyterlab/services';
 import { ScriptedFormsWidget } from './app/widget';
+import { AngularLoader } from './app/phosphor-angular-loader';
+import { AppModule } from './app/app.module';
 
 export function loadApp(): void {
   const serviceManager = new ServiceManager();
   const contentsManager = new ContentsManager();
+  const angularLoader = new AngularLoader<AppModule>(AppModule);
 
   const formWidget = new ScriptedFormsWidget({
     serviceManager,
-    contentsManager
+    contentsManager,
+    angularLoader
   });
 
-  formWidget.content.initiliseScriptedForms();
+  // formWidget.content.initiliseScriptedForms();
   window.onresize = () => { formWidget.update(); };
   Widget.attach(formWidget, document.body);
 }

scriptedforms/src/app/app-error-handler.ts

@@ -40,19 +40,19 @@ import { ErrorHandler } from '@angular/core';
 export class AppErrorHandler extends ErrorHandler {
 
   handleError(error: any) {
-   const errorbox = document.getElementsByClassName('errorbox');
-   if (errorbox.length > 0) {
-    errorbox[0].innerHTML = `<h2>Javascript Error:</h2>
-<p>
-  A Javascript error has occured. This could be due to an error within your
-  ScriptedForms template or an issue with ScriptedForms itself.
-</p>
-<div class="jp-OutputArea-child">
-  <div class="jp-OutputPrompt"></div>
-  <div class="jp-RenderedText" data-mime-type="application/vnd.jupyter.stderr">
-    <pre style="white-space: pre-wrap;">
-  ` + error + '</pre></div></div>';
-   }
+//    const errorbox = document.getElementsByClassName('errorbox');
+//    if (errorbox.length > 0) {
+//     errorbox[0].innerHTML = `<h2>Javascript Error:</h2>
+// <p>
+//   A Javascript error has occured. This could be due to an error within your
+//   ScriptedForms template or an issue with ScriptedForms itself.
+// </p>
+// <div class="jp-OutputArea-child">
+//   <div class="jp-OutputPrompt"></div>
+//   <div class="jp-RenderedText" data-mime-type="application/vnd.jupyter.stderr">
+//     <pre style="white-space: pre-wrap;">
+//   ` + error + '</pre></div></div>';
+//    }
 
    // delegate to the default handler
    super.handleError(error);

scriptedforms/src/app/form-builder-module/form-builder.component.ts

@@ -81,8 +81,9 @@ export class FormBuilderComponent implements OnInit, AfterViewInit {
     this.myMarkdownIt = new MarkdownIt({
       html: true,
       linkify: true,
-      typographer: true
+      typographer: true,
     });
+    this.myMarkdownIt.disable('code')
   }
 
   ngAfterViewInit() {

scriptedforms/src/app/phosphor-angular-loader.ts

@@ -26,7 +26,7 @@ import {
 import {
   ApplicationRef, Type, Injector,
   ComponentFactoryResolver, ComponentRef, NgZone,
-  NgModuleRef
+  // NgModuleRef
 } from '@angular/core';
 
 import {
@@ -67,43 +67,57 @@ export class AngularLoader<M> {
   private componentFactoryResolver: ComponentFactoryResolver;
   ngZone: NgZone;
   private injector: Injector;
+  loaderReady = new PromiseDelegate<void>();
 
-  constructor( ngModuleRef: NgModuleRef<M>) {
-    this.injector = ngModuleRef.injector;
-    this.applicationRef = this.injector.get(ApplicationRef);
-    this.ngZone = this.injector.get(NgZone);
-    this.componentFactoryResolver = this.injector.get(ComponentFactoryResolver);
+  constructor(ngModule: Type<M>) {
+    platformBrowserDynamic().bootstrapModule(ngModule)
+    .then(ngModuleRef => {
+      this.injector = ngModuleRef.injector;
+      this.applicationRef = this.injector.get(ApplicationRef);
+      this.ngZone = this.injector.get(NgZone);
+      this.componentFactoryResolver = this.injector.get(ComponentFactoryResolver);
+
+      this.loaderReady.resolve(null)
+    })
   }
 
-  attachComponent<T>(ngComponent: Type<T>, dom: Element): ComponentRef<T> {
-    let componentRef: ComponentRef<T>;
-    this.ngZone.run(() => {
-      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ngComponent);
-      componentRef = componentFactory.create(this.injector, [], dom);
-      this.applicationRef.attachView(componentRef.hostView);
-    });
-    return componentRef;
+  attachComponent<T>(ngComponent: Type<T>, dom: Element): Promise<ComponentRef<T>> {
+    const attachedComponent = new PromiseDelegate<ComponentRef<T>>();
+    this.loaderReady.promise
+    .then(() => {
+      let componentRef: ComponentRef<T>;
+      this.ngZone.run(() => {
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ngComponent);
+        componentRef = componentFactory.create(this.injector, [], dom);
+        this.applicationRef.attachView(componentRef.hostView);
+
+        attachedComponent.resolve(componentRef)
+      });
+    })
+
+    return attachedComponent.promise;
   }
 }
 
 export class AngularWidget<C, M> extends Widget {
-  angularLoader: AngularLoader<M>;
   ngZone: NgZone;
   componentRef: ComponentRef<C>;
   componentInstance: C;
   componentReady = new PromiseDelegate<void>();
 
-  constructor(ngComponent: Type<C>, ngModule: Type<M>, options?: Widget.IOptions) {
+  constructor(ngComponent: Type<C>, angularLoader: AngularLoader<M>, options?: Widget.IOptions) {
     super(options);
-    platformBrowserDynamic().bootstrapModule(ngModule)
-    .then(ngModuleRef => {
-      this.angularLoader = new AngularLoader(ngModuleRef);
-      this.ngZone = this.angularLoader.ngZone;
-      this.componentRef = this.angularLoader.attachComponent(
+    angularLoader.loaderReady.promise
+    .then(() => {
+      this.ngZone = angularLoader.ngZone;
+      return angularLoader.attachComponent(
         ngComponent, this.node);
+    })
+    .then(componentRef => {
+      this.componentRef = componentRef;
       this.componentInstance = this.componentRef.instance;
       this.componentReady.resolve(undefined);
-    });
+    })
   }
 
   run(func: () => void): void {

scriptedforms/src/app/services/file.service.ts

@@ -64,12 +64,20 @@ export class FileService {
   ) { }
 
   getApplicationBaseUrl() {
-    const jupyterBaseUrl = JSON.parse(document.getElementById('jupyter-config-data').textContent).baseUrl;
-    const application = JSON.parse(document.getElementById('scriptedforms-config-data').textContent).applicationToRun;
-
-    const baseUrl = `${window.location.protocol}//${window.location.host}${jupyterBaseUrl}scriptedforms/${application}/`;
-    console.log(baseUrl);
+    const SF_CONFIG = document.getElementById('scriptedforms-config-data');
+    const JLAB_CONFIG = document.getElementById('jupyter-config-data');
+    
+    let config: {baseUrl: string};
+    
+    if (SF_CONFIG) {
+      config = JSON.parse(SF_CONFIG.textContent);
+    } else {
+      config = JSON.parse(JLAB_CONFIG.textContent);
+    }
 
+    const baseUrl = `${window.location.protocol}//${window.location.host}${config.baseUrl}`;
+    // console.log(baseUrl);
+    
     return baseUrl;
   }
 

scriptedforms/src/app/widget.ts

@@ -21,7 +21,7 @@ import { Toolbar } from '@jupyterlab/apputils';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { PathExt } from '@jupyterlab/coreutils';
 
-import { AngularWidget } from './phosphor-angular-loader';
+import { AngularWidget, AngularLoader } from './phosphor-angular-loader';
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 
@@ -43,6 +43,7 @@ export namespace IScriptedFormsWidget {
   export interface IOptions {
     serviceManager: ServiceManager;
     contentsManager: ContentsManager;
+    angularLoader: AngularLoader<AppModule>;
     context?: DocumentRegistry.Context;
   }
 }
@@ -52,6 +53,7 @@ export namespace IAngularWrapperWidget {
     toolbar: Toolbar<Widget>;
     serviceManager: ServiceManager;
     contentsManager: ContentsManager;
+    angularLoader: AngularLoader<AppModule>;
     context?: DocumentRegistry.Context;
   }
 }
@@ -64,7 +66,8 @@ export class AngularWrapperWidget extends AngularWidget<
   scriptedFormsOptions: IScriptedForms.IOptions;
 
   constructor(options: IAngularWrapperWidget.IOptions) {
-    super(AppComponent, AppModule);
+
+    super(AppComponent, options.angularLoader);
 
     this.scriptedFormsOptions = Object.assign(
       {
@@ -95,8 +98,8 @@ export class AngularWrapperWidget extends AngularWidget<
 
 export class ScriptedFormsWidget extends Widget {
   _context: DocumentRegistry.Context;
-  content: AngularWrapperWidget;
-  toolbar: Toolbar
+  private _content: AngularWrapperWidget;
+  toolbar = new Toolbar();
   id: 'ScriptedForms';
 
   constructor(options: IScriptedFormsWidget.IOptions) {
@@ -109,20 +112,24 @@ export class ScriptedFormsWidget extends Widget {
     this.addClass('scripted-form-widget');
 
     const layout = (this.layout = new BoxLayout());
-    const toolbar = new Toolbar();
-    this.toolbar = toolbar;
-    toolbar.addClass('jp-NotebookPanel-toolbar');
-    toolbar.addClass('custom-toolbar');
-    layout.addWidget(toolbar);
-    BoxLayout.setStretch(toolbar, 0);
+    this.toolbar.addClass('jp-NotebookPanel-toolbar');
+    this.toolbar.addClass('custom-toolbar');
+    layout.addWidget(this.toolbar);
+    BoxLayout.setStretch(this.toolbar, 0);
+
+    const angularWrapperWidgetOptions = Object.assign({ toolbar: this.toolbar }, options);
+
+    this._content = new AngularWrapperWidget(angularWrapperWidgetOptions);
+    this._content.addClass('form-container');
 
-    const angularWrapperWidgetOptions = Object.assign({ toolbar }, options);
+    layout.addWidget(this._content);
+    BoxLayout.setStretch(this._content, 1);
 
-    this.content = new AngularWrapperWidget(angularWrapperWidgetOptions);
-    this.content.addClass('form-container');
+    this._content.initiliseScriptedForms();
+  }
 
-    layout.addWidget(this.content);
-    BoxLayout.setStretch(this.content, 1);
+  get content() {
+    return this._content;
   }
 
   get revealed() {
@@ -136,9 +143,4 @@ export class ScriptedFormsWidget extends Widget {
   onPathChanged(): void {
     this.title.label = PathExt.basename(this._context.path);
   }
-
-  dispose() {
-    this.content.dispose();
-    super.dispose();
-  }
 }

scriptedforms/src/docs/landing-page/landing-page.component.ts

@@ -4,6 +4,8 @@ import { Widget } from '@phosphor/widgets';
 
 import { ServiceManager, ContentsManager } from '@jupyterlab/services';
 import { ScriptedFormsWidget } from '../../app/widget';
+import { AngularLoader } from '../../app/phosphor-angular-loader';
+import { AppModule } from '../../app/app.module';
 
 import * as htmlTemplate from 'html-loader!./landing-page.component.html';
 const template = '' + htmlTemplate;
@@ -55,13 +57,15 @@ export class LandingPageComponent implements AfterViewInit {
   ngAfterViewInit() {
     const serviceManager = new ServiceManager();
     const contentsManager = new ContentsManager();
+    const angularLoader = new AngularLoader<AppModule>(AppModule);
 
     const formWidget = new ScriptedFormsWidget({
       serviceManager,
-      contentsManager
+      contentsManager,
+      angularLoader
     });
 
-    formWidget.content.initiliseScriptedForms();
+    // formWidget.content.initiliseScriptedForms();
 
     window.onresize = () => { formWidget.update(); };
     Widget.attach(formWidget, this.formWrapper.nativeElement);

scriptedforms/src/jupyterlab-extension/jupyterlab-plugin.ts

@@ -7,6 +7,9 @@ import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
 import { ServiceManager, ContentsManager } from '@jupyterlab/services';
 import { InstanceTracker } from '@jupyterlab/apputils';
 
+import { AngularLoader } from '../app/phosphor-angular-loader';
+
+import { AppModule } from '../app/app.module';
 import { ScriptedFormsWidget } from './../app/widget';
 
 
@@ -41,30 +44,31 @@ namespace IScriptedFormsWidgetFactory {
   interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
     serviceManager: ServiceManager;
     contentsManager: ContentsManager;
+    angularLoader: AngularLoader<AppModule>;
   }
 }
 
 export
 class ScriptedFormsWidgetFactory extends ABCWidgetFactory<ScriptedFormsWidget, DocumentRegistry.IModel> {
   serviceManager: ServiceManager;
   contentsManager: ContentsManager;
+  angularLoader: AngularLoader<AppModule>;
 
   constructor(options: IScriptedFormsWidgetFactory.IOptions) {
     super(options);
     this.serviceManager = options.serviceManager;
     this.contentsManager = options.contentsManager;
+    this.angularLoader = options.angularLoader;
   }
 
   protected createNewWidget(context: DocumentRegistry.Context): ScriptedFormsWidget {
     const formWidget = new ScriptedFormsWidget({
       serviceManager: this.serviceManager,
       contentsManager: this.contentsManager,
+      angularLoader: this.angularLoader,
       context: context
     });
-
-    formWidget.context.ready.then(() => {
-      formWidget.content.initiliseScriptedForms();
-    });
+    // formWidget.content.initiliseScriptedForms();
 
     return formWidget;
   }
@@ -73,6 +77,8 @@ class ScriptedFormsWidgetFactory extends ABCWidgetFactory<ScriptedFormsWidget, D
 function activate(
   app: JupyterLab, restorer: ILayoutRestorer, settingRegistry: ISettingRegistry
 ) {
+  const angularLoader = new AngularLoader<AppModule>(AppModule);
+
   app.docRegistry.addFileType({
     name: 'scripted-form',
     mimeTypes: ['text/markdown'],
@@ -88,6 +94,7 @@ function activate(
     readOnly: true,
     serviceManager: app.serviceManager,
     contentsManager: app.serviceManager.contents,
+    angularLoader
   });
 
   app.docRegistry.addWidgetFactory(factory);