@jseeio/jsee 0.4.2 → 0.8.0

package/package.json

@@ -1,29 +1,97 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.4.2",
+  "version": "0.8.0",
   "description": "JavaScript Execution Environment",
-  "main": "dist/jsee.js",
-  "unpkg": "dist/jsee.js",
-  "jsdelivr": "dist/jsee.js",
+  "type": "commonjs",
+  "main": "src/cli.js",
+  "exports": {
+    ".": {
+      "browser": "./dist/jsee.core.js",
+      "node": "./src/cli.js",
+      "require": "./src/cli.js",
+      "default": "./dist/jsee.core.js"
+    },
+    "./cli": {
+      "node": "./src/cli.js",
+      "require": "./src/cli.js",
+      "default": "./src/cli.js"
+    },
+    "./core": {
+      "require": "./dist/jsee.core.js",
+      "default": "./dist/jsee.core.js"
+    },
+    "./full": {
+      "require": "./dist/jsee.full.js",
+      "default": "./dist/jsee.full.js"
+    },
+    "./runtime": {
+      "require": "./dist/jsee.runtime.js",
+      "default": "./dist/jsee.runtime.js"
+    },
+    "./dist/jsee.core.js": {
+      "require": "./dist/jsee.core.js",
+      "default": "./dist/jsee.core.js"
+    },
+    "./dist/jsee.full.js": {
+      "require": "./dist/jsee.full.js",
+      "default": "./dist/jsee.full.js"
+    },
+    "./dist/jsee.runtime.js": {
+      "require": "./dist/jsee.runtime.js",
+      "default": "./dist/jsee.runtime.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "unpkg": "dist/jsee.core.js",
+  "jsdelivr": "dist/jsee.core.js",
+  "sideEffects": false,
+  "files": [
+    "bin/",
+    "dist/jsee.core.js",
+    "dist/jsee.full.js",
+    "dist/jsee.runtime.js",
+    "dist/*.png",
+    "dist/*.svg",
+    "src/",
+    "templates/",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
   "private": false,
   "scripts": {
-    "build-dev": "webpack --mode=development --progress --stats-children --env DEVELOPMENT",
-    "build": "webpack --mode=production --progress && webpack --mode=production --progress --env RUNTIME && npm test",
+    "build-dev": "webpack --mode=development --progress --stats-children --env DEVELOPMENT && node scripts/compat-runtime.js",
+    "build-full": "webpack --mode=production --progress --env FULL",
+    "build": "webpack --mode=production --progress && webpack --mode=production --progress --env FULL && node scripts/compat-runtime.js && npm test",
     "watch-dev": "nodemon --watch . --ignore dist,.git --ext vue,js,css,html --exec 'npm run build-dev'",
     "watch": "nodemon --watch . --ignore dist,.git --ext vue,js,css,html --exec 'npm run build-dev && npm run test:basic'",
     "prepublishOnly": "npm run build",
-    "test": "npm run test:unit && npm run test:basic && npm run test:python",
+    "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "jest --config jest.unit.config.js",
-    "test:basic": "jest test/test-basic.test.js --detectOpenHandles",
-    "test:python": "jest test/test-python.test.js --detectOpenHandles",
+    "test:e2e": "npx playwright test test/test-basic.pw.js test/test-inputs.pw.js",
+    "test:basic": "npx playwright test test/test-basic.pw.js",
+    "test:inputs": "npx playwright test test/test-inputs.pw.js",
+    "test:python": "npx playwright test test/test-python.pw.js",
     "test-head": "HEADLESS=false npm test",
-    "lint": "eslint src/ test/"
+    "lint": "eslint src/ test/",
+    "copy-runtime-py": "mkdir -p py/jsee/static && cp dist/jsee.core.js py/jsee/static/jsee.core.js && cp dist/jsee.full.js py/jsee/static/jsee.full.js"
   },
   "bin": {
     "jsee": "./bin/jsee"
   },
   "author": "Anton Zemlyansky",
   "license": "MIT",
+  "keywords": [
+    "jsee",
+    "schema",
+    "runtime",
+    "web-worker",
+    "visualization",
+    "offline"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jseeio/jsee"
@@ -34,18 +102,18 @@
   },
   "dependencies": {
     "@mdi/font": "^6.5.95",
-    "bulma": "^0.9.3",
+    "@observablehq/plot": "^0.6",
     "csv-parse": "^5.6.0",
     "dom-to-image": "^2.6.0",
     "express": "^4.21.2",
     "file-saver": "^2.0.2",
     "filtrex": "^2.2.3",
-    "jsdoc-to-markdown": "^8.0.1",
-    "katex": "^0.16.22",
+    "jsdoc-to-markdown": "^9.1.3",
+    "leaflet": "^1.9",
+    "markdown-it": "^14.2.0",
     "minimist": "^1.2.8",
     "notyf": "^3.10.0",
-    "showdown": "^1.9.1",
-    "showdown-katex": "^0.8.0",
+    "three": "^0.170",
     "vue": "^3.2.47",
     "vue-file-picker": "^0.0.2",
     "vue-style-loader": "^4.1.3",
@@ -56,15 +124,13 @@
     "@babel/core": "^7.21.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.16.5",
+    "@playwright/test": "^1.58.2",
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
     "eslint": "^8.57.1",
-    "expect-puppeteer": "^11.0.0",
     "http-server": "^14.1.1",
     "jest": "^29.7.0",
-    "jest-puppeteer": "^11.0.0",
     "nodemon": "^3.1.10",
-    "puppeteer": "^24.10.2",
     "sass": "^1.83.4",
     "sass-loader": "^13.2.2",
     "source-map-loader": "^4.0.1",

package/src/app.js

@@ -5,21 +5,62 @@
 
 import { createApp, h } from 'vue' // <- resolved in webpack.config based on RUNTIME
 
-import bulmaApp from '../templates/bulma-app.vue'
-import bulmaInput from '../templates/bulma-input.vue'
-import bulmaOutput from '../templates/bulma-output.vue'
+import minimalApp from '../templates/minimal-app.vue'
+import minimalInput from '../templates/minimal-input.vue'
+import minimalOutput from '../templates/minimal-output.vue'
+
+const defaultTheme = {
+  'app': minimalApp,
+  'input': minimalInput,
+  'output': minimalOutput
+}
 
 const components = {
-  'bulma': {
-    'app': bulmaApp,
-    'input': bulmaInput,
-    'output': bulmaOutput
-  }
+  'minimal': defaultTheme,
+  'bulma': defaultTheme // backward compat alias
 }
 
 const filtrex = require('filtrex')
 const JsonViewer = require('vue3-json-viewer').default
-const { sanitizeName, debounce } = require('./utils.js')
+const { sanitizeName, debounce, createValidateFn, runValidation } = require('./utils.js')
+
+const STORAGE_KEY = 'jsee:inputs'
+
+function saveInputsToStorage (inputs) {
+  try {
+    const values = {}
+    inputs.forEach((input, index) => {
+      if (input.type === 'file' || input.type === 'folder' || input.type === 'action' || input.type === 'button') return
+      if (input.type === 'group') return // skip groups for now
+      const key = input.name || `input_${index}`
+      values[key] = input.value
+    })
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(values))
+  } catch (e) { /* quota exceeded or private mode */ }
+}
+
+function loadInputsFromStorage (inputs) {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return false
+    const values = JSON.parse(raw)
+    let restored = false
+    inputs.forEach((input, index) => {
+      if (input.type === 'file' || input.type === 'folder' || input.type === 'action' || input.type === 'button') return
+      if (input.type === 'group') return
+      const key = input.name || `input_${index}`
+      if (typeof values[key] !== 'undefined') {
+        input.value = values[key]
+        restored = true
+      }
+    })
+    return restored
+  } catch (e) { return false }
+}
+
+function clearInputsStorage () {
+  try { localStorage.removeItem(STORAGE_KEY) } catch (e) { /* ignore */ }
+}
 
 function setInputValue (input, value) {
   if (input.type === 'file') {
@@ -35,16 +76,16 @@ function setInputValue (input, value) {
 function resetInputs (inputs, example) {
   inputs.forEach((input, index) => {
     const inputName = input.name ? sanitizeName(input.name) : `input_${index}`
-    if (example && input.name && example[input.name]) {
+    if (example && input.name && typeof example[input.name] !== 'undefined') {
       // Object (unsanitized)
       setInputValue(input, example[input.name])
-    } else if (example && inputName && example[inputName]) {
+    } else if (example && inputName && typeof example[inputName] !== 'undefined') {
       // Object (sanitized)
       setInputValue(input, example[inputName])
     } else if (example && Array.isArray(example) && typeof example[index] !== 'undefined') {
       // Array
       setInputValue(input, example[index])
-    } else if (input.default) {
+    } else if (typeof input.default !== 'undefined') {
       // Default value
       setInputValue(input, input.default)
     } else {
@@ -73,6 +114,27 @@ function resetInputs (inputs, example) {
           input.file = null
           input.value = ''
           break
+        case 'folder':
+          input.value = input.default || []
+          break
+        case 'slider':
+          input.value = input.min || 0
+          break
+        case 'range':
+          input.value = [input.min || 0, input.max || 100]
+          break
+        case 'radio':
+          input.value = input.options ? input.options[0] : ''
+          break
+        case 'toggle':
+          input.value = false
+          break
+        case 'date':
+          input.value = ''
+          break
+        case 'multi-select':
+          input.value = []
+          break
         case 'group':
           resetInputs(input.elements)
           break
@@ -94,6 +156,12 @@ function createVueApp (env, mountedCallback, logMain) {
   // Reset input values to default ones
   resetInputs(dataInit.inputs)
 
+  // Restore saved inputs from localStorage (unless URL params are present or persist: false)
+  const hasUrlParams = new URLSearchParams(window.location.search).toString().length > 0
+  if (env.schema.persist !== false && !hasUrlParams) {
+    loadInputsFromStorage(dataInit.inputs)
+  }
+
   if (!('outputs' in dataInit)) {
     dataInit.outputs = []
   }
@@ -102,6 +170,8 @@ function createVueApp (env, mountedCallback, logMain) {
   dataInit.dataChanged = false
   // Flag for autorun feedback
   dataInit.clickRun = false
+  // Flag for running state (toggled by main.js run/stop)
+  dataInit.running = false
 
   function len(s) {
     return s.length;
@@ -111,6 +181,19 @@ function createVueApp (env, mountedCallback, logMain) {
     extraFunctions: { len }
   }
 
+  // Initialize _error property on all inputs for reactivity
+  dataInit.inputs.forEach(input => {
+    input._error = null
+    if (input.type === 'group' && input.elements) {
+      input.elements.forEach(el => { el._error = null })
+    }
+  })
+
+  // Prepare validation functions for inputs with validate or required
+  const validateFunctions = dataInit.inputs.map(input =>
+    createValidateFn(input, filtrex.compileExpression, filtrexOptions)
+  )
+
   // Prepare functions that determine if inputs should be displayed
   const displayFunctions = dataInit.inputs.map(input => {
     if (input.display && input.display.length) {
@@ -143,30 +226,14 @@ function createVueApp (env, mountedCallback, logMain) {
   // Determine a template and GUI framework
   const framework = (env.schema.design && typeof env.schema.design.framework !== 'undefined')
     ? env.schema.design.framework
-    : 'bulma'
-
-  let template
-  let render
-  if (
-    env.schema.design
-    && env.schema.design.template
-    && (
-      typeof env.schema.design.template === 'string'
-      || env.schema.design.template === false
-    )
-  ) {
-    template = env.schema.design.template
-    render = null
-  } else {
-    template = null //'<vue-app/>'
-    render = () => {
-      return h(components[framework].app)
-    }
+    : 'minimal'
+
+  const render = () => {
+    return h(components[framework].app)
   }
 
   log('Initializing Vue app...')
   const app = createApp({
-    template,
     render,
     data () {
       return dataInit
@@ -179,6 +246,10 @@ function createVueApp (env, mountedCallback, logMain) {
         // Per-input reactivity uses the 'inchange' event from inputs with reactive: true.
         handler: debounce(function (v) {
           this.dataChanged = true
+          if (env.schema.persist !== false) {
+            saveInputsToStorage(this.inputs)
+          }
+          runValidation(this.inputs, validateFunctions)
           if (env.schema.reactive) {
             this.run('reactive')
           }
@@ -199,11 +270,32 @@ function createVueApp (env, mountedCallback, logMain) {
         // Reset input values to default ones
         // If example is provided, use it as a new default
         resetInputs(this.inputs, example)
+        clearInputsStorage()
+        // Clear DOM file inputs so re-uploading the same file triggers change event
         this.$nextTick(() => {
+          const fileInputs = container.querySelectorAll('input[type="file"]')
+          fileInputs.forEach(el => { el.value = '' })
           this.dataChanged = false
         })
+        // Clear dynamic select options (e.g. target populated from worker)
+        this.inputs.forEach(input => {
+          if ((input.type === 'select' || input.type === 'categorical') && input.options && !input._initialOptions) {
+            input._initialOptions = input.default ? undefined : []
+          }
+        })
+        // Clear outputs
+        if (this.outputs) {
+          this.outputs.forEach(output => {
+            if (output.type === 'chat') {
+              output._messages = []
+            } else {
+              output.value = undefined
+            }
+          })
+        }
       },
       run (caller) {
+        if (runValidation(this.inputs, validateFunctions)) return
         this.clickRun = true
         // Catch to prevent unhandled rejection from button/autorun clicks
         env.run(caller).catch(err => console.error('Run error:', err))
@@ -211,6 +303,9 @@ function createVueApp (env, mountedCallback, logMain) {
           this.clickRun = false
         }, 150)
       },
+      stop () {
+        env.cancelCurrentRun()
+      },
       notify (msg) {
         env.notify(msg)
       }