New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-reparenting

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-reparenting - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/types/fiber/findFiber.d.ts
dist/types/fiber/getFiber.d.ts
dist/types/react/currentFiber.d.ts

640

dist/react-reparenting.cjs.development.js
/**
* React-reparenting v0.4.0
* React-reparenting v0.5.0
* https://paol-imi.github.io/react-reparenting
* Copyright (c) 2020-present, Paol-imi
* Released under the MIT license
* https://github.com/Paol-imi/react-reparenting/blob/master/LICENSE

@@ -14,15 +13,24 @@ * @license MIT

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
var _inherits = require('@babel/runtime/helpers/inherits');
var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
var _wrapNativeSuper = require('@babel/runtime/helpers/wrapNativeSuper');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var React = require('react');
var _createClass = require('@babel/runtime/helpers/createClass');
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var _wrapNativeSuper = _interopDefault(require('@babel/runtime/helpers/wrapNativeSuper'));
var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
var react = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
var _wrapNativeSuper__default = /*#__PURE__*/_interopDefaultLegacy(_wrapNativeSuper);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
/**

@@ -53,55 +61,6 @@ * The host environment.

function configure(configuration) {
Object.assign(Env, configuration);
return Object.assign(Env, configuration);
}
/**
* Update the indices of a fiber and its siblings.
* return the last sibling index.
*
* @param fiber - The fiber.
* @param index - The index of the fiber.
* @returns - The last sibling index.
*/
function updateFibersIndex(fiber, index) {
while (fiber) {
fiber.index = index;
fiber = fiber.sibling;
index += 1;
}
return index - 1;
}
/**
* Update the debug fields.
* I have not yet inquired about how the _debug fields are chosen.
* For now only the owner and source are set based on the siblings/parent fields.
* TODO:
* - _debugID: does it need to be changed?
* - _debugHookTypes: does it need to be changed?
* - _debugSource: is it ok like this?
* - _debugOwner: is it ok like this?
*
* @param child - The child fiber.
* @param parent - The parent fiber.
*/
function updateFiberDebugFields(child, parent) {
// The fiber from wich to copy the debug fields.
var fiberToCopy; // Try to find a fiber to copy.
if (parent.child === child) {
if (child.sibling === null) {
fiberToCopy = parent;
} else {
fiberToCopy = child.sibling;
}
} else {
fiberToCopy = parent.child || parent;
}
child._debugOwner = fiberToCopy._debugOwner;
child._debugSource = fiberToCopy._debugSource;
}
/**
* Return the child fiber at the given index or null if the parent has no children.

@@ -323,2 +282,20 @@ * If the index provided is greater than the number of children the last child is returned.

/**
* Update the indices of a fiber and its siblings.
* Return the last sibling index.
*
* @param fiber - The fiber.
* @param index - The index of the fiber.
* @returns - The last sibling index.
*/
function updateFibersIndex(fiber, index) {
while (fiber) {
fiber.index = index;
fiber = fiber.sibling;
index += 1;
}
return index - 1;
}
/**
* Return the first valid fiber or null.

@@ -331,3 +308,3 @@ *

*/
function searchFiber(fiber, next, stop) {
function getFiberFromPath(fiber, next, stop) {
while (fiber) {

@@ -345,3 +322,3 @@ if (stop(fiber)) {

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }

@@ -353,3 +330,3 @@ 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; } }

var Invariant = /*#__PURE__*/function (_Error) {
_inherits(Invariant, _Error);
_inherits__default['default'](Invariant, _Error);

@@ -361,3 +338,3 @@ var _super = _createSuper(Invariant);

_classCallCheck(this, Invariant);
_classCallCheck__default['default'](this, Invariant);

@@ -370,3 +347,3 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

_defineProperty(_assertThisInitialized(_this), "name", 'Invariant');
_defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "name", 'Invariant');

@@ -377,3 +354,3 @@ return _this;

return Invariant;
}( /*#__PURE__*/_wrapNativeSuper(Error));
}( /*#__PURE__*/_wrapNativeSuper__default['default'](Error));
/**

@@ -421,4 +398,4 @@ * Throw an error if the condition fails.

/**
* Add a child fiber in a parent fiber and return the index in which it is added.
* The position can be chosen by providing a key (string) or by providing an index (number).
* Add a child in a parent and return the index in which it is added.
* The position of the child can be chosen by providing a key (string) or an index (number).
* If a key (string) is provided the child will be added after the one with that key.

@@ -429,14 +406,14 @@ * The child is added at the bottom if none of the children have that key.

* than the number of children.
* The method will also try to add the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
* The method will also try to add the elements connected to the child (e.g. DOM elements),
* it is possible to disable this function using the skipUpdate parameter.
*
* @param parent - The parent fiber in which to add the child fiber.
* @param child - The child fiber to add.
* @param position - The position in which to add the child fiber.
* @param parent - The parent in which to add the child.
* @param child - The child to add.
* @param position - The position in which to add the child.
* @param skipUpdate - Whether to add or not the elements.
* @returns - The index in which the child fiber is added.
* @returns - The index in which the child is added.
*/
function addChild(parent, child, position, skipUpdate) {
invariant(typeof position !== 'number' || position >= -1, "The index provided to add the child must be" + "greater than or equal to -1, found: ".concat(position, ".")); // The index in which the child is added.
invariant(typeof position !== 'number' || position >= -1, "The index provided to add the child must be " + "greater than or equal to -1, found: ".concat(position, ".")); // The index in which the child is added.

@@ -460,3 +437,3 @@ var index; // Add the child.

if (findPreviousFiber(parent, position) === null) {
warning("No child with the key: '".concat(position, "' has been found,") + "the child is added at the bottom.");
warning("No child with the key: '".concat(position, "' has been found, ") + "the child is added at the bottom.");
}

@@ -467,9 +444,4 @@ }

updateFibersIndex(child, index);
updateFibersIndex(child, index); // If there are the alternates.
{
updateFiberDebugFields(child, parent);
} // If there are the alternates.
if (child.alternate === null || parent.alternate === null) {

@@ -494,6 +466,2 @@ if (child.alternate !== null) {

updateFibersIndex(child.alternate, index);
{
updateFiberDebugFields(child.alternate, parent);
}
} // If we don't have to send the elements we can return here.

@@ -507,3 +475,3 @@

var containerFiber = searchFiber(parent, function (fiber) {
var containerFiber = getFiberFromPath(parent, function (fiber) {
return fiber["return"];

@@ -514,3 +482,3 @@ }, function (fiber) {

var elementFiber = searchFiber(child, function (fiber) {
var elementFiber = getFiberFromPath(child, function (fiber) {
return fiber.child;

@@ -523,3 +491,3 @@ }, function (fiber) {

{
warning('Cannot find the container element, neither the parent nor any' + 'component before it seems to generate an element instance.' + 'You should manually send the element and use the `skipUpdate` option.');
warning('Cannot find the container element, neither the parent nor any ' + 'component before it seems to generate an element instance. ' + 'You should manually send the element and use the `skipUpdate` option.');
}

@@ -533,3 +501,3 @@

{
warning('Cannot find the child element.' + 'You should manually send the element and use the `skipUpdate` option.');
warning('Cannot find the child element. ' + 'You should manually send the element and use the `skipUpdate` option.');
}

@@ -549,3 +517,3 @@

// Get the fibers that belong to the previous element.
var beforeFiber = searchFiber(child.sibling, function (fiber) {
var beforeFiber = getFiberFromPath(child.sibling, function (fiber) {
return fiber.child;

@@ -560,3 +528,3 @@ }, function (fiber) {

Env.insertInContainerBefore(container, element, before);
} // Previous elements not found.
} // Previous element not found.

@@ -566,3 +534,3 @@

if (beforeFiber === null) {
warning('Cannot find the previous element.' + 'You should manually send the element and use the `skipUpdate` option.');
warning('Cannot find the previous element. ' + 'You should manually send the element and use the `skipUpdate` option.');
}

@@ -662,19 +630,18 @@ }

/**
* Remove a child fiber from its parent fiber and return it.
* The child to remove can be chosen by providing its key (string) or by
* providing its index (number).
* The method will also try to remove the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
* Remove a child from its parent and return it.
* The child to remove can be chosen by providing its key (string) or its index (number).
* The method will also try to remove the elements connected to the child (e.g. DOM elements),
* it is possible to disable this function using the skipUpdate parameter.
* If the child is not found null is returned.
*
* @param parent - The parent fiber from which to remove the child fiber.
* @param childSelector - The child fiber selector.
* @param parent - The parent from which to remove the child.
* @param childSelector - The child selector.
* @param skipUpdate - Whether to add or not the elements.
* @returns - The removed child fiber or null.
* @returns - The removed child or null.
*/
function removeChild(parent, childSelector, skipUpdate) {
invariant(typeof childSelector !== 'number' || childSelector >= 0, "The index provided to remove the child must be" + "greater than or equal to 0, found: ".concat(childSelector, ".")); // The removed fiber.
invariant(typeof childSelector !== 'number' || childSelector >= 0, "The index provided to remove the child must be " + "greater than or equal to 0, found: ".concat(childSelector, ".")); // The removed child.
var child = null; // Remove the fiber.
var child = null; // Remove the child.

@@ -685,3 +652,3 @@ if (typeof childSelector === 'number') {

child = removeChildFiber(parent, childSelector);
} // If the fiber is not found return null.
} // If the child is not found return null.

@@ -720,3 +687,3 @@

invariant(alternate !== null, 'The alternate child has not been removed.' + 'This is a bug in React-reparenting, please file an issue.'); // If there are siblings their indices need to be updated.
invariant(alternate !== null, 'The alternate child has not been removed. ' + 'This is a bug in React-reparenting, please file an issue.'); // If there are siblings their indices need to be updated.

@@ -734,3 +701,3 @@ if (alternate.sibling !== null) {

var containerFiber = searchFiber(parent, function (fiber) {
var containerFiber = getFiberFromPath(parent, function (fiber) {
return fiber["return"];

@@ -741,3 +708,3 @@ }, function (fiber) {

var elementFiber = searchFiber(child, function (fiber) {
var elementFiber = getFiberFromPath(child, function (fiber) {
return fiber.child;

@@ -750,3 +717,3 @@ }, function (fiber) {

{
warning('Cannot find the container element, neither the parent nor any' + 'component before it seems to generate an element instance.' + 'You should manually send the element and use the `skipUpdate` option.');
warning('Cannot find the container element, neither the parent nor any ' + 'component before it seems to generate an element instance. ' + 'You should manually send the element and use the `skipUpdate` option.');
}

@@ -760,3 +727,3 @@

{
warning('Cannot find the child element.' + 'You should manually send the element and use the `skipUpdate` option.');
warning('Cannot find the child element. ' + 'You should manually send the element and use the `skipUpdate` option.');
}

@@ -778,4 +745,4 @@

* Return the fiber in the current tree, it could be the given fiber or its alternate.
* For now, no special cases are handled (It doesn't make sense to manage
* portals as this package was created to avoid them).
* For now, no special cases are handled.
* (React.reconciler code https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js#L127).
*

@@ -807,33 +774,11 @@ * @param fiber - The fiber.

/**
* Returns the fiber of the given element (for now limited to DOM nodes).
* Returns the current owner.
*
* @param element - The element.
* @returns - The fiber.
* @returns - The owner.
*/
function getFiberFromElementInstance(element) {
var internalKey = Object.keys(element).find(function (key) {
return key.startsWith('__reactInternalInstance$');
});
invariant(typeof internalKey === 'string', 'Cannot find the __reactInternalInstance$. ' + 'This is a problem with React-reparenting, please file an issue.'); // __reactInternalInstance$* is not present in the types definition.
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
return element[internalKey];
function getCurrentOwner() {
return React__default['default'].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current;
}
/**
* Returns the fiber of the given class component instance.
*
* @param instance - The class component instance.
* @returns - The fiber.
*/
function getFiberFromClassInstance(instance) {
invariant('_reactInternalFiber' in instance, 'Cannot find the _reactInternalFiber. ' + 'This is a problem with React-reparenting, please file an issue.'); // _reactInternalFiber is not present in the types definition.
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
return instance._reactInternalFiber;
}
/**

@@ -845,18 +790,27 @@ * The ParentFiber implement the logic to manage a fiber of a parent component.

var ParentFiber = /*#__PURE__*/function () {
function ParentFiber() {
_classCallCheck(this, ParentFiber);
/** The parent fiber. */
_defineProperty(this, "fiber", null);
/** Find fiber method. */
_defineProperty(this, "findFiber", void 0);
/**
* @param fiber - The parent fiber to manage.
*/
function ParentFiber(fiber) {
_classCallCheck__default['default'](this, ParentFiber);
_defineProperty__default['default'](this, "fiber", null);
_defineProperty__default['default'](this, "findFiber", void 0);
if (fiber) this.setFiber(fiber);
}
/**
* Parent fiber setter.
*
* @param fiber - The parent fiber to manage.
*/
_createClass(ParentFiber, [{
_createClass__default['default'](ParentFiber, [{
key: "setFiber",
/**
* Parent fiber setter.
*
* @param fiber - The parent fiber to manage.
*/
value: function setFiber(fiber) {

@@ -887,3 +841,3 @@ this.fiber = fiber;

value: function getCurrent() {
invariant(this.fiber !== null, 'Cannot call Parent methods before it is initialized.'); // Find the current fiber.
invariant(this.fiber !== null, 'Cannot call ParentFiber methods before it is initialized.'); // Find the current fiber.

@@ -945,3 +899,3 @@ var current = getCurrentFiber(this.fiber);

*
* @param toParentFiber - The ParentFiber instance in which to send the child fiber.
* @param toParent - The ParentFiber instance in which to send the child fiber.
* @param childSelector - The child fiber selector.

@@ -955,3 +909,3 @@ * @param position - The position in which to add the child fiber.

key: "sendChild",
value: function sendChild(toParentFiber, childSelector, position, skipUpdate) {
value: function sendChild(toParent, childSelector, position, skipUpdate) {
// Remove the child fiber.

@@ -965,3 +919,3 @@ var child = this.removeChild(childSelector, skipUpdate); // Return -1 if the child fiber does not exist.

return toParentFiber.addChild(child, position, skipUpdate);
return toParent.addChild(child, position, skipUpdate);
}

@@ -983,7 +937,6 @@ /**

/**
* Generate a ParentFiber instance given a class instance of a component.
* If the class component is not the parent, it is possible to provide
* a function to get the correct parent given the class component fiber.
* An hook to get a ParentFiber instance in a function component.
* The ref returned must reference the element that is the parent
* of the children to reparent (it is possible to get around this by providing a findFiber method).
*
* @param instance - The class instance.
* @param findFiber - Get a different parent fiber.

@@ -993,225 +946,93 @@ * @returns - The ParentFiber instance.

function createParent(instance, findFiber) {
var parent = new ParentFiber();
var componentDidMount = instance.componentDidMount,
componentWillUnmount = instance.componentWillUnmount; // Wrap the componentDidMount method.
function useParent(findFiber) {
// The parent instance.
var parentRef = React.useRef(null); // Generate the instance.
instance.componentDidMount = function () {
var fiber = getFiberFromClassInstance(instance); // Set the fiber.
if (parentRef.current === null) {
parentRef.current = new ParentFiber();
var owner = getCurrentOwner();
invariant(owner !== null, 'This is likely a bug in React-Reparenting. ' + 'Please file an issue https://github.com/Paol-imi/react-reparenting/issues.');
parentRef.current.setFiber(owner);
}
parent.setFiber(fiber);
parent.setFinder(findFiber); // Call the original method.
parentRef.current.setFinder(findFiber); // When the component is mounted the fiber is set.
if (typeof componentDidMount === 'function') {
componentDidMount.call(this);
}
}; // Wrap the componentDidMount method.
React.useEffect(function () {
return function () {
var _parentRef$current;
instance.componentWillUnmount = function () {
// Call the original method.
if (typeof componentWillUnmount === 'function') {
componentWillUnmount.call(this);
} // Clear the parent.
parent.clear();
};
return parent;
return (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.clear();
};
}, []);
return parentRef.current;
}
function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$1() { 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; } }
/**
* It is a simple wrapper that generate internally a
* ParentFiber and allow to access it through a React.Ref.
* The children in which to enable reparenting must belong to this component.
* Create a reparentable Space. Only <Reparentables>s belonging to the same
* Space can send children to each other.
*/
var Parent = /*#__PURE__*/function (_Component) {
_inherits(Parent, _Component);
function createReparentableSpace() {
/** Reparentable map. */
var ReparentableMap = new Map();
/**
* Remove a child from a <Reparentable> component and add it to another <Reparentable> component.
* Return the index in which the child is added or -1 if the child is not found.
* The child to remove can be chosen by providing its key (string) or by providing its index (number).
* The position can be chosen by providing a key (string) or by providing an index (number).
* If a key (string) is provided the child will be added after the one with that key.
* The child is added at the bottom if none of the children have that key.
* If an index (number) is provided the child will be added in that position.
* The child is added at the bottom if -1 is provided or the index is greater than the number of children.
* The method will also try to send the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
*
* @param fromParentId - The id of the <Reparentable> from whuch to remove the child.
* @param toParentId - The id of the <Reparentable> in which to add the child.
* @param childSelector - The child selector.
* @param position - The position in which to add the child fiber.
* @param skipUpdate - Whether to send or not the elements.
* @returns - The position in which the child is sent or -1.
*/
var _super = _createSuper$1(Parent);
function sendReparentableChild(fromParentId, toParentId, childSelector, position, skipUpdate) {
// Get the ParetFiber instances.
var fromParent = ReparentableMap.get(fromParentId);
var toParent = ReparentableMap.get(toParentId);
function Parent() {
var _this;
_classCallCheck(this, Parent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "parent", new ParentFiber());
return _this;
}
_createClass(Parent, [{
key: "componentDidMount",
/**
* The class instance contains the fiber data
* only after the component is mounted.
*/
value: function componentDidMount() {
var _this$props = this.props,
parentRef = _this$props.parentRef,
findFiber = _this$props.findFiber;
var fiber = getFiberFromClassInstance(this); // Ensure a ref is passed.
invariant(parentRef !== null && (typeof parentRef === 'function' || _typeof(parentRef) === 'object'), 'You must provide a parentRef to the <Parent> component.'); // Set the fiber.
this.parent.setFiber(fiber);
this.parent.setFinder(findFiber); // Set the ref.
if (typeof parentRef === 'function') {
parentRef(this.parent);
{
if (fromParent === undefined) {
warning("Cannot find a <Reparentable> with the id: '".concat(fromParentId, "'."));
}
if (_typeof(parentRef) === 'object' && parentRef !== null) {
// The type of ref that is normally returned by useRef and createRef
// is not mutable, and the user may not know how to obtain a mutable one,
// causing annoying problems. Plus, it makes sense that this property is
// immutable, so I just use the refObject interface (and not
// the MutableRefObject interface) with the @ts-ignore.
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
parentRef.current = this.parent;
if (toParent === undefined) {
warning("Cannot find a <Reparentable> with the id: '".concat(toParentId, "'."));
}
}
/** Update the findFiber method. */
} // Parents ids not valid.
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var findFiber = this.props.findFiber;
this.parent.setFinder(findFiber);
}
/**
* Clear on unmount.
*/
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.parent.clear();
}
/**
* Render only the children.
* In this way the component (and therefore its fiber)
* will be the direct parent of the children.
*/
if (fromParent === undefined || toParent === undefined) {
return -1;
} // Send the child.
}, {
key: "render",
value: function render() {
var children = this.props.children;
return children;
}
}]);
return Parent;
}(react.Component);
/* Parent props. */
function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$2() { 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; } }
/** Reparentable map. */
var ReparentableMap = new Map();
/**
* Remove a child fiber from a <Reparentable> component and add it to another <Reparentable> component.
* Return the index in which the child is added or -1 if the child is not found.
* The child to remove can be chosen by providing its key (string) or by providing its index (number).
* The position can be chosen by providing a key (string) or by providing an index (number).
* If a key (string) is provided the child will be added after the one with that key.
* The child is added at the bottom if none of the children have that key.
* If an index (number) is provided the child will be added in that position.
* The child is added at the bottom if -1 is provided or the index is greater than the number of children.
* The method will also try to send the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
*
* @param fromParentId - The id of the <Reparentable> from whuch to remove the child.
* @param toParentId - The id of the <Reparentable> in which to add the child.
* @param childSelector - The child fiber selector.
* @param position - The position in which to add the child fiber.
* @param skipUpdate - Whether to send or not the elements.
* @returns - The position in which the child fiber is sent or -1.
*/
function sendReparentableChild(fromParentId, toParentId, childSelector, position, skipUpdate) {
// Get the ParetFiber instances.
var fromParent = ReparentableMap.get(fromParentId);
var toParent = ReparentableMap.get(toParentId);
{
if (fromParent === undefined) {
warning("Cannot find a <Reparentable> with the id: '".concat(fromParentId, "'."));
}
if (toParent === undefined) {
warning("Cannot find a <Reparentable> with the id: '".concat(toParentId, "'."));
}
} // Parents ids not valid.
if (fromParent === undefined || toParent === undefined) {
return -1;
} // Send the child.
return fromParent.sendChild(toParent, childSelector, position, skipUpdate);
}
/**
* This component generate internally a
* ParentFiber and allow to access it through a global provided map.
* This component must be the parent of the children to reparent
* (it is possible to get around this by providing a findFiber method).
*/
var Reparentable = /*#__PURE__*/function (_Component) {
_inherits(Reparentable, _Component);
var _super = _createSuper$2(Reparentable);
function Reparentable() {
var _this;
_classCallCheck(this, Reparentable);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "parent", new ParentFiber());
return _this;
return fromParent.sendChild(toParent, childSelector, position, skipUpdate);
}
/**
* This component generate internally a ParentFiber instance
* and allow to access it through a global provided map.
* This component must be the parent of the children to reparent
* (it is possible to get around this by providing a findFiber method).
*/
_createClass(Reparentable, [{
key: "componentDidMount",
/**
* The class instance contains the fiber data
* only after the component did mount.
*/
value: function componentDidMount() {
var _this$props = this.props,
id = _this$props.id,
findFiber = _this$props.findFiber;
var fiber = getFiberFromClassInstance(this); // Ensure the id is a string.
function Reparentable(_ref) {
var id = _ref.id,
children = _ref.children,
findFiber = _ref.findFiber;
var parent = useParent(findFiber);
React.useEffect(function () {
// Ensure the id is a string.
invariant(typeof id === 'string', 'You must provide an id to the <Reparentable> component.');
invariant(typeof id === 'string', 'You must provide an id to the <Reparentable> component.'); // Set the fiber.
this.parent.setFiber(fiber);
this.parent.setFinder(findFiber);
{

@@ -1224,83 +1045,23 @@ if (ReparentableMap.has(id)) {

ReparentableMap.set(id, this.parent);
}
/**
* Update the findFiber method.
*/
ReparentableMap.set(id, parent);
return function () {
// Remove the ParentFiber instance from the map.
ReparentableMap["delete"](id); // Clear the ParentFiber instance.
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var findFiber = this.props.findFiber;
this.parent.setFinder(findFiber);
}
/**
* Clear on unmount.
*/
parent.clear();
};
}, []);
return children;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var id = this.props.id; // Remove the ParentFiber instance from the map.
ReparentableMap["delete"](id); // Clear the ParentFiber instance.
this.parent.clear();
}
/**
* Render only the children.
* In this way the component (and therefore its fiber)
* will be the direct parent of the children.
*/
}, {
key: "render",
value: function render() {
var children = this.props.children;
return children;
}
}]);
return Reparentable;
}(react.Component);
return {
Reparentable: Reparentable,
sendReparentableChild: sendReparentableChild,
ReparentableMap: ReparentableMap
};
}
/* Reparentable props. */
/**
* An hook to get a ParentFiber instance in a function component.
* The ref returned must reference the element that is the parent
* of the children to reparent (it is possible to get around this by providing a findFiber method).
*
* @param findFiber - Get a different parent fiber.
* @returns - The ParentFiber instance.
*/
function useParent(ref, findFiber) {
// The parent instance.
var parentRef = react.useRef(null); // Generate the instance.
if (parentRef.current === null) {
parentRef.current = new ParentFiber();
} // Get a reference.
var parent = parentRef.current;
parent.setFinder(findFiber); // When the component is mounted the fiber is set.
react.useEffect(function () {
invariant(ref.current !== null && ref.current !== undefined, 'You must set the ref returned by the useParent hook.'); // The element fiber.
parent.setFiber(getFiberFromElementInstance(ref.current)); // Clean up.
return function () {
parent.clear();
};
}, []);
return parent;
}
exports.Env = Env;
exports.Parent = Parent;
exports.ParentFiber = ParentFiber;
exports.Reparentable = Reparentable;
exports.ReparentableMap = ReparentableMap;
exports.addChild = addChild;

@@ -1312,3 +1073,3 @@ exports.addChildFiberAt = addChildFiberAt;

exports.configure = configure;
exports.createParent = createParent;
exports.createReparentableSpace = createReparentableSpace;
exports.findChildFiber = findChildFiber;

@@ -1319,4 +1080,4 @@ exports.findChildFiberAt = findChildFiberAt;

exports.getCurrentFiber = getCurrentFiber;
exports.getFiberFromClassInstance = getFiberFromClassInstance;
exports.getFiberFromElementInstance = getFiberFromElementInstance;
exports.getCurrentOwner = getCurrentOwner;
exports.getFiberFromPath = getFiberFromPath;
exports.prependChildFiber = prependChildFiber;

@@ -1328,6 +1089,3 @@ exports.removeChild = removeChild;

exports.removeSiblingFiber = removeSiblingFiber;
exports.searchFiber = searchFiber;
exports.sendReparentableChild = sendReparentableChild;
exports.updateFiberDebugFields = updateFiberDebugFields;
exports.updateFibersIndex = updateFibersIndex;
exports.useParent = useParent;

5

dist/react-reparenting.cjs.production.min.js
/**
* React-reparenting v0.4.0
* React-reparenting v0.5.0
* https://paol-imi.github.io/react-reparenting
* Copyright (c) 2020-present, Paol-imi
* Released under the MIT license
* https://github.com/Paol-imi/react-reparenting/blob/master/LICENSE
* @license MIT
*/
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=e(require("@babel/runtime/helpers/classCallCheck")),t=e(require("@babel/runtime/helpers/assertThisInitialized")),r=e(require("@babel/runtime/helpers/inherits")),i=e(require("@babel/runtime/helpers/possibleConstructorReturn")),u=e(require("@babel/runtime/helpers/getPrototypeOf")),l=e(require("@babel/runtime/helpers/wrapNativeSuper")),o=e(require("@babel/runtime/helpers/defineProperty")),a=e(require("@babel/runtime/helpers/createClass")),s=e(require("@babel/runtime/helpers/typeof")),c=require("react"),f={appendChildToContainer:function(e,n){e.appendChild(n)},insertInContainerBefore:function(e,n,t){e.insertBefore(n,t)},removeChildFromContainer:function(e,n){e.removeChild(n)},isElement:function(e,n){return n instanceof Element}};function p(e,n){for(;e;)e.index=n,e=e.sibling,n+=1;return n-1}function d(e,n){var t=e.child;if(null===t)return null;if(-1===n)for(;t.sibling;)t=t.sibling;else for(;t.sibling&&n>0;)n-=1,t=t.sibling;return t}function h(e,n){var t=e.child;if(null===t)return null;if(t.key===n)return e;for(var r=t.sibling;r;){if(r.key===n)return t;r=(t=r).sibling}return null}function b(e,n){for(var t=e.sibling;t&&t.key!==n;)t=t.sibling;return t}function v(e,n,t){if(-1===t)return m(e,n);if(0===t)return F(e,n);var r=d(e,t-1);return null===r?F(e,n):g(r,n)}function y(e,n,t){var r=h(e,t);return null===r?m(e,n):r===e?F(e,n):g(r,n)}function m(e,n){var t=d(e,-1);return null===t?F(e,n):g(t,n)}function g(e,n){var t=e.sibling,r=e.index+1;return e.sibling=n,n.return=e.return,n.sibling=t,r}function F(e,n){var t=e.child;return e.child=n,n.sibling=t,n.return=e,0}function C(e,n,t){for(;e;){if(t(e))return e;e=n(e)}return null}function x(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,r=u(e);if(n){var l=u(this).constructor;t=Reflect.construct(r,arguments,l)}else t=r.apply(this,arguments);return i(this,t)}}var k=function(e){r(u,e);var i=x(u);function u(){var e;n(this,u);for(var r=arguments.length,l=new Array(r),a=0;a<r;a++)l[a]=arguments[a];return e=i.call.apply(i,[this].concat(l)),o(t(e),"name","Invariant"),e}return u}(l(Error));function R(e,n){if(!e)throw new k("Invariant failed")}function N(e,n,t,r){var i;if(R("number"!=typeof t||t>=-1),p(n,i="number"==typeof t?v(e,n,t):y(e,n,t)),null===n.alternate||null===e.alternate?null!==n.alternate&&(n.alternate.return=null,n.alternate.sibling=null):("number"==typeof t?v(e.alternate,n.alternate,t):y(e.alternate,n.alternate,t),p(n.alternate,i)),r)return i;var u=C(e,(function(e){return e.return}),(function(e){return f.isElement(e.elementType,e.stateNode)})),l=C(n,(function(e){return e.child}),(function(e){return f.isElement(e.elementType,e.stateNode)}));if(null===u)return i;if(null===l)return i;var o=u.stateNode,a=l.stateNode;if(null===n.sibling)f.appendChildToContainer(o,a);else{var s=C(n.sibling,(function(e){return e.child}),(function(e){return f.isElement(e.elementType,e.stateNode)}));if(null!==s){var c=s.stateNode;f.insertInContainerBefore(o,a,c)}}return i}function w(e,n){if(0===n)return I(e);var t=d(e,n-1);return null===t?null:E(t)}function D(e,n){var t=h(e,n);return null===t?null:t===e?I(e):E(t)}function I(e){var n=e.child;return null===n?null:(e.child=n.sibling,n)}function E(e){var n=e.sibling;return null===n?null:(e.sibling=n.sibling,n)}function P(e,n,t){R("number"!=typeof n||n>=0);var r=null;if(null===(r="number"==typeof n?w(e,n):D(e,n)))return null;if(null!==r.sibling&&p(r.sibling,r.index),null!==r.alternate&&null!==e.alternate){var i=null;R(null!==(i="number"==typeof n?w(e.alternate,n):D(e.alternate,n))),null!==i.sibling&&p(i.sibling,i.index)}if(t)return r;var u=C(e,(function(e){return e.return}),(function(e){return f.isElement(e.elementType,e.stateNode)})),l=C(r,(function(e){return e.child}),(function(e){return f.isElement(e.elementType,e.stateNode)}));if(null===u)return r;if(null===l)return r;var o=u.stateNode,a=l.stateNode;return f.removeChildFromContainer(o,a),r}function q(e){if(null===e.alternate)return e;for(var n=e;null!==n.return;)n=n.return;return R(null!==n.stateNode&&"current"in n.stateNode),n.stateNode.current===n?e:e.alternate}function _(e){var n=Object.keys(e).find((function(e){return e.startsWith("__reactInternalInstance$")}));return R("string"==typeof n),e[n]}function S(e){return R("_reactInternalFiber"in e),e._reactInternalFiber}var T=function(){function e(){n(this,e),o(this,"fiber",null),o(this,"findFiber",void 0)}return a(e,[{key:"setFiber",value:function(e){this.fiber=e}},{key:"setFinder",value:function(e){this.findFiber=e}},{key:"getCurrent",value:function(){R(null!==this.fiber);var e=q(this.fiber);return"function"==typeof this.findFiber?this.findFiber(e):e}},{key:"addChild",value:function(e,n,t){return N(this.getCurrent(),e,n,t)}},{key:"removeChild",value:function(e,n){return P(this.getCurrent(),e,n)}},{key:"sendChild",value:function(e,n,t,r){var i=this.removeChild(n,r);return null===i?-1:e.addChild(i,t,r)}},{key:"clear",value:function(){this.fiber=null}}]),e}();function M(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,r=u(e);if(n){var l=u(this).constructor;t=Reflect.construct(r,arguments,l)}else t=r.apply(this,arguments);return i(this,t)}}var j=function(e){r(u,e);var i=M(u);function u(){var e;n(this,u);for(var r=arguments.length,l=new Array(r),a=0;a<r;a++)l[a]=arguments[a];return e=i.call.apply(i,[this].concat(l)),o(t(e),"parent",new T),e}return a(u,[{key:"componentDidMount",value:function(){var e=this.props,n=e.parentRef,t=e.findFiber,r=S(this);R(null!==n&&("function"==typeof n||"object"===s(n))),this.parent.setFiber(r),this.parent.setFinder(t),"function"==typeof n&&n(this.parent),"object"===s(n)&&null!==n&&(n.current=this.parent)}},{key:"componentDidUpdate",value:function(){var e=this.props.findFiber;this.parent.setFinder(e)}},{key:"componentWillUnmount",value:function(){this.parent.clear()}},{key:"render",value:function(){return this.props.children}}]),u}(c.Component);function A(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,r=u(e);if(n){var l=u(this).constructor;t=Reflect.construct(r,arguments,l)}else t=r.apply(this,arguments);return i(this,t)}}var O=new Map;var U=function(e){r(u,e);var i=A(u);function u(){var e;n(this,u);for(var r=arguments.length,l=new Array(r),a=0;a<r;a++)l[a]=arguments[a];return e=i.call.apply(i,[this].concat(l)),o(t(e),"parent",new T),e}return a(u,[{key:"componentDidMount",value:function(){var e=this.props,n=e.id,t=e.findFiber,r=S(this);R("string"==typeof n),this.parent.setFiber(r),this.parent.setFinder(t),O.set(n,this.parent)}},{key:"componentDidUpdate",value:function(){var e=this.props.findFiber;this.parent.setFinder(e)}},{key:"componentWillUnmount",value:function(){var e=this.props.id;O.delete(e),this.parent.clear()}},{key:"render",value:function(){return this.props.children}}]),u}(c.Component);exports.Env=f,exports.Parent=j,exports.ParentFiber=T,exports.Reparentable=U,exports.ReparentableMap=O,exports.addChild=N,exports.addChildFiberAt=v,exports.addChildFiberBefore=y,exports.addSiblingFiber=g,exports.appendChildFiber=m,exports.configure=function(e){Object.assign(f,e)},exports.createParent=function(e,n){var t=new T,r=e.componentDidMount,i=e.componentWillUnmount;return e.componentDidMount=function(){var i=S(e);t.setFiber(i),t.setFinder(n),"function"==typeof r&&r.call(this)},e.componentWillUnmount=function(){"function"==typeof i&&i.call(this),t.clear()},t},exports.findChildFiber=function(e,n){var t=e.child;return null===t?null:t.key===n?t:b(t,n)},exports.findChildFiberAt=d,exports.findPreviousFiber=h,exports.findSiblingFiber=b,exports.getCurrentFiber=q,exports.getFiberFromClassInstance=S,exports.getFiberFromElementInstance=_,exports.prependChildFiber=F,exports.removeChild=P,exports.removeChildFiber=D,exports.removeChildFiberAt=w,exports.removeFirstChildFiber=I,exports.removeSiblingFiber=E,exports.searchFiber=C,exports.sendReparentableChild=function(e,n,t,r,i){var u=O.get(e),l=O.get(n);return void 0===u||void 0===l?-1:u.sendChild(l,t,r,i)},exports.updateFiberDebugFields=function(e,n){var t;t=n.child===e?null===e.sibling?n:e.sibling:n.child||n,e._debugOwner=t._debugOwner,e._debugSource=t._debugSource},exports.updateFibersIndex=p,exports.useParent=function(e,n){var t=c.useRef(null);null===t.current&&(t.current=new T);var r=t.current;return r.setFinder(n),c.useEffect((function(){return R(null!==e.current&&void 0!==e.current),r.setFiber(_(e.current)),function(){r.clear()}}),[]),r};
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/classCallCheck"),r=require("@babel/runtime/helpers/assertThisInitialized"),n=require("@babel/runtime/helpers/inherits"),t=require("@babel/runtime/helpers/possibleConstructorReturn"),i=require("@babel/runtime/helpers/getPrototypeOf"),u=require("@babel/runtime/helpers/wrapNativeSuper"),l=require("@babel/runtime/helpers/defineProperty"),a=require("react"),o=require("@babel/runtime/helpers/createClass");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=f(e),c=f(r),d=f(n),b=f(t),p=f(i),h=f(u),v=f(l),g=f(a),m=f(o),C={appendChildToContainer:function(e,r){e.appendChild(r)},insertInContainerBefore:function(e,r,n){e.insertBefore(r,n)},removeChildFromContainer:function(e,r){e.removeChild(r)},isElement:function(e,r){return r instanceof Element}};function y(e,r){var n=e.child;if(null===n)return null;if(-1===r)for(;n.sibling;)n=n.sibling;else for(;n.sibling&&r>0;)r-=1,n=n.sibling;return n}function F(e,r){var n=e.child;if(null===n)return null;if(n.key===r)return e;for(var t=n.sibling;t;){if(t.key===r)return n;t=(n=t).sibling}return null}function x(e,r){for(var n=e.sibling;n&&n.key!==r;)n=n.sibling;return n}function E(e,r,n){if(-1===n)return R(e,r);if(0===n)return k(e,r);var t=y(e,n-1);return null===t?k(e,r):_(t,r)}function N(e,r,n){var t=F(e,n);return null===t?R(e,r):t===e?k(e,r):_(t,r)}function R(e,r){var n=y(e,-1);return null===n?k(e,r):_(n,r)}function _(e,r){var n=e.sibling,t=e.index+1;return e.sibling=r,r.return=e.return,r.sibling=n,t}function k(e,r){var n=e.child;return e.child=r,r.sibling=n,r.return=e,0}function T(e,r){for(;e;)e.index=r,e=e.sibling,r+=1;return r-1}function q(e,r,n){for(;e;){if(n(e))return e;e=r(e)}return null}function I(e){var r=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,t=p.default(e);if(r){var i=p.default(this).constructor;n=Reflect.construct(t,arguments,i)}else n=t.apply(this,arguments);return b.default(this,n)}}var O=function(e){d.default(n,e);var r=I(n);function n(){var e;s.default(this,n);for(var t=arguments.length,i=new Array(t),u=0;u<t;u++)i[u]=arguments[u];return e=r.call.apply(r,[this].concat(i)),v.default(c.default(e),"name","Invariant"),e}return n}(h.default(Error));function S(e,r){if(!e)throw new O("Invariant failed")}function w(e,r,n,t){var i;if(S("number"!=typeof n||n>=-1),T(r,i="number"==typeof n?E(e,r,n):N(e,r,n)),null===r.alternate||null===e.alternate?null!==r.alternate&&(r.alternate.return=null,r.alternate.sibling=null):("number"==typeof n?E(e.alternate,r.alternate,n):N(e.alternate,r.alternate,n),T(r.alternate,i)),t)return i;var u=q(e,(function(e){return e.return}),(function(e){return C.isElement(e.elementType,e.stateNode)})),l=q(r,(function(e){return e.child}),(function(e){return C.isElement(e.elementType,e.stateNode)}));if(null===u)return i;if(null===l)return i;var a=u.stateNode,o=l.stateNode;if(null===r.sibling)C.appendChildToContainer(a,o);else{var f=q(r.sibling,(function(e){return e.child}),(function(e){return C.isElement(e.elementType,e.stateNode)}));if(null!==f){var s=f.stateNode;C.insertInContainerBefore(a,o,s)}}return i}function P(e,r){if(0===r)return B(e);var n=y(e,r-1);return null===n?null:D(n)}function A(e,r){var n=F(e,r);return null===n?null:n===e?B(e):D(n)}function B(e){var r=e.child;return null===r?null:(e.child=r.sibling,r)}function D(e){var r=e.sibling;return null===r?null:(e.sibling=r.sibling,r)}function j(e,r,n){S("number"!=typeof r||r>=0);var t=null;if(null===(t="number"==typeof r?P(e,r):A(e,r)))return null;if(null!==t.sibling&&T(t.sibling,t.index),null!==t.alternate&&null!==e.alternate){var i=null;S(null!==(i="number"==typeof r?P(e.alternate,r):A(e.alternate,r))),null!==i.sibling&&T(i.sibling,i.index)}if(n)return t;var u=q(e,(function(e){return e.return}),(function(e){return C.isElement(e.elementType,e.stateNode)})),l=q(t,(function(e){return e.child}),(function(e){return C.isElement(e.elementType,e.stateNode)}));if(null===u)return t;if(null===l)return t;var a=u.stateNode,o=l.stateNode;return C.removeChildFromContainer(a,o),t}function L(e){if(null===e.alternate)return e;for(var r=e;null!==r.return;)r=r.return;return S(null!==r.stateNode&&"current"in r.stateNode),r.stateNode.current===r?e:e.alternate}function M(){return g.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current}var U=function(){function e(r){s.default(this,e),v.default(this,"fiber",null),v.default(this,"findFiber",void 0),r&&this.setFiber(r)}return m.default(e,[{key:"setFiber",value:function(e){this.fiber=e}},{key:"setFinder",value:function(e){this.findFiber=e}},{key:"getCurrent",value:function(){S(null!==this.fiber);var e=L(this.fiber);return"function"==typeof this.findFiber?this.findFiber(e):e}},{key:"addChild",value:function(e,r,n){return w(this.getCurrent(),e,r,n)}},{key:"removeChild",value:function(e,r){return j(this.getCurrent(),e,r)}},{key:"sendChild",value:function(e,r,n,t){var i=this.removeChild(r,t);return null===i?-1:e.addChild(i,n,t)}},{key:"clear",value:function(){this.fiber=null}}]),e}();function z(e){var r=a.useRef(null);if(null===r.current){r.current=new U;var n=M();S(null!==n),r.current.setFiber(n)}return r.current.setFinder(e),a.useEffect((function(){return function(){var e;return null===(e=r.current)||void 0===e?void 0:e.clear()}}),[]),r.current}exports.Env=C,exports.ParentFiber=U,exports.addChild=w,exports.addChildFiberAt=E,exports.addChildFiberBefore=N,exports.addSiblingFiber=_,exports.appendChildFiber=R,exports.configure=function(e){return Object.assign(C,e)},exports.createReparentableSpace=function(){var e=new Map;return{Reparentable:function(r){var n=r.id,t=r.children,i=z(r.findFiber);return a.useEffect((function(){return S("string"==typeof n),e.set(n,i),function(){e.delete(n),i.clear()}}),[]),t},sendReparentableChild:function(r,n,t,i,u){var l=e.get(r),a=e.get(n);return void 0===l||void 0===a?-1:l.sendChild(a,t,i,u)},ReparentableMap:e}},exports.findChildFiber=function(e,r){var n=e.child;return null===n?null:n.key===r?n:x(n,r)},exports.findChildFiberAt=y,exports.findPreviousFiber=F,exports.findSiblingFiber=x,exports.getCurrentFiber=L,exports.getCurrentOwner=M,exports.getFiberFromPath=q,exports.prependChildFiber=k,exports.removeChild=j,exports.removeChildFiber=A,exports.removeChildFiberAt=P,exports.removeFirstChildFiber=B,exports.removeSiblingFiber=D,exports.updateFibersIndex=T,exports.useParent=z;

546

dist/react-reparenting.esm.js
/**
* React-reparenting v0.4.0
* React-reparenting v0.5.0
* https://paol-imi.github.io/react-reparenting
* Copyright (c) 2020-present, Paol-imi
* Released under the MIT license
* https://github.com/Paol-imi/react-reparenting/blob/master/LICENSE

@@ -17,5 +16,4 @@ * @license MIT

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import React, { useRef, useEffect } from 'react';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _typeof from '@babel/runtime/helpers/esm/typeof';
import { Component, useRef, useEffect } from 'react';

@@ -47,55 +45,6 @@ /**

function configure(configuration) {
Object.assign(Env, configuration);
return Object.assign(Env, configuration);
}
/**
* Update the indices of a fiber and its siblings.
* return the last sibling index.
*
* @param fiber - The fiber.
* @param index - The index of the fiber.
* @returns - The last sibling index.
*/
function updateFibersIndex(fiber, index) {
while (fiber) {
fiber.index = index;
fiber = fiber.sibling;
index += 1;
}
return index - 1;
}
/**
* Update the debug fields.
* I have not yet inquired about how the _debug fields are chosen.
* For now only the owner and source are set based on the siblings/parent fields.
* TODO:
* - _debugID: does it need to be changed?
* - _debugHookTypes: does it need to be changed?
* - _debugSource: is it ok like this?
* - _debugOwner: is it ok like this?
*
* @param child - The child fiber.
* @param parent - The parent fiber.
*/
function updateFiberDebugFields(child, parent) {
// The fiber from wich to copy the debug fields.
var fiberToCopy; // Try to find a fiber to copy.
if (parent.child === child) {
if (child.sibling === null) {
fiberToCopy = parent;
} else {
fiberToCopy = child.sibling;
}
} else {
fiberToCopy = parent.child || parent;
}
child._debugOwner = fiberToCopy._debugOwner;
child._debugSource = fiberToCopy._debugSource;
}
/**
* Return the child fiber at the given index or null if the parent has no children.

@@ -317,2 +266,20 @@ * If the index provided is greater than the number of children the last child is returned.

/**
* Update the indices of a fiber and its siblings.
* Return the last sibling index.
*
* @param fiber - The fiber.
* @param index - The index of the fiber.
* @returns - The last sibling index.
*/
function updateFibersIndex(fiber, index) {
while (fiber) {
fiber.index = index;
fiber = fiber.sibling;
index += 1;
}
return index - 1;
}
/**
* Return the first valid fiber or null.

@@ -325,3 +292,3 @@ *

*/
function searchFiber(fiber, next, stop) {
function getFiberFromPath(fiber, next, stop) {
while (fiber) {

@@ -339,3 +306,3 @@ if (stop(fiber)) {

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

@@ -387,4 +354,4 @@ 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; } }

/**
* Add a child fiber in a parent fiber and return the index in which it is added.
* The position can be chosen by providing a key (string) or by providing an index (number).
* Add a child in a parent and return the index in which it is added.
* The position of the child can be chosen by providing a key (string) or an index (number).
* If a key (string) is provided the child will be added after the one with that key.

@@ -395,10 +362,10 @@ * The child is added at the bottom if none of the children have that key.

* than the number of children.
* The method will also try to add the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
* The method will also try to add the elements connected to the child (e.g. DOM elements),
* it is possible to disable this function using the skipUpdate parameter.
*
* @param parent - The parent fiber in which to add the child fiber.
* @param child - The child fiber to add.
* @param position - The position in which to add the child fiber.
* @param parent - The parent in which to add the child.
* @param child - The child to add.
* @param position - The position in which to add the child.
* @param skipUpdate - Whether to add or not the elements.
* @returns - The index in which the child fiber is added.
* @returns - The index in which the child is added.
*/

@@ -418,5 +385,4 @@

updateFibersIndex(child, index);
updateFibersIndex(child, index); // If there are the alternates.
if (child.alternate === null || parent.alternate === null) {

@@ -449,3 +415,3 @@ if (child.alternate !== null) {

var containerFiber = searchFiber(parent, function (fiber) {
var containerFiber = getFiberFromPath(parent, function (fiber) {
return fiber["return"];

@@ -456,3 +422,3 @@ }, function (fiber) {

var elementFiber = searchFiber(child, function (fiber) {
var elementFiber = getFiberFromPath(child, function (fiber) {
return fiber.child;

@@ -483,3 +449,3 @@ }, function (fiber) {

// Get the fibers that belong to the previous element.
var beforeFiber = searchFiber(child.sibling, function (fiber) {
var beforeFiber = getFiberFromPath(child.sibling, function (fiber) {
return fiber.child;

@@ -494,3 +460,3 @@ }, function (fiber) {

Env.insertInContainerBefore(container, element, before);
} // Previous elements not found.
} // Previous element not found.
}

@@ -588,19 +554,18 @@

/**
* Remove a child fiber from its parent fiber and return it.
* The child to remove can be chosen by providing its key (string) or by
* providing its index (number).
* The method will also try to remove the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
* Remove a child from its parent and return it.
* The child to remove can be chosen by providing its key (string) or its index (number).
* The method will also try to remove the elements connected to the child (e.g. DOM elements),
* it is possible to disable this function using the skipUpdate parameter.
* If the child is not found null is returned.
*
* @param parent - The parent fiber from which to remove the child fiber.
* @param childSelector - The child fiber selector.
* @param parent - The parent from which to remove the child.
* @param childSelector - The child selector.
* @param skipUpdate - Whether to add or not the elements.
* @returns - The removed child fiber or null.
* @returns - The removed child or null.
*/
function removeChild(parent, childSelector, skipUpdate) {
invariant(typeof childSelector !== 'number' || childSelector >= 0); // The removed fiber.
invariant(typeof childSelector !== 'number' || childSelector >= 0); // The removed child.
var child = null; // Remove the fiber.
var child = null; // Remove the child.

@@ -611,3 +576,3 @@ if (typeof childSelector === 'number') {

child = removeChildFiber(parent, childSelector);
} // If the fiber is not found return null.
} // If the child is not found return null.

@@ -650,3 +615,3 @@

var containerFiber = searchFiber(parent, function (fiber) {
var containerFiber = getFiberFromPath(parent, function (fiber) {
return fiber["return"];

@@ -657,3 +622,3 @@ }, function (fiber) {

var elementFiber = searchFiber(child, function (fiber) {
var elementFiber = getFiberFromPath(child, function (fiber) {
return fiber.child;

@@ -686,4 +651,4 @@ }, function (fiber) {

* Return the fiber in the current tree, it could be the given fiber or its alternate.
* For now, no special cases are handled (It doesn't make sense to manage
* portals as this package was created to avoid them).
* For now, no special cases are handled.
* (React.reconciler code https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js#L127).
*

@@ -715,33 +680,11 @@ * @param fiber - The fiber.

/**
* Returns the fiber of the given element (for now limited to DOM nodes).
* Returns the current owner.
*
* @param element - The element.
* @returns - The fiber.
* @returns - The owner.
*/
function getFiberFromElementInstance(element) {
var internalKey = Object.keys(element).find(function (key) {
return key.startsWith('__reactInternalInstance$');
});
invariant(typeof internalKey === 'string'); // __reactInternalInstance$* is not present in the types definition.
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
return element[internalKey];
function getCurrentOwner() {
return React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current;
}
/**
* Returns the fiber of the given class component instance.
*
* @param instance - The class component instance.
* @returns - The fiber.
*/
function getFiberFromClassInstance(instance) {
invariant('_reactInternalFiber' in instance); // _reactInternalFiber is not present in the types definition.
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
return instance._reactInternalFiber;
}
/**

@@ -753,3 +696,10 @@ * The ParentFiber implement the logic to manage a fiber of a parent component.

var ParentFiber = /*#__PURE__*/function () {
function ParentFiber() {
/** The parent fiber. */
/** Find fiber method. */
/**
* @param fiber - The parent fiber to manage.
*/
function ParentFiber(fiber) {
_classCallCheck(this, ParentFiber);

@@ -760,12 +710,14 @@

_defineProperty(this, "findFiber", void 0);
if (fiber) this.setFiber(fiber);
}
/**
* Parent fiber setter.
*
* @param fiber - The parent fiber to manage.
*/
_createClass(ParentFiber, [{
key: "setFiber",
/**
* Parent fiber setter.
*
* @param fiber - The parent fiber to manage.
*/
value: function setFiber(fiber) {

@@ -853,3 +805,3 @@ this.fiber = fiber;

*
* @param toParentFiber - The ParentFiber instance in which to send the child fiber.
* @param toParent - The ParentFiber instance in which to send the child fiber.
* @param childSelector - The child fiber selector.

@@ -863,3 +815,3 @@ * @param position - The position in which to add the child fiber.

key: "sendChild",
value: function sendChild(toParentFiber, childSelector, position, skipUpdate) {
value: function sendChild(toParent, childSelector, position, skipUpdate) {
// Remove the child fiber.

@@ -873,3 +825,3 @@ var child = this.removeChild(childSelector, skipUpdate); // Return -1 if the child fiber does not exist.

return toParentFiber.addChild(child, position, skipUpdate);
return toParent.addChild(child, position, skipUpdate);
}

@@ -891,7 +843,6 @@ /**

/**
* Generate a ParentFiber instance given a class instance of a component.
* If the class component is not the parent, it is possible to provide
* a function to get the correct parent given the class component fiber.
* An hook to get a ParentFiber instance in a function component.
* The ref returned must reference the element that is the parent
* of the children to reparent (it is possible to get around this by providing a findFiber method).
*
* @param instance - The class instance.
* @param findFiber - Get a different parent fiber.

@@ -901,292 +852,103 @@ * @returns - The ParentFiber instance.

function createParent(instance, findFiber) {
var parent = new ParentFiber();
var componentDidMount = instance.componentDidMount,
componentWillUnmount = instance.componentWillUnmount; // Wrap the componentDidMount method.
function useParent(findFiber) {
// The parent instance.
var parentRef = useRef(null); // Generate the instance.
instance.componentDidMount = function () {
var fiber = getFiberFromClassInstance(instance); // Set the fiber.
if (parentRef.current === null) {
parentRef.current = new ParentFiber();
var owner = getCurrentOwner();
invariant(owner !== null);
parentRef.current.setFiber(owner);
}
parent.setFiber(fiber);
parent.setFinder(findFiber); // Call the original method.
parentRef.current.setFinder(findFiber); // When the component is mounted the fiber is set.
if (typeof componentDidMount === 'function') {
componentDidMount.call(this);
}
}; // Wrap the componentDidMount method.
useEffect(function () {
return function () {
var _parentRef$current;
instance.componentWillUnmount = function () {
// Call the original method.
if (typeof componentWillUnmount === 'function') {
componentWillUnmount.call(this);
} // Clear the parent.
parent.clear();
};
return parent;
return (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.clear();
};
}, []);
return parentRef.current;
}
function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$1() { 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; } }
/**
* It is a simple wrapper that generate internally a
* ParentFiber and allow to access it through a React.Ref.
* The children in which to enable reparenting must belong to this component.
* Create a reparentable Space. Only <Reparentables>s belonging to the same
* Space can send children to each other.
*/
var Parent = /*#__PURE__*/function (_Component) {
_inherits(Parent, _Component);
function createReparentableSpace() {
/** Reparentable map. */
var ReparentableMap = new Map();
/**
* Remove a child from a <Reparentable> component and add it to another <Reparentable> component.
* Return the index in which the child is added or -1 if the child is not found.
* The child to remove can be chosen by providing its key (string) or by providing its index (number).
* The position can be chosen by providing a key (string) or by providing an index (number).
* If a key (string) is provided the child will be added after the one with that key.
* The child is added at the bottom if none of the children have that key.
* If an index (number) is provided the child will be added in that position.
* The child is added at the bottom if -1 is provided or the index is greater than the number of children.
* The method will also try to send the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
*
* @param fromParentId - The id of the <Reparentable> from whuch to remove the child.
* @param toParentId - The id of the <Reparentable> in which to add the child.
* @param childSelector - The child selector.
* @param position - The position in which to add the child fiber.
* @param skipUpdate - Whether to send or not the elements.
* @returns - The position in which the child is sent or -1.
*/
var _super = _createSuper$1(Parent);
function sendReparentableChild(fromParentId, toParentId, childSelector, position, skipUpdate) {
// Get the ParetFiber instances.
var fromParent = ReparentableMap.get(fromParentId);
var toParent = ReparentableMap.get(toParentId);
function Parent() {
var _this;
_classCallCheck(this, Parent);
if (fromParent === undefined || toParent === undefined) {
return -1;
} // Send the child.
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "parent", new ParentFiber());
return _this;
return fromParent.sendChild(toParent, childSelector, position, skipUpdate);
}
/**
* This component generate internally a ParentFiber instance
* and allow to access it through a global provided map.
* This component must be the parent of the children to reparent
* (it is possible to get around this by providing a findFiber method).
*/
_createClass(Parent, [{
key: "componentDidMount",
/**
* The class instance contains the fiber data
* only after the component is mounted.
*/
value: function componentDidMount() {
var _this$props = this.props,
parentRef = _this$props.parentRef,
findFiber = _this$props.findFiber;
var fiber = getFiberFromClassInstance(this); // Ensure a ref is passed.
function Reparentable(_ref) {
var id = _ref.id,
children = _ref.children,
findFiber = _ref.findFiber;
var parent = useParent(findFiber);
useEffect(function () {
// Ensure the id is a string.
invariant(typeof id === 'string');
invariant(parentRef !== null && (typeof parentRef === 'function' || _typeof(parentRef) === 'object')); // Set the fiber.
this.parent.setFiber(fiber);
this.parent.setFinder(findFiber); // Set the ref.
ReparentableMap.set(id, parent);
return function () {
// Remove the ParentFiber instance from the map.
ReparentableMap["delete"](id); // Clear the ParentFiber instance.
if (typeof parentRef === 'function') {
parentRef(this.parent);
}
parent.clear();
};
}, []);
return children;
}
if (_typeof(parentRef) === 'object' && parentRef !== null) {
// The type of ref that is normally returned by useRef and createRef
// is not mutable, and the user may not know how to obtain a mutable one,
// causing annoying problems. Plus, it makes sense that this property is
// immutable, so I just use the refObject interface (and not
// the MutableRefObject interface) with the @ts-ignore.
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
parentRef.current = this.parent;
}
}
/** Update the findFiber method. */
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var findFiber = this.props.findFiber;
this.parent.setFinder(findFiber);
}
/**
* Clear on unmount.
*/
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.parent.clear();
}
/**
* Render only the children.
* In this way the component (and therefore its fiber)
* will be the direct parent of the children.
*/
}, {
key: "render",
value: function render() {
var children = this.props.children;
return children;
}
}]);
return Parent;
}(Component);
/* Parent props. */
function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$2() { 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; } }
/** Reparentable map. */
var ReparentableMap = new Map();
/**
* Remove a child fiber from a <Reparentable> component and add it to another <Reparentable> component.
* Return the index in which the child is added or -1 if the child is not found.
* The child to remove can be chosen by providing its key (string) or by providing its index (number).
* The position can be chosen by providing a key (string) or by providing an index (number).
* If a key (string) is provided the child will be added after the one with that key.
* The child is added at the bottom if none of the children have that key.
* If an index (number) is provided the child will be added in that position.
* The child is added at the bottom if -1 is provided or the index is greater than the number of children.
* The method will also try to send the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
*
* @param fromParentId - The id of the <Reparentable> from whuch to remove the child.
* @param toParentId - The id of the <Reparentable> in which to add the child.
* @param childSelector - The child fiber selector.
* @param position - The position in which to add the child fiber.
* @param skipUpdate - Whether to send or not the elements.
* @returns - The position in which the child fiber is sent or -1.
*/
function sendReparentableChild(fromParentId, toParentId, childSelector, position, skipUpdate) {
// Get the ParetFiber instances.
var fromParent = ReparentableMap.get(fromParentId);
var toParent = ReparentableMap.get(toParentId);
if (fromParent === undefined || toParent === undefined) {
return -1;
} // Send the child.
return fromParent.sendChild(toParent, childSelector, position, skipUpdate);
return {
Reparentable: Reparentable,
sendReparentableChild: sendReparentableChild,
ReparentableMap: ReparentableMap
};
}
/**
* This component generate internally a
* ParentFiber and allow to access it through a global provided map.
* This component must be the parent of the children to reparent
* (it is possible to get around this by providing a findFiber method).
*/
var Reparentable = /*#__PURE__*/function (_Component) {
_inherits(Reparentable, _Component);
var _super = _createSuper$2(Reparentable);
function Reparentable() {
var _this;
_classCallCheck(this, Reparentable);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "parent", new ParentFiber());
return _this;
}
_createClass(Reparentable, [{
key: "componentDidMount",
/**
* The class instance contains the fiber data
* only after the component did mount.
*/
value: function componentDidMount() {
var _this$props = this.props,
id = _this$props.id,
findFiber = _this$props.findFiber;
var fiber = getFiberFromClassInstance(this); // Ensure the id is a string.
invariant(typeof id === 'string'); // Set the fiber.
this.parent.setFiber(fiber);
this.parent.setFinder(findFiber);
ReparentableMap.set(id, this.parent);
}
/**
* Update the findFiber method.
*/
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
var findFiber = this.props.findFiber;
this.parent.setFinder(findFiber);
}
/**
* Clear on unmount.
*/
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var id = this.props.id; // Remove the ParentFiber instance from the map.
ReparentableMap["delete"](id); // Clear the ParentFiber instance.
this.parent.clear();
}
/**
* Render only the children.
* In this way the component (and therefore its fiber)
* will be the direct parent of the children.
*/
}, {
key: "render",
value: function render() {
var children = this.props.children;
return children;
}
}]);
return Reparentable;
}(Component);
/* Reparentable props. */
/**
* An hook to get a ParentFiber instance in a function component.
* The ref returned must reference the element that is the parent
* of the children to reparent (it is possible to get around this by providing a findFiber method).
*
* @param findFiber - Get a different parent fiber.
* @returns - The ParentFiber instance.
*/
function useParent(ref, findFiber) {
// The parent instance.
var parentRef = useRef(null); // Generate the instance.
if (parentRef.current === null) {
parentRef.current = new ParentFiber();
} // Get a reference.
var parent = parentRef.current;
parent.setFinder(findFiber); // When the component is mounted the fiber is set.
useEffect(function () {
invariant(ref.current !== null && ref.current !== undefined); // The element fiber.
parent.setFiber(getFiberFromElementInstance(ref.current)); // Clean up.
return function () {
parent.clear();
};
}, []);
return parent;
}
export { Env, Parent, ParentFiber, Reparentable, ReparentableMap, addChild, addChildFiberAt, addChildFiberBefore, addSiblingFiber, appendChildFiber, configure, createParent, findChildFiber, findChildFiberAt, findPreviousFiber, findSiblingFiber, getCurrentFiber, getFiberFromClassInstance, getFiberFromElementInstance, prependChildFiber, removeChild, removeChildFiber, removeChildFiberAt, removeFirstChildFiber, removeSiblingFiber, searchFiber, sendReparentableChild, updateFiberDebugFields, updateFibersIndex, useParent };
export { Env, ParentFiber, addChild, addChildFiberAt, addChildFiberBefore, addSiblingFiber, appendChildFiber, configure, createReparentableSpace, findChildFiber, findChildFiberAt, findPreviousFiber, findSiblingFiber, getCurrentFiber, getCurrentOwner, getFiberFromPath, prependChildFiber, removeChild, removeChildFiber, removeChildFiberAt, removeFirstChildFiber, removeSiblingFiber, updateFibersIndex, useParent };

16

dist/types/core/addChild.d.ts
import type { Fiber } from 'react-reconciler';
/**
* Add a child fiber in a parent fiber and return the index in which it is added.
* The position can be chosen by providing a key (string) or by providing an index (number).
* Add a child in a parent and return the index in which it is added.
* The position of the child can be chosen by providing a key (string) or an index (number).
* If a key (string) is provided the child will be added after the one with that key.

@@ -10,11 +10,11 @@ * The child is added at the bottom if none of the children have that key.

* than the number of children.
* The method will also try to add the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
* The method will also try to add the elements connected to the child (e.g. DOM elements),
* it is possible to disable this function using the skipUpdate parameter.
*
* @param parent - The parent fiber in which to add the child fiber.
* @param child - The child fiber to add.
* @param position - The position in which to add the child fiber.
* @param parent - The parent in which to add the child.
* @param child - The child to add.
* @param position - The position in which to add the child.
* @param skipUpdate - Whether to add or not the elements.
* @returns - The index in which the child fiber is added.
* @returns - The index in which the child is added.
*/
export declare function addChild(parent: Fiber, child: Fiber, position: string | number, skipUpdate?: boolean): number;

15

dist/types/core/removeChild.d.ts
import type { Fiber } from 'react-reconciler';
/**
* Remove a child fiber from its parent fiber and return it.
* The child to remove can be chosen by providing its key (string) or by
* providing its index (number).
* The method will also try to remove the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
* Remove a child from its parent and return it.
* The child to remove can be chosen by providing its key (string) or its index (number).
* The method will also try to remove the elements connected to the child (e.g. DOM elements),
* it is possible to disable this function using the skipUpdate parameter.
* If the child is not found null is returned.
*
* @param parent - The parent fiber from which to remove the child fiber.
* @param childSelector - The child fiber selector.
* @param parent - The parent from which to remove the child.
* @param childSelector - The child selector.
* @param skipUpdate - Whether to add or not the elements.
* @returns - The removed child fiber or null.
* @returns - The removed child or null.
*/
export declare function removeChild(parent: Fiber, childSelector: string | number, skipUpdate?: boolean): Fiber | null;

4

dist/types/env/env.d.ts

@@ -28,3 +28,3 @@ export interface ENV<Instance> {

* @param type - The element type.
* @param stateNode - The fiber state node.
* @param stateNode - The state node.
* @returns - If the given type is a valid element type.

@@ -44,2 +44,2 @@ */

*/
export declare function configure<T>(configuration: Partial<ENV<T>>): void;
export declare function configure<T>(configuration: Partial<ENV<T>>): ENV<T>;

16

dist/types/fiber/updateFiber.d.ts
import type { Fiber } from 'react-reconciler';
/**
* Update the indices of a fiber and its siblings.
* return the last sibling index.
* Return the last sibling index.
*

@@ -11,15 +11,1 @@ * @param fiber - The fiber.

export declare function updateFibersIndex(fiber: Fiber, index: number): number;
/**
* Update the debug fields.
* I have not yet inquired about how the _debug fields are chosen.
* For now only the owner and source are set based on the siblings/parent fields.
* TODO:
* - _debugID: does it need to be changed?
* - _debugHookTypes: does it need to be changed?
* - _debugSource: is it ok like this?
* - _debugOwner: is it ok like this?
*
* @param child - The child fiber.
* @param parent - The parent fiber.
*/
export declare function updateFiberDebugFields(child: Fiber, parent: Fiber): void;

8

dist/types/index.d.ts
export * from './core/addChild';
export * from './core/removeChild';
export * from './env/env';
export * from './react/createParent';
export * from './react/Parent';
export * from './react/currentFiber';
export * from './react/parentFiber';

@@ -10,6 +9,5 @@ export * from './react/Reparentable';

export * from './fiber/addFiber';
export * from './fiber/findFIber';
export * from './fiber/getFIber';
export * from './fiber/findFiber';
export * from './fiber/getFiber';
export * from './fiber/removeFiber';
export * from './fiber/searchFiber';
export * from './fiber/updateFiber';

8

dist/types/react/parentFiber.d.ts

@@ -12,2 +12,6 @@ import type { Fiber } from 'react-reconciler';

/**
* @param fiber - The parent fiber to manage.
*/
constructor(fiber?: Fiber);
/**
* Parent fiber setter.

@@ -74,3 +78,3 @@ *

*
* @param toParentFiber - The ParentFiber instance in which to send the child fiber.
* @param toParent - The ParentFiber instance in which to send the child fiber.
* @param childSelector - The child fiber selector.

@@ -81,3 +85,3 @@ * @param position - The position in which to add the child fiber.

*/
sendChild(toParentFiber: ParentFiber, childSelector: string | number, position: string | number, skipUpdate?: boolean): number;
sendChild(toParent: ParentFiber, childSelector: string | number, position: string | number, skipUpdate?: boolean): number;
/**

@@ -84,0 +88,0 @@ * Clear the parent fiber.

57

dist/types/react/Reparentable.d.ts

@@ -1,56 +0,13 @@

import { Component } from 'react';
import type { ReactElement } from 'react';
import type { Fiber } from 'react-reconciler';
import { ParentFiber } from './parentFiber';
/** Reparentable map. */
export declare const ReparentableMap: Map<string, ParentFiber>;
/**
* Remove a child fiber from a <Reparentable> component and add it to another <Reparentable> component.
* Return the index in which the child is added or -1 if the child is not found.
* The child to remove can be chosen by providing its key (string) or by providing its index (number).
* The position can be chosen by providing a key (string) or by providing an index (number).
* If a key (string) is provided the child will be added after the one with that key.
* The child is added at the bottom if none of the children have that key.
* If an index (number) is provided the child will be added in that position.
* The child is added at the bottom if -1 is provided or the index is greater than the number of children.
* The method will also try to send the elements connected to the fibers (e.g. DOM elements),
* to disable this function you can use the skipUpdate parameter.
*
* @param fromParentId - The id of the <Reparentable> from whuch to remove the child.
* @param toParentId - The id of the <Reparentable> in which to add the child.
* @param childSelector - The child fiber selector.
* @param position - The position in which to add the child fiber.
* @param skipUpdate - Whether to send or not the elements.
* @returns - The position in which the child fiber is sent or -1.
* Create a reparentable Space. Only <Reparentables>s belonging to the same
* Space can send children to each other.
*/
export declare function sendReparentableChild(fromParentId: string, toParentId: string, childSelector: string | number, position: string | number, skipUpdate?: boolean): number;
/**
* This component generate internally a
* ParentFiber and allow to access it through a global provided map.
* This component must be the parent of the children to reparent
* (it is possible to get around this by providing a findFiber method).
*/
export declare class Reparentable extends Component<ReparentableProps> {
/** The ParentFiber instance. */
parent: ParentFiber;
/**
* The class instance contains the fiber data
* only after the component did mount.
*/
componentDidMount(): void;
/**
* Update the findFiber method.
*/
componentDidUpdate(): void;
/**
* Clear on unmount.
*/
componentWillUnmount(): void;
/**
* Render only the children.
* In this way the component (and therefore its fiber)
* will be the direct parent of the children.
*/
render(): ReactElement[] | ReactElement | null;
}
export declare function createReparentableSpace(): {
Reparentable: ({ id, children, findFiber }: ReparentableProps) => any;
sendReparentableChild: (fromParentId: string, toParentId: string, childSelector: string | number, position: string | number, skipUpdate?: boolean | undefined) => number;
ReparentableMap: Map<string, ParentFiber>;
};
export interface ReparentableProps {

@@ -57,0 +14,0 @@ /** The reparentable id. */

5

dist/types/react/useParent.d.ts

@@ -1,2 +0,1 @@

import type { RefObject } from 'react';
import type { Fiber } from 'react-reconciler';

@@ -10,4 +9,4 @@ import { ParentFiber } from './parentFiber';

* @param findFiber - Get a different parent fiber.
* @returns - The ParentFiber instance.
* @returns - The ParentFiber instance.
*/
export declare function useParent<T>(ref: RefObject<T>, findFiber?: (fiber: Fiber) => Fiber): ParentFiber;
export declare function useParent(findFiber?: (fiber: Fiber) => Fiber): ParentFiber;

52

package.json
{
"name": "react-reparenting",
"version": "0.4.0",
"version": "0.5.0",
"description": "The reparenting tools for React",

@@ -43,15 +43,15 @@ "main": "dist/react-reparenting.cjs.js",

"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@rollup/plugin-node-resolve": "^7.1.1",
"@rollup/plugin-replace": "^2.3.2",
"@babel/core": "^7.11.6",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@rollup/plugin-node-resolve": "^7.1.3",
"@rollup/plugin-replace": "^2.3.3",
"@rollup/plugin-strip": "^1.3.3",
"@types/enzyme": "^3.10.5",
"@types/jest": "^25.2.3",
"@types/react": "^16.9.35",
"@types/enzyme": "^3.10.7",
"@types/jest": "^26.0.14",
"@types/react": "^16.9.49",
"@types/react-reconciler": "^0.18.0",

@@ -61,24 +61,24 @@ "@typescript-eslint/eslint-plugin": "^2.34.0",

"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-adapter-react-16": "^1.15.5",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-typescript": "^2.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jest": "^23.13.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.20.0",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^23.20.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.2",
"eslint-plugin-react-hooks": "^3.0.0",
"jest": "^25.5.4",
"prettier": "^2.0.5",
"prettier": "^2.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"rollup": "^2.10.8",
"rollup": "2.26.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-terser": "^5.3.0",
"typescript": "^3.9.3"
"rollup-plugin-terser": "^5.3.1",
"typescript": "^4.0.3"
},
"dependencies": {
"@babel/runtime": "^7.9.6"
"@babel/runtime": "^7.11.2"
},

@@ -85,0 +85,0 @@ "peerDependencies": {

dist/types/fiber/findFIber.d.ts
dist/types/fiber/getFIber.d.ts
dist/types/fiber/searchFiber.d.ts
dist/types/react/createParent.d.ts
dist/types/react/Parent.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc