@kne/modules-dev 2.1.15 → 2.1.17

package/dist/create-entry.modern.js

@@ -1,4 +1,4 @@
-import React$1, { useRef, useEffect, useMemo, useState } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 import { HashRouter, useParams, useSearchParams, Navigate, useNavigate, Outlet, Routes, Route, useLocation } from 'react-router-dom';
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import ensureSlash from '@kne/ensure-slash';
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import ExampleDriver from '@kne/example-driver';
 import hljs from 'highlight.js';
 import 'highlight.js/styles/github.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Fetch from '@kne/react-fetch';
 import Icon from '@kne/react-icon';
 
@@ -48,7 +49,7 @@ const Highlight = _ref => {
       hljs.highlightElement(el);
     });
   }, [html]);
-  return /*#__PURE__*/React$1.createElement("div", _extends({}, props, {
+  return /*#__PURE__*/jsx("div", _extends({}, props, {
     ref: ref,
     dangerouslySetInnerHTML: {
       __html: html
@@ -66,7 +67,11 @@ const ExampleDriverContext = createWithRemoteLoader({
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const [GlobalProvider] = remoteModules;
-  return /*#__PURE__*/React$1.createElement(HashRouter, null, /*#__PURE__*/React$1.createElement(GlobalProvider, props, children));
+  return /*#__PURE__*/jsx(HashRouter, {
+    children: /*#__PURE__*/jsx(GlobalProvider, _extends({}, props, {
+      children: children
+    }))
+  });
 });
 const ExampleContent = createWithRemoteLoader({
   modules: ["components-core:Global@useGlobalContext", "components-core:Global@usePreset"]
@@ -83,9 +88,10 @@ const ExampleContent = createWithRemoteLoader({
   const DriverContext = useMemo(() => {
     return ({
       children
-    }) => /*#__PURE__*/React$1.createElement(ExampleDriverContext, _extends({}, global, {
-      preset: preset
-    }), children);
+    }) => /*#__PURE__*/jsx(ExampleDriverContext, _extends({}, global, {
+      preset: preset,
+      children: children
+    }));
   }, [global]);
   useEffect(() => {
     if (!exampleStyle) {
@@ -98,38 +104,53 @@ const ExampleContent = createWithRemoteLoader({
       document.head.removeChild(dom);
     };
   }, [exampleStyle]);
-  return /*#__PURE__*/React$1.createElement(Space, {
+  return /*#__PURE__*/jsxs(Space, {
     className: classnames('container', style['main']),
-    direction: "vertical"
-  }, data.packageName && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("h2", {
-    className: style['part-title']
-  }, "\u5B89\u88C5"), /*#__PURE__*/React$1.createElement(Highlight, {
-    className: "mark-down-html",
-    html: `<pre><code class="language-shell hljs">npm install --save ${data.packageName}</code></pre>`
-  })), data.description && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("h2", {
-    className: style['part-title']
-  }, "\u63CF\u8FF0"), /*#__PURE__*/React$1.createElement(Highlight, {
-    className: "mark-down-html",
-    html: data.description
-  })), data.summary && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("h2", {
-    className: style['part-title']
-  }, "\u6982\u8FF0"), /*#__PURE__*/React$1.createElement(Highlight, {
-    className: "mark-down-html",
-    html: data.summary
-  })), data.example.list && data.example.list.length > 0 && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("h2", {
-    className: style['part-title']
-  }, "\u4EE3\u7801\u793A\u4F8B"), /*#__PURE__*/React$1.createElement("div", {
-    className: classnames(style['example'], data.example.className)
-  }, /*#__PURE__*/React$1.createElement(ExampleDriver, {
-    contextComponent: DriverContext,
-    isFull: data.example.isFull,
-    list: data.example.list
-  }))), /*#__PURE__*/React$1.createElement("h2", {
-    className: style['part-title']
-  }, "API"), /*#__PURE__*/React$1.createElement(Highlight, {
-    className: "mark-down-html",
-    html: data.api
-  }));
+    direction: "vertical",
+    children: [data.packageName && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("h2", {
+        className: style['part-title'],
+        children: "\u5B89\u88C5"
+      }), /*#__PURE__*/jsx(Highlight, {
+        className: "mark-down-html",
+        html: `<pre><code class="language-shell hljs">npm install --save ${data.packageName}</code></pre>`
+      })]
+    }), data.description && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("h2", {
+        className: style['part-title'],
+        children: "\u63CF\u8FF0"
+      }), /*#__PURE__*/jsx(Highlight, {
+        className: "mark-down-html",
+        html: data.description
+      })]
+    }), data.summary && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("h2", {
+        className: style['part-title'],
+        children: "\u6982\u8FF0"
+      }), /*#__PURE__*/jsx(Highlight, {
+        className: "mark-down-html",
+        html: data.summary
+      })]
+    }), data.example.list && data.example.list.length > 0 && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("h2", {
+        className: style['part-title'],
+        children: "\u4EE3\u7801\u793A\u4F8B"
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames(style['example'], data.example.className),
+        children: /*#__PURE__*/jsx(ExampleDriver, {
+          contextComponent: DriverContext,
+          isFull: data.example.isFull,
+          list: data.example.list
+        })
+      })]
+    }), /*#__PURE__*/jsx("h2", {
+      className: style['part-title'],
+      children: "API"
+    }), /*#__PURE__*/jsx(Highlight, {
+      className: "mark-down-html",
+      html: data.api
+    })]
+  });
 });
 const ExamplePage = createWithRemoteLoader({
   modules: ["components-core:Layout@Page", "components-core:Layout@Menu", "components-core:Global@useGlobalContext"]
@@ -141,15 +162,17 @@ const ExamplePage = createWithRemoteLoader({
   pageProps: _pageProps = {}
 }) => {
   const [Page, Menu] = remoteModules;
-  return /*#__PURE__*/React$1.createElement(Page, _extends({
+  return /*#__PURE__*/jsx(Page, _extends({
     title: data.name,
     className: style['example-page'],
-    menu: items && items.length > 0 && /*#__PURE__*/React$1.createElement(Menu, {
+    menu: items && items.length > 0 && /*#__PURE__*/jsx(Menu, {
       currentKey: current,
       items: items
     })
-  }, _pageProps), /*#__PURE__*/React$1.createElement(ExampleContent, {
-    data: data
+  }, _pageProps, {
+    children: /*#__PURE__*/jsx(ExampleContent, {
+      data: data
+    })
   }));
 });
 
@@ -165,14 +188,14 @@ const Example = ({
   const searchString = searchParams.size > 0 ? '?' + searchParams.toString() : '';
   const data = readme[current];
   if (!(current && readme[current])) {
-    return /*#__PURE__*/React$1.createElement(Navigate, {
+    return /*#__PURE__*/jsx(Navigate, {
       to: `${ensureSlash(baseUrl, true)}${Object.keys(readme)[0]}${searchString}`,
       replace: true
     });
   }
   const renderExamplePage = ({
     data
-  }) => /*#__PURE__*/React$1.createElement(ExamplePage, {
+  }) => /*#__PURE__*/jsx(ExamplePage, {
     pageProps: pageProps,
     data: data,
     current: current,
@@ -185,7 +208,7 @@ const Example = ({
     })
   });
   if (data && data.hasOwnProperty('loader') || data.hasOwnProperty('url')) {
-    return /*#__PURE__*/React$1.createElement(Fetch, _extends({}, Object.assign({}, data), {
+    return /*#__PURE__*/jsx(Fetch, _extends({}, Object.assign({}, data), {
       render: renderExamplePage
     }));
   }
@@ -203,14 +226,14 @@ const ModulesIsEmpty = ({
 }) => {
   const location = useLocation();
   if (readme && Object.keys(readme).length > 0 && ensureSlash(location.pathname, true) === baseUrl) {
-    return /*#__PURE__*/React$1.createElement(Navigate, {
+    return /*#__PURE__*/jsx(Navigate, {
       to: `${baseUrl}${Object.keys(readme)[0]}`
     });
   }
   if (readme && Object.keys(readme).length > 0) {
-    return /*#__PURE__*/React$1.createElement(Outlet, null);
+    return /*#__PURE__*/jsx(Outlet, {});
   }
-  return /*#__PURE__*/React$1.createElement(Result, {
+  return /*#__PURE__*/jsx(Result, {
     status: "404",
     title: "\u6CA1\u6709\u68C0\u6D4B\u5230\u4E1A\u52A1\u7EC4\u4EF6",
     subTitle: "\u60A8\u53EF\u4EE5\u901A\u8FC7 modules-dev create \u547D\u4EE4\u521B\u5EFA\u7EC4\u4EF6\uFF0C\u5982\u679C\u5DF2\u7ECF\u6709\u7EC4\u4EF6\u8BF7\u68C0\u67E5\u73AF\u5883\u53D8\u91CF MODULES_DEV_BASE_DIR\u548CMODULES_DEV_ALIAS_NAME \u662F\u5426\u8BBE\u7F6E\u6B63\u786E"
@@ -223,8 +246,8 @@ const EntryButton = createWithRemoteLoader({
 }) => {
   const [Icon] = remoteModules;
   const navigate = useNavigate();
-  return /*#__PURE__*/React$1.createElement(FloatButton, {
-    icon: /*#__PURE__*/React$1.createElement(Icon, {
+  return /*#__PURE__*/jsx(FloatButton, {
+    icon: /*#__PURE__*/jsx(Icon, {
       className: "icon",
       type: "icon-liangdian"
     }),
@@ -243,14 +266,16 @@ const MainLayout = createWithRemoteLoader({
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const [Global, Layout] = remoteModules;
-  return /*#__PURE__*/React$1.createElement(Global, _extends({}, props, {
-    preset: preset
-  }), /*#__PURE__*/React$1.createElement(Layout, {
-    navigation: {
-      showIndex: false,
-      list: paths
-    }
-  }, /*#__PURE__*/React$1.createElement(Outlet, null)));
+  return /*#__PURE__*/jsx(Global, _extends({}, props, {
+    preset: preset,
+    children: /*#__PURE__*/jsx(Layout, {
+      navigation: {
+        showIndex: false,
+        list: paths
+      },
+      children: /*#__PURE__*/jsx(Outlet, {})
+    })
+  }));
 });
 const ExampleRoutes = _ref2 => {
   let {
@@ -275,36 +300,40 @@ const ExampleRoutes = _ref2 => {
   const componentsBaseUrl = ensureSlash(get(componentsPath, 'path', '/'), true);
   const baseUrlPrefix = new RegExp(`^${ensureSlash(baseUrl, true)}`);
   const componentsRoutePath = ensureSlash(componentsBaseUrl.replace(baseUrlPrefix, ''));
-  return /*#__PURE__*/React$1.createElement(Routes, null, /*#__PURE__*/React$1.createElement(Route, {
-    element: /*#__PURE__*/React$1.createElement(MainLayout, _extends({
-      paths: paths,
-      preset: preset,
-      themeToken: themeToken
-    }, props))
-  }, componentsPath && /*#__PURE__*/React$1.createElement(Route, {
-    path: componentsRoutePath,
-    element: /*#__PURE__*/React$1.createElement(ModulesIsEmpty, {
-      baseUrl: componentsBaseUrl,
-      readme: readme
-    })
-  }, /*#__PURE__*/React$1.createElement(Route, {
-    path: ":id",
-    element: /*#__PURE__*/React$1.createElement(Example, {
-      baseUrl: componentsBaseUrl,
-      readme: readme,
-      pageProps: pageProps
-    })
-  }), /*#__PURE__*/React$1.createElement(Route, {
-    path: ":id/*",
-    element: /*#__PURE__*/React$1.createElement(Example, {
-      baseUrl: componentsBaseUrl,
-      readme: readme,
-      pageProps: pageProps
-    })
-  }))), /*#__PURE__*/React$1.createElement(Route, {
-    path: "*",
-    element: children
-  }));
+  return /*#__PURE__*/jsxs(Routes, {
+    children: [/*#__PURE__*/jsx(Route, {
+      element: /*#__PURE__*/jsx(MainLayout, _extends({
+        paths: paths,
+        preset: preset,
+        themeToken: themeToken
+      }, props)),
+      children: componentsPath && /*#__PURE__*/jsxs(Route, {
+        path: componentsRoutePath,
+        element: /*#__PURE__*/jsx(ModulesIsEmpty, {
+          baseUrl: componentsBaseUrl,
+          readme: readme
+        }),
+        children: [/*#__PURE__*/jsx(Route, {
+          path: ":id",
+          element: /*#__PURE__*/jsx(Example, {
+            baseUrl: componentsBaseUrl,
+            readme: readme,
+            pageProps: pageProps
+          })
+        }), /*#__PURE__*/jsx(Route, {
+          path: ":id/*",
+          element: /*#__PURE__*/jsx(Example, {
+            baseUrl: componentsBaseUrl,
+            readme: readme,
+            pageProps: pageProps
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsx(Route, {
+      path: "*",
+      element: children
+    })]
+  });
 };
 const createEntry = WrappedComponents => _ref3 => {
   let {
@@ -321,23 +350,26 @@ const createEntry = WrappedComponents => _ref3 => {
       setReadme(module.__esModule === true ? module.default : module);
     });
   }, []);
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, Object.keys(readme).length > 0 ? /*#__PURE__*/React$1.createElement(ExampleRoutes, {
-    preset: preset,
-    baseUrl: baseUrl,
-    projectName: projectName,
-    readme: readme,
-    pageProps: pageProps,
-    paths: [{
-      key: 'index',
-      path: '/',
-      title: '首页'
-    }, {
-      key: 'components',
-      path: `${baseUrl}/modules-dev-components`,
-      title: '组件'
-    }],
-    themeToken: themeToken
-  }, /*#__PURE__*/React$1.createElement(WrappedComponents, props), /*#__PURE__*/React$1.createElement(EntryButton, null)) : /*#__PURE__*/React$1.createElement(WrappedComponents, props));
+  return /*#__PURE__*/jsx(Fragment, {
+    children: Object.keys(readme).length > 0 ? /*#__PURE__*/jsxs(ExampleRoutes, {
+      preset: preset,
+      baseUrl: baseUrl,
+      projectName: projectName,
+      readme: readme,
+      pageProps: pageProps,
+      paths: [{
+        key: 'index',
+        path: '/',
+        title: '首页'
+      }, {
+        key: 'components',
+        path: `${baseUrl}/modules-dev-components`,
+        title: '组件'
+      }],
+      themeToken: themeToken,
+      children: [/*#__PURE__*/jsx(WrappedComponents, _extends({}, props)), /*#__PURE__*/jsx(EntryButton, {})]
+    }) : /*#__PURE__*/jsx(WrappedComponents, _extends({}, props))
+  });
 };
 createEntry.Example = Example;
 createEntry.ExampleRoutes = ExampleRoutes;
@@ -348,72 +380,94 @@ const FontList = ({
   fonts
 }) => {
   const [value, setValue] = useState(30);
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/jsxs(Flex, {
     vertical: true,
-    gap: 20
-  }, /*#__PURE__*/React.createElement(Flex, {
-    gap: 8
-  }, /*#__PURE__*/React.createElement("div", null, "\u8C03\u6574\u5927\u5C0F:"), /*#__PURE__*/React.createElement(Slider, {
-    style: {
-      width: 100
-    },
-    max: 60,
-    min: 12,
-    value: value,
-    onChange: setValue
-  }), /*#__PURE__*/React.createElement("div", null, value, "px")), Object.keys(fonts).map(fontClassName => {
-    const {
-      glyphs: list
-    } = fonts[fontClassName];
-    const isColorful = /-colorful$/.test(fontClassName);
-    return /*#__PURE__*/React.createElement(Flex, {
-      vertical: true,
+    gap: 20,
+    children: [/*#__PURE__*/jsxs(Flex, {
       gap: 8,
-      key: fontClassName
-    }, /*#__PURE__*/React.createElement(Typography.Title, {
-      level: 4
-    }, fontClassName), /*#__PURE__*/React.createElement(Flex, {
-      gap: 12,
-      wrap: true
-    }, list.map(({
-      font_class
-    }) => {
-      return /*#__PURE__*/React.createElement(Card, {
-        size: "small",
-        key: font_class
-      }, isColorful ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
-        justify: "center"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        colorful: true,
-        type: font_class,
-        size: value
-      })), /*#__PURE__*/React.createElement(Typography.Text, {
+      children: [/*#__PURE__*/jsx("div", {
+        children: "\u8C03\u6574\u5927\u5C0F:"
+      }), /*#__PURE__*/jsx(Slider, {
         style: {
-          display: 'block',
-          width: '120px',
-          wordBreak: 'break-all'
+          width: 100
         },
-        copyable: {
-          text: '<Icon colorful type="' + font_class + '" size={' + value + '}/>'
-        }
-      }, font_class)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
-        justify: "center"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: font_class,
-        size: value,
-        fontClassName: fontClassName
-      })), /*#__PURE__*/React.createElement(Typography.Text, {
-        style: {
-          display: 'block',
-          width: '120px',
-          wordBreak: 'break-all'
-        },
-        copyable: {
-          text: '<Icon type="' + font_class + '" size={' + value + '} fontClassName={' + fontClassName + '}/>'
-        }
-      }, font_class)));
-    })));
-  }));
+        max: 60,
+        min: 12,
+        value: value,
+        onChange: setValue
+      }), /*#__PURE__*/jsxs("div", {
+        children: [value, "px"]
+      })]
+    }), Object.keys(fonts).map(fontClassName => {
+      const {
+        glyphs: list
+      } = fonts[fontClassName];
+      const isColorful = /-colorful$/.test(fontClassName);
+      return /*#__PURE__*/jsxs(Flex, {
+        vertical: true,
+        gap: 8,
+        children: [/*#__PURE__*/jsx(Typography.Title, {
+          level: 4,
+          children: fontClassName
+        }), /*#__PURE__*/jsx(Flex, {
+          gap: 12,
+          wrap: true,
+          children: list.map(({
+            font_class
+          }) => {
+            return /*#__PURE__*/jsx(Card, {
+              size: "small",
+              children: isColorful ? /*#__PURE__*/jsxs(Fragment, {
+                children: [/*#__PURE__*/jsx(Flex, {
+                  justify: "center",
+                  children: /*#__PURE__*/jsx(Icon, {
+                    colorful: true,
+                    type: font_class,
+                    size: value
+                  })
+                }), /*#__PURE__*/jsx(Flex, {
+                  justify: "center",
+                  children: /*#__PURE__*/jsx(Typography.Text, {
+                    style: {
+                      display: 'block',
+                      width: '120px',
+                      wordBreak: 'break-all'
+                    },
+                    copyable: {
+                      text: '<Icon colorful type="' + font_class + '"/>'
+                    },
+                    children: font_class
+                  })
+                })]
+              }) : /*#__PURE__*/jsxs(Fragment, {
+                children: [/*#__PURE__*/jsx(Flex, {
+                  justify: "center",
+                  children: /*#__PURE__*/jsx(Icon, {
+                    type: font_class,
+                    size: value,
+                    fontClassName: fontClassName
+                  })
+                }), /*#__PURE__*/jsx(Flex, {
+                  justify: "center",
+                  children: /*#__PURE__*/jsx(Typography.Text, {
+                    style: {
+                      display: 'block',
+                      width: '120px',
+                      wordBreak: 'break-all'
+                    },
+                    copyable: {
+                      text: '<Icon type="' + font_class + '" fontClassName="' + fontClassName + '"/>'
+                    },
+                    children: font_class
+                  })
+                })]
+              })
+            }, font_class);
+          })
+        })]
+      }, fontClassName);
+    })]
+  });
 };
 
 export { Example, ExamplePage, FontList, createEntry as default };