From 8c934c512af8698152a2c18e1adbd734fdd1b172 Mon Sep 17 00:00:00 2001 From: Jason Ye <40873183+jye-sf@users.noreply.github.com> Date: Tue, 5 Mar 2024 10:33:11 -0800 Subject: [PATCH] =?UTF-8?q?feat:=20support=20generating=20inlined=20source?= =?UTF-8?q?maps=20when=20transforming=20js=20file=E2=80=A6=20(#4033)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: support generating inlined sourcemaps when transforming js files in the LWC compiler * feat: support sourcemaps through rollup plugin * fix: additional tests * fix: add test for existing use case --- packages/@lwc/compiler/README.md | 2 +- packages/@lwc/compiler/src/options.ts | 5 +- .../__tests__/transform-javascript.spec.ts | 60 +++++++++++++++++++ .../src/compiler/error-info/compiler.ts | 3 +- packages/@lwc/rollup-plugin/src/index.ts | 4 +- 5 files changed, 68 insertions(+), 6 deletions(-) diff --git a/packages/@lwc/compiler/README.md b/packages/@lwc/compiler/README.md index fd1269482c..51299e50cd 100644 --- a/packages/@lwc/compiler/README.md +++ b/packages/@lwc/compiler/README.md @@ -46,7 +46,7 @@ const { code } = transformSync(source, filename, options); - `experimentalDynamicDirective` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable deprecated dynamic components. - `enableDynamicComponents` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable dynamic components. - `outputConfig` (type: `object`, optional) - see below: - - `sourcemap` (type: `boolean`, optional) - if `true`, a sourcemap is generated for the transformed file. + - `sourcemap` (type: `boolean` | `'inline'`, optional) - if `true`, a sourcemap is generated for the transformed file. If `'inline'`, an inline sourcemap is generated and appended to the transformed file. - `minify` (type: `boolean`, optional, deprecated) - this option has no effect. - `experimentalComplexExpressions` (type: `boolean`, optional) - set to true to enable use of (a subset of) JavaScript expressions in place of template bindings. Passed to `@lwc/template-compiler`. - `isExplicitImport` (type: `boolean`, optional) - true if this is an explicit import, passed to `@lwc/babel-plugin-component`. diff --git a/packages/@lwc/compiler/src/options.ts b/packages/@lwc/compiler/src/options.ts index f24d758b9a..e0005841ae 100755 --- a/packages/@lwc/compiler/src/options.ts +++ b/packages/@lwc/compiler/src/options.ts @@ -64,9 +64,10 @@ export interface StylesheetConfig { export interface OutputConfig { /** * If `true` a source map is generated for the transformed file. + * If `inline`, an inline source map is generated and appended to the end of the transformed file. * @default false */ - sourcemap?: boolean; + sourcemap?: boolean | 'inline'; /** * @deprecated The minify property has no effect on the generated output. @@ -202,7 +203,7 @@ function isUndefinedOrBoolean(property: any): boolean { function validateOutputConfig(config: OutputConfig) { invariant( - isUndefinedOrBoolean(config.sourcemap), + isUndefinedOrBoolean(config.sourcemap) || config.sourcemap === 'inline', CompilerValidationErrors.INVALID_SOURCEMAP_PROPERTY, [config.sourcemap] ); diff --git a/packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts b/packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts index ea38b68fb0..a45676e5d1 100644 --- a/packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts +++ b/packages/@lwc/compiler/src/transformers/__tests__/transform-javascript.spec.ts @@ -209,3 +209,63 @@ describe('unnecessary registerDecorators', () => { expect(code).toContain('registerDecorators'); }); }); + +describe('sourcemaps', () => { + it("should generate inline sourcemaps when the output config includes the 'inline' option for sourcemaps", () => { + const source = ` + import { LightningElement } from 'lwc'; + export default class Foo extends LightningElement {} + `; + + const { code, map } = transformSync(source, 'foo.js', { + ...TRANSFORMATION_OPTIONS, + outputConfig: { + sourcemap: 'inline', + }, + }); + expect(code).toContain('//# sourceMappingURL=data:application/json;'); + expect(map).toBeNull(); + }); + + it("should generate sourcemaps when the sourcemap configuration value is 'true'", () => { + const source = ` + import { LightningElement } from 'lwc'; + export default class Foo extends LightningElement {} + `; + + const { map } = transformSync(source, 'foo.js', { + ...TRANSFORMATION_OPTIONS, + outputConfig: { + sourcemap: true, + }, + }); + expect(map).not.toBeNull(); + }); + + describe("should fail validation of options if sourcemap configuration value is neither boolean nor 'inline'.", () => { + const source = ` + import { LightningElement } from 'lwc'; + export default class Foo extends LightningElement {} + `; + + [ + { name: 'invalid string', sourcemap: 'invalid' }, + { name: 'object', sourcemap: {} }, + { name: 'numbers', sourcemap: 123 }, + ].forEach(({ name, sourcemap }) => { + it(name, () => { + expect(() => + transformSync(source, 'foo.js', { + ...TRANSFORMATION_OPTIONS, + outputConfig: { + // @ts-expect-error Property can be passed from JS environments with no type checking. + sourcemap, + }, + }) + ).toThrow( + `LWC1021: Expected a boolean value or 'inline' for outputConfig.sourcemap, received "${sourcemap}".` + ); + }); + }); + }); +}); diff --git a/packages/@lwc/errors/src/compiler/error-info/compiler.ts b/packages/@lwc/errors/src/compiler/error-info/compiler.ts index e4b1018886..71bf533cd8 100644 --- a/packages/@lwc/errors/src/compiler/error-info/compiler.ts +++ b/packages/@lwc/errors/src/compiler/error-info/compiler.ts @@ -62,7 +62,8 @@ export const CompilerValidationErrors = { INVALID_SOURCEMAP_PROPERTY: { code: 1021, - message: 'Expected a boolean value for outputConfig.sourcemap, received "{0}".', + message: + 'Expected a boolean value or \'inline\' for outputConfig.sourcemap, received "{0}".', level: DiagnosticLevel.Error, url: '', }, diff --git a/packages/@lwc/rollup-plugin/src/index.ts b/packages/@lwc/rollup-plugin/src/index.ts index 857a350aab..4c67d80436 100644 --- a/packages/@lwc/rollup-plugin/src/index.ts +++ b/packages/@lwc/rollup-plugin/src/index.ts @@ -22,8 +22,8 @@ export interface RollupLwcOptions { exclude?: FilterPattern; /** The LWC root module directory. */ rootDir?: string; - /** If `true` the plugin will produce source maps. */ - sourcemap?: boolean; + /** If `true` the plugin will produce source maps. If `'inline'`, the plugin will produce inlined source maps and append them to the end of the generated file. */ + sourcemap?: boolean | 'inline'; /** The [module resolution](https://lwc.dev/guide/es_modules#module-resolution) overrides passed to the `@lwc/module-resolver`. */ modules?: ModuleRecord[]; /** The stylesheet compiler configuration to pass to the `@lwc/style-compiler` */