feat: add bugger demo

empjs · Oct 27, 2024 · 69b3e9d · 69b3e9d
1 parent 8fe29ee
commit 69b3e9d
Show file tree

Hide file tree

Showing 17 changed files with 281 additions and 125 deletions.
diff --git a/demos/react18_with_base_config/README.md b/demos/react18_with_base_config/README.md
@@ -0,0 +1,9 @@
+# EMP3 React18 DEMO with base config
+
+## 运行
+```
+pnpm i
+pnpm dev
+```
+
+[文档说明](https://empjs.dev/guide/empShare/react.html)
diff --git a/demos/react18_with_base_config/package.json b/demos/react18_with_base_config/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "emp3-react18-demo",
+    "ignored": true,
+    "version": "0.0.1",
+    "scripts": {
+      "dev": "pnpm --filter runtime-18-* --parallel dev",
+      "build": "pnpm --filter runtime-18-* --parallel build",
+      "serve": "pnpm --filter runtime-18-* --parallel serve",
+      "stat": "pnpm --filter runtime-18-* --parallel stat"
+    }
+  }
+
diff --git a/demos/react18_with_base_config/react-app/emp.config.ts b/demos/react18_with_base_config/react-app/emp.config.ts
@@ -0,0 +1,30 @@
+import {defineConfig} from '@empjs/cli'
+import pluginReact from '@empjs/plugin-react'
+import {pluginRspackEmpShare} from '@empjs/share'
+export default defineConfig(store => {
+  return {
+    plugins: [
+      pluginReact(),
+      pluginRspackEmpShare({
+        empRuntime: {
+          runtimeLib: "https://unpkg.com/@empjs/[email protected]/output/sdk.js",
+          frameworkLib: "https://unpkg.com/@empjs/[email protected]/dist",
+          frameworkGlobal: 'EMP_ADAPTER_REACT',
+          framework: 'react',
+        },
+      }),
+    ],
+    build: {
+      polyfill: {
+        entryCdn: "https://unpkg.com/@empjs/[email protected]/dist/es.js",
+      },
+    },
+    server: {
+      port: 1801,
+      open: false,
+    },
+    html: {
+      template: 'src/index.html',
+    },
+  }
+})
diff --git a/demos/react18_with_base_config/react-app/package.json b/demos/react18_with_base_config/react-app/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "runtime-18-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "dev": "emp dev",
+    "build": "emp build",
+    "start": "emp serve",
+    "stat": "emp build --analyze",
+    "emp": "emp"
+  },
+  "dependencies": {
+    "@empjs/share": "3.2.0",
+    "react": "18",
+    "react-dom": "18"
+  },
+  "devDependencies": {
+    "@empjs/cli": "3.2.7",
+    "@empjs/plugin-react": "3.2.0",
+    "@types/react": "18",
+    "@types/react-dom": "18"
+  }
+}
diff --git a/demos/react18_with_base_config/react-app/src/App.tsx b/demos/react18_with_base_config/react-app/src/App.tsx
@@ -0,0 +1,31 @@
+import {reactAdapter} from '@empjs/share/adapter'
+import rt from '@empjs/share/runtime'
+import {Suspense, lazy} from 'react'
+// 实例化
+rt.init({
+  name: 'runtimeHost',
+  shared: reactAdapter.shared,
+  remotes: [
+    // {
+    //   name: 'runtime_18_host',
+    //   entry: 'http://localhost:1802/emp.js',
+    // },
+  ],
+})
+// 动态注册
+rt.register([
+  {
+    name: 'runtimeHost',
+    entry: 'http://localhost:1802/output/emp.js',
+    // entry: 'https://emp-demo-react18-host.pages.dev/demos/react18/react-host/dist/mf-manifest.json'
+  },
+])
+const RemoteApp = lazy(() => rt.load('runtimeHost/App'))
+console.log('RemoteApp', RemoteApp)
+const App = () => (
+  <div>
+    <h1>React 18 Runtime App</h1>
+    <Suspense><RemoteApp name="from home" /></Suspense>
+  </div>
+)
+export default App
diff --git a/demos/react18_with_base_config/react-app/src/bootstrap.tsx b/demos/react18_with_base_config/react-app/src/bootstrap.tsx
@@ -0,0 +1,5 @@
+import {createRoot} from 'react-dom/client'
+import App from './App'
+const dom = document.getElementById('emp-root')!
+const root = createRoot(dom)
+root.render(<App />)
diff --git a/demos/react18_with_base_config/react-app/src/index.html b/demos/react18_with_base_config/react-app/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <title>runtime_18_app</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+  <script src="https://yo-debug.yy.com/target.js"></script>
+  <div id="emp-root"></div>
+</body>
+
+</html>
diff --git a/demos/react18_with_base_config/react-app/src/index.tsx b/demos/react18_with_base_config/react-app/src/index.tsx
@@ -0,0 +1 @@
+import('./bootstrap')
diff --git a/demos/react18_with_base_config/react-app/tsconfig.json b/demos/react18_with_base_config/react-app/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@empjs/cli/emp-tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/demos/react18_with_base_config/react-host-with-base-config/emp.config.ts b/demos/react18_with_base_config/react-host-with-base-config/emp.config.ts
@@ -0,0 +1,34 @@
+import {defineConfig} from '@empjs/cli'
+import pluginReact from '@empjs/plugin-react'
+import {pluginRspackEmpShare} from '@empjs/share'
+export default defineConfig(store => {
+  return {
+    plugins: [
+      pluginReact(),
+      pluginRspackEmpShare({
+        name: "runtimeHost",
+        exposes: {
+          './App': './src/App',
+          './CountComp': './src/CountComp',
+        },
+        empRuntime: {
+          runtimeLib: "https://unpkg.com/@empjs/[email protected]/output/sdk.js",
+          frameworkLib: "https://unpkg.com/@empjs/[email protected]/dist",
+          frameworkGlobal: 'EMP_ADAPTER_REACT',
+          framework: 'react',
+        },
+        manifest: true
+      }),
+    ],
+    base: '/output/',
+    build: {
+      polyfill: {
+        entryCdn: "https://unpkg.com/@empjs/[email protected]/dist/es.js",
+      },
+    },
+    server: {
+      port: 1802,
+      open: false,
+    },
+  }
+})
diff --git a/demos/react18_with_base_config/react-host-with-base-config/package.json b/demos/react18_with_base_config/react-host-with-base-config/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "runtime-18-host",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "dev": "emp dev",
+    "build": "emp build",
+    "start": "emp serve",
+    "stat": "emp build --analyze"
+  },
+  "dependencies": {
+    "@empjs/share": "3.2.0",
+    "react": "18",
+    "react-dom": "18"
+  },
+  "devDependencies": {
+    "@empjs/cli": "3.2.7",
+    "@empjs/plugin-react": "3.2.0",
+    "@types/react": "18",
+    "@types/react-dom": "18"
+  }
+}
diff --git a/demos/react18_with_base_config/react-host-with-base-config/src/App.tsx b/demos/react18_with_base_config/react-host-with-base-config/src/App.tsx
@@ -0,0 +1,15 @@
+import {CountComp} from './CountComp'
+type HostType = {
+  name?: string
+  children?: React.ReactNode
+}
+const App = ({name, children}: HostType) => {
+  return (
+    <div>
+      <h1>React 18 Runtime Host: {name ? name : ''}</h1>
+      <CountComp />
+      {children}
+    </div>
+  )
+}
+export default App
diff --git a/demos/react18_with_base_config/react-host-with-base-config/src/CountComp.tsx b/demos/react18_with_base_config/react-host-with-base-config/src/CountComp.tsx
@@ -0,0 +1,11 @@
+import { version } from 'react'
+
+export const CountComp = () => {
+  return (
+    <div>
+      <h3>
+        CountCompWrap React Version: {version}
+      </h3>
+    </div>
+  )
+}
diff --git a/demos/react18_with_base_config/react-host-with-base-config/src/bootstrap.tsx b/demos/react18_with_base_config/react-host-with-base-config/src/bootstrap.tsx
@@ -0,0 +1,5 @@
+import {createRoot} from 'react-dom/client'
+import App from './App'
+const dom = document.getElementById('emp-root')!
+const root = createRoot(dom)
+root.render(<App />)
diff --git a/demos/react18_with_base_config/react-host-with-base-config/src/index.tsx b/demos/react18_with_base_config/react-host-with-base-config/src/index.tsx
@@ -0,0 +1 @@
+import('./bootstrap')
diff --git a/demos/react18_with_base_config/react-host-with-base-config/tsconfig.json b/demos/react18_with_base_config/react-host-with-base-config/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@empjs/cli/emp-tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  },
+  "include": ["src"]
+}