open-index/open-npm huggingface dataset:
npm package: @openmfe/eleventy-plugin
Description: OpenMFE integration plugin for eleventy
Latest version: 0.3.0

# OpenMFE Eleventy Plugin


This is a plugin for the Eleventy Static Site Generator (SSG). It allows embedding a microfrontend into an Eleventy page via Shortcode.

The tag name is `openmfe`, the first parameter is the microfrontend’s tag name, the second parameter is a map of attributes and their values, the third parameter is a map of configuration options.

For example, assuming there is a microfrontend which offers the `hotel-offers` tag and accepts the `region` attribute, you would place the following code anywhere in your template:

```
{% openmfe "hotel-offers", { region: region.id } %}
```

Please note that currently only the Nunjucks language is supported.

For instance, to create a full-blown instance of the `hotel-offers` microfrontend, you can use the following Nunjucks snippet:

```liquid
{\% openmfe "hotel-offers", { region: 1197 }, { semantic: true } %}
```

This generates the following output:

```html
<script type="application/ld+json">
    // … full block of JSON-LD …
</script>
<hotel-offers region='1197'>
    <div class=main style=all:initial;display:block;overflow:hidden>
        <!-- full block of prerendered HTML (plus a bit of SVG for loading animation) -->
    </div>
</hotel-offers>
<script src="http://localhost:9081/main.js" async></script>
```

# Installation 

You need to install the `openmfe` eleventy plugin by adding this code into the `.eleventy.js` file.

```js 
const openmfe = require('@openmfe/eleventy-plugin');

eleventyConfig.addPlugin(openmfe, { manifest: 'https://<MFE_CDN_FOLDER>/openmfe/manifest.yaml' });
```

If you have multiple MFE's in your application: 

```js 
const openmfe = require('@openmfe/eleventy-plugin');

eleventyConfig.addPlugin(openmfe, {
    manifests: [
        {
            mfe: "mfe-demo",
            manifest: "https://<MFE_DEMO_CDN_FOLDER>/openmfe/manifest.yaml",
        },
        {
            mfe: "mfe-example",
            manifest: "https://<MFE_EXAMPLE_CDN_FOLDER>/openmfe/manifest.yaml",
        },
    ],
});
```
npm package: @openmfe/manifest
Description: ## Loading and Validation
Latest version: 0.3.0

# The OpenMFE Manifest Tool

## Loading and Validation

The `@openmfe/manifest` tool retrieves and validates the contract of an OpenMFE microfrontend. It also resolves relative paths to full URLs. When you load a microfrontend’s manifest with this tool, you can be sure that the manifest complies with the OpenMFE specification.

The tool can be installed to any JavaScript project.

```shell
npm i @openmfe/manifest
```

Here’s how to run a manifest validation from the command line:

```shell
npx openmfe-validate http://localhost:8081/manifest/openmfe.yaml
```

You can also invoke it programmatically by loading it as a module (both ES and CommonJS are supported).

```js
import getManifest from "@openmfe/manifest"
const url = "http://localhost:8081/manifest/openmfe.yaml"
const manifest = getManifest(url) // returns the validated manifest.
```

### The Contract History Checker

The contract history checker makes sure that a microfrontend’s contract doesn’t introduce breaking changes over time. This is important because a microfrontend is supposed to be always deployed under the same URL. Therefore, its consumers must be confident that attributes, events and other aspects of the interface do not change in a breaking way. For this purpose, the contract checker installs a small `.contracts` file in the project and checks if the manifest at a given URL breaks the contract for the given microfrontend.

```shell
npx openmfe-contract http://localhost:8081/manifest/openmfe.yaml
```

This can be done in the microfrontend project itself or in a consuming project. It can also manage multiple microfrontends at the same time. So, if you are maintaining a website that uses multiple microfrontends, it can keep track of all of them and notify you if something breaks.