# 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).