Skip to content

Commit

Permalink
fix(@angular/build): allow direct bundling of TSX files with applicat…
Browse files Browse the repository at this point in the history
…ion builder

When using the application builder with `isolatedModules`, the bundler will
directly handle TypeScript transpilation and bundling. Previously, any input
TSX files were loaded by the bundler as TS files. This difference caused errors
when attempting to process the files since the syntax differs between TSX and TS.
The appropriate loader will now be used if the input file is TSX in this situation.

(cherry picked from commit 13b65df)
  • Loading branch information
clydin committed Oct 16, 2024
1 parent b91c82d commit d749ba6
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,33 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {

expect(result?.success).toBe(true);
});

it('supports TSX files with isolated modules enabled and enabled optimizations', async () => {
// Enable tsconfig isolatedModules option in tsconfig
await harness.modifyFile('tsconfig.json', (content) => {
const tsconfig = JSON.parse(content);
tsconfig.compilerOptions.isolatedModules = true;
tsconfig.compilerOptions.jsx = 'react-jsx';

return JSON.stringify(tsconfig);
});

await harness.writeFile('src/types.d.ts', `declare module 'react/jsx-runtime' { jsx: any }`);
await harness.writeFile('src/abc.tsx', `export function hello() { return <h1>Hello</h1>; }`);
await harness.modifyFile(
'src/main.ts',
(content) => content + `import { hello } from './abc'; console.log(hello());`,
);

harness.useTarget('build', {
...BASE_OPTIONS,
optimization: true,
externalDependencies: ['react'],
});

const { result } = await harness.executeOnce();

expect(result?.success).toBe(true);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

import type {
BuildFailure,
Loader,
Metafile,
OnStartResult,
OutputFile,
Expand Down Expand Up @@ -409,9 +410,21 @@ export function createCompilerPlugin(
typeScriptFileCache.set(request, contents);
}

let loader: Loader;
if (useTypeScriptTranspilation || isJS) {
// TypeScript has transpiled to JS or is already JS
loader = 'js';
} else if (request.at(-1) === 'x') {
// TSX and TS have different syntax rules. Only set if input is a TSX file.
loader = 'tsx';
} else {
// Otherwise, directly bundle TS
loader = 'ts';
}

return {
contents,
loader: useTypeScriptTranspilation || isJS ? 'js' : 'ts',
loader,
};
});

Expand Down

0 comments on commit d749ba6

Please sign in to comment.