anu-verzum 1.22.1 → 1.23.1

package/README.md

@@ -4,7 +4,7 @@
 
 <h3>@author: <strong>Anubis-programmer</strong></h3>
 <h3>@license: <strong>MIT</strong></h3>
-<h3>@version: <strong>1.22.1</strong></h3>
+<h3>@version: <strong>1.23.1</strong></h3>
 
 <br>
 

package/dist/core/elements.d.ts

@@ -12,7 +12,9 @@ export type Ref<T> = {
 };
 export type FunctionComponent<P extends Props = Props> = (props: P) => AnuElement<any, any> | AnuElement<any, any>[] | string | number | boolean | null | undefined;
 export type ComponentConstructor<P extends Props = Props> = new (props: P, context?: Record<string, any>) => any;
-export type ElementType = string | FunctionComponent<any> | ComponentConstructor<any>;
+export declare const PORTAL_ELEMENT: unique symbol;
+export type PortalElementType = typeof PORTAL_ELEMENT;
+export type ElementType = string | FunctionComponent<any> | ComponentConstructor<any> | PortalElementType;
 export type AnuElement<P = Props, T extends ElementType = ElementType> = {
     type: T;
     props: P;

package/dist/core/elements.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createElement = exports.TEXT_ELEMENT = void 0;
+exports.createElement = exports.TEXT_ELEMENT = exports.PORTAL_ELEMENT = void 0;
 const TEXT_ELEMENT = exports.TEXT_ELEMENT = 'TEXT_ELEMENT';
+const PORTAL_ELEMENT = exports.PORTAL_ELEMENT = Symbol('portal');
 const createTextElement = value => ({
   type: TEXT_ELEMENT,
   props: {

package/dist/core/reconciler.d.ts

@@ -1,5 +1,6 @@
-import { AnuElement, Ref } from './elements';
+import { AnuElement, AnuNode, Ref } from './elements';
 export declare const createRef: <T = any>() => Ref<T>;
+export declare const createPortal: (children: AnuNode, container: Element) => AnuElement;
 export declare const scheduleUpdate: (instance: any, partialState: Record<string, any>, partialStateCallback?: (prevState: any, prevProps: any) => any) => void;
 export declare const render: (elements: AnuElement | AnuElement[], containerDom: Element) => void;
 export declare const unmountComponentAtNode: (containerDom: Element) => void;

package/dist/core/reconciler.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unmountComponentAtNode = exports.scheduleUpdate = exports.render = exports.createRef = exports.__testing = void 0;
+exports.unmountComponentAtNode = exports.scheduleUpdate = exports.render = exports.createRef = exports.createPortal = exports.__testing = void 0;
 var _domUtils = require("./domUtils");
+var _elements = require("./elements");
 const HOST_COMPONENT = 'host';
 const CLASS_COMPONENT = 'class';
 const FUNCTION_COMPONENT = 'function';
 const HOST_ROOT = 'root';
+const PORTAL = 'portal';
 const PLACEMENT = 1;
 const DELETION = 2;
 const UPDATE = 3;
@@ -82,10 +84,16 @@ const beginWork = wipFiber => {
     updateClassComponent(wipFiber);
   } else if (wipFiber.tag === FUNCTION_COMPONENT) {
     updateFunctionComponent(wipFiber);
+  } else if (wipFiber.tag === PORTAL) {
+    updatePortalComponent(wipFiber);
   } else {
     updateHostComponent(wipFiber);
   }
 };
+const updatePortalComponent = wipFiber => {
+  wipFiber.stateNode = wipFiber.props.container;
+  reconcileChildrenArray(wipFiber, wipFiber.props.children);
+};
 const updateHostComponent = wipFiber => {
   if (!wipFiber.stateNode) {
     wipFiber.stateNode = (0, _domUtils.createDomElement)(wipFiber);
@@ -157,6 +165,9 @@ const updateClassComponent = wipFiber => {
 };
 const arrify = val => !val ? [] : Array.isArray(val) ? val : [val];
 const getTag = element => {
+  if (element.type === _elements.PORTAL_ELEMENT) {
+    return PORTAL;
+  }
   if (typeof element.type === 'string') {
     return HOST_COMPONENT;
   }
@@ -231,6 +242,9 @@ const reconcileChildrenArray = (wipFiber, newChildElements) => {
   });
 };
 const getFirstHostNode = fiber => {
+  if (fiber.tag === PORTAL) {
+    return null;
+  }
   if (fiber.tag === HOST_COMPONENT) {
     return fiber.stateNode ? fiber.stateNode : null;
   }
@@ -407,6 +421,19 @@ const commitDeletion = (fiber, domParent) => {
       node = node.child;
       continue;
     }
+    if (node.tag === PORTAL) {
+      if (node.child) {
+        commitDeletion(node.child, node.stateNode);
+      }
+      while (node !== fiber && !node.sibling) {
+        node = node.parent;
+      }
+      if (node === fiber) {
+        return;
+      }
+      node = node.sibling;
+      continue;
+    }
     if (domParent.contains(node.stateNode)) {
       domParent.removeChild(node.stateNode);
     }
@@ -423,6 +450,16 @@ const createRef = () => ({
   current: null
 });
 exports.createRef = createRef;
+const createPortal = (children, container) => ({
+  type: _elements.PORTAL_ELEMENT,
+  props: {
+    children,
+    container
+  },
+  key: null,
+  ref: null
+});
+exports.createPortal = createPortal;
 const scheduleUpdate = (instance, partialState, partialStateCallback) => {
   const updateFiber = {
     from: CLASS_COMPONENT,

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import Utils from './misc/utils';
 import ServerAPI from './server-api/server-api';
 import { createElement, AnuElement, Props, Ref } from './core/elements';
-import { createRef, render } from './core/reconciler';
+import { createRef, render, createPortal } from './core/reconciler';
 import store from './store/store';
 import { createContext } from './core/components/Context';
 import { Component } from './core/components/Component';
@@ -29,6 +29,7 @@ declare const Anu: {
     };
     createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => import("./core/components/Context").Context<T>;
     createElement: (type: import(".").ElementType, config: Props | null, ...args: any[]) => AnuElement;
+    createPortal: (children: import(".").AnuNode, container: Element) => AnuElement;
     createRef: <T = any>() => Ref<T>;
     Component: typeof Component;
     Fragment: typeof Fragment;
@@ -156,7 +157,7 @@ export type { AnuElement, AnuChild, AnuNode, AnuCSSProperties, Props, Ref, Funct
 export type { ContextValue, ConsumerProps } from './core/components/Context';
 export type { Action, ThunkAction, Dispatch, Reducer, MiddlewareAPI, Middleware, Store, SelectorFn, CreateSelectorFn } from './store/store';
 export type { ApiSuccessResponse, ApiErrorResponse } from './server-api/server-api';
-export { Component, Fragment, createElement, createRef, createContext, render, goTo };
+export { Component, Fragment, createElement, createRef, createPortal, createContext, render, goTo };
 export { AnulyticsProvider, trackEvent };
 export { store, ServerAPI, Utils, Connector, Feature, History, Intl };
 export type { AbbreviateNumberOptions } from './core/components/Intl';

package/dist/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "createElement", {
     return _elements.createElement;
   }
 });
+Object.defineProperty(exports, "createPortal", {
+  enumerable: true,
+  get: function () {
+    return _reconciler.createPortal;
+  }
+});
 Object.defineProperty(exports, "createRef", {
   enumerable: true,
   get: function () {
@@ -138,6 +144,7 @@ const Anu = {
   },
   createContext: _Context.createContext,
   createElement: _elements.createElement,
+  createPortal: _reconciler.createPortal,
   createRef: _reconciler.createRef,
   Component: _Component.Component,
   Fragment: _Fragment.Fragment,

package/dist/testing/__tests__/smoke.test.js

@@ -157,6 +157,58 @@ describe('waitFor', () => {
     })).rejects.toThrow();
   });
 });
+describe('createPortal', () => {
+  let portalContainer;
+  beforeEach(() => {
+    portalContainer = document.createElement('div');
+    document.body.appendChild(portalContainer);
+  });
+  afterEach(() => {
+    if (portalContainer.parentNode) {
+      portalContainer.parentNode.removeChild(portalContainer);
+    }
+  });
+  const Portal = () => (0, _index.createPortal)(_index.default.createElement('p', {}, 'Portal content'), portalContainer);
+  test('renders content into the portal container, not the render container', () => {
+    const {
+      queryByText
+    } = (0, _index2.render)(_index.default.createElement(Portal, {}));
+    expect(portalContainer.textContent).toBe('Portal content');
+    expect(queryByText('Portal content')).toBeNull();
+  });
+  test('within() finds portal content', () => {
+    (0, _index2.render)(_index.default.createElement(Portal, {}));
+    expect((0, _index2.within)(portalContainer).getByText('Portal content')).toBeDefined();
+  });
+  test('portal content is removed from the container on unmount', () => {
+    const {
+      unmount
+    } = (0, _index2.render)(_index.default.createElement(Portal, {}));
+    expect(portalContainer.textContent).toBe('Portal content');
+    unmount();
+    expect(portalContainer.textContent).toBe('');
+  });
+  test('portal content updates when parent state changes', () => {
+    class PortalParent extends _index.Component {
+      state = {
+        label: 'before'
+      };
+      render() {
+        return _index.default.createElement('div', {}, _index.default.createElement('button', {
+          onClick: () => this.setState({
+            label: 'after'
+          })
+        }, 'update'), (0, _index.createPortal)(_index.default.createElement('p', {}, this.state.label), portalContainer));
+      }
+    }
+    const {
+      getByRole
+    } = (0, _index2.render)(_index.default.createElement(PortalParent, {}));
+    expect((0, _index2.within)(portalContainer).getByText('before')).toBeDefined();
+    _index2.fireEvent.click(getByRole('button'));
+    expect((0, _index2.within)(portalContainer).getByText('after')).toBeDefined();
+  });
+});
 describe('act', () => {
   test('flushes state updates synchronously', () => {
     const {

package/dist/testing/index.d.ts

@@ -5,5 +5,5 @@ export { waitFor, waitForElementToBeRemoved } from './waitFor';
 export { fireEvent } from './events/fireEvent';
 export { userEvent } from './events/userEvent';
 export { renderWithStore, renderWithRouter, renderWithIntl, renderWithContext } from './wrappers';
-export { buildQueries } from './queries/index';
+export { buildQueries, within } from './queries/index';
 export type { RenderOptions, RenderResult, BoundQueries, BoundQuery, ByRoleOptions, TextMatch, WaitForOptions, } from './types';

package/dist/testing/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "waitForElementToBeRemoved", {
     return _waitFor.waitForElementToBeRemoved;
   }
 });
+Object.defineProperty(exports, "within", {
+  enumerable: true,
+  get: function () {
+    return _index.within;
+  }
+});
 var _render = require("./render");
 var _act = require("./act");
 var _cleanup = require("./cleanup");

package/dist/testing/queries/index.d.ts

@@ -1,2 +1,3 @@
 import type { BoundQueries } from '../types';
+export declare const within: (element: Element) => BoundQueries;
 export declare const buildQueries: (container: Element) => BoundQueries;

package/dist/testing/queries/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildQueries = void 0;
+exports.within = exports.buildQueries = void 0;
 var _byText = require("./byText");
 var _byRole = require("./byRole");
 var _byLabelText = require("./byLabelText");
@@ -11,6 +11,8 @@ var _byPlaceholderText = require("./byPlaceholderText");
 var _byTestId = require("./byTestId");
 var _byTitle = require("./byTitle");
 var _byAltText = require("./byAltText");
+const within = element => buildQueries(element);
+exports.within = within;
 const buildQueries = container => ({
   getByText: text => (0, _byText.createByTextQueries)(container, text).get(),
   queryByText: text => (0, _byText.createByTextQueries)(container, text).query(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anu-verzum",
-  "version": "1.22.1",
+  "version": "1.23.1",
   "description": "A \"React-like\" UI library that supports JSX syntax, Redux-like state management, array-rendering, i18n, routing and many more.",
   "keywords": [
     "anu-verzum",