Ember-cli-typescript: Export problems using typescript in an addon

[cibernox]

Seems that modules defined in .ts files don't get exported.

I have a reproduction example on this PR: https://github.com/cibernox/ember-native-dom-helpers/pull/16

The only changes in that PR, aside from installing the addon, is that I renamed /test-support/helpers.js -> /test-support/helpers.ts.

I see two unexpected things.

First of all, I see some disturbing error messages in the console that sound like errors but perhaps they are warnings because they don't cause the build to fail:

The tests seems unable to resolve ember-native-dom-helpers/test-support/helpers. Inspecting /assets/test-support.js, there is no traces of define('ember-native-dom-helpers/test-support/helpers'), but the modules defined in .js files are there.

The simples way to reproduce is clone the repo linked above, checkout the migrate-to-typescript branch and run ember s

[pixelhandler]

@locks do you have an example of an addon already using TypeScript we can follow as an example for test setup?

[pixelhandler]

@cibernox see https://github.com/emberwatch/ember-cli-typescript/issues/3#issuecomment-266247843 I'm curious if this addon is mainly for apps.

@dustinfarris do you have TypeScript working in an addon?

[cibernox]

exporting addon code to the addon name module (surprised this doesn't happen already)

@pixelhandler This seems exactly what I'm hitting. Seems that this addon is not ready for prime time :(

[dustinfarris]

I have not been able to use in an addon. Was told not ready for that.

Sent from my iPhone

On Feb 28, 2017, at 6:42 AM, Miguel Camba [e-mail] wrote:

exporting addon code to the addon name module (surprised this doesn't happen already)

@pixelhandler This seems exactly what I'm hitting. Seems that this addon is not ready for prime time :(

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[rwjblue]

Awesome! Let's fix it!

[vitch]

I dug into this a bit...

The problem seems to be that the addon's folder isn't available in the tree that the TypeScriptPreprocessor acts on.

The preprocessor is set up in setupPreprocessorRegistry via registry.add('js', plugin);... But it only seems to be invoked twice:

1. With the merged contents from the app and dummy/tests/app directories; and
2. With the contents of the tests/ directory

It never seems to be called with the contents of the addon directory.

I have never used setupPreprocessorRegistry before - is this how it is meant to work? Is there a way to tell it you want to preprocess the addon's directory too? Or is the addon's directory merged into the app namespace at some point?

I'm happy to try and put together a PR if someone can tell me how this is meant to work...

[pixelhandler]

To isolate the issue for addons I tried creating an addon that uses the treeForAddon hook to compile the typescript but will need some time to figure it out. If anyone is interested in figuring it out, perhaps try working on https://gitlab.com/pixelhandler/ember-try-typescript

• https://gitlab.com/pixelhandler/ember-try-typescript/blob/try-to-build-typescript-in-addon/index.js#L12
• https://gitlab.com/pixelhandler/ember-try-typescript/blob/try-to-build-typescript-in-addon/addon/utils/hello.ts

The file at https://gitlab.com/pixelhandler/ember-try-typescript/blob/try-to-build-typescript-in-addon/app/utils/hello.js is not finding a module yet (so perhaps not compiling?)

Also I tried using this addon ember-cli-typescript on a branch in the same repo. A util module will compile and build from the addon's app directory but not the addon directory. This module is not imported, https://gitlab.com/pixelhandler/ember-try-typescript/blob/try-to-build-typescript-in-addon/addon/utils/hello.ts

• Fails: https://gitlab.com/pixelhandler/ember-try-typescript/blob/try-to-build-typescript-in-addon/addon/utils/hello.ts
  
  
  
  • config: https://gitlab.com/pixelhandler/ember-try-typescript/blob/try-to-build-typescript-in-app/tsconfig.json#L14-17
  
  
• Works: https://gitlab.com/pixelhandler/ember-try-typescript/blob/try-to-build-typescript-in-app/app/utils/hello.ts

Also noticed that even though the TypeScript does compile when in the app directory the consuming application also needs this addon installed to compile from the app directory as well.

[pixelhandler]

@rwjblue I hear you may have talked to @krisselden about this issue today, thanks for thinking about this. Need help in the area of compiling from the addon directory, and likely test-support too. Seems that a build is unable to resolve modules from those directories.

[vitch]

After much chasing of ghosts I've managed to get to the bottom of this and it turns out that you can use ember-cli-typescript from an addon as is.

Here is an example:
https://github.com/vitch/addon-with-typescript

And an app which consumes that addon:
https://github.com/vitch/app-with-typescript

The thing that made it work for me was moving ember-cli-typescript from devDependencies to dependencies...

[pixelhandler]

@cibernox did you see this note from @vitch (above), now in README as well, https://github.com/emberwatch/ember-cli-typescript/blob/master/README.md#write-your-add-ons-in-typescript

[vitch]

I think @cibernox's problem was something different given he already had it in dependencies.

It's possible that changes in ember-cli since 2.12.0-beta.1 or this addon since the issue was opened might have fixed it or there may have been something else at play in that case...

[pixelhandler]

@vitch the main goal @cibernox had was to use TypeScript with the addon-test-support directory of an addon, ember-native-dom-helpers. Curious if that just works by moving ember-cli-typescript to dependencies.

[rwjblue]

Because thats how preprocessors work. If an addon wants things in its own addon or addon-test-support folders to be transpiled when it is consumed, it must have a dependency on that preprocessor. Any devDeps in an addon are _only_ used for the addon's own dummy test app.

[chriskrycho]

@rwjblue would you also need the typescript dependency in dependencies in that scenario? (As @vitch notes, @cibernox already has ember-cli-typescript in his dependencies: see here.)

[cibernox]

I'll give this a try today or more likely tomorrow.

[toranb]

Any update @cibernox -would love to start using this with addons ;)

[toranb]

Disregard- got this working by moving ember-cli-typescript to dependencies (from devDependencies as mentioned above)

here is my tsconfig.json file w/ paths for others who might follow with the same quesiton

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "noEmitOnError": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "my-addon/*": ["addon/*"],
      "ember-redux": ["node_modules/ember-redux/index.d.ts"]
    }
  },
  "include": [
    "**/*.ts"
  ]
}

And here are the dependencies I'm using w/ ember-cli v2.10

  "dependencies": {
    "ember-cli-babel": "^5.1.7",
    "ember-cli-htmlbars": "^1.0.10",
    "ember-cli-typescript": "^0.4.0",
    "typescript": "2.3"
  }

note: also this is working just fine w/ ember 1.13.13

[chriskrycho]

Resolved in #93.