Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@wordpress/element
Advanced tools
@wordpress/element - npm Package Compare versions
Comparing version 1.0.4 to 2.0.0
@@ -1,3 +0,3 @@ | ||
| import _objectSpread from "@babel/runtime-corejs2/helpers/objectSpread"; | ||
| import _objectWithoutProperties from "@babel/runtime-corejs2/helpers/objectWithoutProperties"; | ||
| import _objectSpread from "@babel/runtime/helpers/esm/objectSpread"; | ||
| import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; | ||
@@ -4,0 +4,0 @@ /** |
@@ -1,4 +0,3 @@ | ||
| import _objectSpread from "@babel/runtime-corejs2/helpers/objectSpread"; | ||
| import _objectWithoutProperties from "@babel/runtime-corejs2/helpers/objectWithoutProperties"; | ||
| import "core-js/modules/web.dom.iterable"; | ||
| import _objectSpread from "@babel/runtime/helpers/esm/objectSpread"; | ||
| import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; | ||
@@ -5,0 +4,0 @@ /** |
@@ -1,8 +0,4 @@ | ||
| import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign"; | ||
| import _objectSpread from "@babel/runtime-corejs2/helpers/objectSpread"; | ||
| import _objectWithoutProperties from "@babel/runtime-corejs2/helpers/objectWithoutProperties"; | ||
| import "core-js/modules/es6.regexp.to-string"; | ||
| import _typeof from "@babel/runtime-corejs2/helpers/typeof"; | ||
| import "core-js/modules/es6.regexp.replace"; | ||
| import _Set from "@babel/runtime-corejs2/core-js/set"; | ||
| import _objectSpread from "@babel/runtime/helpers/esm/objectSpread"; | ||
| import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; | ||
| import _typeof from "@babel/runtime/helpers/esm/typeof"; | ||
@@ -44,3 +40,8 @@ /** | ||
| import { Fragment, RawHTML } from './'; | ||
| import { createContext, Fragment, StrictMode } from './react'; | ||
| import RawHTML from './raw-html'; | ||
| var _createContext = createContext(), | ||
| Provider = _createContext.Provider, | ||
| Consumer = _createContext.Consumer; | ||
| /** | ||
@@ -52,3 +53,4 @@ * Valid attribute types. | ||
| var ATTRIBUTES_TYPES = new _Set(['string', 'boolean', 'number']); | ||
| var ATTRIBUTES_TYPES = new Set(['string', 'boolean', 'number']); | ||
| /** | ||
@@ -60,3 +62,3 @@ * Element tags which can be self-closing. | ||
| var SELF_CLOSING_TAGS = new _Set(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']); | ||
| var SELF_CLOSING_TAGS = new Set(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']); | ||
| /** | ||
@@ -78,3 +80,3 @@ * Boolean attributes are attributes whose presence as being assigned is | ||
| var BOOLEAN_ATTRIBUTES = new _Set(['allowfullscreen', 'allowpaymentrequest', 'allowusermedia', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'defer', 'disabled', 'formnovalidate', 'hidden', 'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'selected', 'typemustmatch']); | ||
| var BOOLEAN_ATTRIBUTES = new Set(['allowfullscreen', 'allowpaymentrequest', 'allowusermedia', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'defer', 'disabled', 'formnovalidate', 'hidden', 'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'selected', 'typemustmatch']); | ||
| /** | ||
@@ -101,3 +103,3 @@ * Enumerated attributes are attributes which must be of a specific value form. | ||
| var ENUMERATED_ATTRIBUTES = new _Set(['autocapitalize', 'autocomplete', 'charset', 'contenteditable', 'crossorigin', 'decoding', 'dir', 'draggable', 'enctype', 'formenctype', 'formmethod', 'http-equiv', 'inputmode', 'kind', 'method', 'preload', 'scope', 'shape', 'spellcheck', 'translate', 'type', 'wrap']); | ||
| var ENUMERATED_ATTRIBUTES = new Set(['autocapitalize', 'autocomplete', 'charset', 'contenteditable', 'crossorigin', 'decoding', 'dir', 'draggable', 'enctype', 'formenctype', 'formmethod', 'http-equiv', 'inputmode', 'kind', 'method', 'preload', 'scope', 'shape', 'spellcheck', 'translate', 'type', 'wrap']); | ||
| /** | ||
@@ -122,3 +124,3 @@ * Set of CSS style properties which support assignment of unitless numbers. | ||
| var CSS_PROPERTIES_SUPPORTS_UNITLESS = new _Set(['animation', 'animationIterationCount', 'baselineShift', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'columnCount', 'cx', 'cy', 'fillOpacity', 'flexGrow', 'flexShrink', 'floodOpacity', 'fontWeight', 'gridColumnEnd', 'gridColumnStart', 'gridRowEnd', 'gridRowStart', 'lineHeight', 'opacity', 'order', 'orphans', 'r', 'rx', 'ry', 'shapeImageThreshold', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'widows', 'x', 'y', 'zIndex', 'zoom']); | ||
| var CSS_PROPERTIES_SUPPORTS_UNITLESS = new Set(['animation', 'animationIterationCount', 'baselineShift', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'columnCount', 'cx', 'cy', 'fillOpacity', 'flexGrow', 'flexShrink', 'floodOpacity', 'fontWeight', 'gridColumnEnd', 'gridColumnStart', 'gridRowEnd', 'gridRowStart', 'lineHeight', 'opacity', 'order', 'orphans', 'r', 'rx', 'ry', 'shapeImageThreshold', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'widows', 'x', 'y', 'zIndex', 'zoom']); | ||
| /** | ||
@@ -326,4 +328,5 @@ * Regular expression matching invalid attribute names. | ||
| * | ||
| * @param {WPElement} element Element to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {WPElement} element Element to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
@@ -334,4 +337,4 @@ * @return {string} Serialized element. | ||
| export function renderElement(element) { | ||
| var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| export function renderElement(element, context) { | ||
| var legacyContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
@@ -343,3 +346,3 @@ if (null === element || undefined === element || false === element) { | ||
| if (Array.isArray(element)) { | ||
| return renderChildren(element, context); | ||
| return renderChildren(element, context, legacyContext); | ||
| } | ||
@@ -355,8 +358,9 @@ | ||
| var tagName = element.type, | ||
| var type = element.type, | ||
| props = element.props; | ||
| switch (tagName) { | ||
| switch (type) { | ||
| case StrictMode: | ||
| case Fragment: | ||
| return renderChildren(props.children, context); | ||
| return renderChildren(props.children, context, legacyContext); | ||
@@ -371,17 +375,25 @@ case RawHTML: | ||
| } | ||
| }), context); | ||
| }), context, legacyContext); | ||
| } | ||
| switch (_typeof(tagName)) { | ||
| switch (_typeof(type)) { | ||
| case 'string': | ||
| return renderNativeComponent(tagName, props, context); | ||
| return renderNativeComponent(type, props, context, legacyContext); | ||
| case 'function': | ||
| if (tagName.prototype && typeof tagName.prototype.render === 'function') { | ||
| return renderComponent(tagName, props, context); | ||
| if (type.prototype && typeof type.prototype.render === 'function') { | ||
| return renderComponent(type, props, context, legacyContext); | ||
| } | ||
| return renderElement(tagName(props, context), context); | ||
| return renderElement(type(props, legacyContext), context, legacyContext); | ||
| } | ||
| switch (type && type.$$typeof) { | ||
| case Provider.$$typeof: | ||
| return renderChildren(props.children, props.value, legacyContext); | ||
| case Consumer.$$typeof: | ||
| return renderElement(props.children(context || type._currentValue), context, legacyContext); | ||
| } | ||
| return ''; | ||
@@ -392,6 +404,7 @@ } | ||
| * | ||
| * @param {?string} type Native component type to serialize, or null if | ||
| * rendering as fragment of children content. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?string} type Native component type to serialize, or null if | ||
| * rendering as fragment of children content. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
@@ -401,4 +414,4 @@ * @return {string} Serialized element. | ||
| export function renderNativeComponent(type, props) { | ||
| var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| export function renderNativeComponent(type, props, context) { | ||
| var legacyContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; | ||
| var content = ''; | ||
@@ -410,3 +423,3 @@ | ||
| // as well. | ||
| content = renderChildren(props.value, context); | ||
| content = renderChildren(props.value, context, legacyContext); | ||
| props = omit(props, 'value'); | ||
@@ -417,3 +430,3 @@ } else if (props.dangerouslySetInnerHTML && typeof props.dangerouslySetInnerHTML.__html === 'string') { | ||
| } else if (typeof props.children !== 'undefined') { | ||
| content = renderChildren(props.children, context); | ||
| content = renderChildren(props.children, context, legacyContext); | ||
| } | ||
@@ -436,5 +449,6 @@ | ||
| * | ||
| * @param {Function} Component Component type to serialize. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {Function} Component Component type to serialize. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
@@ -444,11 +458,11 @@ * @return {string} Serialized element | ||
| export function renderComponent(Component, props) { | ||
| var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| var instance = new Component(props, context); | ||
| export function renderComponent(Component, props, context) { | ||
| var legacyContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; | ||
| var instance = new Component(props, legacyContext); | ||
| if (typeof instance.getChildContext === 'function') { | ||
| _Object$assign(context, instance.getChildContext()); | ||
| Object.assign(legacyContext, instance.getChildContext()); | ||
| } | ||
| var html = renderElement(instance.render(), context); | ||
| var html = renderElement(instance.render(), context, legacyContext); | ||
| return html; | ||
@@ -459,4 +473,5 @@ } | ||
| * | ||
| * @param {Array} children Children to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {Array} children Children to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
@@ -466,4 +481,4 @@ * @return {string} Serialized children. | ||
| function renderChildren(children) { | ||
| var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| function renderChildren(children, context) { | ||
| var legacyContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| var result = ''; | ||
@@ -474,3 +489,3 @@ children = castArray(children); | ||
| var child = children[i]; | ||
| result += renderElement(child, context); | ||
| result += renderElement(child, context, legacyContext); | ||
| } | ||
@@ -477,0 +492,0 @@ |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault"); | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property"); | ||
| var _Object$keys = require("@babel/runtime-corejs2/core-js/object/keys"); | ||
| require("core-js/modules/web.dom.iterable"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -33,7 +27,6 @@ value: true | ||
| _Object$keys(_react).forEach(function (key) { | ||
| Object.keys(_react).forEach(function (key) { | ||
| if (key === "default" || key === "__esModule") return; | ||
| if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
| _Object$defineProperty(exports, key, { | ||
| Object.defineProperty(exports, key, { | ||
| enumerable: true, | ||
@@ -48,7 +41,6 @@ get: function get() { | ||
| _Object$keys(_reactPlatform).forEach(function (key) { | ||
| Object.keys(_reactPlatform).forEach(function (key) { | ||
| if (key === "default" || key === "__esModule") return; | ||
| if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
| _Object$defineProperty(exports, key, { | ||
| Object.defineProperty(exports, key, { | ||
| enumerable: true, | ||
@@ -55,0 +47,0 @@ get: function get() { |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault"); | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectSpread")); | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectWithoutProperties")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
@@ -15,0 +15,0 @@ var _react = require("./react"); |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault"); | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
@@ -71,8 +71,6 @@ Object.defineProperty(exports, "__esModule", { | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectSpread")); | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectWithoutProperties")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
| require("core-js/modules/web.dom.iterable"); | ||
| var _react = require("react"); | ||
@@ -79,0 +77,0 @@ |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault"); | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| require("core-js/modules/es6.string.starts-with"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -22,20 +20,14 @@ value: true | ||
| var _assign = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/assign")); | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread")); | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectSpread")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectWithoutProperties")); | ||
| var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); | ||
| require("core-js/modules/es6.regexp.to-string"); | ||
| var _lodash = require("lodash"); | ||
| var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/typeof")); | ||
| var _react = require("./react"); | ||
| require("core-js/modules/es6.regexp.replace"); | ||
| var _rawHtml = _interopRequireDefault(require("./raw-html")); | ||
| var _set = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/set")); | ||
| var _lodash = require("lodash"); | ||
| var _ = require("./"); | ||
| /** | ||
@@ -75,3 +67,5 @@ * Parts of this source were derived and modified from fast-react-render, | ||
| */ | ||
| var _createContext = (0, _react.createContext)(), | ||
| Provider = _createContext.Provider, | ||
| Consumer = _createContext.Consumer; | ||
| /** | ||
@@ -82,3 +76,5 @@ * Valid attribute types. | ||
| */ | ||
| var ATTRIBUTES_TYPES = new _set.default(['string', 'boolean', 'number']); | ||
| var ATTRIBUTES_TYPES = new Set(['string', 'boolean', 'number']); | ||
| /** | ||
@@ -90,3 +86,3 @@ * Element tags which can be self-closing. | ||
| var SELF_CLOSING_TAGS = new _set.default(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']); | ||
| var SELF_CLOSING_TAGS = new Set(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']); | ||
| /** | ||
@@ -108,3 +104,3 @@ * Boolean attributes are attributes whose presence as being assigned is | ||
| var BOOLEAN_ATTRIBUTES = new _set.default(['allowfullscreen', 'allowpaymentrequest', 'allowusermedia', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'defer', 'disabled', 'formnovalidate', 'hidden', 'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'selected', 'typemustmatch']); | ||
| var BOOLEAN_ATTRIBUTES = new Set(['allowfullscreen', 'allowpaymentrequest', 'allowusermedia', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'defer', 'disabled', 'formnovalidate', 'hidden', 'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'selected', 'typemustmatch']); | ||
| /** | ||
@@ -131,3 +127,3 @@ * Enumerated attributes are attributes which must be of a specific value form. | ||
| var ENUMERATED_ATTRIBUTES = new _set.default(['autocapitalize', 'autocomplete', 'charset', 'contenteditable', 'crossorigin', 'decoding', 'dir', 'draggable', 'enctype', 'formenctype', 'formmethod', 'http-equiv', 'inputmode', 'kind', 'method', 'preload', 'scope', 'shape', 'spellcheck', 'translate', 'type', 'wrap']); | ||
| var ENUMERATED_ATTRIBUTES = new Set(['autocapitalize', 'autocomplete', 'charset', 'contenteditable', 'crossorigin', 'decoding', 'dir', 'draggable', 'enctype', 'formenctype', 'formmethod', 'http-equiv', 'inputmode', 'kind', 'method', 'preload', 'scope', 'shape', 'spellcheck', 'translate', 'type', 'wrap']); | ||
| /** | ||
@@ -152,3 +148,3 @@ * Set of CSS style properties which support assignment of unitless numbers. | ||
| var CSS_PROPERTIES_SUPPORTS_UNITLESS = new _set.default(['animation', 'animationIterationCount', 'baselineShift', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'columnCount', 'cx', 'cy', 'fillOpacity', 'flexGrow', 'flexShrink', 'floodOpacity', 'fontWeight', 'gridColumnEnd', 'gridColumnStart', 'gridRowEnd', 'gridRowStart', 'lineHeight', 'opacity', 'order', 'orphans', 'r', 'rx', 'ry', 'shapeImageThreshold', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'widows', 'x', 'y', 'zIndex', 'zoom']); | ||
| var CSS_PROPERTIES_SUPPORTS_UNITLESS = new Set(['animation', 'animationIterationCount', 'baselineShift', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'columnCount', 'cx', 'cy', 'fillOpacity', 'flexGrow', 'flexShrink', 'floodOpacity', 'fontWeight', 'gridColumnEnd', 'gridColumnStart', 'gridRowEnd', 'gridRowStart', 'lineHeight', 'opacity', 'order', 'orphans', 'r', 'rx', 'ry', 'shapeImageThreshold', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'widows', 'x', 'y', 'zIndex', 'zoom']); | ||
| /** | ||
@@ -364,4 +360,5 @@ * Regular expression matching invalid attribute names. | ||
| * | ||
| * @param {WPElement} element Element to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {WPElement} element Element to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
@@ -372,4 +369,4 @@ * @return {string} Serialized element. | ||
| function renderElement(element) { | ||
| var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| function renderElement(element, context) { | ||
| var legacyContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
@@ -381,3 +378,3 @@ if (null === element || undefined === element || false === element) { | ||
| if (Array.isArray(element)) { | ||
| return renderChildren(element, context); | ||
| return renderChildren(element, context, legacyContext); | ||
| } | ||
@@ -393,10 +390,11 @@ | ||
| var tagName = element.type, | ||
| var type = element.type, | ||
| props = element.props; | ||
| switch (tagName) { | ||
| case _.Fragment: | ||
| return renderChildren(props.children, context); | ||
| switch (type) { | ||
| case _react.StrictMode: | ||
| case _react.Fragment: | ||
| return renderChildren(props.children, context, legacyContext); | ||
| case _.RawHTML: | ||
| case _rawHtml.default: | ||
| var children = props.children, | ||
@@ -408,17 +406,25 @@ wrapperProps = (0, _objectWithoutProperties2.default)(props, ["children"]); | ||
| } | ||
| }), context); | ||
| }), context, legacyContext); | ||
| } | ||
| switch ((0, _typeof2.default)(tagName)) { | ||
| switch ((0, _typeof2.default)(type)) { | ||
| case 'string': | ||
| return renderNativeComponent(tagName, props, context); | ||
| return renderNativeComponent(type, props, context, legacyContext); | ||
| case 'function': | ||
| if (tagName.prototype && typeof tagName.prototype.render === 'function') { | ||
| return renderComponent(tagName, props, context); | ||
| if (type.prototype && typeof type.prototype.render === 'function') { | ||
| return renderComponent(type, props, context, legacyContext); | ||
| } | ||
| return renderElement(tagName(props, context), context); | ||
| return renderElement(type(props, legacyContext), context, legacyContext); | ||
| } | ||
| switch (type && type.$$typeof) { | ||
| case Provider.$$typeof: | ||
| return renderChildren(props.children, props.value, legacyContext); | ||
| case Consumer.$$typeof: | ||
| return renderElement(props.children(context || type._currentValue), context, legacyContext); | ||
| } | ||
| return ''; | ||
@@ -429,6 +435,7 @@ } | ||
| * | ||
| * @param {?string} type Native component type to serialize, or null if | ||
| * rendering as fragment of children content. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?string} type Native component type to serialize, or null if | ||
| * rendering as fragment of children content. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
@@ -439,4 +446,4 @@ * @return {string} Serialized element. | ||
| function renderNativeComponent(type, props) { | ||
| var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| function renderNativeComponent(type, props, context) { | ||
| var legacyContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; | ||
| var content = ''; | ||
@@ -448,3 +455,3 @@ | ||
| // as well. | ||
| content = renderChildren(props.value, context); | ||
| content = renderChildren(props.value, context, legacyContext); | ||
| props = (0, _lodash.omit)(props, 'value'); | ||
@@ -455,3 +462,3 @@ } else if (props.dangerouslySetInnerHTML && typeof props.dangerouslySetInnerHTML.__html === 'string') { | ||
| } else if (typeof props.children !== 'undefined') { | ||
| content = renderChildren(props.children, context); | ||
| content = renderChildren(props.children, context, legacyContext); | ||
| } | ||
@@ -474,5 +481,6 @@ | ||
| * | ||
| * @param {Function} Component Component type to serialize. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {Function} Component Component type to serialize. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
@@ -483,11 +491,11 @@ * @return {string} Serialized element | ||
| function renderComponent(Component, props) { | ||
| var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| var instance = new Component(props, context); | ||
| function renderComponent(Component, props, context) { | ||
| var legacyContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; | ||
| var instance = new Component(props, legacyContext); | ||
| if (typeof instance.getChildContext === 'function') { | ||
| (0, _assign.default)(context, instance.getChildContext()); | ||
| Object.assign(legacyContext, instance.getChildContext()); | ||
| } | ||
| var html = renderElement(instance.render(), context); | ||
| var html = renderElement(instance.render(), context, legacyContext); | ||
| return html; | ||
@@ -498,4 +506,5 @@ } | ||
| * | ||
| * @param {Array} children Children to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {Array} children Children to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
@@ -506,4 +515,4 @@ * @return {string} Serialized children. | ||
| function renderChildren(children) { | ||
| var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| function renderChildren(children, context) { | ||
| var legacyContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| var result = ''; | ||
@@ -514,3 +523,3 @@ children = (0, _lodash.castArray)(children); | ||
| var child = children[i]; | ||
| result += renderElement(child, context); | ||
| result += renderElement(child, context, legacyContext); | ||
| } | ||
@@ -517,0 +526,0 @@ |
| { | ||
| "name": "@wordpress/element", | ||
| "version": "1.0.4", | ||
| "version": "2.0.0", | ||
| "description": "Element React module for WordPress.", | ||
@@ -24,3 +24,3 @@ "author": "The WordPress Contributors", | ||
| "dependencies": { | ||
| "@babel/runtime-corejs2": "7.0.0-beta.56", | ||
| "@babel/runtime": "^7.0.0", | ||
| "lodash": "^4.17.10", | ||
@@ -36,3 +36,3 @@ "react": "^16.4.1", | ||
| }, | ||
| "gitHead": "e1811b2082d944dc68bd4c4f048e71cbbdcf6550" | ||
| "gitHead": "df6f8da7b557894e4364c17db2dd4af0d1e20252" | ||
| } |
@@ -24,2 +24,4 @@ # Element | ||
| _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ | ||
| ## Usage | ||
@@ -51,3 +53,3 @@ | ||
| - An understanding of a block in terms of its underlying values (in the [random image example](../../blocks/README.md#example), a category) | ||
| - An understanding of a block in terms of its underlying values (in the [random image example](../blocks/README.md#example), a category) | ||
| - A means to describe the UI of a block given these values | ||
@@ -54,0 +56,0 @@ |
@@ -44,4 +44,11 @@ /** | ||
| */ | ||
| import { Fragment, RawHTML } from './'; | ||
| import { | ||
| createContext, | ||
| Fragment, | ||
| StrictMode, | ||
| } from './react'; | ||
| import RawHTML from './raw-html'; | ||
| const { Provider, Consumer } = createContext(); | ||
| /** | ||
@@ -434,8 +441,9 @@ * Valid attribute types. | ||
| * | ||
| * @param {WPElement} element Element to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {WPElement} element Element to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
| * @return {string} Serialized element. | ||
| */ | ||
| export function renderElement( element, context = {} ) { | ||
| export function renderElement( element, context, legacyContext = {} ) { | ||
| if ( null === element || undefined === element || false === element ) { | ||
@@ -446,3 +454,3 @@ return ''; | ||
| if ( Array.isArray( element ) ) { | ||
| return renderChildren( element, context ); | ||
| return renderChildren( element, context, legacyContext ); | ||
| } | ||
@@ -458,7 +466,8 @@ | ||
| const { type: tagName, props } = element; | ||
| const { type, props } = element; | ||
| switch ( tagName ) { | ||
| switch ( type ) { | ||
| case StrictMode: | ||
| case Fragment: | ||
| return renderChildren( props.children, context ); | ||
| return renderChildren( props.children, context, legacyContext ); | ||
@@ -474,18 +483,27 @@ case RawHTML: | ||
| }, | ||
| context | ||
| context, | ||
| legacyContext | ||
| ); | ||
| } | ||
| switch ( typeof tagName ) { | ||
| switch ( typeof type ) { | ||
| case 'string': | ||
| return renderNativeComponent( tagName, props, context ); | ||
| return renderNativeComponent( type, props, context, legacyContext ); | ||
| case 'function': | ||
| if ( tagName.prototype && typeof tagName.prototype.render === 'function' ) { | ||
| return renderComponent( tagName, props, context ); | ||
| if ( type.prototype && typeof type.prototype.render === 'function' ) { | ||
| return renderComponent( type, props, context, legacyContext ); | ||
| } | ||
| return renderElement( tagName( props, context ), context ); | ||
| return renderElement( type( props, legacyContext ), context, legacyContext ); | ||
| } | ||
| switch ( type && type.$$typeof ) { | ||
| case Provider.$$typeof: | ||
| return renderChildren( props.children, props.value, legacyContext ); | ||
| case Consumer.$$typeof: | ||
| return renderElement( props.children( context || type._currentValue ), context, legacyContext ); | ||
| } | ||
| return ''; | ||
@@ -497,10 +515,11 @@ } | ||
| * | ||
| * @param {?string} type Native component type to serialize, or null if | ||
| * rendering as fragment of children content. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?string} type Native component type to serialize, or null if | ||
| * rendering as fragment of children content. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
| * @return {string} Serialized element. | ||
| */ | ||
| export function renderNativeComponent( type, props, context = {} ) { | ||
| export function renderNativeComponent( type, props, context, legacyContext = {} ) { | ||
| let content = ''; | ||
@@ -511,3 +530,3 @@ if ( type === 'textarea' && props.hasOwnProperty( 'value' ) ) { | ||
| // as well. | ||
| content = renderChildren( props.value, context ); | ||
| content = renderChildren( props.value, context, legacyContext ); | ||
| props = omit( props, 'value' ); | ||
@@ -519,3 +538,3 @@ } else if ( props.dangerouslySetInnerHTML && | ||
| } else if ( typeof props.children !== 'undefined' ) { | ||
| content = renderChildren( props.children, context ); | ||
| content = renderChildren( props.children, context, legacyContext ); | ||
| } | ||
@@ -539,16 +558,17 @@ | ||
| * | ||
| * @param {Function} Component Component type to serialize. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {Function} Component Component type to serialize. | ||
| * @param {Object} props Props object. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
| * @return {string} Serialized element | ||
| */ | ||
| export function renderComponent( Component, props, context = {} ) { | ||
| const instance = new Component( props, context ); | ||
| export function renderComponent( Component, props, context, legacyContext = {} ) { | ||
| const instance = new Component( props, legacyContext ); | ||
| if ( typeof instance.getChildContext === 'function' ) { | ||
| Object.assign( context, instance.getChildContext() ); | ||
| Object.assign( legacyContext, instance.getChildContext() ); | ||
| } | ||
| const html = renderElement( instance.render(), context ); | ||
| const html = renderElement( instance.render(), context, legacyContext ); | ||
@@ -561,8 +581,9 @@ return html; | ||
| * | ||
| * @param {Array} children Children to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {Array} children Children to serialize. | ||
| * @param {?Object} context Context object. | ||
| * @param {?Object} legacyContext Legacy context object. | ||
| * | ||
| * @return {string} Serialized children. | ||
| */ | ||
| function renderChildren( children, context = {} ) { | ||
| function renderChildren( children, context, legacyContext = {} ) { | ||
| let result = ''; | ||
@@ -575,3 +596,3 @@ | ||
| result += renderElement( child, context ); | ||
| result += renderElement( child, context, legacyContext ); | ||
| } | ||
@@ -578,0 +599,0 @@ |
@@ -11,6 +11,8 @@ /** | ||
| Component, | ||
| createContext, | ||
| createElement, | ||
| Fragment, | ||
| RawHTML, | ||
| } from '../'; | ||
| StrictMode, | ||
| } from '../react'; | ||
| import RawHTML from '../raw-html'; | ||
| import serialize, { | ||
@@ -120,3 +122,3 @@ escapeAmpersand, | ||
| it( 'should render with context', () => { | ||
| it( 'should render with context (legacy)', () => { | ||
| class Provider extends Component { | ||
@@ -303,2 +305,14 @@ getChildContext() { | ||
| it( 'renders StrictMode with undefined children', () => { | ||
| const result = renderElement( <StrictMode /> ); | ||
| expect( result ).toBe( '' ); | ||
| } ); | ||
| it( 'renders StrictMode as its inner children', () => { | ||
| const result = renderElement( <StrictMode>Hello</StrictMode> ); | ||
| expect( result ).toBe( 'Hello' ); | ||
| } ); | ||
| it( 'renders Fragment with undefined children', () => { | ||
@@ -310,2 +324,82 @@ const result = renderElement( <Fragment /> ); | ||
| it( 'renders default value from Context API', () => { | ||
| const { Consumer } = createContext( { | ||
| value: 'default', | ||
| } ); | ||
| const result = renderElement( | ||
| <Consumer> | ||
| { ( context ) => context.value } | ||
| </Consumer> | ||
| ); | ||
| expect( result ).toBe( 'default' ); | ||
| } ); | ||
| it( 'renders provided value through Context API', () => { | ||
| const { Consumer, Provider } = createContext( { | ||
| value: 'default', | ||
| } ); | ||
| const result = renderElement( | ||
| <Provider value={ { value: 'provided' } }> | ||
| <Consumer> | ||
| { ( context ) => context.value } | ||
| </Consumer> | ||
| </Provider> | ||
| ); | ||
| expect( result ).toBe( 'provided' ); | ||
| } ); | ||
| it( 'renders proper value through Context API when multiple providers present', () => { | ||
| const { Consumer, Provider } = createContext( { | ||
| value: 'default', | ||
| } ); | ||
| const result = renderElement( | ||
| <Fragment> | ||
| <Provider value={ { value: '1st provided' } }> | ||
| <Consumer> | ||
| { ( context ) => context.value } | ||
| </Consumer> | ||
| </Provider> | ||
| { '|' } | ||
| <Provider value={ { value: '2nd provided' } }> | ||
| <Consumer> | ||
| { ( context ) => context.value } | ||
| </Consumer> | ||
| </Provider> | ||
| { '|' } | ||
| <Consumer> | ||
| { ( context ) => context.value } | ||
| </Consumer> | ||
| </Fragment> | ||
| ); | ||
| expect( result ).toBe( '1st provided|2nd provided|default' ); | ||
| } ); | ||
| it( 'renders proper value through Context API when nested providers present', () => { | ||
| const { Consumer, Provider } = createContext( { | ||
| value: 'default', | ||
| } ); | ||
| const result = renderElement( | ||
| <Provider value={ { value: 'outer provided' } }> | ||
| <Provider value={ { value: 'inner provided' } }> | ||
| <Consumer> | ||
| { ( context ) => context.value } | ||
| </Consumer> | ||
| </Provider> | ||
| { '|' } | ||
| <Consumer> | ||
| { ( context ) => context.value } | ||
| </Consumer> | ||
| </Provider> | ||
| ); | ||
| expect( result ).toBe( 'inner provided|outer provided' ); | ||
| } ); | ||
| it( 'renders RawHTML as its unescaped children', () => { | ||
@@ -312,0 +406,0 @@ const result = renderElement( <RawHTML>{ '<img/>' }</RawHTML> ); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.35%
197411
- Number of package files
- increased by2.78%
37
- Lines of code
- increased by3.92%
2971
- Number of lines in readme file
- increased by2.63%
78
Dependency changes
+ Added@babel/runtime@^7.0.0
+ Added@babel/runtime@7.26.0(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)
- Removed@babel/runtime-corejs2@7.0.0-beta.56
- Removed@babel/runtime-corejs2@7.0.0-beta.56(transitive)
- Removedcore-js@2.6.12(transitive)
- Removedregenerator-runtime@0.12.1(transitive)