Monster is an ideal choice for building visually appealing and high-performance web interfaces and websites using modern JavaScript web development techniques.
Leveraging cutting-edge JavaScript features such as classes, WeakRef, WeakMaps, proxies, and the MutationObserver interface, Monster offers a blend of tried-and-true methods and innovative web components.
Designed for seamless integration, Monster complements your existing web projects without dominating the entire architecture.
Unlike solutions that introduce a whole new layer of abstraction and proprietary languages, Monster focuses on enhancing the native capabilities of HTML, CSS, and JavaScript for web development.
With a design objective to optimize performance and achieve stellar outcomes, Monster aims to accomplish this using minimal JavaScript code.
Monster was built with ES6 modules and uses import
and export.
For some functions, you need additional polyfills.
To check out docs and examples, visit monsterjs.org/en/doc/monster/.
npm install @schukai/monster
, yarn install @schukai/monster
or pnpm install @schukai/monster
A simple example of the use of functionality from Monster. We create a small file index.mjs
.
The m
in .mjs
stands for module. In the example we want to make substitutions in a string.
import {Formatter} from '@schukai/monster/source/text/formatter.mjs';
const text = '${mykey${subkey}}';
let obj = {
mykey2: "1",
subkey: "2"
};
new Formatter(obj).format(text);
// ↦ 1
To integrate this function into a website it is recommended to use a bundler like esbuild.
esbuild index.mjs --outfile dist.js
We can now integrate that into our website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Monster</title>
<script src="dist.js"></script>
</head>
<body>
Voila!
We do try to work around some browser bugs, but on the whole we don't use polyfills and feature detection.
However, many functions can be mapped via polyfill.io and thus the compatibility can be increased.
<script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=AbortController,Array.prototype.entries,Array.prototype.fill,Array.prototype.find,Array.prototype.includes,Array.prototype.keys,Array.prototype.sort,Array.prototype.values,atob,AudioContext,blissfuljs,Blob,CharacterData.prototype.nextElementSibling,CharacterData.prototype.previousElementSibling,CharacterData.prototype.remove,console,console.error,console.log,CSS.supports,CustomEvent,DocumentFragment,DocumentFragment.prototype.append,DocumentFragment.prototype.prepend,DOMRect,DOMTokenList,DOMTokenList.prototype.forEach,DOMTokenList.prototype.replace,Element.prototype.append,Element.prototype.getAttributeNames,Element.prototype.prepend,Element.prototype.remove,Element.prototype.scroll,Event,EventSource,fetch,Function.prototype.name,globalThis,HTMLDocument,HTMLPictureElement,HTMLTemplateElement,IntersectionObserver,IntersectionObserverEntry,Intl,Intl.DateTimeFormat,Intl.NumberFormat,Intl.PluralRules,Map,Math.log2,MutationObserver,Node.prototype.contains,Node.prototype.getRootNode,Node.prototype.isConnected,Node.prototype.isSameNode,NodeList.prototype.forEach,Number.isFinite,Number.isInteger,Object.assign,Object.entries,Object.freeze,Object.getOwnPropertyNames,Object.prototype.toString,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,requestAnimationFrame,ResizeObserver,Set,String.prototype.includes,String.prototype.matchAll,String.prototype.padStart,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,TextDecoder,TextEncoder,Uint16Array,Uint8Array,URLSearchParams,WeakSet"
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
For questions and commercial support, please contact schukai GmbH. The issue list of this repo is exclusively for bug reports and feature requests.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Copyright © 2023 schukai GmbH
You can also purchase a commercial license.
Detailed changes for each release are documented in the CHANGELOG.