# Monster

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](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).

For some functions, you need additional [polyfills](#polyfill).

## Documentation

To check out docs and examples, visit [monsterjs.org/en/doc/monster/](https://monsterjs.org/en/api/).

## Installation

`npm install @schukai/monster`, `yarn install @schukai/monster` or `pnpm install @schukai/monster`

## Usage

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.

```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);
// ↦ 1
```

To integrate this function into a website it is recommended to use a bundler like [esbuild](https://esbuild.github.io/).

```sh
esbuild index.mjs --outfile dist.js
```

We can now integrate that into our website.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Monster</title>
    <script src="dist.js"></script>
</head>
<body>
```

Voila!


### Polyfill

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](https://polyfill.io/) and thus the compatibility can be increased.

```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 repo is exclusively for bug reports and feature requests.

## Issues

Please make sure to read the Issue Reporting Checklist before opening an
issue. Issues not conforming to the guidelines may be closed immediately.

## License

Copyright © 2023 schukai GmbH

[AGPL](https://www.gnu.org/licenses/agpl-3.0.de.html)

You can also purchase a commercial license.

## Changelog

Detailed changes for each release are documented in
the [CHANGELOG](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/blob/master/application/CHANGELOG.md).