@meonode/ui 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0] - 2025-12-05
+
+### Feat
+
+- **types**: enforce strict component props and improve type inference ([`047c0f8`](https://github.com/l7aromeo/meonode-ui/commit/047c0f8))
+    - Redefined `MergedProps` and introduced `ValidateComponentProps` to strictly validate props passed to `Node` and `createNode`.
+    - Added `ExactProps` generic constraint to prevent excess property passing, improving type safety.
+    - Enhanced `PropsOf` to better infer props from React components, including `forwardRef` and `Memo` components.
+- **theme**: enable theme variable resolution in style keys ([`30ca1fd`](https://github.com/l7aromeo/meonode-ui/commit/30ca1fd))
+    - Updated `ThemeUtil` to resolve theme variables within style keys (e.g., media queries like `@media (max-width: theme.breakpoint.lg)`).
+
+### Refactor
+
+- **portal**: optimize portal implementation and fix types ([`9643682`](https://github.com/l7aromeo/meonode-ui/commit/9643682))
+    - Refactored `Portal` HOC to use a cleaner, more efficient implementation for provider wrapping.
+    - Improved type definitions for `PortalLauncher` and `PortalProps` to ensure correct prop inference.
+
+### Fix
+
+- **util**: correct function child detection and rendering logic ([`944cfbd`](https://github.com/l7aromeo/meonode-ui/commit/944cfbd))
+    - Updated `isFunctionChild` type definition to correctly identify function children while excluding React components (Class, Memo, ForwardRef).
+    - Updated `functionRenderer` type definition to properly handle function child execution.
+
+### Test
+
+- **test**: refactor tests to align with strict types and fix leaks ([`40c87c7`](https://github.com/l7aromeo/meonode-ui/commit/40c87c7))
+    - Updated various tests (`advanced-features`, `leak-repro`, `memoization`) to comply with the new strict type requirements.
+    - Added `strict-component-props.test.ts` and `theme-key-resolution.test.ts` to verify new features.
+
+### Chore
+
+- **build**: update build config and dependencies ([`a9367e0`](https://github.com/l7aromeo/meonode-ui/commit/a9367e0))
+    - Updated `package.json` scripts and `tsconfig.json` for better build and test processes.
+
 ## [1.0.1] - 2025-11-30
 
 ### Fix

package/README.md

@@ -120,7 +120,6 @@ Built on @emotion/react for:
 - Vendor prefixing
 - Dead code elimination
 - Server-side rendering support
-- Zero-runtime overhead in production
 
 ### Smart Prop Differentiation
 

package/dist/cjs/hoc/component.hoc.js

@@ -1 +1 @@
-"use strict";var e=require("../core.node.js");require("react");var r=require("../helper/common.helper.js"),n=require("../util/node.util.js");exports.Component=function(o){const t=r.getElementTypeName(o),s=r=>{const t=o(r);return t instanceof e.BaseNode||n.NodeUtil.isNodeInstance(t)?e.Node(t.element,t.rawProps).render():t};function i(r={},n){return e.Node(s,r,n).render()}return s.displayName=`Renderer(${t})`,i.displayName=`Component(${t})`,i};
+"use strict";var e=require("../core.node.js"),r=require("../helper/common.helper.js"),n=require("../util/node.util.js");exports.Component=function(o){const t=r.getElementTypeName(o),s=r=>{const t=o(r);return t instanceof e.BaseNode||n.NodeUtil.isNodeInstance(t)?e.Node(t.element,t.rawProps).render():t};function i(r={},n){return e.Node(s,r,n).render()}return s.displayName=`Renderer(${t})`,i.displayName=`Component(${t})`,i};

package/dist/cjs/main.js

@@ -1 +1 @@
-"use strict";var e=require("./constant/common.const.js"),t=require("./core.node.js"),r=require("./hoc/portal.hoc.js"),o=require("./hoc/component.hoc.js");require("react");var s=require("./components/react.node.js"),p=require("./components/html.node.js"),x=require("./components/theme-provider.js"),a=require("./hook/usePortal.js"),i=require("./hook/useTheme.js");exports.setDebugMode=e.setDebugMode,exports.Node=t.Node,exports.createChildrenFirstNode=t.createChildrenFirstNode,exports.createNode=t.createNode,exports.Portal=r.Portal,exports.Component=o.Component,exports.Activity=s.Activity,exports.Fragment=s.Fragment,exports.Suspense=s.Suspense,exports.A=p.A,exports.Abbr=p.Abbr,exports.Absolute=p.Absolute,exports.Address=p.Address,exports.Area=p.Area,exports.Article=p.Article,exports.Aside=p.Aside,exports.Audio=p.Audio,exports.B=p.B,exports.Base=p.Base,exports.Bdi=p.Bdi,exports.Bdo=p.Bdo,exports.Blockquote=p.Blockquote,exports.Body=p.Body,exports.Br=p.Br,exports.Button=p.Button,exports.Canvas=p.Canvas,exports.Caption=p.Caption,exports.Center=p.Center,exports.Cite=p.Cite,exports.Code=p.Code,exports.Col=p.Col,exports.Colgroup=p.Colgroup,exports.Column=p.Column,exports.Container=p.Container,exports.Data=p.Data,exports.Datalist=p.Datalist,exports.Dd=p.Dd,exports.Details=p.Details,exports.Dfn=p.Dfn,exports.Dialog=p.Dialog,exports.Div=p.Div,exports.Dl=p.Dl,exports.Dt=p.Dt,exports.Em=p.Em,exports.Embed=p.Embed,exports.Fieldset=p.Fieldset,exports.Figcaption=p.Figcaption,exports.Figure=p.Figure,exports.Fixed=p.Fixed,exports.Footer=p.Footer,exports.Form=p.Form,exports.Grid=p.Grid,exports.H1=p.H1,exports.H2=p.H2,exports.H3=p.H3,exports.H4=p.H4,exports.H5=p.H5,exports.H6=p.H6,exports.Head=p.Head,exports.Header=p.Header,exports.Hgroup=p.Hgroup,exports.Hr=p.Hr,exports.Html=p.Html,exports.I=p.I,exports.Iframe=p.Iframe,exports.Img=p.Img,exports.Input=p.Input,exports.Kbd=p.Kbd,exports.Label=p.Label,exports.Legend=p.Legend,exports.Li=p.Li,exports.Link=p.Link,exports.Main=p.Main,exports.MapElement=p.MapElement,exports.Mark=p.Mark,exports.Menu=p.Menu,exports.Meta=p.Meta,exports.Meter=p.Meter,exports.Nav=p.Nav,exports.Noscript=p.Noscript,exports.ObjectElement=p.ObjectElement,exports.Ol=p.Ol,exports.Optgroup=p.Optgroup,exports.Option=p.Option,exports.Output=p.Output,exports.P=p.P,exports.Param=p.Param,exports.Picture=p.Picture,exports.Pre=p.Pre,exports.Progress=p.Progress,exports.Q=p.Q,exports.Relative=p.Relative,exports.Root=p.Root,exports.Row=p.Row,exports.Rp=p.Rp,exports.Rt=p.Rt,exports.Ruby=p.Ruby,exports.S=p.S,exports.Samp=p.Samp,exports.Script=p.Script,exports.Search=p.Search,exports.Section=p.Section,exports.Select=p.Select,exports.Small=p.Small,exports.Source=p.Source,exports.Span=p.Span,exports.Static=p.Static,exports.Sticky=p.Sticky,exports.Strong=p.Strong,exports.Style=p.Style,exports.Sub=p.Sub,exports.Summary=p.Summary,exports.Sup=p.Sup,exports.Svg=p.Svg,exports.SvgCircle=p.SvgCircle,exports.SvgDefs=p.SvgDefs,exports.SvgEllipse=p.SvgEllipse,exports.SvgG=p.SvgG,exports.SvgLine=p.SvgLine,exports.SvgLinearGradient=p.SvgLinearGradient,exports.SvgPath=p.SvgPath,exports.SvgPolygon=p.SvgPolygon,exports.SvgPolyline=p.SvgPolyline,exports.SvgRadialGradient=p.SvgRadialGradient,exports.SvgRect=p.SvgRect,exports.SvgStop=p.SvgStop,exports.SvgSymbol=p.SvgSymbol,exports.SvgText=p.SvgText,exports.SvgTspan=p.SvgTspan,exports.SvgUse=p.SvgUse,exports.Table=p.Table,exports.Tbody=p.Tbody,exports.Td=p.Td,exports.Template=p.Template,exports.Text=p.Text,exports.Textarea=p.Textarea,exports.Tfoot=p.Tfoot,exports.Th=p.Th,exports.Thead=p.Thead,exports.Time=p.Time,exports.Title=p.Title,exports.Tr=p.Tr,exports.Track=p.Track,exports.U=p.U,exports.Ul=p.Ul,exports.Var=p.Var,exports.Video=p.Video,exports.Wbr=p.Wbr,exports.ThemeProvider=x.ThemeProvider,exports.usePortal=a.usePortal,exports.useTheme=i.useTheme;
+"use strict";var e=require("./constant/common.const.js"),t=require("./core.node.js"),r=require("./hoc/portal.hoc.js"),o=require("./hoc/component.hoc.js");require("react"),require("csstype");var s=require("./components/react.node.js"),p=require("./components/html.node.js"),x=require("./components/theme-provider.js"),a=require("./hook/usePortal.js"),i=require("./hook/useTheme.js");exports.setDebugMode=e.setDebugMode,exports.Node=t.Node,exports.createChildrenFirstNode=t.createChildrenFirstNode,exports.createNode=t.createNode,exports.Portal=r.Portal,exports.Component=o.Component,exports.Activity=s.Activity,exports.Fragment=s.Fragment,exports.Suspense=s.Suspense,exports.A=p.A,exports.Abbr=p.Abbr,exports.Absolute=p.Absolute,exports.Address=p.Address,exports.Area=p.Area,exports.Article=p.Article,exports.Aside=p.Aside,exports.Audio=p.Audio,exports.B=p.B,exports.Base=p.Base,exports.Bdi=p.Bdi,exports.Bdo=p.Bdo,exports.Blockquote=p.Blockquote,exports.Body=p.Body,exports.Br=p.Br,exports.Button=p.Button,exports.Canvas=p.Canvas,exports.Caption=p.Caption,exports.Center=p.Center,exports.Cite=p.Cite,exports.Code=p.Code,exports.Col=p.Col,exports.Colgroup=p.Colgroup,exports.Column=p.Column,exports.Container=p.Container,exports.Data=p.Data,exports.Datalist=p.Datalist,exports.Dd=p.Dd,exports.Details=p.Details,exports.Dfn=p.Dfn,exports.Dialog=p.Dialog,exports.Div=p.Div,exports.Dl=p.Dl,exports.Dt=p.Dt,exports.Em=p.Em,exports.Embed=p.Embed,exports.Fieldset=p.Fieldset,exports.Figcaption=p.Figcaption,exports.Figure=p.Figure,exports.Fixed=p.Fixed,exports.Footer=p.Footer,exports.Form=p.Form,exports.Grid=p.Grid,exports.H1=p.H1,exports.H2=p.H2,exports.H3=p.H3,exports.H4=p.H4,exports.H5=p.H5,exports.H6=p.H6,exports.Head=p.Head,exports.Header=p.Header,exports.Hgroup=p.Hgroup,exports.Hr=p.Hr,exports.Html=p.Html,exports.I=p.I,exports.Iframe=p.Iframe,exports.Img=p.Img,exports.Input=p.Input,exports.Kbd=p.Kbd,exports.Label=p.Label,exports.Legend=p.Legend,exports.Li=p.Li,exports.Link=p.Link,exports.Main=p.Main,exports.MapElement=p.MapElement,exports.Mark=p.Mark,exports.Menu=p.Menu,exports.Meta=p.Meta,exports.Meter=p.Meter,exports.Nav=p.Nav,exports.Noscript=p.Noscript,exports.ObjectElement=p.ObjectElement,exports.Ol=p.Ol,exports.Optgroup=p.Optgroup,exports.Option=p.Option,exports.Output=p.Output,exports.P=p.P,exports.Param=p.Param,exports.Picture=p.Picture,exports.Pre=p.Pre,exports.Progress=p.Progress,exports.Q=p.Q,exports.Relative=p.Relative,exports.Root=p.Root,exports.Row=p.Row,exports.Rp=p.Rp,exports.Rt=p.Rt,exports.Ruby=p.Ruby,exports.S=p.S,exports.Samp=p.Samp,exports.Script=p.Script,exports.Search=p.Search,exports.Section=p.Section,exports.Select=p.Select,exports.Small=p.Small,exports.Source=p.Source,exports.Span=p.Span,exports.Static=p.Static,exports.Sticky=p.Sticky,exports.Strong=p.Strong,exports.Style=p.Style,exports.Sub=p.Sub,exports.Summary=p.Summary,exports.Sup=p.Sup,exports.Svg=p.Svg,exports.SvgCircle=p.SvgCircle,exports.SvgDefs=p.SvgDefs,exports.SvgEllipse=p.SvgEllipse,exports.SvgG=p.SvgG,exports.SvgLine=p.SvgLine,exports.SvgLinearGradient=p.SvgLinearGradient,exports.SvgPath=p.SvgPath,exports.SvgPolygon=p.SvgPolygon,exports.SvgPolyline=p.SvgPolyline,exports.SvgRadialGradient=p.SvgRadialGradient,exports.SvgRect=p.SvgRect,exports.SvgStop=p.SvgStop,exports.SvgSymbol=p.SvgSymbol,exports.SvgText=p.SvgText,exports.SvgTspan=p.SvgTspan,exports.SvgUse=p.SvgUse,exports.Table=p.Table,exports.Tbody=p.Tbody,exports.Td=p.Td,exports.Template=p.Template,exports.Text=p.Text,exports.Textarea=p.Textarea,exports.Tfoot=p.Tfoot,exports.Th=p.Th,exports.Thead=p.Thead,exports.Time=p.Time,exports.Title=p.Title,exports.Tr=p.Tr,exports.Track=p.Track,exports.U=p.U,exports.Ul=p.Ul,exports.Var=p.Var,exports.Video=p.Video,exports.Wbr=p.Wbr,exports.ThemeProvider=x.ThemeProvider,exports.usePortal=a.usePortal,exports.useTheme=i.useTheme;

package/dist/cjs/util/theme.util.js

@@ -1 +1 @@
-"use strict";var e=require("../helper/common.helper.js");class t{constructor(){}static parseFlexShorthand(e){if(null==e)return null;if("number"==typeof e)return{grow:e,shrink:1,basis:"0%"};if("string"!=typeof e)return null;const t=e.trim().toLowerCase();if(!t)return null;switch(t){case"none":return{grow:0,shrink:0,basis:"auto"};case"auto":return{grow:1,shrink:1,basis:"auto"};case"initial":return{grow:0,shrink:1,basis:"auto"};default:return null}}static isPlainObject=e=>{if("object"!=typeof e||null===e)return!1;const t=Object.getPrototypeOf(e);return null===t||t===Object.prototype};static resolveObjWithTheme=(r,l,s={})=>{const{processFunctions:n=!1}=s;if(!l||!l.system||"object"!=typeof l.system||0===Object.keys(l.system).length||!r||0===Object.keys(r).length)return r;const i=l.system,o=[{value:r,isProcessed:!1}],a=new Map,u=new Set,c=/theme\.([a-zA-Z0-9_.-]+)/g,f=t=>{c.lastIndex=0;let r=!1;const l=t.replace(c,(t,l)=>{const s=e.getValueByPath(i,l);if(null!=s){if(r=!0,"object"==typeof s){if(!Array.isArray(s)&&"default"in s)return s.default;throw new Error("The provided theme path is invalid!")}return s}return t});return r?l:t};for(;o.length>0;){const e=o[o.length-1],r=e.value;if(t.isPlainObject(r)||Array.isArray(r))if(a.has(r))o.pop();else if(e.isProcessed){o.pop(),u.delete(r);let e=r;if(Array.isArray(r)){let t=null;for(let e=0;e<r.length;e++){const l=r[e],s=a.get(l)??l;s!==l&&(null===t&&(t=[...r]),t[e]=s)}null!==t&&(e=t)}else{let t=null;for(const e in r)if(Object.prototype.hasOwnProperty.call(r,e)){const s=r[e];let i=a.get(s)??s;if("function"==typeof i&&n){const e=i(l);i="string"==typeof e&&e.includes("theme.")?f(e):e}else"string"==typeof i&&i.includes("theme.")&&(i=f(i));i!==s&&(null===t&&(t={...r}),t[e]=i)}null!==t&&(e=t)}a.set(r,e)}else{e.isProcessed=!0,u.add(r);const l=Array.isArray(r)?r:Object.values(r);for(let e=l.length-1;e>=0;e--){const r=l[e];!t.isPlainObject(r)&&!Array.isArray(r)||u.has(r)||o.push({value:r,isProcessed:!1})}}else o.pop()}return a.get(r)??r};static resolveDefaultStyle=e=>{if(null==e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e)return{};const{flex:r,...l}=e,s="flex"===l.display||"inline-flex"===l.display,n=!!(l.overflow||l.overflowY||l.overflowX),i=l.flexFlow?.includes("wrap")||"wrap"===l.flexWrap||"wrap-reverse"===l.flexWrap,o="flexShrink"in e&&void 0!==e.flexShrink,a=r?t.parseFlexShorthand(r):null;let u;if(!o)if(a)u=a.shrink;else if(s){if(!n){const e="column"===l.flexDirection||"column-reverse"===l.flexDirection,t="row"===l.flexDirection||"row-reverse"===l.flexDirection||!l.flexDirection;(e&&!i||t&&!i)&&(u=0)}}else u=0;return{flex:r,flexShrink:u,minHeight:0,minWidth:0,...l}}}exports.ThemeUtil=t;
+"use strict";var e=require("../helper/common.helper.js");class t{constructor(){}static parseFlexShorthand(e){if(null==e)return null;if("number"==typeof e)return{grow:e,shrink:1,basis:"0%"};if("string"!=typeof e)return null;const t=e.trim().toLowerCase();if(!t)return null;switch(t){case"none":return{grow:0,shrink:0,basis:"auto"};case"auto":return{grow:1,shrink:1,basis:"auto"};case"initial":return{grow:0,shrink:1,basis:"auto"};default:return null}}static isPlainObject=e=>{if("object"!=typeof e||null===e)return!1;const t=Object.getPrototypeOf(e);return null===t||t===Object.prototype};static resolveObjWithTheme=(r,l,s={})=>{const{processFunctions:n=!1}=s;if(!l||!l.system||"object"!=typeof l.system||0===Object.keys(l.system).length||!r||0===Object.keys(r).length)return r;const i=l.system,o=[{value:r,isProcessed:!1}],a=new Map,u=new Set,c=/theme\.([a-zA-Z0-9_.-]+)/g,f=t=>{c.lastIndex=0;let r=!1;const l=t.replace(c,(t,l)=>{const s=e.getValueByPath(i,l);if(null!=s){if(r=!0,"object"==typeof s){if(!Array.isArray(s)&&"default"in s)return s.default;throw new Error("The provided theme path is invalid!")}return s}return t});return r?l:t};for(;o.length>0;){const e=o[o.length-1],r=e.value;if(t.isPlainObject(r)||Array.isArray(r))if(a.has(r))o.pop();else if(e.isProcessed){o.pop(),u.delete(r);let e=r;if(Array.isArray(r)){let t=null;for(let e=0;e<r.length;e++){const l=r[e],s=a.get(l)??l;s!==l&&(null===t&&(t=[...r]),t[e]=s)}null!==t&&(e=t)}else{let t=null;for(const e in r)if(Object.prototype.hasOwnProperty.call(r,e)){const s=r[e];let i=a.get(s)??s,o=e;if("string"==typeof e&&e.includes("theme.")&&(o=f(e)),"function"==typeof i&&n){const e=i(l);i="string"==typeof e&&e.includes("theme.")?f(e):e}else"string"==typeof i&&i.includes("theme.")&&(i=f(i));i===s&&o===e||(null===t&&(t={...r}),o!==e&&delete t[e],t[o]=i)}null!==t&&(e=t)}a.set(r,e)}else{e.isProcessed=!0,u.add(r);const l=Array.isArray(r)?r:Object.values(r);for(let e=l.length-1;e>=0;e--){const r=l[e];!t.isPlainObject(r)&&!Array.isArray(r)||u.has(r)||o.push({value:r,isProcessed:!1})}}else o.pop()}return a.get(r)??r};static resolveDefaultStyle=e=>{if(null==e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e)return{};const{flex:r,...l}=e,s="flex"===l.display||"inline-flex"===l.display,n=!!(l.overflow||l.overflowY||l.overflowX),i=l.flexFlow?.includes("wrap")||"wrap"===l.flexWrap||"wrap-reverse"===l.flexWrap,o="flexShrink"in e&&void 0!==e.flexShrink,a=r?t.parseFlexShorthand(r):null;let u;if(!o)if(a)u=a.shrink;else if(s){if(!n){const e="column"===l.flexDirection||"column-reverse"===l.flexDirection,t="row"===l.flexDirection||"row-reverse"===l.flexDirection||!l.flexDirection;(e&&!i||t&&!i)&&(u=0)}}else u=0;return{flex:r,flexShrink:u,minHeight:0,minWidth:0,...l}}}exports.ThemeUtil=t;