@jseeio/jsee 0.2.3 → 0.2.7

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.2.3",
+  "version": "0.2.7",
   "description": "",
   "main": "dist/jsee.js",
   "private": false,
   "scripts": {
-    "build-dev": "webpack --mode=development --progress",
-    "build": "webpack --mode=production --progress && npx webpack --mode=production --progress --env RUNTIME",
-    "watch": "nodemon --watch . --ignore dist --ext vue,js,css,html --exec 'npm run build-dev'",
-    "prepublishOnly": "npm run build",
-    "test": "tape test.js | faucet"
+    "build-dev": "webpack --mode=development --progress --stats-children --env DEVELOPMENT",
+    "build": "webpack --mode=production --progress && webpack --mode=production --progress --env RUNTIME",
+    "watch": "nodemon --watch . --ignore dist --ext vue,js,css,html --exec 'npm run build-dev && npm test'",
+    "prepublishOnly": "npm run build && npm test",
+    "test": "jest test.js --detectOpenHandles",
+    "test-head": "HEADLESS=false npm test"
   },
   "author": "Anton Zemlyansky",
   "license": "MIT",
@@ -31,10 +32,14 @@
     "@babel/preset-env": "^7.16.5",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
+    "http-server": "^14.0.0",
+    "jest": "^27.4.5",
+    "jest-puppeteer": "^6.0.3",
     "node-sass": "^7.0.0",
     "nodemon": "^2.0.15",
-    "puppeteer": "^1.12.2",
+    "puppeteer": "^1.20.0",
     "sass-loader": "^12.4.0",
+    "source-map-loader": "^3.0.0",
     "style-loader": "^3.3.1",
     "tape": "^4.9.1",
     "terser-webpack-plugin": "^5.3.0",

package/src/app.js

@@ -20,12 +20,7 @@ const components = {
 const filtrex = require('filtrex')
 const JsonViewer = require('vue3-json-viewer').default
 
-function log () {
-  console.log(`[Vue]`, ...arguments)
-}
-
 function resetInputs (inputs) {
-  log('Resetting inputs...')
   inputs.forEach(input => {
     if (input.default) { 
       input.value = input.default 
@@ -65,7 +60,14 @@ function resetInputs (inputs) {
   })
 }
 
-function createVueApp (env, dataInit, mountedCallback) {
+function createVueApp (env, mountedCallback, logMain) {
+  function log () {
+    logMain('[Vue]', ...arguments)
+  }
+
+  // Vue's data is based on schema
+  const dataInit = env.schema
+
   // Reset input values to default ones
   resetInputs(dataInit.inputs)
 
@@ -73,6 +75,11 @@ function createVueApp (env, dataInit, mountedCallback) {
     dataInit.outputs = []
   }
 
+  // Flag that shows if data was changed from initial conditions
+  dataInit.dataChanged = false
+  // Flag for autorun feedback
+  dataInit.clickRun = false
+
   function len(s) {
     return s.length;
   }
@@ -142,8 +149,9 @@ function createVueApp (env, dataInit, mountedCallback) {
         deep: true,
         immediate: false,
         handler (v) {
+          this.dataChanged = true // Used in the reset button
           if (this.model.autorun) {
-            env.run()
+            this.run()
           }
         }
       }
@@ -158,9 +166,16 @@ function createVueApp (env, dataInit, mountedCallback) {
       },
       reset () {
         resetInputs(this.inputs)
+        this.$nextTick(() => {
+          this.dataChanged = false
+        })
       },
       run () {
+        this.clickRun = true
         env.run()
+        setTimeout(() => {
+          this.clickRun = false
+        }, 150)
       },
       notify (msg) {
         env.notify(msg)

package/src/utils.js

@@ -0,0 +1,52 @@
+function getModelFuncJS (model, target, log=console.log) {
+  switch (model.type) {
+    case 'class':
+      log('Init class')
+      const modelClass = new target()
+      return (...a) => {
+        return modelClass[model.method || 'predict'](...a)
+      }
+    case 'async-init':
+      // TODO: Test this
+      log('Function with async init')
+      return target().then(m => {
+        log('> Async init resolved: ', m)
+        return m
+      })
+    default:
+      log('Init function')
+      return target
+  }
+}
+
+function getModelFuncAPI (model, log=console.log) {
+  switch (model.type) {
+    case 'get':
+      return (data) => {
+        const query = new URLSearchParams(data).toString()
+        const finalURL = model.url +'?' + query
+        log('Sending GET request to:', finalURL)
+        const resPromise = fetch(finalURL)
+          .then(response => response.json())
+        return resPromise
+      }
+    case 'post':
+      return (data) => {
+        log('Sending POST request to', this.schema.model.url)
+        const resPromise = fetch(this.schema.model.url, {
+          method: 'POST',
+          headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(data)
+        }).then(response => response.json())
+        return resPromise
+      }
+  }
+}
+
+module.exports = {
+  getModelFuncJS,
+  getModelFuncAPI
+}

package/src/worker.js

@@ -1,11 +1,55 @@
+const utils = require('./utils')
+
 function log () {
   const args = Array.prototype.slice.call(arguments);
   args.unshift('[Worker]')
-  console.log(args)
   postMessage({_status: 'log', _log: args})
 }
 
+function initTF (model) {
+  throw new Error('Tensorflow in worker (not implemented)')
+}
+
+function initPython (model) {
+  throw new Error('Python in worker (not implemented)')
+}
+
+function initJS (model) {
+  log('Init JS')
+  this.container = model.container
+
+  if (model.code) {
+    log('Load code as a string')
+    // https://github.com/altbdoor/blob-worker/blob/master/blobWorker.js
+    importScripts(URL.createObjectURL(new Blob([model.code], { type: 'text/javascript' })))
+  } else if (model.url) {
+    log('Load script from URL:', model.url)
+    importScripts(model.url)
+  } else {
+    log('No script provided')
+  }
+
+
+  // Related:
+  // https://stackoverflow.com/questions/37711603/javascript-es6-class-definition-not-accessible-in-window-global
+  const target = model.type === 'class' 
+    ? eval(model.name)
+    : this[model.name]
+  // Need promise here in case of async init
+  Promise.resolve(utils.getModelFuncJS(model, target, log))
+    .then(m => {
+      postMessage({_status: 'loaded'})
+      this.modelFunc = m
+    })
+}
+
+function initAPI (model) {
+  log('Init API')
+  this.modelFunc = utils.getModelFuncAPI(model, log)
+}
+
 onmessage = function (e) {
+
   var data = e.data
   log('Received message of type:', typeof data)
 
@@ -14,67 +58,30 @@ onmessage = function (e) {
       INIT MESSAGE
     */
     let model = data
+    log('Init...')
 
-    if (model.type === 'py') {
-      // Python with Pyodide
-      importScripts('https://pyodide.cdn.iodide.io/pyodide.js')
-      // Check when all's loaded
-      /*
-      TODO: Implement same loaded as port
-      let pyCheck = setInterval(() => {
-        if (self.pyodide && self.pyodide.runPythonAsync && this.model && this.model.length) {
-          console.log('[Worker] Pyodide lib and model loaded. Try running to preload all imports')
-          self.pyodide.runPythonAsync(this.model, () => {})
-            .then((res) => {
-              postMessage({_status: 'loaded'})
-            })
-            .catch((err) => {
-              postMessage({_status: 'loaded'})
-            })
-          clearInterval(pyCheck)
-        }
-      }, 500)
-      */
-    } else {
-      // Javascript
-      this.container = model.container
-
-      if (model.code) {
-        log('Load code from schema')
-        // https://github.com/altbdoor/blob-worker/blob/master/blobWorker.js
-        importScripts(URL.createObjectURL(new Blob([model.code], { type: 'text/javascript' })))
-      } else if (model.url) {
-        log('Load script from URL:', model.url)
-        importScripts(model.url)
-      } else {
-        log('No script provided')
-      }
-
-      if (model.type === 'class') {
-        log('[Worker] Init class')
-        // this.modelFunc = (new this[model.name]())[model.method || 'predict']
-
-        const modelClass = new this[model.name]()
-        this.modelFunc = (...a) => {
-          return modelClass[model.method || 'predict'](...a)
-        }
-      } else if (model.type === 'async-init') {
-        log('Init function with promise')
-        log(this[model.name])
-        this[model.name]().then((m) => {
-          log('Async init resolved: ', m)
-          this.modelFunc = m
-        })
-      } else {
-        log('Init function')
-        this.modelFunc = this[model.name]
-      }
-
-      postMessage({_status: 'loaded'})
+    switch (model.type) {
+      case 'tf':
+        initTF(model)
+        break
+      case 'py':
+        initPython(model)
+        break
+      case 'function':
+      case 'class':
+      case 'async-init':
+      case 'async-function':
+        initJS(model)
+        break
+      case 'get':
+      case 'post':
+        initAPI(model)
+        break
     }
   } else {
     /*
-      CALL MESSAGE
+    :w
+    CALL MESSAGE
     */
     var res
     if (typeof this.modelFunc === 'string') {

package/templates/bulma-app.vue

@@ -26,6 +26,7 @@
       justify-content: center;
     }
 
+
     .card-header {
       box-shadow: none;
       border-bottom: 1px solid #ececec;
@@ -50,6 +51,73 @@
         background-color: whitesmoke;
       }
     }
+
+    .card-footer {
+      /* background: linear-gradient(62deg, rgba(0,171,209,1) 0%, rgba(0,209,178,1) 100%); */
+      background: linear-gradient(90deg, #4395d0 0%, #00d1b2 100%);
+    }
+
+    .card-footer.reset {
+      background: linear-gradient(90deg, #ff577f 0%, #4395d0 50%, #00d1b2 100%);
+    }
+
+    .card-footer .button {
+      background: none;
+      padding: .75rem 1.5rem;
+      border: none !important;
+      border-radius: .25rem !important;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    .reset-button {
+      justify-content: left;
+    }
+
+    .reset-button:hover {
+      background-color: transparent !important;
+      background: linear-gradient(90deg, #ff3a56 0%, #fff0 80%);
+      box-shadow: -5px 0px 5px -2px #fd4c7e30;
+    }
+
+    .card-footer .run-button {
+      border-left: 1px dashed white;
+      justify-content: right;
+    }
+
+    .card-footer .run-button:hover,{
+      background-color: transparent !important;
+      background: linear-gradient(270deg, #02dbb2 0%, #fff0 80%);
+      box-shadow: 5px 0px 5px -2px #48ffd43b;
+    }
+
+    .card-footer .run-button.running .run-icon {
+      color: #016c5c !important;
+    }
+
+    .field {
+      margin-bottom: 5px;
+    }
+
+    .input, .textarea, .select select {
+      border-color: #e8e8e8;
+      border-top-left-radius: 0;
+    }
+
+    .input:focus, .textarea:focus, .select select:focus, .is-focused.input, .is-focused.textarea, .select select.is-focused, .input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active {
+      border-color: #7ab8e6;
+      box-shadow: 0 0 0 0.125em rgba(72, 139, 199, 0.25);
+    }
+
+    #inputs .field > label:first-child {
+      background: #f2f2f2;
+      padding: 1px 5px;
+      margin-top: 2px;
+      display: inline-block;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+
   }
 </style>
 <template>
@@ -73,21 +141,22 @@
               <pre v-if="$parent.model.debug">{{ $parent.inputs }}</pre>
               <!-- <button class="button is-primary" id="run"><span>▸</span>&nbsp;&nbsp;Run</button> -->
             </div>
-            <footer class="card-footer">
+            <footer class="card-footer" v-bind:class="{ reset: $parent.dataChanged }">
               <button 
                 v-on:click="$parent.reset()"
-                v-if="$parent.inputs && $parent.inputs.length > 0"
-                class="button icon card-footer-item is-danger is-small"
+                v-if="$parent.inputs && $parent.inputs.length > 0 && $parent.dataChanged"
+                class="button reset-button icon card-footer-item is-danger is-small"
               >
-                <span class="has-text-danger-dark">✕</span>
+                <span class="rest-icon has-text-danger-dark">✕</span>
                 <span>&nbsp; Reset</span>
               </button>
               <button 
                 v-on:click="$parent.run()" 
-                class="button icon card-footer-item is-primary is-small"
+                class="button run-button icon card-footer-item is-primary is-small"
+                v-bind:class="{ running: $parent.clickRun }"
               >
-                <span class="has-text-primary-dark">▸</span>
-                <span>&nbsp; Run</span>
+                <span>&nbsp; Run &nbsp;</span>
+                <span class="run-icon has-text-primary-dark">▸</span>
               </button>
             </footer>
           </div>

package/templates/bulma-output.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card mb-5" v-if="output.value">
+  <div class="card mb-5" v-if="!(typeof output.value === 'undefined')">
     <header class="card-header">
       <p class="card-header-title is-size-6" v-if="output.name">
         {{ output.name }}
@@ -23,12 +23,6 @@
         <pre>{{ output.value }}</pre>
       </div>
     </div>
-    <!-- 
-    <footer class="card-footer" v-if="output.filename">
-      <a v-on:click="save()" class="card-footer-item">Save</a>
-      <a v-on:click="copy()" class="card-footer-item">Copy</a>
-    </footer>
-    -->
   </div>
 </template>
 

package/test/code.html

@@ -0,0 +1,25 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    function sum (a, b) {
+      return a + b
+    }
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "sum",
+          "type": "function",
+          "container": "args",
+          "code": sum,
+          "autorun": true,
+          "worker": false
+        },
+        "inputs": [
+          { "name": "a", "type": "int", "default": 100 },
+          { "name": "b", "type": "int", "default": 42 }
+        ]
+      }
+    })
+  </script>
+</html>

package/test/codew.html

@@ -0,0 +1,25 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    function sum (a, b) {
+      return a + b
+    }
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "sum",
+          "type": "function",
+          "container": "args",
+          "code": sum,
+          "autorun": true,
+          "worker": true
+        },
+        "inputs": [
+          { "name": "a", "type": "int", "default": 100 },
+          { "name": "b", "type": "int", "default": 42 }
+        ]
+      }
+    })
+  </script>
+</html>

package/test/example-class.js

@@ -0,0 +1,8 @@
+class Doubler {
+  constructor() {
+    this.a = 2
+  }
+  double(b) {
+    return this.a * b
+  }
+}

package/test/example-sum.js

@@ -0,0 +1,3 @@
+function sum (a, b) {
+  return a + b
+}

package/test/minimal.html

@@ -0,0 +1,14 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    new JSEE({
+      schema: {
+        'model': function (a, b) {
+          return a * b
+        }
+      },
+      container: 'jsee-container'
+    })
+  </script>
+</html>

package/test/minimal1.html

@@ -0,0 +1,13 @@
+<!-- Minimal example -->
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>window.JSEE || document.write('<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@latest/dist/jsee.runtime.js">\x3C/script>')</script>
+  <script>window.JSEE || document.write('<script src="https://unpkg.com/@jseeio/jsee@latest/dist/jsee.runtime.js">\x3C/script>')</script>
+  <script>
+    function mul (a, b) {
+      return a * b
+    }
+    new JSEE(mul, '#jsee-container')
+  </script>
+</html>

package/test/minimal2.html

@@ -0,0 +1,15 @@
+<!-- Minimal example -->
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>window.JSEE || document.write('<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@latest/dist/jsee.runtime.js">\x3C/script>')</script>
+  <script>window.JSEE || document.write('<script src="https://unpkg.com/@jseeio/jsee@latest/dist/jsee.runtime.js">\x3C/script>')</script>
+  <script>
+    function mul (a, b) {
+      return a * b
+    }
+    new JSEE({
+      model: mul
+    }, '#jsee-container')
+  </script>
+</html>

package/test/minimal3.html

@@ -0,0 +1,10 @@
+<!-- Minimal example -->
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>window.JSEE || document.write('<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@latest/dist/jsee.runtime.js">\x3C/script>')</script>
+  <script>window.JSEE || document.write('<script src="https://unpkg.com/@jseeio/jsee@latest/dist/jsee.runtime.js">\x3C/script>')</script>
+  <script>
+    new JSEE(function (a, b) { return a * b }, '#jsee-container')
+  </script>
+</html>

package/test/minimal4.html

@@ -0,0 +1,22 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "div",
+          "code": "function div (a) { ruturn a / 2 }"
+        },
+        "inputs": [
+          {
+            "name": "a",
+            "type": "int",
+            "value": 0
+          }
+        ]
+      },
+      container: '#jsee-container'
+    })
+  </script>
+</html>

package/test/string.html

@@ -0,0 +1,26 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "sum",
+          "type": "function",
+          "container": "args",
+          "code": `
+            function sum (a, b) {
+              return a + b
+            }
+          `,
+          "autorun": true,
+          "worker": false
+        },
+        "inputs": [
+          { "name": "a", "type": "int", "default": 100 },
+          { "name": "b", "type": "int", "default": 42 }
+        ]
+      }
+    })
+  </script>
+</html>

package/test/stringw.html

@@ -0,0 +1,29 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "sum",
+          "type": "function",
+          "container": "args",
+          "code": `
+            function sum (a, b) {
+              return a + b
+            }
+          `,
+          "autorun": true,
+          "worker": true
+        },
+        "inputs": [
+          { "name": "a", "type": "int", "default": 100 },
+          { "name": "b", "type": "int", "default": 42 }
+        ]
+      },
+      container: '#jsee-container',
+      verbose: false
+    })
+  </script>
+</html>

package/test/sum.schema.json

@@ -0,0 +1,17 @@
+{
+  "model": {
+    "name": "sum",
+    "type": "function",
+    "title": "title",
+    "description": "description",
+    "container": "args",
+    "url": "example-sum.js",
+    "autorun": true,
+    "worker": false
+  },
+  "inputs": [
+    { "name": "a", "type": "int", "default": 100 },
+    { "name": "b", "type": "int", "default": 42 }
+  ]
+}
+