Merge pull request #944 from raoenhui/feat/whm/umd-js

feat: add componentMode
jd-opensource · Nov 24, 2023 · 3fd755c · 3fd755c
2 parents 81c58d7 + ca30731
commit 3fd755c
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 4 deletions.
diff --git a/dev/main-react16/src/pages/vue2/vue2.js b/dev/main-react16/src/pages/vue2/vue2.js
@@ -18,6 +18,9 @@ function Vue2 () {
   function mounted () {
     console.timeEnd('mounted-vue2')
     console.log('生命周期：mounted -- vue2', document.querySelector('micro-app'))
+    microApp.preFetch([
+      { name: 'my-app1', url: 'https://storage.360buyimg.com/launch/zeromock/umd-module.js', level: 3 }, // 加载资源并解析
+    ])
     hideLoading(false)
   }
 
@@ -86,7 +89,6 @@ function Vue2 () {
         inline
         // disable-scopecss
         // disableSandbox
-        // disable-memory-router
         // clear-data
         // iframe
       >

diff --git a/docs/zh-cn/advanced.md b/docs/zh-cn/advanced.md
@@ -33,4 +33,4 @@ microApp.start({
 ```
 
 > [!NOTE]
-> 1、如果跨域请求带cookie，那么`Access-Control-Allow-Origin`不能设置为`*`，必须指定域名，同时设置`Access-Control-Allow-Credentials: true`
+> 1、如果跨域请求带cookie，那么`Access-Control-Allow-Origin`不能设置为`*`，必须指定域名，同时设置`Access-Control-Allow-Credentials: true`
diff --git a/src/__tests__/unit/mocks/app.ts b/src/__tests__/unit/mocks/app.ts
@@ -1 +1,5 @@
 export const MOCK_APP_URL = 'http://localhost:6666/'
+
+export const MOCK_APP_URL_UMD = 'https://storage.360buyimg.com/launch/zeromock/umd-module.js'
+
+export const MOCK_APP_URL_UMD_OTHER = 'https://storage.360buyimg.com/launch/zeromock/umd-module-cpoy.js'
diff --git a/src/__tests__/unit/mocks/html.ts b/src/__tests__/unit/mocks/html.ts
@@ -17,6 +17,7 @@ export const MOCK_BASIC_HTML = `
   <script src="./script1.js"></script>
   <script src="./nomodule.js" nomodule></script>
   <script src="./module.js" type='module'></script>
+  <script src="https://storage.360buyimg.com/launch/zeromock/umd-module.js"></script>
 </body>
 </html>
 `

diff --git a/src/__tests__/unit/source/loader/html.test.ts b/src/__tests__/unit/source/loader/html.test.ts
@@ -2,7 +2,7 @@ import { AppInterface } from '@micro-app/types'
 
 import { waitFor } from '../../../common/util'
 import { HTMLLoader } from '../../../../source/loader/html'
-import { MOCK_APP_URL } from '../../mocks/app'
+import { MOCK_APP_URL, MOCK_APP_URL_UMD } from '../../mocks/app'
 import { MOCK_BASIC_HTML, MOCK_APP_HTML } from '../../mocks/html'
 import { setupMockFetch } from '../../mocks/fetch'
 import microApp from '../../../../micro_app'
@@ -76,6 +76,19 @@ describe('HTMLLoader', () => {
     })
   })
 
+  test('测试一个compomentMode', async () => {
+    const { htmlLoader, successCb } = setup(MOCK_BASIC_HTML)
+    const app = {
+      name: 'app-2',
+      url: MOCK_APP_URL_UMD
+    } as AppInterface
+    htmlLoader.run(app, successCb)
+
+    await waitFor(() => {
+      expect(successCb).toBeCalledWith(MOCK_APP_HTML, app)
+    })
+  })
+
   describe('plugin', () => {
     afterEach(() => {
       microApp.plugins = undefined

diff --git a/src/source/loader/html.ts b/src/source/loader/html.ts
@@ -24,7 +24,10 @@ export class HTMLLoader implements IHTMLLoader {
   public run (app: AppInterface, successCb: CallableFunction): void {
     const appName = app.name
     const htmlUrl = app.ssrUrl || app.url
-    fetchSource(htmlUrl, appName, { cache: 'no-store' }).then((htmlStr: string) => {
+    const htmlPromise = htmlUrl.includes('.js')
+      ? Promise.resolve(`<micro-app-head><script src='${htmlUrl}'></script></micro-app-head><micro-app-body></micro-app-body>`)
+      : fetchSource(htmlUrl, appName, { cache: 'no-store' })
+    htmlPromise.then((htmlStr: string) => {
       if (!htmlStr) {
         const msg = 'html is empty, please check in detail'
         app.onerror(new Error(msg))