Typescript sourcemaps do not work in an ember addon

[abeforgit]

Please paste the output of ember -v here

ember-cli: 3.22.0
node: 14.15.0
os: linux x64

Please paste the output of tsc -v here

Version 4.1.2

Please paste the version of ember-cli-typescript and ember-cli-typescript-blueprints here

ts3@0.0.0 /home/arne/repos/redpencil/playground/ts3
├─┬ @glimmer/component@1.0.2
│ └── ember-cli-typescript@3.0.0 
├── ember-cli-typescript@4.0.0 
├── ember-cli-typescript-blueprints@3.0.0 
└─┬ ember-load-initializers@2.1.2
  └── ember-cli-typescript@2.0.2 

Please paste your tsconfig.json and tslint.json or eslint.json (if applicable) below

My tsconfig.json

{
"compilerOptions": {
  "target": "es2020",
  "allowJs": true,
  "moduleResolution": "node",
  "allowSyntheticDefaultImports": true,
  "noImplicitAny": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "strictNullChecks": true,
  "strictPropertyInitialization": true,
  "noFallthroughCasesInSwitch": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "noImplicitReturns": true,
  "noEmitOnError": false,
  "noEmit": true,
  "inlineSourceMap": true,
  "inlineSources": true,
  "baseUrl": ".",
  "module": "es6",
  "experimentalDecorators": true,
  "paths": {
    "dummy/tests/*": [
      "tests/*"
    ],
    "dummy/*": [
      "tests/dummy/app/*",
      "app/*"
    ],
    "ts3": [
      "addon"
    ],
    "ts3/*": [
      "addon/*"
    ],
    "ts3/test-support": [
      "addon-test-support"
    ],
    "ts3/test-support/*": [
      "addon-test-support/*"
    ],
    "*": [
      "types/*"
    ]
  }
},
"include": [
  "app/**/*",
  "addon/**/*",
  "tests/**/*",
  "types/**/*",
  "test-support/**/*",
  "addon-test-support/**/*"
]
}

What are instructions we can follow to reproduce the issue?

ember addon sample; cd ./sample # Create a new ember app
ember install ember-cli-typescript # Set up typescript support
ember generate component my-component
ember serve

ember-cli-build.js

'use strict';

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function(defaults) {
  let app = new EmberAddon(defaults, {
    babel: {
      sourceMaps: 'inline'
    }
  });


  return app.toTree();
};

my-component.ts

import Component from '@glimmer/component';

interface MyComponentArgs {}

export default class MyComponent extends Component<MyComponentArgs> {
  get content():string {
    debugger;
    return "test"

  }
}

my-component.hbs

<div>{{this.content}}</div>

tests/dummy/app/templates/application.hbs

  <MyComponent />

Now about that bug. What did you expect to see?

When running this with the chromium debug tools open, I expect to see the original typescript code when the breakpoint is hit.

What happened instead?

I see the compiled javascript instead. It's readable, so it looks like some kind of sourcemaps are provided. But it would be nice to be able to see the actual typescript code like it does when you make a typescript app, not an addon.

[chriskrycho]

Thanks for filing this (and sorry about the delay in responding)! Not sure what the underlying cause of this issue is, so please feel free to dig and open a PR for it. Otherwise, one of the maintainers will hopefully eventually get to it in the midst of everything else!

[abeforgit]

Update on this: the sourcemaps are actually working, it's just my config that is wrong! I was spitting through ember-cli-babel to see if there were any options I could play with, and there I saw that the babel config for addons is not supposed to go in ember-cli-build.js but in index.js

Moving the config into index.js so that it now reads:

'use strict';

module.exports = {
  name: require('./package').name,
  options: {
    babel: {
      sourceMaps: 'inline',
    },
  },
};

Did the trick. Now adding a debugger statement will open the typescript source in your browser.

There is one more caveat which is so frustrating now that I've gotten so close: the generated sourcemap doesn't quite match the original source file. To be specific: there are two extra lines in the sourcemapped file:

import { hbs } from 'ember-cli-htmlbars';
const __COLOCATED_TEMPLATE__ = hbs( //.... template html here // );

This causes the line-mapping to be off by two when integrating with an external debugger

[abeforgit]

I will add that any typescript files which don't have anything to do with ember do map nicely and integrate as expected with my editor's debugger (jetbrains webstorm).

[abeforgit]

The off-by-two-lines bug seems to come from ember itself and unrelated to typescript.

I'll close it since it's not an issue for this project.
ref:
emberjs/ember.js#19401
emberjs/ember-cli-babel#364
ember-cli/ember-cli-htmlbars#558