feat(compiler): add sourcemap to options and result

packages/lwc-compiler/package.json

@@ -34,6 +34,7 @@
     "@types/babel-core": "~6.25.3",
     "awesome-typescript-loader": "^5.0.0",
     "magic-string": "^0.22.4",
+    "source-map": "^0.7.3",
     "string-replace-webpack-plugin": "^0.1.3",
     "webpack": "^4.10.2",
     "webpack-cli": "^3.0.2"

packages/lwc-compiler/src/bundler/__tests__/bundler.spec.ts

@@ -8,4 +8,54 @@ describe('bundler', () => {
             ),
         });
     });
+
+    test('does not return sourcemap by default', async () => {
+        const result = await bundle({
+            baseDir: '',
+            name: 'cmp',
+            namespace: 'c',
+            files: {
+                'cmp.js': 'let a = 1'
+            },
+            stylesheetConfig: {
+                customProperties: {
+                    allowDefinition: false,
+                    resolution: { type: 'native' }
+                }
+            },
+            outputConfig: {
+                    env: { NODE_ENV: 'development' },
+                    minify: false,
+                    compat: false,
+                    sourcemap: false
+            }
+        });
+
+        expect(result.map).toBeNull();
+    });
+
+    test('returns sourcemap when requested', async () => {
+        const result = await bundle({
+            baseDir: '',
+            name: 'cmp',
+            namespace: 'c',
+            files: {
+                'cmp.js': 'const a = 1;'
+            },
+            stylesheetConfig: {
+                customProperties: {
+                    allowDefinition: false,
+                    resolution: { type: 'native' }
+                }
+            },
+            outputConfig: {
+                env: { NODE_ENV: 'development' },
+                minify: false,
+                compat: false,
+                sourcemap: true
+            }
+        });
+
+        expect(result.map).not.toBeNull();
+    });
 });

packages/lwc-compiler/src/bundler/bundler.ts

@@ -15,11 +15,12 @@ import {
 
 import { collectImportLocations } from "./import-location-collector";
 import { Diagnostic, DiagnosticLevel } from "../diagnostics/diagnostic";
+import { SourceMap } from "../compiler/compiler";
 
 export interface BundleReport {
     code: string;
     diagnostics: Diagnostic[];
-    map: null;
+    map: SourceMap | null;
     metadata: BundleMetadata;
 }
 
@@ -84,14 +85,15 @@ export async function bundle(
     );
 
     if (outputConfig.compat) {
-        plugins.push(rollupCompat());
+        plugins.push(rollupCompat(outputConfig));
     }
 
     if (outputConfig.minify) {
-        plugins.push(rollupMinify());
+        plugins.push(rollupMinify(outputConfig));
     }
 
     let code;
+    let map;
     try {
         const rollupBundler = await rollup({
             input: name,
@@ -103,13 +105,15 @@ export async function bundle(
             amd: { id: namespace + "/" + name },
             interop: false,
             strict: false,
+            sourcemap: outputConfig.sourcemap,
             format
         });
         code = result.code;
-
+        map = result.map;
     } catch (e) {
         // populate diagnostics
         const {  message, filename } = e;
+        map = null;
 
         diagnostics.push({
             filename,
@@ -125,7 +129,7 @@ export async function bundle(
     return {
         diagnostics,
         code,
-        map: null,
+        map,
         metadata: metadataCollector.getMetadata()
     };
 }

packages/lwc-compiler/src/compiler/__tests__/options.spec.ts

@@ -78,6 +78,22 @@ describe('compiler options', () => {
         });
     });
 
+    it('should validate outputConfig.sourcemap', async () => {
+        await expect(
+            compile({
+                name: 'foo',
+                namespace: 'x',
+                files: { x: 'foo' },
+                outputConfig: {
+                    sourcemap: 'true',
+                },
+            }),
+        ).rejects.toMatchObject({
+            message:
+                "Expected a boolean value for outputConfig.sourcemap, received \"true\".",
+        });
+    });
+
     it('should validate stylesheetConfig.customProperties.allowDefinition', async () => {
         await expect(
             compile({

packages/lwc-compiler/src/compiler/__tests__/result.spec.ts

@@ -1,6 +1,7 @@
 import { compile } from "../compiler";
 import { pretify, readFixture } from "../../__tests__/utils";
 import { DiagnosticLevel } from "../../diagnostics/diagnostic";
+import { RawSourceMap, SourceMapConsumer } from "source-map";
 
 const VALID_CONFIG = {
     outputConfig: {
@@ -200,6 +201,77 @@ describe("compiler result", () => {
         expect(diagnostics[1].level).toBe(DiagnosticLevel.Fatal);
         expect(diagnostics[1].message).toContain('foo.html: <template> has no matching closing tag.');
     });
+
+    test("sourcemaps correctness", async () => {
+        const cmpCode = `import { LightningElement } from 'lwc';
+import { main } from './utils/util.js';
+export default class Test extends LightningElement {
+  get myimport() {
+    return main();
+  }
+}
+`;
+        const utilsCode = `export function main() {
+  return 'here is your import';
+}`;
+        const { result } = await compile({
+            name: "foo",
+            namespace: "x",
+            files: {
+                "foo.js": cmpCode,
+                "foo.html": readFixture("metadata/metadata.html"),
+                "utils/util.js": utilsCode,
+            },
+            outputConfig: {
+                sourcemap: true
+            }
+        });
+        // @ts-ignore
+        await SourceMapConsumer.with(result!.map as RawSourceMap, null, sourceMapConsumer => {
+
+            let gp;
+
+            // m in main from utils;
+            gp = sourceMapConsumer.generatedPositionFor({
+                source: 'utils/util.js',
+                line: 1,
+                column: 16,
+            });
+
+            expect(gp.line).toBe(26);
+            expect(gp.column).toBe(13);
+
+            // ' in return 'here ....
+            gp = sourceMapConsumer.generatedPositionFor({
+                source: 'utils/util.js',
+                line: 2,
+                column: 9,
+            });
+
+            expect(gp.line).toBe(27);
+            expect(gp.column).toBe(13);
+
+            // m in myimport()
+            gp = sourceMapConsumer.generatedPositionFor({
+                source: 'foo.js',
+                line: 4,
+                column: 6,
+            });
+
+            expect(gp.line).toBe(31);
+            expect(gp.column).toBe(10);
+
+            // m in main()
+            gp = sourceMapConsumer.generatedPositionFor({
+                source: 'foo.js',
+                line: 5,
+                column: 11,
+            });
+
+            expect(gp.line).toBe(32);
+            expect(gp.column).toBe(15);
+        });
+    });
 });
 
 describe("compiler metadata", () => {

packages/lwc-compiler/src/compiler/compiler.ts

@@ -15,11 +15,20 @@ export interface CompilerOutput {
 
 export interface BundleResult {
     code: string;
-    map: null;
+    map: SourceMap | null;
     metadata: BundleMetadata;
     outputConfig: NormalizedOutputConfig;
 }
 
+export interface SourceMap {
+    version?: string;
+    file?: string;
+    sourceRoot?: string;
+    sources?: string[];
+    names?: string[];
+    mappings: string;
+}
+
 export async function compile(
     options: CompilerOptions
 ): Promise<CompilerOutput> {
@@ -32,6 +41,7 @@ export async function compile(
     const {
         diagnostics: bundleDiagnostics,
         code,
+        map,
         metadata,
     } = await bundle(normalizedOptions);
 
@@ -40,7 +50,7 @@ export async function compile(
     if (!hasError(diagnostics)) {
         result = {
             code,
-            map: null,
+            map,
             metadata,
             outputConfig: normalizedOptions.outputConfig,
         };

packages/lwc-compiler/src/compiler/options.ts

@@ -14,7 +14,8 @@ const DEFAULT_STYLESHEET_CONFIG: NormalizedStylesheetConfig = {
 const DEFAULT_OUTPUT_CONFIG: NormalizedOutputConfig = {
     env: {},
     minify: false,
-    compat: false
+    compat: false,
+    sourcemap: false
 };
 
 const KNOWN_ENV = new Set([
@@ -37,6 +38,7 @@ export interface StylesheetConfig {
 export interface OutputConfig {
     compat?: boolean;
     minify?: boolean;
+    sourcemap?: boolean;
     env?: {
         NODE_ENV?: string;
     };
@@ -74,6 +76,7 @@ export interface NormalizedStylesheetConfig extends StylesheetConfig {
 export interface NormalizedOutputConfig extends OutputConfig {
     compat: boolean;
     minify: boolean;
+    sourcemap: boolean;
     env: {
         NODE_ENV?: string;
     };
@@ -171,6 +174,13 @@ function validateOutputConfig(config: OutputConfig) {
         );
     }
 
+    if (!isUndefined(config.sourcemap) && !isBoolean(config.sourcemap)) {
+        throw new TypeError(
+            `Expected a boolean value for outputConfig.sourcemap, received "${
+                config.sourcemap
+                }".`
+        );
+    }
     if (!isUndefined(config.env)) {
         if (!isObject(config.env)) {
             throw new TypeError(

packages/lwc-compiler/src/rollup-plugins/__tests__/compat.spec.ts

@@ -0,0 +1,57 @@
+import lwcCompatFactory from '../compat';
+import { NormalizedOutputConfig } from "../../compiler/options";
+import { RawSourceMap, SourceMapConsumer } from "source-map";
+
+const codeFixture = `
+const a = 1;
+console.log(a);
+`;
+const compatCode = `import __callKey1 from "proxy-compat/callKey1";
+var a = 1;
+
+__callKey1(console, "log", a);`;
+
+describe('rollup plugin lwc-compat', () => {
+    test('output without sourcemap', () => {
+        const lwcCompat = lwcCompatFactory({ sourcemap: false } as NormalizedOutputConfig);
+        const result = lwcCompat.transform(codeFixture);
+
+        expect(result.code).toBe(compatCode);
+        expect(result.map).toBeNull();
+    });
+    test('outputs a correct sourcemap', async () => {
+        const lwcCompat = lwcCompatFactory({ sourcemap: true } as NormalizedOutputConfig);
+        const result = lwcCompat.transform(codeFixture);
+
+        expect(result.map).not.toBeNull();
+
+        // @ts-ignore
+        await SourceMapConsumer.with(result!.map as RawSourceMap, null, sourceMapConsumer => {
+
+            let gp;
+
+            // @ts-ignore
+            gp = sourceMapConsumer.allGeneratedPositionsFor({ line: 2, source: "unknown" });
+
+            // const -> var;
+            expect(gp[0].line).toBe(2);
+            expect(gp[0].column).toBe(0);
+            expect(gp[0].lastColumn).toBe(3);
+
+            // a -> a; *Note: gp[1] is the semicolon mapping.
+            expect(gp[2].line).toBe(2);
+            expect(gp[2].column).toBe(4);
+            expect(gp[2].lastColumn).toBe(4);
+
+            // mappings for the console.log
+            // @ts-ignore
+            gp = sourceMapConsumer.allGeneratedPositionsFor({ line: 3, source: "unknown" });
+
+            // console -> __callKey1(console
+            expect(gp[0].line).toBe(4);
+            expect(gp[0].column).toBe(0);
+            expect(gp[0].lastColumn).toBe(10);
+
+        });
+    });
+});