@mathigon/boost NPM

Boost.ts

🚨 Vulnerabilities found in compile and evaluate, these functions should not be used until this notice is removed after further testing!

Bost.ts is a library that makes working with browsers easier: everything from DOM manipulation to web components, event handling, animations, routing, multi-threading and AJAX requests. It was developed for Mathigon.org, an award-winning mathematics education project.

Features

DOM elements: selection, creation, manipulation, and styling
SVG and Canvas drawing
Event handling: gestures, pointers, scroll, hover, intersections, draggable elements, and more
Animations and transitions
Custom web components
Template and observables
AJAX utilities
Browser load and resize events, Cookies and Local Storage, Keyboard events
Router for single-page sites
Multi-threading using WebWorkers

Usage

First, install Boost.ts from NPM using

npm install @mathigon/boost

Now, simply import all functions and classes you need, using

import {$, CustomElement, Browser} from '@mathigon/boost'

Components

Importing the webcomponents <x-modal>, <x-popup>, <x-icon>, <x-alert> and <x-select> works a bit different from other functions exported by this module. Because they are just static classes with no side effects, they would usually be removed by tree-shaking. We also want to avoid duplicate component declarations, or any globally-running code.

The types can be imported like all other classes from @mathigon/boost.
The actual code is not included in the CJS or ESM bundles. needs to be included using something like import '@mathigon/boost/dist/components.js'.
The SCSS styles can be imported in other SCSS files using @import node_modules/@mathigon/boost/src/components/components.