@jseeio/jsee 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "JavaScript Execution Environment",
   "main": "dist/jsee.js",
   "unpkg": "dist/jsee.js",
@@ -10,12 +10,15 @@
     "build-dev": "webpack --mode=development --progress --stats-children --env DEVELOPMENT",
     "build": "webpack --mode=production --progress && webpack --mode=production --progress --env RUNTIME && npm test",
     "watch": "nodemon --watch . --ignore dist,.git --ext vue,js,css,html --exec 'npm run build-dev && npm run test:basic'",
-    "prepublishOnly": "npm run build && npm test",
+    "prepublishOnly": "npm run build",
     "test": "npm run test:basic && npm run test:python",
     "test:basic": "jest test/test-basic.test.js --detectOpenHandles",
     "test:python": "jest test/test-python.test.js --detectOpenHandles",
     "test-head": "HEADLESS=false npm test"
   },
+  "bin": {
+    "jsee": "./bin/jsee"
+  },
   "author": "Anton Zemlyansky",
   "license": "MIT",
   "repository": {
@@ -31,9 +34,13 @@
     "bulma": "^0.9.3",
     "csv-parse": "^4.6.1",
     "element-plus": "^1.3.0-beta.1",
+    "express": "^4.19.2",
     "file-saver": "^2.0.2",
     "filtrex": "^2.2.3",
+    "jsdoc-to-markdown": "^8.0.1",
+    "minimist": "^1.2.8",
     "notyf": "^3.10.0",
+    "showdown": "^2.1.0",
     "vue": "^3.2.47",
     "vue-style-loader": "^4.1.3",
     "vue3-json-viewer": "^2.2.2",

package/src/main.js

@@ -136,6 +136,7 @@ export default class JSEE {
     verbose = !(params.verbose === false)
     this.container = params.container
     this.schema = params.schema || params.config // Previous naming
+    this.utils = utils
     this.__version__ = VERSION
 
     // Check if schema is provided
@@ -196,8 +197,20 @@ export default class JSEE {
     // Check if schema is a string (url to json)
     if (typeof this.schema === 'string') {
       this.schemaUrl = this.schema.indexOf('json') ? this.schema : this.schema + '.json'
-      this.schema = await fetch(this.schemaUrl)
-      this.schema = await this.schema.json()
+
+      // Check if schema is present in the hidden DOM element
+      const schema = utils.loadFromDOM(this.schemaUrl)
+      if (schema) {
+        // Schema block found in the hidden element, use its content
+        this.schema = JSON.parse(schema);
+        log(`Loaded schema from the hidden DOM element for ${this.schemaUrl}:`, this.schema);
+      } else {
+        // Fetch schema from the URL
+        log('Fetching schema from:', this.schemaUrl)
+        this.schema = await fetch(this.schemaUrl)
+        this.schema = await this.schema.json()
+        log('Loaded schema from URL:', this.schema)
+      }
     }
 
     // Check if schema is a function (model)
@@ -264,14 +277,22 @@ export default class JSEE {
 
       // Load code if url is provided
       if (m.url && (m.url.includes('.js') || m.url.includes('.py'))) {
-        // Update model URL if needed
-        if (!m.url.includes('/') && this.schemaUrl && this.schemaUrl.includes('/')) {
-          m.url = window.location.protocol + '//' + window.location.host + this.schemaUrl.split('/').slice(0, -1).join('/') + '/' + m.url
-          log(`Changed the old model URL to ${m.url} (based on the schema URL)`)
+        // Try to get the code from a hidden DOM element first
+        const modelCode = utils.loadFromDOM(m.url)
+        if (modelCode) {
+          // Code block found in the hidden element, use its content
+          m.code = modelCode
+          log(`Loaded code from the hidden DOM element for ${m.url}`);
+        } else {
+          // Update model URL if needed
+          if (!m.url.includes('/') && this.schemaUrl && this.schemaUrl.includes('/')) {
+            m.url = window.location.protocol + '//' + window.location.host + this.schemaUrl.split('/').slice(0, -1).join('/') + '/' + m.url
+            log(`Changed the old model URL to ${m.url} (based on the schema URL)`)
+          }
+          log('Loaded code from:', m.url)
+          m.code = await fetch(m.url)
+          m.code = await m.code.text()
         }
-        log('Loaded code from:', m.url)
-        m.code = await fetch(m.url)
-        m.code = await m.code.text()
       }
 
       // Update model name if absent
@@ -295,10 +316,26 @@ export default class JSEE {
         m.type = getModelType(m)
       }
 
-
+      // Load imports from hidden DOM element
+      if (m.imports && Array.isArray(m.imports) && m.imports.length) {
+        for (let [i, imp] of m.imports.entries()) {
+          if (typeof imp === 'string') {
+            // Convert string to object
+            m.imports[i] = {
+              url: imp
+            }
+            imp = m.imports[i]
+          }
+          if (!m.type.includes('py')) {
+            imp.url = utils.getUrl(imp.url) 
+            imp.code = utils.loadFromDOM(imp.url)
+          }
+        }
+      }
+      console.log('Imports:', m.imports)
     } // end of model-loop
 
-    log('Model initialized, size:', this.model.length)
+    log('Models initialized:', this.model.length)
   }
 
   async initInputs () {
@@ -473,7 +510,7 @@ export default class JSEE {
     await utils.importScripts(['https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js'])
     const pyodide = await loadPyodide()
     if (model.imports && Array.isArray(model.imports) && model.imports.length) {
-      await pyodide.loadPackage(model.imports)
+      await pyodide.loadPackage(model.imports.url)
     } else {
       await pyodide.loadPackagesFromImports(model.code)
     }
@@ -532,7 +569,7 @@ export default class JSEE {
       this.worker.postMessage(this.schema.model)
     } else {
       // Main:
-      this.modelFunc = utils.getModelFuncAPI(model, log)
+      return utils.getModelFuncAPI(this.schema.model, log)
     }
   }
 
@@ -675,4 +712,94 @@ export default class JSEE {
       }]
     }
   }
+
+  async download (title='output') {
+    // Cache the model
+    const clone = document.cloneNode(true)
+
+    // Change #download-btn to 'Offline: version'
+    const downloadBtn = clone.getElementById('download-btn')
+    downloadBtn.textContent = 'Offline: latest'
+    downloadBtn.disabled = true
+    downloadBtn.style.cursor = 'not-allowed'
+
+    let hiddenElement = clone.getElementById('hidden-storage');
+    if (!hiddenElement) {
+      hiddenElement = clone.createElement('div');
+      hiddenElement.style.display = 'none'; // Make it hidden
+      hiddenElement.id = 'hidden-storage'; // Assign an ID
+      clone.body.prepend(hiddenElement)
+    }
+
+    function storeInHiddenElement (url, value) {
+      const element = clone.createElement('script')
+      element.type = 'text/plain' // Make it non-executable
+      element.style.display = 'none' // Make it hidden
+      element.setAttribute('data-src', url) // Use data attribute for key
+      element.textContent = typeof value === 'object' ? JSON.stringify(value) : value
+      hiddenElement.appendChild(element)
+      console.log('[Hidden store] Stored:', url)
+    }
+
+    // Remove Google Analytics script tags
+    try {
+      clone.getElementById('ga-src').remove()
+      clone.getElementById('ga-body').remove()
+    } catch (error) {
+      console.error('Error removing GA script tags:', error.message)
+    }
+
+    console.log('Caching schema:', env.schema)
+    storeInHiddenElement(env.schemaUrl, env.schema)
+
+    console.log('Caching models:', env.model)
+    for (const model of env.model) {
+      storeInHiddenElement(model.url, model.code)
+      // Iterate over imports
+      if (model.imports) {
+        for (let imp of model.imports) {
+          // Store the import
+          const response = await fetch(imp.url)
+          const content = await response.text()
+          storeInHiddenElement(imp.url, content)
+          // Remove any src-based script tags with the same URL
+          const script = clone.querySelector('script[src="' + imp.url + '"]')
+          if (script) {
+            script.remove()
+          }
+        }
+      }
+    }
+
+    // append dummy src script for webpack fix
+    // const dummyScript = document.createElement('script')
+    // dummyScript.src = 'https://example.com/dummy.js'
+    // clone.body.appendChild(dummyScript)
+
+    // Find all external script tags and replace them with inline script tags
+    const externalScripts = Array.from(clone.querySelectorAll('script[src]'))
+    for (const script of externalScripts) {
+      try {
+        const response = await fetch(script.src);
+        if (!response.ok) throw new Error('Network response was not ok for script:' + script.src);
+        const content = await response.text()
+        const inlineScript = document.createElement('script')
+        inlineScript.textContent = content
+        inlineScript.setAttribute('data-src', script.src)
+        script.parentNode.replaceChild(inlineScript, script)
+      } catch (error) {
+        console.error("Error fetching script:", error.message);
+      }
+    }
+    // Prepare the HTML for download and trigger the download
+    const html = '<!DOCTYPE html>\n' + clone.documentElement.outerHTML
+    console.log(html)
+    const blob = new Blob([html], { type: 'text/html' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = title + '.html'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
 }

package/src/utils.js

@@ -57,24 +57,49 @@ function getUrl (url) {
   return newUrl
 }
 
-function importScriptAsync (url, async=true) {
-  url = getUrl(url)
+function loadFromDOM (url) {
+  const scriptElement = document.querySelector(`script[data-src="${url}"]`)
+  if (scriptElement) {
+    return scriptElement.textContent
+  } else {
+    return null
+  }
+}
+
+function importScriptAsync (imp, async=true) {
   return new Promise((resolve, reject) => {
     try {
       const scriptElement = document.createElement('script')
       scriptElement.type = 'text/javascript'
-      scriptElement.async = async
-      scriptElement.src = url
-      scriptElement.addEventListener('load', (ev) => {
-        resolve({ status: true })
-      })
-      scriptElement.addEventListener('error', (ev) => {
-        reject({
-          status: false,
-          message: `Failed to import ＄{url}`
+      if (imp.code) {
+        // Create script element from import.code
+        scriptElement.textContent = imp.code
+        // Create event element to notify about script load
+        const eventElement = document.createElement('script')
+        eventElement.type = 'text/javascript'
+        eventElement.textContent = `document.dispatchEvent(new CustomEvent('${imp.url}', {detail: {url: '${imp.url}'}}));`
+        document.addEventListener(imp.url, (ev) => {
+          console.log('Script loaded from cache:', ev.detail.url)
+          resolve({ status: true })
         })
-      })
-      document.body.appendChild(scriptElement);
+        document.body.appendChild(scriptElement);console.log('1')
+        document.body.appendChild(eventElement)
+      } else {
+        // Create script element from import.url
+        scriptElement.async = async
+        scriptElement.src = imp.url
+        scriptElement.addEventListener('load', (ev) => {
+          console.log('Script loaded:', imp.url)
+          resolve({ status: true })
+        })
+        scriptElement.addEventListener('error', (ev) => {
+          reject({
+            status: false,
+            message: `Failed to import ＄{imp.url}`
+          })
+        })
+        document.body.appendChild(scriptElement);
+      }
     } catch (error) {
       reject(error)
     }
@@ -85,8 +110,8 @@ async function importScripts (...imports) {
   // Load scripts in parallel
   // return Promise.all(imports.map(importScriptAsync))
   // Load scripts in sequence. Possible ordering issues.
-  for (const scriptUrl of imports) {
-    await importScriptAsync(scriptUrl);
+  for (const imp of imports) {
+    await importScriptAsync(imp);
   }
 }
 
@@ -103,8 +128,8 @@ function getModelFuncAPI (model, log=console.log) {
       }
     case 'post':
       return (data) => {
-        log('Sending POST request to', this.schema.model.url)
-        const resPromise = fetch(this.schema.model.url, {
+        log('Sending POST request to', model.url)
+        const resPromise = fetch(model.url, {
           method: 'POST',
           headers: {
             'Accept': 'application/json',
@@ -123,6 +148,7 @@ async function delay (ms) {
 
 module.exports = {
   isObject,
+  loadFromDOM,
   getModelFuncJS,
   getModelFuncAPI,
   importScripts,

package/src/worker.js

@@ -18,7 +18,7 @@ async function initPython (model) {
   importScripts("https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js")
   const pyodide = await loadPyodide()
   if (model.imports && Array.isArray(model.imports) && model.imports.length) {
-    await pyodide.loadPackage(model.imports)
+    await pyodide.loadPackage(model.imports.map(i => i.url))
   } else {
     await pyodide.loadPackagesFromImports(model.code)
   }
@@ -39,9 +39,13 @@ async function initJS (model) {
     log('Loading imports...')
     for (let imp of model.imports) {
       // Try creating an url
-      const url = utils.getUrl(imp)
-      log('Importing:', url)
-      importScripts(url)
+      if (imp.code) {
+        log('Importing from DOM:', imp.url)
+        importScripts(URL.createObjectURL(new Blob([imp.code], { type: 'text/javascript' })))
+      } else {
+        log('Importing from network:', imp.url)
+        importScripts(imp.url)
+      }
     }
   }
 

package/webpack.config.js

@@ -10,6 +10,7 @@ module.exports = (env) => {
     output: {
       filename: env.RUNTIME ? 'jsee.runtime.js' : 'jsee.js',
       path: path.resolve(__dirname, 'dist'),
+      publicPath: '/dist/', // Should fix Uncaught Error when downloaded: Automatic publicPath is not supported in this browser
       library: {
         type: 'umd',
         name: 'JSEE',