@jseeio/jsee 0.2.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.
- package/404.html +22 -0
- package/README.md +60 -0
- package/_config.yml +26 -0
- package/dist/fb93af989abd7020d0c6.svg +5 -0
- package/dist/jsee.js +1 -0
- package/dist/jsee.runtime.js +1 -0
- package/dist/port.js +1 -0
- package/dist/port.runtime.js +1 -0
- package/load.html +31 -0
- package/main.js +449 -0
- package/package.json +51 -0
- package/src/app.js +188 -0
- package/src/overlay.js +33 -0
- package/src/worker.js +113 -0
- package/templates/bulma-app.vue +65 -0
- package/templates/bulma-input.vue +114 -0
- package/templates/bulma-output.vue +38 -0
- package/templates/common-inputs.js +28 -0
- package/templates/common-outputs.js +39 -0
- package/webpack.config.js +94 -0
package/404.html
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Port</title>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
var segmentCount = 1;
|
|
8
|
+
|
|
9
|
+
var l = window.location;
|
|
10
|
+
l.replace(
|
|
11
|
+
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
|
|
12
|
+
l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?s=' +
|
|
13
|
+
l.pathname.slice(1).split('/').slice(segmentCount).join('').replace(/&/g, '~and~') +
|
|
14
|
+
(l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
|
|
15
|
+
l.hash
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
</script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Focus on code, not UI
|
|
2
|
+
|
|
3
|
+
JSEE is a highly opinionated GUI wrapper for processing tasks. Not even close to R's [shiny](https://shiny.rstudio.com/) or Python's [streamlit](https://streamlit.io/). Mostly used in [StatSim Apps](https://statsim.com/#apps) and [JSEE.io](https://jsee.io).
|
|
4
|
+
|
|
5
|
+
JSEE is based on the idea of declarative interface design and reactivity. Instead of writing a "glue" front-end code, you can declare inputs/outputs of a model in a JSON schema and JSEE will do the rest. JSEE creates a Vue app based on the provided schema, parses files, loads needed libraries, orchestrates communication between code and GUI and uses Web Workers to run everything smoothly. It's not a swiss-army knife, not a framework. JSEE solves one specific task - wrapping algorithms in a simple web interface.
|
|
6
|
+
|
|
7
|
+
## How it works
|
|
8
|
+
```
|
|
9
|
+
Schema Model Render*
|
|
10
|
+
DEV -> json js/py js
|
|
11
|
+
. . .
|
|
12
|
+
__Y________Y________Y___
|
|
13
|
+
| |
|
|
14
|
+
| new JSEE (...) |
|
|
15
|
+
|________________________|
|
|
16
|
+
. .
|
|
17
|
+
__Y__ ______Y_____
|
|
18
|
+
| | | | <~ tf.js
|
|
19
|
+
USER <-> | GUI | <-> | Model | <~ pyodide
|
|
20
|
+
|_____| |____________| <~ wasm
|
|
21
|
+
Vue³ WebWorker*
|
|
22
|
+
|
|
23
|
+
* - optional
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
JSEE takes a schema object that contains five main blocks:
|
|
27
|
+
|
|
28
|
+
- `model` - describes a model/script (its location, is it a function or class, should it be called automatically on every GUI change)
|
|
29
|
+
- `render` - visualization part (optional)
|
|
30
|
+
- `design` - overall appearance (optional)
|
|
31
|
+
- `inputs` - list of inputs and their descriptions
|
|
32
|
+
- `outputs` - list of outputs and their descriptions (optional)
|
|
33
|
+
|
|
34
|
+
### Config/schema object
|
|
35
|
+
|
|
36
|
+
- `model` - Contains main parameters of the model/script
|
|
37
|
+
- `url` (string) - URL of a JS/Python file to load, or:
|
|
38
|
+
- `code` (function) - It's possible to pass functions directly to JSEE instead of using an URL
|
|
39
|
+
- `name` (string) - Name of the callable object. Default value is taken from `url` or `code`
|
|
40
|
+
- `autorun` (boolean, default - `false`) - Defines if the script should be evaluated on each input change event
|
|
41
|
+
- `type` (string, default - `function`) - What kind of script is loaded. Influences how the code is initializated. Possible values:
|
|
42
|
+
- `function`
|
|
43
|
+
- `class`
|
|
44
|
+
- `async-function`
|
|
45
|
+
- `async-init`
|
|
46
|
+
- `py`
|
|
47
|
+
- `tf`
|
|
48
|
+
- `method` (string) - If `type` is `class`, `method` defines the name of the class method to call during evaluation
|
|
49
|
+
- `container` (string) - How input values are passed to the function/method:
|
|
50
|
+
- `object` (default) - Pass inputs wrapped in an object, i.e. `{'x': 1, 'y': 2}`
|
|
51
|
+
- `args` - Pass inputs as separate arguments
|
|
52
|
+
- `worker` (boolean) - If `true`, JSEE initializes a Web Worker to run the script
|
|
53
|
+
- `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.
|
|
54
|
+
- `design` - Design parameters
|
|
55
|
+
- `layout` - 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 default `blocks` template.
|
|
56
|
+
- `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's `use` method).
|
|
57
|
+
- `inputs` - Inputs definition
|
|
58
|
+
- `outputs` - Outputs definition
|
|
59
|
+
|
|
60
|
+
JSEE is a reactive version of StatSim's [Port](https://github.com/statsim/port)
|
package/_config.yml
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
title: "JSEE"
|
|
2
|
+
description: > # this means to ignore newlines until "show_excerpts:"
|
|
3
|
+
JavaScript Execution Environment
|
|
4
|
+
|
|
5
|
+
show_excerpts: false
|
|
6
|
+
|
|
7
|
+
logo_header:
|
|
8
|
+
src: https://jsee.io/images/logo.svg
|
|
9
|
+
href: https://jsee.org/
|
|
10
|
+
width: 70
|
|
11
|
+
|
|
12
|
+
logo_footer:
|
|
13
|
+
src: https://jsee.io/images/logo.svg
|
|
14
|
+
href: https://jsee.org/
|
|
15
|
+
width: 50
|
|
16
|
+
|
|
17
|
+
header_pages:
|
|
18
|
+
-
|
|
19
|
+
|
|
20
|
+
minima:
|
|
21
|
+
social_links:
|
|
22
|
+
twitter: jseeio
|
|
23
|
+
facebook: jseeio
|
|
24
|
+
github: jseeio
|
|
25
|
+
|
|
26
|
+
remote_theme: "jseeio/minima"
|