@jseeio/jsee 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "JavaScript Execution Environment",
   "main": "dist/jsee.js",
   "unpkg": "dist/jsee.js",
@@ -33,6 +33,7 @@
     "@mdi/font": "^6.5.95",
     "bulma": "^0.9.3",
     "csv-parse": "^4.6.1",
+    "dom-to-image": "^2.6.0",
     "element-plus": "^1.3.0-beta.1",
     "express": "^4.19.2",
     "file-saver": "^2.0.2",
@@ -40,7 +41,8 @@
     "jsdoc-to-markdown": "^8.0.1",
     "minimist": "^1.2.8",
     "notyf": "^3.10.0",
-    "showdown": "^2.1.0",
+    "showdown": "^1.9.1",
+    "showdown-katex": "^0.8.0",
     "vue": "^3.2.47",
     "vue-style-loader": "^4.1.3",
     "vue3-json-viewer": "^2.2.2",

package/src/main.js

@@ -347,12 +347,57 @@ export default class JSEE {
       this.schema.inputs = getInputs(this.model[0])
     }
 
-    // Relies on input check
-    // Set default input type
+    // Read URL params, e.g. ?input1=1&input2=2
+    const urlParams = new URLSearchParams(window.location.search)
+    log('URL params:', urlParams)
+
+    // Iterate over inputs and set values from URL
     this.schema.inputs.forEach(input => {
+      // Set default input type
       if (typeof input.type === 'undefined') {
         input.type = 'string'
       }
+
+      // Get input value from URL params
+      let paramValue = null
+      if (urlParams.has(input.name)) {
+        paramValue = urlParams.get(input.name);
+      } else if (input.alias) {
+        // Handle alias as either a string or an array of strings
+        if (Array.isArray(input.alias)) {
+          for (let alias of input.alias) {
+            if (urlParams.has(alias)) {
+              paramValue = urlParams.get(alias);
+              break;
+            }
+          }
+        } else if (typeof input.alias === 'string' && urlParams.has(input.alias)) {
+          paramValue = urlParams.get(input.alias);
+        }
+      }
+      log(`Param value for ${input.name}:`, paramValue)
+
+      // Set input value from URL param with type conversion
+      if (paramValue !== null) {
+        switch (input.type) {
+          case 'number':
+            paramValue = Number(paramValue);
+            break;
+          case 'boolean':
+            paramValue = paramValue === 'true';
+            break;
+          case 'json':
+            try {
+              paramValue = JSON.parse(paramValue);
+            } catch (e) {
+              console.error(`Failed to parse JSON for input ${input.name}:`, e);
+            }
+            break;
+          default:
+            break;
+        }
+        input.default = paramValue
+      }
     })
     log('Inputs are:', this.schema.inputs)
   }

package/templates/bulma-app.vue

@@ -26,6 +26,21 @@
       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;
@@ -140,16 +155,24 @@
         <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" id="inputs" v-if="$parent.inputs && $parent.inputs.length > 0">
-              <ul>
-                <li v-for="(input, index) in $parent.inputs">
-                  <vue-input
-                    v-bind:input="input"
-                    v-if="input.display !== false && $parent.display(index)"
-                    v-on:inchange="$parent.run()"
-                  ></vue-input>
-                </li>
-              </ul>
+            <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>
@@ -188,8 +211,23 @@
         <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 v-for="(output, index) in $parent.outputs">
-              <vue-output v-bind:output="output" v-on:notification="$parent.notify($event)"></vue-output>
+            <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.model.debug">{{ $parent.outputs }}</pre>
           </div>

package/templates/bulma-output.vue

@@ -4,21 +4,25 @@
       <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>
       </p>
     </header>
     <div class="card-content">
-      <div class="content" v-if="output.type == 'svg'">
+      <div class="content" v-if="(output.type == 'svg') || (output.type == 'html')">
         <div v-html="output.value"></div>
       </div>
       <div class="content" v-else-if="output.type == 'object'">
         <json-viewer :value="output.value" copyable sort />
       </div>
-      <div class="content" v-if="output.type == 'code'">
+      <div class="content" v-else-if="output.type == 'code'">
         <pre>{{ output.value }}</pre>
       </div>
+      <div class="content" v-else-if="output.type == 'function'">
+        <div ref="customContainer"></div>
+      </div>
       <div class="content" v-else>
         <pre>{{ output.value }}</pre>
       </div>

package/templates/common-outputs.js

@@ -1,4 +1,5 @@
 import { saveAs } from 'file-saver'
+import domtoimage from 'dom-to-image'
 
 const Blob = window['Blob']
 
@@ -11,27 +12,82 @@ function stringify (v) {
 const component = {
   props: ['output'],
   emits: ['notification'],
+  mounted() {
+    this.executeRenderFunction()
+  },
+  updated() {
+    this.executeRenderFunction()
+  },
+  computed: {
+    isRenderFunction() {
+      return typeof this.output.value === 'function'
+    }
+  },
   methods: {
     save () {
       // Prepare filename
       let filename
+      let extension
       if (this.output.filename) {
         filename = this.output.filename
       } else {
         let name = this.output.name ? this.output.name : 'output'
-        let extension = this.output.type === 'svg' ? 'svg': 'txt'
+        switch (this.output.type) {
+          case 'function':
+            extension = 'png'
+            break
+          case 'svg':
+            extension = 'svg'
+            break
+          default:
+            extension = 'txt'
+        }
         filename = name + '.' + extension
       }
 
       // Prepare blob
+      if (this.output.type === 'function') {
+        domtoimage.toBlob(this.$refs.customContainer)
+          .then(blob => {
+            saveAs(blob, filename)
+          })
+      }
       let value = stringify(this.output.value)
       let blob = new Blob([value], {type: 'text/plain;charset=utf-8'})
       saveAs(blob, filename)
     },
     copy () {
-      let value = stringify(this.output.value)
-      navigator.clipboard.writeText(value)
-      this.$emit('notification', 'Copied')
+      if (this.output.type === 'function') {
+        // Copy the image to the clipboard
+        domtoimage.toBlob(this.$refs.customContainer)
+          .then(blob => {
+            const item = new ClipboardItem({ [blob.type]: blob });
+            navigator.clipboard.write([item])
+              .then(() => {
+                this.$emit('notification', 'Image copied to clipboard');
+              })
+              .catch(err => {
+                console.error('Failed to copy image: ', err);
+                this.$emit('notification', 'Failed to copy image');
+              });
+          })
+          .catch(err => {
+            console.error('Failed to generate image blob: ', err);
+            this.$emit('notification', 'Failed to generate image');
+          });
+      } else {
+        let value = stringify(this.output.value)
+        navigator.clipboard.writeText(value)
+        this.$emit('notification', 'Copied')
+      }
+    },
+    executeRenderFunction() {
+      if (this.isRenderFunction && this.$refs.customContainer) {
+        // Clear previous content
+        this.$refs.customContainer.innerHTML = ''
+        // Execute the render function with the container
+        this.output.value(this.$refs.customContainer)
+      }
     }
   },
 }

package/CHANGELOG.md

@@ -1,30 +0,0 @@
-# Changelog
-
-## 0.3.1
-- [x] Add `download` method to jsee object
-- [x] Add `bin` folder with `cmd.js` for easier project building
-
-## 0.2.9
-- [x] Add examples
-- [x] Add imports
-- [x] Add `caller` field to the model input (can be: `run`, `autorun` or a button name)
-- [x] Add `title` field (for buttons rn)
-- [x] If `display` field is `false` the input is not shown
-- [x] If `autorun` is true, then actually autorun the model initially
-
-## 0.2.8
-- [x] Fix no input case
-
-## 0.2.7
-- [x] Show output when result is `0`
-- [x] Updated style for buttons and inputs
-
-## 0.2.6
-- [x] Tests
-- [x] Load schema from query (loader)
-- [x] Reset button appears only after data change
-- [x] Default input type (`string`)
-- [x] Directly load code when running in a window (not code to text)
-- [x] Passing code directly
-
-