feat: support generating inlined sourcemaps when transforming js file… (

#4033)

* 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

@@ -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`.

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]
     );

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}".`
+                );
+            });
+        });
+    });
+});

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: '',
     },

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` */