Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
main
.gitignore
.npmignore
README.md
package.json
rollup.config.js
tsconfig.json

README.md

@swim/web

package documentation chat

@swim/web implements a thin web application framework built on the @swim/ui toolkit. @swim/web makes it easy to embed @swim/ui views and @swim/ux widgets in any web page by simply adding special swim- attributes to ordinary HTML elements. @swim/web is a part of the broader @swim/system framework.

Framework

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

  • @swim/site (npm, doc) – inimalist 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.

@swim/web builds on the @swim/core and @swim/ui frameworks; it has no additional dependencies.

Installation

npm

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

Browser

Browser applications can load swim-web.js, along with its swim-core.js and swim-ui.js dependencies, from the swimOS CDN.

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

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

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

<!-- 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/web can be imported as an ES6 module from TypeScript and other ES6-compatible environments. All component libraries are re-exported by the umbrella @swim/web module.

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

CommonJS

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

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

Browser

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

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

You can’t perform that action at this time.