Package Exports

preact-habitat

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (preact-habitat) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Preact Habitat

Preact habitat is a 1kb module that will help you ship your Preact components \ widget to any world wide DOM page in a very easy and neat way.

Use Case

If you have built a Preact component (eg: Video, login, booking components) and would like to bundle it and ship it to be loaded in other web applications, blogs, etc.. the preact-habitat is what are you looking for.

Installation

npm install --save-dev preact-habitat

How to use

Render your component using Habitat

import { render } from 'preact-habitat';
import WidgetAwesome from './components/WidgetAwesome'

render(WidgetAwesome);

Set Build tool output library type to UMD

example in Webpack:

output: {
  ....
  libraryTarget: 'umd'
}

Host HTML integration

Now your widget is ready and assuming it's on your CDN and your URL is: https://cdn.awesome/widget.js This is how easy it is to integrate in the host DOM

<div id="external-widget-place">
  <script async src="https://cdn.awesome/widget.js"></script>
</div>

The snippet above will load the Preact component you have built inside a div with external-widget-place as id which you can position and style however you want.

Cloning multiple widgets

make a <script> tag and make sure type="widget/config"
add JSON config with the clone key of habitat script parent node id as a value

<div id="external-widget-place">
  <script async src="https://cdn.awesome/widget.js"></script>
</div>

<script type="widget/config">
  {
    "clone": "external-widget-place"
  }
</script>

<script type="widget/config">
  {
    "clone": "external-widget-place"
  }
</script>

You're all set 🎉!

Notes

Please make sure your widget size is reasonable, bloated and big size bundles make puppies sick 🐶 😔
Feel free to fork, contribute or give it a star. Open an issue or chat with me if you have any questions.

preact-habitat