Usage
To use MiniComps, you just need to include a single file in your project. There are two versions of this library, which are identical in terms of output, but are used in different setups.
Using JS Modules
If you want to use the JS Modules version of the MiniComps library, add minicomps.min.mjs somewhere to your project, or host it somewhere you can load it at runtime. If using modules, you do NOT need to load the library via a script tag in your HTML. But you will need to specify type="module" on the tag of any script that uses MiniComps. Example:
<!DOCTYPE html>
<html>
<head>
<title>MiniComps</title>
<style>
html, body {
background-color: #c8c8c8;
}
</style>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>
In the file where you are creating your MiniComps ui, you’ll need to import the components you want to use, referring to the location where you put the module library.
import { Panel, Button, Checkbox } from "./path/to/minicomps.min.mjs";
const panel = new Panel(document.body, 40, 40, 400, 400);
new Button(panel, 20, 20, "Button")
new Checkbox(panel, 20, 50, "Checkbox");
You can then directly instantiate the components using their class names.
Using the global library
To use the global library, add minicomps.min.js somewhere in your project. In this case, you will need to add this library to your HTML using a script tag. Example:
<!DOCTYPE html>
<html>
<head>
<title>MiniComps</title>
<style>
html, body {
background-color: #c8c8c8;
}
</style>
</head>
<body>
<script src="minicomps.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Now all of the components will be available in the mc global object. No need for imports.
const panel = new mc.Panel(document.body, 40, 40, 400, 400);
new mc.Button(panel, 20, 20, "Button")
new mc.Checkbox(panel, 20, 50, "Checkbox");
You can also use object destructuring to eliminate the need to constantly type mc:
const { Panel, Button, Checkbox } = mc;
const panel = new Panel(document.body, 40, 40, 400, 400);
new Button(panel, 20, 20, "Button")
new Checkbox(panel, 20, 50, "Checkbox");
Most of the examples on this site use this strategy. It also has the benefit of looking very similar to the import method.