Options
All
  • Public
  • Public/Protected
  • All
Menu

swimOS

@swim/system

package documentation chat

The @swim/system umbrella framework provides a standalone set of frameworks for building massively real-time streaming WARP clients and web user interface applications. @swim/system encompasses the @swim/core foundation framework, the @swim/mesh multiplexed streaming WARP framework, the @swim/ui and @swim/ux real-time user interface toolkits, and the @swim/web real-time web application framework.

Umbrella Framework

The Swim System umbrella framework has no external dependencies when run in a web browser, and depends only on a WebSocket implementation when run in Node.js. Swim System provides the following top-level libraries:

  • @swim/system (npm, doc) – umbrella package that depends on, and re-exports, all Swim System child frameworks and libraries.

Swim Core Framework

The Swim Core framework provides a lightweight, portable, dependency-free, and strongly typed baseline on which to build higher level libraries. Swim Core consists of the following component libraries:

  • @swim/core (npm, doc) – lightweight, portable, dependency-free foundation framework.
  • @swim/util (npm, doc) – ordering, equality, and hashing; type conversions; iterators; builders; maps; caches; and assertions.
  • @swim/codec (npm, doc) – incremental I/O; functional parsers and writers; display, debug, and diagnostic formatters; and Unicode and binary codecs.
  • @swim/collections (npm, doc) – immutable, structure sharing collections, including B-trees and S-trees (sequence trees).
  • @swim/structure (npm, doc) – generic structured data model, with support for selectors, expressions, and lambda functions. Used as a common abstract syntax tree for Recon, JSON, XML, and other data languages.
  • @swim/streamlet (npm, doc) – stateful, streaming component model for application componets that continuously consume input state from streaming inlets, and continuously produce output state on streaming outlets.
  • @swim/dataflow (npm, doc) – compiler from @swim/structure expressions to live-updated data models.
  • @swim/recon (npm, doc) – object notation with attributes, like if JSON and XML had a baby.
  • @swim/math (npm, doc) – mathematical and geometric structures and operators.
  • @swim/time (npm, doc) – date-time, time zone, and time interval data types, with strptime/strftime-style parsers and formatters.
  • @swim/uri (npm, doc) – rich object model for working with Uniform Resource Identifiers and URI subcomponents, including an efficient and safe codec for parsing and writing compliant URI strings.

Swim Mesh Framework

The Swim Mesh framework implements a multiplexed streaming WARP client that runs in both Node.js and web browsers. Swim Mesh consists of the following component libraries:

  • @swim/mesh (npm, doc) – multiplexed streaming WARP framework that runs in Node.js and web browsers.
  • @swim/warp (npm, doc) – WebSocket protocol for dynamically multiplexing large numbers of bidirectional links to streaming APIs, called lanes, of URI-addressed distributed objects, called nodes, that run stateful distributed processes, called Web Agents.
  • @swim/client (npm, doc) – streaming API client for linking to lanes of stateful Web Agents using the WARP protocol, enabling massively real-time applications that continuously synchronize all shared states with ping latency.

Swim UI Framework

The Swim UI framework implements a massively real-time user interface toolkit, with a unified view hierarchy for HTML, SVG, and Canvas components, animated procedural styling, and constraint-based layouts. Swim UI consists of the following component libraries:

  • @swim/ui (npm, doc) – massively real-time user interface toolkit, with a unified view hierarchy for HTML, SVG, and Canvas components, animated procedural styling, and constraint-based layouts.
  • @swim/angle (npm, doc) – dimensional angle types with unit-aware algebraic operators, conversions, and parsers.
  • @swim/length (npm, doc) – DOM-relative length types with unit-aware algebraic operators, conversions, and parsers.
  • @swim/color (npm, doc) – RGB and HSL color types with color-space-aware operators, conversions, and parsers.
  • @swim/font (npm, doc) – CSS font property types and parsers.
  • @swim/transform (npm, doc) – CSS and SVG compatible transform types with unit-aware algebraic operators and parsers.
  • @swim/interpolate (npm, doc) – interpolator types for blending between values, such as numbers, dates, angles, lengths, colors, transforms, shapes, arrays, structures, and other interpolators.
  • @swim/scale (npm, doc) – scale types that map numeric and temporal input domains to interpolated output ranges, with support for continuous domain clamping, domain solving, range unscaling, and interpolation between scales.
  • @swim/transition (npm, doc) – transition types that specify duration, ease, interpolator, and lifecycle callback parameters for tween animations.
  • @swim/animate (npm, doc) – property-managing animator types that efficiently tween values between discrete state changes.
  • @swim/dom (npm, doc) – CustomEvent and ResizeObserver polyfills.
  • @swim/style (npm, doc) – CSS style types and universal style value parser.
  • @swim/render (npm, doc) – renderable graphic types for SVG and Canvas compatible path drawing contexts, and Canvas compatible rendering contexts.
  • @swim/constraint (npm, doc) – incremental solver for systems of linear layout constraints.
  • @swim/view (npm, doc) – unified HTML, SVG, and Canvas view hierarchy, with integrated controller architecture, animated procedural styling, and constraint-based layouts.
  • @swim/shape (npm, doc) – canvas shape views, with animated geometry and style properties.
  • @swim/typeset (npm, doc) – canvas typesetting views, with animated text, layout, font, and style properties.
  • @swim/gesture (npm, doc) – multitouch gesture recognizers, with kinematic surface modeling.

Swim UX Framework

The Swim UX framework implements seamlessly animated user interface widgets, including gauges, pie charts, line, area, and bubble charts, and geospatial map overlays. Swim UX consists of the following component libraries:

  • @swim/ux (npm, doc) – seamlessly animated user interface widgets, including gauges, pie charts, line, area, and bubble charts, and geospatial map overlays.
  • @swim/gauge (npm, doc) – multi-dial, fully animatable, canvas rendered gauge widget.
  • @swim/pie (npm, doc) – multi-slice, fully animatable, canvas rendered pie chart widget.
  • @swim/chart (npm, doc) – multi-plot, fully animatable, canvas rendered chart widget, suppporting line, area, and bubble graphs, with customizeable axes, and kinematic multitouch scale gestures for panning and zooming with momentum.
  • @swim/map (npm, doc) – canvas views for efficiently rendering geospatially located map overlays, including fully animatable views for lines, circles, and polygons.
  • @swim/mapbox (npm, doc) – support for overlaying @swim/map views on Mapbox maps.

Swim Web Framework

The Swim Web framework implements a thin web application framework built on the Swim UI toolkit. Swim Web consists of the following component libraries:

  • @swim/web (npm, doc) – thin web application framework built on the @swim/ui toolkit.
  • @swim/site (npm, doc) – minimalist components that implement common dynamic website behaviors.
  • @swim/app (npm, doc) – lightweight application loader that dynamically instantiates views and controllers declared by swim- HTML attributes.

Installation

npm

For an npm-managed project, npm install @swim/system to make it a dependency. TypeScript sources will be installed into node_modules/@swim/system/main. Transpiled JavaScript and TypeScript definition files install into node_modules/@swim/system/lib/main. And a pre-built UMD script, which bundles all @swim/system child frameworks, can be found in node_modules/@swim/system/dist/main/swim-system.js.

Browser

Browser applications can load swim-system.js directly from the swimOS CDN. The swim-system.js bundle is self-contained; it supersedes swim-core.js, swim-mesh.js, swim-ui.js, swim-ux.js, and swim-web.js—those scripts need not be loaded when using swim-system.js.

<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-system.js"></script>

<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>

Usage

ES6/TypeScript

@swim/system can be imported as an ES6 module from TypeScript and other ES6-compatible environments. All child framework libraries are re-exported by the umbrella @swim/system module.

import * as swim from "@swim/system";

CommonJS/Node.js

@swim/system can also be used as a CommonJS module in Node.js applications. All child framework libraries are re-exported by the umbrella @swim/system module.

var swim = require("@swim/system");

Browser

When loaded by a web browser, the swim-system.js script adds all child framework exports to the global swim namespace.

Index