Skip to content

fix(compiler-cli): include toSignal in debugName transform #69461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
P4 wants to merge 2 commits into
base: main
Choose a base branch
from
+341 −0
Open

fix(compiler-cli): include toSignal in debugName transform #69461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24f91ba
fix(compiler-cli): include toSignal in debugName transform
P4 Jun 19, 2026
04af5e2
fixup! fix(compiler-cli): include toSignal in debugName transform
P4 Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/compiler-cli/src/ngtsc/transform/src/implicit_signal_debug_name_transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,7 @@ const signalFunctions: ReadonlyMap<string, PackageName> = new Map([
['contentChild', 'core'],
['contentChildren', 'core'],
['effect', 'core'],
['toSignal', 'core'],
['resource', 'core'],
['httpResource', 'common'],
]);
Expand Down
1 change: 1 addition & 0 deletions packages/compiler-cli/test/ngtsc/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ jasmine_test(
timeout = "long",
data = [
":ngtsc_lib",
"//:node_modules/rxjs",
"//:node_modules/yargs",
"//packages/compiler-cli/src/ngtsc/testing/fake_common:npm_package",
"//packages/core:npm_package",
Expand Down
339 changes: 339 additions & 0 deletions packages/compiler-cli/test/ngtsc/debug_transform_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {NgtscTestEnvironment} from './env';

const testFiles = loadStandardTestFiles({
fakeCommon: true,
rxjs: true,
});

const minifiedDevBuildOptions = {
Expand Down Expand Up @@ -2985,5 +2986,343 @@ runInEachFileSystem(() => {
});
});
});

describe('toSignal', () => {
it('should not insert debug info into toSignal function if not imported from angular core', () => {
env.write(
'test.ts',
`
import {Component} from '@angular/core';
import {of} from 'rxjs';
declare function toSignal(source: any): any;

@Component({

@JeanMeche JeanMeche Jun 22, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Several tests a missing an import for Component.

@P4 P4 Jun 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

my bad, these tests originally used toSignal in a variable declaration, I rewrote them last minute because that code wouldn't work at runtime (toSignal needs injection context), even though it compiles and gets transformed correctly

template: ''
}) class MyComponent {
testSignal = toSignal(of(0));
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
expect(jsContents).not.toContain('debugName');
});

it('should insert debug info into toSignal function if imported from angular core', () => {
env.write(
'test.ts',
`
import {Component} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent {
testSignal = toSignal(of(0));
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
expect(cleanNewLines(jsContents)).toContain(
`toSignal(of(0), /* @ts-ignore */ ...(ngDevMode ? [{ debugName: "testSignal" }] : /* istanbul ignore next */ []))`,
);
});

describe('Property Declaration Case', () => {
it('should tree-shake away debug info if in prod mode', async () => {
env.write(
'test.ts',
`
import {Component} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal = toSignal(of(0));
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
const builtContent = (await esbuild.transform(jsContents, minifiedProdBuildOptions)).code;
expect(builtContent).not.toContain('debugName');
expect(cleanNewLines(builtContent)).toContain('toSignal( of(0) )');
});

it('should not tree-shake away debug info if in dev mode', async () => {
env.write(
'test.ts',
`
import {Component} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal = toSignal(of(0));
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
const builtContent = (await esbuild.transform(jsContents, minifiedDevBuildOptions)).code;
expect(cleanNewLines(builtContent)).toContain(
`toSignal( of(0), { debugName: "testSignal" } )`,
);
});

it('should insert debug info into toSignal function that already has custom options', async () => {
env.write(
'test.ts',
`
import {Component} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal = toSignal(of(0), { initialValue: 0 });
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
expect(cleanNewLines(jsContents)).toContain(
`toSignal(of(0), { ...(ngDevMode ? { debugName: "testSignal" } : /* istanbul ignore next */ {}), initialValue: 0 })`,
);
});

it('should tree-shake away debug info if in prod mode for toSignal function that has custom options', async () => {
env.write(
'test.ts',
`
import {Component} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal = toSignal(of(0), { initialValue: 0 });
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
const builtContent = (await esbuild.transform(jsContents, minifiedProdBuildOptions)).code;
expect(cleanNewLines(builtContent)).toContain(`toSignal(of(0), { initialValue: 0 })`);
expect(builtContent).not.toContain('ngDevMode');
expect(builtContent).not.toContain('debugName');
});

it('should not tree-shake away debug info if in dev mode and has custom options', async () => {
env.write(
'test.ts',
`
import {Component} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal = toSignal(of(0), { initialValue: 0 });
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
const builtContent = (await esbuild.transform(jsContents, minifiedDevBuildOptions)).code;
expect(cleanNewLines(builtContent)).toContain(
`toSignal(of(0), { debugName: "testSignal", initialValue: 0 })`,
);
});
});

describe('Property Assignment Case', () => {
it('should insert debug info into toSignal function', () => {
env.write(
'test.ts',
`
import {Component, Signal} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal: Signal<number|undefined>;
constructor() {
this.testSignal = toSignal(of(0));
}
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
expect(cleanNewLines(jsContents)).toContain(
`toSignal(of(0), /* @ts-ignore */ ...(ngDevMode ? [{ debugName: "testSignal" }] : /* istanbul ignore next */ [])`,
);
});

it('should tree-shake away debug info if in prod mode', async () => {
env.write(
'test.ts',
`
import {Component, Signal} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal: Signal<number|undefined>;
constructor() {
this.testSignal = toSignal(of(0));
}
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
const builtContent = (await esbuild.transform(jsContents, minifiedProdBuildOptions)).code;
expect(builtContent).not.toContain('debugName');
expect(cleanNewLines(builtContent)).toContain('toSignal( of(0) )');
});

it('should not tree-shake away debug info if in dev mode', async () => {
env.write(
'test.ts',
`
import {Component, Signal} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal: Signal<number|undefined>;
constructor() {
this.testSignal = toSignal(of(0));
}
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
const builtContent = (await esbuild.transform(jsContents, minifiedDevBuildOptions)).code;
expect(cleanNewLines(builtContent)).toContain(
`toSignal( of(0), { debugName: "testSignal" } )`,
);
});

it('should insert debug info into toSignal function that already has custom options', async () => {
env.write(
'test.ts',
`
import {Component, Signal} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal: Signal<number>;
constructor() {
this.testSignal = toSignal(of(0), { initialValue: 0 });
}
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
expect(cleanNewLines(jsContents)).toContain(
`toSignal(of(0), { ...(ngDevMode ? { debugName: "testSignal" } : /* istanbul ignore next */ {}), initialValue: 0 })`,
);
});

it('should tree-shake away debug info if in prod mode for toSignal function that has custom options', async () => {
env.write(
'test.ts',
`
import {Component, Signal} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal: Signal<number>;
constructor() {
this.testSignal = toSignal(of(0), { initialValue: 0 });
}
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
const builtContent = (await esbuild.transform(jsContents, minifiedProdBuildOptions)).code;
expect(cleanNewLines(builtContent)).toContain(`toSignal(of(0), { initialValue: 0 })`);
expect(builtContent).not.toContain('ngDevMode');
expect(builtContent).not.toContain('debugName');
});

it('should not tree-shake away debug info if in dev mode and has custom options', async () => {
env.write(
'test.ts',
`
import {Component, Signal} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {of} from 'rxjs';

@Component({
template: ''
}) class MyComponent
{
testSignal: Signal<number>;
constructor() {
this.testSignal = toSignal(of(0), { initialValue: 0 });
}
}
`,
);
env.driveMain();

const jsContents = env.getContents('test.js');
const builtContent = (await esbuild.transform(jsContents, minifiedDevBuildOptions)).code;
expect(cleanNewLines(builtContent)).toContain(
`toSignal(of(0), { debugName: "testSignal", initialValue: 0 })`,
);
});
});
});
});
});
Loading