You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dynamic-loader.component.ts 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. /**
  2. * Set existing vendor modules into SystemJS registry.
  3. * This way SystemJS won't make HTTP requests to fetch imported modules
  4. * needed by the dynamicaly loaded Widgets.
  5. */
  6. import { System } from 'systemjs';
  7. declare const SystemJS: System;
  8. import * as angularRouter from '@angular/router';
  9. import * as angularCore from '@angular/core';
  10. import * as angularCommon from '@angular/common';
  11. import * as angularCommonHttp from '@angular/common/http';
  12. import * as angularForms from '@angular/forms';
  13. import * as angularAnimations from '@angular/animations';
  14. import * as angularAnimationsBrowser from '@angular/animations/browser'
  15. import * as angularPlatformBrowser from '@angular/platform-browser';
  16. import * as angularPlatformBrowserDynamic from '@angular/platform-browser-dynamic';
  17. import * as clarityModule from '@clr/angular';
  18. import * as frontblockGenericTypes from 'frontblock-generic/Types.js'
  19. import * as browserAnimationsModule from "@angular/platform-browser/animations";
  20. import * as btcHdkey from "btc-hdkey"
  21. import * as bitcoinjslib from "bitcoinjs-lib"
  22. import * as fetch from "node-fetch"
  23. import * as coinselect from "coinselect/accumulative"
  24. import * as knexComponent from '../knex-config/knex-config.component'
  25. SystemJS.set('@clr/angular', SystemJS.newModule(clarityModule));
  26. SystemJS.set('@angular/router', SystemJS.newModule(angularRouter));
  27. SystemJS.set('@angular/core', SystemJS.newModule(angularCore));
  28. SystemJS.set('@angular/common', SystemJS.newModule(angularCommon));
  29. SystemJS.set('@angular/common/http', SystemJS.newModule(angularCommonHttp));
  30. SystemJS.set('@angular/forms', SystemJS.newModule(angularForms));
  31. SystemJS.set('@angular/animations', SystemJS.newModule(angularAnimations));
  32. SystemJS.set('@angular/animations/browser', SystemJS.newModule(angularAnimationsBrowser));
  33. SystemJS.set('@angular/platform-browser', SystemJS.newModule(angularPlatformBrowser));
  34. SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(browserAnimationsModule));
  35. SystemJS.set('@angular/platform-browser-dynamic', SystemJS.newModule(angularPlatformBrowserDynamic));
  36. SystemJS.set('frontblock-generic/Types', SystemJS.newModule(frontblockGenericTypes));
  37. SystemJS.set('btc-hdkey', SystemJS.newModule(btcHdkey))
  38. SystemJS.set('bitcoinjs-lib', SystemJS.newModule(bitcoinjslib))
  39. SystemJS.set('node-fetch', SystemJS.newModule(fetch))
  40. SystemJS.set('coinselect/accumulative', SystemJS.newModule(coinselect))
  41. SystemJS.set('knexconfig', SystemJS.newModule(knexComponent))
  42. SystemJS.config({ meta: { '*': { authorization: true } } });
  43. /** --------- */
  44. import { AfterViewInit, Component, ViewChild } from '@angular/core';
  45. import { SidebarComponent } from '../sidebar/sidebar.component';
  46. import { Router } from '@angular/router';
  47. import { FrontendPlugin, SidebarEntries, SidebarEntry } from "frontblock-generic/Plugin"
  48. import { environment } from "../../environments/environment"
  49. const fb = environment.production ? window["fb"] : {
  50. UpdateManager: {
  51. getLoadedPluginNames: () => ["ApiClient", "Wallet"]
  52. }
  53. }
  54. @Component({
  55. selector: 'dynamic-loader',
  56. templateUrl: './dynamic-loader.component.html',
  57. styleUrls: ['./dynamic-loader.component.scss']
  58. })
  59. export class DynamicLoaderComponent implements AfterViewInit {
  60. @ViewChild(SidebarComponent, { static: false })
  61. private sidebar: SidebarComponent
  62. constructor(
  63. private router: Router,
  64. ) {
  65. }
  66. ngAfterViewInit() {
  67. console.log("env", environment)
  68. this.loadWidgets()
  69. }
  70. private async loadWidgets() {
  71. while (!fb.UpdateManager) {
  72. await new Promise((resolve) => setTimeout(resolve, 50))
  73. }
  74. const pluginNames = await fb.UpdateManager.getLoadedPluginNames()
  75. pluginNames.forEach(element => this.installWidget(element));
  76. }
  77. private async installWidget(pluginName: string) {
  78. let module;
  79. if (!angularCore.isDevMode()){
  80. module = await SystemJS.import("plugins/" + pluginName + ".js");
  81. }else{
  82. if(environment.loadLocal){
  83. console.log("Loading "+pluginName+" from angular tsc-out")
  84. module = await import("../"+pluginName.toLocaleLowerCase()+"/src/frontend/module")
  85. }else{
  86. console.log("Loading "+pluginName+" from fake backend")
  87. module = await SystemJS.import("assets/" + pluginName.toLowerCase() + ".js")
  88. }
  89. }
  90. const plugin:FrontendPlugin = new module['PluginModule']()
  91. const entry: SidebarEntries | SidebarEntry = plugin.getSidebarEntry()
  92. const rc = this.router.config
  93. switch (typeof (<any>entry).links) {
  94. case "undefined":
  95. const e: SidebarEntry = <SidebarEntry>entry
  96. e.route = "plugin/" + e.route
  97. this.sidebar.entries.push(e)
  98. rc.unshift({
  99. path: "plugin",
  100. loadChildren: async () => module['PluginModule']
  101. })
  102. break;
  103. case "object":
  104. const m: SidebarEntries = <SidebarEntries>entry
  105. m.links = m.links.map(link => {
  106. return { text: link.text, route: m.parentRoute + "/" + link.route }
  107. })
  108. this.sidebar.multientires.push(m)
  109. rc.unshift({
  110. path: m.parentRoute,
  111. loadChildren: async () => module['PluginModule']
  112. })
  113. }
  114. this.router.resetConfig(rc)
  115. }
  116. }