Direct import

To directly import a Parcel first add a <script> tag to your web application with the src path pointing at the JavaScript Parcel file. Secondly, add the Abyss Parcel tag <abyss-parcel> with the import attribute pointing at the name of Parcel itself.

<script src="https://maelstrom-dmz-nonprod.uhc.com/cdn/mfpoc/my-parcel-one.js"></script>

...

<abyss-parcel import="my-parcel-one"></abyss-parcel>

Dynamic import

We provide the ability for dynamic importing. This allows for the use of one universal <script> import that can handle multiple Abyss Parcel tags being used throughout an application.

To accomplish this we have a helper script named abyss-parcel.js that will sit alongside a the default Parcel build file structure.

Wherever you are hosting your Parcels, below is the required file structure for the Parcel script.

├── abyss-parcel.js
└── abyss-parcel
|   ├── my-parcel-one
|   |   ├── 2.0.0
|   |   |   └── my-parcel-one.js
|   |   └── env
|   |       ├── dev
|   |       |   └── my-parcel-one.js
|   |       └── stage
|   |           └── my-parcel-one.js
|   ├── my-parcel-two
|   |   ├── 2.0.0
|   |   |   └── my-parcel-two.js
|   |   ├── 1.0.0
|   |   |   └── my-parcel-two.js
|   |   └── env
|   |       ├── dev
|   |       |   └── my-parcel-two.js
|   |       └── stage
|   |           └── my-parcel-two.js

Once you have the file structure setup and Parcels created you can use the <script> tag to target the helper script.

<script src="https://maelstrom-dmz-nonprod.uhc.com/cdn/mfpoc/abyss-parcel.js"></script>

With the script in place you can use the Abyss Parcel element to import any Parcel you want from any environment or version. To do this, there are two parts to the import value.

<abyss-parcel import="my-parcel-one@test"></abyss-parcel>

<abyss-parcel import="my-parcel-two@1.0.0"></abyss-parcel>

<abyss-parcel import="my-parcel-two@2.0.0"></abyss-parcel>

<abyss-parcel import="my-parcel-two@stage"></abyss-parcel>