@meonode/ui
Version:
A structured approach to component composition with built-in theming, prop separation, and dynamic children handling.
25 lines • 2.81 kB
JavaScript
;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 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 _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{BaseNode,Node}from"../core.node";/**
* Higher-order component wrapper that converts BaseNode components into React components.
* This wrapper ensures proper theme propagation and component rendering in the React ecosystem.
*
* Key features:
* - Converts BaseNode instances to React elements via render()
* - Handles theme inheritance and merging
* - Preserves component props
* - Type-safe with generic prop types
* @template P - The props type for the wrapped component
* @param component Component function that returns a BaseNode or ReactNode
* @returns A React function component that handles BaseNode conversion and theme propagation
* @example
* ```ts
* // Basic usage
* const App = Component(() => {
* return Div({
* theme: { color: 'blue' }
* })
* })
* ```
*/export function Component(a){// Create a wrapper component that handles theme and rendering
var b=function Renderer(b){var c=a(b);// Execute wrapped component
// Handle BaseNode results - requires special processing
if(c instanceof BaseNode){var d,e;return Node(c.element,_objectSpread(_objectSpread({},c.rawProps),{},{nodetheme:(null===(d=c.rawProps)||void 0===d?void 0:d.nodetheme)||(null===(e=c.rawProps)||void 0===e?void 0:e.theme)||b.nodetheme||b.theme})).render()}return c};return function Func(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{};return Node(b,a).render()}}