@swim/ui

@swim/ui implements a massively real-time user interface toolkit. Procedural styling, and a unified view hierarchy, make it easy to consistently animate—and efficiently render—mixed HTML, SVG, and Canvas components, enabling uniform tweening of everything from HTML attributes, to CSS styles, SVG and Canvas drawings, and custom parameters. @swim/ui is a part of the @swim/system framework.

Framework

The @swim/ui umbrella package depends on, and re-exports, the following component libraries:

• @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]](https://github.com/swimos/swim/tree/master/swim-system-js/swim-ui-js/@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/ui builds on the @swim/core framework; it has no additional dependencies.

Installation

npm

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

Browser

Browser applications can load swim-ui.js, along with its swim-core.js dependency, from the Swim CDN.

<script src="https://cdn.swim.ai/js/latest/swim-core.js"></script>
<script src="https://cdn.swim.ai/js/latest/swim-ui.js"></script>

Alternatively, the standalone swim-system.js script may be loaded from the Swim CDN, which bundles @swim/ui together with all other @swim/system frameworks.

<script src="https://cdn.swim.ai/js/latest/swim-system.js"></script>

Usage

ES6/TypeScript

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

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

CommonJS

@swim/ui can also be used with CommonJS-compatible module systems. All component libraries are re-exported by the umbrella @swim/ui module.

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

Browser

When loaded by a web browser, the swim-ui.js script adds all component library exports to the global swim namespace. The swim-ui.js script requires that swim-core.js has already been loaded.

The swim-system.js script also adds all @swim/ui component library exports to the global swim namespace, making it a drop-in replacement for swim-ui.js when additional @swim/system frameworks are needed.