Make a javascript app embeddable on a web page via a single script tag
npm install embeddableA tiny module that helps make your javascript app embeddable on a web page via a single npm install embeddable createEmbed(options, callback) createEmbed(callback) createEmbed(options) - The function you provide as - `` import { createEmbed, loadStylesheet } from 'embeddable' createEmbed({ Now, this text block should appear AFTER the first embed and BEFORE the next embed, which you should see right below: And this text should appear AFTER everything else tag. Once loaded, an Embeddable-enabled app will locate the very tag that embedded it and create and insert an empty right before that tag's position in the DOM. Next, a callback function that you provide will be called and passed an Object that points to the empty DOM element that was created, along with other useful information such as params that might have been specified via the embedding tag. At that point, your app can render itself into that div.Installation
API
options is an object that can contain the following properties:initPlayer (aliased as callback) - instead of passing callback as a separate param, you can include it in the options object.
- initApp - a function that gets called once — even if the same script is embedded multiple times on the page — and before any of the initPlayer callbacks are called. This is a good opportunity to instantiate/prepare/load assets that are to be shared by all embeds.callback will get called once the Embeddable's DOM element is created or if a problem was encountered in the process. The function's signature is the familiar function(error, result) {} where, if successful, results will contain the following props:el - the DOM element that was created
- params - an object of key value pairs passed in via the tag's src attribute following a hash (#) in the url. For example src="path/to/script.js#foo=bar&baz=5" will yield a params: { foo:"bar", baz:"5"}.Example
js
initPlayer: function(err, embed) {
// This runs once for each
`
Testing is currently semi-complete: running npm test will build a simple Embeddable app (see test/src`) and open it up in an Electron browser. You can then visually check whether or not the page rendered as expected; the program does not make any automated assertions at the moment.