npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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 descriptions
  • outputs - 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/script
    • url (string) - URL of a JS/Python script or POST/GET API
    • code (function) - It's possible to pass code directly to JSEE instead of using an URL
    • name (string) - Name of the executed object. Default value is taken from url or code
    • 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) - If type is class, method defines the name of the class method to call during evaluation
    • container (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) - If true, 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 parameters
    • 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.
    • 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).
  • inputs - Inputs definition.
    • name* - Name of the input
    • type* - Type. Possible types:
      • int, float or number - Number
      • string - String
      • text - Textarea
      • checkbox or bool - Checkbox
      • select or categorical - Select (one of many options)
      • file - File Input
      • action or button - Button (its name will be passed as a caller to the model)
    • default - Default value
  • outputs - Outputs definition
    • name* - Name of the output
    • type* - Type. Possible types:
      • object - JavaScript Object
      • html or svg - SVG element
      • code - Code block
      • function - Render function. Rather than returning a value, a model returns a function that JSEE will call passing the container element.
  • examples - List of examples
  • autorun (boolean, default: false) - Defines if the script should be evaluated on each input change event
  • interval (number, default: 0) - Defines the interval between script evaluations (in milliseconds). If set to 0, 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 the inputs, 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 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