npm - @jseeio/jsee - Versions diffs - 0.2.6 → 0.2.7 - Mend

@jseeio/jsee 0.2.6 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CHANGELOG.md +4 -18
package/README.md +53 -28
package/dist/jsee.js +1 -1
package/dist/jsee.runtime.js +1 -1
package/{load.html → load/index.html} +12 -7
package/main.js +59 -25
package/package.json +1 -1
package/templates/bulma-app.vue +20 -2
package/templates/bulma-output.vue +1 -7
package/test/minimal1.html +13 -0
package/test/minimal2.html +15 -0
package/test/minimal3.html +10 -0
package/test/minimal4.html +22 -0
package/test/sumw.schema.json +0 -2
package/test.js +43 -4
package/404.html +0 -22

package/{load.html → load/index.html} RENAMED Viewed

@@ -4,13 +4,21 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>JSEE Schema Loader</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      #jsee-container {
+        max-width: 1100px;
+        margin: auto;
+      }
+    </style>
   </head>
   <body>
     <div id="jsee-container"></div>
-    <div id="txt-container">
-      <p>You can use this script for testing purposes. Placing your apps in the <b>apps</b> folder (e.g. <code>./apps/myapp</code> will make it possible to load it with <code>load.html?s=myapp</code> </p>
-    </div>
-    <script src="dist/jsee.js" type="text/javascript"></script>
+    <script src="/dist/jsee.js" type="text/javascript"></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>
       var params = new URLSearchParams(window.location.search)
       var schemaStr = params.get('s')
@@ -26,9 +34,6 @@
           container: document.getElementById('jsee-container'),
           schema: schema
         })
-      } else {
-        document.getElementById('port-container').style.display = 'none'
-        document.getElementById('txt-container').style.display = 'block'
       }
     </script>
   </body>

package/main.js CHANGED Viewed

@@ -48,9 +48,17 @@ function isObject (item) {
 }
 function getName (code) {
-  const words = code.split(' ')
-  const functionIndex = words.findIndex((word) => word == 'function')
-  return words[numberIndex + 1]
+  switch (typeof code) {
+    case 'function':
+      return code.name
+    case 'string':
+      const words = code.split(' ')
+      const functionIndex = words.findIndex((word) => word == 'function')
+      const name = words[functionIndex + 1]
+      return name.includes('(') ? undefined : name
+    default:
+      return undefined
+  }
 }
 // Return input value
@@ -66,7 +74,7 @@ function getValue (input) {
   }
 }
-function getType (model) {
+function getModelType (model) {
   if (model.code && typeof model.code === 'string' && model.code.split(' ').map(v => v.trim()).includes('def')) {
     return 'py'
   } else if (model.url) {
@@ -103,28 +111,48 @@ function getFunctionContainer (target) {
 }
 export default class JSEE {
-  constructor (params, alt) {
-    // Check if JSEE was initialized with 2 args rather than 1 obj
-    if (('model' in params) || !(typeof alt === 'undefined')) {
+  constructor (params, alt1, alt2) {
+    // Check if JSEE was initialized with args rather than with a params object
+    if (('model' in params) || (typeof params === 'string') || (typeof params === 'function') || !(typeof alt === 'undefined')) {
       params = {
         'schema': params,
-        'container': alt
+        'container': alt1,
+        'verbose': alt2
       }
     }
+    // Set global verbose flag
     verbose = !(params.verbose === false)
-    log('Initializing JSEE with parameters: ', params)
+    // Previous naming
     params.schema = params.schema || params.config
+    log('Initializing JSEE with parameters: ', params)
     this.params = params
     this.__version__ = VERSION
     // Get schema then initialize a new environment
-    if (params.schema) {
-      if (typeof params.schema === 'object') {
+    switch (typeof params.schema) {
+      case 'object':
         log('Received schema as object')
+        if (typeof params.schema.model === 'function') {
+          params.schema.model = {
+            code: params.schema.model
+          }
+        }
+        this.init(params.schema)
+        break
+      case 'function':
+        log('Received schema as function')
+        params.schema = {
+          model: {
+            code: params.schema,
+          }
+        }
         this.init(params.schema)
-      } else if (typeof params.schema === 'string') {
+        break
+      case 'string':
         log('Received schema as string')
         this.schemaUrl = params.schema.indexOf('json') ? params.schema : params.schema + '.json'
         fetch(this.schemaUrl)
@@ -136,7 +164,10 @@ export default class JSEE {
           .catch((err) => {
             console.error(err)
           })
-      }
+        break
+      default:
+        log('No schema provided')
+        notyf.error('No schema provided')
     }
   }
@@ -170,12 +201,6 @@ export default class JSEE {
             log('Loaded code from:', url)
             resolve(res)
           })
-      } else if (typeof schema === 'function') {
-        log('Code is: schema')
-        resolve(schema)
-      } else if (typeof schema.model === 'function') {
-        log('Code is: schema.model')
-        resolve(schema.model)
       } else if (!(typeof schema.model.code === 'undefined')) {
         log('Code is: schema.model.code')
         resolve(schema.model.code)
@@ -222,13 +247,17 @@ export default class JSEE {
     // Infer model type
     if (typeof schema.model.type === 'undefined') {
-      schema.model.type = getType(schema.model)
+      schema.model.type = getModelType(schema.model)
     }
     // Update model name if absent
-    if ((typeof schema.model.name === 'undefined') && (schema.model.url) && (schema.model.url.includes('.js'))) {
-      schema.model.name = schema.model.url.split('/').pop().split('.')[0]
-      log('Use model name from url: ', schema.model.name)
+    if (typeof schema.model.name === 'undefined'){
+      if ((schema.model.url) && (schema.model.url.includes('.js'))) {
+        schema.model.name = schema.model.url.split('/').pop().split('.')[0]
+        log('Use model name from url: ', schema.model.name)
+      } else if (schema.model.code) {
+        schema.model.name = getName(schema.model.code)
+      }
     }
     // At this point we have all code in model.code or api
@@ -372,11 +401,16 @@ export default class JSEE {
     if (this.schema.model.worker) {
       // Worker: Initialize worker with the model
-      if (typeof this.schema.model.code !== 'string') {
-        // 2 -> 1
+      // 2 -> 1
+      if (typeof this.schema.model.code === 'function') {
         log('Convert code in schema to string for WebWorker')
         this.schema.model.code = this.schema.model.code.toString()
       }
+      // Wrap anonymous functions
+      if (!this.schema.model.name) {
+        this.schema.model.code = `function anon () { return (${this.schema.model.code})(...arguments) }`
+        this.schema.model.name = 'anon'
+      }
       this.worker.postMessage(this.schema.model)
     } else {
       // Main: Initialize model in main window

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "",
   "main": "dist/jsee.js",
   "private": false,

package/templates/bulma-app.vue CHANGED Viewed

@@ -65,9 +65,9 @@
       background: none;
       padding: .75rem 1.5rem;
       border: none !important;
+      border-radius: .25rem !important;
       font-size: 14px;
       font-weight: 400;
-      border-radius: 0;
     }
     .reset-button {
@@ -76,7 +76,8 @@
     .reset-button:hover {
       background-color: transparent !important;
-      background: linear-gradient(90deg, #ff3a56 0%, #fff0 80%)
+      background: linear-gradient(90deg, #ff3a56 0%, #fff0 80%);
+      box-shadow: -5px 0px 5px -2px #fd4c7e30;
     }
     .card-footer .run-button {
@@ -87,6 +88,7 @@
     .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 {
@@ -99,7 +101,23 @@
     .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>

package/templates/bulma-output.vue CHANGED Viewed

@@ -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/minimal1.html ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/sumw.schema.json CHANGED Viewed

@@ -2,8 +2,6 @@
   "model": {
     "name": "sum",
     "type": "function",
-    "title": "title",
-    "description": "description",
     "container": "args",
     "url": "example-sum.js",
     "autorun": true,

package/test.js CHANGED Viewed

@@ -3,9 +3,9 @@ require('expect-puppeteer')
 page.setDefaultTimeout(1000)
 const port = 8080
-const urlSchema = (name) => `http://localhost:${port}/load.html?s=/test/${name}.schema.json`
+const urlSchema = (name) => `http://localhost:${port}/load/?s=/test/${name}.schema.json`
 const urlHTML = (name) => `http://localhost:${port}/test/${name}.html`
-const urlQuery = (schema) => `http://localhost:${port}/load.html?s=${JSON.stringify(schema)}`
+const urlQuery = (schema) => `http://localhost:${port}/load/?s=${JSON.stringify(schema)}`
 describe('Initial test', () => {
   beforeAll(async () => {
@@ -44,13 +44,13 @@ describe('Initial test (worker)', () => {
   })
 })
-describe('Some edge cases', () => {
+describe('Minimal examples', () => {
   const schema = {
     'model': {
       'code': 'function (a, b) { return a / b }', // TODO: check '+'
     }
   }
-  test('Minimal', async () => {
+  test('Code only (text) (main window)', async () => {
     schema.model.worker = false
     await page.goto(urlQuery(schema))
     await expect(page).toFill('#a', '100')
@@ -58,6 +58,27 @@ describe('Some edge cases', () => {
     await expect(page).toClick('button', { text: 'Run' })
     await expect(page).toMatch('25')
   })
+  test('Code instead of schema (function)', async () => {
+    await page.goto(urlHTML('minimal1'))
+    await expect(page).toFill('#a', '100')
+    await expect(page).toFill('#b', '4')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('400')
+  })
+  test('Code instead of model (function)', async () => {
+    await page.goto(urlHTML('minimal2'))
+    await expect(page).toFill('#a', '100')
+    await expect(page).toFill('#b', '4')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('400')
+  })
+  test('Code instead of schema (anonymous function)', async () => {
+    await page.goto(urlHTML('minimal3'))
+    await expect(page).toFill('#a', '100')
+    await expect(page).toFill('#b', '4')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('400')
+  })
 })
 describe('Load code directly', () => {
@@ -119,3 +140,21 @@ describe('Classes', () => {
     await expect(page).toMatch('200')
   })
 })
+describe('Some edge cases', () => {
+  test('Result is zero', async () => {
+    const schema = {
+      'model': {
+        'code': 'function mul (a, b) { return a * b }',
+      }
+    }
+    schema.model.worker = false
+    await page.goto(urlQuery(schema))
+    await expect(page).toFill('#a', '0')
+    await expect(page).toFill('#b', '0')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('Copy')
+  })
+})

package/404.html DELETED Viewed

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Port</title>
-    <script type="text/javascript">
-      var segmentCount = 1;
-      var l = window.location;
-      l.replace(
-        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
-        l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?s=' +
-        l.pathname.slice(1).split('/').slice(segmentCount).join('').replace(/&/g, '~and~') +
-        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-        l.hash
-      );
-    </script>
-  </head>
-  <body>
-  </body>
-</html>