How to use metal-incremental-dom - 10 common examples

'use strict';

import 'metal-soy-bundle';
import { isFunction, isObject, isString, globals, object } from 'metal';
import { ComponentRegistry } from 'metal-component';
import HTML2IncDom from 'html2incdom';
import IncrementalDomRenderer from 'metal-incremental-dom';
import SoyAop from './SoyAop';

// The injected data that will be passed to soy templates.
let ijData = {};

class Soy extends IncrementalDomRenderer.constructor {
	/**
	 * Adds the template params to the component's state, if they don't exist yet.
	 * @param {!Component} component
	 * @return {Object}
	 */
	getExtraDataConfig(component) {
		let elementTemplate = component.constructor.TEMPLATE;
		if (!isFunction(elementTemplate)) {
			return;
		}

		elementTemplate = SoyAop.getOriginalFn(elementTemplate);
		this.soyParamTypes_ = elementTemplate.types || {};

		const keys = elementTemplate.params || [];
		const configs = {};

'use strict';

import 'metal-soy-bundle';
import { ComponentRegistry } from 'metal-component';
import { isFunction, isObject, isString, object } from 'metal';
import { validators, Config } from 'metal-state';
import IncrementalDomRenderer, { HTML2IncDom } from 'metal-incremental-dom';
import SoyAop from './SoyAop';

// The injected data that will be passed to soy templates.
let ijData = {};

class Soy extends IncrementalDomRenderer.constructor {
	/**
	 * Adds the template params to the component's state, if they don't exist yet.
	 * @param {!Component} component
	 * @return {Object}
	 */
	getExtraDataConfig(component) {
		let elementTemplate = component.constructor.TEMPLATE;
		if (!isFunction(elementTemplate)) {
			return;
		}

		elementTemplate = SoyAop.getOriginalFn(elementTemplate);
		this.soyParamTypes_ = elementTemplate.types || {};

		const keys = elementTemplate.params || [];
		const configs = {};

globals.window.iDOMHelpers.renderArbitrary = function(child) {
	const type = typeof child;
	if (type === 'number' || (type === 'string' || child && child instanceof String)) {
		IncrementalDOM.text(child);
	} else if (type === 'function' && child.__jsxDOMWrapper) {
		child();
	} else if (Array.isArray(child)) {
		child.forEach(globals.window.iDOMHelpers.renderArbitrary);
	} else if (String(child) === '[object Object]') {
		// Renders special incremental dom nodes in a special way :)
		if (IncrementalDomRenderer.isIncDomNode(child)) {
			IncrementalDomRenderer.renderChild(child);
		} else {
			globals.window.iDOMHelpers.forOwn(child, globals.window.iDOMHelpers.renderArbitrary);
		}
	} else if (!child) {
		JSXRenderer.skipChild();
	}
};

scope.iDOMHelpers.renderArbitrary = function(child) {
	const type = typeof child;
	if (type === 'number' || (type === 'string' || child && child instanceof String)) {
		IncrementalDOM.text(child);
	} else if (type === 'function' && child.__jsxDOMWrapper) {
		child();
	} else if (Array.isArray(child)) {
		child.forEach(scope.iDOMHelpers.renderArbitrary);
	} else if (String(child) === '[object Object]') {
		// Renders special incremental dom nodes in a special way :)
		if (IncrementalDomRenderer.isIncDomNode(child)) {
			IncrementalDomRenderer.renderChild(child);
		} else {
			scope.iDOMHelpers.forOwn(child, scope.iDOMHelpers.renderArbitrary);
		}
	} else if (!child) {
		JSXRenderer.skipChild();
	}
};

scope.iDOMHelpers.renderArbitrary = function(child) {
	const type = typeof child;
	if (type === 'number' || (type === 'string' || child && child instanceof String)) {
		IncrementalDOM.text(child);
	} else if (type === 'function' && child.__jsxDOMWrapper) {
		child();
	} else if (Array.isArray(child)) {
		child.forEach(scope.iDOMHelpers.renderArbitrary);
	} else if (String(child) === '[object Object]') {
		// Renders special incremental dom nodes in a special way :)
		if (IncrementalDomRenderer.isIncDomNode(child)) {
			IncrementalDomRenderer.renderChild(child);
		} else {
			scope.iDOMHelpers.forOwn(child, scope.iDOMHelpers.renderArbitrary);
		}
	} else if (!child) {
		JSXRenderer.skipChild();
	}
};

globals.window.iDOMHelpers.renderArbitrary = function(child) {
	const type = typeof child;
	if (type === 'number' || (type === 'string' || child && child instanceof String)) {
		IncrementalDOM.text(child);
	} else if (type === 'function' && child.__jsxDOMWrapper) {
		child();
	} else if (Array.isArray(child)) {
		child.forEach(globals.window.iDOMHelpers.renderArbitrary);
	} else if (String(child) === '[object Object]') {
		// Renders special incremental dom nodes in a special way :)
		if (IncrementalDomRenderer.isIncDomNode(child)) {
			IncrementalDomRenderer.renderChild(child);
		} else {
			globals.window.iDOMHelpers.forOwn(child, globals.window.iDOMHelpers.renderArbitrary);
		}
	} else if (!child) {
		JSXRenderer.skipChild();
	}
};

'use strict';

import { isDefAndNotNull } from 'metal';
import IncrementalDomRenderer from 'metal-incremental-dom';

const COUNT_PROP = '__metalJsxCount';
const INC_DOM_DATA = '__incrementalDOMData';
const KEY_PREFIX = '_metal_jsx_';

/**
 * Renderer that handles JSX.
 */
class JSXRenderer extends IncrementalDomRenderer.constructor {
	/**
	 * @inheritDoc
	 */
	buildShouldUpdateArgs(changes) {
		return [changes.state, changes.props];
	}

	/**
	 * Called when generating a key for the next dom element to be created via
	 * incremental dom. Adds keys to elements that don't have one yet, according
	 * to their position in the parent. This helps use cases that use
	 * conditionally rendered elements, which is very common in JSX.
	 * @param {!Component} component
	 * @param {string} key
	 * @return {?string}
	 */

static render(...args) {
		return IncrementalDomRenderer.render(...args);
	}
}

static render(...args) {
		return IncrementalDomRenderer.render(...args);
	}

toIncDom(value) {
		if (isObject(value) && isString(value.content) && (value.contentKind === 'HTML')) {
			value = value.content;
		}
		if (isString(value)) {
			value = HTML2IncDom.buildFn(value);
		}
		return value;
	}
}