npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@apptrium/web-host

v1.13.0

Published

Web host application

Downloads

84

Readme

web-host

This library is a gateway for Invent widgets ecosystem into 3rd party web applications or websites. Being an entrypoint, it holds a number of dependencies bundled together, so they could be used in an eager manner by all the widgets and micro-apps that will be embedded.

  • minimal footprint in 3rd party code
  • no disruptions/performance problems for 3rd party apps
  • supporting both node-based build systems, and cases without build systems

How to use

  1. Let's add the initial script on the page - it could be html root of your application in case of SPA, or the same webpage where you want to display the embedded widgets if you use a more classic web approach. To do that, add this script in the <head> section of the html file:
<script type="module" src="https://unpkg.com/@apptrium/web-host@{version/latest}/dist/invent-manager.umd.js"></script>

This is sync-loaded script with a size of ~2kb which generates a wrapper for sync calls to render widgets for convenience. It also provides a method to register your application within Invent ecosystem, using an open token and referrer URL - validating that you are eligible to receive embedded widgets code.

  1. Register the application using the following method:
  window.InventManager.initHostApplication({
    token: 'your token',
    widgets: [], // array of numeric widgets IDs which you intend to embed on this page
    themes: [] // array of theme names to use
  })

This will initiate an asynchronous load of web host application file - from the same unpkg base url that you used on step 1. On load success, it will make a call to Invent API service to validate you credentials (open token + referrer url are used). If authenticated, the response will deliver all the requested widgets metadata and themes for web-host to use.

Please consider making this initHostApplication call in the JS root of your application, so the bundle load starts earlier.

  1. Even if the web-host main bundle from step 2 is not loaded yet, widget render calls will be added to the queue, which will be executed later. So, you can safely add those render calls anywhere into your application (just make sure that step 1 was executed correctly and the script is available on the page).

An example of widget render call:

const widgetNode = document.getElementById('widgetRoot');
window.InventManager.createWidget({
  widgetId: insertWidgetNumericID,
  node: widgetNode,
  settings: {...} // any settings available for the widget
});

Make sure that selected node exists at the time of createWidget call.

As it was mentioned earlier, this is a synchronous API, so you don't need to worry about anything from step 2.

settings object is static for now, so once an embedded widget was rendered with this object, it will not reflect any further changes

Themes usage

Themes can be manage through registerTheme and setTheme instance methods. registerTheme is used for adding theme to the registry in the runtime, setTheme - defines current theme in use by it's name. Note, that registerTheme does not automatically chooses the theme you passed as in use

An example of usage:

window.InventManager.registerTheme({
  name: "myTheme",
  ...
});
window.InventManager.setTheme("myTheme");