@discoveryjs/discovery - npm Package Compare versions

src/views/editor-mode-query.js

src/views/editor-mode-view.js

src/views/headers-anchor.svg

src/views/image.css

src/views/image.js

src/views/image.svg

src/views/struct/index.usage.js

18

CHANGELOG.md

		@@ -0,1 +1,13 @@
		## 1.0.0-beta.62 (14-10-2021)

		- Fixed code highlighting in `source` view
		- Added alias `jora` for `discovery-query` syntax (used in `source` and `markdown`)
		- Added anchor support for headers and `anchor` option to enable it
		- Added anchor support for headers in `markdown` view and `anchors` option to disable it
		- Changed `hstack` to use flexbox for layout
		- Added `image` view
		- Changed `image-preview` to behave as `image` but with chess background
		- Added `lineNum` option to the `source` view
		- Fixed position highlighting in query editor on lexical error

		## 1.0.0-beta.61 (31-03-2021)
		@@ -172,3 +184,3 @@
		- Fixed `href` option to work for `button` view
		- Fixed path generation in `signature` details
		- Fixed path generation in `signature` details
		- Fixed context for `Widget#nav.menu` item rendering
		@@ -286,3 +298,3 @@
		- `ref` - a string (a field name) or a function (getter), a value that uses in link to page to identify object
		- `title` - astring (a field name) or a function (getter), a text that represent an object, e.g. in `auto-link`
		- `title` - astring (a field name) or a function (getter), a text that represent an object, e.g. in `auto-link`
		- `addQueryHelpers()` method the same as `Widget#addQueryHelpers()`
		@@ -680,3 +692,3 @@ - Added a set of default methods:
		- Show 1 level expanded struct on `default` and `report` pages


		## 1.0.0-beta.2 (26-11-2018)
		@@ -683,0 +695,0 @@

8

package.json

		{
		"name": "@discoveryjs/discovery",
		"version": "1.0.0-beta.61",
		"version": "1.0.0-beta.62",
		"description": "Hackable JSON discovery tool",
		@@ -13,3 +13,3 @@ "author": "Roman Dvornov <rdvornov@gmail.com> (https://github.com/lahmatiy)",
		"scripts": {
		"lint": "eslint scripts src",
		"lint": "eslint cypress models src",
		"build": "npm run build:js && npm run build:css && npm run build:preloader",
		@@ -40,5 +40,5 @@ "build:js": "esbuild src/lib.js --outfile=dist/discovery.js --bundle --define:global=window --format=esm --minify --sourcemap",
		"@discoveryjs/cli": "^2.0.0-beta.12",
		"cypress": "^5.3.0",
		"cypress": "^8.6.0",
		"esbuild": "~0.11.2",
		"eslint": "^6.8.0",
		"eslint": "^8.0.1",
		"eslint-plugin-cypress": "^2.11.2"
		@@ -45,0 +45,0 @@ },

2

README.md

		@@ -8,3 +8,3 @@ <img align="right" width="128" height="128"
		[![NPM version](https://img.shields.io/npm/v/@discoveryjs/discovery.svg)](https://www.npmjs.com/package/@discoveryjs/discovery)
		[![Twitter](https://img.shields.io/badge/Twitter-@js_discovery-blue.svg)](https://twitter.com/js_discovery)
		[![Twitter](https://badgen.net/badge/follow/@js_discovery?icon=twitter)](https://twitter.com/js_discovery)

		@@ -11,0 +11,0 @@ Hackable JSON discovery tool

12

src/core/router.js

		/* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		// init
		discovery.setPageHash(location.hash);
		discovery.cancelScheduledRender();
		host.setPageHash(location.hash);
		host.cancelScheduledRender();

		// sync
		window.addEventListener('hashchange', () => discovery.setPageHash(location.hash), false);
		discovery.on('pageHashChange', function(replace) {
		const newPageHash = discovery.pageHash \|\| '#';
		window.addEventListener('hashchange', () => host.setPageHash(location.hash), false);
		host.on('pageHashChange', function(replace) {
		const newPageHash = host.pageHash \|\| '#';

		@@ -13,0 +13,0 @@ if (newPageHash === '#' && !location.hash) {

47

src/core/view.js

		@@ -183,2 +183,29 @@ /* eslint-env browser */

		function createRenderContext(host, name) {
		return {
		name,
		// block() {
		// return `view-${name}`;
		// },
		// blockMod(modifierName, value = true) {
		// return `${this.block()}_${modifierName}${value === true ? '' : '_' + value}`;
		// },
		// element(elementName) {
		// return `${this.block()}__${elementName}`;
		// },
		// elementMod(elementName, modifierName, value = true) {
		// return `${this.element(elementName)}_${modifierName}${value === true ? '' : '_' + value}`;
		// },
		normalizeConfig: host.normalizeConfig.bind(host),
		ensureValidConfig: host.ensureValidConfig.bind(host),
		composeConfig: host.composeConfig.bind(host),
		propsFromConfig: host.propsFromConfig.bind(host),
		render: host.render.bind(host),
		listLimit: host.listLimit.bind(host),
		renderList: host.renderList.bind(host),
		maybeMoreButtons: host.maybeMoreButtons.bind(host),
		renderMoreButton: host.renderMoreButton.bind(host)
		};
		}

		function render(container, config, data, context) {
		@@ -194,5 +221,5 @@ if (Array.isArray(config)) {
		renderer = {
		render: config.view,
		name: false,
		options: STUB_OBJECT
		options: STUB_OBJECT,
		render: config.view
		};
		@@ -209,2 +236,4 @@ break;
		renderer = {
		name: false,
		options: { tag: false },
		render: (el, _, _data) => {
		@@ -223,5 +252,3 @@ const _config = configQuery !== '' ? this.host.query(configQuery, data, context) : _data;
		);
		},
		name: false,
		options: { tag: false }
		}
		};
		@@ -233,5 +260,5 @@ } else if (config.view.startsWith('preset/')) {
		renderer = {
		render: this.host.preset.get(presetName).render,
		name: false,
		options: { tag: false }
		options: { tag: false },
		render: this.host.preset.get(presetName).render
		};
		@@ -310,6 +337,6 @@ } else {
		name,
		options: Object.freeze({ ...options }),
		render: typeof render === 'function'
		? render.bind(this)
		: (el, _, data, context) => this.render(el, render, data, context),
		options: Object.freeze({ ...options })
		? render.bind(createRenderContext(this, name))
		: (el, _, data, context) => this.render(el, render, data, context)
		}));
		@@ -316,0 +343,0 @@ }

6

src/pages/default.js

		import { createElement } from '../core/utils/dom.js';

		export default function(discovery) {
		discovery.page.define('default', {
		export default function(host) {
		host.page.define('default', {
		view: 'switch',
		@@ -26,3 +26,3 @@ content: [
		accept: 'application/json,.json',
		onchange: event => discovery.constructor.modelfreeLoadData(discovery, event)
		onchange: event => host.constructor.modelfreeLoadData(host, event)
		}).click(),
		@@ -29,0 +29,0 @@ content: 'text:"Load data"'

4

src/pages/not-found.js

		@@ -1,5 +0,5 @@
		export default function(discovery) {
		discovery.page.define('not-found', [
		export default function(host) {
		host.page.define('not-found', [
		'alert-warning:"Page \`" + name + "\` not found"'
		]);
		}

14

src/pages/report.js

		@@ -8,6 +8,6 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		function updateParams(delta, replace) {
		return discovery.setPageParams({
		...discovery.pageParams,
		return host.setPageParams({
		...host.pageParams,
		...delta
		@@ -17,5 +17,5 @@ }, replace);

		const header = createHeader(discovery, updateParams);
		const queryEditor = createQueryEditor(discovery, updateParams);
		const viewEditor = createViewEditor(discovery, updateParams);
		const header = createHeader(host, updateParams);
		const queryEditor = createQueryEditor(host, updateParams);
		const viewEditor = createViewEditor(host, updateParams);

		@@ -39,3 +39,3 @@ //
		//
		discovery.page.define('report', function(el, data, context) {
		host.page.define('report', function(el, data, context) {
		// process noedit setting
		@@ -42,0 +42,0 @@ reportEditorEl.hidden = context.params.noedit;

26

src/pages/report/editor-query.js

		@@ -20,3 +20,3 @@ import { createElement } from '../../core/utils/dom.js';

		export default function(discovery, updateParams) {
		export default function(host, updateParams) {
		let expandQueryResults = false;
		@@ -26,7 +26,7 @@ let lastQuery = {};
		let queryEditorLiveEditEl;
		const getQuerySuggestions = (query, offset) => discovery.querySuggestions(query, offset, discovery.data, discovery.context);
		const queryEditor = new discovery.view.QueryEditor(getQuerySuggestions).on('change', value =>
		const getQuerySuggestions = (query, offset) => host.querySuggestions(query, offset, host.data, host.context);
		const queryEditor = new host.view.QueryEditor(getQuerySuggestions).on('change', value =>
		queryEditorLiveEditEl.checked && updateParams({ query: value }, true)
		);
		const queryEngineInfo = discovery.getQueryEngineInfo();
		const queryEngineInfo = host.getQueryEngineInfo();
		const queryEditorButtonsEl = createElement('div', 'buttons');
		@@ -64,3 +64,3 @@ const queryEditorResultEl = createElement('div', 'data-query-result');
		// FIXME: temporary until full migration on discovery render
		discovery.view.render(queryEditorButtonsEl, {
		host.view.render(queryEditorButtonsEl, {
		view: 'button-primary',
		@@ -73,3 +73,3 @@ content: 'text:"Process"',
		}, true);
		discovery.scheduleRender('page'); // force render
		host.scheduleRender('page'); // force render
		}
		@@ -100,3 +100,3 @@ });
		queryTime = Date.now();
		results = discovery.query(pageQuery, data, context);
		results = host.query(pageQuery, data, context);
		queryTime = Date.now() - queryTime;
		@@ -108,10 +108,12 @@ } catch (error) {
		if (loc) {
		errorMarker = error.details.token === 'EOF'
		const [start, end] = error.details.loc.range;

		errorMarker = error.details.token === 'EOF' \|\| start === end
		? doc.setBookmark(
		doc.posFromIndex(error.details.loc.range[0]),
		doc.posFromIndex(start),
		{ widget: createElement('span', 'discovery-editor-error', ' ') }
		)
		: doc.markText(
		doc.posFromIndex(error.details.loc.range[0]),
		doc.posFromIndex(error.details.loc.range[1]),
		doc.posFromIndex(start),
		doc.posFromIndex(end),
		{ className: 'discovery-editor-error' }
		@@ -134,3 +136,3 @@ );
		queryEditorResultEl.innerHTML = '';
		discovery.view.render(queryEditorResultEl, {
		host.view.render(queryEditorResultEl, {
		view: 'expand',
		@@ -137,0 +139,0 @@ header: `text:"${valueDescriptor(results)} in ${parseInt(queryTime, 10)}ms"`,

26

src/pages/report/editor-view.js

		@@ -39,6 +39,6 @@ import { createElement } from '../../core/utils/dom.js';

		export default function(discovery, updateParams) {
		export default function(host, updateParams) {
		let lastView = {};
		const viewPresets = Array.isArray(discovery.options.viewPresets)
		? defaultViewPresets.concat(discovery.options.viewPresets)
		const viewPresets = Array.isArray(host.options.viewPresets)
		? defaultViewPresets.concat(host.options.viewPresets)
		: defaultViewPresets;
		@@ -53,3 +53,3 @@
		let viewLiveEditEl;
		const viewEditor = new discovery.view.ViewEditor(discovery).on('change', value =>
		const viewEditor = new host.view.ViewEditor(host).on('change', value =>
		viewLiveEditEl.checked && updateParams({ view: value }, true)
		@@ -130,3 +130,3 @@ );
		// FIXME: temporary until full migration on discovery render
		discovery.view.render(viewEditorButtonsEl, {
		host.view.render(viewEditorButtonsEl, {
		view: 'button-primary',
		@@ -139,6 +139,6 @@ content: 'text:"Build"',
		}, true);
		discovery.scheduleRender('page'); // force render
		host.scheduleRender('page'); // force render
		}
		});
		new discovery.view.Popup({
		new host.view.Popup({
		className: 'view-editor-view-list-hint',
		@@ -148,3 +148,3 @@ hoverTriggers: '.view-editor-view-list .item.with-usage',
		render: function(popupEl, triggerEl) {
		discovery.view.render(popupEl, renderUsage(discovery), discovery.view.get(triggerEl.textContent), {});
		host.view.render(popupEl, renderUsage(host), host.view.get(triggerEl.textContent), {});
		}
		@@ -154,7 +154,7 @@ });
		// sync view list
		availableViewsTextEl.textContent = `Available ${[...discovery.view.entries].filter(([, view]) => view.options.usage).length} views`;
		availableViewsTextEl.textContent = `Available ${[...host.view.entries].filter(([, view]) => view.options.usage).length} views`;
		const updateAvailableViewList = () =>
		availableViewsListEl.innerHTML =
		'<a href="#views-showcase" class="view-link">Views showcase</a><br><br>' +
		[...discovery.view.entries].sort()
		[...host.view.entries].sort()
		.map(([name, view]) => `<div><a class="item view-link${view.options.usage ? ' with-usage' : ''}" ${view.options.usage ? 'href="#views-showcase:' + name + '"' : ''}>${name}</a></div>`)
		@@ -164,3 +164,3 @@ .join('');
		updateAvailableViewList();
		discovery.view.on('define', updateAvailableViewList);
		host.view.on('define', updateAvailableViewList);

		@@ -199,5 +199,5 @@ // sync view list
		view = Function('return ' + (pageView ? '0,' + pageView : 'null'))();
		discovery.view.render(reportContentEl, view, data, context);
		host.view.render(reportContentEl, view, data, context);
		} catch (e) {
		discovery.view.render(reportContentEl, el => {
		host.view.render(reportContentEl, el => {
		el.className = 'report-error render-error';
		@@ -204,0 +204,0 @@ el.innerHTML = escapeHtml(String(e)) + '<br>(see details in console)';

12

src/pages/report/header.js

		@@ -18,3 +18,3 @@ /* eslint-env browser */

		export default function(discovery, updateParams) {
		export default function(host, updateParams) {
		let titleInputEl;
		@@ -25,8 +25,8 @@ let dataDateTimeEl;

		const shareOptionsPopup = new discovery.view.Popup({
		render: (popupEl, _, hide) => discovery.view.render(popupEl, {
		const shareOptionsPopup = new host.view.Popup({
		render: (popupEl, _, hide) => host.view.render(popupEl, {
		view: 'menu',
		data: [
		{ text: 'Copy link to report', action: () => copyText(location) },
		{ text: 'Copy report as JSON', action: () => copyText(exportReportAsJson(discovery.pageParams)) }
		{ text: 'Copy report as JSON', action: () => copyText(exportReportAsJson(host.pageParams)) }
		],
		@@ -47,3 +47,3 @@ onClick(item) {
		updateParams({
		noedit: !discovery.pageParams.noedit
		noedit: !host.pageParams.noedit
		});
		@@ -66,3 +66,3 @@ }
		updateParams({
		dzen: !discovery.pageParams.dzen
		dzen: !host.pageParams.dzen
		});
		@@ -69,0 +69,0 @@ }

18

src/pages/views-showcase.js

		import renderUsage from '../views/_usage.js';

		export default function(discovery) {
		export default function(host) {
		// const fixture = () => ({
		// views: Object.fromEntries(discovery.view.entries),
		// pages: Object.fromEntries(discovery.page.entries)
		// views: Object.fromEntries(host.view.entries),
		// pages: Object.fromEntries(host.page.entries)
		// });

		discovery.page.define('views-showcase', {
		host.page.define('views-showcase', {
		view: 'context',
		data: () => [...discovery.view.values],
		data: () => [...host.view.values],
		modifiers: [
		@@ -44,8 +44,8 @@ {
		// FIXME: make it simpler
		discovery.setPageRef(data.name);
		discovery.cancelScheduledRender();
		context.id = discovery.pageRef;
		host.setPageRef(data.name);
		host.cancelScheduledRender();
		context.id = host.pageRef;
		} },

		renderUsage(discovery)
		renderUsage(host)
		] }
		@@ -52,0 +52,0 @@ ]

6

src/views/_usage.js

		@@ -47,3 +47,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		const renderDemo = {
		@@ -132,3 +132,3 @@ view: 'context',
		data: ({ name, options }) => {
		const group = [...discovery.view.values]
		const group = [...host.view.values]
		.filter(view => view.options.usage === options.usage)
		@@ -164,3 +164,3 @@ .map(view => view.name);
		item: [
		'h2:title',
		'h2{ anchor: true, data: title }',
		renderDemo
		@@ -167,0 +167,0 @@ ]

12

src/views/alerts.js

		@@ -5,3 +5,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		function render(el, config, data, context) {
		@@ -12,9 +12,9 @@ const { content = 'text' } = config;

		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		}

		discovery.view.define('alert', render, { usage });
		discovery.view.define('alert-success', render, { usage });
		discovery.view.define('alert-danger', render, { usage });
		discovery.view.define('alert-warning', render, { usage });
		host.view.define('alert', render, { usage });
		host.view.define('alert-success', render, { usage });
		host.view.define('alert-danger', render, { usage });
		host.view.define('alert-warning', render, { usage });
		}

10

src/views/auto-link.js

		/* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('auto-link', function(el, config, data, context) {
		export default function(host) {
		host.view.define('auto-link', function(el, config, data, context) {
		const { content, fallback, href } = config;
		@@ -11,3 +11,3 @@

		const links = discovery.resolveValueLinks(data);
		const links = host.resolveValueLinks(data);
		const preprocessHref = typeof href === 'function' ? href : value => value;
		@@ -19,3 +19,3 @@ const processedHref = links
		if (processedHref) {
		return discovery.view.render(el, { view: 'link', content }, {
		return host.view.render(el, { view: 'link', content }, {
		...links[0],
		@@ -25,3 +25,3 @@ href: processedHref
		} else {
		return discovery.view.render(el, fallback \|\| content \|\| 'text', data, context);
		return host.view.render(el, fallback \|\| content \|\| 'text', data, context);
		}
		@@ -28,0 +28,0 @@ }, {

8

src/views/badges.js

		@@ -15,3 +15,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		function render(el, config, data, context) {
		@@ -53,3 +53,3 @@ const { content } = config;
		if (content) {
		render = discovery.view.render(el, content, data, context);
		render = this.render(el, content, data, context);
		} else {
		@@ -64,4 +64,4 @@ el.append(document.createTextNode(text));

		discovery.view.define('badge', render, { tag: 'a', usage });
		discovery.view.define('pill-badge', render, { tag: 'a', usage });
		host.view.define('badge', render, { tag: 'a', usage });
		host.view.define('pill-badge', render, { tag: 'a', usage });
		}

6

src/views/block.js

		/* eslint-env browser */
		import usage from './block.usage.js';

		export default function(discovery) {
		discovery.view.define('block', function(el, config, data, context) {
		export default function(host) {
		host.view.define('block', function(el, config, data, context) {
		const { content = [], onInit, onChange } = config;
		@@ -14,4 +14,4 @@ const blockContent = typeof onInit !== 'function' && typeof onChange !== 'function'

		return discovery.view.render(el, blockContent, data, context);
		return host.view.render(el, blockContent, data, context);
		}, { usage });
		}

14

src/views/button.js

		@@ -6,3 +6,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		function render(el, config, data, context) {
		@@ -14,3 +14,3 @@ const { content, disabled = false, onClick } = config;

		if (discovery.query(disabled, data, context)) {
		if (host.query(disabled, data, context)) {
		el.disabled = true;
		@@ -28,3 +28,3 @@ } else if (typeof onClick === 'function') {
		if (content) {
		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		} else {
		@@ -35,6 +35,6 @@ el.textContent = text;

		discovery.view.define('button', render, { tag: 'button', usage });
		discovery.view.define('button-primary', render, { tag: 'button', usage });
		discovery.view.define('button-danger', render, { tag: 'button', usage });
		discovery.view.define('button-warning', render, { tag: 'button', usage });
		host.view.define('button', render, { tag: 'button', usage });
		host.view.define('button-primary', render, { tag: 'button', usage });
		host.view.define('button-danger', render, { tag: 'button', usage });
		host.view.define('button-warning', render, { tag: 'button', usage });
		}

12

src/views/checkbox-list.js

		/* eslint-env browser */
		import usage from './checkbox-list.usage.js';

		export default function(discovery) {
		discovery.view.define('checkbox-list', function(el, config, data, context) {
		export default function(host) {
		host.view.define('checkbox-list', function(el, config, data, context) {
		const { name = 'filter', checkbox, checkboxValue = '$', emptyText, limit, onChange, onInit } = config;
		@@ -18,3 +18,3 @@ const state = new Set();
		if (Array.isArray(data)) {
		return discovery.view.renderList(el, this.composeConfig({
		return host.view.renderList(el, this.composeConfig({
		view: 'checkbox',
		@@ -24,3 +24,3 @@ ...checkbox,
		if (checked) {
		state.add(discovery.query(checkboxValue, itemData, itemContext));
		state.add(host.query(checkboxValue, itemData, itemContext));
		}
		@@ -30,3 +30,3 @@ },
		const size = state.size;
		const value = discovery.query(checkboxValue, itemData, itemContext);
		const value = host.query(checkboxValue, itemData, itemContext);

		@@ -43,3 +43,3 @@ if (checked) {
		}
		}), data, context, 0, discovery.view.listLimit(limit, 25)).then(() => {
		}), data, context, 0, host.view.listLimit(limit, 25)).then(() => {
		if (typeof onInit === 'function') {
		@@ -46,0 +46,0 @@ onInit([...state], name);

8

src/views/checkbox.js

		@@ -5,3 +5,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		function renderContent(contentEl, content, data, context, name, inputEl) {
		@@ -15,6 +15,6 @@ if (contentEl === null) {
		contentEl.innerHTML = '';
		return discovery.view.render(contentEl, content, data, localContext);
		return host.view.render(contentEl, content, data, localContext);
		}

		discovery.view.define('checkbox', function(el, config, data, context) {
		host.view.define('checkbox', function(el, config, data, context) {
		const { name, checked, readonly, content, onInit, onChange } = config;
		@@ -25,3 +25,3 @@ const inputEl = el.appendChild(createElement('input'));
		inputEl.type = 'checkbox';
		inputEl.checked = checked !== undefined ? discovery.queryBool(checked, data, context) : Boolean(context[name]);
		inputEl.checked = checked !== undefined ? host.queryBool(checked, data, context) : Boolean(context[name]);
		inputEl.readOnly = readonly;
		@@ -28,0 +28,0 @@ inputEl.addEventListener('click', (e) => {

6

src/views/column.js

		/* eslint-env browser */
		import usage from './columns.usage.js';

		export default function(discovery) {
		discovery.view.define('column', function(el, config, data, context) {
		export default function(host) {
		host.view.define('column', function(el, config, data, context) {
		const { content = [] } = config;

		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		}, { usage });
		}

8

src/views/columns.js

		/* eslint-env browser */
		import usage from './columns.usage.js';

		export default function(discovery) {
		discovery.view.define('columns', function render(el, config, data, context) {
		export default function(host) {
		host.view.define('columns', function render(el, config, data, context) {
		const { column, columnConfig, emptyText, limit } = config;
		@@ -17,8 +17,8 @@
		if (Array.isArray(data)) {
		return discovery.view.renderList(el, this.composeConfig({
		return host.view.renderList(el, this.composeConfig({
		view: 'column',
		content: column
		}, columnConfig), data, context, 0, discovery.view.listLimit(limit, 25));
		}, columnConfig), data, context, 0, host.view.listLimit(limit, 25));
		}
		}, { usage });
		}

6

src/views/content-filter.js

		/* eslint-env browser */
		import usage from './content-filter.usage.js';

		export default function(discovery) {
		discovery.view.define('content-filter', function(el, config, data, context) {
		export default function(host) {
		host.view.define('content-filter', function(el, config, data, context) {
		const { name = 'filter', type = 'regexp', placeholder, content, onInit, onChange } = config;

		return discovery.view.render(el, {
		return host.view.render(el, {
		view: 'context',
		@@ -10,0 +10,0 @@ modifiers: {

10

src/views/context.js

 /* eslint-env browser */
 import usage from './context.usage.js';
 export default function(discovery) {
     discovery.view.define('context', function(el, config, data, context) {
 export default function(host) {
     host.view.define('context', function(el, config, data, context) {
         function renderContent() {
 @@ -16,7 +16,7 @@ // clear old content
             const buffer = lastRender = document.createDocumentFragment();
             return discovery.view
             return host.view
                 .render(buffer, content, data, localContext)
                 .then(() => {
                     if (buffer === lastRender) {
                         discovery.view.adoptFragment(buffer, contentStartMarker);
                         host.view.adoptFragment(buffer, contentStartMarker);
                         contentStartMarker.after(buffer);
 @@ -58,3 +58,3 @@ }
         const renderModifiers = discovery.view.render(el, this.composeConfig(modifiers, {
         const renderModifiers = host.view.render(el, this.composeConfig(modifiers, {
             onInit: updateContext,
 @@ -61,0 +61,0 @@ onChange: updateContext

14

src/views/dropdown.js

		@@ -30,4 +30,4 @@ /* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('dropdown', function(el, config, data, context) {
		export default function(host) {
		host.view.define('dropdown', function(el, config, data, context) {
		function isEqual(a, b) {
		@@ -42,3 +42,3 @@ return typeof compare === 'function'

		return discovery.view.render(
		return host.view.render(
		captionEl,
		@@ -69,3 +69,3 @@ caption \|\| 'text',
		buttonsEl.innerHTML = '';
		discovery.view.render(buttonsEl, [
		host.view.render(buttonsEl, [
		{
		@@ -125,3 +125,3 @@ view: 'button-primary',
		if (dropdownPopup === null) {
		dropdownPopup = new discovery.view.Popup({ className: 'view-dropdown-popup' });
		dropdownPopup = new host.view.Popup({ className: 'view-dropdown-popup' });
		}
		@@ -133,7 +133,7 @@
		dropdownPopup.toggle(el, popupEl =>
		discovery.view.render(popupEl, [
		host.view.render(popupEl, [
		{
		view: 'block',
		className: 'content',
		content: discovery.view.composeConfig(content, {
		content: host.view.composeConfig(content, {
		onInit(value, name) {
		@@ -140,0 +140,0 @@ sessionContext[name] = value;

7

src/views/dropdown.usage.js

		@@ -10,3 +10,3 @@ /* eslint-env browser */
		resetValue: { foo: 'one', bar: '' },
		caption: { view: 'struct', expanded: 1, data: '#' },
		caption: 'text:`${#.demo.foo} / ${#.demo.bar}`',
		content: [
		@@ -17,4 +17,7 @@ { view: 'select', name: 'foo', data: ['one', 'two', 'three', 'four'] },
		},
		content: { view: 'struct', expanded: 1, data: '#' }
		content: [
		{ view: 'block', content: 'text:"Modified context (see values in \\"demo\\" section):"' },
		{ view: 'struct', expanded: 1, data: '#' }
		]
		}
		};

98

src/views/editors.js

		@@ -7,2 +7,4 @@ /* eslint-env browser */
		import CodeMirror from 'codemirror';
		import modeQuery from './editor-mode-query';
		import modeView from './editor-mode-view';
		import 'codemirror/mode/javascript/javascript';
		@@ -137,92 +139,14 @@ import './editors-hint.js';

		CodeMirror.defineMode('discovery-query', function(config) {
		const jsMode = CodeMirror.getMode(config, {
		name: 'javascript',
		json: true
		});
		CodeMirror.defineMode('jora', modeQuery);
		CodeMirror.defineMode('discovery-query', modeQuery);
		CodeMirror.defineMode('discovery-view', modeView);

		return {
		...jsMode,
		indent(state, textAfter) {
		return state.indented + config.indentUnit * (
		(state.lastType === '{' && textAfter.trim()[0] !== '}') \|\|
		(state.lastType === '(' && textAfter.trim()[0] !== ')') \|\|
		(state.lastType === '[' && textAfter.trim()[0] !== ']')
		);
		},
		token(stream, state) {
		const next = stream.peek();

		if (next === '#' \|\| next === '@') {
		jsMode.token(new CodeMirror.StringStream('$', 4, stream.lineOracle), state);
		stream.pos++;
		return 'variable';
		}

		return jsMode.token(stream, state);
		}
		};
		});

		CodeMirror.defineMode('discovery-view', function(config, options) {
		const isDiscoveryViewDefined = typeof options.isDiscoveryViewDefined === 'function'
		? options.isDiscoveryViewDefined
		: () => {};
		const jsMode = CodeMirror.getMode(config, {
		name: 'javascript',
		json: true
		});

		return {
		...jsMode,
		indent(state, textAfter) {
		return state.indented + config.indentUnit * (
		(state.lastType === '{' && textAfter.trim()[0] !== '}') \|\|
		(state.lastType === '(' && textAfter.trim()[0] !== ')') \|\|
		(state.lastType === '[' && textAfter.trim()[0] !== ']')
		);
		},
		token: function(stream, state) {
		if (state.suspendTokens) {
		const { pos, token } = state.suspendTokens.shift();

		stream.pos = pos;
		if (state.suspendTokens.length === 0) {
		state.suspendTokens = null;
		}

		return token;
		}

		const start = stream.pos;
		const token = jsMode.token(stream, state);

		if (token === 'string') {
		const end = stream.pos;
		const [, viewName] = stream.string
		.slice(start + 1, end - 1)
		.match(/^(.+?)([:{]\|$)/) \|\| [];

		if (isDiscoveryViewDefined(viewName)) {
		stream.pos = start + 1;
		state.suspendTokens = [
		{ pos: start + 1 + viewName.length, token: 'string discovery-view-name' },
		{ pos: end, token }
		];
		}
		}

		return token;
		}
		};
		});

		export default function(discovery) {
		Object.assign(discovery.view, {
		export default function(host) {
		Object.assign(host.view, {
		QueryEditor: class extends QueryEditor {
		get darkmode() {
		return discovery.darkmode;
		return host.darkmode;
		}
		get container() {
		return discovery.dom.container;
		return host.dom.container;
		}
		@@ -232,6 +156,6 @@ },
		isViewDefined(name) {
		return discovery.view.isDefined(name);
		return host.view.isDefined(name);
		}
		get darkmode() {
		return discovery.darkmode;
		return host.darkmode;
		}
		@@ -238,0 +162,0 @@ }

10

src/views/expand.js

		@@ -5,4 +5,4 @@ /* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('expand', function(el, config, data, context) {
		export default function(host) {
		host.view.define('expand', function(el, config, data, context) {
		function renderState() {
		@@ -14,3 +14,3 @@ el.classList.toggle('expanded', expanded);

		return discovery.view.render(contentEl, content, data, context)
		return host.view.render(contentEl, content, data, context)
		.then(() => el.appendChild(contentEl));
		@@ -33,3 +33,3 @@ } else if (contentEl !== null) {

		expanded = discovery.queryBool(expanded, data, context);
		expanded = host.queryBool(expanded, data, context);
		headerEl.appendChild(createElement('div', 'trigger'));
		@@ -46,3 +46,3 @@ headerEl.addEventListener('click', () => {
		return Promise.all([
		discovery.view.render(headerContentEl, header \|\| 'text:"\u00A0"', data, context),
		host.view.render(headerContentEl, header \|\| 'text:"\u00A0"', data, context),
		renderState()
		@@ -49,0 +49,0 @@ ]);

41

src/views/headers.js

		/* eslint-env browser */
		import { Slugger } from 'marked';
		import { createElement } from '../core/utils/dom.js';
		import usage from './headers.usage.js';

		export default function(discovery) {
		export default function(host) {
		const slugger = new Slugger;

		function render(el, config, data, context) {
		const { content } = config;
		const { content, anchor = false } = config;

		el.classList.add('view-header');

		return discovery.view.render(el, content \|\| 'text', data, context);
		const render = host.view.render(el, content \|\| 'text', data, context);

		if (anchor) {
		render.then(() => {
		const slug = slugger.slug(anchor === true ? el.textContent : String(anchor), { dryrun: true });
		const href = host.encodePageHash(
		host.pageId,
		host.pageRef,
		{ ...host.pageParams, '!anchor': slug }
		);

		el.prepend(createElement('a', {
		class: 'view-header__anchor',
		id: `!anchor:${slug}`,
		href
		}));
		});
		}

		return render;
		}

		discovery.view.define('header', render, { tag: 'h4', usage });
		discovery.view.define('h1', render, { tag: 'h1', usage });
		discovery.view.define('h2', render, { tag: 'h2', usage });
		discovery.view.define('h3', render, { tag: 'h3', usage });
		discovery.view.define('h4', render, { tag: 'h4', usage });
		discovery.view.define('h5', render, { tag: 'h5', usage });
		host.view.define('header', render, { tag: 'h4', usage });
		host.view.define('h1', render, { tag: 'h1', usage });
		host.view.define('h2', render, { tag: 'h2', usage });
		host.view.define('h3', render, { tag: 'h3', usage });
		host.view.define('h4', render, { tag: 'h4', usage });
		host.view.define('h5', render, { tag: 'h5', usage });
		}

17

src/views/headers.usage.js

		@@ -14,7 +14,22 @@ export default (view, group) => ({
		'text:"Text "',
		'link:{text:"Link"}'
		'link:{ text: "Link" }'
		]
		}
		},
		{
		title: 'Using anchor',
		demo: [
		{
		view,
		anchor: 'foo',
		content: 'text:"Explicit value for an anchor"'
		},
		{
		view,
		anchor: true,
		content: 'text:"Auto generated anchor based on text content of header"'
		}
		]
		}
		]
		});

6

src/views/hstack.js

		/* eslint-env browser */
		import usage from './hstack.usage.js';

		export default function(discovery) {
		discovery.view.define('hstack', function(el, config, data, context) {
		export default function(host) {
		host.view.define('hstack', function(el, config, data, context) {
		const { content = [] } = config;

		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		}, { usage });
		}

4

src/views/html.js

		/* eslint-env browser */
		import usage from './html.usage.js';

		export default function(discovery) {
		export default function(host) {
		const buffer = document.createElement('div');

		discovery.view.define('html', function(el, config, data) {
		host.view.define('html', function(el, config, data) {
		buffer.innerHTML = data;
		@@ -9,0 +9,0 @@ el.append(...buffer.childNodes);

23

src/views/image-preview.js

		/* eslint-env browser */

		import * as base64 from '../core/utils/base64.js';

		export default function(discovery) {
		discovery.view.define('image-preview', function(el, config, data) {
		let { content, binary, mime } = data \|\| {};

		el.hidden = true;

		if (/^image\//i.test(mime)) {
		el.hidden = false;

		if (!binary) {
		content = base64.encode(content);
		}

		el.innerHTML = `<img src="data:${mime};base64,${content}">`;
		}
		export default function(host) {
		host.view.define('image-preview', function(el, config) {
		this.render(el, {
		view: 'image',
		...config
		});
		});
		}

1

src/views/index.js

		@@ -18,2 +18,3 @@ export { default as alerts } from './alerts.js';
		export { default as html } from './html.js';
		export { default as image } from './image.js';
		export { default as imagePreview } from './image-preview.js';
		@@ -20,0 +21,0 @@ export { default as indicator } from './indicator.js';

8

src/views/indicator.js

		/* eslint-env browser */
		import usage from './indicator.usage.js';

		export default function(discovery) {
		discovery.view.define('indicator', function(el, config, data, context) {
		export default function(host) {
		host.view.define('indicator', function(el, config, data, context) {
		const { value, label } = config;
		@@ -19,4 +19,4 @@ const { href } = data \|\| {};
		return Promise.all([
		discovery.view.render(valueEl, value \|\| 'text:value', data, context),
		discovery.view.render(labelEl, label \|\| 'text:label', data, context)
		host.view.render(valueEl, value \|\| 'text:value', data, context),
		host.view.render(labelEl, label \|\| 'text:label', data, context)
		]).then(() => el.append(valueEl, labelEl));
		@@ -23,0 +23,0 @@ }, {

6

src/views/input.js

		@@ -7,3 +7,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		const factories = {
		@@ -14,3 +14,3 @@ regexp: pattern => pattern ? safeFilterRx(pattern) : null,

		discovery.view.define('input', function(el, config, data, context) {
		host.view.define('input', function(el, config, data, context) {
		const {
		@@ -30,3 +30,3 @@ name,
		const inputEl = el.appendChild(document.createElement('input'));
		let lastInput = value ? discovery.query(value, data, context) : context[name];
		let lastInput = value ? host.query(value, data, context) : context[name];

		@@ -33,0 +33,0 @@ if (typeof lastInput !== 'string') {

6

src/views/link.js

		/* eslint-env browser */
		import usage from './link.usage.js';

		export default function(discovery) {
		discovery.view.define('link', function(el, config, data, context) {
		export default function(host) {
		host.view.define('link', function(el, config, data, context) {
		const { content, onClick } = config;
		@@ -36,3 +36,3 @@ let { href, text, external } = data \|\| {};
		if (content) {
		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		} else {
		@@ -39,0 +39,0 @@ el.textContent = text;

6

src/views/list-item.js

		/* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('list-item', function(el, config, data, context) {
		export default function(host) {
		host.view.define('list-item', function(el, config, data, context) {
		const { content = 'text' } = config;

		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		}, {
		@@ -9,0 +9,0 @@ tag: 'li'

16

src/views/lists.js

		/* eslint-env browser */
		import usage from './lists.usage.js';

		export default function(discovery) {
		export default function(host) {
		function render(el, config, data, context) {
		@@ -17,14 +17,14 @@ const { item, itemConfig, limit, emptyText } = config;
		if (Array.isArray(data)) {
		return discovery.view.renderList(el, this.composeConfig({
		return host.view.renderList(el, this.composeConfig({
		view: 'list-item',
		content: item
		}, itemConfig), data, context, 0, discovery.view.listLimit(limit, 25));
		}, itemConfig), data, context, 0, host.view.listLimit(limit, 25));
		}
		}

		discovery.view.define('list', render, { usage });
		discovery.view.define('inline-list', render, { usage });
		discovery.view.define('comma-list', render, { usage });
		discovery.view.define('ol', render, { tag: 'ol', usage });
		discovery.view.define('ul', render, { tag: 'ul', usage });
		host.view.define('list', render, { usage });
		host.view.define('inline-list', render, { usage });
		host.view.define('comma-list', render, { usage });
		host.view.define('ol', render, { tag: 'ol', usage });
		host.view.define('ul', render, { tag: 'ul', usage });
		}

29

src/views/markdown.js

		@@ -8,9 +8,17 @@ /* eslint-env browser */
		heading(text, level, raw, slugger) {
		let id = '';
		const { discovery: host, anchors } = this.options;
		let anchor = '';

		if (this.options.headerIds) {
		id = ' id="' + this.options.headerPrefix + slugger.slug(raw) + '"';
		if (anchors) {
		const slug = slugger.slug(raw);
		const href = host.encodePageHash(
		host.pageId,
		host.pageRef,
		{ ...host.pageParams, '!anchor': slug }
		);

		anchor = `<a class="view-header__anchor" id="!anchor:${slug}" href="${href}"></a>`;
		}

		return `<h${level} class="view-header view-h${level}"${id}>${text}</h${level}>\n`;
		return `<h${level} class="view-header view-h${level}">${anchor}${text}</h${level}>\n`;
		}
		@@ -66,7 +74,8 @@

		export default function(discovery) {
		export default function(host) {
		const opts = {
		discovery: host,
		highlight: function(content, syntax, callback) {
		const buffer = document.createDocumentFragment();
		discovery.view.render(buffer, 'source', { syntax, content })
		host.view.render(buffer, 'source', { syntax, content })
		.then(() => callback(null, buffer.firstChild.outerHTML));
		@@ -77,3 +86,3 @@ }
		function render(el, config, data) {
		const { source } = config;
		const { source, anchors = true } = config;

		@@ -85,3 +94,3 @@ el.classList.add('view-markdown');
		typeof data === 'string' ? data : source \|\| '',
		opts,
		{ ...opts, anchors },
		(er, html) => {
		@@ -95,4 +104,4 @@ el.innerHTML = html.replace(/\n(<\/code>)/g, '$1'); // FIXME: marked adds extra newline before </code> for unknown reason

		discovery.view.define('markdown', render, { usage });
		discovery.view.define('md', render, { usage });
		host.view.define('markdown', render, { usage });
		host.view.define('md', render, { usage });
		}

15

src/views/markdown.usage.js

		@@ -17,2 +17,17 @@ export default {
		{
		title: 'Disable anchors for headers',
		beforeDemo: 'Hover a header to see chain icon on left side when anchors are enabled',
		demo: [
		{
		view: 'markdown',
		anchors: false,
		source: '## header with disabled anchor'
		},
		{
		view: 'markdown',
		source: '## header with default settings'
		}
		]
		},
		{
		title: 'Showcase',
		@@ -19,0 +34,0 @@ demo: {

6

src/views/menu-item.js

		/* eslint-env browser */
		import usage from './menu-item.usage.js';

		export default function(discovery) {
		discovery.view.define('menu-item', function(el, config, data, context) {
		export default function(host) {
		host.view.define('menu-item', function(el, config, data, context) {
		const { content, onClick } = config;
		@@ -24,3 +24,3 @@ const { text, selected = false, disabled = false, href, external } = data \|\| {};
		if (content) {
		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		} else {
		@@ -27,0 +27,0 @@ el.textContent = typeof data === 'string' ? data : text \|\| 'Untitled item';

10

src/views/menu.js

		/* eslint-env browser */
		import usage from './menu.usage.js';

		export default function(discovery) {
		discovery.view.define('menu', function(el, config, data, context) {
		export default function(host) {
		host.view.define('menu', function(el, config, data, context) {
		const { name = 'filter', item, itemConfig, limit, emptyText, onClick, onInit, onChange } = config;
		@@ -23,3 +23,3 @@

		return discovery.view.renderList(
		return host.view.renderList(
		el,
		@@ -30,6 +30,6 @@ composedItemConfig,
		0,
		discovery.view.listLimit(limit, 25)
		host.view.listLimit(limit, 25)
		).then(() => {
		if (typeof onInit === 'function') {
		onInit(discovery.query('.[selected].pick()', data, context), name);
		onInit(host.query('.[selected].pick()', data, context), name);
		}
		@@ -36,0 +36,0 @@ });

8

src/views/nav-button.js

		/* eslint-env browser */
		import usage from './nav-button.usage.js';

		export default function(discovery) {
		discovery.view.define('nav-button', function(el, config, data, context) {
		export default function(host) {
		host.view.define('nav-button', function(el, config, data, context) {
		const { name, content, disabled = false, onClick } = config;
		@@ -13,3 +13,3 @@ const { text = '', href, external } = data \|\| {};

		if (discovery.query(disabled, data, context)) {
		if (host.query(disabled, data, context)) {
		el.classList.add('disabled');
		@@ -25,3 +25,3 @@ } else if (typeof onClick === 'function') {
		if (content) {
		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		} else {
		@@ -28,0 +28,0 @@ el.textContent = text;

8

src/views/page-header.js

		@@ -5,4 +5,4 @@ /* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('page-header', function render(el, config, data, context) {
		export default function(host) {
		host.view.define('page-header', function render(el, config, data, context) {
		const { prelude, content, onInit, onChange } = config;
		@@ -20,6 +20,6 @@ const preludeEl = el.appendChild(createElement('div', 'view-page-header__prelude'));
		return Promise.all([
		discovery.view.render(preludeEl, mixinHandlers(prelude \|\| []), data, context),
		discovery.view.render(contentEl, mixinHandlers(content \|\| 'text'), data, context)
		host.view.render(preludeEl, mixinHandlers(prelude \|\| []), data, context),
		host.view.render(contentEl, mixinHandlers(content \|\| 'text'), data, context)
		]);
		}, { usage });
		}

24

src/views/popup.js

		@@ -35,3 +35,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		const hoverTriggerInstances = [];
		@@ -47,3 +47,3 @@ const inspectorLockedInstances = new Set();
		globalListeners = [
		discovery.addHostElEventListener('mouseenter', ({ target }) => {
		host.addHostElEventListener('mouseenter', ({ target }) => {
		if (target === document) {
		@@ -79,3 +79,3 @@ return;

		discovery.addHostElEventListener('mouseleave', ({ target }) => {
		host.addHostElEventListener('mouseleave', ({ target }) => {
		for (const instance of hoverTriggerInstances) {
		@@ -89,3 +89,3 @@ if (instance.lastHoverTriggerEl && instance.lastHoverTriggerEl === target) {

		discovery.addGlobalEventListener('scroll', (event) => {
		host.addGlobalEventListener('scroll', (event) => {
		hideAllPopups = setTimeout(() => {
		@@ -96,3 +96,3 @@ hideIfEventOutside(event);

		discovery.addHostElEventListener('scroll', (event) => {
		host.addHostElEventListener('scroll', (event) => {
		clearTimeout(hideAllPopups);
		@@ -102,3 +102,3 @@ hideIfEventOutside(event);

		discovery.addGlobalEventListener('click', (event) => {
		host.addGlobalEventListener('click', (event) => {
		hideAllPopups = setTimeout(() => {
		@@ -109,3 +109,3 @@ hideIfEventOutside(event);

		discovery.addHostElEventListener('click', (event) => {
		host.addHostElEventListener('click', (event) => {
		clearTimeout(hideAllPopups);
		@@ -137,3 +137,3 @@ hideIfEventOutside(event);

		discovery.inspectMode.subscribe(
		host.inspectMode.subscribe(
		enabled => enabled
		@@ -144,3 +144,3 @@ ? openedPopups.forEach(popup => inspectorLockedInstances.add(popup))

		discovery.view.Popup = class Popup {
		host.view.Popup = class Popup {
		constructor(options) {
		@@ -198,7 +198,7 @@ this.options = {
		show(triggerEl, render = this.options.render) {
		const hostEl = discovery.dom.container;
		const hostEl = host.dom.container;

		this.hideTimer = clearTimeout(this.hideTimer);
		this.relatedPopups.forEach(related => related.hide());
		this.el.classList.toggle('inspect', discovery.inspectMode.value);
		this.el.classList.toggle('inspect', host.inspectMode.value);

		@@ -239,3 +239,3 @@ if (typeof render === 'function') {

		const hostEl = discovery.dom.container;
		const hostEl = host.dom.container;
		const offsetParent = getOffsetParent(hostEl.firstChild);
		@@ -242,0 +242,0 @@ const viewport = getViewportRect(window, offsetParent);

6

src/views/progress.js

		@@ -5,4 +5,4 @@ /* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('progress', function(el, config, data, context) {
		export default function(host) {
		host.view.define('progress', function(el, config, data, context) {
		const { content, progress, color } = config;
		@@ -17,5 +17,5 @@ const progressEl = el.appendChild(createElement('div', {

		return discovery.view.render(contentEl, content, data, context);
		return host.view.render(contentEl, content, data, context);
		}
		}, { usage });
		}

6

src/views/section.js

		/* eslint-env browser */
		import usage from './section.usage.js';

		export default function(discovery) {
		discovery.view.define('section', function(el, config, data, context) {
		export default function(host) {
		host.view.define('section', function(el, config, data, context) {
		const { header, content } = config;

		return discovery.view.render(el, [
		return host.view.render(el, [
		{ view: 'header', content: header },
		@@ -10,0 +10,0 @@ content

18

src/views/select.js

		/* eslint-env browser */
		import usage from './select.usage.js';

		export default function(discovery) {
		export default function(host) {
		const defaultItemRender = 'text-match:{ text, match: #.filter }';
		const variantQuery = '{ value: $, text: #.selectVariantTextQuery.query($, #) }';
		const variantsPopup = new discovery.view.Popup({
		const variantsPopup = new host.view.Popup({
		className: 'view-select-popup'
		});

		discovery.view.define('select', function(el, config, data, context) {
		host.view.define('select', function(el, config, data, context) {
		function renderCaption() {
		el.innerHTML = '';
		if (currentValue !== undefined) {
		return discovery.view.render(el, discovery.view.composeConfig({
		return host.view.render(el, host.view.composeConfig({
		view: 'menu-item',
		@@ -38,3 +38,3 @@ data: variantQuery,
		} = config;
		let currentValue = value ? discovery.query(value, data, context) : context[name];
		let currentValue = value ? host.query(value, data, context) : context[name];
		let variantsPopupContext = {
		@@ -52,3 +52,3 @@ ...context,
		if (beforeItems) {
		popupContent.push(discovery.view.composeConfig(beforeItems, { onInit, onChange }));
		popupContent.push(host.view.composeConfig(beforeItems, { onInit, onChange }));
		}
		@@ -72,3 +72,3 @@
		limit,
		itemConfig: discovery.view.composeConfig({
		itemConfig: host.view.composeConfig({
		className: [
		@@ -100,3 +100,3 @@ data => data.resetItem ? 'reset-item' : '',
		if (afterItems) {
		popupContent.push(discovery.view.composeConfig(afterItems, { onInit, onChange }));
		popupContent.push(host.view.composeConfig(afterItems, { onInit, onChange }));
		}
		@@ -111,3 +111,3 @@
		variantsPopup.toggle(el, popupEl =>
		discovery.view.render(popupEl, popupContent, data, variantsPopupContext)
		host.view.render(popupEl, popupContent, data, variantsPopupContext)
		.then(() => (popupEl.querySelector('.view-select__filter input') \|\| { focus() {} }).focus())
		@@ -114,0 +114,0 @@ );

12

src/views/signature/index.js

		@@ -7,3 +7,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		const elementToData = new WeakMap();
		@@ -73,6 +73,6 @@ const clickHandler = ({ target }) => {
		// single event handler for all `signature` view instances
		discovery.addHostElEventListener('click', clickHandler, false);
		host.addHostElEventListener('click', clickHandler, false);

		// signature details popup
		new discovery.view.Popup({
		new host.view.Popup({
		className: 'signature-details',
		@@ -89,6 +89,6 @@ hoverPin: 'trigger-click',
		case 'property':
		return renderPropertyDetails(popupEl, data, discovery);
		return renderPropertyDetails(popupEl, data, host);

		case 'type':
		return renderTypeDetails(popupEl, data, discovery);
		return renderTypeDetails(popupEl, data, host);
		}
		@@ -98,3 +98,3 @@ }

		discovery.view.define('signature', function(el, config, data) {
		host.view.define('signature', function(el, config, data) {
		const { expanded, path } = config;
		@@ -101,0 +101,0 @@ const stat = collectStat(data, expanded);

22

src/views/signature/render-details.js

		@@ -59,3 +59,3 @@ import { escapeHtml } from '../../core/utils/html.js';

		export function renderPropertyDetails(el, data, discovery) {
		export function renderPropertyDetails(el, data, host) {
		const { count, map } = data.stat.object.dictMode \|\| data.stat.object.properties.get(data.name);
		@@ -71,3 +71,3 @@ const total = (data.stat.object.dictMode \|\| data.stat.object).count;

		discovery.view.render(el, [
		host.view.render(el, [
		{
		@@ -77,3 +77,3 @@ view: 'block',
		className: 'path',
		data: data => discovery.pathToQuery(data.path),
		data: data => host.pathToQuery(data.path),
		content: 'text:$'
		@@ -100,6 +100,6 @@ },
		count
		}, discovery);
		}, host);
		}

		function renderTypeStat(el, { map, count }, discovery) {
		function renderTypeStat(el, { map, count }, host) {
		const typeCounts = getStatCounts(map);
		@@ -119,3 +119,3 @@ const typeStat = [];

		discovery.view.render(el, {
		host.view.render(el, {
		view: 'block',
		@@ -151,7 +151,7 @@ when: 'typeStat.size() > 1',
		types.forEach(name =>
		renderTypeDetails(el, { name, stat: map }, discovery)
		renderTypeDetails(el, { name, stat: map }, host)
		);
		}

		export function renderTypeDetails(el, data, discovery) {
		export function renderTypeDetails(el, data, host) {
		const stat = data.stat[data.name];
		@@ -392,3 +392,3 @@ const total = getStatCount(data.stat);
		className: 'array-types',
		content: (el) => renderTypeStat(el, stat, discovery)
		content: (el) => renderTypeStat(el, stat, host)
		});
		@@ -398,3 +398,3 @@ }

		discovery.view.render(el, [
		host.view.render(el, [
		{
		@@ -404,3 +404,3 @@ view: 'block',
		className: 'path',
		data: data => discovery.pathToQuery(data.path),
		data: data => host.pathToQuery(data.path),
		content: 'text'
		@@ -407,0 +407,0 @@ },

61

src/views/source.js

		@@ -62,6 +62,12 @@ /* eslint-env browser */
		if (!modes.has(alias)) {
		mimeMode.set(Symbol(), {
		name: new Set([alias]),
		mime: []
		});
		const mode = CodeMirror.modes[alias];

		if (!mimeMode.has(mode)) {
		mimeMode.set(mode, {
		name: new Set(),
		mime: []
		});
		}

		mimeMode.get(mode).name.add(alias);
		}
		@@ -76,20 +82,32 @@ }

		function codeMirrorHighlight(modespec, discovery) {
		function codeMirrorHighlight(modespec, host) {
		const mode = CodeMirror.getMode(CodeMirror.defaults, {
		name: CodeMirror.modeToMime[modespec] \|\| modespec,
		isDiscoveryViewDefined: name => discovery.view.isDefined(name)
		isDiscoveryViewDefined: name => host.view.isDefined(name)
		});

		return (source, createRange) => {
		const stream = new CodeMirror.StringStream(source, null);
		const state = CodeMirror.startState(mode);
		const lines = source.split(/(\n\|\r\n?)/);
		let lineOffset = 0;

		while (!stream.eol()) {
		const style = mode.token(stream, state);
		for (let i = 0; i < lines.length; i++) {
		if (i % 2 === 0) {
		const stream = new CodeMirror.StringStream(lines[i], 4, {
		lookAhead: n => lines[i + n],
		baseToken: function() {}
		});

		if (style) {
		createRange(stream.start, stream.pos, style);
		while (!stream.eol()) {
		const style = mode.token(stream, state);

		if (style) {
		createRange(lineOffset + stream.start, lineOffset + stream.pos, style);
		}

		stream.start = stream.pos;
		}
		}

		stream.start = stream.pos;
		lineOffset += lines[i].length;
		}
		@@ -132,4 +150,4 @@ };

		export default function(discovery) {
		discovery.view.define('source', function(el, config, data) {
		export default function(host) {
		host.view.define('source', function(el, config, data) {
		const decorators = [];
		@@ -141,2 +159,3 @@ const {
		syntax,
		lineNum = true,
		content,
		@@ -166,3 +185,3 @@ refs,
		if (content.length < maxSourceSizeToHighlight) {
		decorators.push([codeMirrorHighlight(syntax \|\| mime, discovery), {
		decorators.push([codeMirrorHighlight(syntax \|\| mime, host), {
		html: {
		@@ -197,8 +216,12 @@ open({ data: type }) {
		} else {
		el.innerHTML =
		'<div class="lines">' +
		const lineOffset = typeof lineNum === 'function' ? lineNum : idx => idx + 1;
		const lines = lineNum
		? '<div class="lines">' +
		content.split(/\r\n?\|\n/g)
		.map((_, idx) => '<span>' + (idx + 1) + '</span>')
		.map((_, idx) => '<span>' + lineOffset(idx) + '</span>')
		.join('') +
		'</div>' +
		'</div>'
		: '';
		el.innerHTML =
		lines +
		'<div>' +
		@@ -205,0 +228,0 @@ hitext(decorators, 'html')(content) +

22

src/views/source.usage.js

		@@ -22,4 +22,26 @@ export default {
		source: false
		},
		{
		title: 'Custom line numbers',
		demo: {
		view: 'source',
		data: {
		content: 'const a = 1; // line number 5',
		syntax: 'js',
		lineNum: idx => idx + 5
		}
		}
		},
		{
		title: 'Without line numbers',
		demo: {
		view: 'source',
		data: {
		content: 'const a = 1;',
		syntax: 'js',
		lineNum: false
		}
		}
		}
		]
		};

28

src/views/struct/index.js

		@@ -8,3 +8,3 @@ /* eslint-env browser */
		import renderAnnotations from './render-annotations.js';
		import usage from './struct.usage.js';
		import usage from './index.usage.js';
		import {
		@@ -84,3 +84,3 @@ stringValueProto,

		export default function(discovery) {
		export default function(host) {
		function collapseValue(el) {
		@@ -200,3 +200,3 @@ const options = elementOptions.get(el);

		discovery.view.maybeMoreButtons(
		host.view.maybeMoreButtons(
		container,
		@@ -227,3 +227,3 @@ beforeEl,
		const { query, debug } = annotation;
		const data = discovery.query(query, value, context);
		const data = host.query(query, value, context);

		@@ -265,3 +265,3 @@ if (debug) {

		const valueActionsPopup = new discovery.view.Popup({
		const valueActionsPopup = new host.view.Popup({
		className: 'view-struct-actions-popup',
		@@ -289,3 +289,3 @@ render: (popupEl, triggerEl) => {
		} else {
		const path = discovery.pathToQuery(buildPathForElement(el));
		const path = host.pathToQuery(buildPathForElement(el));
		const maxAllowedSize = 1024 * 1024 * 1024;
		@@ -334,3 +334,3 @@ const { minLength: compactSize, circular } = jsonStringifyInfo(data);

		discovery.view.render(popupEl, {
		host.view.render(popupEl, {
		view: 'menu',
		@@ -359,3 +359,3 @@ onClick(item) {
		});
		const signaturePopup = new discovery.view.Popup({
		const signaturePopup = new host.view.Popup({
		hoverPin: 'popup-hover',
		@@ -367,3 +367,3 @@ hoverTriggers: '.view-struct .show-signature',

		discovery.view.render(popupEl, {
		host.view.render(popupEl, {
		view: 'signature',
		@@ -446,11 +446,11 @@ expanded: 2,
		// single event handler for all `struct` view instances
		discovery.addHostElEventListener('click', clickHandler, false);
		host.addHostElEventListener('click', clickHandler, false);

		discovery.view.define('struct', function(el, config, data) {
		host.view.define('struct', function(el, config, data) {
		const { expanded, limit, limitCollapsed, annotations } = config; // FIXME: add limit option
		const expandable = isValueExpandable(data);
		const options = {
		limitCollapsed: discovery.view.listLimit(limitCollapsed, defaultCollapsedItemsLimit),
		limit: discovery.view.listLimit(limit, defaultExpandedItemsLimit),
		annotations: discovery.annotations.concat(annotations \|\| []),
		limitCollapsed: host.view.listLimit(limitCollapsed, defaultCollapsedItemsLimit),
		limit: host.view.listLimit(limit, defaultExpandedItemsLimit),
		annotations: host.annotations.concat(annotations \|\| []),
		maxStringLength,
		@@ -457,0 +457,0 @@ maxLinearStringLength

8

src/views/switch.js

		/* eslint-env browser */
		import usage from './switch.usage.js';

		export default function(discovery) {
		discovery.view.define('switch', function(el, config, data, context) {
		export default function(host) {
		host.view.define('switch', function(el, config, data, context) {
		let { content } = config;
		@@ -13,3 +13,3 @@ let renderConfig = 'alert-warning:"No case choosen"';

		if (branch && discovery.queryBool(branch.when \|\| true, data, context)) {
		if (branch && host.queryBool(branch.when \|\| true, data, context)) {
		renderConfig = 'data' in branch
		@@ -27,3 +27,3 @@ ? {

		return discovery.view.render(el, renderConfig, data, context);
		return host.view.render(el, renderConfig, data, context);
		}, {
		@@ -30,0 +30,0 @@ tag: false,

8

src/views/tab.js

		/* eslint-env browser */
		import usage from './tab.usage.js';

		export default function(discovery) {
		discovery.view.define('tab', function(el, config, data, context) {
		export default function(host) {
		host.view.define('tab', function(el, config, data, context) {
		const {
		@@ -15,3 +15,3 @@ content,

		if (discovery.query(disabled, data, context)) {
		if (host.query(disabled, data, context)) {
		el.classList.add('disabled');
		@@ -28,3 +28,3 @@ } else if (typeof onClick === 'function') {
		if (content) {
		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		} else {
		@@ -31,0 +31,0 @@ el.textContent = text;

8

src/views/table-cell.js

		@@ -36,4 +36,4 @@ /* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('table-cell', function(el, config, data, context) {
		export default function(host) {
		host.view.define('table-cell', function(el, config, data, context) {
		let { content, details } = config;
		@@ -92,3 +92,3 @@
		el.classList.add('details-expanded');
		discovery.view.render(detailsEl, details \|\| defaultDetailsRender, data, context);
		host.view.render(detailsEl, details \|\| defaultDetailsRender, data, context);
		}
		@@ -99,3 +99,3 @@ });
		if (content) {
		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		} else {
		@@ -102,0 +102,0 @@ defaultCellRender(el, data);

6

src/views/table-row.js

		/* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('table-row', function(el, config, data, context) {
		export default function(host) {
		host.view.define('table-row', function(el, config, data, context) {
		const { cols } = config;
		@@ -9,3 +9,3 @@
		return Promise.all(cols.map((col, index) =>
		discovery.view.render(el, col, data, { ...context, colIndex: index })
		host.view.render(el, col, data, { ...context, colIndex: index })
		));
		@@ -12,0 +12,0 @@ }

20

src/views/table.js

		@@ -16,3 +16,3 @@ /* eslint-env browser */

		function sortingFromConfig(col, discovery, context) {
		function sortingFromConfig(col, host, context) {
		let prefix = '';
		@@ -53,3 +53,3 @@ let query = '';
		return query
		? discovery.query(`${prefix} ${query} ascN`, { dataQuery: col.data }, context)
		? host.query(`${prefix} ${query} ascN`, { dataQuery: col.data }, context)
		: false;
		@@ -102,4 +102,4 @@ }

		export default function(discovery) {
		discovery.view.define('table', function(el, config, data, context) {
		export default function(host) {
		host.view.define('table', function(el, config, data, context) {
		let { cols, rowConfig, limit } = config;
		@@ -131,6 +131,6 @@ let colsMap = cols && typeof cols === 'object' ? cols : {};

		return discovery.view.renderList(bodyEl, this.composeConfig({
		return host.view.renderList(bodyEl, this.composeConfig({
		view: 'table-row',
		cols
		}, rowConfig), orderedData, context, 0, discovery.view.listLimit(limit, 25), moreEl);
		}, rowConfig), orderedData, context, 0, host.view.listLimit(limit, 25), moreEl);
		};
		@@ -184,3 +184,3 @@
		cols = cols.filter(col =>
		!hasOwnProperty.call(col, 'when') \|\| discovery.queryBool(col.when, data, context)
		!hasOwnProperty.call(col, 'when') \|\| host.queryBool(col.when, data, context)
		);
		@@ -194,3 +194,3 @@
		col.content = (data, context) =>
		discovery.queryBool(whenData, data, context) ? { content } : undefined;
		host.queryBool(whenData, data, context) ? { content } : undefined;
		}
		@@ -207,4 +207,4 @@
		const sorting = hasOwnProperty.call(col, 'sorting')
		? discovery.query(col.sorting, null, context)
		: sortingFromConfig(col, discovery, context);
		? host.query(col.sorting, null, context)
		: sortingFromConfig(col, host, context);
		const defaultOrder = typeof sorting === 'function'
		@@ -211,0 +211,0 @@ ? getOrder(data, sorting) // getOrder() returns 0 when all values are equal, it's the same as absence of sorting

18

src/views/tabs.js

		/* eslint-env browser */
		import usage from './tabs.usage.js';

		export default function(discovery) {
		discovery.view.define('tabs', function(el, config, data, context) {
		export default function(host) {
		host.view.define('tabs', function(el, config, data, context) {
		async function renderContent(value) {
		@@ -25,3 +25,3 @@ const handler = inited ? onChange : onInit;
		beforeTabsEl.innerHTML = '';
		await discovery.view.render(beforeTabsEl, beforeTabs, data, renderContext);
		await host.view.render(beforeTabsEl, beforeTabs, data, renderContext);
		tabsEl.appendChild(beforeTabsEl);
		@@ -31,3 +31,3 @@ }
		await Promise.all(tabs.map(tab =>
		discovery.view.render(tabsEl, discovery.view.composeConfig(tab, {
		host.view.render(tabsEl, host.view.composeConfig(tab, {
		active: tab.value === currentValue
		@@ -39,3 +39,3 @@ }), data, context)
		afterTabsEl.innerHTML = '';
		await discovery.view.render(afterTabsEl, afterTabs, data, renderContext);
		await host.view.render(afterTabsEl, afterTabs, data, renderContext);
		tabsEl.appendChild(afterTabsEl);
		@@ -47,3 +47,3 @@ }
		contentEl.innerHTML = '';
		await discovery.view.render(contentEl, content, data, renderContext);
		await host.view.render(contentEl, content, data, renderContext);
		}
		@@ -71,4 +71,4 @@

		tabs = discovery.query(tabs, data, context);
		tabConfig = discovery.view.composeConfig({
		tabs = host.query(tabs, data, context);
		tabConfig = host.view.composeConfig({
		view: 'tab',
		@@ -111,3 +111,3 @@ onClick: renderContent

		return discovery.view.composeConfig(
		return host.view.composeConfig(
		tabConfig,
		@@ -114,0 +114,0 @@ tab

4

src/views/text-match.js

		@@ -8,4 +8,4 @@ /* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('text-match', function(el, config, data) {
		export default function(host) {
		host.view.define('text-match', function(el, config, data) {
		const { text, match: pattern, ignoreCase = false } = data \|\| {};
		@@ -12,0 +12,0 @@

4

src/views/text.js

		/* eslint-env browser */
		import usage from './text.usage.js';

		export default function(discovery) {
		discovery.view.define('text', function(el, config, data) {
		export default function(host) {
		host.view.define('text', function(el, config, data) {
		el.appendChild(document.createTextNode(String(data)));
		@@ -7,0 +7,0 @@ }, {

6

src/views/toc-section.js

		/* eslint-env browser */

		export default function(discovery) {
		discovery.view.define('toc-section', function(el, config, data, context) {
		export default function(host) {
		host.view.define('toc-section', function(el, config, data, context) {
		const { header, content } = config;

		return discovery.view.render(el, [
		return host.view.render(el, [
		{
		@@ -9,0 +9,0 @@ view: 'block',

14

src/views/toggle-group.js

		/* eslint-env browser */
		import usage from './toggle-group.usage.js';

		export default function(discovery) {
		discovery.view.define('toggle-group', function(el, config, data, context) {
		export default function(host) {
		host.view.define('toggle-group', function(el, config, data, context) {
		async function render(_, value) {
		@@ -21,3 +21,3 @@ const handler = inited ? onChange : onInit;
		beforeTogglesEl.innerHTML = '';
		await discovery.view.render(beforeTogglesEl, beforeToggles, data, { ...context, [name]: value });
		await host.view.render(beforeTogglesEl, beforeToggles, data, { ...context, [name]: value });
		el.appendChild(beforeTogglesEl);
		@@ -28,3 +28,3 @@ }
		afterTogglesEl.innerHTML = '';
		await discovery.view.render(afterTogglesEl, afterToggles, data, { ...context, [name]: value });
		await host.view.render(afterTogglesEl, afterToggles, data, { ...context, [name]: value });
		el.appendChild(afterTogglesEl);
		@@ -34,3 +34,3 @@ }
		await Promise.all(toggles.map((toggle, idx) =>
		discovery.view.render(el, discovery.view.composeConfig(toggle, {
		host.view.render(el, host.view.composeConfig(toggle, {
		checked: toggle.value === currentValue
		@@ -59,3 +59,3 @@ }), data[idx], context)
		: undefined;
		toggleConfig = discovery.view.composeConfig({
		toggleConfig = host.view.composeConfig({
		view: 'toggle',
		@@ -91,3 +91,3 @@ onToggle: render

		return discovery.view.composeConfig(
		return host.view.composeConfig(
		toggleConfig,
		@@ -94,0 +94,0 @@ toggle

6

src/views/toggle.js

		/* eslint-env browser */
		import usage from './toggle-group.usage.js';

		export default function(discovery) {
		discovery.view.define('toggle', function(el, config, data, context) {
		export default function(host) {
		host.view.define('toggle', function(el, config, data, context) {
		const {
		@@ -32,3 +32,3 @@ content,
		if (content) {
		return discovery.view.render(el, content, data, context);
		return host.view.render(el, content, data, context);
		} else {
		@@ -35,0 +35,0 @@ el.textContent = text;

8

src/views/tree-leaf.js

		@@ -5,3 +5,3 @@ /* eslint-env browser */

		export default function(discovery) {
		export default function(host) {
		const elementToData = new WeakMap();
		@@ -26,5 +26,5 @@ const clickHandler = ({ target }) => {
		// single event handler for all `tree-leaf` view instances
		discovery.addHostElEventListener('click', clickHandler, false);
		host.addHostElEventListener('click', clickHandler, false);

		discovery.view.define('tree-leaf', async function(el, config, data, context) {
		host.view.define('tree-leaf', async function(el, config, data, context) {
		const { expanded, content = 'text', itemConfig, collapsible = true, last, hasChildren, children, limit, onToggle } = config;
		@@ -47,3 +47,3 @@ const toggleEl = el.appendChild(createElement('span', 'view-tree-leaf-toggle'));
		if (children) {
		childrenData = discovery.query(children, data, context);
		childrenData = host.query(children, data, context);
		hasChildrenEl = Array.isArray(childrenData) && childrenData.length > 0;
		@@ -50,0 +50,0 @@ }

22

src/views/tree.js

		/* eslint-env browser */
		import usage from './tree.usage.js';

		export default function(discovery) {
		export default function(host) {
		function renderTreeLines(container, renderStack, data, context, offset, limit) {
		@@ -20,4 +20,4 @@ if (limit === false) {

		return discovery.view
		.render(targetContainer, discovery.view.composeConfig(itemConfig, {
		return host.view
		.render(targetContainer, host.view.composeConfig(itemConfig, {
		expanded: entry.expanded,
		@@ -35,3 +35,3 @@ last: entry.last,
		container,
		itemConfig: discovery.view.composeConfig(itemConfig, itemConfig.itemConfig),
		itemConfig: host.view.composeConfig(itemConfig, itemConfig.itemConfig),
		prev: renderStack
		@@ -49,3 +49,3 @@ };
		)
		.then(() => discovery.view.maybeMoreButtons(
		.then(() => host.view.maybeMoreButtons(
		container,
		@@ -63,3 +63,3 @@ null,
		array.forEach((data, index, array) => {
		const children = discovery.query(itemConfig.children, data, context);
		const children = host.query(itemConfig.children, data, context);
		const hasChildren = Array.isArray(children) && children.length > 0;
		@@ -88,3 +88,3 @@ const last = index === array.length - 1;
		typeof expanded === 'number' ? expanded - 1 : expanded,
		discovery.view.composeConfig(itemConfig, itemConfig.itemConfig),
		host.view.composeConfig(itemConfig, itemConfig.itemConfig),
		last ? popCount + 1 : 0
		@@ -104,3 +104,3 @@ );

		discovery.view.define('tree', function render(el, config, data, context) {
		host.view.define('tree', function render(el, config, data, context) {
		const { children = 'children', item = 'text', itemConfig, collapsible, emptyText, onToggle } = config;
		@@ -118,5 +118,5 @@ let { expanded, limit, limitLines = true } = config;
		if (Array.isArray(data)) {
		limit = discovery.view.listLimit(limit, 25);
		limitLines = discovery.view.listLimit(limitLines, 25);
		expanded = typeof expanded === 'function' ? expanded : discovery.view.listLimit(expanded, 1);
		limit = host.view.listLimit(limit, 25);
		limitLines = host.view.listLimit(limitLines, 25);
		expanded = typeof expanded === 'function' ? expanded : host.view.listLimit(expanded, 1);

		@@ -123,0 +123,0 @@ if (limitLines) {

10

src/widget/index.js

		@@ -624,2 +624,12 @@ /* eslint-env browser */
		renderState.then(() => this.dom.wrapper.style.opacity = 1);
		renderState.then(() => {
		if (this.pageParams['!anchor']) {
		const el = pageEl.querySelector('#' + CSS.escape('!anchor:' + this.pageParams['!anchor']));
		if (el) {
		const pageHeaderEl = pageEl.querySelector('.view-page-header'); // TODO: remove, should be abstract
		el.style.scrollMargin = pageHeaderEl ? pageHeaderEl.offsetHeight + 'px' : '';
		el.scrollIntoView(true);
		}
		}
		});

		@@ -626,0 +636,0 @@ return renderState;

src/views/struct/struct.usage.js

dist/discovery.css