MinzeInstallation
Minze can be installed in several different ways.
npm
Installing from npm:
bash
$ npm install minze
bash
$ yarn add minze
bash
$ pnpm add minze
TIP
You can also import the main Minze class as a default import:
import Minze, { MinzeElement } from 'minze'
js
import { Minze, MinzeElement } from 'minze'
class MyElement extends MinzeElement {
html = () => `Hello Minze!`
}
Minze.defineAll([MyElement])
html
<my-element></my-element>
CLI
Installing via command line:
TIP
The CLI method scaffolds a Minze Dev and Publishing environment including rollup and vite.
Minze requires Node.js version >=
16.0.0
npm
Then follow the prompts!
Templates
There are currently the following templates available:
- JavaScript -
js - TypeScript -
ts
The shorthand can be used in command line options, e.g.
--template ts
Command line options
You can directly specify the project name and template via additional command line options. For example, to scaffold a TypeScript environment, run:
bash
$ npm init [email protected] my-project -- --template ts
bash
$ yarn create minze my-project --template ts
bash
$ pnpm create minze my-project -- --template ts
CDN
Loading Minze via a CDN link from unpkg or jsdelivr. Pick one of the following:
TIP
Module refers here to the ES Module build of Minze and CDN refers to the UMD build.
unpkg
Module
//unpkg.com/[email protected]/dist/module.jsfor latest version//unpkg.com/[email protected]/dist/module.jspin to specific version
CDN
//unpkg.com/[email protected]for latest version//unpkg.com/[email protected]pin to specific version
jsdelivr
Module
//cdn.jsdelivr.net/npm/[email protected]/dist/module.jsfor latest version//cdn.jsdelivr.net/npm/[email protected]/dist/module.jspin to specific version
CDN
//cdn.jsdelivr.net/npm/[email protected]for latest version//cdn.jsdelivr.net/npm/[email protected]pin to specific version
minze.dev
This is a shorthand redirect to unpkg.
CDN
//cdn.minze.dev/latestfor latest version//cdn.minze.dev/1.0.0pin to specific version
Example
html
<html>
<head></head>
<body>
<!-- custom component -->
<my-element></my-element>
<!-- import and custom component definition -->
<script type="module">
import { MinzeElement } from '//unpkg.com/[email protected]/dist/module.js'
(class MyElement extends MinzeElement {
html = () => `Hello Minze!`
}.define())
</script>
</body>
</html>
html
<html>
<head></head>
<body>
<!-- custom component -->
<my-element></my-element>
<!-- minze -->
<script src="//unpkg.com/[email protected]" defer></script>
<!-- custom component definition -->
<script type="module">
(class MyElement extends MinzeElement {
html = () => `Hello Minze!`
}.define())
</script>
</body>
</html>
html
<html>
<head></head>
<body>
<!-- custom components -->
<my-element></my-element>
<my-element-two></my-element-two>
<!-- import and custom component definition -->
<script type="module">
import { Minze, MinzeElement } from '//unpkg.com/[email protected]/dist/module.js'
class MyElement extends MinzeElement {
html = () => `Hello Minze!`
}
class MyElementTwo extends MinzeElement {
html = () => `Hello Minze again!`
}
Minze.defineAll([MyElement, MyElementTwo])
</script>
</body>
</html>