Force include a module?

Topics: General
May 9, 2013 at 6:36 PM
Edited May 9, 2013 at 6:38 PM
I'm thinking about something like this:

page-a.ts:
import p = module('pages')
p.register('a', function (element: HTMLElement) {
   //do something here
});
page-b.ts:
import p = module('pages')
p.register('b', function (element: HTMLElement) {
   //do something else here
});
and there might be more.

pages.ts:
var registry = {};

export function register(id: string, callback: (element: HTMLElement) =>void) {
    registry[id] = callback;
}

export function fire(id: string, element: HTMLElement) {
    var callback = registry[id];
    if(callback)
        callback(element);
}
main.ts:
import p = module("pages")
import a = module("page-a")
import b = module("page-b")

//now that all callbacks are registered, when something happens, we can just do this:
p.fire(id, element);
But in the compiled result for main.ts (with options --module amd), there is nothing about 'page-a' or 'page-b', so nothing gets __register__ed. It does not work as I expect. I know it's because these modules are not used in the code, which is by design.

Is there any way I can force the compiler to include a imported module even if that module is not used or doesn't even export anything at all?

Thanks!
Developer
May 9, 2013 at 10:02 PM
It appears you want one output file (main.ts) composed of multiple external modules (which is what each of your files are right now) yes? This currently isn't possible but we're aware of issues in this space and considering some possible solutions. When you use --module AMD you will always get 1 .js file per .ts file in your compilation, and the module loader is intended to load the necessary pieces at runtime rather than have everything concatenated into one file.

Generally to get the behavior you want you would have each individual file not be an external module (i.e., no top level import/exports), and then main.ts would use triple slash references rather than module imports. When compiling you would then use the --out flag to have all the files you're interested in concatenated into a single .js output.

Does that make sense?
May 10, 2013 at 6:26 AM
Edited May 10, 2013 at 9:28 AM
Thanks for your help. I managed to something like this:

page-a.ts
/// <reference path="pages.ts" />

pages.register('a', function (element: HTMLElement) {
   //do something here
});
page-b.ts
/// <reference path="pages.ts" />

pages.register('b', function (element: HTMLElement) {
   console.log('b');
});
pages.ts
module pages {
    var registry = {};

    export function register(id: string, callback: (element: HTMLElement) =>void) {
        registry[id] = callback;
    }

    export function fire(id: string, element: HTMLElement) {
        var callback = registry[id];
        if(callback)
            callback(element);
    }
}
main.ts
/// <reference path="pages.ts" />
/// <reference path="page-a.ts" />
/// <reference path="page-b.ts" />

//now that all callbacks are registered, when something happens, we can just do this:
pages.fire(id, element);
and I use this command line to compile it:
tsc --out main.js main.ts
Then the compiled main.js contains all the code from the referenced "pages.ts", "page-a.ts" and "page-b.ts". __Now I lost the ability to import any module, and have to use triple slash reference on each of them.__ This is not yet far from ideal, but totally acceptable for me. Just post it here so any one interested an have a look.

Thanks again.