chore(release): bump ver to 0.0.7

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-poppy/web-sdk",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
   "main": "./dist/main.js",
   "scripts": {

src/react/components/PageShell/PageShell.tsx → src/react/components/WebModule/WebModule.tsx

@@ -1,13 +1,13 @@
 import React, { PropsWithChildren } from 'react';
-import './PageShell.module.css';
+import './WebModule.module.css';
 import { ConfigProvider } from 'antd';
 
-export function PageShell(props: PropsWithChildren) {
+export function WebModule(props: PropsWithChildren) {
   return (
     <ConfigProvider>
       { props.children }
     </ConfigProvider>
   );
 }
 
-export default PageShell;
+export default WebModule;

src/react/components/WebModule/index.ts

@@ -0,0 +1,2 @@
+export * from "./WebModule";
+export { default } from "./WebModule";

src/react/webModule.tsx

@@ -0,0 +1,38 @@
+import React, { ComponentType, ReactElement } from 'react';
+import ReactDOM from 'react-dom/client';
+import { WebModuleFactoryContext, startWebModule } from "../utils/webModule";
+import WebModule from './components/WebModule';
+
+type LazyReactElementFactory = (context?: WebModuleFactoryContext) => Promise<ReactElement>
+
+interface WebModuleOpts {
+  wrapper?: ComponentType
+  view?: ReactElement | LazyReactElementFactory
+}
+
+export function startup(opts: WebModuleOpts) {
+  startWebModule(async (context) => {
+    let webModuleContent: ReactElement = <></>;
+    if (React.isValidElement(opts.view)) {
+      webModuleContent = opts.view;
+    } else if (typeof opts.view === "function") {
+      webModuleContent = await opts.view(context);
+    }
+
+    const Wrapper = opts.wrapper ?? React.Fragment;
+    const render = ReactDOM.createRoot(context?.container ?? document.getElementById('root') ?? document.body);
+    render.render(
+      <WebModule>
+        <Wrapper>
+        { webModuleContent }
+        </Wrapper>
+      </WebModule>
+    );
+
+    return () => {
+      render.unmount();
+    }
+  })
+}
+
+

src/utils/webModule.ts

@@ -165,25 +165,26 @@ async function loadWebModule(webModuleUrl: string) {
   }
 }
 
-function get(webModuleUrlOrName: string) {
-  const webModuleName = webModuleAliasMap[webModuleUrlOrName] ?? webModuleUrlOrName;
-  return webModuleMap[webModuleName] ?? undefined;
+export function get(webModuleUrlOrName: string) {
+  const webModuleUrl = webModuleAliasMap[webModuleUrlOrName] ?? webModuleUrlOrName;
+  return webModuleMap[webModuleUrl] ?? undefined;
 }
 
-export async function importWebModule(webModuleUrl: string, webModuleName?: string): Promise<WebModule> {
+export function alias(webModuleUrl: string, alias: string) {
+  webModuleAliasMap[alias] = webModuleUrl;
+}
+
+export async function importWebModule(webModuleUrlOrName: string): Promise<WebModule> {
+  const webModuleUrl = webModuleAliasMap[webModuleUrlOrName] ?? webModuleUrlOrName;
   if (webModuleLoadedMap[webModuleUrl]) {
     await webModuleLoadedMap[webModuleUrl];
     return get(webModuleUrl);
   }
 
-  if (webModuleName) {
-    webModuleAliasMap[webModuleName] = webModuleUrl;
-  }
-
   const publicPath = baseURL(webModuleUrl);
 
   const webModule = {
-    moduleName: webModuleName ?? webModuleUrl,
+    moduleName: webModuleUrl,
     publicPath,
     factory: null,
   };