# Monster
Monster is an ideal choice for building visually appealing and high-performance web interfaces and websites using modern
JavaScript techniques.
By leveraging cutting-edge JavaScript features such as classes, WeakRef, WeakMaps, proxies, and the MutationObserver
interface, Monster
offers a blend of traditional methods and innovative web components.
Designed for seamless integration, Monster complements existing web projects without dominating the entire architecture.
Unlike solutions that introduce a 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 goal to optimize performance and achieve stellar outcomes, Monster achieves
this using minimal JavaScript code.
Monster is built with ES6 modules and uses
the [import](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import)
and [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statements.
For certain functions, additional [polyfills](#polyfill) may be required.
## Documentation
To access our documentation and examples, visit [monsterjs.org/](https://monsterjs.org/).
## Installation
Install Monster using npm, Yarn, or pnpm:
- `npm install @schukai/monster`
- `yarn add @schukai/monster`
- `pnpm add @schukai/monster`
## Usage
Here is a simple example of how to use Monster. We create a small file named `index.mjs`
(where 'm' stands for module). In this example, we perform substitutions in a string:
```js
import {Formatter} from '@schukai/monster/source/text/formatter.mjs';
const text = '${mykey${subkey}}';
let obj = {
mykey2: "1",
subkey: "2"
};
new Formatter(obj).format(text);
// Outputs: 1
```
To integrate this function into a website, it is recommended to use a bundler such
as [esbuild](https://esbuild.github.io/):
```sh
esbuild index.mjs --outfile=dist.js
```
You can now include it in your website:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Monster</title>
<script src="dist.js"></script>
</head>
<body>
```
Voilà!
### Polyfill
While we strive to work around some browser bugs, generally, we do not use polyfills or feature detection.
However, many functions can be supplemented through [polyfill.io](https://polyfill.io/), thus enhancing compatibility.
```html
<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>
```
## Questions
For questions and commercial support, please contact [schukai GmbH](https://www.schukai.com/).
The issue list of this repository is exclusively for bug reports and feature requests.
## Issues
Please ensure you read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines
may
be closed immediately.
## License
Copyright © 2024 schukai GmbH
Licensed under [AGPL](https://www.gnu.org/licenses/agpl-3.0.de.html). Commercial licenses are also available.
## Changelog
Detailed changes for each release are documented in the
[CHANGELOG](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/blob/master/application/CHANGELOG.md).