fix(core): Repair application hardpoints cache has been exist for old mount point

Author: zhoushaw

.github/workflows/release-changelog.yml

@@ -0,0 +1,17 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - run: npx conventional-github-releaser -p angular
+        env:
+          CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{secrets.GITHUB_TOKEN}}

package.json

@@ -28,8 +28,7 @@
     "reset": "lerna clean --yes && rm -rf node_modules",
     "setup": "yarn reset && yarn install --registry=https://registry.npmjs.org",
     "prepublishOnly": "yarn test && yarn build:all",
-    "postpublish": "yarn changelog && node scripts/asyncBnpm.js",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -p ",
+    "postpublish": "node scripts/asyncBnpm.js",
     "test": "node scripts/jestTest.js",
     "test:cover": "node scripts/jestTest.js --coverage",
     "ls-lint": "ls-lint",
@@ -86,7 +85,6 @@
     "babel-polyfill": "^6.26.0",
     "chalk": "^4.1.0",
     "codecov": "^3.8.1",
-    "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
     "cypress": "^8.0.0",
     "dir-parser": "^1.2.10",

packages/runtime/core/src/garfish.ts

@@ -227,20 +227,6 @@ export class Garfish extends EventEmitter implements interfaces.Garfish {
       };
     }
 
-    // Initialize the mount point, support domGetter as promise, is advantageous for the compatibility
-    if (appInfo.domGetter) {
-      if (
-        typeof appInfo.domGetter === 'function' &&
-        isPromise(appInfo.domGetter)
-      ) {
-        appInfo.domGetter = await appInfo.domGetter();
-      }
-      const originDomGetter = appInfo.domGetter;
-      Object.defineProperty(appInfo, 'domGetter', {
-        get: () => getRenderNode(originDomGetter),
-      });
-    }
-
     const asyncLoadProcess = async () => {
       // Return not undefined type data directly to end loading
       const stopLoad = await this.hooks.lifecycle.beforeLoad.call(appInfo);

packages/runtime/core/src/module/app.ts

@@ -16,6 +16,7 @@ import {
   parseContentType,
   createAppContainer,
   setDocCurrentScript,
+  getRenderNode,
 } from '@garfish/utils';
 import { Garfish } from '../garfish';
 import { interfaces } from '../interface';
@@ -184,7 +185,7 @@ export class App {
     revertCurrentScript();
   }
 
-  show() {
+  async show() {
     this.active = true;
     const { display, mounted, provider } = this;
     if (display) return false;
@@ -193,7 +194,7 @@ export class App {
       return false;
     }
 
-    this.addContainer();
+    await this.addContainer();
     this.callRender(provider, false);
     this.display = true;
     this.context.activeApps.push(this);
@@ -294,10 +295,10 @@ export class App {
   }
 
   // Performs js resources provided by the module, finally get the content of the export
-  compileAndRenderContainer() {
+  async compileAndRenderContainer() {
     // Render the application node
     // If you don't want to use the CJS export, at the entrance is not can not pass the module, the require
-    this.renderTemplate();
+    await this.renderTemplate();
 
     // Execute asynchronous script
     return new Promise<void>((resolve) => {
@@ -393,13 +394,16 @@ export class App {
 
   // Create a container node and add in the document flow
   // domGetter Have been dealing with
-  private addContainer() {
-    if (typeof (this.appInfo.domGetter as Element).appendChild === 'function') {
-      (this.appInfo.domGetter as Element).appendChild(this.appContainer);
+  private async addContainer() {
+    // Initialize the mount point, support domGetter as promise, is advantageous for the compatibility
+    const domGetter = await getRenderNode(this.appInfo.domGetter);
+
+    if (typeof domGetter.appendChild === 'function') {
+      domGetter.appendChild(this.appContainer);
     }
   }
 
-  private renderTemplate() {
+  private async renderTemplate() {
     const { appInfo, entryManager, resources } = this;
     const { url: baseUrl, DOMApis } = entryManager;
     const { htmlNode, appContainer } = createAppContainer(appInfo.name);
@@ -409,7 +413,7 @@ export class App {
     this.appContainer = appContainer;
 
     // To append to the document flow, recursive again create the contents of the HTML or execute the script
-    this.addContainer();
+    await this.addContainer();
 
     const customRenderer: Parameters<typeof entryManager.createElements>[0] = {
       meta: () => null,

packages/runtime/utils/src/container.ts

@@ -16,15 +16,15 @@ export function createAppContainer(name: string) {
   };
 }
 
-export function getRenderNode(domGetter: interfaces.DomGetter): Element {
+export async function getRenderNode(domGetter: interfaces.DomGetter) {
   assert(domGetter, `Invalid domGetter:\n ${domGetter}.`);
 
   let appWrapperNode = domGetter;
 
   if (typeof domGetter === 'string') {
     appWrapperNode = document.querySelector(domGetter);
   } else if (typeof domGetter === 'function') {
-    appWrapperNode = (domGetter as () => Element)();
+    appWrapperNode = await (domGetter as () => Element)();
   } else if (typeof domGetter === 'object') {
     appWrapperNode = domGetter;
   }