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 an ESM build and Type Declarations (If you selected the TypeScript template).

npmyarnpnpm

bash

$ npm run build

$ npm run build

bash

$ yarn build

$ yarn build

bash

$ pnpm run build

$ pnpm run build

2. Publish

bash

$ npm publish

$ npm publish

TIP

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

npmyarnpnpm

bash

$ npm add my-package

$ npm add my-package

bash

$ yarn add my-package

$ yarn add my-package

bash

$ pnpm add my-package

$ pnpm add my-package

Define AllDefine IndividualSource Files

import { modules, defineAll } from 'my-package'
defineAll(modules)

import { modules, defineAll } from 'my-package'
defineAll(modules)

import { modules, defineAll } from 'my-package'
defineAll(modules, ['my-element', 'nested/my-element-two'])

import { modules, defineAll } from 'my-package'
defineAll(modules, ['my-element', 'nested/my-element-two'])

txt

src/
└─ lib/
   ├─ nested/
   |  └─ my-element-two.js 
   └─ my-element.js

src/
└─ lib/
   ├─ nested/
   |  └─ my-element-two.js 
   └─ my-element.js

html

<my-element></my-element>
<my-element-two></my-element-two>

<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-package for latest version
https://esm.sh/[email protected] pin to specific version

unpkg

https://unpkg.com/my-package for latest version
https://unpkg.com/[email protected] pin to specific version

jsdelivr

https://esm.run/my-package for latest version
https://esm.run/[email protected] pin to specific version

Define AllDefine IndividualSource Files

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)
    </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)
    </script>
  </body>
</html>

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>

<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>

txt

src/
└─ lib/
   ├─ nested/
   |  └─ my-element-two.js 
   └─ my-element.js

src/
└─ lib/
   ├─ nested/
   |  └─ my-element-two.js 
   └─ my-element.js

Publishing ​

npm ​

Using ​

npm ​

CDN ​

Publishing

npm

Using

npm

CDN