import when there is no module (for SystemJS side effects)

[myitcv]

Apologies if this is a duplicate of an existing issue, but I haven't been able to find an answer to this specific issue. I note however #2839

A summary of the config/setup for our app:

• TypeScript v1.7.0-dev.20150827
• tsd v0.6.4-beta
• tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "declaration": false,
    "noImplicitAny": true,
    "removeComments": false,
    "noLib": false,
    "sourceMap": true,
    "jsx": "react"
  }
}

Our app depends on bootstrap-slider; as you can see this type definition does not define a module. Instead it 'extends' jquery in what I understand is the usual way for JQuery components. Via tsd our app defines a tsd.d.ts file that references the bootstrap-slider and jquery type definitions, amongst others.

Now consider a .tsx file where we define a React component that wraps bootstrap-slider. This .tsx file references the tsd.d.ts definition.

jquery declares $, hence there is no need to import jquery. Nor is there a need to import bootstrap-slider from a typing perspective because we will reference everything we need via jquery's $ (indeed to try and do so would fail because there is no module by the name of "bootstrap-slider" defined)

However, this now presents a problem because nowhere in our application are we declaring via an import a dependency on bootstrap-slider. The generated code (target ES5, module SystemJS) does not include a reference to bootstrap-slider and hence the relevant JS files are not loaded at runtime.

What is the recommended solution in this situation?
Should the bootstrap-slider type definition include a module definition for exactly this reason?
Or are we missing a more obvious solution?

Thanks

[mhegazy]

it depends on how you are distributing your library, and how you expect your users will consume it.

If you are expecting the library to exist in the global namespace, e.g. $, then do not define a module for your library, and for your users, they will need to include this as a script tag in your page or add an explicit import for it, e.g. import "jquery";.

if you expect your library to be only loaded when a module is loaded, then define a module for it, and your users will have to do something like import * as $ from "jquery";.

I have seen libraries that do both. but again that depends on how the package works.

[myitcv]

Thanks for the reply. We've happily resolved things hence I'll close this question.

The main issue here was that jspm overrides for the bootstrap-slider package were not being applied (nor were the dependencies correctly defined), hence the package was not being loaded and presented correctly by SystemJS.

With that fixed a simple:

import "bootstrap-slider";

in the .tsx file where it is used was enough to ensure that everything (including dependencies) gets loaded correctly. No need for <script> tags anywhere.

The type definition for bootstrap-slider also needed augmenting but that was minor.