feat: 新增hel微模块示例

examples/react16/package.json

@@ -27,6 +27,11 @@
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
+    "hel-lodash": "^2.1.7",
+    "hel-micro": "^4.8.11",
+    "hel-micro-core": "^4.8.11",
+    "hel-micro-react": "^4.8.10",
+    "hel-types": "^4.3.3",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.4.3",

examples/react16/src/App.js

@@ -5,6 +5,8 @@ import Location from "./Location";
 import Communication from "./Communication";
 import React17 from "./nest";
 import Font from "./Font";
+import RemoteComp from "./RemoteComp";
+import RemoteFnCall from "./RemoteFnCall";
 import logo from "./logo.svg";
 import Tag from "antd/es/tag";
 import Button from "antd/es/button";
@@ -49,7 +51,8 @@ export default function App() {
       <nav>
         <NavLink to="/home">首页</NavLink> | <NavLink to="/dialog">弹窗</NavLink> |{" "}
         <NavLink to="/location">路由</NavLink> | <NavLink to="/communication">通信</NavLink> |{" "}
-        <NavLink to="/nest">内嵌</NavLink> | <NavLink to="/font">字体</NavLink>
+        <NavLink to="/nest">内嵌</NavLink> | <NavLink to="/font">字体</NavLink> |{" "}
+        <NavLink to="/remote-comp">远程组件</NavLink>| <NavLink to="/remote-fn">远程方法</NavLink>
       </nav>
 
       <div>
@@ -75,6 +78,12 @@ export default function App() {
         <Route path="/font">
           <Font />
         </Route>
+        <Route path="/remote-comp">
+          <RemoteComp />
+        </Route>
+        <Route path="/remote-fn">
+          <RemoteFnCall />
+        </Route>
         <Route exact path="/">
           <Redirect to="/home" />
         </Route>

examples/react16/src/RemoteComp.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { useRemoteComp } from 'hel-micro-react';
+
+export default function RemoteComp() {
+  const Comp = useRemoteComp(
+    // see https://github.com/hel-e co/hel-tpl-remote-react-comp
+    "hel-tpl-remote-react-comps",
+    // see https://github.com/hel-eco/hel-tpl-remote-react-comp-ts
+    // "hel-tpl-remote-react-comps-ts",
+    "HelloRemoteReactComp",
+    { versionId: "1.3.2" }
+  );
+  return <div>
+    <h1>这是一个懒加载的远程react组件</h1>
+    <Comp />
+  </div>;
+}

examples/react16/src/RemoteFnCall.js

@@ -0,0 +1,19 @@
+import React from "react";
+import m from 'hel-lodash';
+
+export default function RemoteComp() {
+  const [tip, setTip] = React.useState('');
+  const changeTip = () => {
+    setTip(`${m.myUtils.myMod.sayHelloToHel()}_${Date.now()}`);
+  };
+
+
+  return <div>
+    <h1>这是一个预加载的远程方法调用示例:</h1>
+    <h2>lodash version is: {m.VERSION}</h2>
+    <h2>tip is: {tip}</h2>
+    <button onClick={changeTip} style={{ color: "red", fontSize: "28px" }}>
+      click me to see changed result{" "}
+    </button>
+  </div>;
+}

examples/react16/src/index.js

@@ -1,29 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
-import { BrowserRouter } from "react-router-dom";
-import "./styles.css";
+import { bindReactRuntime, preFetchLib } from 'hel-micro';
 
-const basename = process.env.NODE_ENV === "production" ? "/demo-react16/" : "";
+bindReactRuntime({ React, ReactDOM });
 
-if (window.__POWERED_BY_WUJIE__) {
-  // eslint-disable-next-line no-undef
-  window.__WUJIE_MOUNT = () => {
-    ReactDOM.render(
-      <BrowserRouter basename={basename}>
-        <App />
-      </BrowserRouter>,
-      document.getElementById("root")
-    );
-  };
-  window.__WUJIE_UNMOUNT = () => {
-    ReactDOM.unmountComponentAtNode(document.getElementById("root"));
-  };
-} else {
-  ReactDOM.render(
-    <BrowserRouter basename={basename}>
-      <App />
-    </BrowserRouter>,
-    document.getElementById("root")
-  );
-}
+(async function () {
+  await preFetchLib('hel-lodash','2.3.0'); // 预加载 hel-lodash，方便其他地方可以静态导入 hel-lodash
+  await import('./loadApp');
+})().catch(console.error);

examples/react16/src/loadApp.js

@@ -0,0 +1,30 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
+import "./styles.css";
+
+const basename = process.env.NODE_ENV === "production" ? "/demo-react16/" : "";
+
+if (window.__POWERED_BY_WUJIE__) {
+  // eslint-disable-next-line no-undef
+  window.__WUJIE_MOUNT = () => {
+    ReactDOM.render(
+      <BrowserRouter basename={basename}>
+        <App />
+      </BrowserRouter>,
+      document.getElementById("root")
+    );
+  };
+  window.__WUJIE_UNMOUNT = () => {
+    ReactDOM.unmountComponentAtNode(document.getElementById("root"));
+  };
+  window.__WUJIE.mount();
+} else {
+  ReactDOM.render(
+    <BrowserRouter basename={basename}>
+      <App />
+    </BrowserRouter>,
+    document.getElementById("root")
+  );
+}