npm - @jseeio/jsee - Versions diffs - 0.4.2 → 0.8.1 - Mend

@jseeio/jsee 0.4.2 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/CHANGELOG.md +96 -0
package/LICENSE +21 -0
package/README.md +583 -55
package/dist/2b3e1faf89f94a483539.png +0 -0
package/dist/416d91365b44e4b4f477.png +0 -0
package/dist/8f2c4d11474275fbc161.png +0 -0
package/dist/jsee.core.js +1 -0
package/dist/jsee.full.js +1 -0
package/dist/jsee.runtime.js +2 -1
package/package.json +84 -18
package/src/app.js +127 -32
package/src/browser-bundle-node.js +9 -0
package/src/cli.js +479 -67
package/src/extended-imports.js +11 -0
package/src/main.js +232 -44
package/src/overlay.js +26 -1
package/src/utils.js +386 -16
package/templates/common-inputs.js +88 -0
package/templates/common-outputs.js +340 -4
package/templates/minimal-app.vue +367 -0
package/templates/minimal-input.vue +573 -0
package/templates/minimal-output.vue +426 -0
package/templates/virtual-table.vue +194 -0
package/.claude/settings.local.json +0 -15
package/.eslintrc.js +0 -38
package/AGENTS.md +0 -65
package/CLAUDE.md +0 -5
package/CNAME +0 -1
package/_config.yml +0 -26
package/dist/jsee.js +0 -1
package/dump.sh +0 -23
package/jest-puppeteer.config.js +0 -14
package/jest.config.js +0 -8
package/jest.unit.config.js +0 -8
package/jsee.dump.txt +0 -5459
package/load/index.html +0 -52
package/templates/bulma-app.vue +0 -242
package/templates/bulma-input.vue +0 -125
package/templates/bulma-output.vue +0 -101
package/test/arrow-main.html +0 -18
package/test/arrow-worker.html +0 -18
package/test/class.html +0 -22
package/test/code.html +0 -25
package/test/codew.html +0 -25
package/test/example-class.js +0 -8
package/test/example-sum.js +0 -3
package/test/fixtures/lodash-like.js +0 -15
package/test/fixtures/upload-sample.csv +0 -3
package/test/importw.html +0 -28
package/test/minimal.html +0 -14
package/test/minimal1.html +0 -13
package/test/minimal2.html +0 -15
package/test/minimal3.html +0 -10
package/test/minimal4.html +0 -22
package/test/pipeline.html +0 -52
package/test/python.html +0 -41
package/test/runtime-arrow.html +0 -18
package/test/string.html +0 -26
package/test/stringw.html +0 -29
package/test/sum.schema.json +0 -17
package/test/sumw.schema.json +0 -15
package/test/test-basic.test.js +0 -630
package/test/test-python.test.js +0 -23
package/test/unit/cli-fetch.test.js +0 -229
package/test/unit/utils.test.js +0 -908
package/webpack.config.js +0 -101

package/load/index.html DELETED Viewed

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>JSEE Schema Loader</title>
-    <style>
-      body {
-        font-family: sans-serif;
-      }
-      #jsee-container {
-        max-width: 1100px;
-        margin: auto;
-      }
-      #loader-tip {
-        max-width: 1100px;
-        margin: 8px auto 0;
-        font-size: 12px;
-        color: #666;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="loader-tip">Tip: schema inputs can be prefilled via query params, including file URLs that now auto-load.</div>
-    <div id="jsee-container"></div>
-    <script src="/dist/jsee.js" type="text/javascript"></script>
-    <script>window.JSEE || document.write('<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@latest/dist/jsee.runtime.js">\x3C/script>')</script>
-    <script>window.JSEE || document.write('<script src="https://unpkg.com/@jseeio/jsee@latest/dist/jsee.runtime.js">\x3C/script>')</script>
-    <script>
-      var params = new URLSearchParams(window.location.search)
-      var schemaStr = params.get('s')
-      if (schemaStr) {
-        let schema
-        try {
-          schema = JSON.parse(schemaStr);
-        } catch (e) {
-          schema = schemaStr.includes('/') ? schemaStr : '/apps/' + schemaStr + '/schema.json'
-        }
-        console.log('[Loader] Schema:', schemaStr, schema)
-        try {
-          const env = new JSEE({
-            container: document.getElementById('jsee-container'),
-            schema: schema
-          })
-        } catch (error) {
-          console.error('[Loader] Failed to initialize JSEE:', error)
-          document.getElementById('jsee-container').innerHTML = '<pre style="color:#f14668;padding:16px;border:1px solid #f14668;border-radius:6px;">Failed to initialize schema. Check browser console for details.</pre>'
-        }
-      }
-    </script>
-  </body>
-</html>

package/templates/bulma-app.vue DELETED Viewed

@@ -1,242 +0,0 @@
-<style lang="scss" scoped>
-  :deep(.jsee-app) {
-    @import "../node_modules/vue3-json-viewer/dist/index.css";
-    @import "../node_modules/bulma/sass/base/_all.sass";
-    @import "../node_modules/bulma/sass/utilities/_all.sass";
-    @import "../node_modules/bulma/sass/form/_all.sass";
-    @import "../node_modules/bulma/sass/grid/_all.sass";
-    @import "../node_modules/bulma/sass/elements/_all.sass";
-    @import "../node_modules/bulma/sass/helpers/_all.sass";
-    @import "../node_modules/bulma/sass/components/card.sass";
-    @import "../node_modules/bulma/sass/layout/section.sass";
-    font-family: sans-serif;
-    #overlay {
-      display: none;
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      right: -1px;
-      bottom: -1px;
-      background: #F5F5F5;
-      opacity: .6;
-      z-index: 1000;
-      align-items: center;
-      justify-content: center;
-    }
-    .column {
-      box-sizing: border-box;
-    }
-    .card {
-      box-sizing: content-box;
-    }
-    #inputs .column {
-      padding: 0 10px;
-    }
-    #outputs .column {
-      padding: 0 10px;
-    }
-    .card-header {
-      box-shadow: none;
-      border-bottom: 1px solid #ececec;
-    }
-    .card-header-title {
-      font-weight: 400;
-    }
-    .card-header-title, .card-header-icon {
-      padding: 0.75rem 1.5rem;
-      cursor: initial;
-    }
-    .card-header-icon button {
-      border: none;
-      margin: 0 0 0 5px;
-      padding: 0px 7px;
-      height: auto;
-      &:hover {
-        background-color: whitesmoke;
-      }
-    }
-    .card-footer {
-      /* background: linear-gradient(62deg, rgba(0,171,209,1) 0%, rgba(0,209,178,1) 100%); */
-      background: linear-gradient(90deg, #4395d0 0%, #00d1b2 100%);
-    }
-    .card-footer.reset {
-      background: linear-gradient(90deg, #ff577f 0%, #4395d0 50%, #00d1b2 100%);
-    }
-    .card-footer .button {
-      background: none;
-      padding: .75rem 1.5rem;
-      border: none !important;
-      border-radius: .25rem !important;
-      font-size: 14px;
-      font-weight: 400;
-    }
-    .reset-button {
-      justify-content: left;
-    }
-    .reset-button:hover {
-      background-color: transparent !important;
-      background: linear-gradient(90deg, #ff3a56 0%, #fff0 80%);
-      box-shadow: -5px 0px 5px -2px #fd4c7e30;
-    }
-    .card-footer .run-button {
-      border-left: 1px dashed white;
-      justify-content: right;
-    }
-    .card-footer .run-button:hover {
-      background-color: transparent !important;
-      background: linear-gradient(270deg, #02dbb2 0%, #fff0 80%);
-      box-shadow: 5px 0px 5px -2px #48ffd43b;
-    }
-    .card-footer .run-button.running .run-icon {
-      color: #016c5c !important;
-    }
-    .example-button {
-      margin-top: 3px;
-      padding: 5px 10px;
-      border-radius: 5px !important;
-      height: auto;
-    }
-    .field {
-      margin-bottom: 5px;
-    }
-    .input, .textarea, .select select {
-      border-color: #e8e8e8;
-      border-top-left-radius: 0;
-    }
-    .input:focus, .textarea:focus, .select select:focus, .is-focused.input, .is-focused.textarea, .select select.is-focused, .input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active {
-      border-color: #7ab8e6;
-      box-shadow: 0 0 0 0.125em rgba(72, 139, 199, 0.25);
-    }
-    #inputs .field > label:first-child {
-      background: #f2f2f2;
-      padding: 1px 5px;
-      margin-top: 2px;
-      display: inline-block;
-      border-top-left-radius: 5px;
-      border-top-right-radius: 5px;
-    }
-  }
-</style>
-<template>
-  <section>
-    <div class="jsee-app">
-      <div class="columns">
-        <div class="column is-full" id="$parent.model" v-if="$parent.model">
-          <h2 class="title is-2" v-if="$parent.model.title">{{ $parent.model.title }}</h2>
-          <p v-if="$parent.model.description">{{ $parent.model.description }}</p>
-        </div>
-      </div>
-      <div class="columns is-multiline">
-        <div class="column" v-bind:class="($parent.design && $parent.design.grid && ($parent.design.grid.length > 0)) ? 'is-' + $parent.design.grid[0] : ''">
-          <!-- Inputs -->
-          <div class="card bordered">
-            <div class="card-content columns is-multiline" id="inputs" v-if="$parent.inputs && $parent.inputs.length > 0">
-              <div
-                v-for="(input, index) in $parent.inputs"
-                :key="index"
-                v-bind:class="[
-                  'column',
-                  input.columns ? 'is-' + input.columns : 'is-12',
-                  input.columnsMobile ? 'is-' + input.columnsMobile + '-mobile' : '',
-                  input.columnsTablet ? 'is-' + input.columnsTablet + '-tablet' : '',
-                  input.columnsDesktop ? 'is-' + input.columnsDesktop + '-desktop' : '',
-                ]"
-              >
-                <vue-input
-                  v-bind:input="input"
-                  v-if="input.display !== false && $parent.display(index)"
-                  v-on:inchange="$parent.run()"
-                ></vue-input>
-              </div>
-              <pre v-if="$parent.model.debug">{{ $parent.inputs }}</pre>
-              <!-- <button class="button is-primary" id="run"><span>▸</span>&nbsp;&nbsp;Run</button> -->
-            </div>
-            <footer class="card-footer" v-bind:class="{ reset: $parent.dataChanged }">
-              <button
-                v-on:click="$parent.reset()"
-                v-if="$parent.inputs && $parent.inputs.length > 0 && $parent.dataChanged"
-                class="button reset-button icon card-footer-item is-danger is-small"
-              >
-                <span class="rest-icon has-text-danger-dark">✕</span>
-                <span>&nbsp; Reset</span>
-              </button>
-              <button
-                v-on:click="$parent.run('run')"
-                class="button run-button icon card-footer-item is-primary is-small"
-                v-bind:class="{ running: $parent.clickRun }"
-              >
-                <span>&nbsp; Run &nbsp;</span>
-                <span class="run-icon has-text-primary-dark">▸</span>
-              </button>
-            </footer>
-          </div>
-          <!-- Examples -->
-          <div v-if="$parent.examples">
-            <p style="margin-top: 20px">Examples</p>
-            <div v-for="(example, index) in $parent.examples">
-              <button
-                v-on:click="$parent.reset(example)"
-                class="button is-small example-button"
-                style="white-space: normal; width: 100%; text-align: left; font-family: monospace; font-size: 10px;"
-              >
-                {{ JSON.stringify(example, null, 2) }}
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="column" id="outputs" v-bind:class="($parent.design && $parent.design.grid && ($parent.design.grid.length > 1)) ? 'is-' + $parent.design.grid[1] : ''">
-          <!-- Outputs -->
-          <div v-if="$parent.outputs">
-            <div class="columns is-multiline">
-              <div
-                v-for="(output, index) in $parent.outputs"
-                :key="index"
-                v-bind:class="[
-                  'column',
-                  output.columns ? 'is-' + output.columns : 'is-12',
-                  output.columnsMobile ? 'is-' + output.columnsMobile + '-mobile' : '',
-                  output.columnsTablet ? 'is-' + output.columnsTablet + '-tablet' : '',
-                  output.columnsDesktop ? 'is-' + output.columnsDesktop + '-desktop' : '',
-                ]"
-              >
-                <vue-output
-                  v-bind:output="output"
-                  v-on:notification="$parent.notify($event)"
-                ></vue-output>
-              </div>
-            </div>
-            <pre v-if="$parent.debug">{{ $parent.outputs }}</pre>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script>
-  export default {}
-</script>

package/templates/bulma-input.vue DELETED Viewed

@@ -1,125 +0,0 @@
-<style lang="scss" scoped>
-  .control {
-    margin-top: -1px;
-  }
-</style>
-<template>
-  <div class="field" v-if="input.type == 'int' || input.type == 'float' || input.type == 'number'">
-    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
-    <div class="control">
-      <input
-        v-model="input.value"
-        v-bind:id="input.name"
-        v-bind:step="input.type == 'int' ? 1 : 0.001"
-        v-bind:placeholder="input.placeholder ? input.placeholder : input.name"
-        v-bind:min="input.min"
-        v-bind:max="input.max"
-        v-bind:disabled="input.disabled"
-        v-on:change="changeHandler"
-        class="input"
-        type="number"
-      >
-    </div>
-  </div>
-  <div class="field"  v-if="input.type == 'string' || input.type == 'color'">
-    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
-    <div class="control">
-      <input
-        v-model="input.value"
-        v-bind:id="input.name"
-        v-bind:placeholder="input.placeholder ? input.placeholder : input.name"
-        v-on:change="changeHandler"
-        class="input"
-      >
-    </div>
-  </div>
-  <div class="field"  v-if="input.type == 'text'">
-    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
-    <div class="control">
-      <textarea
-        v-model="input.value"
-        v-bind:id="input.name"
-        v-bind:placeholder="input.placeholder ? input.placeholder : input.name"
-        v-on:change="changeHandler"
-        class="textarea"
-        ></textarea>
-    </div>
-  </div>
-  <div class="field" v-if="input.type == 'checkbox' || input.type == 'bool'">
-    <div class="control">
-      <label class="checkbox is-size-7">
-        <input
-          v-model="input.value"
-          v-bind:id="input.name"
-          v-on:change="changeHandler"
-          type="checkbox"
-        >
-        {{ input.name }}
-      </label>
-    </div>
-  </div>
-  <div class="field" v-if="input.type == 'categorical' || input.type == 'select'">
-    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
-    <div class="control">
-      <div class="select is-fullwidth">
-        <select
-          v-model="input.value"
-          v-bind:id="input.name"
-          v-on:change="changeHandler"
-        >
-          <option
-            v-for="(option, oi) in input.options"
-          >{{ option }}</option>
-        </select>
-      </div>
-    </div>
-  </div>
-  <div class="field" v-if="input.type == 'file'">
-    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
-    <div class="control">
-      <div class="file has-name is-fullwidth" v-bind:class="{ 'is-primary': !input.file }" v-if="!input.disabled">
-        <file-picker
-          v-model="input.value"
-          v-model:url="input.url"
-          v-bind:raw="input.raw === true || input.stream === true"
-          v-bind:autoload="input.urlAutoLoad === true"
-          v-on:change="changeHandler"
-        ></file-picker>
-      </div>
-      <div class="file has-name is-fullwidth" v-bind:class="{ 'is-primary': !input.file }" v-else>
-        <input
-          class="input"
-          v-bind:id="input.name"
-          v-bind:value="input.default"
-          disabled
-        >
-      </div>
-    </div>
-  </div>
-  <div class="field"  v-if="input.type == 'action' || input.type == 'button'">
-    <button
-      v-on:click="$parent.$parent.run(input.name.toLowerCase().replace(/ /g, '_'))"
-      class="button is-small"
-      style="width: 100%; padding: 5px 0; margin-top: 8px; text-align: left;"
-    >
-      <span>&nbsp; {{ input.title ? input.title : input.name }} &nbsp;</span>
-    </button>
-  </div>
-  <div class="field is-horizontal" v-if="input.type == 'group'">
-    <div class="field-body">
-      <vue-input v-for="(el, index) in input.elements" v-bind:input="el" ></vue-input>
-    </div>
-  </div>
-</template>
-<script>
-  export { component as default } from "./common-inputs.js"
-</script>

package/templates/bulma-output.vue DELETED Viewed

@@ -1,101 +0,0 @@
-<style scoped>
-/* Quickly stretch the card when browser goes native full‑screen
-   (actual FS API above) OR when the helper class is present. */
-   /*
-   .is-fullscreen {
-    position: fixed;
-    inset: 0;
-    z-index: 9999;
-    width: 100vw;
-    height: 100vh;
-    overflow: auto;
-    background: #fff;
-  }
-  .is-fullscreen .card-content, .is-fullscreen .content {
-    height: 100% !important;
-  }
-  */
-  /* Full‑screen override */
-.is-fullscreen {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  width: 100vw;
-  height: 100vh;
-  background: #fff;
-  display: flex;
-  flex-direction: column;
-}
-.is-fullscreen .card-content {
-  flex: 1 1 auto;
-  overflow: auto;
-}
-/* Ensure Plotly div or other content can grow */
-.is-fullscreen .content, .is-fullscreen .custom-container {
-  height: 100% !important;
-}
-</style>
-<template>
-  <div
-    class="card mb-5"
-    v-show="!(typeof output.value === 'undefined')"
-    :class="{ 'is-fullscreen': isFullScreen }"
-    ref="cardRoot"
-  >
-    <header class="card-header">
-      <p class="card-header-title is-size-6" v-if="output.name">
-        {{ output.name }}
-      </p>
-      <!-- <p class="card-header-icon" v-if="output.type != 'function'"> -->
-      <p class="card-header-icon">
-        <button class="button is-small" v-on:click="save()">Save</button>
-        <button class="button is-small" v-on:click="copy()">Copy</button>
-        <button
-          class="button is-small"
-          v-if="!isFullScreen"
-          @click="toggleFullScreen"
-          title="Expand to full screen"
-        >
-          Fullscreen
-        </button>
-        <button
-          class="button is-small"
-          v-else
-          @click="toggleFullScreen"
-          title="Exit full screen"
-        >
-          Close
-        </button>
-      </p>
-    </header>
-    <div class="card-content">
-      <div class="content" :id="outputName" v-if="(output.type == 'svg') || (output.type == 'html')">
-        <div v-html="output.value"></div>
-      </div>
-      <div class="content" :id="outputName" v-else-if="output.type == 'object'">
-        <json-viewer :value="output.value" copyable sort />
-      </div>
-      <div class="content" :id="outputName" v-else-if="output.type == 'code'">
-        <pre>{{ output.value }}</pre>
-      </div>
-      <div class="content" :id="outputName" v-else-if="output.type == 'function'">
-        <div class="custom-container" ref="customContainer"></div>
-      </div>
-      <div class="content" :id="outputName" v-else-if="output.type == 'blank'">
-        <!-- will be filled by custom render function -->
-      </div>
-      <div class="content" :id="outputName" v-else>
-        <pre>{{ output.value }}</pre>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  export { component as default } from "./common-outputs.js"
-</script>

package/test/arrow-main.html DELETED Viewed

@@ -1,18 +0,0 @@
-<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 DELETED Viewed

@@ -1,18 +0,0 @@
-<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/class.html DELETED Viewed

@@ -1,22 +0,0 @@
-<html>
-  <div id="jsee-container">
-  <script src="/dist/jsee.js"></script>
-  <script>
-    new JSEE({
-      schema: {
-        'model': {
-          'name': 'Doubler',
-          'method': 'double',
-          'type': 'class',
-          'container': 'args',
-          'url': '/test/example-class.js',
-        },
-        'inputs': [
-          { 'name': 'b', 'type': 'int', 'default': 100 }
-        ]
-      },
-      container: '#jsee-container'
-    })
-  </script>
-</html>

package/test/code.html DELETED Viewed

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

package/test/codew.html DELETED Viewed

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

package/test/example-class.js DELETED Viewed

@@ -1,8 +0,0 @@
-class Doubler {
-  constructor() {
-    this.a = 2
-  }
-  double(b) {
-    return this.a * b
-  }
-}

package/test/example-sum.js DELETED Viewed

@@ -1,3 +0,0 @@
-function sum (a, b) {
-  return a + b
-}

package/test/fixtures/lodash-like.js DELETED Viewed

@@ -1,15 +0,0 @@
-(function (root) {
-  function kebabCase (input) {
-    if (typeof input !== 'string') {
-      return ''
-    }
-    return input
-      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-      .replace(/[^a-zA-Z0-9]+/g, '-')
-      .replace(/^-+|-+$/g, '')
-      .toLowerCase()
-  }
-  root._ = root._ || {}
-  root._.kebabCase = kebabCase
-})(typeof self !== 'undefined' ? self : window)

package/test/fixtures/upload-sample.csv DELETED Viewed

@@ -1,3 +0,0 @@
-name,age
-Alice,30
-Bob,25