Skip to main content

Quick start

Installation​

NPM​

bash​

npm install wraplet

javascript​

import { AbstractWraplet } from 'wraplet';

CDN​

import { AbstractWraplet } from 'https://cdn.jsdelivr.net/npm/wraplet@latest/dist/index.js';

Quick examples​

The value of wraplets increases with their number and interconnections.

The simplest example doesn't provide much more value over a simple class wrapper, but we will be steadily increasing the complexity with each next example.

Note that you can load comments for each example.

Minimal wraplet A​

A minimal wraplet is just a wrapper around a DOM node.

It has a lifecycle but doesn't really make use of it.

Still, it abstracts away the DOM node and provides a simple API for interacting with it, which makes for a cleaner code than using the DOM directly.

Minimal wraplet B​

In this version we'll show a bit more declarative way of instantiating a wraplet.

Wraplet making use of the lifecycle​

Wraplet with dependencies​

This is an advanced example of multiple wraplets tied together to provide the functionality of a simple calculator.

This is the final result of the tutorial available HERE.