Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@wordpress/element

Package Overview
Dependencies
Maintainers
6
Versions
171
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wordpress/element - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

build-module/index-common.js
build/index-common.js
src/index-common.js

162

build-module/index.js

@@ -1,8 +0,11 @@

import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import "core-js/modules/es6.function.name";
import _objectSpread from "@babel/runtime/helpers/objectSpread";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import "core-js/modules/web.dom.iterable";
/**

@@ -14,13 +17,13 @@ * External dependencies

import { camelCase, flowRight, isString, upperFirst } from 'lodash';
/**
* WordPress dependencies
*/
import isShallowEqual from '@wordpress/is-shallow-equal';
/**
* Internal dependencies
*/
import serialize from './serialize';
import { RawHTML } from './index-common';
/**

@@ -38,4 +41,4 @@ * Returns a new element of given type. Type can be either a string tag name or

*/
export { createElement };
/**

@@ -48,4 +51,4 @@ * Returns an object tracking a reference to a rendered element via its

*/
export { createRef };
/**

@@ -62,4 +65,4 @@ * Component enhancer used to enable passing a ref to its wrapped component.

*/
export { forwardRef };
/**

@@ -71,4 +74,4 @@ * Renders a given element into the target DOM node.

*/
export { render };
/**

@@ -79,9 +82,9 @@ * Removes any mounted element from the target DOM node.

*/
export { unmountComponentAtNode };
/**
* A base class to create WordPress Components (Refs, state and lifecycle hooks)
*/
export { Component };
/**

@@ -95,4 +98,4 @@ * Creates a copy of an element with extended props.

*/
export { cloneElement };
/**

@@ -104,13 +107,11 @@ * Finds the dom node of a React component

*/
export { findDOMNode };
export { Children };
export { StrictMode };
/**
* A component which renders its children without any wrapping element.
*/
export { Fragment };
/**

@@ -123,4 +124,4 @@ * Creates a context object containing two components: a provider and consumer.

*/
export { createContext };
/**

@@ -133,4 +134,4 @@ * Checks if an object is a valid WPElement

*/
export { isValidElement };
/**

@@ -144,4 +145,4 @@ * Creates a portal into which a component can be rendered.

*/
export { createPortal };
/**

@@ -154,4 +155,4 @@ * Renders a given element into a string.

*/
export { serialize as renderToString };
/**

@@ -164,4 +165,5 @@ * Concatenate two or more React children objects.

*/
export function concatChildren() {
for (var _len = arguments.length, childrenArguments = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, childrenArguments = new Array(_len), _key = 0; _key < _len; _key++) {
childrenArguments[_key] = arguments[_key];

@@ -180,7 +182,5 @@ }

});
return memo;
}, []);
}
/**

@@ -194,6 +194,9 @@ * Switches the nodeName of all the elements in the children object.

*/
export function switchChildrenNodeName(children, nodeName) {
return children && Children.map(children, function (elt, index) {
if (isString(elt)) {
return createElement(nodeName, { key: index }, elt);
return createElement(nodeName, {
key: index
}, elt);
}

@@ -203,8 +206,9 @@

childrenProp = _elt$props.children,
props = _objectWithoutProperties(_elt$props, ['children']);
props = _objectWithoutProperties(_elt$props, ["children"]);
return createElement(nodeName, _extends({ key: index }, props), childrenProp);
return createElement(nodeName, _objectSpread({
key: index
}, props), childrenProp);
});
}
/**

@@ -218,4 +222,4 @@ * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function

*/
export { flowRight as compose };
/**

@@ -232,2 +236,3 @@ * Given a function mapping a component to an enhanced component and modifier

*/
export function createHigherOrderComponent(mapComponentToEnhancedComponent, modifierName) {

@@ -237,10 +242,7 @@ return function (OriginalComponent) {

var _OriginalComponent$di = OriginalComponent.displayName,
displayName = _OriginalComponent$di === undefined ? OriginalComponent.name || 'Component' : _OriginalComponent$di;
EnhancedComponent.displayName = upperFirst(camelCase(modifierName)) + '(' + displayName + ')';
displayName = _OriginalComponent$di === void 0 ? OriginalComponent.name || 'Component' : _OriginalComponent$di;
EnhancedComponent.displayName = "".concat(upperFirst(camelCase(modifierName)), "(").concat(displayName, ")");
return EnhancedComponent;
};
}
/**

@@ -256,13 +258,4 @@ * Component used as equivalent of Fragment with unescaped HTML, in cases where

*/
export function RawHTML(_ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, ['children']);
// The DIV wrapper will be stripped by serializer, unless there are
// non-children props present.
return createElement('div', _extends({
dangerouslySetInnerHTML: { __html: children }
}, props));
}
export { RawHTML };
/**

@@ -279,47 +272,54 @@ * Given a component returns the enhanced component augmented with a component

*/
export var pure = createHigherOrderComponent(function (Wrapped) {
if (Wrapped.prototype instanceof Component) {
return function (_Wrapped) {
_inherits(_class, _Wrapped);
return (
/*#__PURE__*/
function (_Wrapped) {
_inherits(_class, _Wrapped);
function _class() {
_classCallCheck(this, _class);
function _class() {
_classCallCheck(this, _class);
return _possibleConstructorReturn(this, (_class.__proto__ || _Object$getPrototypeOf(_class)).apply(this, arguments));
}
_createClass(_class, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return !isShallowEqual(nextProps, this.props) || !isShallowEqual(nextState, this.state);
return _possibleConstructorReturn(this, _getPrototypeOf(_class).apply(this, arguments));
}
}]);
return _class;
}(Wrapped);
_createClass(_class, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
return !isShallowEqual(nextProps, this.props) || !isShallowEqual(nextState, this.state);
}
}]);
return _class;
}(Wrapped)
);
}
return function (_Component) {
_inherits(_class2, _Component);
return (
/*#__PURE__*/
function (_Component) {
_inherits(_class2, _Component);
function _class2() {
_classCallCheck(this, _class2);
function _class2() {
_classCallCheck(this, _class2);
return _possibleConstructorReturn(this, (_class2.__proto__ || _Object$getPrototypeOf(_class2)).apply(this, arguments));
}
_createClass(_class2, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return !isShallowEqual(nextProps, this.props);
return _possibleConstructorReturn(this, _getPrototypeOf(_class2).apply(this, arguments));
}
}, {
key: 'render',
value: function render() {
return createElement(Wrapped, this.props);
}
}]);
return _class2;
}(Component);
_createClass(_class2, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps) {
return !isShallowEqual(nextProps, this.props);
}
}, {
key: "render",
value: function render() {
return createElement(Wrapped, this.props);
}
}]);
return _class2;
}(Component)
);
}, 'pure');

23

build-module/index.native.js

@@ -5,8 +5,8 @@ /**

import { createElement, Component } from 'react';
/**
* Internal dependencies
*/
import serialize from './serialize';
import { RawHTML } from './index-common';
/**

@@ -24,9 +24,9 @@ * Returns a new element of given type. Type can be either a string tag name or

*/
export { createElement };
/**
* A base class to create WordPress Components (Refs, state and lifecycle hooks)
*/
export { Component };
/**

@@ -39,2 +39,15 @@ * Renders a given element into a string.

*/
export { serialize as renderToString };
export { serialize as renderToString };
/**
* Component used as equivalent of Fragment with unescaped HTML, in cases where
* it is desirable to render dangerous HTML without needing a wrapper element.
* To preserve additional props, a `div` wrapper _will_ be created if any props
* aside from `children` are passed.
*
* @param {string} props.children HTML to render.
*
* @return {WPElement} Dangerously-rendering element.
*/
export { RawHTML };

400

build-module/serialize.js

@@ -1,6 +0,9 @@

import _Object$assign from 'babel-runtime/core-js/object/assign';
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _typeof from 'babel-runtime/helpers/typeof';
import _Set from 'babel-runtime/core-js/set';
import _Object$assign from "@babel/runtime/core-js/object/assign";
import _objectSpread from "@babel/runtime/helpers/objectSpread";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import "core-js/modules/es6.regexp.to-string";
import _typeof from "@babel/runtime/helpers/typeof";
import "core-js/modules/es6.regexp.replace";
import _Set from "@babel/runtime/core-js/set";
/**

@@ -36,14 +39,13 @@ * Parts of this source were derived and modified from fast-react-render,

*/
import { flowRight, isEmpty, castArray, omit, kebabCase } from 'lodash';
import { flowRight, isEmpty, castArray, omit, startsWith, kebabCase } from 'lodash';
/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
import { Fragment, RawHTML } from './';
/**

@@ -54,4 +56,4 @@ * Valid attribute types.

*/
var ATTRIBUTES_TYPES = new _Set(['string', 'boolean', 'number']);
/**

@@ -62,4 +64,4 @@ * 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']);
/**

@@ -80,4 +82,4 @@ * 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']);
/**

@@ -103,4 +105,4 @@ * 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']);
/**

@@ -124,4 +126,4 @@ * 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']);
/**

@@ -141,6 +143,6 @@ * Returns a string with ampersands escaped. Note that this is an imperfect

*/
export function escapeAmpersand(value) {
return value.replace(/&(?!([a-z0-9]+|#[0-9]+|#x[a-f0-9]+);)/gi, '&amp;');
return value.replace(/&(?!([a-z0-9]+|#[0-9]+|#x[a-f0-9]+);)/gi, '&amp;');
}
/**

@@ -153,6 +155,6 @@ * Returns a string with quotation marks replaced.

*/
export function escapeQuotationMark(value) {
return value.replace(/"/g, '&quot;');
return value.replace(/"/g, '&quot;');
}
/**

@@ -165,6 +167,6 @@ * Returns a string with less-than sign replaced.

*/
export function escapeLessThan(value) {
return value.replace(/</g, '&lt;');
return value.replace(/</g, '&lt;');
}
/**

@@ -182,4 +184,4 @@ * Returns an escaped attribute value.

*/
export var escapeAttribute = flowRight([escapeAmpersand, escapeQuotationMark]);
/**

@@ -197,4 +199,4 @@ * Returns an escaped HTML element value.

*/
export var escapeHTML = flowRight([escapeAmpersand, escapeLessThan]);
/**

@@ -209,8 +211,8 @@ * Returns true if the specified string is prefixed by one of an array of

*/
export function hasPrefix(string, prefixes) {
return prefixes.some(function (prefix) {
return string.indexOf(prefix) === 0;
});
return prefixes.some(function (prefix) {
return string.indexOf(prefix) === 0;
});
}
/**

@@ -224,6 +226,6 @@ * Returns true if the given prop name should be ignored in attributes

*/
function isInternalAttribute(attribute) {
return 'key' === attribute || 'children' === attribute;
return 'key' === attribute || 'children' === attribute;
}
/**

@@ -237,11 +239,12 @@ * Returns the normal form of the element's attribute value for HTML.

*/
function getNormalAttributeValue(attribute, value) {
switch (attribute) {
case 'style':
return renderStyle(value);
}
switch (attribute) {
case 'style':
return renderStyle(value);
}
return value;
return value;
}
/**

@@ -254,14 +257,39 @@ * Returns the normal form of the element's attribute name for HTML.

*/
function getNormalAttributeName(attribute) {
switch (attribute) {
case 'htmlFor':
return 'for';
switch (attribute) {
case 'htmlFor':
return 'for';
case 'className':
return 'class';
}
case 'className':
return 'class';
}
return attribute.toLowerCase();
return attribute.toLowerCase();
}
/**
* Returns the normal form of the style property name for HTML.
*
* - Converts property names to kebab-case, e.g. 'backgroundColor' → 'background-color'
* - Leaves custom attributes alone, e.g. '--myBackgroundColor' → '--myBackgroundColor'
* - Converts vendor-prefixed property names to -kebab-case, e.g. 'MozTransform' → '-moz-transform'
*
* @param {string} property Property name.
*
* @return {string} Normalized property name.
*/
function getNormalStylePropertyName(property) {
if (startsWith(property, '--')) {
return property;
}
if (hasPrefix(property, ['ms', 'O', 'Moz', 'Webkit'])) {
return '-' + kebabCase(property);
}
return kebabCase(property);
}
/**

@@ -276,10 +304,11 @@ * Returns the normal form of the style property value for HTML. Appends a

*/
function getNormalStyleValue(property, value) {
if (typeof value === 'number' && 0 !== value && !CSS_PROPERTIES_SUPPORTS_UNITLESS.has(property)) {
return value + 'px';
}
return value;
function getNormalStylePropertyValue(property, value) {
if (typeof value === 'number' && 0 !== value && !CSS_PROPERTIES_SUPPORTS_UNITLESS.has(property)) {
return value + 'px';
}
return value;
}
/**

@@ -293,53 +322,55 @@ * Serializes a React element to string.

*/
export function renderElement(element) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (null === element || undefined === element || false === element) {
return '';
}
if (null === element || undefined === element || false === element) {
return '';
}
if (Array.isArray(element)) {
return renderChildren(element, context);
}
if (Array.isArray(element)) {
return renderChildren(element, context);
}
switch (typeof element === 'undefined' ? 'undefined' : _typeof(element)) {
case 'string':
return escapeHTML(element);
switch (_typeof(element)) {
case 'string':
return escapeHTML(element);
case 'number':
return element.toString();
}
case 'number':
return element.toString();
}
var tagName = element.type,
props = element.props;
var tagName = element.type,
props = element.props;
switch (tagName) {
case Fragment:
return renderChildren(props.children, context);
switch (tagName) {
case Fragment:
return renderChildren(props.children, context);
case RawHTML:
var children = props.children,
wrapperProps = _objectWithoutProperties(props, ["children"]);
case RawHTML:
var children = props.children,
wrapperProps = _objectWithoutProperties(props, ['children']);
return renderNativeComponent(isEmpty(wrapperProps) ? null : 'div', _objectSpread({}, wrapperProps, {
dangerouslySetInnerHTML: {
__html: children
}
}), context);
}
return renderNativeComponent(isEmpty(wrapperProps) ? null : 'div', _extends({}, wrapperProps, {
dangerouslySetInnerHTML: { __html: children }
}), context);
}
switch (_typeof(tagName)) {
case 'string':
return renderNativeComponent(tagName, props, context);
switch (typeof tagName === 'undefined' ? 'undefined' : _typeof(tagName)) {
case 'string':
return renderNativeComponent(tagName, props, context);
case 'function':
if (tagName.prototype && typeof tagName.prototype.render === 'function') {
return renderComponent(tagName, props, context);
}
case 'function':
if (tagName.prototype && typeof tagName.prototype.render === 'function') {
return renderComponent(tagName, props, context);
}
return renderElement(tagName(props, context), context);
}
return renderElement(tagName(props, context), context);
}
return '';
return '';
}
/**

@@ -355,32 +386,32 @@ * Serializes a native component type to string.

*/
export function renderNativeComponent(type, props) {
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var content = '';
var content = '';
if (type === 'textarea' && props.hasOwnProperty('value')) {
// Textarea children can be assigned as value prop. If it is, render in
// place of children. Ensure to omit so it is not assigned as attribute
// as well.
content = renderChildren(props.value, context);
props = omit(props, 'value');
} else if (props.dangerouslySetInnerHTML && typeof props.dangerouslySetInnerHTML.__html === 'string') {
// Dangerous content is left unescaped.
content = props.dangerouslySetInnerHTML.__html;
} else if (typeof props.children !== 'undefined') {
content = renderChildren(props.children, context);
}
if (type === 'textarea' && props.hasOwnProperty('value')) {
// Textarea children can be assigned as value prop. If it is, render in
// place of children. Ensure to omit so it is not assigned as attribute
// as well.
content = renderChildren(props.value, context);
props = omit(props, 'value');
} else if (props.dangerouslySetInnerHTML && typeof props.dangerouslySetInnerHTML.__html === 'string') {
// Dangerous content is left unescaped.
content = props.dangerouslySetInnerHTML.__html;
} else if (typeof props.children !== 'undefined') {
content = renderChildren(props.children, context);
}
if (!type) {
return content;
}
if (!type) {
return content;
}
var attributes = renderAttributes(props);
var attributes = renderAttributes(props);
if (SELF_CLOSING_TAGS.has(type)) {
return '<' + type + attributes + '/>';
}
if (SELF_CLOSING_TAGS.has(type)) {
return '<' + type + attributes + '/>';
}
return '<' + type + attributes + '>' + content + '</' + type + '>';
return '<' + type + attributes + '>' + content + '</' + type + '>';
}
/**

@@ -395,25 +426,23 @@ * Serializes a non-native component type to string.

*/
export function renderComponent(Component, props) {
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var instance = new Component(props, context);
var instance = new Component(props, context);
if (typeof instance.componentWillMount === 'function') {
instance.componentWillMount();
deprecated('componentWillMount', {
version: '3.3',
alternative: 'the constructor',
plugin: 'Gutenberg'
});
}
if (typeof instance.componentWillMount === 'function') {
instance.componentWillMount();
deprecated('componentWillMount', {
version: '3.3',
alternative: 'the constructor',
plugin: 'Gutenberg'
});
}
if (typeof instance.getChildContext === 'function') {
_Object$assign(context, instance.getChildContext());
}
if (typeof instance.getChildContext === 'function') {
_Object$assign(context, instance.getChildContext());
}
var html = renderElement(instance.render(), context);
return html;
var html = renderElement(instance.render(), context);
return html;
}
/**

@@ -427,18 +456,15 @@ * Serializes an array of children to string.

*/
function renderChildren(children) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var result = '';
children = castArray(children);
var result = '';
for (var i = 0; i < children.length; i++) {
var child = children[i];
result += renderElement(child, context);
}
children = castArray(children);
for (var i = 0; i < children.length; i++) {
var child = children[i];
result += renderElement(child, context);
}
return result;
return result;
}
/**

@@ -451,51 +477,48 @@ * Renders a props object as a string of HTML attributes.

*/
export function renderAttributes(props) {
var result = '';
var result = '';
for (var key in props) {
var attribute = getNormalAttributeName(key);
var value = getNormalAttributeValue(key, props[key]);
for (var key in props) {
var attribute = getNormalAttributeName(key);
var value = getNormalAttributeValue(key, props[key]); // If value is not of serializeable type, skip.
// If value is not of serializeable type, skip.
if (!ATTRIBUTES_TYPES.has(typeof value === 'undefined' ? 'undefined' : _typeof(value))) {
continue;
}
if (!ATTRIBUTES_TYPES.has(_typeof(value))) {
continue;
} // Don't render internal attribute names.
// Don't render internal attribute names.
if (isInternalAttribute(key)) {
continue;
}
var isBooleanAttribute = BOOLEAN_ATTRIBUTES.has(attribute);
if (isInternalAttribute(key)) {
continue;
}
// Boolean attribute should be omitted outright if its value is false.
if (isBooleanAttribute && value === false) {
continue;
}
var isBooleanAttribute = BOOLEAN_ATTRIBUTES.has(attribute); // Boolean attribute should be omitted outright if its value is false.
var isMeaningfulAttribute = isBooleanAttribute || hasPrefix(key, ['data-', 'aria-']) || ENUMERATED_ATTRIBUTES.has(attribute);
if (isBooleanAttribute && value === false) {
continue;
}
// Only write boolean value as attribute if meaningful.
if (typeof value === 'boolean' && !isMeaningfulAttribute) {
continue;
}
var isMeaningfulAttribute = isBooleanAttribute || hasPrefix(key, ['data-', 'aria-']) || ENUMERATED_ATTRIBUTES.has(attribute); // Only write boolean value as attribute if meaningful.
result += ' ' + attribute;
if (typeof value === 'boolean' && !isMeaningfulAttribute) {
continue;
}
// Boolean attributes should write attribute name, but without value.
// Mere presence of attribute name is effective truthiness.
if (isBooleanAttribute) {
continue;
}
result += ' ' + attribute; // Boolean attributes should write attribute name, but without value.
// Mere presence of attribute name is effective truthiness.
if (typeof value === 'string') {
value = escapeAttribute(value);
}
if (isBooleanAttribute) {
continue;
}
result += '="' + value + '"';
}
if (typeof value === 'string') {
value = escapeAttribute(value);
}
return result;
result += '="' + value + '"';
}
return result;
}
/**

@@ -508,23 +531,26 @@ * Renders a style object as a string attribute value.

*/
export function renderStyle(style) {
var result = void 0;
var result;
for (var property in style) {
var value = style[property];
if (null === value || undefined === value) {
continue;
}
for (var property in style) {
var value = style[property];
if (result) {
result += ';';
} else {
result = '';
}
if (null === value || undefined === value) {
continue;
}
result += kebabCase(property) + ':' + getNormalStyleValue(property, value);
}
if (result) {
result += ';';
} else {
result = '';
}
return result;
var normalName = getNormalStylePropertyName(property);
var normalValue = getNormalStylePropertyValue(property, value);
result += normalName + ':' + normalValue;
}
return result;
}
export default renderElement;

321

build/index.js

@@ -1,57 +0,157 @@

'use strict';
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.pure = exports.compose = exports.renderToString = exports.createPortal = exports.isValidElement = exports.createContext = exports.Fragment = exports.StrictMode = exports.Children = exports.findDOMNode = exports.cloneElement = exports.Component = exports.unmountComponentAtNode = exports.render = exports.forwardRef = exports.createRef = exports.createElement = undefined;
exports.concatChildren = concatChildren;
exports.switchChildrenNodeName = switchChildrenNodeName;
exports.createHigherOrderComponent = createHigherOrderComponent;
Object.defineProperty(exports, "createElement", {
enumerable: true,
get: function get() {
return _react.createElement;
}
});
Object.defineProperty(exports, "createContext", {
enumerable: true,
get: function get() {
return _react.createContext;
}
});
Object.defineProperty(exports, "createRef", {
enumerable: true,
get: function get() {
return _react.createRef;
}
});
Object.defineProperty(exports, "forwardRef", {
enumerable: true,
get: function get() {
return _react.forwardRef;
}
});
Object.defineProperty(exports, "Component", {
enumerable: true,
get: function get() {
return _react.Component;
}
});
Object.defineProperty(exports, "cloneElement", {
enumerable: true,
get: function get() {
return _react.cloneElement;
}
});
Object.defineProperty(exports, "Children", {
enumerable: true,
get: function get() {
return _react.Children;
}
});
Object.defineProperty(exports, "Fragment", {
enumerable: true,
get: function get() {
return _react.Fragment;
}
});
Object.defineProperty(exports, "isValidElement", {
enumerable: true,
get: function get() {
return _react.isValidElement;
}
});
Object.defineProperty(exports, "StrictMode", {
enumerable: true,
get: function get() {
return _react.StrictMode;
}
});
Object.defineProperty(exports, "render", {
enumerable: true,
get: function get() {
return _reactDom.render;
}
});
Object.defineProperty(exports, "findDOMNode", {
enumerable: true,
get: function get() {
return _reactDom.findDOMNode;
}
});
Object.defineProperty(exports, "createPortal", {
enumerable: true,
get: function get() {
return _reactDom.createPortal;
}
});
Object.defineProperty(exports, "unmountComponentAtNode", {
enumerable: true,
get: function get() {
return _reactDom.unmountComponentAtNode;
}
});
Object.defineProperty(exports, "compose", {
enumerable: true,
get: function get() {
return _lodash.flowRight;
}
});
Object.defineProperty(exports, "renderToString", {
enumerable: true,
get: function get() {
return _serialize.default;
}
});
Object.defineProperty(exports, "RawHTML", {
enumerable: true,
get: function get() {
return _indexCommon.RawHTML;
}
});
exports.pure = void 0;
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _createClass2 = require('babel-runtime/helpers/createClass');
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createClass3 = _interopRequireDefault(_createClass2);
require("core-js/modules/es6.function.name");
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _inherits2 = require('babel-runtime/helpers/inherits');
require("core-js/modules/web.dom.iterable");
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require("react");
var _extends2 = require('babel-runtime/helpers/extends');
var _reactDom = require("react-dom");
var _extends3 = _interopRequireDefault(_extends2);
var _lodash = require("lodash");
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _serialize = _interopRequireDefault(require("./serialize"));
exports.concatChildren = concatChildren;
exports.switchChildrenNodeName = switchChildrenNodeName;
exports.createHigherOrderComponent = createHigherOrderComponent;
exports.RawHTML = RawHTML;
var _indexCommon = require("./index-common");
var _react = require('react');
/**
* External dependencies
*/
var _reactDom = require('react-dom');
/**
* WordPress dependencies
*/
var _lodash = require('lodash');
/**
* Internal dependencies
*/
var _isShallowEqual = require('@wordpress/is-shallow-equal');
var _isShallowEqual2 = _interopRequireDefault(_isShallowEqual);
var _serialize = require('./serialize');
var _serialize2 = _interopRequireDefault(_serialize);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**

@@ -70,9 +170,3 @@ * Returns a new element of given type. Type can be either a string tag name or

/**
* WordPress dependencies
*/
exports.createElement = _react.createElement;
/**
* Returns an object tracking a reference to a rendered element via its

@@ -85,13 +179,3 @@ * `current` property as either a DOMElement or Element, dependent upon the

/**
* Internal dependencies
*/
/**
* External dependencies
*/
exports.createRef = _react.createRef;
/**
* Component enhancer used to enable passing a ref to its wrapped component.

@@ -108,4 +192,2 @@ * Pass a function argument which receives `props` and `ref` as its arguments,

exports.forwardRef = _react.forwardRef;
/**

@@ -118,4 +200,2 @@ * Renders a given element into the target DOM node.

exports.render = _reactDom.render;
/**

@@ -127,4 +207,2 @@ * Removes any mounted element from the target DOM node.

exports.unmountComponentAtNode = _reactDom.unmountComponentAtNode;
/**

@@ -134,4 +212,2 @@ * A base class to create WordPress Components (Refs, state and lifecycle hooks)

exports.Component = _react.Component;
/**

@@ -146,4 +222,2 @@ * Creates a copy of an element with extended props.

exports.cloneElement = _react.cloneElement;
/**

@@ -156,6 +230,2 @@ * Finds the dom node of a React component

exports.findDOMNode = _reactDom.findDOMNode;
exports.Children = _react.Children;
exports.StrictMode = _react.StrictMode;
/**

@@ -165,4 +235,2 @@ * A component which renders its children without any wrapping element.

exports.Fragment = _react.Fragment;
/**

@@ -176,4 +244,2 @@ * Creates a context object containing two components: a provider and consumer.

exports.createContext = _react.createContext;
/**

@@ -187,4 +253,2 @@ * Checks if an object is a valid WPElement

exports.isValidElement = _react.isValidElement;
/**

@@ -199,4 +263,2 @@ * Creates a portal into which a component can be rendered.

exports.createPortal = _reactDom.createPortal;
/**

@@ -210,4 +272,2 @@ * Renders a given element into a string.

exports.renderToString = _serialize2.default;
/**

@@ -220,5 +280,4 @@ * Concatenate two or more React children objects.

*/
function concatChildren() {
for (var _len = arguments.length, childrenArguments = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, childrenArguments = new Array(_len), _key = 0; _key < _len; _key++) {
childrenArguments[_key] = arguments[_key];

@@ -241,3 +300,2 @@ }

}
/**

@@ -251,15 +309,20 @@ * Switches the nodeName of all the elements in the children object.

*/
function switchChildrenNodeName(children, nodeName) {
return children && _react.Children.map(children, function (elt, index) {
if ((0, _lodash.isString)(elt)) {
return (0, _react.createElement)(nodeName, { key: index }, elt);
return (0, _react.createElement)(nodeName, {
key: index
}, elt);
}
var _elt$props = elt.props,
childrenProp = _elt$props.children,
props = (0, _objectWithoutProperties3.default)(_elt$props, ['children']);
return (0, _react.createElement)(nodeName, (0, _extends3.default)({ key: index }, props), childrenProp);
props = (0, _objectWithoutProperties2.default)(_elt$props, ["children"]);
return (0, _react.createElement)(nodeName, (0, _objectSpread2.default)({
key: index
}, props), childrenProp);
});
}
/**

@@ -273,4 +336,4 @@ * Composes multiple higher-order components into a single higher-order component. Performs right-to-left function

*/
exports.compose = _lodash.flowRight;
/**

@@ -287,3 +350,2 @@ * Given a function mapping a component to an enhanced component and modifier

*/
function createHigherOrderComponent(mapComponentToEnhancedComponent, modifierName) {

@@ -293,10 +355,7 @@ return function (OriginalComponent) {

var _OriginalComponent$di = OriginalComponent.displayName,
displayName = _OriginalComponent$di === undefined ? OriginalComponent.name || 'Component' : _OriginalComponent$di;
EnhancedComponent.displayName = (0, _lodash.upperFirst)((0, _lodash.camelCase)(modifierName)) + '(' + displayName + ')';
displayName = _OriginalComponent$di === void 0 ? OriginalComponent.name || 'Component' : _OriginalComponent$di;
EnhancedComponent.displayName = "".concat((0, _lodash.upperFirst)((0, _lodash.camelCase)(modifierName)), "(").concat(displayName, ")");
return EnhancedComponent;
};
}
/**

@@ -312,12 +371,3 @@ * Component used as equivalent of Fragment with unescaped HTML, in cases where

*/
function RawHTML(_ref) {
var children = _ref.children,
props = (0, _objectWithoutProperties3.default)(_ref, ['children']);
// The DIV wrapper will be stripped by serializer, unless there are
// non-children props present.
return (0, _react.createElement)('div', (0, _extends3.default)({
dangerouslySetInnerHTML: { __html: children }
}, props));
}

@@ -335,43 +385,50 @@ /**

*/
var pure = exports.pure = createHigherOrderComponent(function (Wrapped) {
var pure = createHigherOrderComponent(function (Wrapped) {
if (Wrapped.prototype instanceof _react.Component) {
return function (_Wrapped) {
(0, _inherits3.default)(_class, _Wrapped);
return (
/*#__PURE__*/
function (_Wrapped) {
(0, _inherits2.default)(_class, _Wrapped);
function _class() {
(0, _classCallCheck3.default)(this, _class);
return (0, _possibleConstructorReturn3.default)(this, (_class.__proto__ || (0, _getPrototypeOf2.default)(_class)).apply(this, arguments));
}
function _class() {
(0, _classCallCheck2.default)(this, _class);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(_class).apply(this, arguments));
}
(0, _createClass3.default)(_class, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return !(0, _isShallowEqual2.default)(nextProps, this.props) || !(0, _isShallowEqual2.default)(nextState, this.state);
}
}]);
return _class;
}(Wrapped);
(0, _createClass2.default)(_class, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
return !(0, _isShallowEqual.default)(nextProps, this.props) || !(0, _isShallowEqual.default)(nextState, this.state);
}
}]);
return _class;
}(Wrapped)
);
}
return function (_Component) {
(0, _inherits3.default)(_class2, _Component);
return (
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(_class2, _Component);
function _class2() {
(0, _classCallCheck3.default)(this, _class2);
return (0, _possibleConstructorReturn3.default)(this, (_class2.__proto__ || (0, _getPrototypeOf2.default)(_class2)).apply(this, arguments));
}
function _class2() {
(0, _classCallCheck2.default)(this, _class2);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(_class2).apply(this, arguments));
}
(0, _createClass3.default)(_class2, [{
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
return !(0, _isShallowEqual2.default)(nextProps, this.props);
}
}, {
key: 'render',
value: function render() {
return (0, _react.createElement)(Wrapped, this.props);
}
}]);
return _class2;
}(_react.Component);
}, 'pure');
(0, _createClass2.default)(_class2, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps) {
return !(0, _isShallowEqual.default)(nextProps, this.props);
}
}, {
key: "render",
value: function render() {
return (0, _react.createElement)(Wrapped, this.props);
}
}]);
return _class2;
}(_react.Component)
);
}, 'pure');
exports.pure = pure;

75

build/index.native.js

@@ -1,52 +0,37 @@

'use strict';
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.renderToString = exports.Component = exports.createElement = undefined;
Object.defineProperty(exports, "createElement", {
enumerable: true,
get: function get() {
return _react.createElement;
}
});
Object.defineProperty(exports, "Component", {
enumerable: true,
get: function get() {
return _react.Component;
}
});
Object.defineProperty(exports, "renderToString", {
enumerable: true,
get: function get() {
return _serialize.default;
}
});
Object.defineProperty(exports, "RawHTML", {
enumerable: true,
get: function get() {
return _indexCommon.RawHTML;
}
});
var _react = require('react');
var _react = require("react");
var _serialize = require('./serialize');
var _serialize = _interopRequireDefault(require("./serialize"));
var _serialize2 = _interopRequireDefault(_serialize);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Returns a new element of given type. Type can be either a string tag name or
* another function which itself returns an element.
*
* @param {?(string|Function)} type Tag name or element creator
* @param {Object} props Element properties, either attribute
* set to apply to DOM node or values to
* pass through to element creator
* @param {...WPElement} children Descendant elements
*
* @return {WPElement} Element.
*/
/**
* External dependencies
*/
exports.createElement = _react.createElement;
/**
* A base class to create WordPress Components (Refs, state and lifecycle hooks)
*/
/**
* Internal dependencies
*/
exports.Component = _react.Component;
/**
* Renders a given element into a string.
*
* @param {WPElement} element Element to render
*
* @return {string} HTML.
*/
exports.renderToString = _serialize2.default;
var _indexCommon = require("./index-common");

470

build/serialize.js

@@ -1,28 +0,10 @@

'use strict';
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
require("core-js/modules/es6.string.starts-with");
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});
exports.escapeHTML = exports.escapeAttribute = undefined;
var _assign = require('babel-runtime/core-js/object/assign');
var _assign2 = _interopRequireDefault(_assign);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _typeof2 = require('babel-runtime/helpers/typeof');
var _typeof3 = _interopRequireDefault(_typeof2);
var _set = require('babel-runtime/core-js/set');
var _set2 = _interopRequireDefault(_set);
exports.escapeAmpersand = escapeAmpersand;

@@ -37,36 +19,25 @@ exports.escapeQuotationMark = escapeQuotationMark;

exports.renderStyle = renderStyle;
exports.default = exports.escapeHTML = exports.escapeAttribute = void 0;
var _lodash = require('lodash');
var _assign = _interopRequireDefault(require("@babel/runtime/core-js/object/assign"));
var _deprecated = require('@wordpress/deprecated');
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
var _deprecated2 = _interopRequireDefault(_deprecated);
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _ = require('./');
require("core-js/modules/es6.regexp.to-string");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
/**
* Valid attribute types.
*
* @type {Set}
*/
require("core-js/modules/es6.regexp.replace");
var _set = _interopRequireDefault(require("@babel/runtime/core-js/set"));
/**
* WordPress dependencies
*/
var ATTRIBUTES_TYPES = new _set2.default(['string', 'boolean', 'number']);
var _lodash = require("lodash");
/**
* Element tags which can be self-closing.
*
* @type {Set}
*/
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _ = require("./");
/**
* Internal dependencies
*/
/**
* Parts of this source were derived and modified from fast-react-render,

@@ -101,5 +72,25 @@ * released under the MIT license.

*/
var SELF_CLOSING_TAGS = new _set2.default(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Valid attribute types.
*
* @type {Set}
*/
var ATTRIBUTES_TYPES = new _set.default(['string', 'boolean', 'number']);
/**
* Element tags which can be self-closing.
*
* @type {Set}
*/
var SELF_CLOSING_TAGS = new _set.default(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
/**
* Boolean attributes are attributes whose presence as being assigned is

@@ -119,4 +110,4 @@ * meaningful, even if only empty.

*/
var BOOLEAN_ATTRIBUTES = new _set2.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.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']);
/**

@@ -142,4 +133,4 @@ * Enumerated attributes are attributes which must be of a specific value form.

*/
var ENUMERATED_ATTRIBUTES = new _set2.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.default(['autocapitalize', 'autocomplete', 'charset', 'contenteditable', 'crossorigin', 'decoding', 'dir', 'draggable', 'enctype', 'formenctype', 'formmethod', 'http-equiv', 'inputmode', 'kind', 'method', 'preload', 'scope', 'shape', 'spellcheck', 'translate', 'type', 'wrap']);
/**

@@ -163,4 +154,4 @@ * Set of CSS style properties which support assignment of unitless numbers.

*/
var CSS_PROPERTIES_SUPPORTS_UNITLESS = new _set2.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.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']);
/**

@@ -180,6 +171,6 @@ * Returns a string with ampersands escaped. Note that this is an imperfect

*/
function escapeAmpersand(value) {
return value.replace(/&(?!([a-z0-9]+|#[0-9]+|#x[a-f0-9]+);)/gi, '&amp;');
return value.replace(/&(?!([a-z0-9]+|#[0-9]+|#x[a-f0-9]+);)/gi, '&amp;');
}
/**

@@ -192,6 +183,7 @@ * Returns a string with quotation marks replaced.

*/
function escapeQuotationMark(value) {
return value.replace(/"/g, '&quot;');
return value.replace(/"/g, '&quot;');
}
/**

@@ -204,6 +196,7 @@ * Returns a string with less-than sign replaced.

*/
function escapeLessThan(value) {
return value.replace(/</g, '&lt;');
return value.replace(/</g, '&lt;');
}
/**

@@ -221,4 +214,5 @@ * Returns an escaped attribute value.

*/
var escapeAttribute = exports.escapeAttribute = (0, _lodash.flowRight)([escapeAmpersand, escapeQuotationMark]);
var escapeAttribute = (0, _lodash.flowRight)([escapeAmpersand, escapeQuotationMark]);
/**

@@ -236,4 +230,5 @@ * Returns an escaped HTML element value.

*/
var escapeHTML = exports.escapeHTML = (0, _lodash.flowRight)([escapeAmpersand, escapeLessThan]);
exports.escapeAttribute = escapeAttribute;
var escapeHTML = (0, _lodash.flowRight)([escapeAmpersand, escapeLessThan]);
/**

@@ -248,8 +243,10 @@ * Returns true if the specified string is prefixed by one of an array of

*/
exports.escapeHTML = escapeHTML;
function hasPrefix(string, prefixes) {
return prefixes.some(function (prefix) {
return string.indexOf(prefix) === 0;
});
return prefixes.some(function (prefix) {
return string.indexOf(prefix) === 0;
});
}
/**

@@ -263,6 +260,7 @@ * Returns true if the given prop name should be ignored in attributes

*/
function isInternalAttribute(attribute) {
return 'key' === attribute || 'children' === attribute;
return 'key' === attribute || 'children' === attribute;
}
/**

@@ -276,11 +274,12 @@ * Returns the normal form of the element's attribute value for HTML.

*/
function getNormalAttributeValue(attribute, value) {
switch (attribute) {
case 'style':
return renderStyle(value);
}
switch (attribute) {
case 'style':
return renderStyle(value);
}
return value;
return value;
}
/**

@@ -293,14 +292,39 @@ * Returns the normal form of the element's attribute name for HTML.

*/
function getNormalAttributeName(attribute) {
switch (attribute) {
case 'htmlFor':
return 'for';
switch (attribute) {
case 'htmlFor':
return 'for';
case 'className':
return 'class';
}
case 'className':
return 'class';
}
return attribute.toLowerCase();
return attribute.toLowerCase();
}
/**
* Returns the normal form of the style property name for HTML.
*
* - Converts property names to kebab-case, e.g. 'backgroundColor' → 'background-color'
* - Leaves custom attributes alone, e.g. '--myBackgroundColor' → '--myBackgroundColor'
* - Converts vendor-prefixed property names to -kebab-case, e.g. 'MozTransform' → '-moz-transform'
*
* @param {string} property Property name.
*
* @return {string} Normalized property name.
*/
function getNormalStylePropertyName(property) {
if ((0, _lodash.startsWith)(property, '--')) {
return property;
}
if (hasPrefix(property, ['ms', 'O', 'Moz', 'Webkit'])) {
return '-' + (0, _lodash.kebabCase)(property);
}
return (0, _lodash.kebabCase)(property);
}
/**

@@ -315,10 +339,11 @@ * Returns the normal form of the style property value for HTML. Appends a

*/
function getNormalStyleValue(property, value) {
if (typeof value === 'number' && 0 !== value && !CSS_PROPERTIES_SUPPORTS_UNITLESS.has(property)) {
return value + 'px';
}
return value;
function getNormalStylePropertyValue(property, value) {
if (typeof value === 'number' && 0 !== value && !CSS_PROPERTIES_SUPPORTS_UNITLESS.has(property)) {
return value + 'px';
}
return value;
}
/**

@@ -332,54 +357,54 @@ * Serializes a React element to string.

*/
function renderElement(element) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (null === element || undefined === element || false === element) {
return '';
}
if (Array.isArray(element)) {
return renderChildren(element, context);
}
function renderElement(element) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
switch (typeof element === 'undefined' ? 'undefined' : (0, _typeof3.default)(element)) {
case 'string':
return escapeHTML(element);
if (null === element || undefined === element || false === element) {
return '';
}
case 'number':
return element.toString();
}
if (Array.isArray(element)) {
return renderChildren(element, context);
}
var tagName = element.type,
props = element.props;
switch ((0, _typeof2.default)(element)) {
case 'string':
return escapeHTML(element);
case 'number':
return element.toString();
}
switch (tagName) {
case _.Fragment:
return renderChildren(props.children, context);
var tagName = element.type,
props = element.props;
case _.RawHTML:
var children = props.children,
wrapperProps = (0, _objectWithoutProperties3.default)(props, ['children']);
switch (tagName) {
case _.Fragment:
return renderChildren(props.children, context);
case _.RawHTML:
var children = props.children,
wrapperProps = (0, _objectWithoutProperties2.default)(props, ["children"]);
return renderNativeComponent((0, _lodash.isEmpty)(wrapperProps) ? null : 'div', (0, _objectSpread2.default)({}, wrapperProps, {
dangerouslySetInnerHTML: {
__html: children
}
}), context);
}
return renderNativeComponent((0, _lodash.isEmpty)(wrapperProps) ? null : 'div', (0, _extends3.default)({}, wrapperProps, {
dangerouslySetInnerHTML: { __html: children }
}), context);
}
switch ((0, _typeof2.default)(tagName)) {
case 'string':
return renderNativeComponent(tagName, props, context);
switch (typeof tagName === 'undefined' ? 'undefined' : (0, _typeof3.default)(tagName)) {
case 'string':
return renderNativeComponent(tagName, props, context);
case 'function':
if (tagName.prototype && typeof tagName.prototype.render === 'function') {
return renderComponent(tagName, props, context);
}
case 'function':
if (tagName.prototype && typeof tagName.prototype.render === 'function') {
return renderComponent(tagName, props, context);
}
return renderElement(tagName(props, context), context);
}
return renderElement(tagName(props, context), context);
}
return '';
return '';
}
/**

@@ -395,32 +420,33 @@ * Serializes a native component type to string.

*/
function renderNativeComponent(type, props) {
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var content = '';
var content = '';
if (type === 'textarea' && props.hasOwnProperty('value')) {
// Textarea children can be assigned as value prop. If it is, render in
// place of children. Ensure to omit so it is not assigned as attribute
// as well.
content = renderChildren(props.value, context);
props = (0, _lodash.omit)(props, 'value');
} else if (props.dangerouslySetInnerHTML && typeof props.dangerouslySetInnerHTML.__html === 'string') {
// Dangerous content is left unescaped.
content = props.dangerouslySetInnerHTML.__html;
} else if (typeof props.children !== 'undefined') {
content = renderChildren(props.children, context);
}
if (type === 'textarea' && props.hasOwnProperty('value')) {
// Textarea children can be assigned as value prop. If it is, render in
// place of children. Ensure to omit so it is not assigned as attribute
// as well.
content = renderChildren(props.value, context);
props = (0, _lodash.omit)(props, 'value');
} else if (props.dangerouslySetInnerHTML && typeof props.dangerouslySetInnerHTML.__html === 'string') {
// Dangerous content is left unescaped.
content = props.dangerouslySetInnerHTML.__html;
} else if (typeof props.children !== 'undefined') {
content = renderChildren(props.children, context);
}
if (!type) {
return content;
}
if (!type) {
return content;
}
var attributes = renderAttributes(props);
var attributes = renderAttributes(props);
if (SELF_CLOSING_TAGS.has(type)) {
return '<' + type + attributes + '/>';
}
if (SELF_CLOSING_TAGS.has(type)) {
return '<' + type + attributes + '/>';
}
return '<' + type + attributes + '>' + content + '</' + type + '>';
return '<' + type + attributes + '>' + content + '</' + type + '>';
}
/**

@@ -435,25 +461,24 @@ * Serializes a non-native component type to string.

*/
function renderComponent(Component, props) {
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var instance = new Component(props, context);
if (typeof instance.componentWillMount === 'function') {
instance.componentWillMount();
(0, _deprecated2.default)('componentWillMount', {
version: '3.3',
alternative: 'the constructor',
plugin: 'Gutenberg'
});
}
function renderComponent(Component, props) {
var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var instance = new Component(props, context);
if (typeof instance.getChildContext === 'function') {
(0, _assign2.default)(context, instance.getChildContext());
}
if (typeof instance.componentWillMount === 'function') {
instance.componentWillMount();
(0, _deprecated.default)('componentWillMount', {
version: '3.3',
alternative: 'the constructor',
plugin: 'Gutenberg'
});
}
var html = renderElement(instance.render(), context);
if (typeof instance.getChildContext === 'function') {
(0, _assign.default)(context, instance.getChildContext());
}
return html;
var html = renderElement(instance.render(), context);
return html;
}
/**

@@ -467,18 +492,16 @@ * Serializes an array of children to string.

*/
function renderChildren(children) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var result = '';
children = (0, _lodash.castArray)(children);
function renderChildren(children) {
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var result = '';
children = (0, _lodash.castArray)(children);
for (var i = 0; i < children.length; i++) {
var child = children[i];
for (var i = 0; i < children.length; i++) {
var child = children[i];
result += renderElement(child, context);
}
result += renderElement(child, context);
}
return result;
return result;
}
/**

@@ -491,51 +514,48 @@ * Renders a props object as a string of HTML attributes.

*/
function renderAttributes(props) {
var result = '';
var result = '';
for (var key in props) {
var attribute = getNormalAttributeName(key);
var value = getNormalAttributeValue(key, props[key]);
for (var key in props) {
var attribute = getNormalAttributeName(key);
var value = getNormalAttributeValue(key, props[key]); // If value is not of serializeable type, skip.
// If value is not of serializeable type, skip.
if (!ATTRIBUTES_TYPES.has(typeof value === 'undefined' ? 'undefined' : (0, _typeof3.default)(value))) {
continue;
}
if (!ATTRIBUTES_TYPES.has((0, _typeof2.default)(value))) {
continue;
} // Don't render internal attribute names.
// Don't render internal attribute names.
if (isInternalAttribute(key)) {
continue;
}
var isBooleanAttribute = BOOLEAN_ATTRIBUTES.has(attribute);
if (isInternalAttribute(key)) {
continue;
}
// Boolean attribute should be omitted outright if its value is false.
if (isBooleanAttribute && value === false) {
continue;
}
var isBooleanAttribute = BOOLEAN_ATTRIBUTES.has(attribute); // Boolean attribute should be omitted outright if its value is false.
var isMeaningfulAttribute = isBooleanAttribute || hasPrefix(key, ['data-', 'aria-']) || ENUMERATED_ATTRIBUTES.has(attribute);
if (isBooleanAttribute && value === false) {
continue;
}
// Only write boolean value as attribute if meaningful.
if (typeof value === 'boolean' && !isMeaningfulAttribute) {
continue;
}
var isMeaningfulAttribute = isBooleanAttribute || hasPrefix(key, ['data-', 'aria-']) || ENUMERATED_ATTRIBUTES.has(attribute); // Only write boolean value as attribute if meaningful.
result += ' ' + attribute;
if (typeof value === 'boolean' && !isMeaningfulAttribute) {
continue;
}
// Boolean attributes should write attribute name, but without value.
// Mere presence of attribute name is effective truthiness.
if (isBooleanAttribute) {
continue;
}
result += ' ' + attribute; // Boolean attributes should write attribute name, but without value.
// Mere presence of attribute name is effective truthiness.
if (typeof value === 'string') {
value = escapeAttribute(value);
}
if (isBooleanAttribute) {
continue;
}
result += '="' + value + '"';
}
if (typeof value === 'string') {
value = escapeAttribute(value);
}
return result;
result += '="' + value + '"';
}
return result;
}
/**

@@ -548,23 +568,29 @@ * Renders a style object as a string attribute value.

*/
function renderStyle(style) {
var result = void 0;
var result;
for (var property in style) {
var value = style[property];
if (null === value || undefined === value) {
continue;
}
for (var property in style) {
var value = style[property];
if (result) {
result += ';';
} else {
result = '';
}
if (null === value || undefined === value) {
continue;
}
result += (0, _lodash.kebabCase)(property) + ':' + getNormalStyleValue(property, value);
}
if (result) {
result += ';';
} else {
result = '';
}
return result;
var normalName = getNormalStylePropertyName(property);
var normalValue = getNormalStylePropertyValue(property, value);
result += normalName + ':' + normalValue;
}
return result;
}
exports.default = renderElement;
var _default = renderElement;
exports.default = _default;

18

package.json
{
"name": "@wordpress/element",
"version": "1.0.0-alpha.2",
"version": "1.0.0-alpha.3",
"description": "Element React module for WordPress",

@@ -22,15 +22,17 @@ "author": "The WordPress Contributors",

"module": "build-module/index.js",
"react-native": "src/index",
"dependencies": {
"@wordpress/deprecated": "^1.0.0-alpha.2",
"@wordpress/is-shallow-equal": "1.0.2",
"lodash": "4.17.5",
"react": "16.4.1",
"react-dom": "16.4.1"
"@wordpress/deprecated": "^1.0.0-alpha.3",
"@wordpress/is-shallow-equal": "^1.1.0",
"lodash": "^4.17.10",
"react": "^16.4.1",
"react-dom": "^16.4.1"
},
"devDependencies": {
"enzyme": "3.3.0"
"enzyme": "^3.3.0"
},
"publishConfig": {
"access": "public"
}
},
"gitHead": "8827c049ec802471f51a5cb906d9096ffc1b4e48"
}

10

src/index.js

@@ -33,2 +33,3 @@ /**

import serialize from './serialize';
import { RawHTML } from './index-common';

@@ -237,10 +238,3 @@ /**

*/
export function RawHTML( { children, ...props } ) {
// The DIV wrapper will be stripped by serializer, unless there are
// non-children props present.
return createElement( 'div', {
dangerouslySetInnerHTML: { __html: children },
...props,
} );
}
export { RawHTML };

@@ -247,0 +241,0 @@ /**

13

src/index.native.js

@@ -13,2 +13,3 @@ /**

import serialize from './serialize';
import { RawHTML } from './index-common';

@@ -42,1 +43,13 @@ /**

export { serialize as renderToString };
/**
* Component used as equivalent of Fragment with unescaped HTML, in cases where
* it is desirable to render dangerous HTML without needing a wrapper element.
* To preserve additional props, a `div` wrapper _will_ be created if any props
* aside from `children` are passed.
*
* @param {string} props.children HTML to render.
*
* @return {WPElement} Dangerously-rendering element.
*/
export { RawHTML };

31

src/serialize.js

@@ -31,3 +31,3 @@ /**

*/
import { flowRight, isEmpty, castArray, omit, kebabCase } from 'lodash';
import { flowRight, isEmpty, castArray, omit, startsWith, kebabCase } from 'lodash';

@@ -364,2 +364,25 @@ /**

/**
* Returns the normal form of the style property name for HTML.
*
* - Converts property names to kebab-case, e.g. 'backgroundColor' → 'background-color'
* - Leaves custom attributes alone, e.g. '--myBackgroundColor' → '--myBackgroundColor'
* - Converts vendor-prefixed property names to -kebab-case, e.g. 'MozTransform' → '-moz-transform'
*
* @param {string} property Property name.
*
* @return {string} Normalized property name.
*/
function getNormalStylePropertyName( property ) {
if ( startsWith( property, '--' ) ) {
return property;
}
if ( hasPrefix( property, [ 'ms', 'O', 'Moz', 'Webkit' ] ) ) {
return '-' + kebabCase( property );
}
return kebabCase( property );
}
/**
* Returns the normal form of the style property value for HTML. Appends a

@@ -373,3 +396,3 @@ * default pixel unit if numeric, not a unitless property, and not zero.

*/
function getNormalStyleValue( property, value ) {
function getNormalStylePropertyValue( property, value ) {
if ( typeof value === 'number' && 0 !== value &&

@@ -615,3 +638,5 @@ ! CSS_PROPERTIES_SUPPORTS_UNITLESS.has( property ) ) {

result += kebabCase( property ) + ':' + getNormalStyleValue( property, value );
const normalName = getNormalStylePropertyName( property );
const normalValue = getNormalStylePropertyValue( property, value );
result += normalName + ':' + normalValue;
}

@@ -618,0 +643,0 @@

19

src/test/serialize.js

@@ -561,2 +561,21 @@ /**

it( 'should not kebab-case custom properties', () => {
const result = renderStyle( {
'--myBackgroundColor': 'palegoldenrod',
} );
expect( result ).toBe( '--myBackgroundColor:palegoldenrod' );
} );
it( 'should -kebab-case style properties with a vendor prefix', () => {
const result = renderStyle( {
msTransform: 'none',
OTransform: 'none',
MozTransform: 'none',
WebkitTransform: 'none',
} );
expect( result ).toBe( '-ms-transform:none;-o-transform:none;-moz-transform:none;-webkit-transform:none' );
} );
describe( 'value unit', () => {

@@ -563,0 +582,0 @@ it( 'should not render zero unit', () => {

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