@jseeio/jsee 0.3.7 → 0.3.9

package/src/cli.js

@@ -20,6 +20,8 @@ const converter = new showdown.Converter({
 })
 showdown.setFlavor('github')
 
+const { getModelFuncJS, sanitizeName } = require('./utils.js')
+
 // left padding of multiple lines
 function pad (str, len, start=0) {
   return str.split('\n').map((s, i) => i >= start ? ' '.repeat(len) + s : s).join('\n')
@@ -29,364 +31,146 @@ function depad (str, len) {
   return str.split('\n').map(s => s.slice(len)).join('\n')
 }
 
-// Adding async here breaks express. TODO: investigate
-async function gen (pargv, returnHtml=false) {
-  pargv = pargv.slice(2) // Remove the first two elements (node and script path)
-
-  // print all folders (file location, cwd, etc.)
-  console.log('Current working directory:', process.cwd())
-  console.log('Script location:', __dirname)
-  console.log('Script file:', __filename)
-  console.log('Require', require.main.filename)
+function toArray (value) {
+  if (!value) return []
+  return Array.isArray(value) ? value : [value]
+}
 
-  const argvAlias ={
-    inputs: 'i',
-    outputs: 'o',
-    description: 'd',
-    ga: 'g',
-    port: 'p',
-    version: 'v',
-    fetch: 'f',
-    execute: 'e'
-  }
-  const argvDefault = {
-    execute: false, // execute the model code on the server
-    fetch: false,
-    inputs: '',
-    port: 3000,
-    version: 'latest'
-  }
+function collectFetchBundleBlocks (schema) {
+  return []
+    .concat(toArray(schema.model))
+    .concat(toArray(schema.view))
+    .concat(toArray(schema.render))
+    .filter(Boolean)
+}
 
-  // Parse arguments using minimist
-  let argv = minimist(pargv, {
-    alias: argvAlias,
-    default: argvDefault,
-  })
+function isHttpUrl (value) {
+  return /^https?:\/\//i.test(value)
+}
 
-  // Set argv.inputs to the first non-option argument if it exists
-  if (argv._.length > 0) {
-    argv.inputs = argv._[0]
+function toRuntimeUrl (value) {
+  try {
+    return (new URL(value)).href
+  } catch (error) {
+    return (new URL(value, 'https://cdn.jsdelivr.net/npm/')).href
   }
+}
 
-  console.log('Initial argv:', argv)
-
-  let cwd = process.cwd()
-  let inputs = argv.inputs
-  let outputs = argv.outputs
-  let description = argv.description
-  let version = argv.version
-  let ga = argv.ga
-  let schema
-  let descriptionTxt = ''
-  let descriptionHtml = ''
-  let jsdocMarkdown = ''
-  let modelFuncs = {}
+function isLocalJsImport (value) {
+  if (typeof value !== 'string') return false
+  const lower = value.toLowerCase()
+  if (!lower.endsWith('.js') && !lower.includes('.js?')) return false
+  if (isHttpUrl(value)) return false
+  return value.startsWith('./') || value.startsWith('../') || value.startsWith('/') || value.startsWith('file://')
+}
 
-  // if inputs is a string with js file names, split it into an array
-  if (typeof inputs === 'string') {
-    if (inputs.includes('.js')) {
-      inputs = inputs.split(',')
-    }
+function getImportUrlValue (importValue) {
+  if (typeof importValue === 'string') return importValue
+  if (importValue && typeof importValue === 'object' && typeof importValue.url === 'string') {
+    return importValue.url
   }
+  return null
+}
 
-  // if outputs is a string with js file names, split it into an array
-  if (typeof outputs === 'string') {
-    outputs = outputs.split(',')
+function resolveFetchImport (importValue, modelUrl, cwd) {
+  const importUrlValue = getImportUrlValue(importValue)
+  if (!importUrlValue) {
+    return null
   }
+  const importIsObject = importValue && typeof importValue === 'object'
 
-  // Check for schema.json in the current working directory
-  if (inputs.length === 0 && fs.existsSync(path.join(cwd, 'schema.json'))) {
-    console.log('Using schema.json from the current working directory')
-    inputs = ['schema.json']
+  if (isLocalJsImport(importUrlValue)) {
+    const modelDir = modelUrl && !isHttpUrl(modelUrl) ? path.dirname(modelUrl) : '.'
+    const localSchemaPath = path.normalize(path.join(modelDir, importUrlValue))
+    const schemaImport = localSchemaPath.split(path.sep).join('/')
+    return {
+      schemaImport: schemaImport,
+      schemaEntry: importIsObject ? { ...importValue, url: schemaImport } : schemaImport,
+      importUrl: toRuntimeUrl(schemaImport),
+      localFilePath: path.resolve(cwd, localSchemaPath),
+      remoteUrl: null
+    }
   }
 
-  if (inputs.length === 0) {
-    console.error('No inputs provided')
-    process.exit(1)
-  } else if ((inputs.length === 1) && (inputs[0].includes('.json'))) {
-    // Input is json schema
-    // Curren working directory if not provided
-    // schema = require(path.join(cwd, inputs[0]))
-    // switch to fs.readFileSync to reload the schema if it changes
-    schema = JSON.parse(fs.readFileSync(path.join(cwd, inputs[0]), 'utf8'))
-  } else {
-    // Array of js files
-    // Generate schema
-    let jsdocData = jsdoc2md.getTemplateDataSync({ files: inputs.map(f => path.join(cwd, f)) })
-    schema = genSchema(jsdocData)
-    // jsdocMarkdown = jsdoc2md.renderSync({
-    //   data: jsdocData,
-    //   'param-list-format': 'list',
-    // })
-  }
-  
-  // Iterate over schema inputs and update aliases 
-  if (schema.inputs) {
-    schema.inputs.forEach(inp => {  
-      if (inp.name) {
-        if (inp.alias) {
-          argvAlias[inp.name] = inp.alias
-        }
-        if (inp.default) {
-          argvDefault[inp.name] = inp.default
-        }
-      }
-    })
+  const remoteUrl = isHttpUrl(importUrlValue)
+    ? importUrlValue
+    : `https://cdn.jsdelivr.net/npm/${importUrlValue}`
+  return {
+    schemaImport: importUrlValue,
+    schemaEntry: importIsObject ? { ...importValue, url: importUrlValue } : importUrlValue,
+    importUrl: toRuntimeUrl(importUrlValue),
+    localFilePath: null,
+    remoteUrl: remoteUrl
   }
+}
 
-  // Update argv with the new aliases and defaults
-  argv = minimist(pargv, {
-    alias: argvAlias,
-    default: argvDefault,
-  })
-
-  console.log('Updated argv', argv)
-
-  // Initially in argv.fetch branch
-  // Check if schema has model, convert to array if needed
-  if (!schema.model) {
-    console.error('No model found in schema')
-    process.exit(1)
+function resolveRuntimeMode (runtime, fetchEnabled, outputs) {
+  const requestedRuntime = runtime || 'auto'
+  const availableModes = ['auto', 'local', 'cdn', 'inline']
+  if (!availableModes.includes(requestedRuntime)) {
+    throw new Error(`Invalid runtime mode: ${requestedRuntime}. Use one of: ${availableModes.join(', ')}`)
   }
-  if (!Array.isArray(schema.model)) {
-    schema.model = [schema.model]
+  if (requestedRuntime !== 'auto') {
+    return requestedRuntime
   }
-  if (argv.execute) {
-    schema.model.forEach(m => {
-      console.log('Executing model on the server:', m.name)
-      modelFuncs[m.name] = require(path.join(cwd, m.url))
-      m.type = 'post'
-      m.url = `/${m.name}`
-      m.worker = false
-    })
+  if (fetchEnabled) {
+    return 'inline'
   }
-  console.log('Schema:', schema)
-
-
-  // Generate description block
-  if (description) {
-    const descriptionMd = fs.readFileSync(path.join(cwd, description), 'utf8')
-    descriptionHtml = converter.makeHtml(descriptionMd)
+  return outputs ? 'cdn' : 'local'
+}
 
-    if (descriptionMd.includes('---')) {
-      descriptionTxt = descriptionMd
-        .split('---')[0]
-        .replace(/\n/g, ' ')
-        .replace(/\s+/g, ' ')
-        .replace(/#/g, '')
-        .replace(/\*/g, '')
-        .trim()
-    }
+function resolveOutputPath (cwd, outputPath) {
+  if (path.isAbsolute(outputPath)) {
+    return outputPath
   }
+  return path.join(cwd, outputPath)
+}
 
-  descriptionHtml += genHtmlFromSchema(schema)
-
-
-
-  // Generate jsee code
-  let jseeHtml = ''
-  let hiddenElementHtml = ''
-  if (argv.fetch) {
-    // Fetch jsee code from the CDN or local server
-    let jseeCode
-    if (argv.version === 'dev') {
-      jseeCode = fs.readFileSync(path.join(__dirname, '..', 'dist', 'jsee.js'), 'utf8')
-    } else if (argv.version === 'latest') {
-      jseeCode = fs.readFileSync(path.join(__dirname, '..', 'dist', 'jsee.runtime.js'), 'utf8')
-    } else {
-      // Pre-fetch the jsee runtime from the CDN https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js
-      jseeCode = await fetch(`https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js`)
-      jseeCode = await jseeCode.text()
-    }
-    jseeHtml = `<script>${jseeCode}</script>`
-    // Fetch model files and store them in hidden elements
-    hiddenElementHtml += '<div id="hidden-storage" style="display: none;">'
-
-    for (let m of schema.model) {
-      if (m.type === 'get' || m.type === 'post') {
-        continue
-      }
-      if (m.url) {
-        const modelCode = fs.readFileSync(path.join(cwd, m.url), 'utf8')
-        hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${m.url}">${modelCode}</script>`
-      }
-      if (m.imports) {
-        for (let i of m.imports) {
-          const importUrl = i.includes('.js') ? i : `https://cdn.jsdelivr.net/npm/${i}`
-
-          // Create cache directory if it doesn't exist
-          const cacheDir = path.join(os.homedir(), '.cache', 'jsee')
-          fs.mkdirSync(cacheDir, { recursive: true })
-
-          // Create a hash of the importUrl
-          const hash = crypto.createHash('sha256').update(importUrl).digest('hex')
-          const cacheFilePath = path.join(cacheDir, `${hash}.js`)
-
-          let importCode
-          let useCache = false
-
-          // Check if cache file exists and is less than 1 day old
-          if (fs.existsSync(cacheFilePath)) {
-            const stats = fs.statSync(cacheFilePath)
-            const mtime = new Date(stats.mtime)
-            const now = new Date()
-            const ageInDays = (now - mtime) / (1000 * 60 * 60 * 24)
-
-            if (ageInDays < 1) {
-              console.log('Using cached import:', importUrl)
-              importCode = fs.readFileSync(cacheFilePath, 'utf8');
-              useCache = true;
-            }
-          }
-
-          if (!useCache) {
-            const response = await fetch(importUrl);
-            if (!response.ok) {
-              console.error(`Failed to fetch ${importUrl}: ${response.statusText}`);
-              process.exit(1);
-            }
-            importCode = await response.text()
-            fs.writeFileSync(cacheFilePath, importCode, 'utf8')
-            console.log('Fetched and stored to cache:', importUrl)
-          }
-          hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${importUrl}">${importCode}</script>`
-        }
-      }
-    }
-    hiddenElementHtml += '</div>'
-  } else {
-    jseeHtml = outputs
-      ? `<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js"></script>`
-      : `<script src="http://localhost:${argv.port}/dist/jsee.runtime.js"></script>` 
+async function loadRuntimeCode (version) {
+  if (version === 'dev') {
+    return fs.readFileSync(path.join(__dirname, '..', 'dist', 'jsee.js'), 'utf8')
   }
+  if (version === 'latest') {
+    return fs.readFileSync(path.join(__dirname, '..', 'dist', 'jsee.runtime.js'), 'utf8')
+  }
+  const response = await fetch(`https://cdn.jsdelivr.net/npm/@jseeio/jsee@${version}/dist/jsee.runtime.js`)
+  return response.text()
+}
 
-  let socialHtml = ''
-  let gaHtml = ''
-  let orgHtml = ''
-
-  if (schema.page) {
-    if (schema.page.title) {
-      title = schema.page.title
-    }
-    if (schema.page.ga) {
-      gaHtml = `
-        <script id="ga-src" async src="https://www.googletagmanager.com/gtag/js?id=${schema.page.ga}"></script>
-        <script id="ga-body">
-          window['ga-disable-${schema.page.ga}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '${schema.page.ga}');
-        </script>
-      `
-    }
-
-    // Social media links
-    if (schema.page.social) {
-      // iterate over dict with k, v pairs
-      for (let [name, url] of Object.entries(schema.page.social)) {
-        switch (name) {
-          case 'twitter':
-            socialHtml += `<li><a rel="me" href="https://twitter.com/${url}">Twitter</a></li>`
-            break
-          case 'github':
-            socialHtml += `<li><a rel="me" href="https://github.com/${url}">GitHub</a></li>`
-            break
-          case 'facebook':
-            socialHtml += `<li><a rel="me" href="https://www.facebook.com/${url}">Facebook</a></li>`
-            break
-          case 'linkedin':
-            socialHtml += `<li><a rel="me" href="https://www.linkedin.com/company/${url}">LinkedIn</a></li>`
+function getDataFromArgv (schema, argv, loadFiles=true) {
+  let data = {}
+  if (schema.inputs) {
+    schema.inputs.forEach(inp => {
+      const inputName = sanitizeName(inp.name)
+      console.log('Processing input:', inp.name, 'as', inputName)
+      if (inputName in argv) {
+        switch (inp.type) {
+          case 'file':
+            if (!loadFiles) {
+              // If we don't want to load files, just set the value to the file path
+              data[inp.name] = argv[inputName]
+              break
+            } else if (fs.existsSync(argv[inputName])) {
+              data[inp.name] = fs.readFileSync(argv[inputName], 'utf8')
+            } else {
+              console.error(`File not found: ${argv[inputName]}`)
+              process.exit(1)
+            }
             break
-          case 'instagram':
-            socialHtml += `<li><a rel="me" href="https://www.instagram.com/${url}">Instagram</a></li>`
+          case 'int':
+            data[inp.name] = parseInt(argv[inputName], 10)
             break
-          case 'youtube':
-            socialHtml += `<li><a rel="me" href="https://www.youtube.com/${url}">YouTube</a></li>`
+          case 'float':
+            data[inp.name] = parseFloat(argv[inputName])
             break
+          case 'string':
           default:
-            socialHtml += `<li><a rel="me" href="${s.url}">${s.name}</a></li>`
+            data[inp.name] = argv[inputName]
         }
       }
-    }
-
-    if (schema.page.org) {
-      orgHtml = `<div class="footer-org"><h4 class="footer-heading"><a href="${schema.page.org.url}">${schema.page.org.name}</a></h4>`
-      if (schema.page.org.description) {
-        orgHtml += `<p>${schema.page.org.description}</p>`
-      }
-      orgHtml += '</div>'
-    }
-
-  }
-
-  const html = template(schema, {
-    descriptionHtml: pad(descriptionHtml, 8, 1),
-    descriptionTxt: descriptionTxt,
-    gaHtml: pad(gaHtml, 2, 1),
-    jseeHtml: jseeHtml,
-    hiddenElementHtml: hiddenElementHtml,
-    socialHtml: pad(socialHtml, 2, 1),
-    orgHtml: pad(orgHtml, 2, 1),
-  })
-
-  if (returnHtml) {
-    // Return the html as a string
-    return html
-  } else if (outputs) {
-    // Store the html in the output file
-    for (let o of outputs) {
-      if (o === 'stdout') {
-        console.log(html)
-      } else if (o.includes('.html')) {
-        fs.writeFileSync(path.join(cwd, o), html)
-      } else if (o.includes('.json')) {
-        fs.writeFileSync(path.join(cwd, o), JSON.stringify(schema, null, 2))
-      } else if (o.includes('.md')) {
-        fs.writeFileSync(path.join(cwd, o), genMarkdownFromSchema(schema))
-      } else {
-        console.error('Invalid output file:', o)
-      }
-    }
-    fs.writeFileSync(path.join(cwd, outputs[0]), html)
-  } else {
-    // Serve the html
-    const express = require('express')
-    const app = express()
-    app.use(express.json())
-    if (argv.execute) {
-      // Create post endpoint for executing the model
-      schema.model.forEach(m => {
-        app.post(m.url, (req, res) => {
-          console.log(`Executing model: ${m.name}`)
-          if (m.name in modelFuncs) {
-            const modelFunc = modelFuncs[m.name]
-            try {
-              const result = modelFunc(req.body)
-              res.json(result)
-            } catch (error) {
-              console.error('Error executing model:', error)
-              res.status(500).json({ error: error.message })
-            }
-          }
-        })
-        console.log('Model execution endpoints created:', m.url)
-      })
-    }
-    app.get('/', async (req, res) => {
-      console.log('Serving index.html')
-      res.send(await gen(process.argv, true))
-    })
-    app.get('/dist/jsee.runtime.js', (req, res) => {
-      const pathToJSEE = path.join(__dirname, '..', 'dist', 'jsee.runtime.js')
-      console.log(`Serving jsee.runtime.js from ${pathToJSEE}`)
-      res.sendFile(pathToJSEE)
-    })
-    app.use(express.static(cwd))
-    app.listen(argv.port, () => {
-      console.log(`JSEE app is running: http://localhost:${argv.port}`)
     })
   }
+  return data
 }
 
 function genSchema (jsdocData) {
@@ -640,7 +424,7 @@ function template(schema, blocks) {
     pre { padding: 8px 12px; overflow-x: auto; }
     pre > code { border: 0; padding-right: 0; padding-left: 0; }
     .wrapper { max-width: calc(800px - (30px)); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
-    @media screen and (min-width: 800px) { .wrapper { max-width: calc(800px - (30px * 2)); padding-right: 30px; padding-left: 30px; } }
+    @media screen and (min-width: 800px) { .wrapper { max-width: calc(1024px - (30px * 2)); padding-right: 30px; padding-left: 30px; } }
     .wrapper:after { content: ""; display: table; clear: both; }
     .orange { color: #f66a0a; }
     .grey { color: #828282; }
@@ -783,4 +567,481 @@ function template(schema, blocks) {
 </html>`
 }
 
-module.exports = gen
+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)
+
+  // First pass over CLI arguments
+  // JSEE-level args
+  const argvAlias = {
+    inputs: 'i',
+    outputs: 'o',
+    description: 'd',
+    port: 'p',
+    version: 'v',
+    fetch: 'f',
+    execute: 'e',
+    cdn: 'c',
+    runtime: 'r',
+  }
+  const argvDefault = {
+    execute: false, // execute the model code on the server
+    fetch: false, // fetch the JSEE runtime from the CDN or local server
+    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
+    verbose: false, // verbose mode
+    cdn: false,
+    runtime: 'auto'
+  }
+  let argv = minimist(pargv, {
+    alias: argvAlias,
+    default: argvDefault,
+    boolean: ['help', 'h'],
+  })
+
+  if (argv.help || argv.h) {
+    console.log(`
+Usage: jsee [schema.json] [options]
+
+Options:
+  -i, --inputs <file>       Input schema file (default: schema.json)
+  -o, --outputs <file>      Output HTML file path
+  -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
+  -e, --execute             Execute model server-side
+  -c, --cdn <url|bool>      Rewrite model URLs for CDN deployment
+  -r, --runtime <mode>      Runtime mode: auto|local|cdn|inline (default: auto)
+      --verbose             Enable verbose logging
+
+Examples:
+  jsee schema.json                  Start dev server with schema
+  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 -p 8080                      Start dev server on port 8080
+
+Documentation: https://jsee.org
+    `.trim())
+    return
+  }
+
+  // Set argv.inputs to the first non-option argument if it exists
+  if (!imported && argv._.length > 0 && !argv.inputs) {
+    argv.inputs = argv._[0]
+  }
+
+  function log (...args) {
+    if (argv.verbose) {
+      console.log('[JSEE CLI]', ...args)
+    }
+  }
+
+  log('Imported:', imported)
+  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)
+
+  let cwd = process.cwd()
+  let inputs = argv.inputs
+  let outputs = argv.outputs
+  let description = argv.description
+  let schema
+  let schemaPath
+  let descriptionTxt = ''
+  let descriptionHtml = ''
+  let jsdocMarkdown = ''
+  let modelFuncs = {}
+
+  // Determine the inputs and outputs
+  // if inputs is a string with js file names, split it into an array
+  if (typeof inputs === 'string') {
+    if (inputs.includes('.js')) {
+      inputs = inputs.split(',')
+    }
+  }
+
+  // if outputs is a string with js file names, split it into an array
+  if (typeof outputs === 'string') {
+    outputs = outputs.split(',')
+  }
+
+  if (inputs.length === 0) {
+    console.error('No inputs provided')
+    process.exit(1)
+  } else if ((inputs.length === 1) && (inputs[0].includes('.json'))) {
+    // Input is json schema
+    // Curren working directory if not provided
+    // schema = require(path.join(cwd, inputs[0]))
+    // switch to fs.readFileSync to reload the schema if it changes
+    schemaPath = inputs[0].startsWith('/') ? inputs[0] : path.join(cwd, inputs[0])
+    schema = JSON.parse(fs.readFileSync(schemaPath, 'utf8'))
+  } else {
+    // Array of js files
+    // Generate schema
+    let jsdocData = jsdoc2md.getTemplateDataSync({ files: inputs.map(f => path.join(cwd, f)) })
+    schema = genSchema(jsdocData)
+    // jsdocMarkdown = jsdoc2md.renderSync({
+    //   data: jsdocData,
+    //   'param-list-format': 'list',
+    // })
+  }
+  log('Schema path:', schemaPath)
+
+  // Second pass over CLI arguments
+  // Iterate over schema inputs and update argv aliases
+  if (schema.inputs) {
+    schema.inputs.forEach((inp, inp_index) => {
+      if (inp.name) {
+        const inputName = sanitizeName(inp.name)
+        if (inp.alias) {
+          argvAlias[inputName] = inp.alias
+        }
+        // Use positional arguments as schema inputs defaults if JSEE CLI is imported
+        if (imported && argv._.length > inp_index) {
+          log('Using positional argument for input:', inputName, argv._[inp_index])
+          argvDefault[inputName] = argv._[inp_index]
+        }
+        // We don't need to duplicate defaults here, as we handle them on the frontend
+        // else if (inp.default) {
+        //   argvDefault[inputName] = inp.default
+        // }
+      }
+    })
+  }
+  // Update argv with the new aliases and defaults
+  argv = minimist(pargv, {
+    alias: argvAlias,
+    default: argvDefault,
+  })
+
+  // Now deactivate the inputs present in argv
+  // If you set parameter on the command line, it should not be editable in the GUI
+  // E.g. file selected
+  const dataFromArgvWithoutFileLoading = getDataFromArgv(schema, argv, false)
+  log('Data from argv without file loading:', dataFromArgvWithoutFileLoading)
+  if (schema.inputs) {
+    schema.inputs.forEach(inp => {
+      // Here data contains unsanitized input names
+      if (inp.name in dataFromArgvWithoutFileLoading) {
+        inp.default = dataFromArgvWithoutFileLoading[inp.name]
+        inp.disabled = true // Deactivate the input if it's present in argv
+      }
+    })
+  }
+  log('Argv:', argv)
+
+  // Initially in argv.fetch branch
+  // Check if schema has model, convert to array if needed
+  if (!schema.model) {
+    // console.error('No model found in schema')
+    // process.exit(1)
+    // It's still valid schema, can be only render function or vis of inputs/outputs
+    schema.model = [] 
+  }
+  if (!Array.isArray(schema.model)) {
+    schema.model = [schema.model]
+  }
+
+  // Server-side execution
+  // If execute is true, we will prepare the model functions to run on the server side
+  // Schema model will be updated with the server url and POST method
+  if (argv.execute) {
+    await Promise.all(schema.model.map(async m => {
+      log('Preparing a model to run on the server side:', m.name, m.url)
+      const target = require(path.join(schemaPath ? path.dirname(schemaPath) : cwd, m.url))
+      modelFuncs[m.name] = await getModelFuncJS(m, target, {log})
+      m.type = 'post'
+      m.url = `/${m.name}`
+      m.worker = false
+    }))
+  } 
+  
+  // Switch to CDN for model files
+  if (argv.cdn) {
+    let cdn = ''
+    console.log(argv)
+    if (typeof argv.cdn === 'string') {
+      cdn = argv.cdn
+    } else if (typeof argv.cdn === 'boolean') {
+      // Check package.json in cwd
+      const packageJsonPath = path.join(cwd, 'package.json')
+      if (fs.existsSync(packageJsonPath)) {
+        const target = require(packageJsonPath)
+        const packageName = target.name
+        cdn = `https://cdn.jsdelivr.net/npm/${packageName}@${target.version}/`
+      } else {
+        console.error(`No package.json found: ${packageJsonPath}`)
+        process.exit(1)
+      }
+    } else {
+      console.error('Invalid CDN argument. Use --cdn <url> or --cdn true to use package.json version.')
+      process.exit(1)
+    }
+    log('Using CDN for model files:', cdn)
+    schema.model.forEach(m => {
+      if (m.url) {
+        // If url is relative, make it absolute
+        if (!m.url.startsWith('http')) {
+          m.url = path.join(cdn, m.url)
+          log(`Updated ${m.name} model URL to: ${m.url}`)
+        }
+      }
+    })
+  }
+
+  log('Schema:', schema)
+
+  // Generate description block
+  if (description) {
+    const descriptionMd = fs.readFileSync(path.join(cwd, description), 'utf8')
+    descriptionHtml = converter.makeHtml(descriptionMd)
+
+    if (descriptionMd.includes('---')) {
+      descriptionTxt = descriptionMd
+        .split('---')[0]
+        .replace(/\n/g, ' ')
+        .replace(/\s+/g, ' ')
+        .replace(/#/g, '')
+        .replace(/\*/g, '')
+        .trim()
+    }
+  }
+  descriptionHtml += genHtmlFromSchema(schema)
+
+  // Generate jsee code
+  let jseeHtml = ''
+  let hiddenElementHtml = ''
+  const hasOutputs = Array.isArray(outputs) ? outputs.length > 0 : Boolean(outputs)
+  const runtimeMode = resolveRuntimeMode(argv.runtime, argv.fetch, hasOutputs)
+  if (argv.fetch) {
+    // Fetch jsee code from the CDN or local server
+    const jseeCode = await loadRuntimeCode(argv.version)
+    jseeHtml = `<script>${jseeCode}</script>`
+    // Fetch model files and store them in hidden elements
+    hiddenElementHtml += '<div id="hidden-storage" style="display: none;">'
+
+    const bundleBlocks = collectFetchBundleBlocks(schema)
+    for (let m of bundleBlocks) {
+      if (m.type === 'get' || m.type === 'post') {
+        continue
+      }
+      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')
+        hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${m.url}">${modelCode}</script>`
+      }
+      const imports = toArray(m.imports)
+      if (imports.length) {
+        m.imports = imports
+        for (let [index, i] of imports.entries()) {
+          if (typeof i !== 'string') {
+            continue
+          }
+          const importMeta = resolveFetchImport(i, m.url, cwd)
+          if (!importMeta) {
+            continue
+          }
+          m.imports[index] = importMeta.schemaEntry
+
+          let importCode
+          if (importMeta.localFilePath) {
+            importCode = fs.readFileSync(importMeta.localFilePath, 'utf8')
+          } else {
+            // Create cache directory if it doesn't exist
+            const cacheDir = path.join(os.homedir(), '.cache', 'jsee')
+            fs.mkdirSync(cacheDir, { recursive: true })
+
+            // Create a hash of the importUrl
+            const hash = crypto.createHash('sha256').update(importMeta.importUrl).digest('hex')
+            const cacheFilePath = path.join(cacheDir, `${hash}.js`)
+
+            let useCache = false
+
+            // Check if cache file exists and is less than 1 day old
+            if (fs.existsSync(cacheFilePath)) {
+              const stats = fs.statSync(cacheFilePath)
+              const mtime = new Date(stats.mtime)
+              const now = new Date()
+              const ageInDays = (now - mtime) / (1000 * 60 * 60 * 24)
+
+              if (ageInDays < 1) {
+                log('Using cached import:', importMeta.importUrl)
+                importCode = fs.readFileSync(cacheFilePath, 'utf8')
+                useCache = true
+              }
+            }
+
+            if (!useCache) {
+              const response = await fetch(importMeta.remoteUrl)
+              if (!response.ok) {
+                console.error(`Failed to fetch ${importMeta.remoteUrl}: ${response.statusText}`)
+                process.exit(1)
+              }
+              importCode = await response.text()
+              fs.writeFileSync(cacheFilePath, importCode, 'utf8')
+              log('Fetched and stored to cache:', importMeta.importUrl)
+            }
+          }
+          hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${importMeta.importUrl}">${importCode}</script>`
+        }
+      }
+    }
+    hiddenElementHtml += '</div>'
+  } else {
+    if (runtimeMode === 'inline') {
+      const jseeCode = await loadRuntimeCode(argv.version)
+      jseeHtml = `<script>${jseeCode}</script>`
+    } else if (runtimeMode === 'cdn') {
+      jseeHtml = `<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js"></script>`
+    } else {
+      jseeHtml = argv.version === 'dev'
+        ? `<script src="http://localhost:${argv.port}/dist/jsee.js"></script>`
+        : `<script src="http://localhost:${argv.port}/dist/jsee.runtime.js"></script>`
+    }
+  }
+
+  let socialHtml = ''
+  let gaHtml = ''
+  let orgHtml = ''
+
+  if (schema.page) {
+    if (schema.page.ga) {
+      gaHtml = `
+        <script id="ga-src" async src="https://www.googletagmanager.com/gtag/js?id=${schema.page.ga}"></script>
+        <script id="ga-body">
+          window['ga-disable-${schema.page.ga}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${schema.page.ga}');
+        </script>
+      `
+    }
+
+    // Social media links
+    if (schema.page.social) {
+      // iterate over dict with k, v pairs
+      for (let [name, url] of Object.entries(schema.page.social)) {
+        switch (name) {
+          case 'twitter':
+            socialHtml += `<li><a rel="me" href="https://twitter.com/${url}">Twitter</a></li>`
+            break
+          case 'github':
+            socialHtml += `<li><a rel="me" href="https://github.com/${url}">GitHub</a></li>`
+            break
+          case 'facebook':
+            socialHtml += `<li><a rel="me" href="https://www.facebook.com/${url}">Facebook</a></li>`
+            break
+          case 'linkedin':
+            socialHtml += `<li><a rel="me" href="https://www.linkedin.com/company/${url}">LinkedIn</a></li>`
+            break
+          case 'instagram':
+            socialHtml += `<li><a rel="me" href="https://www.instagram.com/${url}">Instagram</a></li>`
+            break
+          case 'youtube':
+            socialHtml += `<li><a rel="me" href="https://www.youtube.com/${url}">YouTube</a></li>`
+            break
+          default:
+            socialHtml += `<li><a rel="me" href="${url}">${name}</a></li>`
+        }
+      }
+    }
+
+    if (schema.page.org) {
+      orgHtml = `<div class="footer-org"><h4 class="footer-heading"><a href="${schema.page.org.url}">${schema.page.org.name}</a></h4>`
+      if (schema.page.org.description) {
+        orgHtml += `<p>${schema.page.org.description}</p>`
+      }
+      orgHtml += '</div>'
+    }
+
+  }
+
+  const html = template(schema, {
+    descriptionHtml: pad(descriptionHtml, 8, 1),
+    descriptionTxt: descriptionTxt,
+    gaHtml: pad(gaHtml, 2, 1),
+    jseeHtml: jseeHtml,
+    hiddenElementHtml: hiddenElementHtml,
+    socialHtml: pad(socialHtml, 2, 1),
+    orgHtml: pad(orgHtml, 2, 1),
+  })
+
+  if (returnHtml) {
+    // Return the html as a string
+    return html
+  } else if (outputs) {
+    // Store the html in the output file
+    for (let o of outputs) {
+      if (o === 'stdout') {
+        log(html)
+      } else if (o.includes('.html')) {
+        fs.writeFileSync(resolveOutputPath(cwd, o), html)
+      } else if (o.includes('.json')) {
+        fs.writeFileSync(resolveOutputPath(cwd, o), JSON.stringify(schema, null, 2))
+      } else if (o.includes('.md')) {
+        fs.writeFileSync(resolveOutputPath(cwd, o), genMarkdownFromSchema(schema))
+      } else {
+        console.error('Invalid output file:', o)
+      }
+    }
+  } else {
+    // Serve the html
+    const express = require('express')
+    const app = express()
+    app.use(express.json())
+    if (argv.execute) {
+      // Create post endpoint for executing the model
+      schema.model.forEach(m => {
+        app.post(m.url, (req, res) => {
+          log(`Executing model: ${m.name}`)
+          if (m.name in modelFuncs) {
+            const modelFunc = modelFuncs[m.name]
+            try {
+              const dataFromArgv = getDataFromArgv(schema, argv)
+              const dataFromGUI = req.body
+              const data = { ...dataFromGUI, ...dataFromArgv }
+              log('Data for model execution:', data)
+              const result = modelFunc(data)
+              res.json(result)
+              log(`Model ${m.name} executed successfully: `, result)
+            } catch (error) {
+              console.error('Error executing model:', error)
+              res.status(500).json({ error: error.message })
+            }
+          }
+        })
+        log('Model execution endpoints created:', m.url)
+      })
+    }
+    app.get('/', async (req, res) => {
+      log('Serving index.html')
+      res.send(await gen(pargv, true))
+    })
+    // app.get('/dist/jsee.runtime.js', (req, res) => {
+    //   // __dirname points to this file location (it's jsee/src/cli.js, likely in node_modules)
+    //   // so we need to go up one level to get to the dist folder with jsee.runtime.js
+    //   const pathToJSEE = path.join(__dirname, '..', 'dist', 'jsee.runtime.js')
+    //   log(`Serving jsee.runtime.js from: ${pathToJSEE}`)
+    //   res.sendFile(pathToJSEE)
+    // })
+    app.use('/dist', express.static(path.join(__dirname, '..', 'dist'))) // Serve static files from the dist folder
+    // app.use(express.static(cwd))
+    // app.use(express.static(require.main.path)) // Serve static files from the main module path
+    // app.use(express.static(path.join(require.main.path, '..'))) // Serve static files from the parent directory of the main module path
+    app.use(express.static(schemaPath ? path.dirname(schemaPath) : cwd)) // Serve static files from the schema path or current working directory
+    app.listen(argv.port, () => {
+      console.log(`JSEE app is running: http://localhost:${argv.port}`)
+    })
+  }
+}
+
+module.exports = gen
+module.exports.collectFetchBundleBlocks = collectFetchBundleBlocks
+module.exports.resolveFetchImport = resolveFetchImport
+module.exports.resolveRuntimeMode = resolveRuntimeMode
+module.exports.resolveOutputPath = resolveOutputPath