@meonode/ui 0.1.9 → 0.1.10

package/README.md

@@ -166,37 +166,52 @@ const Dashboard = Component(() =>
 also add this
 
 ```ts
-
 // Wraps a hook-capable component into a BaseNode-compatible Client Component
-import { Component, Column, Row, Div, P  } from '@meonode/ui'
+'use client'
+/**
+ * This file demonstrates integration between React hooks and BaseNode components
+ * using the @meonode/ui library for declarative UI construction
+ */
+import { Component, Column, Row, Div, P, Node } from '@meonode/ui'
 import { useState, useEffect } from 'react'
 
-// Shared theme object passed into components. This may be written in a different file and imported.
+/**
+ * Global theme configuration
+ * Contains color palette definitions used throughout components
+ * Can be extracted to separate theme file if needed
+ */
 const theme = {
   background: { primary: 'lightgreen', secondary: 'lightyellow' },
 }
 
-// Exported component rendered via <Component /> (client wrapper)
+/**
+ * Main page component wrapped in Component HOC to enable client-side features
+ * Demonstrates conditional rendering and component composition patterns
+ */
 export default Component(() => {
-  // React hook for conditional UI
+  // Controls visibility of detail sections
   const [showDetails, setShowDetails] = useState(false)
 
-  // Declarative layout using Column as root container
+  /**
+   * Main layout structured as a Column with:
+   * - Header row containing toggle button
+   * - Conditional detail sections using different rendering approaches
+   */
   return Column({
     theme,
     padding: 20,
     gap: 15,
     children: [
-      // Header row with a toggle button
+      // Interactive header section
       Row({
         gap: 10,
         children: [
           Div({
-            onClick: () => setShowDetails(prev => !prev),
+            onClick: () => setShowDetails(prev => !prev), // Toggle detail visibility
             cursor: 'pointer',
-            userSelect: 'none',
+            userSelect: 'none', // Prevent text selection
             padding: '10px 20px',
-            backgroundColor: 'theme.background.primary', // Node engine will handle this
+            backgroundColor: 'theme.background.primary', // Themed background
             borderRadius: 5,
             fontWeight: 'bold',
             children: showDetails ? 'Hide Details' : 'Show Details',
@@ -204,17 +219,31 @@ export default Component(() => {
         ],
       }),
 
-      // Conditionally render DetailComponent via function wrapper
-      // Ensures it's treated as a renderable function (deferred React class or element that is NOT called directly)
-      // Node engine will handle this like magic
-      showDetails && (() => DetailComponent({ info: 'Here are some details!' })), // Works like `Component(() => DetailComponent({ info: 'Here some details!' }))`,
-      showDetails && DetailComponent({ info: 'Here are some details!' }).render() // Works
+      /**
+       * Multiple approaches to conditional detail rendering:
+       * 1. Direct function wrapping
+       * 2. Component HOC wrapping
+       * 3. Node with ReturnRenderedDetailComponent
+       * 4. Non-working example with raw Node usage
+       */
+      showDetails && (() => DetailComponent({ info: 'Here are some details 1!' })), // Method 1
+      showDetails && Component(() => DetailComponent({ info: 'Here are some details 2!' })), // Method 2
+      showDetails && Node(ReturnRenderedDetailComponent, { info: 'Here are some details 2!' }).render(), // Method 3
+
+      // Fails because DetailComponent returns Node instance instead of ReactNode
+      showDetails && Node(DetailComponent, { info: 'Here are some details 2!' }).render(), // ❌ Invalid
     ],
   })
 })
 
-// A stateful detail section using useEffect and styled Div
+/**
+ * Displays a styled detail section with lifecycle logging
+ * @param {Object} props - Component properties
+ * @param {string} props.info - Text content to display
+ * @returns {Node} Rendered Div Node instance
+ */
 const DetailComponent = ({ info }: { info: string }) => {
+  // Log component lifecycle for debugging
   useEffect(() => {
     console.log('DetailComponent mounted')
     return () => {
@@ -222,15 +251,44 @@ const DetailComponent = ({ info }: { info: string }) => {
     }
   }, [])
 
+  // Themed container with text content
   return Div({
     padding: 15,
     border: '1px solid green',
     borderRadius: 6,
-    backgroundColor: 'theme.background.secondary', // Node engine will handle this
+    color: 'red',
+    backgroundColor: 'theme.background.secondary', // Theme-aware background
     children: P(info),
   })
 }
 
+/**
+ * Alternative implementation that explicitly returns rendered content
+ * Functionally identical to DetailComponent but compatible with Node wrapper
+ * @param {Object} props - Component properties
+ * @param {string} props.info - Text content to display
+ * @returns {ReactNode} Rendered React element
+ */
+const ReturnRenderedDetailComponent = ({ info }: { info: string }) => {
+  // Log component lifecycle for debugging
+  useEffect(() => {
+    console.log('DetailComponent mounted')
+    return () => {
+      console.log('DetailComponent unmounted')
+    }
+  }, [])
+
+  // Themed container with text content
+  return Div({
+    padding: 15,
+    border: '1px solid green',
+    borderRadius: 6,
+    color: 'red',
+    backgroundColor: 'theme.background.secondary', // Theme-aware background
+    children: P(info),
+  }).render()
+}
+
 ```
 
 ### Material UI Integration

package/dist/core.node.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { BaseNodeInstance, NodeElement, NodeProps } from './node.type.js';
+import React, { type ReactNode } from 'react';
+import type { BaseNodeInstance, NodeElement, NodeProps } from './node.type.js';
 /**
  * Factory function to create a BaseNode instance.
  * @param element The React element type.

package/dist/core.node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAkF,SAAS,EAAE,MAAM,OAAO,CAAA;AACxH,OAAO,EAAE,gBAAgB,EAAwC,WAAW,EAAE,SAAS,EAA4B,MAAM,mBAAmB,CAAA;AAuT5I;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,GAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAS9G;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,gBAAgB,CAAC,GAAG,CAAC,GAAG,SAAS,IACzG,OAAO,CAAC,kXAOjB"}
+{"version":3,"file":"core.node.d.ts","sourceRoot":"","sources":["../src/core.node.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAsG,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACjJ,OAAO,KAAK,EAAE,gBAAgB,EAAwC,WAAW,EAAE,SAAS,EAA4B,MAAM,mBAAmB,CAAA;AAuTjJ;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,GAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAS9G;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,gBAAgB,CAAC,GAAG,CAAC,GAAG,SAAS,IACzG,OAAO,CAAC,kXAOjB"}

package/dist/core.node.js

@@ -53,7 +53,7 @@ return f}/**
 ){var d=getComponentType(a),e=function generateIndexedKeyIfNeeded(a,b){if(b!==void 0&&null!==b)return b;if(void 0!==c){var d=getElementTypeName(a);return"".concat(d,"-").concat(c)}// No explicit key, and not an array child, so BaseNode constructor will handle.
 };// Helper to generate an indexed key if no explicit key is present and an index is available.
 // Case 1: Child is already a BaseNode instance
-if(a instanceof BaseNode||"object"===_typeof(a)&&null!==a&&!0===a._isBaseNode){var f=a,g=f.rawProps||{},h=g.nodeTheme,i=e(f.element,g.key);// Prefer child's own theme
+if(a instanceof BaseNode){var f=a,g=f.rawProps||{},h=g.nodeTheme,i=e(f.element,g.key);// Prefer child's own theme
 return new BaseNode(f.element,_objectSpread(_objectSpread({},g),{},{nodeTheme:h||b||{},key:i}))}// Case 2: Child is a primitive (string, number, boolean, null, undefined)
 if("string"===d||"number"===d||"boolean"===d||null===a||void 0===a)return a;// Case 3: Child is a function that needs to be called during render (FunctionRenderer).
 if("function"===d&&!isReactClassComponent(a)&&!isMemo(a)&&!isForwardRef(a)){// The key is for the BaseNode that wraps the _functionRenderer component.
@@ -104,4 +104,4 @@ return c.theme&&void 0===c.nodeTheme&&(c.nodeTheme=c.theme),new BaseNode(a,c)}/*
  * const MyComponent = Component((props) => {
  *   return Node('div', { ...props })
  * })
- */export function Component(a){return function(b){var d=a(b);return d instanceof BaseNode||"object"===_typeof(d)&&null!==d&&!0===d._isBaseNode?d.render():d}}
+ */export function Component(a){return function(b){var d=a(b);return d instanceof BaseNode?d.render():d}}

package/dist/node.type.d.ts

@@ -1,5 +1,5 @@
 import type { Attributes as ReactAttributes, ComponentProps, CSSProperties, ReactNode, JSX, ElementType, ComponentType, JSXElementConstructor, ReactInstance } from 'react';
-export type NodeElement = ReactNode | ReactInstance | ElementType | ComponentType | BaseNodeInstance<any> | ((props?: any) => ReactNode | Promise<ReactNode> | ReactInstance | BaseNodeInstance<any>);
+export type NodeElement = ReactNode | ReactInstance | ElementType | ComponentType<any> | BaseNodeInstance<any> | ((props?: any) => ReactNode | Promise<ReactNode> | ReactInstance | BaseNodeInstance<any>);
 /**
  * Defines valid child types that can be passed to a node:
  * - ReactNode: Any valid React child (elements, strings, numbers, etc.)

package/dist/node.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node.type.d.ts","sourceRoot":"","sources":["../src/node.type.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"node.type.d.ts","sourceRoot":"","sources":["../src/node.type.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meonode/ui",
   "description": "A structured approach to component composition with built-in theming, prop separation, and dynamic children handling.",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "type": "module",
   "main": "./dist/main.js",
   "types": "./dist/main.d.ts",