@jseeio/jsee
v0.3.4
Published
JavaScript Execution Environment
Downloads
80
Readme
Focus on code, not UI
Minimal example:
<html>
<div id="jsee-container">
<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@latest/dist/jsee.runtime.js"></script>
<script>
function mul (a, b) {
return a * b
}
new JSEE(mul, '#jsee-container')
</script>
</html>
↳ Result
JavaScript Execution Environment
JSEE is a browser-based environment for processing tasks. It creates a graphical interface, executes code in a web worker or via API, bridges all pieces together into a user-friendly web app. In some cases, JSEE does all of that automatically, without any configuration. And when the configuration is required, it's just one JSON file with an intuitive structure.
Inputs and outputs
JSEE works best with functional tasks and one-way flow from inputs to outputs (i.e., inputs → processing → outputs). You can also extend it to more complex scenarios, like inputs → preprocessing → updated inputs → processing → outputs or inputs → processing → outputs → custom renderer. Even though many computational tasks have a functional form, some problems require more complex interactions between a user interface and code. For such cases, JSEE is probably too constrained. That makes it not as universal as R's shiny or Python's streamlit.
How it works
Instead of dealing with raw HTML tags, input elements or charts, JSEE makes it possible to work on a higher level and describe only inputs
and outputs
in a JSON schema. It similarly handles code execution, by checking the model
part of that JSON object. Those three parts are the most important for the future app. In many cases JSEE can generate a new schema automatically by analyzing the code alone. For example, it's possible to extract a list function arguments and use them as model inputs. When JSEE receives the JSON schema it creates a new Vue app based on it and initializes a new worker for code execution. The final app can take inputs from a user, parse files, load needed libraries, orchestrate communication between code and GUI, use Web Workers to run everything smoothly
Schema Model Render*
DEV -► json js/py js
| | |
┌──▼────────▼────────▼───┐
│ new JSEE (...) │
└────────────────────────┘
| |
┌──▼──┐ ┌──────▼─────┐ ◄~ tf.js
USER ◄-► │ GUI │ ◄-► │ Model │ ◄~ pyodide
└─────┘ └────────────┘ ◄~ wasm
Vue³ WebWorker*
* - optional
JSEE takes a schema object that contains three main blocks:
model
- describes a model/script/API (its location, is it a function or class, should it be called automatically on every GUI change or not)inputs
- list of inputs and their descriptionsoutputs
- list of outputs and their descriptions
Extra blocks can be provided for further customization
render
- visualization part (optional). Defines custom rendering code.design
- overall appearance (optional). Defines how the app looks overwriting defaults.imports
- a list of urls (optional). Defines a list of scripts to load before the model is initialized."imports": [ "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs", "https://cdn.jsdelivr.net/pyodide/v0.17.0/full/pyodide.js" ]
examples
- a list of examples (optional). Defines a list of examples that can be used to overwrite inputs."examples": [ { "input": "My name is Anton and I am" }, ]
Playground
Schema
model
- Contains main parameters of the model/scripturl
(string) - URL of a JS/Python script or POST/GET APIcode
(function) - It's possible to pass code directly to JSEE instead of using an URLname
(string) - Name of the executed object. Default value is taken fromurl
orcode
type
(string, default -function
) - What kind of script is loaded. Influences how the code is initializated. Possible values:function
class
async-function
async-init
py
tf
method
(string) - Iftype
isclass
,method
defines the name of the class method to call during evaluationcontainer
(string) - How input values are passed to the function/method:object
(default) - Pass inputs wrapped in an object, i.e.{'x': 1, 'y': 2}
args
- Pass inputs as separate arguments
worker
(boolean) - Iftrue
, JSEE initializes a Web Worker to run the script
render
- Custom rendering script. Instead of relying on JSEE for output visualization, you can provide a custom script that visualizes the results. That can be useful if you rely on custom libs for plotting.design
- Design parameterslayout
- Layout for the model/input/output blocks. If it's empty and the JSEE container is not, JSEE uses inner HTML as a template. If the container is empty too, it uses the defaultblocks
template.framework
- Design framework to use. If a JavaScript object with the same name is present in a global context, JSEE loads it too (using Vue'suse
method).
inputs
- Inputs definition.name
* - Name of the inputtype
* - Type. Possible types:int
,float
ornumber
- Numberstring
- Stringtext
- Textareacheckbox
orbool
- Checkboxselect
orcategorical
- Select (one of manyoptions
)file
- File Inputaction
orbutton
- Button (itsname
will be passed as acaller
to the model)
default
- Default value
outputs
- Outputs definitionname
* - Name of the outputtype
* - Type. Possible types:object
- JavaScript Objecthtml
orsvg
- SVG elementcode
- Code blockfunction
- Render function. Rather than returning a value, a model returns a function that JSEE will call passing the container element.
examples
- List of examplesautorun
(boolean, default:false
) - Defines if the script should be evaluated on each input change eventinterval
(number, default:0
) - Defines the interval between script evaluations (in milliseconds). If set to0
, the script is evaluated only once.
JSEE is a reactive branch of StatSim's Port. It's still work in progress. Expect API changes.
Changelog
0.3.4
JSEE:
- [x] Add
columns
parameter to theinputs
,outputs
blocks (making it possible to create multi-column layouts, like simple dashboards) - [x] Add
function
output type (for custom renderers which take a container element as an argument) - [x] Add
dom-to-image
library for exporting dynamic output blocks to PNG - [x] Support for inputs to be set with url parameters (e.g.
?input1=1&input2=2
)
HTML Generator:
- [x] Add
latex
and table output in the markdown renderer - [x] Cache
import
scripts to avoid multiple loads when--fetch
is used - [x] Infer
description
from the markdown and update html<head>
with it - [x] Update
social
,org
,ga
blocks - [x] Small layout fixes
0.3.1
- [x] Add
download
method to jsee object - [x] Add
bin
folder withcmd.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 isfalse
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