NPM Packages

Genesis packages are configured to work in both NodeJS/Web environments via UMD/CJS and in Babel (ESM, ES2020+) environments by using the main and module fields in package.json. You can utilize these packages on frameworks that predate Genesis or do not use a Webpack+Babel stack by using the main entry point. For Genesis, we will use the module entry point which gives us the raw, unmodified source code.

Usage

ESM (Genesis Monorepo)

$ pnpm add @mvps-genesis/PACKAGE_NAME

JavaScript:

import defaultExport from '@mvps-genesis/PACKAGE_NAME';
// or
import {namedExport} from '@mvps-genesis/PACKAGE_NAME';

// Do something...

---

CommonJS (NodeJS)

$ pnpm add @mvps-genesis/PACKAGE_NAME

JavaScript:

const defaultExport = require('@mvps-genesis/PACKAGE_NAME');
// or
const {namedExport} = require('@mvps-genesis/PACKAGE_NAME');

// Do something...

---

UMD (Web)

You can either use jsDelivr, UNPKG or FTP the dist/main.min.js file to your server.

Example HTML:

<script src="https://cdn.jsdelivr.net/npm/@mvps-genesis/[email protected]/dist/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mvps-genesis/[email protected]/dist/main.min.js"></script>
<script>

    // uid
    genesis.uid() // L83GRS-KEWE1

    // accessibility
    var menuBar = new genesis.MenuBar()

</script>

Note

Replace PACKAGE_NAME and VERSION with your desired package and version.

Once the script has been included you can reference the exports via the genesis namespace.