How to use @discoveryjs/discovery - 5 common examples

import transport from './transport';
import * as discoveryLib from '@discoveryjs/discovery/dist/lib.umd';
import prepare from './prepare';
import * as pages from './pages/';
import * as views from './views/';

const discovery = new discoveryLib.App(document.body, {});
const globalData = {};
const context = {
  name: 'Webpack Runtime Analyzer',
  // raw: data.raw,
  createdAt: new Date().toISOString(),
};

console.log(discoveryLib);
console.log(discovery);

discovery.apply(discoveryLib.router);
discovery.setPrepare(prepare);
discovery.setData(globalData, context);

discovery.addBadge(
  'Messages',

import prepare from './prepare';
import * as pages from './pages/';
import * as views from './views/';

const discovery = new discoveryLib.App(document.body, {});
const globalData = {};
const context = {
  name: 'Webpack Runtime Analyzer',
  // raw: data.raw,
  createdAt: new Date().toISOString(),
};

console.log(discoveryLib);
console.log(discovery);

discovery.apply(discoveryLib.router);
discovery.setPrepare(prepare);
discovery.setData(globalData, context);

discovery.addBadge(
  'Messages',
  () => discovery.setPage('messages'),
  (host) => host.pageId !== 'messages'
);

discovery.addBadge(
  'Deoptimization',
  () => discovery.setPage('deopts'),
  (host) => host.pageId !== 'deopts'
);

function generateColor(value) {

function initDiscovery(options) {
    const { settings } = options;
    const discovery = new Widget(options.wrapper);

    discovery.apply(router);
    discovery.apply(complexViews);

    settingsPage(discovery);

    discovery.page.define('default', [
        {
            view: 'struct',
            expanded: parseInt(settings.expandLevel, 10) || 0
        }
    ]);

    discovery.view.define('raw', el => {
        const { raw } = discovery.context;
        const div = document.createElement('div');

function initDiscovery(settings) {
    const discovery = new Widget(document.body);

    discovery.apply(router);
    discovery.apply(complexViews);

    discovery.page.define('default', [
        {
            view: 'struct',
            expanded: parseInt(settings.expandLevel, 10) || 0
        }
    ]);

    discovery.view.define('raw', el => {
        const { raw } = discovery.context;
        const div = document.createElement('div');

        div.classList.add('user-select');

export function initDiscovery(options) {
    const { Widget, router, complexViews } = require('@discoveryjs/discovery/dist/discovery.umd.js');
    const settingsPage = require('../settings').default;

    require('@discoveryjs/discovery/dist/discovery.css');
    require('./index.css');

    const { settings } = options;
    const discovery = new Widget(options.discoveryNode);

    discovery.apply(router);
    discovery.apply(complexViews);

    settingsPage(discovery);

    discovery.page.define('default', [
        {
            view: 'struct',
            expanded: parseInt(settings.expandLevel, 10) || 0
        }
    ]);

    discovery.view.define('raw', el => {
        const { raw } = discovery.context;
        const div = document.createElement('div');