Publishing
npm
If you set up an environment via the create-minze CLI, you can publish your components to npm in two simple steps.
1. Build
This command creates a
dist/directory with anESMbuild and Type Declarations (If you selected the TypeScript template).
$ npm run build$ yarn build$ pnpm run build$ bun run build2. Publish
$ npm publishTIP
This is a default npm command refer to the npm docs for more information.
Using
To use your package in a project simply install your package and then import and define the elements. Minze is embedded directly into the published package.
Let's assume you published your library under the name
my-package
npm
$ npm add my-package$ yarn add my-package$ pnpm add my-package$ bun add my-packageimport { modules, defineAll } from 'my-package'
defineAll(modules)import { modules, defineAll } from 'my-package'
defineAll(modules, ['my-element', 'nested/my-element-two'])src/
└─ lib/
├─ nested/
| └─ my-element-two.js // [!code ++]
└─ my-element.js // [!code ++]<my-element></my-element>
<my-element-two></my-element-two>TIP
You can provide an array of shorthand file-paths as the second argument to the defineAll function, to define individual elements.
The paths are derived from the directory structure of the source files.
Every path starts from the src/lib/ directory (no starting slash) and ends without the file-extension. E.g. for src/lib/nested/some-element.js it's nested/some-element.
CDN
If you have published your package to npm, you can also load it via a CDN link from esm.sh, unpkg or jsdelivr. Pick one of the following:
esm.sh
https://esm.sh/my-packagefor latest versionhttps://esm.sh/[email protected]pin to specific version
unpkg
https://unpkg.com/my-packagefor latest versionhttps://unpkg.com/[email protected]pin to specific version
jsdelivr
https://esm.run/my-packagefor latest versionhttps://esm.run/[email protected]pin to specific version
<html>
<head></head>
<body>
<!-- custom elements -->
<my-element></my-element>
<my-element-two></my-element-two>
<!-- js code -->
<script type="module">
import { modules, defineAll } from 'https://esm.sh/my-package'
defineAll(modules)
</script>
</body>
</html><html>
<head></head>
<body>
<!-- custom elements -->
<my-element></my-element>
<my-element-two></my-element-two>
<!-- js code -->
<script type="module">
import { modules, defineAll } from 'https://esm.sh/my-package'
defineAll(modules, ['my-element', 'nested/my-element-two'])
</script>
</body>
</html>src/
└─ lib/
├─ nested/
| └─ my-element-two.js // [!code ++]
└─ my-element.js // [!code ++]