To help you get started, we've collected the most common ways that @discoveryjs/discovery is being used within popular public projects.

smelukov / webpack-runtime-analyzer / src / ui / index.js View on Github

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',

View more ways to use @discoveryjs/discovery

Discovery

Hackable JSON discovery tool

> Documentation in progress...

Articles

• Discovery.js tutorials: quick start
• JsonDiscovery: Changing a way we’re viewing JSON in a browser

Examples of usage

• Statoscope – a toolkit to analyze and validate webpack bundle
• CPUpro – rethinking of CPU profile analysis
• CSS syntax reference (source)
• CSSWG spec drafts index (source)

Related projects

• Discovery CLI – CLI tools to serve & build projects based on Discovery.js
• JsonDiscovery – Chrome/Firefox browser extension built on Discovery which allows to discover a JSON document and make reports
• Jora – data query language
• Jora CLI – a tool to process JSON data using Jora in command line interface

Plugins

• @discoveryjs/view-plugin-highcharts – Highcharts plugin

Install

> npm install @discoveryjs/discovery

Base concepts

Model goes through data->prepare->render chain. Data can be modified with prepare function and rendered by various views and its combinations.

View is a function(el, config, data, context) where:

• el - DOM-element in which view will be rendered
• config - configuration of view
• data - data to render
• context - contains of model data, metaifo (createdAt, etc), router (optional), any user defined or view defined additional data

Page is a root view function(el, data, context). Similar to view it has all of its arguments except config.

Page

To define a page you should call discovery.page.define(pageId, render(el, data, context), options) where:

• pageId - unique page identifier
• render - page render function described above
• options - object with options:
  • reuseEl - do not clear container before render page (skiped for first render or pageId change)
  • init - invokes on first page render or pageId change
  • keepScrollOffset - dont scroll to page top if pageId didn't changed since last page render
  • encodeParams
  • decodeParams

Other handy methods for working with page:

• discovery.renderPage()
• discovery.setPage(pageId, pageRef, renderParam), discovery.setPageParams(renderParams) triggers renderPage()
• discovery.getPageContext() gets context of page

Special pages

There are some built-in special pages:

• default
• report
• not-found

You can override this pages with page.define() method

View

To define new view just call discovery.view.define(viewId, render, options) where:

• viewId - unique view identifier
• render - function(el, config, data, context) or view definition object
• options - object with following fields:
  • tag - a tag name for a view container element. When value is false or null then DocumentFragment is used as a container

You can render your view with discovery.view.render(el, view, data, context) where:

• view can be string viewId, ViewDefinition or Array viewId will expand to { view: viewId }. > Also you can specify view as viewId:query, that will give you handy shortcut to { view: viewId, data: query }
• viewDefinition object with view definition settings:
  • view: string viewId
  • when: query, will be coerced to Boolean (but empty arrays and objects will coerce to false)
  • data: query (will be described later)
  • Also there can be view specific additional fields

Special views

Also special built-in sidebar view is available you can override this view with view.define

Queries

As a query you can specify string which will be processed by Jora so your data will be a result of following flow:

jora(value) -> function(data, context) -> data

Or you can use function(data, context) as query as well. Also you can use any data as query right away.

License

MIT