Support TypeScript debugging for the demo in the Chrome debugger.

[shaunluttin]

Currently, the developer tools lists only JS files.

Ultimately, we would like to list the TypeScript files too and be able to step through these TypeScript files in the Chrome debugger:

1. application source files
2. library source files (i.e. from aurelia-open-id-connect)

[shaunluttin]

Source Maps

• A compiler/transpiler runs against a source file (e.g. foo.ts)
• The compiler/transpiler produces runnable output (e.g. foo.js).
• The runnable output includes a reference to its sourcemap (e.g. /*# sourceMappingURL=foo.js.map */)
• The *.map file associates each output declaration to its source declaration.

References:

• https://developers.google.com/web/tools/setup/setup-preprocessors
• https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps

[shaunluttin]

When using the Aurelia-CLI, the call to build.bundle() takes care of appending the sourceMappingURL to the output *.js file.

See https://github.com/aurelia/cli/blob/12d428a87371bbe6b9e09cf8de828ee0a1f3eea3/lib/build/bundle.js

for (let i = 0; i < files.length; ++i) {
  let currentFile = files[i];
  let sourceMap = buildOptions.sourcemaps ? currentFile.sourceMap : undefined;

  if (sourceMap) {
    needsSourceMap = true;
  }

...

} else if (needsSourceMap) {
  mapContents = Convert.fromJSON(concat.sourceMap)
    .setProperty('sourceRoot', mapSourceRoot)
    .toJSON();
   contents += os.EOL + '//# sourceMappingURL=' + mapFileName;
}

[shaunluttin]

Success 01:

.\node_modules\.bin\au run --env dev lets us step thru the demo applications source code, if we have aurelia.json > build.options.sourcemaps set to dev & stage.

[shaunluttin]

Success 02:

Open a prompt at aurelia-open-id-connect. Then invoke npm run package. This runs the TypeScript compiler, generates es5 output, and creates source maps. The source maps looks good. Each *.js file points to its *.js.map file, which points to its *.ts source file. Here is an example mapping.

dist
    amd
        open-id-connect.js
        open-id-connect.js.map
src 
    open-id-connect.ts

dist/amd/open-id-connect.js

//# sourceMappingURL=open-id-connect.js.map

dist/amd/open-id-connect.js.map

{
    "file":"open-id-connect.js",
    "sourceRoot":"",
    "sources":["../../src/open-id-connect.ts"],
    "names":[],
    "mappings": :";;;;;;;;;;;IAOA;QAEI,uBACY,0BAAgD,EACjD,MAA2..."
}

---

Now navigate to the demo app at aurelia-open-id-connect\demo and run npm install and then node_modules\.bin\au run --env dev.

The resultant source mapping in app-bundle.js.map will be messed up:

• the sources for the plugin uses full paths
• those sources point to JS not TS files, and
• the sourceRoot is is not the application root

{
  "version": 3,
  "sources": [
    "src/app.ts",
    "src/environment.ts",
    "src/home.ts",
    "src/open-id-connect-configuration.ts",
    "src/main.ts",
    "src/user-profile.ts",
    "src/resources/index.ts",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/node_modules/aurelia-open-id-connect/dist/amd/plugin.js",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/node_modules/aurelia-open-id-connect/dist/amd/open-id-connect-logger.js",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/node_modules/aurelia-open-id-connect/dist/amd/open-id-connect-configuration.js",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/node_modules/aurelia-open-id-connect/dist/amd/open-id-connect.js",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/node_modules/aurelia-open-id-connect/dist/amd/open-id-connect-routing.js",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/node_modules/aurelia-open-id-connect/dist/amd/open-id-connect-authorize-step.js",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/node_modules/aurelia-open-id-connect/dist/amd/open-id-connect-roles.js",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/src/app.html",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/src/home.html",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/src/navbar.html",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/src/user-profile.html",
    "C:/Users/bigfo/GitHub/_shaunluttin/aurelia-open-id-connect/demo/node_modules/aurelia-open-id-connect/dist/amd/index.js"
  ],
  "names": [],
  "mappings": ";;;;;;;;;;;IAMA;QAKI,aAAoB,aAA4B;YALpD,iBA...",
  "file": "app-bundle.js",
  "sourcesContent": [
    "import { autoinject } ...",
    "export default ...",
    "import { autoinject } from ...",
    "import environment from ...",
    "import { Aurelia } ...",
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    null
  ],
  "sourceRoot": "..\\src"
}

It's possible to hand edit the above source map file to make the Chrome debugger work.

Replace the above sources section with this:

  "sources": [
    "src/app.ts",
    "src/environment.ts",
    "src/home.ts",
    "src/open-id-connect-configuration.ts",
    "src/main.ts",
    "src/user-profile.ts",
    "src/resources/index.ts",
    "node_modules/aurelia-open-id-connect/src/plugin.ts",
    "node_modules/aurelia-open-id-connect/src/open-id-connect-logger.ts",
    "node_modules/aurelia-open-id-connect/src/open-id-connect-configuration.ts",
    "node_modules/aurelia-open-id-connect/src/open-id-connect.ts",
    "node_modules/aurelia-open-id-connect/src/open-id-connect-routing.ts",
    "node_modules/aurelia-open-id-connect/src/open-id-connect-authorize-step.ts",
    "node_modules/aurelia-open-id-connect/src/open-id-connect-roles.ts",
    "src/app.html",
    "src/home.html",
    "src/navbar.html",
    "src/user-profile.html",
    "node_modules/aurelia-open-id-connect/src/index.ts"
  ],

And change the sourceRoot to this:

"sourceRoot": "..//"

At which point we get this beautiful, debuggable, source mapping layout:

---

Next step: figure out how to have the Aurelia CLI do this for us.

[shaunluttin]

Possibly related: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/8

[shaunluttin]

This working now that https://github.com/aurelia/cli/issues/423 is complete.