Upgrade imjoy-core to 0.13.1 (#357)

* Fix dialog; remove jailed asset url * Update docs about base_frame * bump version * Bump imjoy-core version; add karma spec reporter * bump core version to 0.13.1 * Fix jailed asset url * Remove encoding decoding test
imjoy-team · May 11, 2020 · c2ce968 · c2ce968
1 parent b08b7fb
commit c2ce968
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 60 deletions.
diff --git a/docs/development.md b/docs/development.md
@@ -495,9 +495,11 @@ If you want to show the window as a dialog, then set `"defaults": {"as_dialog":
 #### base_frame
 (**for window plugin only:**) defines a custom url to a html page which will be loaded in the window plugin.
 
-It is mendatory to include `<script src="https://lib.imjoy.io/static/jailed/_frame.js"></script>` in the base_frame html file (e.g. inside `<head>`), and this injected script will enable the communication between the window and the core of ImJoy.
+While you can use any other website url as the `base_frame`, it needs to fullfil the following criterion before Imjoy core can communicate with your custom `base_frame`:
+ 1. The site needs allow embedding, and this is not always enabled because they may have strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), by a `X-Content-Security-Policy` header, or a `<meta>` element in the page. To solve it, you need to add `*.imjoy.io` to the header if you have control over the site.
+ 2. Inside the `base_frame`, `imjoy-rpc` protocol need to be enabled. This can be easily done by following the instructions in the [imjoy-core](https://github.com/imjoy-team/ImJoy-core) repo. Please follow the part about "ImJoy RPC library to your website", you basically need to import the `imjoy-loader`, and load the imjoy RPC library, then export your api which you would like to expose to other ImJoy plugins.
 
-This option allows you load an existing html file as the window, but still connected to ImJoy and other plugins.
+Once you have the above fulfilled, you can integrate a third party website as an ImJoy plugin.
 
 #### runnable
 Defines whether the plugin can be executed by clicking on the plugin menu (By default, all plugins are `runnable`). For helper plugins which do not run by themselves, (e.g. a `native-python` plugin can be called by a `window` plugin and do not necessarily executed by the user directly), setting `"runnable": false` would move down the plugin to the bottom of the plugin menu and made non-clickable.

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "imjoy",
-  "version": "0.10.53",
+  "version": "0.11.0",
   "private": false,
   "description": "ImJoy -- deep learning made easy.",
   "author": "imjoy-team <[email protected]>",
@@ -33,7 +33,7 @@
     "axios": "^0.18.1",
     "dompurify": "^2.0.8",
     "file-saver": "^1.3.3",
-    "imjoy-core": "0.12.7",
+    "imjoy-core": "0.13.1",
     "js-yaml": "^3.13.1",
     "lodash": "^4.17.15",
     "marked": "^0.8.0",
@@ -79,6 +79,7 @@
     "gh-pages": "^2.0.1",
     "husky": "^4.2.3",
     "imjoy-rpc": "^0.1.12",
+    "karma-spec-reporter": "0.0.32",
     "lint-staged": "^10.0.8",
     "mocha": "^5.0.5",
     "mocha-webpack": "^2.0.0-beta.0",

diff --git a/web/src/components/Imjoy.vue b/web/src/components/Imjoy.vue
@@ -1468,7 +1468,7 @@ export default {
       selected_dialog_window: {},
       dialog_window_config: {
         width: "800px",
-        height: "500px",
+        height: "670px",
         draggable: true,
       },
       progress: 0,
@@ -1589,8 +1589,6 @@ export default {
       localStorage.setItem("imjoy_client_id", this.client_id);
     }
 
-    let jailed_asset_url = "https://lib.imjoy.io/";
-
     this.imjoy = new ImJoy({
       imjoy_api: imjoy_api,
       event_bus: this.event_bus,
@@ -1600,7 +1598,7 @@ export default {
       },
       add_window_callback: this.addWindowCallback,
       client_id: this.client_id,
-      jailed_asset_url: jailed_asset_url,
+      jailed_asset_url: "https://lib.imjoy.io/",
     });
 
     this.pm = this.imjoy.pm;
@@ -2824,7 +2822,7 @@ export default {
         .execute(mw.target)
         .then(my => {
           const w = this.pm.joy2plugin(my);
-          if (w && !my.__as_interface__) {
+          if (w && !my._rintf) {
             w.name = w.name || "result";
             w.type = w.type || "imjoy/generic";
             this.createWindow(w);

diff --git a/web/src/components/PluginEditor.vue b/web/src/components/PluginEditor.vue
@@ -493,6 +493,7 @@ export default {
         (plugin.config && plugin.config.type === "window") ||
         plugin.config.type === "web-python-window"
       ) {
+        // TODO: seems __id__ is not assigned anywhere
         this.window_plugin_id = w && w.__id__;
         this.window_plugin_config = config;
       }

diff --git a/web/tests/ImJoy.spec.js b/web/tests/ImJoy.spec.js
@@ -251,9 +251,5 @@ describe("ImJoy.vue", async () => {
     it("should read and write with BrowserFS plugin", async () => {
       expect(await plugin1.api.test_fs()).to.be.true;
     });
-
-    it("should work with custom encoding and decoding", async () => {
-      expect(await plugin1.api.test_encoding_decoding()).to.be.true;
-    });
   });
 });
diff --git a/web/tests/testWebWorkerPlugin1.imjoy.html b/web/tests/testWebWorkerPlugin1.imjoy.html
@@ -44,20 +44,6 @@
     console.log('running in the plugin.')
   }
 
-  _rpcDecode(d){
-    if(d.__rpc_dtype__ === 'my_special_number'){
-      return 'adsfwe02303'
-    }
-    return d
-  }
-
-  async test_encoding_decoding() {
-    const p = await api.getPlugin('Test Web Worker Plugin 2')
-    const ret = await p.square(99)
-    assert(ret === 'adsfwe02303', `The anwser should have been encoded into "adsfwe02303" by _rpcDecode(), not ${ret}`)
-    return true
-  }
-
   async test_register() {
     await api.register({
          "name": "LUT",

diff --git a/web/tests/testWebWorkerPlugin2.imjoy.html b/web/tests/testWebWorkerPlugin2.imjoy.html
@@ -35,12 +35,6 @@
     return arg*arg
   }
 
-  _rpcEncode(d){
-    if(d === 99*99){
-      return {__rpc_dtype__: 'my_special_number'}
-    }
-    return d
-  }
 }
 
 api.export(new ImJoyPlugin())

diff --git a/web/vue.config.js b/web/vue.config.js
@@ -34,13 +34,13 @@ module.exports = {
     port: 8000
   },
   pwa: {
-      // configure the workbox plugin
-      workboxPluginMode: 'InjectManifest',
-      workboxOptions: {
-          // swSrc is required in InjectManifest mode.
-          swSrc: 'src/service-worker.js',
-          exclude: [new RegExp('^[.].*'), new RegExp('.*[.]map$')]
-      }
+    // configure the workbox plugin
+    workboxPluginMode: 'InjectManifest',
+    workboxOptions: {
+      // swSrc is required in InjectManifest mode.
+      swSrc: 'src/service-worker.js',
+      exclude: [new RegExp('^[.].*'), new RegExp('.*[.]map$')]
+    }
   },
   configureWebpack: {
     devtool: 'source-map',
@@ -58,16 +58,20 @@ module.exports = {
         from: path.join(__dirname, "../docs"),
         to: path.join(__dirname, "dist/docs"),
         toType: "dir"
-      },{
+      }, {
         from: path.join(__dirname, "../repo"),
         to: path.join(__dirname, "dist/repo"),
         toType: "dir"
-      },{
+      }, {
         from: path.join(__dirname, "src/pluginParser.js"),
         to: path.join(__dirname, "dist/static/js/pluginParser.js"),
         toType: "file",
       }]),
-      new MonacoWebpackPlugin({output: 'static/vs', languages: ['javascript', 'html', 'css', 'python'], features: ['accessibilityHelp', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'codelens', 'colorDetector', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'find', 'folding', 'fontZoom', 'format', 'goToDefinitionCommands', 'goToDefinitionMouse', 'gotoError', 'gotoLine', 'hover', 'inPlaceReplace', 'inspectTokens', 'iPadShowKeyboard', 'linesOperations', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'wordHighlighter', 'wordOperations', 'wordPartOperations']}),
+      new MonacoWebpackPlugin({
+        output: 'static/vs',
+        languages: ['javascript', 'html', 'css', 'python'],
+        features: ['accessibilityHelp', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'codelens', 'colorDetector', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'find', 'folding', 'fontZoom', 'format', 'goToDefinitionCommands', 'goToDefinitionMouse', 'gotoError', 'gotoLine', 'hover', 'inPlaceReplace', 'inspectTokens', 'iPadShowKeyboard', 'linesOperations', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'wordHighlighter', 'wordOperations', 'wordPartOperations']
+      }),
       new webpack.DefinePlugin({
         //bypass process check, https://github.com/Microsoft/monaco-editor-webpack-plugin/issues/28
         //TODO: remove this when the bug is fixed
@@ -92,14 +96,20 @@ module.exports = {
         frameworks: ['mocha'],
         // list of files / patterns to load in the browser
         files: [
-            // only specify one entry point
-            // and require all tests in there
-            'tests/*.spec.js',
-            { pattern: 'src/*.js', watched: false, included: false, served: true, nocache: false },
+          // only specify one entry point
+          // and require all tests in there
+          'tests/*.spec.js',
+          {
+            pattern: 'src/*.js',
+            watched: false,
+            included: false,
+            served: true,
+            nocache: false
+          },
         ],
 
         proxies: {
-            "/plugin-service-worker.js": "/base/node_modules/imjoy-core/dist/plugin-service-worker.js"
+          "/plugin-service-worker.js": "/base/node_modules/imjoy-core/dist/plugin-service-worker.js"
         },
 
         preprocessors: {
@@ -118,7 +128,15 @@ module.exports = {
         // test results reporter to use
         // possible values: 'dots', 'progress'
         // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['progress'],
+        reporters: ["spec"],
+        specReporter: {
+          maxLogLines: 5, // limit number of lines logged per test
+          suppressErrorSummary: true, // do not print error summary
+          suppressFailed: false, // do not print information about failed tests
+          suppressPassed: false, // do not print information about passed tests
+          suppressSkipped: true, // do not print information about skipped tests
+          showSpecTiming: false // print the time elapsed for each spec
+        },
 
         // web server port
         port: 9876,
@@ -139,9 +157,9 @@ module.exports = {
 
         captureTimeout: 60000,
         browserDisconnectTolerance: 2,
-        browserDisconnectTimeout : 60000,
-        browserNoActivityTimeout : 60000,
+        browserDisconnectTimeout: 60000,
+        browserNoActivityTimeout: 60000,
       }
     }
   }
-}
+}