Typescript compiler is removing some important comments.

[mremiszewski]

📝 Provide detailed reproduction steps (if any)

Some code in *.ts files that is marked with CK_DEBUG is being removed by Typescript compiler because it's treated as a comment.

✔️ Expected result

No lines with CK_DEBUG are being removed during compilation.

❌ Actual result

Some lines with CK_DEBUG are being removed during compilation.

❓ Possible solution

Workaround:

/**
 * @license 
 */

/**
 * @module 
 */

// ✅ comment followed by an used import

import usedFunc from 'foo'

// ❌ comment followed by an unused import

import unusedFunc from 'bar'

// ❌ comment followed by a type import

import type SomeType from 'sometype'

// ✅ comment followed by a class

/**
 * 
 */
class A {

	// ✅ comment at the beginning of a class 

	constructor() {

	}

	// ✅ comment in the middle of a class 

	/**
	 * doc
	 */
	public method() {
		// ✅ comment inside a method 
		while (true) {
			usedFunc();
			// ✅ comment inside a loop 
		}
	}

	// ❌ comment at the end of a class 
}

// ❌ comment followed by an interface

/**
 * 
 */
interface B {

	/**
	 * doc
	 */
	readonly x: string;
	// ❌ comment inside interface

}

// ✅ comment followed by an export;

export { A };

// ❌ comment followed by a type export;

export type { A as A2 };

// ✅ comment at the end of file

Comments with ❌ would be deleted during compilation, and comments with ✅ would be preserved.
All lines in *.ts files with CK_DEBUG or CK_DEBUG_<something> should be investigated whether they are being removed during compilation and moved to a place where they wouldn't.
The same should be done for *.js files as the same issue will affect them when they are rewritten to Typescript.

Actual solution:
We should think about a different approach to code that should be available only in debug mode.

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[przemyslaw-zan]

It seems that this behavior cannot be easily disabled:

• FAQ: Why some comments are not preserved in emitted JavaScript even when --removeComments is not specified?

Plugin writing possibilities seem to be rather limited:

• "plugins aren't loaded during normal commandline typechecking or emitting, (so are not loaded by tsc)."
• Allow "Compiler Plugins" microsoft/TypeScript#16607

Possibly related:

• Trivia - Typescript Deep Dive
• Comments for call expression arguments are not preserved in output microsoft/TypeScript#3844
• Emit does not preserve empty lines microsoft/TypeScript#843
• Review preserving internal trivia in code fixes microsoft/TypeScript#23373

[przemyslaw-zan]

Solution that works is changing the order of ck-debug-loader and ts-loader in our webpack config. Thanks to this, CK_DEBUG lines which are needed, will be uncommented before being passed on to TS compiler, and thus preserved. I've confirmed this by looking at output generated by webpack in both loader orders, as well as checking whether this solution works in tests directly.

Some caveats:

• We need to ensure that all of the CK_DEBUG comments inside TS files are valid TS code that will not throw an error during compilation.
• Comments inside interfaces and other structures that only exist in TS will not be preserved.

Output generated by Webpack

• ✅ - CK_DEBUG that is preserved before changes
• ❌ - CK_DEBUG that is not preserved before changes

TS input file content

// ✅ comment followed by an used import

import usedFunc from './usedfunc';

// ❌ comment followed by an unused import

import unusedFunc from './unusedfunc';

// ❌ comment followed by a type import

import type { Type } from './type';

// @if CK_DEBUG // console.warn( '✅' );

/**
 *
 */
class A {
	// @if CK_DEBUG // value1 = '✅';

	constructor() {

	}

	// @if CK_DEBUG // value2 = '✅';

	/**
	 * doc
	 */
	public method(): void {
		// @if CK_DEBUG // console.warn( '✅' );
		while ( true ) {
			usedFunc();
			// @if CK_DEBUG // console.warn( '✅' );
		}
	}

	// @if CK_DEBUG // value3 = '❌';
}

// @if CK_DEBUG // console.warn( '❌' );

/**
 *
 */
interface B {

	/**
	 * doc
	 */
	readonly x: string;

	// @if CK_DEBUG // readonly y: '❌';

}

// @if CK_DEBUG // console.warn( '✅' );

export { A };

// @if CK_DEBUG // console.warn( '❌' );

export type { A as A2 };

// @if CK_DEBUG // console.warn( '✅' );

const foo = new A();

console.log( foo );

Webpack output currently:

this is invalid JS

// ✅ comment followed by an used import

/* @if CK_DEBUG */  console.warn( '✅' );
/**
 *
 */
class A {
    /* @if CK_DEBUG */  value1 = '✅';
    constructor() {
    }
    /* @if CK_DEBUG */  value2 = '✅';
    /**
     * doc
     */
    method() {
        /* @if CK_DEBUG */  console.warn( '✅' );
        while (true) {
            (0,_usedfunc__WEBPACK_IMPORTED_MODULE_0__["default"])();
            /* @if CK_DEBUG */  console.warn( '✅' );
        }
    }
}
/* @if CK_DEBUG */  console.warn( '✅' );

/* @if CK_DEBUG */  console.warn( '✅' );
const foo = new A();
console.log(foo);

Webpack output after switching loader order:

this is valid JS

// ✅ comment followed by an used import

/* @if CK_DEBUG */ console.warn('✅');
/**
 *
 */
class A {
    constructor() {
        /* @if CK_DEBUG */ this.value1 = '✅';
        /* @if CK_DEBUG */ this.value2 = '✅';
        /* @if CK_DEBUG */ this.value3 = '❌';
    }
    /**
     * doc
     */
    method() {
        /* @if CK_DEBUG */ console.warn('✅');
        while (true) {
            (0,_usedfunc__WEBPACK_IMPORTED_MODULE_0__["default"])();
            /* @if CK_DEBUG */ console.warn('✅');
        }
    }
}
/* @if CK_DEBUG */ console.warn('❌');
/* @if CK_DEBUG */ console.warn('✅');

/* @if CK_DEBUG */ console.warn('❌');
/* @if CK_DEBUG */ console.warn('✅');
const foo = new A();
console.log(foo);

[pomek]

Sounds good. Make sure to update both test environments: automated and manual.

[przemyslaw-zan]

PRs: (they have to be used together, either one without the other will not work)

• Fixed TS errors in CK_DEBUG code #13477
• Swapped order of ts-loader and ck-debug-loader ckeditor5-dev#840

Despite there being ck-debug-loader in manual tests webpack config, there are no CK_DEBUG inside manual tests.

[przemyslaw-zan]

@mremiszewski Were you you dealing with a specific case when describing this issue? If so, could you please check whether those PRs fix the issue?