@jseeio/jsee 0.2.3 → 0.2.7
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/CHANGELOG.md +13 -0
- package/README.md +53 -28
- package/dist/jsee.js +1 -1
- package/dist/jsee.runtime.js +1 -1
- package/dist/worker_bundle.js +1 -0
- package/jest-puppeteer.config.js +12 -0
- package/jest.config.js +7 -0
- package/load/index.html +40 -0
- package/main.js +323 -173
- package/package.json +12 -7
- package/src/app.js +22 -7
- package/src/utils.js +52 -0
- package/src/worker.js +65 -58
- package/templates/bulma-app.vue +76 -7
- package/templates/bulma-output.vue +1 -7
- package/test/code.html +25 -0
- package/test/codew.html +25 -0
- package/test/example-async-function.js +0 -0
- package/test/example-async-init.js +0 -0
- package/test/example-class.js +8 -0
- package/test/example-sum.js +3 -0
- package/test/minimal.html +14 -0
- package/test/minimal1.html +13 -0
- package/test/minimal2.html +15 -0
- package/test/minimal3.html +10 -0
- package/test/minimal4.html +22 -0
- package/test/string.html +26 -0
- package/test/stringw.html +29 -0
- package/test/sum.schema.json +17 -0
- package/test/sumw.schema.json +15 -0
- package/test.js +160 -0
- package/webpack.config.js +5 -1
- package/404.html +0 -22
- package/load.html +0 -31
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
## [0.2.7]
|
|
2
|
+
- [x] Show output when result is `0`
|
|
3
|
+
- [x] Updated style for buttons and inputs
|
|
4
|
+
|
|
5
|
+
## [<0.2.6]
|
|
6
|
+
- [x] Tests
|
|
7
|
+
- [x] Load schema from query (loader)
|
|
8
|
+
- [x] Reset button appears only after data change
|
|
9
|
+
- [x] Default input type (`string`)
|
|
10
|
+
- [x] Directly load code when running in a window (not code to text)
|
|
11
|
+
- [x] Passing code directly
|
|
12
|
+
|
|
13
|
+
|
package/README.md
CHANGED
|
@@ -1,42 +1,67 @@
|
|
|
1
1
|
# Focus on code, not UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Minimal example:
|
|
4
|
+
```html
|
|
5
|
+
<html>
|
|
6
|
+
<div id="jsee-container">
|
|
7
|
+
<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@latest/dist/jsee.runtime.js"></script>
|
|
8
|
+
<script>
|
|
9
|
+
function mul (a, b) {
|
|
10
|
+
return a * b
|
|
11
|
+
}
|
|
12
|
+
new JSEE(mul, '#jsee-container')
|
|
13
|
+
</script>
|
|
14
|
+
</html>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
↳ [Result](https://jsee.org/test/minimal1.html) (if you see nothing, it's probably because today is Dec 29, and the CDN hasn't updated its cache yet)
|
|
18
|
+
|
|
19
|
+
## Execution environment
|
|
20
|
+
|
|
21
|
+
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](#schema).
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## Inputs and outputs
|
|
25
|
+
|
|
26
|
+
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](https://shiny.rstudio.com/) or Python's [streamlit](https://streamlit.io/).
|
|
4
27
|
|
|
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
28
|
|
|
7
29
|
## How it works
|
|
30
|
+
|
|
31
|
+
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
|
|
32
|
+
|
|
8
33
|
```
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|_____| |____________| <~ wasm
|
|
21
|
-
Vue³ WebWorker*
|
|
22
|
-
|
|
23
|
-
* - optional
|
|
24
|
-
```
|
|
34
|
+
Schema Model Render*
|
|
35
|
+
DEV ─► json js/py js
|
|
36
|
+
│ │ │
|
|
37
|
+
┌──▼────────▼────────▼───┐
|
|
38
|
+
│ new JSEE (...) │
|
|
39
|
+
└──┬───────────────┬─────┘
|
|
40
|
+
│ │
|
|
41
|
+
┌──▼──┐ ┌──────▼─────┐ ◄┐ tf.js
|
|
42
|
+
USER ◄─► │ GUI │ ◄─► │ Model │ ◄│ pyodide
|
|
43
|
+
└─────┘ └────────────┘ ◄┘ wasm
|
|
44
|
+
Vue³ WebWorker*
|
|
25
45
|
|
|
26
|
-
|
|
46
|
+
* - optional
|
|
47
|
+
```
|
|
27
48
|
|
|
28
|
-
|
|
29
|
-
- `
|
|
30
|
-
- `design` - overall appearance (optional)
|
|
49
|
+
JSEE takes a schema object that contains three main blocks:
|
|
50
|
+
- `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)
|
|
31
51
|
- `inputs` - list of inputs and their descriptions
|
|
32
|
-
- `outputs` - list of outputs and their descriptions
|
|
52
|
+
- `outputs` - list of outputs and their descriptions
|
|
53
|
+
|
|
54
|
+
Two extra blocks can be provided for further customization
|
|
55
|
+
- `render` - visualization part (optional). Defines custom rendering code.
|
|
56
|
+
- `design` - overall appearance (optional). Defines how the app looks overwriting defaults.
|
|
57
|
+
|
|
33
58
|
|
|
34
|
-
###
|
|
59
|
+
### Schema
|
|
35
60
|
|
|
36
61
|
- `model` - Contains main parameters of the model/script
|
|
37
|
-
- `url` (string) - URL of a JS/Python
|
|
38
|
-
- `code` (function) - It's possible to pass
|
|
39
|
-
- `name` (string) - Name of the
|
|
62
|
+
- `url` (string) - URL of a JS/Python script or POST/GET API
|
|
63
|
+
- `code` (function) - It's possible to pass code directly to JSEE instead of using an URL
|
|
64
|
+
- `name` (string) - Name of the executed object. Default value is taken from `url` or `code`
|
|
40
65
|
- `autorun` (boolean, default - `false`) - Defines if the script should be evaluated on each input change event
|
|
41
66
|
- `type` (string, default - `function`) - What kind of script is loaded. Influences how the code is initializated. Possible values:
|
|
42
67
|
- `function`
|
|
@@ -57,4 +82,4 @@ JSEE takes a schema object that contains five main blocks:
|
|
|
57
82
|
- `inputs` - Inputs definition
|
|
58
83
|
- `outputs` - Outputs definition
|
|
59
84
|
|
|
60
|
-
JSEE is a reactive
|
|
85
|
+
JSEE is a reactive branch of [StatSim](https://statsim.com)'s [Port](https://github.com/statsim/port). It's still work in progress. Expect API changes.
|