plastic-bag

A library to work with micro frontends.

Usage no npm install needed!

<script type="module">
  import plasticBag from 'https://cdn.skypack.dev/plastic-bag';
</script>

README

Plastic Bag

npm version Build Status Known Vulnerabilities BCH compliance Greenkeeper badge

Plastic Bag is a Custom Element that uses different strategies to load Frontend applications/components.

Installation

Package

npm install plastic-bag

Registering the Custom Element plastic-bag:

import 'plastic-bag';
// or
require('plastic-bag');

CDN

<script src="https://unpkg.com/plastic-bag/dist/index.js" />

Examples

<plastic-bag type="script" src="/app.js">
    <div id="app-example">Loading...</div>
</plastic-bag>

<plastic-bag type="html-fragment" src="/header.html">
</plastic-bag>

Options

src

URI of the resource that will be loaded.

type

Each type uses a different strategy to load the application source. Default value: "script".

  • "script": fetchs and execute src.
  • "iframe": uses iframe to display src.
  • "html-fragment": fetchs src, puts its content inside plastic-bag and executes script tags if present.

Content

The content will be displayed as soon the tag is attatched.

Compatibility

We are working on browser compatibility tests with BrowserStack.

BrowserSatck Logo