@meonode/ui 0.4.1 → 0.4.3
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 +16 -0
- package/dist/core.node.d.ts +18 -2
- package/dist/core.node.d.ts.map +1 -1
- package/dist/core.node.js +83 -18
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.4.3] - 2025-11-14
|
|
9
|
+
|
|
10
|
+
### Docs
|
|
11
|
+
- **core**: add detailed comments to rendering methods ([`731c83e`](https://github.com/l7aromeo/meonode-ui/commit/731c83e))
|
|
12
|
+
|
|
13
|
+
### Fix
|
|
14
|
+
- **core**: adjust isStyledComponent logic to improve style handling ([`ff7a59e`](https://github.com/l7aromeo/meonode-ui/commit/ff7a59e))
|
|
15
|
+
|
|
16
|
+
### Refactor
|
|
17
|
+
- **core**: simplify _processProps by removing style prop handling ([`b3570b4`](https://github.com/l7aromeo/meonode-ui/commit/b3570b4))
|
|
18
|
+
|
|
19
|
+
## [0.4.2] - 2025-11-14
|
|
20
|
+
|
|
21
|
+
### Fix
|
|
22
|
+
- **core**: remove deps property from props since it should not be passed to element attribute ([`6b01cbe`](https://github.com/l7aromeo/meonode-ui/commit/6b01cbe))
|
|
23
|
+
|
|
8
24
|
## [0.4.1] - 2025-11-14
|
|
9
25
|
|
|
10
26
|
### Test
|
package/dist/core.node.d.ts
CHANGED
|
@@ -119,12 +119,28 @@ export declare class BaseNode<E extends NodeElementType> implements NodeInstance
|
|
|
119
119
|
*/
|
|
120
120
|
private static _isFunctionChild;
|
|
121
121
|
/**
|
|
122
|
-
* A
|
|
122
|
+
* A special internal React component used to render "function-as-a-child" (render prop) patterns.
|
|
123
|
+
* When a `BaseNode` receives a function as its `children` prop, it wraps that function
|
|
124
|
+
* inside this `_functionRenderer` component. This component then executes the render function
|
|
125
|
+
* and processes its return value, normalizing it into a renderable ReactNode.
|
|
126
|
+
*
|
|
127
|
+
* This allows `BaseNode` to support render props while maintaining its internal processing
|
|
128
|
+
* and normalization logic for the dynamically generated content.
|
|
123
129
|
* @method _functionRenderer
|
|
130
|
+
* @param {Object} props The properties passed to the renderer.
|
|
131
|
+
* @param {Function} props.render The function-as-a-child to execute.
|
|
132
|
+
* @param {boolean} [props.disableEmotion] Inherited flag to disable Emotion styling for children.
|
|
133
|
+
* @returns {ReactNode | null | undefined} The processed and rendered output of the render function.
|
|
124
134
|
*/
|
|
125
135
|
private static _functionRenderer;
|
|
126
136
|
/**
|
|
127
|
-
*
|
|
137
|
+
* Renders a processed `NodeElement` into a ReactNode.
|
|
138
|
+
* This helper is primarily used by `_functionRenderer` to handle the output of render props,
|
|
139
|
+
* ensuring that `BaseNode` instances are correctly rendered and other React elements or primitives
|
|
140
|
+
* are passed through. It also applies `disableEmotion` and `key` props as needed.
|
|
141
|
+
*
|
|
142
|
+
* This method is part of the child processing pipeline, converting internal `NodeElement` representations
|
|
143
|
+
* into actual React elements that can be rendered by React.
|
|
128
144
|
* @method _renderProcessedNode
|
|
129
145
|
*/
|
|
130
146
|
private static _renderProcessedNode;
|
package/dist/core.node.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AAAA,OAAc,EAKZ,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,EAEd,gBAAgB,EAChB,WAAW,EAEX,eAAe,EAEf,YAAY,EACZ,UAAU,EACV,SAAS,EAET,OAAO,EACP,cAAc,EACf,MAAM,yBAAyB,CAAA;AAQhC;;;;;;;GAOG;AACH,qBAAa,QAAQ,CAAC,CAAC,SAAS,eAAe,CAAE,YAAW,YAAY,CAAC,CAAC,CAAC;IAClE,OAAO,EAAE,CAAC,CAAA;IACV,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAK;IAC3C,SAAgB,UAAU,UAAO;IAEjC,OAAO,CAAC,MAAM,CAAC,CAAgB;IAC/B,OAAO,CAAC,iBAAiB,CAA8B;IACvD,OAAO,CAAC,gBAAgB,CAA0E;IAClG,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAgB;IAEvC,OAAO,CAAC,MAAM,CAAC,SAAS,CAAgC;IACxD,OAAO,CAAC,MAAM,CAAC,oBAAoB,CAAyC;IAC5E,OAAO,CAAC,MAAM,CAAC,aAAa,CAA8F;IAC1H,OAAO,CAAC,MAAM,CAAC,eAAe,CAAqB;IACnD,OAAO,CAAC,MAAM,CAAC,YAAY,CAAiH;IAG5I,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,OAAM;IAC9C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,MAAK;IAIhD,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,cAAc,CAAa;IAEnC,YAAY,OAAO,EAAE,CAAC,EAAE,QAAQ,GAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAM,EAAE,IAAI,CAAC,EAAE,cAAc,EAsBlF;IAED;;;;OAIG;IACH,IAAW,KAAK,IAAI,cAAc,CAKjC;IAED;;;;;;;OAOG;IACH,IAAW,YAAY,IAAI,cAAc,GAAG,SAAS,CAEpD;IAID;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,UAAU;IASzB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,SAAS;IAQxB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAM1B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,mBAAmB;IA8B3B;;;;;OAKG;IACH,OAAO,CAAC,MAAM,CAAC,oBAAoB;IAiEnC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,kBAAkB;IA0BjC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IAyB/B;;;OAGG;IACH,OAAO,CAAC,aAAa;
|
|
1
|
+
{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"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"}
|
package/dist/core.node.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _BaseNode,_excluded=["key","children","ref"],_excluded2=["ref","key","children","css","props","disableEmotion"],_excluded3=["style"],_excluded4=["children","key","css","nativeProps","disableEmotion"]
|
|
1
|
+
var _BaseNode,_excluded=["key","children","ref"],_excluded2=["ref","key","children","css","props","disableEmotion"],_excluded3=["style"],_excluded4=["children","key","css","nativeProps","disableEmotion"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(b,c){var d=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=d){var g,h,j,k,l=[],a=!0,m=!1;try{if(j=(d=d.call(b)).next,0===c){if(Object(d)!==d)return;a=!1}else for(;!(a=(g=j.call(d)).done)&&(l.push(g.value),l.length!==c);a=!0);}catch(a){m=!0,h=a}finally{try{if(!a&&null!=d["return"]&&(k=d["return"](),Object(k)!==k))return}finally{if(m)throw h}}return l}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _createForOfIteratorHelper(b,c){var d="undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(!d){if(Array.isArray(b)||(d=_unsupportedIterableToArray(b))||c&&b&&"number"==typeof b.length){d&&(b=d);var e=0,f=function F(){};return{s:f,n:function n(){return e>=b.length?{done:!0}:{done:!1,value:b[e++]}},e:function e(a){throw a},f:f}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var g,h=!0,i=!1;return{s:function s(){d=d.call(b)},n:function n(){var a=d.next();return h=a.done,a},e:function e(a){i=!0,g=a},f:function f(){try{h||null==d["return"]||d["return"]()}finally{if(i)throw g}}}}function _unsupportedIterableToArray(b,c){if(b){if("string"==typeof b)return _arrayLikeToArray(b,c);var a={}.toString.call(b).slice(8,-1);return"Object"===a&&b.constructor&&(a=b.constructor.name),"Map"===a||"Set"===a?Array.from(b):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(b,c):void 0}}function _arrayLikeToArray(b,c){(null==c||c>b.length)&&(c=b.length);for(var d=0,f=Array(c);d<c;d++)f[d]=b[d];return f}function _objectWithoutProperties(a,b){if(null==a)return{};var c,d,e=_objectWithoutPropertiesLoose(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],-1===b.indexOf(c)&&{}.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}function _objectWithoutPropertiesLoose(a,b){if(null==a)return{};var c={};for(var d in a)if({}.hasOwnProperty.call(a,d)){if(-1!==b.indexOf(d))continue;c[d]=a[d]}return c}function _defineProperty(a,b,c){return(b=_toPropertyKey(b))in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _toPropertyKey(a){var b=_toPrimitive(a,"string");return"symbol"==_typeof(b)?b:b+""}function _toPrimitive(a,b){if("object"!=_typeof(a)||!a)return a;var c=a[Symbol.toPrimitive];if(void 0!==c){var d=c.call(a,b||"default");if("object"!=_typeof(d))return d;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===b?String:Number)(a)}import React,{createElement,isValidElement,Fragment}from"react";import{isNodeInstance}from"./helper/node.helper.js";import{isForwardRef,isFragment,isMemo,isReactClassComponent,isValidElementType}from"./helper/react-is.helper.js";import{createRoot}from"react-dom/client";import{getComponentType,getCSSProps,getDOMProps,getElementTypeName,hasNoStyleTag,omitUndefined}from"./helper/common.helper.js";import StyledRenderer from"./components/styled-renderer.client.js";import{__DEV__}from"./constants/common.const.js";/**
|
|
2
2
|
* The core abstraction of the MeoNode library. It wraps a React element or component,
|
|
3
3
|
* providing a unified interface for processing props, normalizing children, and handling styles.
|
|
4
4
|
* This class is central to the library's ability to offer a JSX-free, fluent API for building UIs.
|
|
@@ -70,16 +70,16 @@ c.push({key:f,score:k})}// Sort by score (highest = most evictable)
|
|
|
70
70
|
for(var l=Math.min(BaseNode.CACHE_CLEANUP_BATCH,c.length),m=0;m<l;m++)BaseNode._propProcessingCache["delete"](c[m].key)}/**
|
|
71
71
|
* The main prop processing pipeline, which now passes the element type for improved caching.
|
|
72
72
|
* @method _processProps
|
|
73
|
-
*/_processProps(){var a=this.rawProps,b=a.ref,c=a.key,d=a.children,e=a.css,f=a.props,g=void 0===f?{}:f,h=a.disableEmotion,i=_objectWithoutProperties(a,_excluded2)
|
|
74
|
-
if(0===Object.keys(i).length&&!e)return omitUndefined({ref:b,key:c,
|
|
75
|
-
var
|
|
76
|
-
for(var
|
|
77
|
-
var
|
|
73
|
+
*/_processProps(){var a=this.rawProps,b=a.ref,c=a.key,d=a.children,e=a.css,f=a.props,g=void 0===f?{}:f,h=a.disableEmotion,i=_objectWithoutProperties(a,_excluded2);// --- Fast Path Optimization ---
|
|
74
|
+
if(0===Object.keys(i).length&&!e)return omitUndefined({ref:b,key:c,disableEmotion:h,nativeProps:omitUndefined(g),children:this._processChildren(d,h)});// --- Hybrid Caching Strategy ---
|
|
75
|
+
var j={},k={};// 1. Categorize props into cacheable (primitives) and non-cacheable (objects/functions).
|
|
76
|
+
for(var l in i)if(Object.prototype.hasOwnProperty.call(i,l)){var m=i[l],n=_typeof(m);"string"===n||"number"===n||"boolean"===n?j[l]=m:k[l]=m}// 2. Pass element type to signature generation
|
|
77
|
+
var o=BaseNode._createPropSignature(this.element,j),p=BaseNode._getCachedCssProps(j,o),q=p.cssProps,r=getCSSProps(k),s=getDOMProps(i),t=_objectSpread(_objectSpread(_objectSpread({},q),r),e),u=this._processChildren(d,h,this._stableKey);// 3. Process non-cacheable props on every render to ensure correctness for functions and objects.
|
|
78
78
|
// DOM props are always processed fresh.
|
|
79
79
|
// 4. Assemble the final CSS object.
|
|
80
80
|
// --- Child Normalization ---
|
|
81
81
|
// --- Final Assembly ---
|
|
82
|
-
return omitUndefined(_objectSpread(_objectSpread({ref:b,key:c,css:
|
|
82
|
+
return omitUndefined(_objectSpread(_objectSpread({ref:b,key:c,css:t},s),{},{disableEmotion:h,nativeProps:omitUndefined(g),children:u}))}/**
|
|
83
83
|
* Determines if a node should update based on its dependency array.
|
|
84
84
|
* Uses a shallow comparison, similar to React's `useMemo` and `useCallback`.
|
|
85
85
|
* @method _shouldNodeUpdate
|
|
@@ -113,12 +113,60 @@ return isReactClassComponent(a)||isMemo(a)||isForwardRef(a)?new BaseNode(a,{disa
|
|
|
113
113
|
* rather than a standard Function Component.
|
|
114
114
|
* @method _isFunctionChild
|
|
115
115
|
*/static _isFunctionChild(a){if("function"!=typeof a||isReactClassComponent(a)||isMemo(a)||isForwardRef(a))return!1;try{return!(a.prototype&&"function"==typeof a.prototype.render)}catch(a){return __DEV__&&console.error("MeoNode: Error checking if a node is a function child.",a),!0}}/**
|
|
116
|
-
* A
|
|
116
|
+
* A special internal React component used to render "function-as-a-child" (render prop) patterns.
|
|
117
|
+
* When a `BaseNode` receives a function as its `children` prop, it wraps that function
|
|
118
|
+
* inside this `_functionRenderer` component. This component then executes the render function
|
|
119
|
+
* and processes its return value, normalizing it into a renderable ReactNode.
|
|
120
|
+
*
|
|
121
|
+
* This allows `BaseNode` to support render props while maintaining its internal processing
|
|
122
|
+
* and normalization logic for the dynamically generated content.
|
|
117
123
|
* @method _functionRenderer
|
|
118
|
-
|
|
119
|
-
*
|
|
124
|
+
* @param {Object} props The properties passed to the renderer.
|
|
125
|
+
* @param {Function} props.render The function-as-a-child to execute.
|
|
126
|
+
* @param {boolean} [props.disableEmotion] Inherited flag to disable Emotion styling for children.
|
|
127
|
+
* @returns {ReactNode | null | undefined} The processed and rendered output of the render function.
|
|
128
|
+
*/static _functionRenderer(a){var b,c=a.render,d=a.disableEmotion;try{// Execute the render prop function to get its output.
|
|
129
|
+
b=c()}catch(a){// If the render function throws, treat its output as null to prevent crashes.
|
|
130
|
+
__DEV__&&console.error("MeoNode: Error executing function-as-a-child.",a),b=null}// Handle null or undefined results directly, as they are valid React render outputs.
|
|
131
|
+
if(null===b||b===void 0)return b;// If the result is already a BaseNode instance, process it.
|
|
132
|
+
if(isNodeInstance(b))// If emotion is disabled for the parent and not explicitly re-enabled on the child,
|
|
133
|
+
// create a new BaseNode with emotion disabled and render it.
|
|
134
|
+
return d&&!b.rawProps.disableEmotion?new BaseNode(b.element,_objectSpread(_objectSpread({},b.rawProps),{},{disableEmotion:!0})).render():b.render();// Otherwise, render the existing BaseNode directly.
|
|
135
|
+
// If the result is an array, it likely contains multiple children.
|
|
136
|
+
if(Array.isArray(b)){// Helper to generate a stable key for array items, crucial for React's reconciliation.
|
|
137
|
+
var e=function safeGetKey(a,b){try{// Attempt to get a meaningful name for the element type.
|
|
138
|
+
return"".concat(getElementTypeName(a),"-").concat(b)}catch(a){// Fallback to a generic key if type name cannot be determined.
|
|
139
|
+
return __DEV__&&console.error("MeoNode: Could not determine element type name for key in function-as-a-child.",a),"item-".concat(b)}};// Map over the array, processing each item and assigning a key.
|
|
140
|
+
return b.map(function(a,b){return BaseNode._renderProcessedNode({processedElement:BaseNode._processRawNode(a,d),passedKey:e(a,b)})})}if(b instanceof React.Component)return BaseNode._renderProcessedNode({processedElement:BaseNode._processRawNode(b.render(),d),disableEmotion:d});// Handle primitive types directly, as they are valid React children.
|
|
141
|
+
if("string"==typeof b||"number"==typeof b||"boolean"==typeof b)return b;// For any other non-primitive, non-array result, process it as a single NodeElement.
|
|
142
|
+
var f=BaseNode._processRawNode(b,d);// If processing yields a valid element, render it.
|
|
143
|
+
return f?BaseNode._renderProcessedNode({processedElement:f,disableEmotion:d}):b;// Fallback: return the original result if it couldn't be processed into a renderable node.
|
|
144
|
+
}/**
|
|
145
|
+
* Renders a processed `NodeElement` into a ReactNode.
|
|
146
|
+
* This helper is primarily used by `_functionRenderer` to handle the output of render props,
|
|
147
|
+
* ensuring that `BaseNode` instances are correctly rendered and other React elements or primitives
|
|
148
|
+
* are passed through. It also applies `disableEmotion` and `key` props as needed.
|
|
149
|
+
*
|
|
150
|
+
* This method is part of the child processing pipeline, converting internal `NodeElement` representations
|
|
151
|
+
* into actual React elements that can be rendered by React.
|
|
120
152
|
* @method _renderProcessedNode
|
|
121
|
-
*/static _renderProcessedNode(a){var b=a.processedElement,c=a.passedKey,d=a.disableEmotion,e={}
|
|
153
|
+
*/static _renderProcessedNode(a){var b=a.processedElement,c=a.passedKey,d=a.disableEmotion,e={};// Initialize an object to hold common props that might be applied to the new BaseNode.
|
|
154
|
+
// If a `passedKey` is provided, add it to `commonBaseNodeProps`.
|
|
155
|
+
// This key is typically used for React's reconciliation process.
|
|
156
|
+
// If the processed element is already a BaseNode instance.
|
|
157
|
+
if(void 0!==c&&(e.key=c),isNodeInstance(b)){var f,g=null===(f=b.rawProps)||void 0===f?void 0:f.key;// Get the existing key from the raw props of the BaseNode.
|
|
158
|
+
// Apply the `disableEmotion` flag to the raw props of the BaseNode.
|
|
159
|
+
// If the existing key is the same as the passed key, render the existing BaseNode directly.
|
|
160
|
+
// This avoids unnecessary re-creation of the BaseNode instance.
|
|
161
|
+
return b.rawProps.disableEmotion=d,g===c?b.render():new BaseNode(b.element,_objectSpread(_objectSpread({},b.rawProps),e)).render();// Otherwise, create a new BaseNode instance, merging existing raw props with common props, then render it.
|
|
162
|
+
}// If the processed element is a React class component (e.g., `class MyComponent extends React.Component`).
|
|
163
|
+
// Create a new BaseNode for it, applying common props and `disableEmotion`, then render.
|
|
164
|
+
return isReactClassComponent(b)?new BaseNode(b,_objectSpread(_objectSpread({},e),{},{disableEmotion:d})).render():b instanceof React.Component?b.render():"function"==typeof b?createElement(b,{key:c}):b;// If the processed element is an instance of a React component (e.g., `new MyComponent()`).
|
|
165
|
+
// Directly call its `render` method.
|
|
166
|
+
// If the processed element is a function (likely a functional component or a render prop that returned a component type).
|
|
167
|
+
// Create a React element directly using `createElement`, passing the `passedKey`.
|
|
168
|
+
// For any other type (primitives, null, undefined, etc.), return it as a ReactNode.
|
|
169
|
+
}// --- Iterative Renderer with Deps Support ---
|
|
122
170
|
/**
|
|
123
171
|
* Renders the `BaseNode` and its entire subtree into a ReactElement, with support for opt-in reactivity
|
|
124
172
|
* via dependency arrays and inherited blocking.
|
|
@@ -132,12 +180,29 @@ return isReactClassComponent(a)||isMemo(a)||isForwardRef(a)?new BaseNode(a,{disa
|
|
|
132
180
|
* 2. **Complete Phase:** After all of a node's descendants have been rendered, the loop returns to the node.
|
|
133
181
|
* It then collects the rendered children from a temporary map and creates its own React element.
|
|
134
182
|
* @method render
|
|
135
|
-
*/render(){var a=!!(0<arguments.length&&arguments[0]!==void 0)&&arguments[0],b=this._stableKey,c=BaseNode._isServer?void 0:BaseNode._elementCache.get(b),d=BaseNode._shouldNodeUpdate(null===c||void 0===c?void 0:c.prevDeps,this._deps,a);//
|
|
136
|
-
//
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
183
|
+
*/render(){var a=!!(0<arguments.length&&arguments[0]!==void 0)&&arguments[0],b=this._stableKey,c=BaseNode._isServer?void 0:BaseNode._elementCache.get(b),d=BaseNode._shouldNodeUpdate(null===c||void 0===c?void 0:c.prevDeps,this._deps,a);// A stable cache key derived from the element + important props signature.
|
|
184
|
+
// On server we never reuse cached elements because that can cause hydration mismatches.
|
|
185
|
+
// Decide whether this node (and its subtree) should update given dependency arrays.
|
|
186
|
+
// Fast return: if nothing should update and we have a cached element, reuse it.
|
|
187
|
+
if(!d&&null!==c&&void 0!==c&&c.cachedElement)return c.cachedElement;// When this node doesn't need update, its children are considered "blocked" and may be skipped.
|
|
188
|
+
// Work stack for iterative, non-recursive traversal.
|
|
189
|
+
// Each entry tracks the BaseNode, whether its children were pushed (isProcessed) and whether it is blocked.
|
|
190
|
+
// Map to collect rendered React elements for processed BaseNode instances.
|
|
191
|
+
// Iterative depth-first traversal with explicit begin/complete phases to avoid recursion.
|
|
192
|
+
for(var e=[{node:this,isProcessed:!1,blocked:!d}],f=new Map;0<e.length;){var g=e[e.length-1],h=g.node,j=g.isProcessed,k=g.blocked;if(!j){g.isProcessed=!0;var l=h.props.children;if(l)// Only consider BaseNode children for further traversal; primitives and React elements are terminal.
|
|
193
|
+
for(var m=(Array.isArray(l)?l:[l]).filter(isNodeInstance),n=m.length-1;0<=n;n--){var o=m[n],p=o._stableKey,q=BaseNode._isServer?void 0:BaseNode._elementCache.get(p),r=BaseNode._shouldNodeUpdate(null===q||void 0===q?void 0:q.prevDeps,o._deps,k);// Respect server/client differences for child cache lookup.
|
|
194
|
+
// Determine whether the child should update given its deps and the parent's blocked state.
|
|
195
|
+
// If child doesn't need update and has cached element, reuse it immediately (no push).
|
|
196
|
+
if(!r&&null!==q&&void 0!==q&&q.cachedElement){f.set(o,q.cachedElement);continue}// Otherwise push child for processing; childBlocked inherits parent's blocked state.
|
|
197
|
+
var s=k||!r;e.push({node:o,isProcessed:!1,blocked:s})}}else{e.pop();// Extract node props. Non-present props default to undefined via destructuring.
|
|
198
|
+
var t=h.props,u=t.children,v=t.key,w=t.css,x=t.nativeProps,y=t.disableEmotion,z=_objectWithoutProperties(t,_excluded4),A=[];u&&(A=(Array.isArray(u)?u:[u]).map(function(a){return isNodeInstance(a)?f.get(a):isValidElement(a)?a:a}));// Merge element props: explicit other props + DOM native props + React key.
|
|
199
|
+
var B=_objectSpread(_objectSpread({},z),{},{key:v},x),C=void 0;// Handle fragments specially: create fragment element with key and children.
|
|
200
|
+
if(h.element===Fragment||isFragment(h.element))C=createElement(h.element,{key:v},...A);else{// StyledRenderer for emotion-based styling unless explicitly disabled or no styles are present.
|
|
201
|
+
// StyledRenderer handles SSR hydration and emotion CSS injection when css prop exists or element has style tags.
|
|
202
|
+
var D=!y&&(w||!hasNoStyleTag(h.element));C=D?createElement(StyledRenderer,_objectSpread(_objectSpread({element:h.element},B),{},{css:w,suppressHydrationWarning:!0}),...A):createElement(h.element,B,...A)}// Cache the generated element on client-side to speed up future renders.
|
|
203
|
+
// Store the rendered element so parent nodes can reference it.
|
|
204
|
+
BaseNode._isServer||BaseNode._elementCache.set(h._stableKey,{prevDeps:h._deps,cachedElement:C}),f.set(h,C)}}// Return the ReactElement corresponding to the root node (this).
|
|
205
|
+
return f.get(this)}// --- Portal System ---
|
|
141
206
|
/**
|
|
142
207
|
* Ensures that the necessary DOM element and React root are available for portal rendering.
|
|
143
208
|
* This is only executed on the client-side.
|
|
@@ -154,7 +219,7 @@ BaseNode._isServer||BaseNode._elementCache.set(h._stableKey,{prevDeps:h._deps,ca
|
|
|
154
219
|
* The primary factory function for creating a `BaseNode` instance.
|
|
155
220
|
* It's the simplest way to wrap a component or element.
|
|
156
221
|
* @function Node
|
|
157
|
-
*/_BaseNode=BaseNode,_defineProperty(BaseNode,"_isServer","undefined"==typeof window),_defineProperty(BaseNode,"_propProcessingCache",new Map),_defineProperty(BaseNode,"_elementCache",new Map),_defineProperty(BaseNode,"_isValidElement",isValidElementType),_defineProperty(BaseNode,"_isStyleProp",_BaseNode._isServer||"undefined"==typeof document?function(){return!1}:function(a){return a in document.body.style}),_defineProperty(BaseNode,"CACHE_SIZE_LIMIT",500),_defineProperty(BaseNode,"CACHE_CLEANUP_BATCH",50);export function Node(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{},c=2<arguments.length?arguments[2]:void 0
|
|
222
|
+
*/_BaseNode=BaseNode,_defineProperty(BaseNode,"_isServer","undefined"==typeof window),_defineProperty(BaseNode,"_propProcessingCache",new Map),_defineProperty(BaseNode,"_elementCache",new Map),_defineProperty(BaseNode,"_isValidElement",isValidElementType),_defineProperty(BaseNode,"_isStyleProp",_BaseNode._isServer||"undefined"==typeof document?function(){return!1}:function(a){return a in document.body.style}),_defineProperty(BaseNode,"CACHE_SIZE_LIMIT",500),_defineProperty(BaseNode,"CACHE_CLEANUP_BATCH",50);export function Node(a){var b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{},c=2<arguments.length?arguments[2]:void 0;return new BaseNode(a,b,c)}/**
|
|
158
223
|
* Creates a curried node factory for a given React element or component type.
|
|
159
224
|
* This is useful for creating reusable, specialized factory functions (e.g., `const Div = createNode('div')`).
|
|
160
225
|
* @function createNode
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meonode/ui",
|
|
3
3
|
"description": "A structured approach to component composition, direct CSS-first prop styling, built-in theming, smart prop handling (including raw property pass-through), and dynamic children.",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/main.js",
|
|
7
7
|
"types": "./dist/main.d.ts",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"type": "git",
|
|
86
86
|
"url": "git+https://github.com/l7aromeo/meonode-ui.git"
|
|
87
87
|
},
|
|
88
|
-
"homepage": "https://
|
|
88
|
+
"homepage": "https://ui.meonode.com",
|
|
89
89
|
"bugs": {
|
|
90
90
|
"url": "https://github.com/l7aromeo/meonode-ui/issues"
|
|
91
91
|
},
|