@wordpress/element 5.16.0 → 5.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/create-interpolate-element.js +19 -49
- package/build/create-interpolate-element.js.map +1 -1
- package/build/index.js +0 -11
- package/build/index.js.map +1 -1
- package/build/platform.android.js +3 -4
- package/build/platform.android.js.map +1 -1
- package/build/platform.ios.js +3 -4
- package/build/platform.ios.js.map +1 -1
- package/build/platform.js +0 -2
- package/build/platform.js.map +1 -1
- package/build/raw-html.js +5 -6
- package/build/raw-html.js.map +1 -1
- package/build/react-platform.js +0 -2
- package/build/react-platform.js.map +1 -1
- package/build/react-platform.native.js +0 -3
- package/build/react-platform.native.js.map +1 -1
- package/build/react.js +1 -7
- package/build/react.js.map +1 -1
- package/build/serialize.js +37 -100
- package/build/serialize.js.map +1 -1
- package/build/utils.js +0 -4
- package/build/utils.js.map +1 -1
- package/build-module/create-interpolate-element.js +19 -47
- package/build-module/create-interpolate-element.js.map +1 -1
- package/build-module/index.js.map +1 -1
- package/build-module/platform.android.js +2 -2
- package/build-module/platform.android.js.map +1 -1
- package/build-module/platform.ios.js +2 -2
- package/build-module/platform.ios.js.map +1 -1
- package/build-module/platform.js +0 -1
- package/build-module/platform.js.map +1 -1
- package/build-module/raw-html.js +6 -4
- package/build-module/raw-html.js.map +1 -1
- package/build-module/react-platform.js +8 -8
- package/build-module/react-platform.js.map +1 -1
- package/build-module/react-platform.native.js +1 -1
- package/build-module/react-platform.native.js.map +1 -1
- package/build-module/react.js +31 -33
- package/build-module/react.js.map +1 -1
- package/build-module/serialize.js +39 -89
- package/build-module/serialize.js.map +1 -1
- package/build-module/utils.js +0 -2
- package/build-module/utils.js.map +1 -1
- package/build-types/platform.d.ts +2 -2
- package/build-types/react-platform.d.ts +8 -8
- package/build-types/react-platform.d.ts.map +1 -1
- package/build-types/react.d.ts +29 -29
- package/build-types/react.d.ts.map +1 -1
- package/package.json +3 -3
- package/tsconfig.tsbuildinfo +1 -1
package/build/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["_react","require","concatChildren","childrenArguments","reduce","accumulator","children","i","Children","forEach","child","j","cloneElement","key","join","push","switchChildrenNodeName","nodeName","map","elt","index","valueOf","createElement","childrenProp","props"],"sources":["@wordpress/element/src/react.js"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line @typescript-eslint/no-restricted-imports\nimport {\n\tChildren,\n\tcloneElement,\n\tComponent,\n\tcreateContext,\n\tcreateElement,\n\tcreateRef,\n\tforwardRef,\n\tFragment,\n\tisValidElement,\n\tmemo,\n\tStrictMode,\n\tuseCallback,\n\tuseContext,\n\tuseDebugValue,\n\tuseDeferredValue,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseImperativeHandle,\n\tuseInsertionEffect,\n\tuseLayoutEffect,\n\tuseReducer,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n\tuseTransition,\n\tstartTransition,\n\tlazy,\n\tSuspense,\n} from 'react';\n\n/**\n * Object containing a React element.\n *\n * @typedef {import('react').ReactElement} WPElement\n */\n\n/**\n * Object containing a React component.\n *\n * @typedef {import('react').ComponentType} WPComponent\n */\n\n/**\n * Object containing a React synthetic event.\n *\n * @typedef {import('react').SyntheticEvent} WPSyntheticEvent\n */\n\n/**\n * Object containing a React synthetic event.\n *\n * @template T\n * @typedef {import('react').RefObject<T>} RefObject<T>\n */\n\n/**\n * Object that provides utilities for dealing with React children.\n */\nexport { Children };\n\n/**\n * Creates a copy of an element with extended props.\n *\n * @param {WPElement} element Element\n * @param {?Object} props Props to apply to cloned element\n *\n * @return {WPElement} Cloned element.\n */\nexport { cloneElement };\n\n/**\n * A base class to create WordPress Components (Refs, state and lifecycle hooks)\n */\nexport { Component };\n\n/**\n * Creates a context object containing two components: a provider and consumer.\n *\n * @param {Object} defaultValue A default data stored in the context.\n *\n * @return {Object} Context object.\n */\nexport { createContext };\n\n/**\n * Returns a new element of given type. Type can be either a string tag name or\n * another function which itself returns an element.\n *\n * @param {?(string|Function)} type Tag name or element creator\n * @param {Object} props Element properties, either attribute\n * set to apply to DOM node or values to\n * pass through to element creator\n * @param {...WPElement} children Descendant elements\n *\n * @return {WPElement} Element.\n */\nexport { createElement };\n\n/**\n * Returns an object tracking a reference to a rendered element via its\n * `current` property as either a DOMElement or Element, dependent upon the\n * type of element rendered with the ref attribute.\n *\n * @return {Object} Ref object.\n */\nexport { createRef };\n\n/**\n * Component enhancer used to enable passing a ref to its wrapped component.\n * Pass a function argument which receives `props` and `ref` as its arguments,\n * returning an element using the forwarded ref. The return value is a new\n * component which forwards its ref.\n *\n * @param {Function} forwarder Function passed `props` and `ref`, expected to\n * return an element.\n *\n * @return {WPComponent} Enhanced component.\n */\nexport { forwardRef };\n\n/**\n * A component which renders its children without any wrapping element.\n */\nexport { Fragment };\n\n/**\n * Checks if an object is a valid WPElement.\n *\n * @param {Object} objectToCheck The object to be checked.\n *\n * @return {boolean} true if objectToTest is a valid WPElement and false otherwise.\n */\nexport { isValidElement };\n\n/**\n * @see https://reactjs.org/docs/react-api.html#reactmemo\n */\nexport { memo };\n\n/**\n * Component that activates additional checks and warnings for its descendants.\n */\nexport { StrictMode };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usecallback\n */\nexport { useCallback };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usecontext\n */\nexport { useContext };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue\n */\nexport { useDebugValue };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usedeferredvalue\n */\nexport { useDeferredValue };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#useeffect\n */\nexport { useEffect };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#useid\n */\nexport { useId };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle\n */\nexport { useImperativeHandle };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#useinsertioneffect\n */\nexport { useInsertionEffect };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n */\nexport { useLayoutEffect };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usememo\n */\nexport { useMemo };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usereducer\n */\nexport { useReducer };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#useref\n */\nexport { useRef };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usestate\n */\nexport { useState };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore\n */\nexport { useSyncExternalStore };\n\n/**\n * @see https://reactjs.org/docs/hooks-reference.html#usetransition\n */\nexport { useTransition };\n\n/**\n * @see https://reactjs.org/docs/react-api.html#starttransition\n */\nexport { startTransition };\n\n/**\n * @see https://reactjs.org/docs/react-api.html#reactlazy\n */\nexport { lazy };\n\n/**\n * @see https://reactjs.org/docs/react-api.html#reactsuspense\n */\nexport { Suspense };\n\n/**\n * Concatenate two or more React children objects.\n *\n * @param {...?Object} childrenArguments Array of children arguments (array of arrays/strings/objects) to concatenate.\n *\n * @return {Array} The concatenated value.\n */\nexport function concatChildren( ...childrenArguments ) {\n\treturn childrenArguments.reduce( ( accumulator, children, i ) => {\n\t\tChildren.forEach( children, ( child, j ) => {\n\t\t\tif ( child && 'string' !== typeof child ) {\n\t\t\t\tchild = cloneElement( child, {\n\t\t\t\t\tkey: [ i, j ].join(),\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\taccumulator.push( child );\n\t\t} );\n\n\t\treturn accumulator;\n\t}, [] );\n}\n\n/**\n * Switches the nodeName of all the elements in the children object.\n *\n * @param {?Object} children Children object.\n * @param {string} nodeName Node name.\n *\n * @return {?Object} The updated children object.\n */\nexport function switchChildrenNodeName( children, nodeName ) {\n\treturn (\n\t\tchildren &&\n\t\tChildren.map( children, ( elt, index ) => {\n\t\t\tif ( typeof elt?.valueOf() === 'string' ) {\n\t\t\t\treturn createElement( nodeName, { key: index }, elt );\n\t\t\t}\n\t\t\tconst { children: childrenProp, ...props } = elt.props;\n\t\t\treturn createElement(\n\t\t\t\tnodeName,\n\t\t\t\t{ key: index, ...props },\n\t\t\t\tchildrenProp\n\t\t\t);\n\t\t} )\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAJA;AACA;AACA;AACA;;AAiCA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAAE,GAAGC,iBAAiB,EAAG;EACtD,OAAOA,iBAAiB,CAACC,MAAM,CAAE,CAAEC,WAAW,EAAEC,QAAQ,EAAEC,CAAC,KAAM;IAChEC,eAAQ,CAACC,OAAO,CAAEH,QAAQ,EAAE,CAAEI,KAAK,EAAEC,CAAC,KAAM;MAC3C,IAAKD,KAAK,IAAI,QAAQ,KAAK,OAAOA,KAAK,EAAG;QACzCA,KAAK,GAAG,IAAAE,mBAAY,EAAEF,KAAK,EAAE;UAC5BG,GAAG,EAAE,CAAEN,CAAC,EAAEI,CAAC,CAAE,CAACG,IAAI,CAAC;QACpB,CAAE,CAAC;MACJ;MAEAT,WAAW,CAACU,IAAI,CAAEL,KAAM,CAAC;IAC1B,CAAE,CAAC;IAEH,OAAOL,WAAW;EACnB,CAAC,EAAE,EAAG,CAAC;AACR;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASW,sBAAsBA,CAAEV,QAAQ,EAAEW,QAAQ,EAAG;EAC5D,OACCX,QAAQ,IACRE,eAAQ,CAACU,GAAG,CAAEZ,QAAQ,EAAE,CAAEa,GAAG,EAAEC,KAAK,KAAM;IACzC,IAAK,OAAOD,GAAG,EAAEE,OAAO,CAAC,CAAC,KAAK,QAAQ,EAAG;MACzC,OAAO,IAAAC,oBAAa,EAAEL,QAAQ,EAAE;QAAEJ,GAAG,EAAEO;MAAM,CAAC,EAAED,GAAI,CAAC;IACtD;IACA,MAAM;MAAEb,QAAQ,EAAEiB,YAAY;MAAE,GAAGC;IAAM,CAAC,GAAGL,GAAG,CAACK,KAAK;IACtD,OAAO,IAAAF,oBAAa,EACnBL,QAAQ,EACR;MAAEJ,GAAG,EAAEO,KAAK;MAAE,GAAGI;IAAM,CAAC,EACxBD,YACD,CAAC;EACF,CAAE,CAAC;AAEL"}
|
package/build/serialize.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -12,17 +11,11 @@ exports.renderComponent = renderComponent;
|
|
|
12
11
|
exports.renderElement = renderElement;
|
|
13
12
|
exports.renderNativeComponent = renderNativeComponent;
|
|
14
13
|
exports.renderStyle = renderStyle;
|
|
15
|
-
|
|
16
14
|
var _isPlainObject = require("is-plain-object");
|
|
17
|
-
|
|
18
15
|
var _changeCase = require("change-case");
|
|
19
|
-
|
|
20
16
|
var _escapeHtml = require("@wordpress/escape-html");
|
|
21
|
-
|
|
22
17
|
var _react = require("./react");
|
|
23
|
-
|
|
24
18
|
var _rawHtml = _interopRequireDefault(require("./raw-html"));
|
|
25
|
-
|
|
26
19
|
/**
|
|
27
20
|
* Parts of this source were derived and modified from fast-react-render,
|
|
28
21
|
* released under the MIT license.
|
|
@@ -63,6 +56,7 @@ var _rawHtml = _interopRequireDefault(require("./raw-html"));
|
|
|
63
56
|
*/
|
|
64
57
|
|
|
65
58
|
/** @typedef {import('./react').WPElement} WPElement */
|
|
59
|
+
|
|
66
60
|
const {
|
|
67
61
|
Provider,
|
|
68
62
|
Consumer
|
|
@@ -70,20 +64,21 @@ const {
|
|
|
70
64
|
const ForwardRef = (0, _react.forwardRef)(() => {
|
|
71
65
|
return null;
|
|
72
66
|
});
|
|
67
|
+
|
|
73
68
|
/**
|
|
74
69
|
* Valid attribute types.
|
|
75
70
|
*
|
|
76
71
|
* @type {Set<string>}
|
|
77
72
|
*/
|
|
78
|
-
|
|
79
73
|
const ATTRIBUTES_TYPES = new Set(['string', 'boolean', 'number']);
|
|
74
|
+
|
|
80
75
|
/**
|
|
81
76
|
* Element tags which can be self-closing.
|
|
82
77
|
*
|
|
83
78
|
* @type {Set<string>}
|
|
84
79
|
*/
|
|
85
|
-
|
|
86
80
|
const SELF_CLOSING_TAGS = new Set(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
|
|
81
|
+
|
|
87
82
|
/**
|
|
88
83
|
* Boolean attributes are attributes whose presence as being assigned is
|
|
89
84
|
* meaningful, even if only empty.
|
|
@@ -99,8 +94,8 @@ const SELF_CLOSING_TAGS = new Set(['area', 'base', 'br', 'col', 'command', 'embe
|
|
|
99
94
|
*
|
|
100
95
|
* @type {Set<string>}
|
|
101
96
|
*/
|
|
102
|
-
|
|
103
97
|
const BOOLEAN_ATTRIBUTES = new Set(['allowfullscreen', 'allowpaymentrequest', 'allowusermedia', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'defer', 'disabled', 'download', 'formnovalidate', 'hidden', 'ismap', 'itemscope', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'selected', 'typemustmatch']);
|
|
98
|
+
|
|
104
99
|
/**
|
|
105
100
|
* Enumerated attributes are attributes which must be of a specific value form.
|
|
106
101
|
* Like boolean attributes, these are meaningful if specified, even if not of a
|
|
@@ -121,8 +116,8 @@ const BOOLEAN_ATTRIBUTES = new Set(['allowfullscreen', 'allowpaymentrequest', 'a
|
|
|
121
116
|
*
|
|
122
117
|
* @type {Set<string>}
|
|
123
118
|
*/
|
|
124
|
-
|
|
125
119
|
const 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']);
|
|
120
|
+
|
|
126
121
|
/**
|
|
127
122
|
* Set of CSS style properties which support assignment of unitless numbers.
|
|
128
123
|
* Used in rendering of style properties, where `px` unit is assumed unless
|
|
@@ -141,8 +136,8 @@ const ENUMERATED_ATTRIBUTES = new Set(['autocapitalize', 'autocomplete', 'charse
|
|
|
141
136
|
*
|
|
142
137
|
* @type {Set<string>}
|
|
143
138
|
*/
|
|
144
|
-
|
|
145
139
|
const 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']);
|
|
140
|
+
|
|
146
141
|
/**
|
|
147
142
|
* Returns true if the specified string is prefixed by one of an array of
|
|
148
143
|
* possible prefixes.
|
|
@@ -152,10 +147,10 @@ const CSS_PROPERTIES_SUPPORTS_UNITLESS = new Set(['animation', 'animationIterati
|
|
|
152
147
|
*
|
|
153
148
|
* @return {boolean} Whether string has prefix.
|
|
154
149
|
*/
|
|
155
|
-
|
|
156
150
|
function hasPrefix(string, prefixes) {
|
|
157
151
|
return prefixes.some(prefix => string.indexOf(prefix) === 0);
|
|
158
152
|
}
|
|
153
|
+
|
|
159
154
|
/**
|
|
160
155
|
* Returns true if the given prop name should be ignored in attributes
|
|
161
156
|
* serialization, or false otherwise.
|
|
@@ -164,11 +159,10 @@ function hasPrefix(string, prefixes) {
|
|
|
164
159
|
*
|
|
165
160
|
* @return {boolean} Whether attribute should be ignored.
|
|
166
161
|
*/
|
|
167
|
-
|
|
168
|
-
|
|
169
162
|
function isInternalAttribute(attribute) {
|
|
170
163
|
return 'key' === attribute || 'children' === attribute;
|
|
171
164
|
}
|
|
165
|
+
|
|
172
166
|
/**
|
|
173
167
|
* Returns the normal form of the element's attribute value for HTML.
|
|
174
168
|
*
|
|
@@ -177,14 +171,11 @@ function isInternalAttribute(attribute) {
|
|
|
177
171
|
*
|
|
178
172
|
* @return {*} Normalized attribute value.
|
|
179
173
|
*/
|
|
180
|
-
|
|
181
|
-
|
|
182
174
|
function getNormalAttributeValue(attribute, value) {
|
|
183
175
|
switch (attribute) {
|
|
184
176
|
case 'style':
|
|
185
177
|
return renderStyle(value);
|
|
186
178
|
}
|
|
187
|
-
|
|
188
179
|
return value;
|
|
189
180
|
}
|
|
190
181
|
/**
|
|
@@ -193,34 +184,33 @@ function getNormalAttributeValue(attribute, value) {
|
|
|
193
184
|
*
|
|
194
185
|
* List from: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute.
|
|
195
186
|
*/
|
|
196
|
-
|
|
197
|
-
|
|
198
187
|
const SVG_ATTRIBUTE_WITH_DASHES_LIST = ['accentHeight', 'alignmentBaseline', 'arabicForm', 'baselineShift', 'capHeight', 'clipPath', 'clipRule', 'colorInterpolation', 'colorInterpolationFilters', 'colorProfile', 'colorRendering', 'dominantBaseline', 'enableBackground', 'fillOpacity', 'fillRule', 'floodColor', 'floodOpacity', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontWeight', 'glyphName', 'glyphOrientationHorizontal', 'glyphOrientationVertical', 'horizAdvX', 'horizOriginX', 'imageRendering', 'letterSpacing', 'lightingColor', 'markerEnd', 'markerMid', 'markerStart', 'overlinePosition', 'overlineThickness', 'paintOrder', 'panose1', 'pointerEvents', 'renderingIntent', 'shapeRendering', 'stopColor', 'stopOpacity', 'strikethroughPosition', 'strikethroughThickness', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'textAnchor', 'textDecoration', 'textRendering', 'underlinePosition', 'underlineThickness', 'unicodeBidi', 'unicodeRange', 'unitsPerEm', 'vAlphabetic', 'vHanging', 'vIdeographic', 'vMathematical', 'vectorEffect', 'vertAdvY', 'vertOriginX', 'vertOriginY', 'wordSpacing', 'writingMode', 'xmlnsXlink', 'xHeight'].reduce((map, attribute) => {
|
|
199
188
|
// The keys are lower-cased for more robust lookup.
|
|
200
189
|
map[attribute.toLowerCase()] = attribute;
|
|
201
190
|
return map;
|
|
202
191
|
}, {});
|
|
192
|
+
|
|
203
193
|
/**
|
|
204
194
|
* This is a map of all case-sensitive SVG attributes. Map(lowercase key => proper case attribute).
|
|
205
195
|
* The keys are lower-cased for more robust lookup.
|
|
206
196
|
* Note that this list only contains attributes that contain at least one capital letter.
|
|
207
197
|
* Lowercase attributes don't need mapping, since we lowercase all attributes by default.
|
|
208
198
|
*/
|
|
209
|
-
|
|
210
199
|
const CASE_SENSITIVE_SVG_ATTRIBUTES = ['allowReorder', 'attributeName', 'attributeType', 'autoReverse', 'baseFrequency', 'baseProfile', 'calcMode', 'clipPathUnits', 'contentScriptType', 'contentStyleType', 'diffuseConstant', 'edgeMode', 'externalResourcesRequired', 'filterRes', 'filterUnits', 'glyphRef', 'gradientTransform', 'gradientUnits', 'kernelMatrix', 'kernelUnitLength', 'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust', 'limitingConeAngle', 'markerHeight', 'markerUnits', 'markerWidth', 'maskContentUnits', 'maskUnits', 'numOctaves', 'pathLength', 'patternContentUnits', 'patternTransform', 'patternUnits', 'pointsAtX', 'pointsAtY', 'pointsAtZ', 'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits', 'refX', 'refY', 'repeatCount', 'repeatDur', 'requiredExtensions', 'requiredFeatures', 'specularConstant', 'specularExponent', 'spreadMethod', 'startOffset', 'stdDeviation', 'stitchTiles', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'surfaceScale', 'systemLanguage', 'tableValues', 'targetX', 'targetY', 'textLength', 'viewBox', 'viewTarget', 'xChannelSelector', 'yChannelSelector'].reduce((map, attribute) => {
|
|
211
200
|
// The keys are lower-cased for more robust lookup.
|
|
212
201
|
map[attribute.toLowerCase()] = attribute;
|
|
213
202
|
return map;
|
|
214
203
|
}, {});
|
|
204
|
+
|
|
215
205
|
/**
|
|
216
206
|
* This is a map of all SVG attributes that have colons.
|
|
217
207
|
* Keys are lower-cased and stripped of their colons for more robust lookup.
|
|
218
208
|
*/
|
|
219
|
-
|
|
220
209
|
const SVG_ATTRIBUTES_WITH_COLONS = ['xlink:actuate', 'xlink:arcrole', 'xlink:href', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type', 'xml:base', 'xml:lang', 'xml:space', 'xmlns:xlink'].reduce((map, attribute) => {
|
|
221
210
|
map[attribute.replace(':', '').toLowerCase()] = attribute;
|
|
222
211
|
return map;
|
|
223
212
|
}, {});
|
|
213
|
+
|
|
224
214
|
/**
|
|
225
215
|
* Returns the normal form of the element's attribute name for HTML.
|
|
226
216
|
*
|
|
@@ -228,18 +218,14 @@ const SVG_ATTRIBUTES_WITH_COLONS = ['xlink:actuate', 'xlink:arcrole', 'xlink:hre
|
|
|
228
218
|
*
|
|
229
219
|
* @return {string} Normalized attribute name.
|
|
230
220
|
*/
|
|
231
|
-
|
|
232
221
|
function getNormalAttributeName(attribute) {
|
|
233
222
|
switch (attribute) {
|
|
234
223
|
case 'htmlFor':
|
|
235
224
|
return 'for';
|
|
236
|
-
|
|
237
225
|
case 'className':
|
|
238
226
|
return 'class';
|
|
239
227
|
}
|
|
240
|
-
|
|
241
228
|
const attributeLowerCase = attribute.toLowerCase();
|
|
242
|
-
|
|
243
229
|
if (CASE_SENSITIVE_SVG_ATTRIBUTES[attributeLowerCase]) {
|
|
244
230
|
return CASE_SENSITIVE_SVG_ATTRIBUTES[attributeLowerCase];
|
|
245
231
|
} else if (SVG_ATTRIBUTE_WITH_DASHES_LIST[attributeLowerCase]) {
|
|
@@ -247,9 +233,9 @@ function getNormalAttributeName(attribute) {
|
|
|
247
233
|
} else if (SVG_ATTRIBUTES_WITH_COLONS[attributeLowerCase]) {
|
|
248
234
|
return SVG_ATTRIBUTES_WITH_COLONS[attributeLowerCase];
|
|
249
235
|
}
|
|
250
|
-
|
|
251
236
|
return attributeLowerCase;
|
|
252
237
|
}
|
|
238
|
+
|
|
253
239
|
/**
|
|
254
240
|
* Returns the normal form of the style property name for HTML.
|
|
255
241
|
*
|
|
@@ -261,19 +247,16 @@ function getNormalAttributeName(attribute) {
|
|
|
261
247
|
*
|
|
262
248
|
* @return {string} Normalized property name.
|
|
263
249
|
*/
|
|
264
|
-
|
|
265
|
-
|
|
266
250
|
function getNormalStylePropertyName(property) {
|
|
267
251
|
if (property.startsWith('--')) {
|
|
268
252
|
return property;
|
|
269
253
|
}
|
|
270
|
-
|
|
271
254
|
if (hasPrefix(property, ['ms', 'O', 'Moz', 'Webkit'])) {
|
|
272
255
|
return '-' + (0, _changeCase.paramCase)(property);
|
|
273
256
|
}
|
|
274
|
-
|
|
275
257
|
return (0, _changeCase.paramCase)(property);
|
|
276
258
|
}
|
|
259
|
+
|
|
277
260
|
/**
|
|
278
261
|
* Returns the normal form of the style property value for HTML. Appends a
|
|
279
262
|
* default pixel unit if numeric, not a unitless property, and not zero.
|
|
@@ -283,15 +266,13 @@ function getNormalStylePropertyName(property) {
|
|
|
283
266
|
*
|
|
284
267
|
* @return {*} Normalized property value.
|
|
285
268
|
*/
|
|
286
|
-
|
|
287
|
-
|
|
288
269
|
function getNormalStylePropertyValue(property, value) {
|
|
289
270
|
if (typeof value === 'number' && 0 !== value && !CSS_PROPERTIES_SUPPORTS_UNITLESS.has(property)) {
|
|
290
271
|
return value + 'px';
|
|
291
272
|
}
|
|
292
|
-
|
|
293
273
|
return value;
|
|
294
274
|
}
|
|
275
|
+
|
|
295
276
|
/**
|
|
296
277
|
* Serializes a React element to string.
|
|
297
278
|
*
|
|
@@ -301,74 +282,60 @@ function getNormalStylePropertyValue(property, value) {
|
|
|
301
282
|
*
|
|
302
283
|
* @return {string} Serialized element.
|
|
303
284
|
*/
|
|
304
|
-
|
|
305
|
-
|
|
306
285
|
function renderElement(element, context, legacyContext = {}) {
|
|
307
286
|
if (null === element || undefined === element || false === element) {
|
|
308
287
|
return '';
|
|
309
288
|
}
|
|
310
|
-
|
|
311
289
|
if (Array.isArray(element)) {
|
|
312
290
|
return renderChildren(element, context, legacyContext);
|
|
313
291
|
}
|
|
314
|
-
|
|
315
292
|
switch (typeof element) {
|
|
316
293
|
case 'string':
|
|
317
294
|
return (0, _escapeHtml.escapeHTML)(element);
|
|
318
|
-
|
|
319
295
|
case 'number':
|
|
320
296
|
return element.toString();
|
|
321
297
|
}
|
|
322
|
-
|
|
323
298
|
const {
|
|
324
299
|
type,
|
|
325
300
|
props
|
|
326
|
-
} =
|
|
327
|
-
/** @type {{type?: any, props?: any}} */
|
|
301
|
+
} = /** @type {{type?: any, props?: any}} */
|
|
328
302
|
element;
|
|
329
|
-
|
|
330
303
|
switch (type) {
|
|
331
304
|
case _react.StrictMode:
|
|
332
305
|
case _react.Fragment:
|
|
333
306
|
return renderChildren(props.children, context, legacyContext);
|
|
334
|
-
|
|
335
307
|
case _rawHtml.default:
|
|
336
308
|
const {
|
|
337
309
|
children,
|
|
338
310
|
...wrapperProps
|
|
339
311
|
} = props;
|
|
340
|
-
return renderNativeComponent(!Object.keys(wrapperProps).length ? null : 'div', {
|
|
312
|
+
return renderNativeComponent(!Object.keys(wrapperProps).length ? null : 'div', {
|
|
313
|
+
...wrapperProps,
|
|
341
314
|
dangerouslySetInnerHTML: {
|
|
342
315
|
__html: children
|
|
343
316
|
}
|
|
344
317
|
}, context, legacyContext);
|
|
345
318
|
}
|
|
346
|
-
|
|
347
319
|
switch (typeof type) {
|
|
348
320
|
case 'string':
|
|
349
321
|
return renderNativeComponent(type, props, context, legacyContext);
|
|
350
|
-
|
|
351
322
|
case 'function':
|
|
352
323
|
if (type.prototype && typeof type.prototype.render === 'function') {
|
|
353
324
|
return renderComponent(type, props, context, legacyContext);
|
|
354
325
|
}
|
|
355
|
-
|
|
356
326
|
return renderElement(type(props, legacyContext), context, legacyContext);
|
|
357
327
|
}
|
|
358
|
-
|
|
359
328
|
switch (type && type.$$typeof) {
|
|
360
329
|
case Provider.$$typeof:
|
|
361
330
|
return renderChildren(props.children, props.value, legacyContext);
|
|
362
|
-
|
|
363
331
|
case Consumer.$$typeof:
|
|
364
332
|
return renderElement(props.children(context || type._currentValue), context, legacyContext);
|
|
365
|
-
|
|
366
333
|
case ForwardRef.$$typeof:
|
|
367
334
|
return renderElement(type.render(props), context, legacyContext);
|
|
368
335
|
}
|
|
369
|
-
|
|
370
336
|
return '';
|
|
371
337
|
}
|
|
338
|
+
|
|
372
339
|
/**
|
|
373
340
|
* Serializes a native component type to string.
|
|
374
341
|
*
|
|
@@ -380,11 +347,8 @@ function renderElement(element, context, legacyContext = {}) {
|
|
|
380
347
|
*
|
|
381
348
|
* @return {string} Serialized element.
|
|
382
349
|
*/
|
|
383
|
-
|
|
384
|
-
|
|
385
350
|
function renderNativeComponent(type, props, context, legacyContext = {}) {
|
|
386
351
|
let content = '';
|
|
387
|
-
|
|
388
352
|
if (type === 'textarea' && props.hasOwnProperty('value')) {
|
|
389
353
|
// Textarea children can be assigned as value prop. If it is, render in
|
|
390
354
|
// place of children. Ensure to omit so it is not assigned as attribute
|
|
@@ -401,19 +365,16 @@ function renderNativeComponent(type, props, context, legacyContext = {}) {
|
|
|
401
365
|
} else if (typeof props.children !== 'undefined') {
|
|
402
366
|
content = renderChildren(props.children, context, legacyContext);
|
|
403
367
|
}
|
|
404
|
-
|
|
405
368
|
if (!type) {
|
|
406
369
|
return content;
|
|
407
370
|
}
|
|
408
|
-
|
|
409
371
|
const attributes = renderAttributes(props);
|
|
410
|
-
|
|
411
372
|
if (SELF_CLOSING_TAGS.has(type)) {
|
|
412
373
|
return '<' + type + attributes + '/>';
|
|
413
374
|
}
|
|
414
|
-
|
|
415
375
|
return '<' + type + attributes + '>' + content + '</' + type + '>';
|
|
416
376
|
}
|
|
377
|
+
|
|
417
378
|
/** @typedef {import('./react').WPComponent} WPComponent */
|
|
418
379
|
|
|
419
380
|
/**
|
|
@@ -426,26 +387,20 @@ function renderNativeComponent(type, props, context, legacyContext = {}) {
|
|
|
426
387
|
*
|
|
427
388
|
* @return {string} Serialized element
|
|
428
389
|
*/
|
|
429
|
-
|
|
430
|
-
|
|
431
390
|
function renderComponent(Component, props, context, legacyContext = {}) {
|
|
432
|
-
const instance = new
|
|
433
|
-
/** @type {import('react').ComponentClass} */
|
|
391
|
+
const instance = new /** @type {import('react').ComponentClass} */
|
|
434
392
|
Component(props, legacyContext);
|
|
435
|
-
|
|
436
|
-
|
|
393
|
+
if (typeof
|
|
394
|
+
// Ignore reason: Current prettier reformats parens and mangles type assertion
|
|
437
395
|
// prettier-ignore
|
|
438
|
-
|
|
439
396
|
/** @type {{getChildContext?: () => unknown}} */
|
|
440
397
|
instance.getChildContext === 'function') {
|
|
441
|
-
Object.assign(legacyContext,
|
|
442
|
-
/** @type {{getChildContext?: () => unknown}} */
|
|
443
|
-
instance.getChildContext());
|
|
398
|
+
Object.assign(legacyContext, /** @type {{getChildContext?: () => unknown}} */instance.getChildContext());
|
|
444
399
|
}
|
|
445
|
-
|
|
446
400
|
const html = renderElement(instance.render(), context, legacyContext);
|
|
447
401
|
return html;
|
|
448
402
|
}
|
|
403
|
+
|
|
449
404
|
/**
|
|
450
405
|
* Serializes an array of children to string.
|
|
451
406
|
*
|
|
@@ -455,19 +410,16 @@ function renderComponent(Component, props, context, legacyContext = {}) {
|
|
|
455
410
|
*
|
|
456
411
|
* @return {string} Serialized children.
|
|
457
412
|
*/
|
|
458
|
-
|
|
459
|
-
|
|
460
413
|
function renderChildren(children, context, legacyContext = {}) {
|
|
461
414
|
let result = '';
|
|
462
415
|
children = Array.isArray(children) ? children : [children];
|
|
463
|
-
|
|
464
416
|
for (let i = 0; i < children.length; i++) {
|
|
465
417
|
const child = children[i];
|
|
466
418
|
result += renderElement(child, context, legacyContext);
|
|
467
419
|
}
|
|
468
|
-
|
|
469
420
|
return result;
|
|
470
421
|
}
|
|
422
|
+
|
|
471
423
|
/**
|
|
472
424
|
* Renders a props object as a string of HTML attributes.
|
|
473
425
|
*
|
|
@@ -475,57 +427,51 @@ function renderChildren(children, context, legacyContext = {}) {
|
|
|
475
427
|
*
|
|
476
428
|
* @return {string} Attributes string.
|
|
477
429
|
*/
|
|
478
|
-
|
|
479
|
-
|
|
480
430
|
function renderAttributes(props) {
|
|
481
431
|
let result = '';
|
|
482
|
-
|
|
483
432
|
for (const key in props) {
|
|
484
433
|
const attribute = getNormalAttributeName(key);
|
|
485
|
-
|
|
486
434
|
if (!(0, _escapeHtml.isValidAttributeName)(attribute)) {
|
|
487
435
|
continue;
|
|
488
436
|
}
|
|
437
|
+
let value = getNormalAttributeValue(key, props[key]);
|
|
489
438
|
|
|
490
|
-
|
|
491
|
-
|
|
439
|
+
// If value is not of serializeable type, skip.
|
|
492
440
|
if (!ATTRIBUTES_TYPES.has(typeof value)) {
|
|
493
441
|
continue;
|
|
494
|
-
}
|
|
495
|
-
|
|
442
|
+
}
|
|
496
443
|
|
|
444
|
+
// Don't render internal attribute names.
|
|
497
445
|
if (isInternalAttribute(key)) {
|
|
498
446
|
continue;
|
|
499
447
|
}
|
|
448
|
+
const isBooleanAttribute = BOOLEAN_ATTRIBUTES.has(attribute);
|
|
500
449
|
|
|
501
|
-
|
|
502
|
-
|
|
450
|
+
// Boolean attribute should be omitted outright if its value is false.
|
|
503
451
|
if (isBooleanAttribute && value === false) {
|
|
504
452
|
continue;
|
|
505
453
|
}
|
|
454
|
+
const isMeaningfulAttribute = isBooleanAttribute || hasPrefix(key, ['data-', 'aria-']) || ENUMERATED_ATTRIBUTES.has(attribute);
|
|
506
455
|
|
|
507
|
-
|
|
508
|
-
|
|
456
|
+
// Only write boolean value as attribute if meaningful.
|
|
509
457
|
if (typeof value === 'boolean' && !isMeaningfulAttribute) {
|
|
510
458
|
continue;
|
|
511
459
|
}
|
|
460
|
+
result += ' ' + attribute;
|
|
512
461
|
|
|
513
|
-
|
|
462
|
+
// Boolean attributes should write attribute name, but without value.
|
|
514
463
|
// Mere presence of attribute name is effective truthiness.
|
|
515
|
-
|
|
516
464
|
if (isBooleanAttribute) {
|
|
517
465
|
continue;
|
|
518
466
|
}
|
|
519
|
-
|
|
520
467
|
if (typeof value === 'string') {
|
|
521
468
|
value = (0, _escapeHtml.escapeAttribute)(value);
|
|
522
469
|
}
|
|
523
|
-
|
|
524
470
|
result += '="' + value + '"';
|
|
525
471
|
}
|
|
526
|
-
|
|
527
472
|
return result;
|
|
528
473
|
}
|
|
474
|
+
|
|
529
475
|
/**
|
|
530
476
|
* Renders a style object as a string attribute value.
|
|
531
477
|
*
|
|
@@ -533,37 +479,28 @@ function renderAttributes(props) {
|
|
|
533
479
|
*
|
|
534
480
|
* @return {string} Style attribute value.
|
|
535
481
|
*/
|
|
536
|
-
|
|
537
|
-
|
|
538
482
|
function renderStyle(style) {
|
|
539
483
|
// Only generate from object, e.g. tolerate string value.
|
|
540
484
|
if (!(0, _isPlainObject.isPlainObject)(style)) {
|
|
541
485
|
return style;
|
|
542
486
|
}
|
|
543
|
-
|
|
544
487
|
let result;
|
|
545
|
-
|
|
546
488
|
for (const property in style) {
|
|
547
489
|
const value = style[property];
|
|
548
|
-
|
|
549
490
|
if (null === value || undefined === value) {
|
|
550
491
|
continue;
|
|
551
492
|
}
|
|
552
|
-
|
|
553
493
|
if (result) {
|
|
554
494
|
result += ';';
|
|
555
495
|
} else {
|
|
556
496
|
result = '';
|
|
557
497
|
}
|
|
558
|
-
|
|
559
498
|
const normalName = getNormalStylePropertyName(property);
|
|
560
499
|
const normalValue = getNormalStylePropertyValue(property, value);
|
|
561
500
|
result += normalName + ':' + normalValue;
|
|
562
501
|
}
|
|
563
|
-
|
|
564
502
|
return result;
|
|
565
503
|
}
|
|
566
|
-
|
|
567
504
|
var _default = renderElement;
|
|
568
505
|
exports.default = _default;
|
|
569
506
|
//# sourceMappingURL=serialize.js.map
|