@meonode/ui 0.1.18 → 0.1.20
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/README.md +374 -149
- package/dist/core.node.d.ts +4 -4
- package/dist/core.node.d.ts.map +1 -1
- package/dist/core.node.js +8 -10
- package/dist/html.node.d.ts +135 -135
- package/dist/html.node.d.ts.map +1 -1
- package/dist/html.node.js +1 -1
- package/dist/node.type.d.ts +11 -8
- package/dist/node.type.d.ts.map +1 -1
- package/package.json +5 -2
package/dist/core.node.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { type ReactNode } from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ComponentNode, NodeElement, NodeInstance, NodeProps, Theme } from './node.type.js';
|
|
3
3
|
/**
|
|
4
4
|
* Factory function to create a BaseNode instance.
|
|
5
5
|
* @param element The React element type.
|
|
6
6
|
* @param props The props for the node.
|
|
7
|
-
* @returns
|
|
7
|
+
* @returns NodeInstance<E> - A new BaseNode instance.
|
|
8
8
|
*/
|
|
9
|
-
export declare function Node<E extends NodeElement>(element: E, props?: Partial<NodeProps<E>>):
|
|
9
|
+
export declare function Node<E extends NodeElement>(element: E, props?: Partial<NodeProps<E>>): NodeInstance<E>;
|
|
10
10
|
/**
|
|
11
11
|
* Higher-order component wrapper that converts BaseNode components into React components.
|
|
12
12
|
* This wrapper ensures proper theme propagation and component rendering in the React ecosystem.
|
|
@@ -31,5 +31,5 @@ export declare function Node<E extends NodeElement>(element: E, props?: Partial<
|
|
|
31
31
|
*/
|
|
32
32
|
export declare function Component<T extends Record<string, any> & {
|
|
33
33
|
theme?: Theme;
|
|
34
|
-
}>(component: (props: T) => ComponentNode): (props?:
|
|
34
|
+
}>(component: (props: T) => ComponentNode): (props?: any) => string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | NodeInstance<any> | (() => NodeInstance<any> | ReactNode) | null | undefined;
|
|
35
35
|
//# sourceMappingURL=core.node.d.ts.map
|
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":"AACA,OAAO,KAAK,EAAE,EAAkF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7H,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAkF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7H,OAAO,KAAK,EAAE,aAAa,EAAyC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAgB,KAAK,EAAE,MAAM,mBAAmB,CAAA;AA0bxJ;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,GAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAU1G;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,aAAa,IAEzG,QAAO,GAAQ,sZAmBxB"}
|
package/dist/core.node.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _excluded=["children","nodeTheme","theme"],_excluded2=["children","key"];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 _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 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 _classCallCheck(b,a){if(!(b instanceof a))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,_toPropertyKey(c.key),c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),Object.defineProperty(a,"prototype",{writable:!1}),a}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}from"react";import{getComponentType,getCSSProps,getDOMProps,getElementTypeName,getValueByPath}from"./node.helper.js";import{isForwardRef,isMemo,isReactClassComponent,isValidElementType}from"./react-is.helper.js";/**
|
|
1
|
+
"use strict";var _excluded=["children","nodeTheme","theme"],_excluded2=["children","key"];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 _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 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 _classCallCheck(b,a){if(!(b instanceof a))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,_toPropertyKey(c.key),c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),Object.defineProperty(a,"prototype",{writable:!1}),a}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}from"react";import{getComponentType,getCSSProps,getDOMProps,getElementTypeName,getValueByPath}from"./node.helper.js";import{isForwardRef,isMemo,isReactClassComponent,isValidElementType}from"./react-is.helper.js";import{createRoot}from"react-dom/client";/**
|
|
2
2
|
* Represents a node in a React component tree with theme and styling capabilities.
|
|
3
3
|
* This class wraps React elements and handles:
|
|
4
4
|
* - Props processing and normalization
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* - Child node processing and management
|
|
7
7
|
* - Style processing with theme variables
|
|
8
8
|
* @template E The type of React element or component this node represents
|
|
9
|
-
*/var BaseNode=/*#__PURE__*/function(){/**
|
|
9
|
+
*/var BaseNode=/*#__PURE__*/function(){/**
|
|
10
10
|
* Creates a new BaseNode instance that wraps a React element.
|
|
11
11
|
* Processes raw props by:
|
|
12
12
|
* - Extracting and resolving theme-aware styles
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* - Normalizing children with theme inheritance
|
|
15
15
|
* @param element The React element/component to wrap
|
|
16
16
|
* @param rawProps Initial props including theme, styles, and children
|
|
17
|
-
*/function BaseNode(a){var b=this,c=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{};_classCallCheck(this,BaseNode),_defineProperty(this,"_normalizeChild",function(a){var c,d;if(!a)return a;var e=(null===(c=b.rawProps)||void 0===c?void 0:c.nodeTheme)||(null===(d=b.rawProps)||void 0===d?void 0:d.theme)||b.props.nodeTheme||b.props.theme;// For BaseNode instances, apply current theme if child has no theme
|
|
17
|
+
*/function BaseNode(a){var b=this,c=1<arguments.length&&arguments[1]!==void 0?arguments[1]:{};_classCallCheck(this,BaseNode),_defineProperty(this,"_portalDOMElement",null),_defineProperty(this,"_portalReactRoot",null),_defineProperty(this,"_normalizeChild",function(a){var c,d;if(!a)return a;var e=(null===(c=b.rawProps)||void 0===c?void 0:c.nodeTheme)||(null===(d=b.rawProps)||void 0===d?void 0:d.theme)||b.props.nodeTheme||b.props.theme;// For BaseNode instances, apply current theme if child has no theme
|
|
18
18
|
if(a instanceof BaseNode){var f;return null!==(f=a.rawProps)&&void 0!==f&&f.nodeTheme||void 0===e?a.render():new BaseNode(a.element,_objectSpread(_objectSpread({},a.rawProps),{},{nodeTheme:e})).render()}// For React.Component instances, wrap in BaseNode with theme if needed
|
|
19
19
|
if(a instanceof React.Component)return a.props.nodeTheme||void 0===e?a.render():new BaseNode(a.render(),_objectSpread(_objectSpread({},a.props),{},{nodeTheme:e})).render();// Validate element type before returning
|
|
20
20
|
if(!isValidElementType(a)){var g=getComponentType(a);throw new Error("Invalid element type: ".concat(g," provided!"))}// Return valid React elements as-is
|
|
@@ -33,13 +33,11 @@ d&&(Array.isArray(d)?k=d.map(function(a,c){return b._processRawNode(a,e,c)}):k=t
|
|
|
33
33
|
*/return _createClass(BaseNode,[{key:"_resolveObjWithTheme",value:function _resolveObjWithTheme(a,b){var c;// Return early if no theme or empty object
|
|
34
34
|
if(!b||0===Object.keys(a).length)return a;// Merge raw nodeTheme with passed theme for resolution
|
|
35
35
|
var d=_objectSpread(_objectSpread({},null===(c=this.rawProps)||void 0===c?void 0:c.nodeTheme),b),e=function resolveRecursively(a){var b={};// Process each property in the current object
|
|
36
|
-
for(var c in a)
|
|
37
|
-
if(Object.prototype.hasOwnProperty.call(a,c)){var f=a[c];// Skip private properties starting with underscore
|
|
38
|
-
if(c.startsWith("_"))return a;// Handle string values containing theme references
|
|
36
|
+
for(var c in a){var f=a[c];if(c.startsWith("_"))return a;// Handle string values containing theme references
|
|
39
37
|
if("string"==typeof f&&f.includes("theme.")){var g=f;// Replace theme path placeholders with actual theme values
|
|
40
|
-
g=g.replace(/theme\.([a-zA-Z0-9_.-]+)/g,function(a,b){var c=getValueByPath(d,b);// Convert theme value to string if it exists and is a valid type
|
|
38
|
+
g=g.replace(/theme\.([a-zA-Z0-9_.-]+)/g,function(a,b){var c=getValueByPath(d,b);// Convert the theme value to string if it exists and is a valid type
|
|
41
39
|
return null!=c&&["string","number"].includes(_typeof(c))?c+"":a}),b[c]=g}// Recursively process nested objects (excluding arrays)
|
|
42
|
-
else b[c]=f&&"object"===_typeof(f)
|
|
40
|
+
else b[c]=f&&"object"===_typeof(f)?e(f):f}return b};/**
|
|
43
41
|
* Recursively resolves theme values in an object
|
|
44
42
|
* @param currentObj The current object level being processed
|
|
45
43
|
* @returns New object with resolved theme values
|
|
@@ -125,11 +123,11 @@ var h=_objectSpread(_objectSpread({},e),{},{// Cast otherProps
|
|
|
125
123
|
key:d// This is the key of the current BaseNode itself
|
|
126
124
|
});// Prepare props for React.createElement
|
|
127
125
|
// Delete the key `nodeTheme` as it's not a valid DOM/React prop for the element
|
|
128
|
-
return delete h.nodeTheme,createElement(this.element,h,f)}}])}();/**
|
|
126
|
+
return delete h.nodeTheme,createElement(this.element,h,f)}},{key:"_ensurePortalInfrastructure",value:function _ensurePortalInfrastructure(){if("undefined"==typeof window)return!1;if(this._portalDOMElement&&this._portalReactRoot)return!0;if(this._portalDOMElement&&!this._portalDOMElement.isConnected&&(this._portalDOMElement=null,this._portalDOMElement=null),this._portalDOMElement||(this._portalDOMElement=document.createElement("div"),document.body.appendChild(this._portalDOMElement)),!this._portalReactRoot){if(!this._portalDOMElement)return!1;this._portalReactRoot=createRoot(this._portalDOMElement)}return!0}},{key:"toPortal",value:function toPortal(){var a=this;if(!this._ensurePortalInfrastructure()||!this._portalReactRoot)return null;var b=this.render();return this._portalReactRoot.render(b),_objectSpread(_objectSpread({},this._portalReactRoot),{},{unmount:function unmount(){a._portalReactRoot&&(a._portalReactRoot.unmount(),a._portalReactRoot=null),a._portalDOMElement&&(a._portalDOMElement.parentNode&&a._portalDOMElement.parentNode.removeChild(a._portalDOMElement),a._portalDOMElement=null)}})}}])}();/**
|
|
129
127
|
* Factory function to create a BaseNode instance.
|
|
130
128
|
* @param element The React element type.
|
|
131
129
|
* @param props The props for the node.
|
|
132
|
-
* @returns
|
|
130
|
+
* @returns NodeInstance<E> - A new BaseNode instance.
|
|
133
131
|
*/export function Node(a){var b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},c=_objectSpread({},b);// Ensure we are working with a mutable copy
|
|
134
132
|
// 'theme' prop itself is not directly used by BaseNode after this, nodeTheme is used.
|
|
135
133
|
// We can keep `theme` in rawProps if needed for cloning or inspection.
|