# 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 polyfills, thus enhancing compatibility.
## 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).