0.2.4

Author: linb

index.js

@@ -56,7 +56,7 @@ const getRand = (a) => (a || "") + parseInt(10e8 * Math.random(), 10).toString(3
   isEmptyArray = value => isArray(value) && value.length===0,
   isEmptyObject = value => isObject(value) && value.keys.length===0,
 
-  isDomElem = value =>  typeof HTMLElement === "object" ? value instanceof HTMLElement : value && typeof value === "object" && (value.nodeType === 1||value.nodeType === 11) && typeof value.nodeName==="string",
+  isDomElem = value =>  typeof Element === "object" ? value instanceof Element : typeof HTMLElement === "object" ? value instanceof HTMLElement : value && typeof value === "object" && (value.nodeType === 1||value.nodeType === 11) && typeof value.nodeName==="string",
   isEvent = value => value instanceof Event,
 
   isReactClassCom = value =>  typeof value === 'function' && value.prototype && !!value.prototype.isReactComponent,
@@ -987,19 +987,21 @@ const LazyComponent = React.forwardRef(({component, _usemodule_in_design, _rende
     return com;
   }
 });
-const If = ({condition, exact, _usemodule_in_design, children, ...props} ) => {
+const If = ({condition, exact, _usemodule_in_design, _usemodule_lastsel, children, ...props} ) => {
   if(_usemodule_in_design){
     if(!isArray(children)) children = [children];
-    children.unshift(React.createElement("div",null,`<If condition='${props['data-usemodule_condition']}'>`));
-    return React.createElement("div",{style:{'font-size':'75%',border:'dashed #444 1px',padding:"4px",margin:"4px"}},children);
+    children.unshift(React.createElement("div",{style:{'font-size':'75%',border:'dashed #444 1px',padding:"4px",margin:"4px 0",background:_usemodule_lastsel?"#fffbd4":""}},`<If condition='${props['data-usemodule_condition']}'>`));
+    children.push(React.createElement("div",{style:{'font-size':'75%',border:'dashed #444 1px',padding:"4px",margin:"4px 0",background:_usemodule_lastsel?"#fffbd4":""}},`</If>`));
+    return React.createElement("div", null, children );
   }else
-    return exact?condition===true:condition ? utils.isArray(children)? React.Children.map(children, child => child): (children || null) : null;
+    return (exact ? condition===true : condition) ? (utils.isArray(children)? React.Children.map(children, child => child): (children || null)) : null;
 }
 const Iterator = ({iterator, _usemodule_in_design, children, ...props} ) =>{
   if(_usemodule_in_design){
     if(!isArray(children)) children = [children];
-    children.unshift(React.createElement("div",null,`<Iterator iterator='${props['data-usemodule_iterator']}'>`));
-    return React.createElement("div",{style:{'font-size':'75%',border:'dashed #444 1px',padding:"4px",margin:"4px"}},children);
+    children.unshift(React.createElement("div",{style:{'font-size':'75%',border:'dashed #444 1px',padding:"4px 0",margin:"4px"}},`<Iterator iterator='${props['data-usemodule_iterator']}'>`));
+    children.push(React.createElement("div",{style:{'font-size':'75%',border:'dashed #444 1px',padding:"4px 0",margin:"4px"}},`</Iterator>`));
+    return React.createElement("div", null, _usemodule_lastsel ? children: children[0] );
   }else
     if(isArray(iterator)){
       return iterator.map( item => isObject(item) ? React.Children.map(children, child => React.cloneElement(child, item)) : null );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-module",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A react module hook for real configurable app with stateful persistent module tree and peer-to-peer messaging mechanism",
   "main": "index.js",
   "scripts": {

plugin_mui.js

@@ -185,16 +185,11 @@ const showBackdrop = (id="default", clickAway = true, style={}, transitionDurati
     return;
   }
   const div = getEmptyDiv();
-  if(!style.zIndex){
-    const useStyle = makeStyles(theme => {
+  const theme = useTheme();
+  if(!style.hasOwnProperty("zIndex")){
       style.zIndex = theme.zIndex.drawer + 1;
-    });
-    ReactDOM.render(React.createElement(() => {
-      useStyle();
-      return "";
-    }),div);
   }
-  if(!style.color){
+  if(!style.hasOwnProperty("color")){
     style.color = "#fff"
   }
 

plugin_router.js

@@ -9,27 +9,33 @@ const RelativeRouter = ({ children, _usemodule_in_design }) =>{
     const routes = [];
     children.forEach(child => {
       if(child.props && child.props.path && typeof(child.props.path)==="string"){
-        routes.push({ path: child.props.path, element : child });
+        routes.push({ path: child.props.path, element : React.createElement(React.Fragment,null,child.props.children) });
       }
     });
     return useRoutes(routes);
   }else{
     children.forEach(child => {
       if(child.props && Array.isArray(child.props.children)){
         child.props.children = child.props.children.map( c => {
-            const { children, ...others } = c.props; 
-            return (c.props && !/^[AB]_/.test(c.props.id) && c.props.path) ? React.createElement( "div",
-              { ...others, style:{border:'dotted #444 1px',padding:"4px",margin:"4px",background:(c.props._usemodule_lastsel?"#fffbd4":"")}},
-              !c.props._usemodule_lastsel
-                ? "{ path : '" + (c.props.path||"") + "', title : '" + (c.props.title||"") + "', component: <"+c.props._usemodule_vartag+">" + (children&&children.length===1&&children[0]&&children[0].type==='usemoduletext'?children[0].props.children[0]:"...") + "</"+c.props._usemodule_vartag+"> }" 
-                : c
-            ) : c;
-          })
+          let { children, ...others } = c.props; 
+          if (others && !/^[AB]_/.test(others.id) && others.path){
+              if(!Array.isArray(children)) children = [children];
+              children.unshift(React.createElement("div",
+                {style:{'font-size':'75%',border:'dashed #444 1px',padding:"4px",margin:"4px 0",background:others._usemodule_lastsel?"#fffbd4":""}},
+                "{ path : '" + (others.path||"") + "', title : '" + (others.title||"") + "', component: <"+others._usemodule_vartag+">" + (children&&children.length===1&&children[0]&&children[0].type==='usemoduletext'?children[0].props.children[0]:"...") + "</"+others._usemodule_vartag+"> }" 
+              ));
+              return React.createElement( "div", others, others._usemodule_lastsel ? children: children[0] );
+            }else{
+              return c;
       }
     });
-    return React.createElement("div", {style:{"font-size":"75%",border:'dashed #444 1px',padding:"4px",margin:"4px"}}, children);
+      }
+    });
+    return React.createElement("div", null, children);
   }
 };
+RelativeRouter._usemodule_nowrap = 1;
+RelativeRouter._usemodule_nostyle = 1;
 
 const useRouter = () => {
   const params = useParams();
@@ -38,15 +44,24 @@ const useRouter = () => {
   const navigate = useNavigate();
 
   return React.useMemo(() => {
-    return { params, searchParams, setSearchParams, location, navigate, replace: route=>navigate(route, {replace: true}) };
+    return { params, searchParams, setSearchParams, location, navigate, 
+      pathname: location.pathname,
+      relativePath: "/" + params["*"].split("/").pop(),
+      query: {
+        ...useModule.utils.getURLParams(location.search),
+        ...params
+      },
+      push: route=>navigate(route),
+      replace: route=>navigate(route, {replace: true}) 
+    };
   }, [params, searchParams, setSearchParams, location, navigate ]);
 };
 
 useModule.statePlugIn("router", module => {
   const opt = module.options;
   if(opt.props && opt.props.router){
     return opt._usemodule_in_design
-        ? { params:{}, searchParams:{},setSearchParams:(searchParams)=>{}, location:{hash: "",key: "default",pathname: "/",search: "",state: null}, navigate:(route, option)=>{}, replace:(route)=>{} }
+        ? { params:{}, searchParams:{},setSearchParams:(searchParams)=>{}, location:{hash: "",key: "default",pathname: "/",search: "",state: null}, pathname:"/", relativePath:"/", query:{"*":"/"}, navigate:(route, option)=>{}, push:(route)=>{}, replace:(route)=>{} }
       : useRouter();
   }
 });