Add support for bundling without a main module

[typestrong]

Add support for bundling without a main module

[tolemac]

Yes Angular2 don't have a .d.ts bundle, it use the compiler generated .d.ts files directly.

What criteria should be taken to know that we have to create files .d.ts?

If I had a large project and I would like to use several .d.ts files, I would use the compiler .d.ts generated files, and write some small bundles manually where I would export the required information:

Small bundle example that I use on Ng2Emulation project Ng2Emualtion.ts:

export * from "./Decorators/Component";
export * from "./Decorators/Directive";
export * from "./Decorators/Inject";
export * from "./Decorators/Injectable";
export * from "./Events/EventEmitter";
export * from "./Core/Bootstrap";
export * from "./Decorators/Output";
export * from "./Decorators/Input";
export {OnChanges, OnInit, OnDestroy} from "./Core/LifeCycle/LifeCycleHooks";

[mribichich]

For example, the dts-generator project, you dont have to specify a main.d.ts, you point to a folder and it creates a bundle, with every file it finds.

The problem is if you want to filter. But I think that if you would like to filter and export files interfaces only, you would probably have a main.d.ts.

But even if you do have a main, since importing a module is just importing a file, you could potentially import any file on any folder that exports something, even though you dont have a d.ts

many one option could be to install from a main, just like now, or to install from a folder.

How would one install angular2 with typings install , if there is no index.d.ts ?

[tolemac]

dts-bundle, and dts-generator (I think), bundle definitions from typescript code in one file.

If you have a large project and you want to import some parts of your project you can use the typescript compiler generated .d.ts files separatelly.
If you want to export your identifiers grouping by some criteria, you have to write ts files exporting the desired identifiers.

Imagine a project called world with this files and classes:

// world/car.ts
export class Car {}
// world/animal.ts
export class Animal{}
// world/human.ts
export class Human {}

if you want to use classes separately you can use the .d.ts files generated by typescript compiler, and you can use this way:

import {Car} from "world/car"
import {Animal} from "world/animal"
import {Human} from "world/human"

If you want to group your exports you should create a .ts file grouping it, for example:

// world/alive.ts
export * from "world/animal"
export * form "world/human"

Then use it this way:

import {Animal, Human} from "world/alive"

At last you can group all on a file world.tsexporting all others .ts files:

// world/world.ts
export * from "world/animal"
export * from "world/car"
export * form "world/human"

You can use dts-bundle to create bundle for world.ts and/or alive.d.ts.

Ok, dts-generator generate bundle for all files in a path, but, like you said, the problem is filtering ... how to say what to export and what to don't export? with dts-bundle you can filter writting a .ts file grouping your exports, as we have done with world.ts and alive.ts.

@siulung4073 Perhaps I don't understand your question, if you are from Argentina and speak spanish you can send me a spanish e-mail to tolemac[at]jros.org to clarify this issue.

[mribichich]

I understand the uses of your examples and I know is possible to do it that
way. but the problem comes when trying to generate the d.ts with ambient
modules. Because typescript doesn't add the ambient module declaration on
top of the d.ts, thats why you can't use them later for visual studio
intellisense or for the compiler, because it will complain that something
is not a module.

Maybe I have to clarify something important. The problem with the d.ts
files, or visual studio o compiler errors not finding the modules, are for
plugins or libraries, not my app code.

Lets imagine you have a npm/bower/jspm package, and you want to use that in
your app, you wont get intellisense, because the editor nor the compiler
cant find the module definitions. Even though you have the d.ts files
generated by typescript in the package folder. I know if you installed it
with npm you could have moduleresolution = node, but you cant do it with
jspm installed.

So if that package has a main.d.ts file you can use dts-bundle to generate
the ambient module definition, and everything would be ok. But if the
package doesn't have a main, like angular2, you cant use dts-bundle to
generate the ambient module for that package. In that case you would have
to use dts-generator, because it doesn't use a main, it just generates a
bundle for every d.ts file it finds in some folder.

So to recap, imagine you are the owner of the angular2 package and you
would like to distribute an ambient module definition file with your
package, to have intellisense and avoid compiler warnings. In this case you
cant use dts-bundle, because it requires a main module. You would have to
use something like dts-generator. Doing it manually would be overkill,
because you could have a lot of files.

On Wed, Jan 13, 2016 at 10:09 AM Javier Ros [email protected]
wrote:

dts-bundle, and dts-generator (I think), bundle definitions from
typescript code in one file.

If you have a large project and you want to import some parts of your
project you can use the typescript compiler generated .d.ts files
separatelly.
If you want to export your identifiers grouping by some criteria, you have
to write ts files exporting the desired identifiers.

Imagine a project called world with this files and classes:

// world/car.tsexport class Car {}// world/animal.tsexport class Animal{}// world/human.tsexport class Human {}

if you want to use classes separately you can use the .d.ts files
generated by typescript compiler, and you can use this way:

import {Car} from "world/car"import {Animal} from "world/animal"import {Human} from "world/human"

If you want to group your exports you should create a .ts file grouping
it, for example:

// world/alive.tsexport * from "world/animal"export * form "world/human"

Then use it this way:

import {Animal, Human} from "world/alive"

At last you can group all on a file world.tsexporting all others .ts
files:

// world/world.tsexport * from "world/animal"export * from "world/car"export * form "world/human"

You can use dts-bundle to create bundle for world.ts and/or alive.d.ts.

Ok, dts-generator generate bundle for all files in a path, but, like you
said, the problem is filtering ... how to say what to export and what to
don't export? with dts-bundle you can filter writting a .ts file grouping
your exports, as we have done with world.ts and alive.ts.

@siulung4073 https://github.com/siulung4073 Perhaps I don't understand
your question, if you are from Argentina and speak spanish you can send me
a spanish e-mail to tolemac[at]jros.org to clarify this issue.

—
Reply to this email directly or view it on GitHub
#29 (comment)
.

[mribichich]

I understand that one could create a function to find every d.ts file, and
execute dts-bundle on every file separately to accomplish this. But it
would be better if dts-bundle could take a glob pattern to determine the
files or the src folder and do it automatically.
thanks!

On Wed, Jan 13, 2016 at 10:36 AM Matias Ribichich [email protected]
wrote:

I understand the uses of your examples and I know is possible to do it
that way. but the problem comes when trying to generate the d.ts with
ambient modules. Because typescript doesn't add the ambient module
declaration on top of the d.ts, thats why you can't use them later for
visual studio intellisense or for the compiler, because it will complain
that something is not a module.

Maybe I have to clarify something important. The problem with the d.ts
files, or visual studio o compiler errors not finding the modules, are for
plugins or libraries, not my app code.

Lets imagine you have a npm/bower/jspm package, and you want to use that
in your app, you wont get intellisense, because the editor nor the compiler
cant find the module definitions. Even though you have the d.ts files
generated by typescript in the package folder. I know if you installed it
with npm you could have moduleresolution = node, but you cant do it with
jspm installed.

So if that package has a main.d.ts file you can use dts-bundle to generate
the ambient module definition, and everything would be ok. But if the
package doesn't have a main, like angular2, you cant use dts-bundle to
generate the ambient module for that package. In that case you would have
to use dts-generator, because it doesn't use a main, it just generates a
bundle for every d.ts file it finds in some folder.

So to recap, imagine you are the owner of the angular2 package and you
would like to distribute an ambient module definition file with your
package, to have intellisense and avoid compiler warnings. In this case you
cant use dts-bundle, because it requires a main module. You would have to
use something like dts-generator. Doing it manually would be overkill,
because you could have a lot of files.

On Wed, Jan 13, 2016 at 10:09 AM Javier Ros [email protected]
wrote:

dts-bundle, and dts-generator (I think), bundle definitions from
typescript code in one file.

If you have a large project and you want to import some parts of your
project you can use the typescript compiler generated .d.ts files
separatelly.
If you want to export your identifiers grouping by some criteria, you
have to write ts files exporting the desired identifiers.

Imagine a project called world with this files and classes:

// world/car.tsexport class Car {}// world/animal.tsexport class Animal{}// world/human.tsexport class Human {}

if you want to use classes separately you can use the .d.ts files
generated by typescript compiler, and you can use this way:

import {Car} from "world/car"import {Animal} from "world/animal"import {Human} from "world/human"

If you want to group your exports you should create a .ts file grouping
it, for example:

// world/alive.tsexport * from "world/animal"export * form "world/human"

Then use it this way:

import {Animal, Human} from "world/alive"

At last you can group all on a file world.tsexporting all others .ts
files:

// world/world.tsexport * from "world/animal"export * from "world/car"export * form "world/human"

You can use dts-bundle to create bundle for world.ts and/or alive.d.ts.

Ok, dts-generator generate bundle for all files in a path, but, like you
said, the problem is filtering ... how to say what to export and what to
don't export? with dts-bundle you can filter writting a .ts file
grouping your exports, as we have done with world.ts and alive.ts.

@siulung4073 https://github.com/siulung4073 Perhaps I don't understand
your question, if you are from Argentina and speak spanish you can send me
a spanish e-mail to tolemac[at]jros.org to clarify this issue.

—
Reply to this email directly or view it on GitHub
#29 (comment)
.

[tolemac]

Ok @siulung4073, I understand you.
I use visual studio and I have lose too much time with problems between node modules and visual studio intellisense.
I think this feature can be implemented, I have to revise the code but I think I can do it.

Thanks for your time explain me the issue.

[tolemac]

I have implemented a "hack", see readme.

[mribichich]

great! seems cool! I'll try it out and let you know
thanks!

[tolemac]

You have to git clone the master branch to test it.

npm install
grunt test

Good luck!

[tolemac]

Close this issue to release 0.4.0 where you can include all files from a path, see "All .d.ts files" section of readme file.

Let me know here if you have problems.

[RicoSuter]

@tolemac, did you manage to generate an angular2.d.ts with all definitions in it? I could create a bundled d.ts file but it is not compiling...

[tolemac]

I suppose the compiler can't find external references as promises, maps, ...
When you generate the .d.ts file, you generate the definitions for angular 2, but ng2 have other references, others dependencies.

Can you post here the compile error messages?

[RicoSuter]

declare module 'angular2/animate' {
    export { Animation } from 'angular2/src/animate/animation';
    export { AnimationBuilder } from 'angular2/src/animate/animation_builder';
    export { BrowserDetails } from 'angular2/src/animate/browser_details';
    export { CssAnimationBuilder } from 'angular2/src/animate/css_animation_builder';
    export { CssAnimationOptions } from 'angular2/src/animate/css_animation_options';
}

Lots of Ambient modules cannot be nested in other modules or namespaces.

[tolemac]

Sorry, this image tell me nothing ...

[RicoSuter]

The problem is, that the imports are still relative:

declare module "angular2/src/compiler/html_parser" {
    import { HtmlAst } from './html_ast';
    import { ParseError, ParseLocation } from './parse_util';
    export class HtmlTreeError extends ParseError {
        elementName: string;
        static create(elementName: string, location: ParseLocation, msg: string): HtmlTreeError;
        constructor(elementName: string, location: ParseLocation, msg: string);
    }
    export class HtmlParseTreeResult {
        rootNodes: HtmlAst[];
        errors: ParseError[];
        constructor(rootNodes: HtmlAst[], errors: ParseError[]);
    }
    export class HtmlParser {
        parse(sourceContent: string, sourceUrl: string): HtmlParseTreeResult;
    }
}

In this sample code, the type ParseError cannot be found...

If you transform the relative imports to absolute module names before bundling, then I think the bundled output would work:

Single d.ts (before bundling)

import { ParseError, ParseLocation } from './parse_util';

Bundled d.ts (after bundling):

import { ParseError, ParseLocation } from 'angular2/src/compiler/parse_util';

Just use the d.ts file path to convert the relative import to an absolute one. Is this possible to implement?

[tolemac]

You don't need to generate .d.ts to use Angular 2 in Visual Studio.
If you want to use Angular 2 in visual studio you have to import ng2 files using "node_modules/angular2/...."

You don't need dts-bundle. You are in the wrong way.