chore(release): release 12.0.0-beta.1

Author: huaweidevcloud

README.md

@@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).
 
 ## Angular Support
 
-Now supports Angular <font color=red>`^11.0.0`</font>
+Now supports Angular <font color=red>`^12.0.0-beta.1`</font>
 
 ## Getting Started
 

README_zh_CN.md

@@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资
 
 ## Angular版本
 
-当前支持的angular版本<font color=red>`^11.0.0`</font>
+当前支持的angular版本<font color=red>`^12.0.0-beta.1`</font>
 
 ## 快速开始
 

devui/form/services/d-validate-sync.service.ts

@@ -2,7 +2,8 @@ import { Injectable } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
-const resolvedPromise = (() => Promise.resolve(null))();
+function resolvedPromiseFunc() { return Promise.resolve(null); }
+const resolvedPromise = resolvedPromiseFunc();
 @Injectable({ providedIn: 'root' })
 export class DValidateSyncService {
 

devui/mention/utils.ts

@@ -40,9 +40,9 @@ const properties = [
 
 const isBrowser = typeof window !== 'undefined';
 const isFirefox = isBrowser && window['mozInnerScreenX'] != null;
-const _parseInt = value => {
+function _parseInt(value) {
   return parseInt(value, 10);
-};
+}
 
 export function getCaretCoordinates(element, position, options?) {
   if (!isBrowser) {

devui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-devui",
-  "version": "11.3.0",
+  "version": "12.0.0-beta.1",
   "license": "MIT",
   "description": "DevUI components based on Angular",
   "keywords": [
@@ -17,7 +17,7 @@
     "url": "https://github.com/DevCloudFE/ng-devui/issues"
   },
   "dependencies": {
-    "@angular/cdk": "^11.0.0",
+    "@angular/cdk": "^12.0.0",
     "date-fns": "^1.30.1",
     "lodash-es": "^4.17.11",
     "@popperjs/core": "^2.5.4",
@@ -26,9 +26,9 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/animations": "^11.0.0",
-    "@angular/common": "^11.0.0",
-    "@angular/core": "^11.0.0",
-    "@angular/forms": "^11.0.0"
+    "@angular/animations": "^12.0.0",
+    "@angular/common": "^12.0.0",
+    "@angular/core": "^12.0.0",
+    "@angular/forms": "^12.0.0"
   }
 }

devui/polyfills.ts

@@ -72,7 +72,7 @@ import 'classlist.js';  // Run `npm install --save classlist.js`.
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

devui/test.ts

@@ -1,14 +1,14 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 /* tslint:disable:ordered-imports*/
-import 'zone.js/dist/zone';
+import 'zone.js';
 import 'zone.js/dist/long-stack-trace-zone';
 import 'zone.js/dist/proxy';
 import 'zone.js/dist/sync-test';
 import 'zone.js/dist/jasmine-patch';
 import 'zone.js/dist/async-test';
 import 'zone.js/dist/fake-async-test';
 
-// import 'zone.js/dist/zone-testing';
+// import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

devui/tree/demo/draggable/draggable.component.ts

@@ -70,7 +70,7 @@ export class DraggableComponent implements OnInit {
     return new Promise((resovle) => {
       console.log('dragNodeId: ' + dragNodeId);
       console.log('dropNodeId: ' + dropNodeId);
-      resovle();
+      resovle(undefined);
     });
   }
 

devui/version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@angular/core';
 
-export const VERSION = new Version('11.3.0');
+export const VERSION = new Version('12.0.0-beta.1');

package.json

@@ -33,15 +33,15 @@
     "build:devui:ivy": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build devui-lib"
   },
   "dependencies": {
-    "@angular/animations": "~11.2.7",
-    "@angular/cdk": "^11.2.6",
-    "@angular/common": "~11.2.7",
-    "@angular/compiler": "~11.2.7",
-    "@angular/core": "~11.2.7",
-    "@angular/forms": "~11.2.7",
-    "@angular/platform-browser": "~11.2.7",
-    "@angular/platform-browser-dynamic": "~11.2.7",
-    "@angular/router": "~11.2.7",
+    "@angular/animations": "~12.0.3",
+    "@angular/cdk": "^12.0.2",
+    "@angular/common": "~12.0.3",
+    "@angular/compiler": "~12.0.3",
+    "@angular/core": "~12.0.3",
+    "@angular/forms": "~12.0.3",
+    "@angular/platform-browser": "~12.0.3",
+    "@angular/platform-browser-dynamic": "~12.0.3",
+    "@angular/router": "~12.0.3",
     "@devui-design/icons": "^1.2.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
@@ -59,14 +59,14 @@
     "marked": "^2.0.0",
     "@popperjs/core": "^2.5.4",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^11.0.0",
-    "@angular-devkit/build-angular": "~0.1102.6",
-    "@angular/cli": "^11.2.6",
-    "@angular/compiler-cli": "~11.2.7",
-    "@angular/language-service": "^11.2.7",
+    "@angular-builders/custom-webpack": "^12.0.0",
+    "@angular-devkit/build-angular": "~12.0.3",
+    "@angular/cli": "^12.0.3",
+    "@angular/compiler-cli": "~12.0.3",
+    "@angular/language-service": "^12.0.3",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@types/jasmine": "~3.6.0",
@@ -87,7 +87,7 @@
     "karma-junit-reporter": "^2.0.1",
     "lint-staged": "^9.2.3",
     "markdown-loader": "^5.1.0",
-    "ng-packagr": "11.2.4",
+    "ng-packagr": "^12.0.0",
     "ngx-build-plus": "^8.1.5",
     "patch-package": "^6.2.2",
     "postcss": "^8.2.4",
@@ -102,7 +102,7 @@
     "stylelint-scss": "^3.17.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.0.7"
+    "typescript": "~4.2.4"
   },
   "lint-staged": {
     "devui/**/*.ts": [

patches/ng-packagr+11.2.4.patch renamed to patches/ng-packagr+12.0.0.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/ng-packagr/lib/styles/stylesheet-processor-worker.js b/node_modules/ng-packagr/lib/styles/stylesheet-processor-worker.js
-index 0dae92e..6854a35 100644
+index f8ae209..7b18a6f 100644
 --- a/node_modules/ng-packagr/lib/styles/stylesheet-processor-worker.js
 +++ b/node_modules/ng-packagr/lib/styles/stylesheet-processor-worker.js
-@@ -93,6 +93,7 @@ function optimizeCss(filePath, css, browsers, cssUrl) {
+@@ -121,6 +121,7 @@ function optimizeCss(filePath, css, browsers, cssUrl) {
              },
          ],
      }));

patches/sass-loader+11.0.1.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/sass-loader/dist/utils.js b/node_modules/sass-loader/dist/utils.js
+index 5e69f94..77fc7c1 100644
+--- a/node_modules/sass-loader/dist/utils.js
++++ b/node_modules/sass-loader/dist/utils.js
+@@ -92,8 +92,8 @@ function isProductionLikeMode(loaderContext) {
+ 
+ function proxyCustomImporters(importers, loaderContext) {
+   return [].concat(importers).map(importer => function proxyImporter(...args) {
+-    this.webpackLoaderContext = loaderContext;
+-    return importer.apply(this, args);
++    const self = { ...this, webpackLoaderContext: loaderContext }
++    return importer.apply(self, args);
+   });
+ }
+ /**

scripts/es2015-to-es5-bebal-loader/babel-loader-wepack-config.js

@@ -1,13 +1,13 @@
 const path = require('path');
 const ts = require('typescript');
-const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
+const AngularCompilerPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
 const readConfiguration = require('@angular/compiler-cli').readConfiguration;
 const ES6_ONLY_THIRD_PARTY_LIST = require('./es6-only-third-party-list');
 
 function getAngularCompilerTsConfigPath(config) {
   const angularCompilerPlugin = config.plugins.filter(plugin => plugin instanceof AngularCompilerPlugin).pop();
   if (angularCompilerPlugin) {
-    return angularCompilerPlugin.options.tsConfigPath;
+    return angularCompilerPlugin.pluginOptions.tsconfig;
   }
   return undefined;
 }
@@ -17,7 +17,7 @@ function getTsconfigCompileTarget(tsconfigPath) {
 }
 
 function webpackConfigAddBabel2ES5(config, list = []) {
-  const tsconfigPath = getAngularCompilerTsConfigPath(config) || 'tsconfig.base.json';
+  const tsconfigPath = getAngularCompilerTsConfigPath(config) || 'tsconfig.json';
   const target = getTsconfigCompileTarget(tsconfigPath);
   if (target === ts.ScriptTarget.ES5) {
     config.module.rules.push({

scripts/less-importer/webpack-config-less-loader-importer.js

@@ -1,25 +1,25 @@
-const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
+const AngularCompilerPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
 const pathAlias = require('./get-path-alias-from-tsconfig');
 
 function getAngularCompilerTsConfigPath(config) {
   const angularCompilerPlugin = config.plugins.filter(plugin => plugin instanceof AngularCompilerPlugin).pop();
   if (angularCompilerPlugin) {
-    return angularCompilerPlugin.options.tsConfigPath;
+    return angularCompilerPlugin.pluginOptions.tsconfig;
   }
   return undefined;
 }
 function webpackConfigSassImporterAlias(config) {
-  const tsconfigPath = getAngularCompilerTsConfigPath(config) || 'tsconfig.base.json';
+  const tsconfigPath = getAngularCompilerTsConfigPath(config) || 'tsconfig.json';
   [{
-    ruleTest: /\.less$/,
+    ruleTest: /\.(?:less)$/i,
     loaderName: 'less-loader'
   }].forEach(({ruleTest, loaderName}) => {
     config.module.rules.filter(rule => rule.test + '' === ruleTest + '').forEach((styleRule) => {
       if (styleRule) {
-        var insertPosition = styleRule.use.findIndex(loaderUse => loaderUse.loader === loaderName
+        var insertPosition = styleRule.rules[1].use.findIndex(loaderUse => loaderUse.loader === loaderName
           || loaderUse.loader === require.resolve(loaderName));
         if (insertPosition > -1) {
-          styleRule.use.splice(insertPosition + 1, 0, {
+          styleRule.rules[1].use.splice(insertPosition + 1, 0, {
             loader: require.resolve('./less-alias-replacer-loader'),
             options: {
               aliasMap: pathAlias(tsconfigPath)

scripts/sass-importer/webpack-config-sass-loader-importer.js

@@ -1,25 +1,29 @@
-const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
+const AngularCompilerPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
 const getTsConfigAlias = require('./get-tsconfig-alias');
 
 function getAngularCompilerTsConfigPath(config) {
   const angularCompilerPlugin = config.plugins.filter(plugin => plugin instanceof AngularCompilerPlugin).pop();
   if (angularCompilerPlugin) {
-    return angularCompilerPlugin.options.tsConfigPath;
+    return angularCompilerPlugin.pluginOptions.tsconfig;
   }
   return undefined;
 }
 function webpackConfigSassImporterAlias(config) {
-  const tsconfigPath = getAngularCompilerTsConfigPath(config) || 'tsconfig.base.json';
+  const tsconfigPath = getAngularCompilerTsConfigPath(config) || 'tsconfig.json';
   [{
-    ruleTest: /\.scss$|\.sass$/,
+    ruleTest: /\.(?:sass)$/i,
+    loaderName: 'sass-loader'
+  },
+  {
+    ruleTest: /\.(?:scss)$/i,
     loaderName: 'sass-loader'
   }].forEach(({ruleTest, loaderName}) => {
     config.module.rules.filter(rule => rule.test + '' === ruleTest + '').forEach((styleRule) => {
       if (styleRule) {
-        var insertPosition = styleRule.use.findIndex(loaderUse => loaderUse.loader === loaderName
+        var insertPosition = styleRule.rules[1].use.findIndex(loaderUse => loaderUse.loader === loaderName
           || loaderUse.loader === require.resolve(loaderName));
         if (insertPosition > -1) {
-          styleRule.use[insertPosition].options.sassOptions.importer = [
+          styleRule.rules[1].use[insertPosition].options.sassOptions.importer = [
             getTsConfigAlias(tsconfigPath)
           ];
         }

scripts/themeable/webpack-config-add-theme.js

@@ -1,20 +1,25 @@
 function webpackConfigAddThemeSupportForIE(config) {
     [{
-        ruleTest: /\.scss$|\.sass$/,
+        ruleTest: /\.(?:sass)$/i,
         loaderName: 'sass-loader'
-    }, {
-        ruleTest: /\.less$/,
+    },
+    {
+        ruleTest: /\.(?:scss)$/i,
+        loaderName: 'sass-loader'
+    },
+    {
+        ruleTest: /\.(?:less)$/i,
         loaderName: 'less-loader'
     }].forEach(({ ruleTest, loaderName }) => {
         config.module.rules.filter(rule => rule.test + '' === ruleTest + '').forEach((styleRule) => {
             if (styleRule) {
-                var insertPosition = styleRule.use.findIndex(loaderUse => loaderUse.loader === loaderName
+                var insertPosition = styleRule.rules[1].use.findIndex(loaderUse => loaderUse.loader === loaderName
                     || loaderUse.loader === require.resolve(loaderName));
                 if (insertPosition > -1) {
-                    styleRule.use.splice(insertPosition, 0, {
+                    styleRule.rules[1].use.splice(insertPosition, 0, {
                         loader: 'postcss-loader',
                         options: {
-                            sourceMap: styleRule.use[insertPosition].options.sourceMap,
+                            sourceMap: styleRule.rules[1].use[insertPosition].options.sourceMap,
                             postcssOptions: {
                                 plugins: [
                                     require('./add-origin-varvalue'),

src/app/component/getStarted-cn.md

@@ -10,7 +10,7 @@
 
 ### Angular版本
 
-当前支持的Angular版本 <font color=red>`^11.0.0`</font>
+当前支持的Angular版本 <font color=red>`^12.0.0-beta.1`</font>
 
 ### 1. 创建一个项目
 

src/app/component/getStarted-en.md

@@ -10,7 +10,7 @@ For details about how to use this function, see the following StackBlitz demonst
 
 ### Angular version
 
-The supported Angular version is <font color=red>`^11.0.0`</font>.
+The supported Angular version is <font color=red>`^12.0.0-beta.1`</font>.
 
 ### 1. Create a project
 

src/environments/environment.ts

@@ -14,4 +14,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -57,7 +57,7 @@ import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

src/test.ts

@@ -2,7 +2,7 @@
 
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 
 declare const require: any;