@jseeio/jsee 0.8.0 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "JavaScript Execution Environment",
   "type": "commonjs",
   "main": "src/cli.js",
@@ -17,27 +17,27 @@
       "default": "./src/cli.js"
     },
     "./core": {
-      "require": "./dist/jsee.core.js",
+      "require": "./src/browser-bundle-node.js",
       "default": "./dist/jsee.core.js"
     },
     "./full": {
-      "require": "./dist/jsee.full.js",
+      "require": "./src/browser-bundle-node.js",
       "default": "./dist/jsee.full.js"
     },
     "./runtime": {
-      "require": "./dist/jsee.runtime.js",
+      "require": "./src/browser-bundle-node.js",
       "default": "./dist/jsee.runtime.js"
     },
     "./dist/jsee.core.js": {
-      "require": "./dist/jsee.core.js",
+      "require": "./src/browser-bundle-node.js",
       "default": "./dist/jsee.core.js"
     },
     "./dist/jsee.full.js": {
-      "require": "./dist/jsee.full.js",
+      "require": "./src/browser-bundle-node.js",
       "default": "./dist/jsee.full.js"
     },
     "./dist/jsee.runtime.js": {
-      "require": "./dist/jsee.runtime.js",
+      "require": "./src/browser-bundle-node.js",
       "default": "./dist/jsee.runtime.js"
     },
     "./package.json": "./package.json"
@@ -120,6 +120,9 @@
     "vue3-json-viewer": "^2.2.2",
     "vuex": "^4.0.2"
   },
+  "optionalDependencies": {
+    "esbuild": "^0.28.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/plugin-transform-runtime": "^7.4.4",

package/src/browser-bundle-node.js

@@ -0,0 +1,9 @@
+'use strict'
+
+function browserBundleOnly () {
+  throw new Error('@jseeio/jsee browser bundles require a browser DOM. Use require("@jseeio/jsee") for the Node CLI/API, or load dist/jsee.core.js / dist/jsee.full.js in a browser.')
+}
+
+browserBundleOnly.browserOnly = true
+
+module.exports = browserBundleOnly

package/src/cli.js

@@ -259,6 +259,114 @@ function resolveOutputPath (cwd, outputPath) {
   return path.join(cwd, outputPath)
 }
 
+let optionalEsbuild
+function getOptionalEsbuild () {
+  if (optionalEsbuild) return optionalEsbuild
+  try {
+    optionalEsbuild = require('esbuild')
+    return optionalEsbuild
+  } catch (error) {
+    throw new Error('Bundling model dependencies requires optional dependency esbuild. Run `npm install esbuild` or use schema imports/prebundled browser code.')
+  }
+}
+
+function isJsIdentifier (value) {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value)
+}
+
+function toJsIdentifier (value, fallback='model') {
+  const raw = value ? String(value) : fallback
+  const clean = raw.replace(/[^A-Za-z0-9_$]/g, '_')
+  if (!clean) return fallback
+  return /^[A-Za-z_$]/.test(clean) ? clean : '_' + clean
+}
+
+function getModelExportName (model) {
+  if (model.name) return model.name
+  if (model.url) return path.basename(model.url).replace(/\.[^.]+$/, '')
+  return 'model'
+}
+
+function hasCommonJsExport (code) {
+  return /\bmodule\s*\.\s*exports\b|\bexports\s*\.\s*[A-Za-z_$]/.test(code)
+}
+
+function hasEsModuleExport (code) {
+  return /^\s*export\s+(?:default|function|class|const|let|var|\{)/m.test(code)
+}
+
+function hasStaticImport (code) {
+  return /^\s*import\s+(?!\()/m.test(code)
+}
+
+function hasRequireCall (code) {
+  return /\brequire\s*\(/.test(code)
+}
+
+function shouldBundleModelCode (code) {
+  return hasRequireCall(code) || hasStaticImport(code) || hasCommonJsExport(code) || hasEsModuleExport(code)
+}
+
+function buildBundledModelExposeCode (bundleGlobalName, modelName) {
+  return `
+;(function () {
+  var mod = ${bundleGlobalName}
+  var target = mod
+  if (mod && (typeof mod === 'object')) {
+    if (typeof mod[${JSON.stringify(modelName)}] !== 'undefined') {
+      target = mod[${JSON.stringify(modelName)}]
+    } else if (typeof mod.default !== 'undefined') {
+      target = mod.default
+    }
+  }
+  globalThis[${JSON.stringify(modelName)}] = target
+})()
+`
+}
+
+async function bundleModelCode (model, modelPath, code) {
+  if (!shouldBundleModelCode(code)) return code
+
+  const esbuild = getOptionalEsbuild()
+  const modelName = getModelExportName(model)
+  const bundleGlobalName = `__jsee_bundle_${toJsIdentifier(modelName)}`
+  const needsExportShim = modelName &&
+    !hasCommonJsExport(code) &&
+    !hasEsModuleExport(code) &&
+    (hasRequireCall(code) || hasStaticImport(code))
+
+  if (needsExportShim && !isJsIdentifier(modelName)) {
+    throw new Error(`Bundling ${model.url || modelPath} requires a valid JavaScript model name or an explicit module export.`)
+  }
+
+  const options = {
+    bundle: true,
+    write: false,
+    platform: 'browser',
+    format: 'iife',
+    globalName: bundleGlobalName,
+    logLevel: 'silent'
+  }
+
+  if (needsExportShim) {
+    options.stdin = {
+      contents: `${code}\nexport default ${modelName}\n`,
+      resolveDir: path.dirname(modelPath),
+      sourcefile: path.basename(modelPath),
+      loader: 'js'
+    }
+  } else {
+    options.entryPoints = [modelPath]
+  }
+
+  try {
+    const result = await esbuild.build(options)
+    return result.outputFiles[0].text + buildBundledModelExposeCode(bundleGlobalName, modelName)
+  } catch (error) {
+    throw new Error(`Failed to bundle ${model.url || modelPath}: ${error.message}`)
+  }
+}
+
 const FULL_BUNDLE_TYPES = ['chart', '3d', 'map']
 
 function needsFullBundle (schema) {
@@ -739,7 +847,9 @@ function template(schema, blocks) {
 
 async function gen (pargv, returnHtml=false) {
   // Determine if JSEE CLI is imported or run directly
-  const imported = path.dirname(__dirname) !== path.dirname(require.main.path)
+  const mainPath = require.main && require.main.path ? require.main.path : process.cwd()
+  const mainFilename = require.main && require.main.filename ? require.main.filename : ''
+  const imported = path.dirname(__dirname) !== path.dirname(mainPath)
 
   // First pass over CLI arguments
   // JSEE-level args
@@ -749,14 +859,14 @@ async function gen (pargv, returnHtml=false) {
     description: 'd',
     port: 'p',
     version: 'v',
-    fetch: 'f',
+    fetch: ['f', 'bundle', 'b'],
     execute: 'e',
     cdn: 'c',
     runtime: 'r',
   }
   const argvDefault = {
     execute: 'auto', // execute the model code on the server (auto = server-side when serving local .js models)
-    fetch: false, // fetch the JSEE runtime from the CDN or local server
+    fetch: false, // bundle runtime, local code and imports into generated output
     inputs: 'schema.json', // default input is schema.json in the current working directory
     port: 3000, // default port for the server
     version: 'latest', // default version of JSEE runtime to use
@@ -798,7 +908,7 @@ async function gen (pargv, returnHtml=false) {
     new JSEE({
       container: document.getElementById('jsee-container'),
       schema: {
-        model: { code: function chat(message, history) { return { chat: 'You said: ' + message } }, worker: false },
+        model: { code: function chat(inputs) { return { chat: 'You said: ' + inputs.message } }, worker: false },
         inputs: [{ name: 'message', type: 'string', enter: true }],
         outputs: [{ name: 'chat', type: 'chat' }]
       }
@@ -821,7 +931,7 @@ async function gen (pargv, returnHtml=false) {
     new JSEE({
       container: document.getElementById('jsee-container'),
       schema: {
-        model: { code: function greet(name, count) { return { greeting: (name + '\\n').repeat(count) } }, worker: false },
+        model: { code: function greet(inputs) { return { greeting: (inputs.name + '\\n').repeat(inputs.count) } }, worker: false },
         inputs: [
           { name: 'name', type: 'string', default: 'World' },
           { name: 'count', type: 'slider', min: 1, max: 10, default: 3 }
@@ -846,8 +956,8 @@ async function gen (pargv, returnHtml=false) {
         inputs: [{ name: 'message', type: 'string', enter: true }],
         outputs: [{ name: 'chat', type: 'chat' }]
       }, null, 2) + '\n'
-      files['model.js'] = `function chat(message, history) {
-  return { chat: 'You said: ' + message }
+      files['model.js'] = `function chat(inputs) {
+  return { chat: 'You said: ' + inputs.message }
 }
 `
       files['README.md'] = `# Chat
@@ -870,8 +980,8 @@ npx @jseeio/jsee schema.json
         ],
         outputs: [{ name: 'greeting', type: 'code' }]
       }, null, 2) + '\n'
-      files['model.js'] = `function greet(name, count) {
-  return { greeting: (name + '\\n').repeat(count) }
+      files['model.js'] = `function greet(inputs) {
+  return { greeting: (inputs.name + '\\n').repeat(inputs.count) }
 }
 `
       files['README.md'] = `# My App
@@ -918,7 +1028,8 @@ Options:
   -d, --description <file>  Markdown description file to include
   -p, --port <number>       Dev server port (default: 3000)
   -v, --version <version>   JSEE runtime version (default: latest)
-  -f, --fetch               Fetch and bundle runtime + dependencies into output
+  -b, --bundle             Bundle runtime + dependencies into output
+  -f, --fetch               Alias for --bundle
   -e, --execute             Execute model server-side (auto-enabled when serving local .js models)
       --client              Force client-side execution (disable auto server-side)
   -c, --cdn <url|bool>      Rewrite model URLs for CDN deployment
@@ -940,7 +1051,7 @@ Examples:
   jsee schema.json --a=100 --b=200  Pass named data inputs
   jsee schema.json data.csv         Pass a file path as input
   jsee schema.json -o app.html      Generate static HTML file
-  jsee schema.json -o app.html -f   Generate self-contained HTML with bundled runtime
+  jsee schema.json -o app.html --bundle  Generate self-contained HTML with bundled runtime
   jsee -p 8080                      Start dev server on port 8080
   jsee report.pdf                   Serve a PDF file (auto-detected viewer)
   jsee data/                        Serve a folder (file browser with preview)
@@ -971,8 +1082,8 @@ Documentation: https://jsee.org
   log('Current working directory:', process.cwd())
   log('Script location:', __dirname)
   log('Script file:', __filename)
-  log('Require location:', require.main.path)
-  log('Require file:', require.main.filename)
+  log('Require location:', mainPath)
+  log('Require file:', mainFilename)
 
   let cwd = process.cwd()
   let inputs = argv.inputs
@@ -1081,7 +1192,7 @@ Documentation: https://jsee.org
   }
   log('Argv:', argv)
 
-  // Initially in argv.fetch branch
+  // Bundle/offline generation
   // Check if schema has model, convert to array if needed
   if (!schema.model) {
     // console.error('No model found in schema')
@@ -1192,8 +1303,9 @@ Documentation: https://jsee.org
   // Generate jsee code
   let jseeHtml = ''
   let hiddenElementHtml = ''
-  const runtimeMode = resolveRuntimeMode(argv.runtime, argv.fetch, hasOutputs)
-  if (argv.fetch) {
+  const shouldBundle = Boolean(argv.fetch)
+  const runtimeMode = resolveRuntimeMode(argv.runtime, shouldBundle, hasOutputs)
+  if (shouldBundle) {
     // Fetch jsee code from the CDN or local server
     const jseeCode = await loadRuntimeCode(argv.version, schema)
     jseeHtml = `<script>${jseeCode}</script>`
@@ -1207,7 +1319,10 @@ Documentation: https://jsee.org
       }
       if (m.url) {
         // Fetch model from the local file system (remote URLs not yet supported here)
-        const modelCode = fs.readFileSync(path.join(cwd, m.url), 'utf8')
+        const modelPath = path.join(cwd, m.url)
+        if (!m.name) m.name = getModelExportName(m)
+        const modelSource = fs.readFileSync(modelPath, 'utf8')
+        const modelCode = await bundleModelCode(m, modelPath, modelSource)
         hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${m.url}">${modelCode}</script>`
       }
       const imports = toArray(m.imports)
@@ -1499,3 +1614,5 @@ module.exports.resolveFetchImport = resolveFetchImport
 module.exports.resolveRuntimeMode = resolveRuntimeMode
 module.exports.resolveOutputPath = resolveOutputPath
 module.exports.needsFullBundle = needsFullBundle
+module.exports.shouldBundleModelCode = shouldBundleModelCode
+module.exports.bundleModelCode = bundleModelCode

package/src/main.js

@@ -1010,6 +1010,18 @@ export default class JSEE {
           || (output.alias && res[output.alias])
         if (typeof r !== 'undefined') {
           log(`Updating output: ${output.name} with data: ${typeof r}`)
+          if (output.type === 'file' && r && typeof r === 'object' && !Array.isArray(r)) {
+            if (typeof r.filename === 'string') output.filename = r.filename
+            if (typeof r.name === 'string' && !output.filename) output.filename = r.name
+            if (typeof r.mime === 'string') output.mime = r.mime
+            if (typeof r.contentType === 'string') output.mime = r.contentType
+            if (Object.prototype.hasOwnProperty.call(r, 'content')) output.value = r.content
+            else if (Object.prototype.hasOwnProperty.call(r, 'value')) output.value = r.value
+            else if (Object.prototype.hasOwnProperty.call(r, 'data')) output.value = r.data
+            else if (Object.prototype.hasOwnProperty.call(r, 'url')) output.value = r.url
+            else output.value = r
+            return
+          }
           // Convert large base64 image data URLs to blob URLs for efficiency
           if (output.type === 'image' && typeof r === 'string'
               && r.startsWith('data:') && r.length > 50000) {

package/templates/common-outputs.js

@@ -19,6 +19,27 @@ function stringify (v) {
     : JSON.stringify(v)
 }
 
+function getFileDescriptor (output) {
+  const value = output.value
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return {
+      filename: output.filename || output.name || 'output',
+      content: value,
+      mime: output.mime || output.contentType || 'application/octet-stream'
+    }
+  }
+  const has = (key) => Object.prototype.hasOwnProperty.call(value, key)
+  return {
+    filename: value.filename || value.name || output.filename || output.name || 'output',
+    content: has('content') ? value.content
+      : has('value') ? value.value
+        : has('data') ? value.data
+          : has('url') ? value.url
+            : value,
+    mime: value.mime || value.contentType || output.mime || output.contentType || 'application/octet-stream'
+  }
+}
+
 const component = {
   props: ['output'],
   emits: ['notification'],
@@ -260,19 +281,24 @@ const component = {
       }
     },
     downloadFile () {
-      let filename = this.output.filename || this.output.name || 'output'
-      let value = this.output.value
+      const file = getFileDescriptor(this.output)
+      let filename = file.filename
+      let value = file.content
       if (typeof value === 'string' && value.startsWith('data:')) {
         fetch(value)
           .then(r => r.blob())
           .then(blob => saveAs(blob, filename))
           .catch(() => {
-            let blob = new Blob([value], { type: 'application/octet-stream' })
+            let blob = new Blob([value], { type: file.mime })
             saveAs(blob, filename)
           })
       } else {
+        if (typeof Blob !== 'undefined' && value instanceof Blob) {
+          saveAs(value, filename)
+          return
+        }
         let content = typeof value === 'string' ? value : JSON.stringify(value)
-        let blob = new Blob([content], { type: 'application/octet-stream' })
+        let blob = new Blob([content], { type: file.mime })
         saveAs(blob, filename)
       }
     },