@discoveryjs/discovery - npm Package Compare versions

src/views/source.usage.js

22

CHANGELOG.md

		@@ -0,7 +1,25 @@
		## 1.0.0-beta.48 (04-11-2020)

		- Fixed dark mode styles of action buttons in `struct` view for touch devices
		- Fixed context for nav to include route attributes (#70)
		- Added `nav.remove(name)` method to remove nav items (#72)
		- Removed try/catch in `Widget#queryBool()`, so now `when` and `whenData` throws instead of silently fail (#69)
		- Fixed missing horizontal scrolling for `tree` view
		- Fixed postfix style in `badge` view when used in `page-header`'s prelude
		- Fixed `source` view crashing on highlighting
		- Fixed path generation in `signature` view for objects in dictionary mode
		- Allowed to pass a space separated strings to `className`
		- Changed behaviour for a function as `className` value, it's return value can be a string or an array (any other is ignored)
		- Improved output view as a function in View inspector
		- Fixed view's tree in View inspector for components with no a container
		- Added display of non-rendered views with the reason in the view's tree in View inspector
		- Fixed jump out `context`'s content on re-render in view tree of View inspector
		- Bumped jora to `1.0.0-beta.4` and use `setup()` method (a bit more effective in creating functions from strings)

		## 1.0.0-beta.47 (02-11-2020)

		- Added view inspector
		- Added View inspector
		- Changed nav block to be fixed positioned
		- Changed nav block class name `.discovery-content-badges` -> `.discovery-nav`
		- Added `.overscrolled` class name that's adding to a page element when page's content scrolled over viewport top side
		- Added `.page_overscrolled` class name that's adding to a page element when page's content scrolled over viewport top side
		- Added `page-header` view
		@@ -8,0 +26,0 @@ - Added `passive` option support detection test and `passiveCaptureOptions` for `addEventListener()` in `utils.dom`

2

libs/es5toEs6.js

		@@ -6,3 +6,3 @@ module.exports = function es5toEs6(name, code, imports, cjs) {
		cjs
		? `var ${ref} = require('/gen/${lib}.js');`
		? `var ${ref} = require('/gen/${lib}.js').default;`
		: `import ${ref} from '/gen/${lib}.js';`
		@@ -9,0 +9,0 @@ ),

4

package.json

		{
		"name": "@discoveryjs/discovery",
		"version": "1.0.0-beta.47",
		"version": "1.0.0-beta.48",
		"description": "Hackable JSON discovery tool",
		@@ -40,3 +40,3 @@ "author": "Roman Dvornov <rdvornov@gmail.com> (https://github.com/lahmatiy)",
		"hitext-prismjs": "^1.1.0",
		"jora": "1.0.0-beta.3",
		"jora": "1.0.0-beta.4",
		"prismjs": "^1.21.0"
		@@ -43,0 +43,0 @@ },

75

src/core/view.js

		@@ -31,14 +31,15 @@ /* eslint-env browser */
		if (fragmentEls.has(node)) {
		const info = fragmentEls.get(node);
		const child = parent.children.find(child => child.view === info);
		for (const info of fragmentEls.get(node)) {
		const child = parent.children.find(child => child.view === info);

		if (child) {
		parent = child;
		} else {
		parent.children.push(parent = {
		node: null,
		parent,
		view: info,
		children: []
		});
		if (child) {
		parent = child;
		} else {
		parent.children.push(parent = {
		node: null,
		parent,
		view: info,
		children: []
		});
		}
		}
		@@ -103,3 +104,3 @@ }

		function condition(type, host, config, data, context) {
		function condition(type, host, config, data, context, placeholder) {
		if (!hasOwnProperty.call(config, type) \|\| config[type] === undefined) {
		@@ -109,3 +110,13 @@ return true;

		return host.queryBool(config[type] === true ? '' : config[type], data, context);
		if (host.queryBool(config[type] === true ? '' : config[type], data, context)) {
		return true;
		}

		viewEls.set(placeholder, {
		skipped: type,
		config,
		data,
		context
		});
		return false;
		}
		@@ -134,10 +145,11 @@

		if (typeof classNames === 'function') {
		classNames = classNames(data, context);
		}

		if (typeof classNames === 'string') {
		// fast path
		el.classList.add(classNames);
		} else {
		if (!Array.isArray(classNames)) {
		classNames = [classNames];
		}
		classNames = classNames.trim().split(/\s+/);
		}

		if (Array.isArray(classNames)) {
		el.classList.add(
		@@ -163,3 +175,7 @@ ...classNames
		for (let child of el.childNodes) {
		fragmentEls.set(child, info);
		if (fragmentEls.has(child)) {
		fragmentEls.get(child).unshift(info);
		} else {
		fragmentEls.set(child, [info]);
		}
		}
		@@ -246,5 +262,6 @@ }

		if ('when' in config === false \|\| condition('when', this.host, config, data, context)) {
		const placeholder = container.appendChild(document.createComment(''));

		if (condition('when', this.host, config, data, context, placeholder)) {
		// immediately append a view insert point (a placeholder)
		const placeholder = container.appendChild(document.createComment(''));
		const getData = 'data' in config
		@@ -257,3 +274,3 @@ ? Promise.resolve().then(() => this.host.query(config.data, data, context))
		.then(data =>
		condition('whenData', this.host, config, data, context)
		condition('whenData', this.host, config, data, context, placeholder)
		? renderDom(
		@@ -267,3 +284,3 @@ renderer,
		)
		: placeholder.remove()
		: null // placeholder.remove()
		)
		@@ -499,2 +516,12 @@ .catch(e => {

		adoptFragment(fragment, probe) {
		const info = fragmentEls.get(probe);

		if (info) {
		for (const node of fragment.childNodes) {
		fragmentEls.set(node, info);
		}
		}
		}

		setViewRoot(node, name, props) {
		@@ -501,0 +528,0 @@ rootViewEls.set(node, {

72

src/inspector/index.js

		@@ -51,2 +51,28 @@ /* eslint-env browser */
		for (const leaf of leafs) {
		// if (leaf.fragmentNodes && leaf.fragmentNodes.length) {
		// const r = new Range();
		// r.setStartBefore(leaf.fragmentNodes[0]);
		// r.setEndAfter(leaf.fragmentNodes[leaf.fragmentNodes.length - 1]);
		// const { top, left, right, bottom } = r.getBoundingClientRect();
		// const offset = getPageOffset(parentEl);
		// const box = {
		// top: top + offset.top,
		// left: left + offset.left,
		// width: right - left,
		// height: bottom - top
		// };

		// const overlay = {
		// el: parentEl.appendChild(document.createElement('div')),
		// box: null
		// };
		// overlay.el.className = leaf.viewRoot ? 'overlay view-root' : 'overlay';
		// viewByEl.set(overlay.el, leaf);

		// overlay.el.style.top = `${box.top}px`;
		// overlay.el.style.left = `${box.left}px`;
		// overlay.el.style.width = `${box.width}px`;
		// overlay.el.style.height = `${box.height}px`;
		// }

		if (!leaf.node \|\| (!leaf.view && !leaf.viewRoot)) {
		@@ -65,5 +91,6 @@ if (leaf.children.length) {
		overlay = {
		el: parentEl.appendChild(createElement('div', leaf.viewRoot ? 'overlay view-root' : 'overlay')),
		el: parentEl.appendChild(document.createElement('div')),
		box: null
		};
		overlay.el.className = leaf.viewRoot ? 'overlay view-root' : 'overlay';
		overlayByViewNode.set(leaf.node, overlay);
		@@ -84,3 +111,6 @@ viewByEl.set(overlay.el, leaf);
		if (leaf.children.length) {
		overlay.el.style.overflow = getComputedStyle(leaf.node).overflow !== 'visible' ? 'hidden' : 'visible';
		if (leaf.node.nodeType === 1) {
		overlay.el.style.overflow = getComputedStyle(leaf.node).overflow !== 'visible' ? 'hidden' : 'visible';
		}

		walk(leaf.children, overlay.el);
		@@ -247,4 +277,7 @@ }
		view: 'block',
		className: 'selected',
		content: 'text:(view.config.view or "#root")',
		className: [
		data => data.view && data.view.skipped ? 'skipped' : false,
		'selected'
		],
		content: 'text:(view.config.view or "#root" \| $ + "" = $ ? $ : "ƒn")',
		postRender(el) {
		@@ -258,3 +291,4 @@ requestAnimationFrame(() => el.scrollIntoView());
		view: 'link',
		data: '{ text: view.config.view or "#root", href: false, leaf: $ }',
		className: data => data.leaf.view && data.leaf.view.skipped ? 'skipped' : false,
		data: '{ text: view.config.view or "#root" \| $ + "" = $ ? $ : "ƒn", href: false, leaf: $ }',
		onClick(_, data) {
		@@ -281,5 +315,8 @@ selectTreeViewLeaf(data.leaf);
		toggleConfig: {
		className: data => data.value.viewRoot ? 'view-root' : '',
		className: [
		data => data.value.viewRoot ? 'view-root' : false,
		data => data.value.view && data.value.view.skipped ? 'skipped' : false
		],
		content: [
		'text:value \| viewRoot.name or view.config.view',
		'text:value \| viewRoot.name or view.config.view \| $ + "" = $ ? $ : "ƒn"', // FIXME: `$ + "" = $` is a hack to check value is a string
		{
		@@ -322,3 +359,16 @@ view: 'list',
		view: 'block',
		className: ['content-section', 'props'],
		className: 'content-section skip',
		when: 'skipped',
		content: 'block{ content: "badge:{ text: skipped }" }'
		},
		{
		view: 'block',
		className: 'content-section render',
		when: 'config \| view + "" != view',
		content: 'source:{ content: config.view + "", syntax: "js" }'
		},
		{
		view: 'block',
		when: 'props != undefined',
		className: 'content-section props',
		content: {
		@@ -332,3 +382,3 @@ view: 'struct',
		view: 'block',
		className: ['content-section', 'config'],
		className: 'content-section config',
		content: [
		@@ -363,3 +413,3 @@ {
		view: 'block',
		className: ['content-section', 'data'],
		className: 'content-section data',
		content: {
		@@ -382,3 +432,3 @@ view: 'struct',
		view: 'block',
		className: ['content-section', 'context'],
		className: 'content-section context',
		content: {
		@@ -385,0 +435,0 @@ view: 'struct',

7

src/views/badges.js

		@@ -19,2 +19,3 @@ /* eslint-env browser */
		let { color, textColor, darkColor, darkTextColor, text, href, prefix, postfix, hint } = data \|\| {};
		let render;

		@@ -52,8 +53,10 @@ if (typeof data === 'string' \|\| typeof data === 'number' \|\| typeof data === 'boolean') {
		if (content) {
		discovery.view.render(el, content, data, context);
		render = discovery.view.render(el, content, data, context);
		} else {
		el.appendChild(document.createTextNode(String(text)));
		el.textContent = text;
		}

		maybeFix(el, 'postfix', postfix);

		return render;
		}
		@@ -60,0 +63,0 @@

1

src/views/context.js

 @@ -20,2 +20,3 @@ /* eslint-env browser */
                     if (buffer === lastRender) {
                         discovery.view.adoptFragment(buffer, contentStartMarker);
                         contentStartMarker.after(buffer);
 @@ -22,0 +23,0 @@ }

2

src/views/dropdown.js

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

		renderCaption();
		return renderCaption();
		}, { usage });
		}

2

src/views/headers.js

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

		discovery.view.render(el, content \|\| 'text', data, context);
		return discovery.view.render(el, content \|\| 'text', data, context);
		}
		@@ -13,0 +13,0 @@

5

src/views/html.js

		@@ -9,6 +9,3 @@ /* eslint-env browser */
		buffer.innerHTML = data;

		while (buffer.firstChild) {
		el.appendChild(buffer.firstChild);
		}
		el.append(...buffer.childNodes);
		}, {
		@@ -15,0 +12,0 @@ tag: null,

7

src/views/page-header.usage.js

		export default (view) => ({
		demo: `${view}:"Page header \\"${view}\\""`,
		demo: `${view}:"That's a \\"${view}\\""`,
		examples: [
		@@ -8,3 +8,6 @@ {
		view,
		prelude: 'badge:{ text: "demo" }',
		prelude: [
		'badge:{ text: "demo" }',
		'badge:{ text: "demo", prefix: "prelude", postfix: "postfix" }'
		],
		content: 'h1:"Header"'
		@@ -11,0 +14,0 @@ }

2

src/views/section.js

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

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

4

src/views/select.js

		@@ -15,3 +15,3 @@ /* eslint-env browser */
		if (currentValue !== undefined) {
		discovery.view.render(el, discovery.view.composeConfig({
		return discovery.view.render(el, discovery.view.composeConfig({
		view: 'menu-item',
		@@ -117,4 +117,4 @@ data: variantQuery,

		renderCaption();
		return renderCaption();
		}, { usage });
		}

2

src/views/signature/render-stat.js

		@@ -108,3 +108,3 @@ import { createElement, createText } from '../../core/utils/dom.js';
		contentEl.appendChild(createText(': '));
		renderStat(contentEl, map, elementToData, path.concat(name), propertyOffset);
		renderStat(contentEl, map, elementToData, path.concat(dictMode ? '*' : name), propertyOffset);
		contentEl.appendChild(createText(';'));
		@@ -111,0 +111,0 @@ }

3

src/views/source.js

		@@ -6,2 +6,3 @@ /* eslint-env browser */
		import CodeMirror from '/gen/codemirror.js';
		import usage from './source.usage.js';

		@@ -147,3 +148,3 @@ const maxSourceSizeToHighlight = 100 * 1024;
		}
		});
		}, { usage });
		}

2

src/views/switch.js

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

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

4

src/views/table-row.js

		@@ -8,7 +8,7 @@ /* eslint-env browser */
		if (Array.isArray(cols)) {
		cols.forEach((col, index) =>
		return Promise.all(cols.map((col, index) =>
		discovery.view.render(el, col, data, { ...context, colIndex: index })
		);
		));
		}
		}, { tag: 'tr' });
		}

4

src/views/table.js

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

		discovery.view.renderList(bodyEl, this.composeConfig({
		return discovery.view.renderList(bodyEl, this.composeConfig({
		view: 'table-row',
		@@ -227,3 +227,3 @@ cols
		moreEl.colSpan = cols.length;
		render(data);
		return render(data);
		}, {
		@@ -230,0 +230,0 @@ tag: 'table',

14

src/views/tabs.js

		@@ -6,3 +6,3 @@ /* eslint-env browser */
		discovery.view.define('tabs', function(el, config, data, context) {
		function renderContent(value) {
		async function renderContent(value) {
		const handler = inited ? onChange : onInit;
		@@ -26,15 +26,15 @@
		beforeTabsEl.innerHTML = '';
		discovery.view.render(beforeTabsEl, beforeTabs, data, renderContext);
		await discovery.view.render(beforeTabsEl, beforeTabs, data, renderContext);
		tabsEl.appendChild(beforeTabsEl);
		}

		tabs.forEach(tab =>
		await Promise.all(tabs.map(tab =>
		discovery.view.render(tabsEl, discovery.view.composeConfig(tab, {
		active: tab.value === currentValue
		}), data, context)
		);
		));

		if (afterTabs) {
		afterTabsEl.innerHTML = '';
		discovery.view.render(afterTabsEl, afterTabs, data, renderContext);
		await discovery.view.render(afterTabsEl, afterTabs, data, renderContext);
		tabsEl.appendChild(afterTabsEl);
		@@ -46,3 +46,3 @@ }
		contentEl.innerHTML = '';
		discovery.view.render(contentEl, content, data, renderContext);
		await discovery.view.render(contentEl, content, data, renderContext);
		}
		@@ -118,4 +118,4 @@

		renderContent(initValue);
		return renderContent(initValue);
		}, { usage });
		}

2

src/views/toc-section.js

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

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

12

src/views/toggle-group.js

		@@ -6,3 +6,3 @@ /* eslint-env browser */
		discovery.view.define('toggle-group', function(el, config, data, context) {
		function render(_, value) {
		async function render(_, value) {
		const handler = inited ? onChange : onInit;
		@@ -22,3 +22,3 @@
		beforeTogglesEl.innerHTML = '';
		discovery.view.render(beforeTogglesEl, beforeToggles, data, { ...context, [name]: value });
		await discovery.view.render(beforeTogglesEl, beforeToggles, data, { ...context, [name]: value });
		el.appendChild(beforeTogglesEl);
		@@ -29,11 +29,11 @@ }
		afterTogglesEl.innerHTML = '';
		discovery.view.render(afterTogglesEl, afterToggles, data, { ...context, [name]: value });
		await discovery.view.render(afterTogglesEl, afterToggles, data, { ...context, [name]: value });
		el.appendChild(afterTogglesEl);
		}

		toggles.forEach((toggle, idx) =>
		await Promise.all(toggles.map((toggle, idx) =>
		discovery.view.render(el, discovery.view.composeConfig(toggle, {
		checked: toggle.value === currentValue
		}), data[idx], context)
		);
		));
		}
		@@ -97,4 +97,4 @@

		render(true, initValue);
		return render(true, initValue);
		}, { usage });
		}

8

src/views/tree-leaf.js

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

		discovery.view.define('tree-leaf', function(el, config, data, context) {
		discovery.view.define('tree-leaf', async function(el, config, data, context) {
		const { expanded, content = 'text', itemConfig, collapsible = true, last, hasChildren, children, limit, onToggle } = config;
		@@ -43,3 +43,3 @@ const toggleEl = el.appendChild(createElement('span', 'view-tree-leaf-toggle'));

		let renderState = this.render(contentEl, content, data, context);
		await this.render(contentEl, content, data, context);

		@@ -76,3 +76,3 @@ if (children) {
		if (childrenData) {
		renderState = renderState.then(() => renderChildren(childrenData, expanded));
		await renderChildren(childrenData, expanded);
		}
		@@ -90,4 +90,2 @@ } else {
		}

		return renderState;
		}, {
		@@ -94,0 +92,0 @@ tag: 'li'

37

src/widget/index.js

		@@ -67,3 +67,3 @@ /* eslint-env browser */
		const lookupObjectMarkerAll = (value) => objectMarkers.lookupAll(value);
		const queryExtensions = {
		const queryCustomMethods = {
		query: (...args) => instance.query(...args),
		@@ -94,3 +94,3 @@ pageLink: (pageRef, pageId, pageParams) =>
		annotations,
		queryExtensions
		queryFnFromString: jora.setup(queryCustomMethods)
		});
		@@ -157,3 +157,3 @@ },
		addQueryHelpers(helpers) {
		Object.assign(queryExtensions, helpers);
		Object.assign(queryCustomMethods, helpers);
		}
		@@ -193,10 +193,3 @@ }
		this.prepare = data => data;
		this.objectMarkers = [];
		this.linkResolvers = [];
		this.annotations = [];
		this.queryExtensions = {
		query: (...args) => this.query(...args),
		pageLink: (pageRef, pageId, pageParams) =>
		this.encodePageHash(pageId, pageRef, pageParams)
		};
		createDataExtensionApi(this).apply();

		@@ -262,3 +255,2 @@ this.defaultPageId = this.options.defaultPageId \|\| 'default';
		const dataExtension = createDataExtensionApi(this);
		this._extensitionApi = dataExtension.methods; // TODO: remove
		const checkIsNotPrevented = () => {
		@@ -283,3 +275,3 @@ const lastPromise = lastSetDataPromise.get(this);
		this.context = context;
		dataExtension.apply(this);
		dataExtension.apply();

		@@ -339,3 +331,3 @@ this.emit('data');
		case 'string':
		return jora(query, { methods: this.queryExtensions });
		return this.queryFnFromString(query);
		}
		@@ -358,7 +350,3 @@ }
		queryBool(...args) {
		try {
		return jora.buildin.bool(this.query(...args));
		} catch (e) {
		return false;
		}
		return jora.buildin.bool(this.query(...args));
		}
		@@ -434,3 +422,2 @@
		const options = {
		methods: this.queryExtensions,
		tolerant: true,
		@@ -441,3 +428,3 @@ stat: true
		lastQuerySuggestionsStat.set(this, stat = { query, data, context, suggestion() {} });
		Object.assign(stat, jora(query, options)(data, context));
		Object.assign(stat, this.queryFnFromString(query, options)(data, context));
		}
		@@ -469,5 +456,7 @@
		return path.map((part, idx) =>
		typeof part === 'number' \|\| !/^[a-zA-Z_][a-zA-Z_$0-9]*$/.test(part)
		? (idx === 0 ? `$[${JSON.stringify(part)}]` : `[${JSON.stringify(part)}]`)
		: (idx === 0 ? part : '.' + part)
		part === '*'
		? (idx === 0 ? 'values()' : '.values()')
		: typeof part === 'number' \|\| !/^[a-zA-Z_][a-zA-Z_$0-9]*$/.test(part)
		? (idx === 0 ? `$[${JSON.stringify(part)}]` : `[${JSON.stringify(part)}]`)
		: (idx === 0 ? part : '.' + part)
		).join('');
		@@ -474,0 +463,0 @@ }

20

src/widget/nav.js

		@@ -46,2 +46,11 @@ import { createFragment } from '../core/utils/dom.js';
		insert(config, 'after', name);
		},
		remove(name) {
		const position = items.findIndex(item => item.name === name);

		if (position !== -1) {
		return items.splice(position, 1)[0];
		}

		return null;
		}
		@@ -97,3 +106,3 @@ });
		render() {
		const { data, context, dom } = this.host;
		const { data, dom } = this.host;
		const el = dom && dom.nav;
		@@ -104,3 +113,6 @@
		if (el) {
		const renderContext = { ...context, widget: this.host };
		const context = {
		...this.host.getRenderContext(),
		widget: this.host
		};

		@@ -110,9 +122,9 @@ this.host.view.setViewRoot(el, 'nav', {
		data,
		context: renderContext
		context
		});

		el.innerHTML = '';
		this.host.view.render(el, this.config, data, renderContext);
		this.host.view.render(el, this.config, data, context);
		}
		}
		};

dist/discovery.css