From ff9d9ff8980b5afbab9f82a5604b6a9585454c4b Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Tue, 29 Aug 2023 10:42:25 +0200 Subject: [PATCH 1/5] Feature: Allow defining TSConfig file to process by ts-loader. --- .../lib/utils/get-karma-config.js | 19 ++++++++----- .../lib/utils/get-webpack-config-dll.js | 2 +- .../lib/utils/get-webpack-config-server.js | 2 +- .../lib/utils/webpack-utils.js | 15 ++++++++-- .../tests/utils/get-karma-config.js | 28 +++++++++++++++++-- .../tests/utils/get-webpack-config-dll.js | 14 ++++++++++ .../tests/utils/get-webpack-config-server.js | 14 ++++++++++ .../tests/utils/webpack-utils.js | 18 ++++++++++-- 8 files changed, 94 insertions(+), 18 deletions(-) diff --git a/packages/ckeditor5-package-tools/lib/utils/get-karma-config.js b/packages/ckeditor5-package-tools/lib/utils/get-karma-config.js index 358f46c4..905eb948 100644 --- a/packages/ckeditor5-package-tools/lib/utils/get-karma-config.js +++ b/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 ) ] }, diff --git a/packages/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js b/packages/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js index 4057b914..fd4d877b 100644 --- a/packages/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js +++ b/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 ) ] } }; diff --git a/packages/ckeditor5-package-tools/lib/utils/get-webpack-config-server.js b/packages/ckeditor5-package-tools/lib/utils/get-webpack-config-server.js index 9f88bff3..bb6a7ce6 100644 --- a/packages/ckeditor5-package-tools/lib/utils/get-webpack-config-server.js +++ b/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 ) ] } }; diff --git a/packages/ckeditor5-package-tools/lib/utils/webpack-utils.js b/packages/ckeditor5-package-tools/lib/utils/webpack-utils.js index 0669dfe5..1682e299 100644 --- a/packages/ckeditor5-package-tools/lib/utils/webpack-utils.js +++ b/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 ) + } }; }, diff --git a/packages/ckeditor5-package-tools/tests/utils/get-karma-config.js b/packages/ckeditor5-package-tools/tests/utils/get-karma-config.js index 497837bb..9c6eff18 100644 --- a/packages/ckeditor5-package-tools/tests/utils/get-karma-config.js +++ b/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' ); + } ); } ); } ); diff --git a/packages/ckeditor5-package-tools/tests/utils/get-webpack-config-dll.js b/packages/ckeditor5-package-tools/tests/utils/get-webpack-config-dll.js index fa912f63..eb10d7e4 100644 --- a/packages/ckeditor5-package-tools/tests/utils/get-webpack-config-dll.js +++ b/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 } ); diff --git a/packages/ckeditor5-package-tools/tests/utils/get-webpack-config-server.js b/packages/ckeditor5-package-tools/tests/utils/get-webpack-config-server.js index 1f05cdea..170820e4 100644 --- a/packages/ckeditor5-package-tools/tests/utils/get-webpack-config-server.js +++ b/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 } ); diff --git a/packages/ckeditor5-package-tools/tests/utils/webpack-utils.js b/packages/ckeditor5-package-tools/tests/utils/webpack-utils.js index 4f6362c4..26832899 100644 --- a/packages/ckeditor5-package-tools/tests/utils/webpack-utils.js +++ b/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()', () => { From 6c2b5a6f0876f54ffb6adb74e5be8e3a322078d7 Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Tue, 29 Aug 2023 10:43:01 +0200 Subject: [PATCH 2/5] TSConfig: Do not load all types by default. Created config for running tests. --- .../lib/templates/ts/tsconfig.json | 37 +++++++++++++++++++ .../lib/templates/ts/tsconfig.json.txt | 26 ------------- .../lib/templates/ts/tsconfig.test.json | 9 +++++ 3 files changed, 46 insertions(+), 26 deletions(-) create mode 100644 packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json delete mode 100644 packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json.txt create mode 100644 packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json diff --git a/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json new file mode 100644 index 00000000..e7b80e10 --- /dev/null +++ b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json @@ -0,0 +1,37 @@ +{ + "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", + "./tests", + "./typings" + ] +} diff --git a/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json.txt b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json.txt deleted file mode 100644 index 11999f7f..00000000 --- a/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json.txt +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "lib": [ - "DOM", - "DOM.Iterable" - ], - "noImplicitAny": true, - "noImplicitOverride": true, - "strict": true, - "module": "es6", - "target": "es2020", - "sourceMap": true, - "allowJs": true, - "moduleResolution": "node", - "typeRoots": [ - "typings", - "node_modules/@types" - ] - }, - "include": [ - "./sample", - "./src", - "./tests", - "./typings" - ] -} diff --git a/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json new file mode 100644 index 00000000..341bce1a --- /dev/null +++ b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "types": [ + "@types/mocha" + ], + "sourceMap": true + } +} From 1a3554a76f4c1d9c1a1d87cf4bc5c31af88b76f3 Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Tue, 29 Aug 2023 11:28:48 +0200 Subject: [PATCH 3/5] Moved tests to the dedicated configuration file. --- .../lib/templates/ts/tsconfig.json | 1 - .../lib/templates/ts/tsconfig.test.json | 8 +++++++- .../ckeditor5-package-generator/lib/utils/copy-files.js | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json index e7b80e10..19033791 100644 --- a/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json +++ b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.json @@ -31,7 +31,6 @@ "include": [ "./sample", "./src", - "./tests", "./typings" ] } diff --git a/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json index 341bce1a..065d98e4 100644 --- a/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json +++ b/packages/ckeditor5-package-generator/lib/templates/ts/tsconfig.test.json @@ -5,5 +5,11 @@ "@types/mocha" ], "sourceMap": true - } + }, + "include": [ + "./sample", + "./src", + "./tests", + "./typings" + ] } diff --git a/packages/ckeditor5-package-generator/lib/utils/copy-files.js b/packages/ckeditor5-package-generator/lib/utils/copy-files.js index 0c136ff0..f67dce9e 100644 --- a/packages/ckeditor5-package-generator/lib/utils/copy-files.js +++ b/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 From 65685952837194b55b6beded27799d864a697be6 Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Tue, 29 Aug 2023 11:29:57 +0200 Subject: [PATCH 4/5] Removed invalid dot. --- .../lib/templates/ts/sample/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html b/packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html index 12f3a4f9..b4399036 100644 --- a/packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html +++ b/packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html @@ -89,7 +89,7 @@

The directory structure

├─ .editorconfig ├─ ... ├─ README.md -└─ .tsconfig.json # TypeScript configuration file. +└─ tsconfig.json # TypeScript configuration file.

Reporting issues

If you found a problem with CKEditor 5 or the package generator, please, report an issue:

From f1aee9220a117bde7c748ca192c3b881e5bc357f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Smyrek?= <56868128+psmyrek@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:26:07 +0200 Subject: [PATCH 5/5] Update packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html --- .../lib/templates/ts/sample/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html b/packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html index b4399036..f4dc1152 100644 --- a/packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html +++ b/packages/ckeditor5-package-generator/lib/templates/ts/sample/index.html @@ -89,7 +89,7 @@

The directory structure

├─ .editorconfig ├─ ... ├─ README.md -└─ tsconfig.json # TypeScript configuration file. +└─ tsconfig.json # TypeScript configuration file.

Reporting issues

If you found a problem with CKEditor 5 or the package generator, please, report an issue: