@worktile/planet 10.0.0 → 12.1.1

package/angular.json

@@ -0,0 +1,373 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "planet": {
+      "root": "packages/planet",
+      "sourceRoot": "packages/planet/src",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "packages/planet/tsconfig.lib.json",
+            "project": "packages/planet/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "packages/planet/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "packages/planet/src/test.ts",
+            "tsConfig": "packages/planet/tsconfig.spec.json",
+            "karmaConfig": "packages/planet/karma.conf.js",
+            "codeCoverage": true,
+            "codeCoverageExclude": ["packages/planet/src/testing/**/*", "packages/planet/src/sandbox/**/*"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["packages/planet/tsconfig.lib.json", "packages/planet/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "portal": {
+      "root": "examples/portal/src",
+      "sourceRoot": "examples/portal/src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "customWebpackConfig": {
+              "path": "examples/portal/src/extra-webpack.config.js",
+              "mergeStrategies": {
+                "externals": "replace",
+                "module.rules": "append"
+              }
+            },
+            "baseHref": "/",
+            "outputPath": "dist/portal",
+            "index": "examples/portal/src/index.html",
+            "main": "examples/portal/src/main.ts",
+            "polyfills": "examples/portal/src/polyfills.ts",
+            "tsConfig": "examples/portal/src/tsconfig.app.json",
+            "assets": ["examples/portal/src/favicon.ico", "examples/portal/src/assets"],
+            "styles": ["examples/portal/src/styles.scss", "examples/portal/src/reboot.scss"],
+            "extractCss": true,
+            "scripts": [],
+            "aot": true,
+            "optimization": false
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "examples/portal/src/environments/environment.ts",
+                  "with": "examples/portal/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": {
+            "browserTarget": "portal:build",
+            "proxyConfig": "proxy.conf.js",
+            "port": 3000
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "portal:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "portal:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "examples/portal/src/test.ts",
+            "polyfills": "examples/portal/src/polyfills.ts",
+            "tsConfig": "examples/portal/src/tsconfig.spec.json",
+            "karmaConfig": "examples/portal/src/karma.conf.js",
+            "styles": ["examples/portal/src/styles.scss"],
+            "scripts": [],
+            "assets": ["examples/portal/src/favicon.ico", "examples/portal/src/assets"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["examples/portal/src/tsconfig.app.json", "examples/portal/src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "app1": {
+      "root": "examples/app1/",
+      "sourceRoot": "examples/app1/src",
+      "projectType": "application",
+      "prefix": "app1",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "customWebpackConfig": {
+              "path": "./examples/app1/extra-webpack.config.js",
+              "mergeStrategies": {
+                "module.rules": "append"
+              },
+              "replaceDuplicatePlugins": true
+            },
+            "outputPath": "dist/app1",
+            "index": "examples/app1/src/index.html",
+            "main": "examples/app1/src/main.ts",
+            "tsConfig": "examples/app1/tsconfig.app.json",
+            "assets": ["examples/app1/src/favicon.ico", "examples/app1/src/assets"],
+            "styles": ["examples/app1/src/styles.scss"],
+            "scripts": [],
+            "vendorChunk": false,
+            "optimization": false
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "examples/app1/src/environments/environment.ts",
+                  "with": "examples/app1/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": {
+            "port": 3001
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "app1:build:production"
+            },
+            "development": {
+              "browserTarget": "app1:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "app1:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "examples/app1/src/test.ts",
+            "polyfills": "examples/app1/src/polyfills.ts",
+            "tsConfig": "examples/app1/tsconfig.spec.json",
+            "karmaConfig": "examples/app1/karma.conf.js",
+            "styles": ["examples/app1/src/styles.css"],
+            "scripts": [],
+            "assets": ["examples/app1/src/favicon.ico", "examples/app1/src/assets"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["examples/app1/tsconfig.app.json", "examples/app1/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "app2": {
+      "root": "examples/app2/",
+      "sourceRoot": "examples/app2/src",
+      "projectType": "application",
+      "prefix": "app2",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "customWebpackConfig": {
+              "path": "./examples/app2/extra-webpack.config.js",
+              "mergeStrategies": {
+                "module.rules": "append"
+              },
+              "replaceDuplicatePlugins": true
+            },
+            "outputPath": "dist/app2",
+            "index": "examples/app2/src/index.html",
+            "main": "examples/app2/src/main.ts",
+            "tsConfig": "examples/app2/tsconfig.app.json",
+            "assets": ["examples/app2/src/favicon.ico", "examples/app2/src/assets"],
+            "styles": ["examples/app2/src/styles.scss"],
+            "scripts": [],
+            "vendorChunk": false,
+            "aot": true,
+            "extractCss": true,
+            "optimization": false
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "examples/app2/src/environments/environment.ts",
+                  "with": "examples/app2/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "options": {
+            "browserTarget": "app2:build",
+            "port": 3002,
+            "vendorChunk": false
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "app2:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "app2:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "examples/app2/src/test.ts",
+            "polyfills": "examples/app2/src/polyfills.ts",
+            "tsConfig": "examples/app2/tsconfig.spec.json",
+            "karmaConfig": "examples/app2/karma.conf.js",
+            "styles": ["examples/app2/src/styles.css"],
+            "scripts": [],
+            "assets": ["examples/app2/src/favicon.ico", "examples/app2/src/assets"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["examples/app2/tsconfig.app.json", "examples/app2/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    },
+    "app1-e2e": {
+      "root": "examples/app1-e2e/",
+      "projectType": "application",
+      "prefix": "",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "examples/app1-e2e/protractor.conf.js",
+            "devServerTarget": "app1:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "app1:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "examples/app1-e2e/tsconfig.e2e.json",
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "portal",
+  "cli": {
+    "analytics": false
+  }
+}

package/commitlint.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: ['@commitlint/config-conventional'],
+    rules: {
+        'header-max-length': [0, 'always', 120]
+    }
+};

package/docs/api/defineApplication.md

@@ -0,0 +1,46 @@
+---
+title: defineApplication
+path: defineApplication
+order: 20
+---
+
+## defineApplication(name, options)
+### 参数
+  - name：string - 必填，子应用名称
+  - options：BootstrapAppModule | BootstrapOptions - 必填，子应用启动方法
+
+### 类型
+#### BootstrapAppModule
+- (portalApp?: PlanetPortalApplication) => Promise<NgModuleRef<any>>;
+
+#### BootstrapOptions
+- template: string
+  <br>必填，根节点模板
+- bootstrap: BootstrapAppModule;
+  <br>必填，启动方法
+### 示例
+```ts
+defineApplication('app1', {
+    template: `<app1-root class="app1-root"></app1-root>`,
+    bootstrap: (portalApp: PlanetPortalApplication) => {
+        return platformBrowserDynamic([
+            {
+                provide: PlanetPortalApplication,
+                useValue: portalApp
+            },
+            {
+                provide: AppRootContext,
+                useValue: portalApp.data.appRootContext
+            }
+        ])
+            .bootstrapModule(AppModule)
+            .then(appModule => {
+                return appModule;
+            })
+            .catch(error => {
+                console.error(error);
+                return null;
+            });
+    }
+});
+```

package/docs/api/globalEventDispatcher.md

@@ -0,0 +1,51 @@
+---
+title: GlobalEventDispatcher
+path: globalEventDispatcher
+order: 30
+---
+
+## register(components)
+注册组件，注册后的组件可在其他子应用中渲染
+### 参数
+  - components - PlanetComponent | PlanetComponent[] - 必填，注册的组件列表
+
+### 类型
+#### PlanetComponent
+- name: string
+  <br>必填，组件名称
+- component: ComponentType<T>;
+  <br>必填，组件
+
+### 示例
+
+```ts
+import { GlobalEventDispatcher } from "@worktile/planet";
+
+// app1 root module
+constructor(private globalEventDispatcher: GlobalEventDispatcher) {
+    this.globalEventDispatcher.register('open-a-detail').subscribe(event => {
+        // dialog.open(App1DetailComponent);
+    });
+}
+```
+
+## dispatch((name, payload))
+渲染其他应用中注册过的组件
+### 参数
+  - name - string - 必填，注册的组件列表
+  - payload - 可选，传入组件的参数
+
+### 示例
+
+```ts
+import { GlobalEventDispatcher } from "@worktile/planet";
+
+// in other apps
+export class OneComponent {
+    constructor(private globalEventDispatcher: GlobalEventDispatcher) {}
+
+    openDetail() {
+        this.globalEventDispatcher.dispatch('open-a-detail', payload);
+    }
+}
+```

package/docs/api/index.md

@@ -0,0 +1,5 @@
+---
+title: API
+path: api
+order: 20
+---

package/docs/api/planet.md

@@ -0,0 +1,117 @@
+---
+title: Planet
+path: planet
+order: 10
+---
+
+## setOptions(options)
+### 参数
+  - options - `Partial<PlanetOptions>` - 必填
+
+### 类型
+#### PlanetOptions
+- errorHandler: (error: Error) => void;
+  <br>必填，
+- switchMode?: SwitchModes;
+  <br>可选，子应用的名称，子应用之间必须确保唯一
+
+#### 示例
+``` ts
+constructor(
+    private planet: Planet
+) { }
+
+ngOnInit() {
+    this.planet.setOptions({
+        switchMode: SwitchModes.coexist,
+        errorHandler: error => {
+            console.error(`Failed to load resource, error:`, error);
+        }
+    });
+}
+```
+
+## registerApps(apps)
+注册子应用的基础配置信息。当浏览器 url 发生变化时，会自动检查每一个子应用注册的 activeRule 规则，符合规则的应用将会被自动激活。
+### 参数
+  - apps - `PlanetApplication<TExtra>[]` - 必填，子应用的注册信息
+
+### 类型
+#### PlanetApplication
+- name: string
+  <br>必填，子应用的名称
+- hostParent: string | HTMLElement;
+  <br>必填，应用渲染的容器元素, 指定子应用显示在哪个元素内部
+- routerPathPrefix: string | RegExp;
+  <br>必填，子应用路由路径前缀，根据这个匹配应用
+- hostClass?: string | string[];
+  <br>可选，宿主元素的 Class，也就是在子应用启动组件上追加的样式
+- preload?: boolean;
+  <br>可选，是否启用预加载，启动后刷新页面等当前页面的应用渲染完毕后预加载子应用
+- switchMode?: SwitchModes;
+  <br>可选，切换子应用的模式，默认切换会销毁，设置 coexist 后只会隐藏
+- resourcePathPrefix?: string;
+  <br>可选，脚本和样式文件路径前缀，多个脚本可以避免重复写同样的前缀
+- stylePrefix?: string;
+  <br>可选，样式前缀
+- styles?: string[];
+  <br>可选，样式静态资源文件访问地址
+- scripts?: string[];
+  <br>可选，JS 静态资源文件访问地址
+- loadSerial?: boolean;
+  <br>可选，是否串行加载脚本静态资源
+- themeStylesPath?: string;
+  <br>可选，皮肤样式的路径
+- manifest?: string;
+  <br>可选，manifest.json 文件路径地址，当设置了路径后会先加载这个文件，然后根据 scripts 和 styles 文件名去找到匹配的文件，因为生产环境的静态资文件是 hash 之后的命名，需要动态获取
+- extra: TExtra;
+  <br>可选，附加数据，主要应用于业务，比如图标，子应用的颜色，显示名等个性化配置
+
+### 示例
+
+``` ts
+constructor(
+    private planet: Planet,
+) { }
+
+ngOnInit() {
+    this.planet.registerApps([
+        {
+            name: 'app1',
+            hostParent: '#app-host-container',
+            routerPathPrefix: '/app1',
+            selector: 'app1-root',
+            scripts: ['/static/app1/main.js'],
+            styles: ['/static/app1/styles.css']
+        },
+        // ...
+    ]);
+}
+```
+
+## registerApp(app)
+注册子应用的基础配置信息。
+### 参数
+  - app - `PlanetApplication<TExtra>` - 必填，子应用的注册信息
+
+## unregisterApp(name)
+取消注册子应用。
+### 参数
+  - name - string - 必填，子应用名称
+
+## getApps()
+获取所有注册的子应用列表。
+
+## start()
+启动微前端框架
+
+### 示例
+``` ts
+constructor(
+    private planet: Planet
+) {}
+
+ngOnInit() {
+    this.planet.start();
+}
+```