Source: component.es.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */

const componentConfigs = {};
let componentPromiseWrappers = {};
const components = {};
let componentsCache = {};
const componentsFn = {};

const DEFAULT_CACHE_VALIDATION_PARAMS = ['p_p_id', 'p_p_lifecycle'];
const DEFAULT_CACHE_VALIDATION_PORTLET_PARAMS = [
	'ddmStructureKey',
	'fileEntryTypeId',
	'folderId',
	'navigation',
	'status',
];

const LIFERAY_COMPONENT = 'liferay.component';

const _createPromiseWrapper = function (value) {
	let promiseWrapper;

	if (value) {
		promiseWrapper = {
			promise: Promise.resolve(value),
			resolve() {},
		};
	}
	else {
		let promiseResolve;

		const promise = new Promise((resolve) => {
			promiseResolve = resolve;
		});

		promiseWrapper = {
			promise,
			resolve: promiseResolve,
		};
	}

	return promiseWrapper;
};

/**
 * Restores a previously cached component markup.
 *
 * @param {object} state The stored state associated with the registered task.
 * @param {object} params The additional params passed in the task registration.
 * @param {Fragment} node The temporary fragment holding the new markup.
 * @private
 */
const _restoreTask = function (state, params, node) {
	const cache = state.data;
	const componentIds = Object.keys(cache);

	componentIds.forEach((componentId) => {
		const container = node.querySelector(`#${componentId}`);

		if (container) {
			container.innerHTML = cache[componentId].html;
		}
	});
};

/**
 * Runs when an SPA navigation start is detected to
 *
 * <ul>
 * <li>
 * Cache the state and current markup of registered components that have
 * requested it through the <code>cacheState</code> configuration option. This
 * state can be used to initialize the component in the same state if it
 * persists throughout navigations.
 * </li>
 * <li>
 * Register a DOM task to restore the markup of components that are present in
 * the next screen to avoid a flickering effect due to state changes. This can
 * be done by querying the components screen cache using the
 * <code>Liferay.getComponentsCache</code> method.
 * </li>
 * </ul>
 *
 * @private
 */

const _onStartNavigate = function (event) {
	const currentUri = new URL(window.location.href);
	const uri = new URL(event.path, window.location.href);

	const cacheableUri = DEFAULT_CACHE_VALIDATION_PARAMS.every((param) => {
		return (
			uri.searchParams.get(param) === currentUri.searchParams.get(param)
		);
	});

	if (cacheableUri) {
		var componentIds = Object.keys(components);

		componentIds = componentIds.filter((componentId) => {
			const component = components[componentId];

			if (!component) {
				return false;
			}

			const componentConfig = componentConfigs[componentId];

			const cacheablePortletUri = DEFAULT_CACHE_VALIDATION_PORTLET_PARAMS.every(
				(param) => {
					let cacheable = false;

					if (componentConfig) {
						const namespacedParam = `_${componentConfig.portletId}_${param}`;

						cacheable =
							uri.searchParams.get(namespacedParam) ===
							currentUri.searchParams.get(namespacedParam);
					}

					return cacheable;
				}
			);

			const cacheableComponent =
				typeof component.isCacheable === 'function'
					? component.isCacheable(uri)
					: false;

			return (
				cacheableComponent &&
				cacheablePortletUri &&
				componentConfig &&
				componentConfig.cacheState &&
				component.element &&
				component.getState
			);
		});

		componentsCache = componentIds.reduce((cache, componentId) => {
			const component = components[componentId];
			const componentConfig = componentConfigs[componentId];
			const componentState = component.getState();

			const componentCache = componentConfig.cacheState.reduce(
				(cache, stateKey) => {
					cache[stateKey] = componentState[stateKey];

					return cache;
				},
				{}
			);

			cache[componentId] = {
				html: component.element.innerHTML,
				state: componentCache,
			};

			return cache;
		}, []);

		Liferay.DOMTaskRunner.addTask({
			action: _restoreTask,
			condition: (state) => state.owner === LIFERAY_COMPONENT,
		});

		Liferay.DOMTaskRunner.addTaskState({
			data: componentsCache,
			owner: LIFERAY_COMPONENT,
		});
	}
	else {
		componentsCache = {};
	}
};

/**
 * Registers a component and retrieves its instance from the global registry.
 *
 * @param  {string} id The ID of the component to retrieve or register.
 * @param  {object} value The component instance or a component constructor. If
 *         a constructor is provided, it will be invoked the first time the
 *         component is requested and its result will be stored and returned as
 *         the component.
 * @param  {object} componentConfig The Custom component configuration. This can
 *         be used to provide additional hints for the system handling of the
 *         component lifecycle.
 * @return {object} The passed value, or the stored component for the provided
 *         ID.
 */
const component = function (id, value, componentConfig) {
	let retVal;

	if (arguments.length === 1) {
		let component = components[id];

		if (component && typeof component === 'function') {
			componentsFn[id] = component;

			component = component();

			components[id] = component;
		}

		retVal = component;
	}
	else {
		if (components[id] && value !== null) {
			delete componentConfigs[id];
			delete componentPromiseWrappers[id];

			console.warn(
				'Component with id "' +
					id +
					'" is being registered twice. This can lead to unexpected behaviour in the "Liferay.component" and "Liferay.componentReady" APIs, as well as in the "*:registered" events.'
			);
		}

		retVal = components[id] = value;

		if (value === null) {
			delete componentConfigs[id];
			delete componentPromiseWrappers[id];
		}
		else {
			componentConfigs[id] = componentConfig;

			Liferay.fire(id + ':registered');

			const componentPromiseWrapper = componentPromiseWrappers[id];

			if (componentPromiseWrapper) {
				componentPromiseWrapper.resolve(value);
			}
			else {
				componentPromiseWrappers[id] = _createPromiseWrapper(value);
			}
		}
	}

	return retVal;
};

/**
 * Retrieves a list of component instances after they've been registered.
 *
 * @param {...string} componentId The IDs of the components to receive.
 * @return {Promise} A promise to be resolved with all the requested component
 *         instances after they've been successfully registered.
 */
const componentReady = function () {
	let component;
	let componentPromise;

	if (arguments.length === 1) {
		component = arguments[0];
	}
	else {
		component = [];

		for (var i = 0; i < arguments.length; i++) {
			component[i] = arguments[i];
		}
	}

	if (Array.isArray(component)) {
		componentPromise = Promise.all(
			component.map((id) => componentReady(id))
		);
	}
	else {
		let componentPromiseWrapper = componentPromiseWrappers[component];

		if (!componentPromiseWrapper) {
			componentPromiseWrappers[
				component
			] = componentPromiseWrapper = _createPromiseWrapper();
		}

		componentPromise = componentPromiseWrapper.promise;
	}

	return componentPromise;
};

/**
 * Destroys the component registered by the provided component ID. This invokes
 * the component's own destroy lifecycle methods (destroy or dispose) and
 * deletes the internal references to the component in the component registry.
 *
 * @param {string} componentId The ID of the component to destroy.
 */
const destroyComponent = function (componentId) {
	const component = components[componentId];

	if (component) {
		const destroyFn = component.destroy || component.dispose;

		if (destroyFn) {
			destroyFn.call(component);
		}

		delete componentConfigs[componentId];
		delete componentPromiseWrappers[componentId];
		delete componentsFn[componentId];
		delete components[componentId];
	}
};

/**
 * Destroys registered components matching the provided filter function. If no
 * filter function is provided, it destroys all registered components.
 *
 * @param {Function} filterFn A method that receives a component's destroy
 *        options and the component itself, and returns <code>true</code> if the
 *        component should be destroyed.
 */
const destroyComponents = function (filterFn) {
	var componentIds = Object.keys(components);

	if (filterFn) {
		componentIds = componentIds.filter((componentId) => {
			return filterFn(
				components[componentId],
				componentConfigs[componentId] || {}
			);
		});
	}

	componentIds.forEach(destroyComponent);
};

/**
 * Clears the component promises map to make sure pending promises don't get
 * accidentally resolved at a later stage if a component with the same ID
 * appears, causing stale code to run.
 */
const destroyUnfulfilledPromises = function () {
	componentPromiseWrappers = {};
};

/**
 * Retrieves a registered component's cached state.
 *
 * @param {string} componentId The ID used to register the component.
 * @return {object} The state the component had prior to the previous navigation.
 */
const getComponentCache = function (componentId) {
	const componentCache = componentsCache[componentId];

	return componentCache ? componentCache.state : {};
};

/**
 * Initializes the component cache mechanism.
 */
const initComponentCache = function () {
	Liferay.on('startNavigate', _onStartNavigate);
};

export {
	component,
	componentReady,
	destroyComponent,
	destroyComponents,
	destroyUnfulfilledPromises,
	getComponentCache,
	initComponentCache,
};
export default component;