@jseeio/jsee 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "JavaScript Execution Environment",
   "main": "dist/jsee.js",
   "unpkg": "dist/jsee.js",

package/src/app.js

@@ -231,7 +231,9 @@ function createVueApp (env, mountedCallback, logMain) {
     app.use(window[framework])
   }
 
-  return app.mount(container) // After app.mount() it's not the same app
+  const component = app.mount(container) // After app.mount() it's not the same app
+  component.__vueApp = app
+  return component
 }
 
 export { createVueApp }

package/src/cli.js

@@ -80,26 +80,58 @@ function getImportUrlValue (importValue) {
   return null
 }
 
+// Resolve an import path to a local file by checking candidate locations on disk.
+// Returns the absolute file path if found, null otherwise.
+// This replaces heuristic prefix detection (isLocalJsImport/isLocalCssImport) with
+// a definitive filesystem check — no heuristic can reliably distinguish bare-relative
+// local paths like "dist/core.js" from npm package subpaths like "chart.js/dist/chart.min.js".
+function resolveLocalImportFile (importUrlValue, modelUrl, cwd) {
+  if (!importUrlValue || typeof importUrlValue !== 'string') return null
+  if (isHttpUrl(importUrlValue)) return null
+
+  const modelDir = modelUrl && !isHttpUrl(modelUrl) ? path.dirname(modelUrl) : '.'
+  const candidates = []
+
+  if (importUrlValue.startsWith('./') || importUrlValue.startsWith('../')) {
+    // Explicit relative: prefer model-relative (colocated helpers), fallback to cwd
+    candidates.push(path.resolve(cwd, path.join(modelDir, importUrlValue)))
+    candidates.push(path.resolve(cwd, importUrlValue))
+  } else if (importUrlValue.startsWith('/')) {
+    // Absolute from project root
+    candidates.push(path.resolve(cwd, importUrlValue.slice(1)))
+  } else {
+    // Bare relative (dist/core.js): prefer cwd (schema-relative), fallback to model-relative
+    candidates.push(path.resolve(cwd, importUrlValue))
+    candidates.push(path.resolve(cwd, path.join(modelDir, importUrlValue)))
+  }
+
+  for (const fp of candidates) {
+    if (fs.existsSync(fp) && fs.statSync(fp).isFile()) return fp
+  }
+  return null
+}
+
 function resolveFetchImport (importValue, modelUrl, cwd) {
   const importUrlValue = getImportUrlValue(importValue)
-  if (!importUrlValue) {
-    return null
-  }
+  if (!importUrlValue) return null
   const importIsObject = importValue && typeof importValue === 'object'
 
-  if (isLocalJsImport(importUrlValue) || isLocalCssImport(importUrlValue)) {
-    const modelDir = modelUrl && !isHttpUrl(modelUrl) ? path.dirname(modelUrl) : '.'
-    const localSchemaPath = path.normalize(path.join(modelDir, importUrlValue))
-    const schemaImport = localSchemaPath.split(path.sep).join('/')
+  const localFilePath = resolveLocalImportFile(importUrlValue, modelUrl, cwd)
+
+  if (localFilePath) {
+    // Keep the raw import string as the lookup key (importUrl) so that
+    // data-src in the bundled HTML matches what the runtime's loadFromDOM
+    // will look up before getUrl transforms the path.
     return {
-      schemaImport: schemaImport,
-      schemaEntry: importIsObject ? { ...importValue, url: schemaImport } : schemaImport,
-      importUrl: toRuntimeUrl(schemaImport),
-      localFilePath: path.resolve(cwd, localSchemaPath),
+      schemaImport: importUrlValue,
+      schemaEntry: importIsObject ? { ...importValue, url: importUrlValue } : importUrlValue,
+      importUrl: importUrlValue,
+      localFilePath,
       remoteUrl: null
     }
   }
 
+  // Remote: npm package or explicit HTTP URL
   const remoteUrl = isHttpUrl(importUrlValue)
     ? importUrlValue
     : `https://cdn.jsdelivr.net/npm/${importUrlValue}`
@@ -108,7 +140,7 @@ function resolveFetchImport (importValue, modelUrl, cwd) {
     schemaEntry: importIsObject ? { ...importValue, url: importUrlValue } : importUrlValue,
     importUrl: toRuntimeUrl(importUrlValue),
     localFilePath: null,
-    remoteUrl: remoteUrl
+    remoteUrl
   }
 }
 
@@ -1053,6 +1085,7 @@ Documentation: https://jsee.org
 
 module.exports = gen
 module.exports.collectFetchBundleBlocks = collectFetchBundleBlocks
+module.exports.resolveLocalImportFile = resolveLocalImportFile
 module.exports.resolveFetchImport = resolveFetchImport
 module.exports.resolveRuntimeMode = resolveRuntimeMode
 module.exports.resolveOutputPath = resolveOutputPath

package/src/main.js

@@ -152,6 +152,7 @@ export default class JSEE {
     this.__version__ = VERSION
     this.cancelled = false
     this._cancelWorkerRun = null
+    this._workers = []
 
     // Check if schema is provided
     if (typeof this.schema === 'undefined') {
@@ -171,7 +172,7 @@ export default class JSEE {
       }
     }
 
-    this.init()
+    this._initPromise = this.init()
   }
 
   log (...args) {
@@ -194,6 +195,35 @@ export default class JSEE {
     return this.cancelled === true
   }
 
+  destroy () {
+    log('Destroying JSEE instance')
+    // Cancel any running computation
+    this.cancelCurrentRun()
+    // Terminate all workers
+    this._workers.forEach(w => {
+      try { w.terminate() } catch (e) { /* ignore */ }
+    })
+    this._workers = []
+    // Unmount Vue app
+    if (this.app && this.app.__vueApp) {
+      this.app.__vueApp.unmount()
+    }
+    // Clean up overlay
+    if (this.overlay) {
+      this.overlay.hide()
+    }
+    // Remove progress bar
+    const progress = document.querySelector('#progress')
+    if (progress) progress.remove()
+    // Null out references
+    this.app = null
+    this.data = null
+    this.pipeline = null
+    this.model = null
+    this.schema = null
+    this._cancelWorkerRun = null
+  }
+
   progress (i) {
     const progressState = utils.getProgressState(i)
     if (!progressState) {
@@ -413,8 +443,11 @@ export default class JSEE {
             imp = m.imports[i]
           }
           if (!m.type.includes('py')) {
-            imp.url = utils.getUrl(imp.url) 
-            imp.code = utils.loadFromDOM(imp.url)
+            imp.code = utils.loadFromDOM(imp.url)      // Try raw path first (matches --fetch data-src)
+            imp.url = utils.getUrl(imp.url)             // Resolve to absolute URL for network/worker
+            if (!imp.code) {
+              imp.code = utils.loadFromDOM(imp.url)     // Fallback: resolved URL (legacy compat)
+            }
           }
         }
       }
@@ -578,6 +611,7 @@ export default class JSEE {
   async initWorker (model) {
     // Init worker
     const worker = new Worker()
+    this._workers.push(worker)
 
     // Init worker with the model
     if (typeof model.code === 'function') {

package/src/utils.js

@@ -775,7 +775,15 @@ function debounce (fn, ms) {
 function getName (code) {
   switch (typeof code) {
     case 'function':
-      return code.name
+      if (!code.name) return undefined
+      // Arrow functions get an inferred .name from property assignment
+      // (e.g. { code: (a) => a } → code.name === "code") which is misleading.
+      // Only trust .name when toString() confirms a real named declaration.
+      const src = code.toString().trimStart()
+      if (src.startsWith('function') || src.startsWith('async function')) {
+        return code.name
+      }
+      return undefined
     case 'string':
       const words = code.split(' ')
       const functionIndex = words.findIndex((word) => word === 'function')

package/test/arrow-main.html

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

package/test/arrow-worker.html

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

package/test/runtime-arrow.html

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

package/test/test-basic.test.js

@@ -86,6 +86,33 @@ describe('Minimal examples', () => {
   })
 })
 
+describe('Arrow function as model.code', () => {
+  test('Main thread', async () => {
+    await page.goto(urlHTML('arrow-main'))
+    await expect(page).toFill('#a', '8')
+    await expect(page).toFill('#b', '7')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatchTextContent('15')
+  })
+  test('Worker', async () => {
+    await page.goto(urlHTML('arrow-worker'))
+    await expect(page).toFill('#a', '8')
+    await expect(page).toFill('#b', '7')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatchTextContent('15')
+  })
+})
+
+describe('Runtime build (jsee.runtime.js)', () => {
+  test('Arrow function in worker', async () => {
+    await page.goto(urlHTML('runtime-arrow'))
+    await expect(page).toFill('#a', '8')
+    await expect(page).toFill('#b', '7')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatchTextContent('15')
+  })
+})
+
 describe('Load code directly', () => {
   test('Window', async () => {
     await page.goto(urlHTML('code'))

package/test/unit/cli-fetch.test.js

@@ -2,7 +2,7 @@ const fs = require('fs')
 const os = require('os')
 const path = require('path')
 const gen = require('../../src/cli')
-const { collectFetchBundleBlocks, resolveFetchImport, resolveRuntimeMode } = gen
+const { collectFetchBundleBlocks, resolveLocalImportFile, resolveFetchImport, resolveRuntimeMode } = gen
 
 describe('collectFetchBundleBlocks', () => {
   test('collects model, view and render blocks', () => {
@@ -32,19 +32,107 @@ describe('collectFetchBundleBlocks', () => {
   })
 })
 
+describe('resolveLocalImportFile', () => {
+  let tmpDir
+
+  beforeEach(() => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'jsee-resolve-'))
+    // Create a project layout:
+    //   dist/a.js
+    //   css/x.css
+    //   src/model.js
+    //   src/helper.js
+    fs.mkdirSync(path.join(tmpDir, 'dist'))
+    fs.mkdirSync(path.join(tmpDir, 'css'))
+    fs.mkdirSync(path.join(tmpDir, 'src'))
+    fs.writeFileSync(path.join(tmpDir, 'dist', 'a.js'), '// a')
+    fs.writeFileSync(path.join(tmpDir, 'css', 'x.css'), '/* x */')
+    fs.writeFileSync(path.join(tmpDir, 'src', 'model.js'), '// model')
+    fs.writeFileSync(path.join(tmpDir, 'src', 'helper.js'), '// helper')
+  })
+
+  afterEach(() => {
+    fs.rmSync(tmpDir, { recursive: true, force: true })
+  })
+
+  test('resolves bare-relative JS path from cwd', () => {
+    const result = resolveLocalImportFile('dist/a.js', 'src/model.js', tmpDir)
+    expect(result).toBe(path.join(tmpDir, 'dist', 'a.js'))
+  })
+
+  test('resolves bare-relative CSS path from cwd', () => {
+    const result = resolveLocalImportFile('css/x.css', 'src/model.js', tmpDir)
+    expect(result).toBe(path.join(tmpDir, 'css', 'x.css'))
+  })
+
+  test('resolves explicit-relative path against model directory', () => {
+    const result = resolveLocalImportFile('./helper.js', 'src/model.js', tmpDir)
+    expect(result).toBe(path.join(tmpDir, 'src', 'helper.js'))
+  })
+
+  test('returns null for nonexistent file', () => {
+    const result = resolveLocalImportFile('dist/nope.js', 'src/model.js', tmpDir)
+    expect(result).toBeNull()
+  })
+
+  test('returns null for HTTP URLs', () => {
+    const result = resolveLocalImportFile('https://cdn.example.com/lib.js', 'src/model.js', tmpDir)
+    expect(result).toBeNull()
+  })
+
+  test('returns null for npm package names', () => {
+    const result = resolveLocalImportFile('lodash', 'src/model.js', tmpDir)
+    expect(result).toBeNull()
+  })
+})
+
 describe('resolveFetchImport', () => {
-  test('resolves local relative import paths against model location', () => {
-    const cwd = '/tmp/jsee-workspace'
-    const result = resolveFetchImport('./helpers/math.js', 'apps/qrcode/model.js', cwd)
+  let tmpDir
+
+  beforeEach(() => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'jsee-resolve-'))
+    fs.mkdirSync(path.join(tmpDir, 'dist'))
+    fs.mkdirSync(path.join(tmpDir, 'css'))
+    fs.mkdirSync(path.join(tmpDir, 'src'))
+    fs.writeFileSync(path.join(tmpDir, 'dist', 'core.js'), '// core')
+    fs.writeFileSync(path.join(tmpDir, 'css', 'app.css'), '/* app */')
+    fs.writeFileSync(path.join(tmpDir, 'src', 'model.js'), '// model')
+    fs.writeFileSync(path.join(tmpDir, 'src', 'helper.js'), '// helper')
+  })
 
-    expect(result.schemaImport).toBe('apps/qrcode/helpers/math.js')
-    expect(result.importUrl).toBe('https://cdn.jsdelivr.net/npm/apps/qrcode/helpers/math.js')
-    expect(result.localFilePath).toBe(path.join(cwd, 'apps/qrcode/helpers/math.js'))
+  afterEach(() => {
+    fs.rmSync(tmpDir, { recursive: true, force: true })
+  })
+
+  test('resolves bare-relative local JS with raw importUrl', () => {
+    const result = resolveFetchImport('dist/core.js', 'src/model.js', tmpDir)
+
+    expect(result.schemaImport).toBe('dist/core.js')
+    expect(result.importUrl).toBe('dist/core.js')
+    expect(result.localFilePath).toBe(path.join(tmpDir, 'dist', 'core.js'))
+    expect(result.remoteUrl).toBeNull()
+  })
+
+  test('resolves bare-relative local CSS with raw importUrl', () => {
+    const result = resolveFetchImport('css/app.css', 'src/model.js', tmpDir)
+
+    expect(result.schemaImport).toBe('css/app.css')
+    expect(result.importUrl).toBe('css/app.css')
+    expect(result.localFilePath).toBe(path.join(tmpDir, 'css', 'app.css'))
+    expect(result.remoteUrl).toBeNull()
+  })
+
+  test('resolves explicit-relative local import against model dir', () => {
+    const result = resolveFetchImport('./helper.js', 'src/model.js', tmpDir)
+
+    expect(result.schemaImport).toBe('./helper.js')
+    expect(result.importUrl).toBe('./helper.js')
+    expect(result.localFilePath).toBe(path.join(tmpDir, 'src', 'helper.js'))
     expect(result.remoteUrl).toBeNull()
   })
 
   test('keeps package imports as remote URLs', () => {
-    const result = resolveFetchImport('chart.js', 'apps/qrcode/model.js', '/tmp/jsee-workspace')
+    const result = resolveFetchImport('chart.js', 'src/model.js', tmpDir)
 
     expect(result.schemaImport).toBe('chart.js')
     expect(result.importUrl).toBe('https://cdn.jsdelivr.net/npm/chart.js')
@@ -52,32 +140,33 @@ describe('resolveFetchImport', () => {
     expect(result.remoteUrl).toBe('https://cdn.jsdelivr.net/npm/chart.js')
   })
 
+  test('keeps remote HTTP URLs unchanged', () => {
+    const result = resolveFetchImport('https://cdn.example.com/lib.css', 'model.js', tmpDir)
+    expect(result.remoteUrl).toBe('https://cdn.example.com/lib.css')
+    expect(result.localFilePath).toBeNull()
+  })
+
   test('supports object imports and preserves extra fields', () => {
     const result = resolveFetchImport(
-      { url: './helpers/math.js', integrity: 'sha-123' },
-      'apps/qrcode/model.js',
-      '/tmp/jsee-workspace'
+      { url: './helper.js', integrity: 'sha-123' },
+      'src/model.js',
+      tmpDir
     )
 
     expect(result.schemaEntry).toEqual({
-      url: 'apps/qrcode/helpers/math.js',
+      url: './helper.js',
       integrity: 'sha-123'
     })
-    expect(result.importUrl).toBe('https://cdn.jsdelivr.net/npm/apps/qrcode/helpers/math.js')
-    expect(result.localFilePath).toBe(path.join('/tmp/jsee-workspace', 'apps/qrcode/helpers/math.js'))
-    expect(result.remoteUrl).toBeNull()
-  })
-  test('resolves local CSS import paths', () => {
-    const result = resolveFetchImport('./styles/app.css', 'apps/demo/model.js', '/tmp')
-    expect(result.schemaImport).toBe('apps/demo/styles/app.css')
-    expect(result.localFilePath).toBe(path.join('/tmp', 'apps/demo/styles/app.css'))
+    expect(result.importUrl).toBe('./helper.js')
+    expect(result.localFilePath).toBe(path.join(tmpDir, 'src', 'helper.js'))
     expect(result.remoteUrl).toBeNull()
   })
 
-  test('keeps remote CSS imports as remote URLs', () => {
-    const result = resolveFetchImport('https://cdn.example.com/lib.css', 'model.js', '/tmp')
-    expect(result.remoteUrl).toBe('https://cdn.example.com/lib.css')
+  test('nonexistent file falls through to remote/CDN', () => {
+    const result = resolveFetchImport('dist/nope.js', 'src/model.js', tmpDir)
+
     expect(result.localFilePath).toBeNull()
+    expect(result.remoteUrl).toBe('https://cdn.jsdelivr.net/npm/dist/nope.js')
   })
 })
 

package/test/unit/utils.test.js

@@ -464,6 +464,26 @@ describe('getName', () => {
     function myFunc () {}
     expect(getName(myFunc)).toBe('myFunc')
   })
+  test('arrow function reference returns undefined (not inferred property name)', () => {
+    const obj = { code: (a, b) => a + b }
+    expect(getName(obj.code)).toBeUndefined()
+  })
+  test('anonymous function reference returns undefined', () => {
+    const fn = function () {}
+    // When assigned to a variable, .name is inferred, but toString() doesn't
+    // start with 'function <name>' — it starts with 'function ()'
+    // For this case getName should still work because fn.name = 'fn'
+    // and fn.toString() starts with 'function'
+    expect(getName(fn)).toBe('fn')
+  })
+  test('async function reference', () => {
+    async function fetchData () {}
+    expect(getName(fetchData)).toBe('fetchData')
+  })
+  test('async arrow function returns undefined', () => {
+    const obj = { code: async (a) => a }
+    expect(getName(obj.code)).toBeUndefined()
+  })
   test('non-string non-function returns undefined', () => {
     expect(getName(42)).toBeUndefined()
     expect(getName(null)).toBeUndefined()