884 lines
24 KiB
JavaScript
884 lines
24 KiB
JavaScript
|
(function (global, factory) {
|
||
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
|
||
|
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
|
||
|
(global = global || self, factory(global.Remount = {}, global.React, global.ReactDOM));
|
||
|
}(this, function (exports, React, ReactDOM) { 'use strict';
|
||
|
|
||
|
function _typeof(obj) {
|
||
|
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
||
|
_typeof = function (obj) {
|
||
|
return typeof obj;
|
||
|
};
|
||
|
} else {
|
||
|
_typeof = function (obj) {
|
||
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||
|
};
|
||
|
}
|
||
|
|
||
|
return _typeof(obj);
|
||
|
}
|
||
|
|
||
|
function _classCallCheck(instance, Constructor) {
|
||
|
if (!(instance instanceof Constructor)) {
|
||
|
throw new TypeError("Cannot call a class as a function");
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function _defineProperties(target, props) {
|
||
|
for (var i = 0; i < props.length; i++) {
|
||
|
var descriptor = props[i];
|
||
|
descriptor.enumerable = descriptor.enumerable || false;
|
||
|
descriptor.configurable = true;
|
||
|
if ("value" in descriptor) descriptor.writable = true;
|
||
|
Object.defineProperty(target, descriptor.key, descriptor);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function _createClass(Constructor, protoProps, staticProps) {
|
||
|
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
||
|
if (staticProps) _defineProperties(Constructor, staticProps);
|
||
|
return Constructor;
|
||
|
}
|
||
|
|
||
|
function _inherits(subClass, superClass) {
|
||
|
if (typeof superClass !== "function" && superClass !== null) {
|
||
|
throw new TypeError("Super expression must either be null or a function");
|
||
|
}
|
||
|
|
||
|
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
||
|
constructor: {
|
||
|
value: subClass,
|
||
|
writable: true,
|
||
|
configurable: true
|
||
|
}
|
||
|
});
|
||
|
if (superClass) _setPrototypeOf(subClass, superClass);
|
||
|
}
|
||
|
|
||
|
function _getPrototypeOf(o) {
|
||
|
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
||
|
return o.__proto__ || Object.getPrototypeOf(o);
|
||
|
};
|
||
|
return _getPrototypeOf(o);
|
||
|
}
|
||
|
|
||
|
function _setPrototypeOf(o, p) {
|
||
|
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
||
|
o.__proto__ = p;
|
||
|
return o;
|
||
|
};
|
||
|
|
||
|
return _setPrototypeOf(o, p);
|
||
|
}
|
||
|
|
||
|
function isNativeReflectConstruct() {
|
||
|
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
||
|
if (Reflect.construct.sham) return false;
|
||
|
if (typeof Proxy === "function") return true;
|
||
|
|
||
|
try {
|
||
|
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
||
|
return true;
|
||
|
} catch (e) {
|
||
|
return false;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function _construct(Parent, args, Class) {
|
||
|
if (isNativeReflectConstruct()) {
|
||
|
_construct = Reflect.construct;
|
||
|
} else {
|
||
|
_construct = function _construct(Parent, args, Class) {
|
||
|
var a = [null];
|
||
|
a.push.apply(a, args);
|
||
|
var Constructor = Function.bind.apply(Parent, a);
|
||
|
var instance = new Constructor();
|
||
|
if (Class) _setPrototypeOf(instance, Class.prototype);
|
||
|
return instance;
|
||
|
};
|
||
|
}
|
||
|
|
||
|
return _construct.apply(null, arguments);
|
||
|
}
|
||
|
|
||
|
function _isNativeFunction(fn) {
|
||
|
return Function.toString.call(fn).indexOf("[native code]") !== -1;
|
||
|
}
|
||
|
|
||
|
function _wrapNativeSuper(Class) {
|
||
|
var _cache = typeof Map === "function" ? new Map() : undefined;
|
||
|
|
||
|
_wrapNativeSuper = function _wrapNativeSuper(Class) {
|
||
|
if (Class === null || !_isNativeFunction(Class)) return Class;
|
||
|
|
||
|
if (typeof Class !== "function") {
|
||
|
throw new TypeError("Super expression must either be null or a function");
|
||
|
}
|
||
|
|
||
|
if (typeof _cache !== "undefined") {
|
||
|
if (_cache.has(Class)) return _cache.get(Class);
|
||
|
|
||
|
_cache.set(Class, Wrapper);
|
||
|
}
|
||
|
|
||
|
function Wrapper() {
|
||
|
return _construct(Class, arguments, _getPrototypeOf(this).constructor);
|
||
|
}
|
||
|
|
||
|
Wrapper.prototype = Object.create(Class.prototype, {
|
||
|
constructor: {
|
||
|
value: Wrapper,
|
||
|
enumerable: false,
|
||
|
writable: true,
|
||
|
configurable: true
|
||
|
}
|
||
|
});
|
||
|
return _setPrototypeOf(Wrapper, Class);
|
||
|
};
|
||
|
|
||
|
return _wrapNativeSuper(Class);
|
||
|
}
|
||
|
|
||
|
function _assertThisInitialized(self) {
|
||
|
if (self === void 0) {
|
||
|
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
||
|
}
|
||
|
|
||
|
return self;
|
||
|
}
|
||
|
|
||
|
function _possibleConstructorReturn(self, call) {
|
||
|
if (call && (typeof call === "object" || typeof call === "function")) {
|
||
|
return call;
|
||
|
}
|
||
|
|
||
|
return _assertThisInitialized(self);
|
||
|
}
|
||
|
|
||
|
function _toConsumableArray(arr) {
|
||
|
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
|
||
|
}
|
||
|
|
||
|
function _arrayWithoutHoles(arr) {
|
||
|
if (Array.isArray(arr)) {
|
||
|
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
||
|
|
||
|
return arr2;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function _iterableToArray(iter) {
|
||
|
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
||
|
}
|
||
|
|
||
|
function _nonIterableSpread() {
|
||
|
throw new TypeError("Invalid attempt to spread non-iterable instance");
|
||
|
}
|
||
|
|
||
|
/* global HTMLElement */
|
||
|
|
||
|
/*
|
||
|
* Adapted from https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.4/custom-elements-es5-adapter.js
|
||
|
* Rolling this in so we don't need another polyfill.
|
||
|
*/
|
||
|
function inject() {
|
||
|
if (window.HTMLElement && window.HTMLElement._babelES5Adapter || void 0 === window.Reflect || void 0 === window.customElements || window.customElements.hasOwnProperty('polyfillWrapFlushCallback')) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var a = HTMLElement;
|
||
|
|
||
|
window.HTMLElement = function () {
|
||
|
return Reflect.construct(a, [], this.constructor);
|
||
|
};
|
||
|
|
||
|
HTMLElement.prototype = a.prototype;
|
||
|
HTMLElement.prototype.constructor = HTMLElement;
|
||
|
Object.setPrototypeOf(HTMLElement, a);
|
||
|
HTMLElement._babelES5Adapter = true;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* The name of this strategy.
|
||
|
* @type string
|
||
|
*/
|
||
|
|
||
|
var name = 'CustomElements';
|
||
|
/**
|
||
|
* Registers a custom element.
|
||
|
*
|
||
|
* This creates a custom element (ie, a subclass of `window.HTMLElement`) and
|
||
|
* registers it (ie, `window.customElements.define`).
|
||
|
*
|
||
|
* Events will be triggered when something interesting happens.
|
||
|
*
|
||
|
* @example
|
||
|
* defineElement(
|
||
|
* { component: Tooltip },
|
||
|
* 'x-tooltip',
|
||
|
* { onUpdate, onUnmount }
|
||
|
* )
|
||
|
*
|
||
|
* @private
|
||
|
* @param {ElementSpec} elSpec
|
||
|
* @param {string} elName
|
||
|
* @param {ElementEvents} events
|
||
|
*/
|
||
|
|
||
|
function defineElement(elSpec, elName, events) {
|
||
|
var onUpdate = events.onUpdate,
|
||
|
onUnmount = events.onUnmount,
|
||
|
onMount = events.onMount;
|
||
|
inject();
|
||
|
var attributes = elSpec.attributes || [];
|
||
|
|
||
|
var ComponentElement =
|
||
|
/*#__PURE__*/
|
||
|
function (_HTMLElement) {
|
||
|
_inherits(ComponentElement, _HTMLElement);
|
||
|
|
||
|
function ComponentElement() {
|
||
|
_classCallCheck(this, ComponentElement);
|
||
|
|
||
|
return _possibleConstructorReturn(this, _getPrototypeOf(ComponentElement).apply(this, arguments));
|
||
|
}
|
||
|
|
||
|
_createClass(ComponentElement, [{
|
||
|
key: "connectedCallback",
|
||
|
value: function connectedCallback() {
|
||
|
this._mountPoint = createMountPoint(this, elSpec);
|
||
|
onMount(this, this._mountPoint);
|
||
|
}
|
||
|
}, {
|
||
|
key: "disconnectedCallback",
|
||
|
value: function disconnectedCallback() {
|
||
|
if (!this._mountPoint) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
onUnmount(this, this._mountPoint);
|
||
|
}
|
||
|
}, {
|
||
|
key: "attributeChangedCallback",
|
||
|
value: function attributeChangedCallback() {
|
||
|
if (!this._mountPoint) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
onUpdate(this, this._mountPoint);
|
||
|
}
|
||
|
}], [{
|
||
|
key: "observedAttributes",
|
||
|
get: function get() {
|
||
|
return ['props-json'].concat(_toConsumableArray(attributes));
|
||
|
}
|
||
|
}]);
|
||
|
|
||
|
return ComponentElement;
|
||
|
}(_wrapNativeSuper(HTMLElement)); // Supress warning when quiet mode is on
|
||
|
|
||
|
|
||
|
if (elSpec.quiet && window.customElements.get(elName)) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
window.customElements.define(elName, ComponentElement);
|
||
|
}
|
||
|
function isSupported() {
|
||
|
return !!(window.customElements && window.customElements.define);
|
||
|
}
|
||
|
/**
|
||
|
* Creates a `<span>` element that serves as the mounting point for React
|
||
|
* components. If `shadow: true` is requested, it'll attach a shadow node.
|
||
|
*
|
||
|
* @private
|
||
|
* @param {HTMLElement} element
|
||
|
* @param {ElementSpec} elSpec
|
||
|
*/
|
||
|
|
||
|
function createMountPoint(element, elSpec) {
|
||
|
var shadow = elSpec.shadow;
|
||
|
|
||
|
if (shadow && element.attachShadow) {
|
||
|
var mountPoint = document.createElement('span');
|
||
|
element.attachShadow({
|
||
|
mode: 'open'
|
||
|
}).appendChild(mountPoint);
|
||
|
return mountPoint;
|
||
|
} else {
|
||
|
return element;
|
||
|
}
|
||
|
}
|
||
|
/**
|
||
|
* Check if Shadow DOM is supported.
|
||
|
*/
|
||
|
|
||
|
|
||
|
function supportsShadow() {
|
||
|
return !!(document && document.body && document.body.attachShadow);
|
||
|
}
|
||
|
|
||
|
var CustomElementsStrategy = /*#__PURE__*/Object.freeze({
|
||
|
name: name,
|
||
|
defineElement: defineElement,
|
||
|
isSupported: isSupported,
|
||
|
supportsShadow: supportsShadow
|
||
|
});
|
||
|
|
||
|
// @ts-check
|
||
|
|
||
|
/**
|
||
|
* Some implementations of MutationObserver don't have .forEach,
|
||
|
* so we need our own `forEach` shim. This is usually the case with
|
||
|
* polyfilled environments.
|
||
|
*
|
||
|
* @type { import('./types').Each }
|
||
|
*/
|
||
|
function each(
|
||
|
/** @type any */
|
||
|
list,
|
||
|
/** @type any */
|
||
|
fn) {
|
||
|
for (var i = 0, len = list.length; i < len; i++) {
|
||
|
fn(list[i]);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// @ts-check
|
||
|
/**
|
||
|
* The name of this strategy.
|
||
|
* @type string
|
||
|
*/
|
||
|
|
||
|
var name$1 = 'MutationObserver';
|
||
|
/**
|
||
|
* List of observers tags.
|
||
|
* @type ObserverList
|
||
|
*/
|
||
|
|
||
|
var observers = {};
|
||
|
function isSupported$1() {
|
||
|
return 'MutationObserver' in window;
|
||
|
}
|
||
|
/**
|
||
|
* Defines a custom element.
|
||
|
*
|
||
|
* @example
|
||
|
* defineElement(
|
||
|
* { component: MyComponent },
|
||
|
* 'my-div',
|
||
|
* {
|
||
|
* onMount: () => {},
|
||
|
* onUpdate: () => {},
|
||
|
* onUnmount: () => {},
|
||
|
* }
|
||
|
* )
|
||
|
*
|
||
|
* @private
|
||
|
* @param {ElementSpec} elSpec
|
||
|
* @param {string} elName
|
||
|
* @param {ElementEvents} events
|
||
|
*/
|
||
|
|
||
|
function defineElement$1(elSpec, elName, events) {
|
||
|
elName = elName.toLowerCase(); // Maintain parity with what would happen in Custom Elements mode
|
||
|
|
||
|
if (!isValidName(elName)) {
|
||
|
if (elSpec.quiet) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
throw new Error("Remount: \"".concat(elName, "\" is not a valid custom element elName"));
|
||
|
}
|
||
|
|
||
|
if (observers[elName]) {
|
||
|
if (elSpec.quiet) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
throw new Error("Remount: \"".concat(elName, "\" is already registered"));
|
||
|
}
|
||
|
|
||
|
var observer = new MutationObserver(
|
||
|
/** @type MutationCallback */
|
||
|
function (mutations) {
|
||
|
each(mutations, function (
|
||
|
/** @type MutationRecord */
|
||
|
mutation) {
|
||
|
each(mutation.addedNodes, function (
|
||
|
/** @type Node */
|
||
|
node) {
|
||
|
if (isElement(node)) {
|
||
|
checkForMount(node, elName, events);
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
observer.observe(document.body, {
|
||
|
childList: true,
|
||
|
subtree: true
|
||
|
});
|
||
|
observers[name$1] =
|
||
|
/* true */
|
||
|
observer;
|
||
|
window.addEventListener('DOMContentLoaded', function () {
|
||
|
var nodes = document.getElementsByTagName(name$1);
|
||
|
each(nodes, function (
|
||
|
/** @type HTMLElement */
|
||
|
node) {
|
||
|
return checkForMount(node, name$1, events);
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
/**
|
||
|
* Checks if this new element should fire an `onUpdate` hook.
|
||
|
* Recurses down to its descendant nodes.
|
||
|
*
|
||
|
* @param {HTMLElement} node
|
||
|
* @param {string} elName
|
||
|
* @param {ElementEvents} events
|
||
|
*/
|
||
|
|
||
|
function checkForMount(node, elName, events) {
|
||
|
if (node.nodeName.toLowerCase() === elName) {
|
||
|
// It's a match!
|
||
|
events.onMount(node, node);
|
||
|
observeForUpdates(node, events);
|
||
|
observeForRemoval(node, events);
|
||
|
} else if (node.children && node.children.length) {
|
||
|
// Recurse down into the other additions
|
||
|
each(node.children, function (
|
||
|
/** @type HTMLElement */
|
||
|
subnode) {
|
||
|
if (isElement(subnode)) {
|
||
|
checkForMount(subnode, elName, events);
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
/**
|
||
|
* Observes for any changes in attributes.
|
||
|
*
|
||
|
* @param {Element} node
|
||
|
* @param {ElementEvents} events
|
||
|
*/
|
||
|
|
||
|
|
||
|
function observeForUpdates(node, events) {
|
||
|
var onUpdate = events.onUpdate;
|
||
|
var observer = new MutationObserver(
|
||
|
/** @type MutationCallback */
|
||
|
function (mutations) {
|
||
|
each(mutations, function (
|
||
|
/** @type MutationRecord */
|
||
|
mutation) {
|
||
|
var targetNode = mutation.target;
|
||
|
|
||
|
if (isElement(targetNode)) {
|
||
|
onUpdate(targetNode, targetNode);
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
observer.observe(node, {
|
||
|
attributes: true
|
||
|
});
|
||
|
}
|
||
|
/**
|
||
|
* Observes a node's parent to wait until the node is removed
|
||
|
* @param {HTMLElement} node
|
||
|
* @param {ElementEvents} events
|
||
|
*/
|
||
|
|
||
|
|
||
|
function observeForRemoval(node, events) {
|
||
|
var onUnmount = events.onUnmount;
|
||
|
var parent = node.parentNode; // Not sure when this can happen, but let's add this for type safety
|
||
|
|
||
|
if (!parent) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var observer = new MutationObserver(
|
||
|
/** @type MutationCallback */
|
||
|
function (mutations) {
|
||
|
each(mutations, function (
|
||
|
/** @type MutationRecord */
|
||
|
mutation) {
|
||
|
each(mutation.removedNodes, function (
|
||
|
/** @type Node */
|
||
|
subnode) {
|
||
|
if (node !== subnode) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (isElement(node)) {
|
||
|
// @ts-ignore TypeScript expects 0 arguments...?
|
||
|
observer.disconnect(parent);
|
||
|
onUnmount(node, node);
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
observer.observe(parent, {
|
||
|
childList: true,
|
||
|
subtree: true
|
||
|
});
|
||
|
}
|
||
|
/**
|
||
|
* Validate a custom tag.
|
||
|
*
|
||
|
* Since Remount can work with either Custom Elements or MutationObserver API's,
|
||
|
* it'd be wise if we rejected element names that won't work in Custom Elements
|
||
|
* mode (even if we're using MutationObserver mode).
|
||
|
*
|
||
|
* @param {string} elName
|
||
|
* @returns {boolean}
|
||
|
*
|
||
|
* @example
|
||
|
* isValidName('div') // => false
|
||
|
* isValidName('my-div') // => true
|
||
|
* isValidName('123-456') // => false
|
||
|
* isValidName('my-123') // => true
|
||
|
*
|
||
|
* @private
|
||
|
*/
|
||
|
|
||
|
|
||
|
function isValidName(elName) {
|
||
|
return !!(elName.indexOf('-') !== -1 && elName.match(/^[a-z][a-z0-9-]*$/));
|
||
|
}
|
||
|
/**
|
||
|
* Shadow DOM is not supported with the Mutation Observer strategy.
|
||
|
*/
|
||
|
|
||
|
|
||
|
function supportsShadow$1() {
|
||
|
return false;
|
||
|
}
|
||
|
/**
|
||
|
* Checks if a given Node is an HTMLElement.
|
||
|
*
|
||
|
* It's possible that a mutation's `addedNodes` return something that isn't an
|
||
|
* HTMLElement.
|
||
|
*
|
||
|
* @param {any} node
|
||
|
* @returns {node is HTMLElement}
|
||
|
*/
|
||
|
|
||
|
function isElement(node) {
|
||
|
if (node) {
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
var MutationObserverStrategy = /*#__PURE__*/Object.freeze({
|
||
|
name: name$1,
|
||
|
observers: observers,
|
||
|
isSupported: isSupported$1,
|
||
|
defineElement: defineElement$1,
|
||
|
supportsShadow: supportsShadow$1
|
||
|
});
|
||
|
|
||
|
var reactEvents = ["onAbort", "onAnimationCancel", "onAnimationEnd", "onAnimationIteration", "onAuxClick", "onBlur",
|
||
|
"onChange", "onClick", "onClose", "onContextMenu", "onDoubleClick", "onError", "onFocus", "onGotPointerCapture",
|
||
|
"onInput", "onKeyDown", "onKeyPress", "onKeyUp", "onLoad", "onLoadEnd", "onLoadStart", "onLostPointerCapture",
|
||
|
"onMouseDown", "onMouseMove", "onMouseOut", "onMouseOver", "onMouseUp", "onPointerCancel", "onPointerDown",
|
||
|
"onPointerEnter", "onPointerLeave", "onPointerMove", "onPointerOut", "onPointerOver", "onPointerUp", "onReset",
|
||
|
"onResize", "onScroll", "onSelect", "onSelectionChange", "onSelectStart", "onSubmit", "onTouchCancel",
|
||
|
"onTouchMove", "onTouchStart", "onTransitionCancel", "onTransitionEnd", "onDrag", "onDragEnd", "onDragEnter",
|
||
|
"onDragExit", "onDragLeave", "onDragOver", "onDragStart", "onDrop", "onFocusOut"];
|
||
|
|
||
|
var divergentNativeEvents = {
|
||
|
onDoubleClick: 'dblclick'
|
||
|
};
|
||
|
|
||
|
var mimickedReactEvents = {
|
||
|
onInput: 'onChange',
|
||
|
onFocusOut: 'onBlur',
|
||
|
onSelectionChange: 'onSelect'
|
||
|
};
|
||
|
|
||
|
var reactShadowDomRetargetEvents = function retargetEvents(shadowRoot) {
|
||
|
|
||
|
reactEvents.forEach(function (reactEventName) {
|
||
|
|
||
|
var nativeEventName = getNativeEventName(reactEventName);
|
||
|
|
||
|
shadowRoot.addEventListener(nativeEventName, function (event) {
|
||
|
|
||
|
var path = event.path || (event.composedPath && event.composedPath()) || composedPath(event.target);
|
||
|
|
||
|
for (var i = 0; i < path.length; i++) {
|
||
|
|
||
|
var el = path[i];
|
||
|
var reactComponent = findReactComponent(el);
|
||
|
var props = findReactProps(reactComponent);
|
||
|
|
||
|
if (reactComponent && props) {
|
||
|
dispatchEvent(event, reactEventName, props);
|
||
|
}
|
||
|
|
||
|
if (reactComponent && props && mimickedReactEvents[reactEventName]) {
|
||
|
dispatchEvent(event, mimickedReactEvents[reactEventName], props);
|
||
|
}
|
||
|
|
||
|
if (event.cancelBubble) {
|
||
|
break;
|
||
|
}
|
||
|
|
||
|
if (el === shadowRoot) {
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}, false);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
function findReactComponent(item) {
|
||
|
for (var key in item) {
|
||
|
if (item.hasOwnProperty(key) && key.indexOf('_reactInternal') !== -1) {
|
||
|
return item[key];
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function findReactProps(component) {
|
||
|
if (!component) return undefined;
|
||
|
if (component.memoizedProps) return component.memoizedProps; // React 16 Fiber
|
||
|
if (component._currentElement && component._currentElement.props) return component._currentElement.props; // React <=15
|
||
|
|
||
|
}
|
||
|
|
||
|
function dispatchEvent(event, eventType, componentProps) {
|
||
|
if (componentProps[eventType]) {
|
||
|
componentProps[eventType](event);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function getNativeEventName(reactEventName) {
|
||
|
if (divergentNativeEvents[reactEventName]) {
|
||
|
return divergentNativeEvents[reactEventName];
|
||
|
}
|
||
|
return reactEventName.replace(/^on/, '').toLowerCase();
|
||
|
}
|
||
|
|
||
|
function composedPath(el) {
|
||
|
var path = [];
|
||
|
while (el) {
|
||
|
path.push(el);
|
||
|
if (el.tagName === 'HTML') {
|
||
|
path.push(document);
|
||
|
path.push(window);
|
||
|
return path;
|
||
|
}
|
||
|
el = el.parentElement;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// @ts-check
|
||
|
/**
|
||
|
* @param {ElementSpec} elSpec
|
||
|
* @param {HTMLElement} mountPoint
|
||
|
* @param {object} props
|
||
|
* @param {HTMLElement | null} element
|
||
|
*/
|
||
|
|
||
|
function mount(elSpec, mountPoint, props, element) {
|
||
|
return update(elSpec, mountPoint, props, element);
|
||
|
}
|
||
|
/**
|
||
|
* Updates a custom element by calling `ReactDOM.render()`.
|
||
|
* @private
|
||
|
*
|
||
|
* @param {ElementSpec} elSpec
|
||
|
* @param {HTMLElement} mountPoint
|
||
|
* @param {object} props
|
||
|
* @param {HTMLElement | null} element
|
||
|
*/
|
||
|
|
||
|
function update(elSpec, mountPoint, props, element) {
|
||
|
var component = elSpec.component;
|
||
|
var reactElement = React.createElement(component, props);
|
||
|
ReactDOM.render(reactElement, mountPoint);
|
||
|
|
||
|
if (element) {
|
||
|
reactShadowDomRetargetEvents(element.shadowRoot);
|
||
|
}
|
||
|
}
|
||
|
/**
|
||
|
* Unmounts a component.
|
||
|
* @private
|
||
|
*
|
||
|
* @param {ElementSpec} elSpec
|
||
|
* @param {HTMLElement} mountPoint
|
||
|
*/
|
||
|
|
||
|
function unmount(elSpec, mountPoint) {
|
||
|
ReactDOM.unmountComponentAtNode(mountPoint);
|
||
|
}
|
||
|
|
||
|
var ReactAdapter = /*#__PURE__*/Object.freeze({
|
||
|
mount: mount,
|
||
|
update: update,
|
||
|
unmount: unmount
|
||
|
});
|
||
|
|
||
|
/**
|
||
|
* Cache of the strategy determined by `getStrategy()`.
|
||
|
* @type {Strategy | null | undefined}
|
||
|
*/
|
||
|
|
||
|
var cachedStrategy;
|
||
|
/**
|
||
|
* Detect what API can be used.
|
||
|
*
|
||
|
* @example
|
||
|
* Remount.getStrategy().name
|
||
|
*/
|
||
|
|
||
|
function getStrategy() {
|
||
|
if (cachedStrategy) {
|
||
|
return cachedStrategy;
|
||
|
}
|
||
|
|
||
|
var StrategyUsed = [CustomElementsStrategy, MutationObserverStrategy].find(function (strategy) {
|
||
|
return !!strategy.isSupported();
|
||
|
});
|
||
|
|
||
|
if (!StrategyUsed) {
|
||
|
/* tslint:disable no-console */
|
||
|
console.warn("Remount: This browser doesn't support the " + 'MutationObserver API or the Custom Elements API. Including ' + 'polyfills might fix this. Remount elements will not work. ' + 'https://github.com/rstacruz/remount');
|
||
|
}
|
||
|
|
||
|
cachedStrategy = StrategyUsed;
|
||
|
return StrategyUsed;
|
||
|
}
|
||
|
/**
|
||
|
* Registers custom elements and links them to React components.
|
||
|
* @param {ElementMap} components
|
||
|
* @param {Defaults=} defaults
|
||
|
*
|
||
|
* @example
|
||
|
* define({ 'x-tooltip': Tooltip })
|
||
|
*
|
||
|
* @example
|
||
|
* define(
|
||
|
* { 'x-tooltip': Tooltip },
|
||
|
* { attributes: ['title', 'body'] }
|
||
|
* )
|
||
|
*/
|
||
|
|
||
|
function define(components, defaults) {
|
||
|
var Strategy = getStrategy();
|
||
|
|
||
|
if (!Strategy) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
Object.keys(components).forEach(function (
|
||
|
/** @type string */
|
||
|
name$$1) {
|
||
|
// Construct the specs for the element.
|
||
|
// (eg, { component: Tooltip, attributes: ['title'] })
|
||
|
|
||
|
/** @type ElementSpec */
|
||
|
var elSpec = Object.assign({}, defaults, toElementSpec(components[name$$1]));
|
||
|
/** @type Adapter */
|
||
|
|
||
|
var adapter = elSpec.adapter || ReactAdapter; // Define a custom element.
|
||
|
|
||
|
Strategy.defineElement(elSpec, name$$1, {
|
||
|
onMount: function onMount(element, mountPoint) {
|
||
|
var props = getProps(element, elSpec.attributes);
|
||
|
|
||
|
if (elSpec.shadow && elSpec.retarget) {
|
||
|
adapter.mount(elSpec, mountPoint, props, element);
|
||
|
} else {
|
||
|
adapter.mount(elSpec, mountPoint, props, null);
|
||
|
}
|
||
|
},
|
||
|
onUpdate: function onUpdate(element, mountPoint) {
|
||
|
var props = getProps(element, elSpec.attributes);
|
||
|
adapter.update(elSpec, mountPoint, props, null);
|
||
|
},
|
||
|
onUnmount: function onUnmount(element, mountPoint) {
|
||
|
adapter.unmount(elSpec, mountPoint);
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
}
|
||
|
/**
|
||
|
* Coerces something into an `ElementSpec` type.
|
||
|
*
|
||
|
* @param {ElementSpec | Component} thing
|
||
|
* @returns {ElementSpec}
|
||
|
* @private
|
||
|
*
|
||
|
* @example
|
||
|
* toElementSpec(Tooltip)
|
||
|
* // => { component: Tooltip }
|
||
|
*
|
||
|
* toElementSpec({ component: Tooltip })
|
||
|
* // => { component: Tooltip }
|
||
|
*/
|
||
|
|
||
|
function toElementSpec(thing) {
|
||
|
if (isElementSpec(thing)) {
|
||
|
return thing;
|
||
|
}
|
||
|
|
||
|
return {
|
||
|
component: thing
|
||
|
};
|
||
|
}
|
||
|
/**
|
||
|
* Checks if a given `spec` is an ElementSpec.
|
||
|
*
|
||
|
* @param {any} spec
|
||
|
* @returns {spec is ElementSpec}
|
||
|
*/
|
||
|
|
||
|
|
||
|
function isElementSpec(spec) {
|
||
|
return _typeof(spec) === 'object' && spec.component;
|
||
|
}
|
||
|
/**
|
||
|
* Returns properties for a given HTML element.
|
||
|
*
|
||
|
* @private
|
||
|
* @param {HTMLElement} element
|
||
|
* @param {string[] | null | undefined} attributes
|
||
|
*
|
||
|
* @example
|
||
|
* getProps(div, ['name'])
|
||
|
* // => { name: 'Romeo' }
|
||
|
*/
|
||
|
|
||
|
|
||
|
function getProps(element, attributes) {
|
||
|
var rawJson = element.getAttribute('props-json');
|
||
|
|
||
|
if (rawJson) {
|
||
|
return JSON.parse(rawJson);
|
||
|
}
|
||
|
|
||
|
var names = attributes || [];
|
||
|
return names.reduce(function (
|
||
|
/** @type PropertyMap */
|
||
|
result,
|
||
|
/** @type string */
|
||
|
attribute) {
|
||
|
result[attribute] = element.getAttribute(attribute);
|
||
|
return result;
|
||
|
}, {});
|
||
|
}
|
||
|
|
||
|
exports.getStrategy = getStrategy;
|
||
|
exports.define = define;
|
||
|
|
||
|
Object.defineProperty(exports, '__esModule', { value: true });
|
||
|
|
||
|
}));
|