feat(theme): add provideAlain (#1697)

packages/form/spec/form.spec.ts

@@ -27,7 +27,7 @@ describe('form: component', () => {
 
   function genModule(options: { acl?: boolean; i18n?: boolean } = {}): void {
     options = { acl: false, i18n: false, ...options };
-    const imports = [NoopAnimationsModule, DelonFormModule.forRoot(), AlainThemeModule];
+    const imports: NzSafeAny[] = [NoopAnimationsModule, DelonFormModule.forRoot(), AlainThemeModule];
     if (options.acl) {
       imports.push(DelonACLModule);
     }

packages/theme/public_api.ts

@@ -1,22 +1,8 @@
-export * from './src/services/preloader/preloader';
-export * from './src/services/menu/interface';
-export * from './src/services/menu/menu.service';
-export * from './src/services/settings/types';
-export * from './src/services/settings/settings.service';
-export * from './src/services/responsive/responsive';
-export * from './src/services/rtl/rtl.service';
-export * from './src/services/title/title.service';
-export * from './src/services/i18n/index';
+export * from './src/services/index';
 export * from './src/locale/index';
-export * from './src/services/modal/modal.helper';
-export * from './src/services/drawer/drawer.helper';
-export * from './src/services/http/index';
-export * from './src/pipes/date/date.pipe';
-export * from './src/pipes/keys/keys.pipe';
-export * from './src/pipes/yn/yn.pipe';
-export * from './src/pipes/safe/html.pipe';
-export * from './src/pipes/safe/url.pipe';
+export * from './src/pipes/index';
 export * from './src/config';
 export * from './src/theme.module';
+export * from './src/provide';
 export * from './src/router/optional-preloader';
 export { VERSION } from './src/version';

packages/theme/src/pipes/index.ts

@@ -0,0 +1,5 @@
+export * from './date/date.pipe';
+export * from './keys/keys.pipe';
+export * from './yn/yn.pipe';
+export * from './safe/html.pipe';
+export * from './safe/url.pipe';

packages/theme/src/provide.ts

@@ -0,0 +1,19 @@
+import { EnvironmentProviders, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
+
+import { ALAIN_CONFIG, AlainConfig } from '@delon/util/config';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+
+import { DELON_LOCALE, DELON_LOCALE_SERVICE_PROVIDER } from './locale';
+import zhCN from './locale/languages/zh-CN';
+import { ALAIN_SETTING_DEFAULT } from './services/settings/settings.service';
+
+export function provideAlain(config?: AlainConfig): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    { provide: ALAIN_CONFIG, useValue: config },
+    { provide: DELON_LOCALE, useValue: zhCN },
+    DELON_LOCALE_SERVICE_PROVIDER,
+    importProvidersFrom([NzDrawerModule, NzModalModule]),
+    ALAIN_SETTING_DEFAULT
+  ]);
+}

packages/theme/src/services/index.ts

@@ -0,0 +1,10 @@
+export * from './preloader/preloader';
+export * from './menu/index';
+export * from './settings/index';
+export * from './responsive/responsive';
+export * from './rtl/rtl.service';
+export * from './title/title.service';
+export * from './i18n/index';
+export * from './modal/modal.helper';
+export * from './drawer/drawer.helper';
+export * from './http/index';

packages/theme/src/services/menu/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export * from './menu.service';

packages/theme/src/services/settings/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './settings.service';

packages/theme/src/services/settings/settings.service.ts

@@ -1,5 +1,5 @@
 import { Platform } from '@angular/cdk/platform';
-import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { Inject, Injectable, InjectionToken, Provider } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -16,6 +16,14 @@ export interface SettingsKeys {
 }
 
 export const ALAIN_SETTING_KEYS = new InjectionToken<SettingsKeys>('ALAIN_SETTING_KEYS');
+export const ALAIN_SETTING_DEFAULT: Provider = {
+  provide: ALAIN_SETTING_KEYS,
+  useValue: {
+    layout: 'layout',
+    user: 'user',
+    app: 'app'
+  }
+};
 
 @Injectable({ providedIn: 'root' })
 export class SettingsService<L extends Layout = Layout, U extends User = User, A extends App = App> {

packages/theme/src/theme.module.ts

@@ -1,11 +1,13 @@
 /* eslint-disable import/order */
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 // #region import
 
+const HELPERS = [ModalHelper, DrawerHelper];
+
 // pipes
 import { BellOutline, DeleteOutline, InboxOutline, PlusOutline } from '@ant-design/icons-angular/icons';
 
@@ -27,27 +29,34 @@ const PIPES = [DatePipe, KeysPipe, YNPipe, I18nPipe, HTMLPipe, URLPipe];
 
 // - zorro: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/icon/icons.ts
 
-import { ALAIN_SETTING_KEYS } from './services/settings/settings.service';
+import { DrawerHelper } from './services/drawer/drawer.helper';
+import { ModalHelper } from './services/modal/modal.helper';
+import { ALAIN_SETTING_DEFAULT } from './services/settings/settings.service';
 const ICONS = [BellOutline, DeleteOutline, PlusOutline, InboxOutline];
 
 // #endregion
 
 @NgModule({
   imports: [CommonModule, RouterModule, OverlayModule, NzI18nModule, ...PIPES],
-  providers: [
-    {
-      provide: ALAIN_SETTING_KEYS,
-      useValue: {
-        layout: 'layout',
-        user: 'user',
-        app: 'app'
-      }
-    }
-  ],
+  providers: [ALAIN_SETTING_DEFAULT],
   exports: [...PIPES, DelonLocaleModule]
 })
 export class AlainThemeModule {
   constructor(iconSrv: NzIconService) {
     iconSrv.addIcon(...ICONS);
   }
+
+  static forRoot(): ModuleWithProviders<AlainThemeModule> {
+    return {
+      ngModule: AlainThemeModule,
+      providers: HELPERS
+    };
+  }
+
+  static forChild(): ModuleWithProviders<AlainThemeModule> {
+    return {
+      ngModule: AlainThemeModule,
+      providers: HELPERS
+    };
+  }
 }

schematics/ng-update/upgrade-rules/v17/autoRegisterFormWidgets.ts

@@ -2,7 +2,7 @@ import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 import { insertImport, addSymbolToNgModuleMetadata } from '@schematics/angular/utility/ast-utils';
 import { Change, InsertChange } from '@schematics/angular/utility/change';
 
-import { DEFAULT_WORKSPACE_PATH, getSourceFile, readJSON, applyChanges, logWarn } from '../../../utils';
+import { DEFAULT_WORKSPACE_PATH, getSourceFile, readJSON, applyChanges, logWarn, logEx } from '../../../utils';
 
 export function autoRegisterFormWidgets(): Rule {
   return (tree: Tree, context: SchematicContext) => {
@@ -30,16 +30,23 @@ function autoRegisterFormWidgetsRun(tree: Tree, name: string, sourceRoot: string
     { symbolName: 'TreeSelectWidgetModule', fileName: '@delon/form/widgets/tree-select' },
     { symbolName: 'UploadWidgetModule', fileName: '@delon/form/widgets/upload' }
   ];
-  const source = getSourceFile(tree, modulePath);
-  const changes: Change[] = [];
-  for (const item of list) {
-    changes.push(insertImport(source, modulePath, item.symbolName, item.fileName) as InsertChange);
-    changes.push(...addSymbolToNgModuleMetadata(source, modulePath, 'imports', item.symbolName));
-  }
-  applyChanges(tree, modulePath, changes);
+  try {
+    const source = getSourceFile(tree, modulePath);
+    const changes: Change[] = [];
+    for (const item of list) {
+      changes.push(insertImport(source, modulePath, item.symbolName, item.fileName) as InsertChange);
+      changes.push(...addSymbolToNgModuleMetadata(source, modulePath, 'imports', item.symbolName));
+    }
+    applyChanges(tree, modulePath, changes);
 
-  logWarn(
-    context,
-    `[@delon/form] Register all widgets in ${name} project, you can reduce package size by removing unnecessary parts`
-  );
+    logWarn(
+      context,
+      `[@delon/form] Register all widgets in ${name} project, you can reduce package size by removing unnecessary parts in ${modulePath}`
+    );
+  } catch (ex) {
+    logEx(
+      context,
+      `Import all @delon/form/widgets/* errors, need to manually import the required modules. ERROR: ${ex.message}`
+    );
+  }
 }

schematics/ng-update/upgrade-rules/v17/index.spec.ts

@@ -59,11 +59,13 @@ describe('Schematic: ng-update: v17Rule', () => {
       `
     import { AlainThemeModule } from '@delon/theme';
     const alainModules: any[] = [AlainThemeModule.forRoot(), DelonACLModule.forRoot()];
+    const alainProvides = [{ provide: ALAIN_CONFIG, useValue: alainConfig }];
     `
     );
     await runMigration();
     const content = tree.readContent(globalConfigPath);
     expect(content).not.toContain(`AlainThemeModule.forRoot()`);
+    expect(content).toContain(`provideAlain(`);
     expect(content).not.toContain(`DelonACLModule.forRoot()`);
   });
 
@@ -72,7 +74,7 @@ describe('Schematic: ng-update: v17Rule', () => {
     tryAddFile(tree, globalConfigPath, `const alainProvides = [{ provide: ALAIN_CONFIG, useValue: alainConfig }];`);
     await runMigration();
     const content = tree.readContent(globalConfigPath);
-    expect(content).toContain(`provideAlainConfig(alainConfig)`);
+    expect(content).toContain(`provideAlain(alainConfig)`);
   });
 
   it('should be use provideDelonMockConfig instead of DelonMockModule', async () => {

schematics/ng-update/upgrade-rules/v17/index.ts

@@ -5,18 +5,9 @@ import { autoRegisterFormWidgets } from './autoRegisterFormWidgets';
 import { updatePreloader } from './preloader';
 import { removeForRoot } from './removeForRoot';
 import { replaceProvideConfig } from './replaceProvideConfig';
-import { logFinished, logInfo, logWarn } from '../../../utils';
+import { logFinished, logInfo } from '../../../utils';
 import { UpgradeMainVersions } from '../../../utils/versions';
 
-function qr(): Rule {
-  return (_: Tree, context: SchematicContext) => {
-    logWarn(
-      context,
-      `[qr] Will be removed in 18.0.0, please use [nz-qrcode](https://ng.ant.design/components/qr-code) instead.`
-    );
-  };
-}
-
 function finished(): Rule {
   return (_tree: Tree, context: SchematicContext) => {
     context.addTask(new NodePackageInstallTask());
@@ -32,13 +23,6 @@ export function v17Rule(): Rule {
   return async (tree: Tree, context: SchematicContext) => {
     UpgradeMainVersions(tree);
     logInfo(context, `Upgrade dependency version number`);
-    return chain([
-      removeForRoot(),
-      autoRegisterFormWidgets(),
-      replaceProvideConfig(),
-      updatePreloader(),
-      qr(),
-      finished()
-    ]);
+    return chain([removeForRoot(), autoRegisterFormWidgets(), replaceProvideConfig(), updatePreloader(), finished()]);
   };
 }

schematics/ng-update/upgrade-rules/v17/preloader.ts

@@ -1,6 +1,6 @@
 import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
 
-import { DEFAULT_WORKSPACE_PATH, logWarn, readJSON } from '../../../utils';
+import { DEFAULT_WORKSPACE_PATH, logInfo, logWarn, readJSON } from '../../../utils';
 
 export function updatePreloader(): Rule {
   return (tree: Tree, context: SchematicContext) => {
@@ -69,5 +69,5 @@ function run(tree: Tree, name: string, sourceRoot: string, context: SchematicCon
 
   tree.overwrite(appPath, appContentLines.join('\n'));
 
-  logWarn(context, `Upgrade preloader in ${name} project`);
+  logInfo(context, `Upgrade preloader in ${name} project`);
 }

schematics/ng-update/upgrade-rules/v17/removeForRoot.ts

@@ -19,11 +19,10 @@ function removeAlainThemeForRoot(tree: Tree, name: string, sourceRoot: string, c
   const modulePath = `${sourceRoot}/app/global-config.module.ts`;
   if (!tree.exists(modulePath)) return;
 
-  const forRoot = 'AlainThemeModule.forRoot()';
-  const content = tree.readText(modulePath);
-  tree.overwrite(modulePath, content.replace(/AlainThemeModule\.forRoot\(\),?/g, ''));
+  const content = tree.readText(modulePath).replace(/AlainThemeModule\.forRoot\(\),?/g, '');
+  tree.overwrite(modulePath, content);
 
-  logInfo(context, `Remove ${forRoot} in ${name} project`);
+  logInfo(context, `Remove AlainThemeModule.forRoot in ${name} project`);
 }
 
 function removeAlainThemeForChild(tree: Tree, name: string, sourceRoot: string, context: SchematicContext): void {

schematics/ng-update/upgrade-rules/v17/replaceProvideConfig.ts

@@ -20,10 +20,10 @@ function runAlain(tree: Tree, name: string, sourceRoot: string, context: Schemat
   if (!tree.exists(filePath)) return;
 
   const text = '{ provide: ALAIN_CONFIG, useValue: alainConfig }';
-  const content = tree.readText(filePath).replace(text, 'provideAlainConfig(alainConfig)');
+  const content = tree.readText(filePath).replace(text, 'provideAlain(alainConfig)');
   tree.overwrite(filePath, content);
 
-  logInfo(context, `  Use provideAlainConfig instead of ALAIN_CONFIG in ${name} project`);
+  logInfo(context, `  Use provideAlain instead of ALAIN_CONFIG in ${name} project`);
 }
 
 function runZorro(tree: Tree, name: string, sourceRoot: string, context: SchematicContext): void {

schematics/utils/log.ts

@@ -10,7 +10,11 @@ export function logInfo(context: SchematicContext, message: string): void {
 }
 
 export function logWarn(context: SchematicContext, message: string): void {
-  context.logger.info(`  ${colors.yellow('⚠')} ${message}`);
+  context.logger.info(`  ${colors.yellow(`⚠ ${message}`)}`);
+}
+
+export function logEx(context: SchematicContext, message: string): void {
+  context.logger.error(`  ${colors.yellow(`x ${message}`)}`);
 }
 
 export function logFinished(context: SchematicContext, message: string): void {