Merge pull request #161 from ckeditor/i/160-tsconfig

Other (generator): Aligned the produced configuration to changes in CKEditor 5. See ckeditor/ckeditor5#14173. Closes #160.

Feature (tools): Karma will use the `tsconfig.test.json` file as a TypeScript configuration if it exists when executing automated tests. By default, it fallbacks to `tsconfig.json` file.

MINOR BREAKING CHANGE (tools): The `typescript()` function exported from the `webpack-utils` module requires passing the `cwd` as the first argument. Optionally, you can pass the TypeScript configuration file name that should be used when processing TS files by `ts-loader`.

packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html

@@ -89,7 +89,7 @@ <h3>The directory structure</h3>
 ├─ .editorconfig
 ├─ ...
 ├─ README.md
-└─ .tsconfig.json      # TypeScript configuration file.</code></pre>
+└─ tsconfig.json       # TypeScript configuration file.</code></pre>
 
     <h3>Reporting issues</h3>
     <p>If you found a problem with CKEditor 5 or the package generator, please, report an issue:</p>

packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    /**
+     * TypeScript automagically loads typings from all "@types/*" packages if the "compilerOptions.types" array is not defined in
+     * this file. However, if some dependencies have "@types/*" packages as their dependencies, they'll also be loaded as well.
+     * As a result, TypeScript loaded "@types/node" which we don't want to use, because it allows using Node.js specific APIs that
+     * are not available in the browsers.
+     *
+     * To avoid such issues, we defined this empty "types" to disable automatic inclusion of the "@types/*" packages.
+     */
+    "types": [],
+    "lib": [
+      "ES2019", // Must match the "target".
+      "ES2020.String",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "noImplicitAny": true,
+    "noImplicitOverride": true,
+    "strict": true,
+    "module": "es6",
+    "target": "es2019",
+    "sourceMap": true,
+    "allowJs": true,
+    "moduleResolution": "node",
+    "typeRoots": [
+      "typings",
+      "node_modules/@types"
+    ]
+  },
+  "include": [
+    "./sample",
+    "./src",
+    "./typings"
+  ]
+}

packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "@types/mocha"
+    ],
+    "sourceMap": true
+  },
+  "include": [
+    "./sample",
+    "./src",
+    "./tests",
+    "./typings"
+  ]
+}

packages/ckeditor5-package-generator/lib/utils/copy-files.js

@@ -19,7 +19,7 @@ const TEMPLATE_PATH = path.join( __dirname, '..', 'templates' );
  *
  * @param {Logger} logger
  * @param {Object} options
- * @param {String} packageName
+ * @param {String} options.packageName
  * @param {FormattedNames} options.formattedNames
  * @param {String} options.directoryPath
  * @param {String} options.packageManager

packages/ckeditor5-package-tools/lib/utils/get-karma-config.js

@@ -8,12 +8,13 @@
 /* eslint-env node */
 
 const path = require( 'path' );
+const fs = require( 'fs' );
 const { loaderDefinitions, getModuleResolutionPaths } = require( './webpack-utils' );
 
 const PACKAGE_ROOT_DIR = path.join( __dirname, '..', '..' );
 
 /**
- * @param {Object} options
+ * @param {Ckeditor5PackageToolsOptions} options
  * @returns {Object}
  */
 module.exports = options => {
@@ -59,11 +60,11 @@ module.exports = options => {
 		logLevel: 'INFO',
 
 		browsers: [
-			process.env.CI === 'true' ? 'CHROME_TRAVIS_CI' : 'CHROME_LOCAL'
+			process.env.CI === 'true' ? 'CHROME_CI' : 'CHROME_LOCAL'
 		],
 
 		customLaunchers: {
-			CHROME_TRAVIS_CI: {
+			CHROME_CI: {
 				base: 'Chrome',
 				flags: [ '--no-sandbox', '--disable-background-timer-throttling', '--js-flags="--expose-gc"' ]
 			},
@@ -135,14 +136,18 @@ module.exports = options => {
 };
 
 /**
- * @param {Object} options
- * @param {Boolean} [options.sourceMap=false]
- * @param {Boolean} [options.coverage=false]
+ * @param {Ckeditor5PackageToolsOptions} options
  * @returns {Object}
  */
 function getWebpackConfiguration( options ) {
 	const moduleResolutionPaths = getModuleResolutionPaths( PACKAGE_ROOT_DIR );
 
+	let tsconfigFile = 'tsconfig.json';
+
+	if ( fs.existsSync( options.cwd, 'tsconfig.test.json' ) ) {
+		tsconfigFile = 'tsconfig.test.json';
+	}
+
 	const config = {
 		mode: 'development',
 
@@ -156,7 +161,7 @@ function getWebpackConfiguration( options ) {
 			rules: [
 				loaderDefinitions.raw(),
 				loaderDefinitions.styles( options.cwd ),
-				loaderDefinitions.typescript()
+				loaderDefinitions.typescript( options.cwd, tsconfigFile )
 			]
 		},
 

packages/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js

@@ -107,7 +107,7 @@ module.exports = options => {
 			rules: [
 				loaderDefinitions.raw(),
 				loaderDefinitions.styles( options.cwd ),
-				loaderDefinitions.typescript()
+				loaderDefinitions.typescript( options.cwd )
 			]
 		}
 	};

packages/ckeditor5-package-tools/lib/utils/get-webpack-config-server.js

@@ -81,7 +81,7 @@ module.exports = options => {
 			rules: [
 				loaderDefinitions.raw(),
 				loaderDefinitions.styles( options.cwd ),
-				loaderDefinitions.typescript()
+				loaderDefinitions.typescript( options.cwd )
 			]
 		}
 	};

packages/ckeditor5-package-tools/lib/utils/webpack-utils.js

@@ -14,14 +14,23 @@ module.exports = {
 		raw: () => {
 			return {
 				test: /\.(svg|txt|html|rtf)$/,
-				use: 'raw-loader'
+				loader: 'raw-loader'
 			};
 		},
 
-		typescript: () => {
+		/**
+		 * @param {String} cwd
+		 * @param {String} [tsconfigName='tsconfig.json'] The TypeScript configuration that should be used
+		 * by the `ts-loader` when processing TypeScript files.
+		 * @returns {Object}
+		 */
+		typescript: ( cwd, tsconfigName = 'tsconfig.json' ) => {
 			return {
 				test: /\.ts$/,
-				use: 'ts-loader'
+				loader: 'ts-loader',
+				options: {
+					configFile: path.join( cwd, tsconfigName )
+				}
 			};
 		},
 

packages/ckeditor5-package-tools/tests/utils/get-karma-config.js

@@ -30,6 +30,9 @@ describe( 'lib/utils/get-karma-config', () => {
 				join: sinon.stub().callsFake( ( ...chunks ) => chunks.join( '/' ) ),
 				resolve: sinon.stub().callsFake( file => `/process/cwd/${ file }` )
 			},
+			fs: {
+				existsSync: sinon.stub().returns( false )
+			},
 			webpackUtils: {
 				loaderDefinitions: {
 					raw: sinon.stub(),
@@ -47,6 +50,7 @@ describe( 'lib/utils/get-karma-config', () => {
 		stubs.webpackUtils.loaderDefinitions.coverage.withArgs( cwd ).returns( 'coverage-loader' );
 		stubs.webpackUtils.getModuleResolutionPaths.returns( 'loader-resolution-paths' );
 
+		mockery.registerMock( 'fs', stubs.fs );
 		mockery.registerMock( 'path', stubs.path );
 		mockery.registerMock( './webpack-utils', stubs.webpackUtils );
 
@@ -71,7 +75,7 @@ describe( 'lib/utils/get-karma-config', () => {
 
 	it( 'uses sandboxed version of Chrome when executing on local environment', () => {
 		const envCI = process.env.CI;
-		process.env.CI = false;
+		process.env.CI = 'false';
 
 		const config = getKarmaConfig( { cwd } );
 
@@ -82,11 +86,11 @@ describe( 'lib/utils/get-karma-config', () => {
 
 	it( 'uses no sandbox version of Chrome when executing on CI', () => {
 		const envCI = process.env.CI;
-		process.env.CI = true;
+		process.env.CI = 'true';
 
 		const config = getKarmaConfig( { cwd } );
 
-		expect( config.browsers ).to.deep.equal( [ 'CHROME_TRAVIS_CI' ] );
+		expect( config.browsers ).to.deep.equal( [ 'CHROME_CI' ] );
 
 		process.env.CI = envCI;
 	} );
@@ -258,5 +262,23 @@ describe( 'lib/utils/get-karma-config', () => {
 
 			expect( config.webpack.devtool ).to.equal( 'eval-cheap-module-source-map' );
 		} );
+
+		it( 'allows using the "tsconfig.test.json" file for TypeScript files if exists', () => {
+			stubs.fs.existsSync.returns( true );
+
+			getKarmaConfig( { cwd } );
+
+			expect( stubs.webpackUtils.loaderDefinitions.typescript.callCount ).to.equal( 1 );
+			expect( stubs.webpackUtils.loaderDefinitions.typescript.firstCall.args[ 0 ] ).to.equal( cwd );
+			expect( stubs.webpackUtils.loaderDefinitions.typescript.firstCall.args[ 1 ] ).to.equal( 'tsconfig.test.json' );
+		} );
+
+		it( 'uses the default "tsconfig.json" configuration if the test config does not exist', () => {
+			getKarmaConfig( { cwd } );
+
+			expect( stubs.webpackUtils.loaderDefinitions.typescript.callCount ).to.equal( 1 );
+			expect( stubs.webpackUtils.loaderDefinitions.typescript.firstCall.args[ 0 ] ).to.equal( cwd );
+			expect( stubs.webpackUtils.loaderDefinitions.typescript.firstCall.args[ 1 ] ).to.equal( 'tsconfig.json' );
+		} );
 	} );
 } );

packages/ckeditor5-package-tools/tests/utils/get-webpack-config-dll.js

@@ -102,6 +102,20 @@ describe( 'lib/utils/get-webpack-config-dll', () => {
 		] );
 	} );
 
+	it( 'passes the "cwd" directory to TypeScript loader', () => {
+		getWebpackConfigDll( { cwd } );
+
+		expect( stubs.webpackUtils.loaderDefinitions.typescript.callCount ).to.equal( 1 );
+		expect( stubs.webpackUtils.loaderDefinitions.typescript.firstCall.args[ 0 ] ).to.equal( cwd );
+	} );
+
+	it( 'passes the "cwd" directory to Styles loader', () => {
+		getWebpackConfigDll( { cwd } );
+
+		expect( stubs.webpackUtils.loaderDefinitions.styles.callCount ).to.equal( 1 );
+		expect( stubs.webpackUtils.loaderDefinitions.styles.firstCall.args[ 0 ] ).to.equal( cwd );
+	} );
+
 	it( 'resolves correct file extensions', () => {
 		const config = getWebpackConfigDll( { cwd } );
 

packages/ckeditor5-package-tools/tests/utils/get-webpack-config-server.js

@@ -96,6 +96,20 @@ describe( 'lib/utils/get-webpack-config-server', () => {
 		] );
 	} );
 
+	it( 'passes the "cwd" directory to TypeScript loader', () => {
+		getWebpackConfigServer( { cwd } );
+
+		expect( stubs.webpackUtils.loaderDefinitions.typescript.callCount ).to.equal( 1 );
+		expect( stubs.webpackUtils.loaderDefinitions.typescript.firstCall.args[ 0 ] ).to.equal( cwd );
+	} );
+
+	it( 'passes the "cwd" directory to Styles loader', () => {
+		getWebpackConfigServer( { cwd } );
+
+		expect( stubs.webpackUtils.loaderDefinitions.styles.callCount ).to.equal( 1 );
+		expect( stubs.webpackUtils.loaderDefinitions.styles.firstCall.args[ 0 ] ).to.equal( cwd );
+	} );
+
 	it( 'resolves correct file extensions', () => {
 		const config = getWebpackConfigServer( { cwd } );
 

packages/ckeditor5-package-tools/tests/utils/webpack-utils.js

@@ -59,7 +59,7 @@ describe( 'lib/utils/webpack-utils', () => {
 			} );
 
 			it( 'uses "raw-loader" for providing files', () => {
-				expect( loader.use ).to.equal( 'raw-loader' );
+				expect( loader.loader ).to.equal( 'raw-loader' );
 			} );
 
 			it( 'loads paths that end with the ".svg" suffix', () => {
@@ -99,11 +99,11 @@ describe( 'lib/utils/webpack-utils', () => {
 			let loader;
 
 			beforeEach( () => {
-				loader = webpackUtils.loaderDefinitions.typescript();
+				loader = webpackUtils.loaderDefinitions.typescript( cwd );
 			} );
 
 			it( 'uses "ts-loader" for providing files', () => {
-				expect( loader.use ).to.equal( 'ts-loader' );
+				expect( loader.loader ).to.equal( 'ts-loader' );
 			} );
 
 			it( 'loads paths that end with the ".ts" suffix', () => {
@@ -113,6 +113,18 @@ describe( 'lib/utils/webpack-utils', () => {
 				expect( '/Users/ckeditor/ckeditor5-foo/assets/ckeditor.js' ).to.not.match( loader.test );
 				expect( 'C:\\Users\\ckeditor\\ckeditor5-foo\\assets\\ckeditor.js' ).to.not.match( loader.test );
 			} );
+
+			it( 'passes default values to loader options', () => {
+				expect( loader.options ).to.be.an( 'object' );
+				expect( loader.options ).to.have.property( 'configFile', '/process/cwd/tsconfig.json' );
+			} );
+
+			it( 'allows defining custom tsconfig file', () => {
+				loader = webpackUtils.loaderDefinitions.typescript( cwd, 'tsconfig.test.json' );
+
+				expect( loader.options ).to.be.an( 'object' );
+				expect( loader.options ).to.have.property( 'configFile', '/process/cwd/tsconfig.test.json' );
+			} );
 		} );
 
 		describe( 'coverage()', () => {