Embeddable Components Principle and implementation
npm install embeddable-components```
See it in action: https://jsfiddle.net/x02Lwcna/
Check out Vue examples and more
Embeddable components in three minutes
The consumer will receive instruction on how to integrate the product.
It's possible that the widget can be configured in a way. This solution
should allow for this type of communication.
The instructions for the consumer are:
Add this script at the end of the body:
``
And insert this piece where you want the widget to appear:
``
to the
page and point the framework there (https://vuejs.org/v2/guide/,
https://reactjs.org/docs/add-react-to-a-website.html).This wont fit our requirements. The bootstrapping process of embeddable
components that use frameworks needs to be more flexible. Instead of relying
on the existence of a certain DOM element, one should wait until that
certain DOM element is added to the DOM. Besides reactive bootstrapping, one
should also take care of proper cleanup when your application is removed
from the document. When you finally bootstrapped the application host parameters
need to be hoisted to your application....
The embeddable component library
This library takes care of reacting to relevant DOM changes, so a supplier
only needs to worry about his widget. Specifically: The library handles
the following:
- Reacting to additions of a target node
- Reacting to removal of target node
- Transferring parameters (by consumer) to the widget application
- Providing some framework specific bootstrappers (vue, react)
- Providing some relevant utility functions for building stuff that
runs on someone else's server.Basic usage example:
For a supplier to be able to write an component that can be
embedded in the previously described way (