Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

need export relative external module from ambient module decl. #2516

Closed
cmichaelgraham opened this issue Mar 26, 2015 · 11 comments
Closed

need export relative external module from ambient module decl. #2516

cmichaelgraham opened this issue Mar 26, 2015 · 11 comments

Comments

@cmichaelgraham
Copy link

I am trying to facilitate use of TypeScript with ES6-based modular set of github repos. I am struggling with this pattern:

ambient module situation

typescript compiler wont allow export declaration in an ambient external module declaration that references an external module through relative external module name

the repos use systemjs and jspm to resolve aurelia-metadata. i want to use ambient module declarations to expose the types from aurelia-metadata

what i'm trying to achieve is effectively the same as copying the contents of origin.d.ts, resource-type.d.ts, and metadata.d.ts into the ambient module declaration in aurelia.d.ts.

note that ./metadata/index.js basically publishes the public interface through its exports, and that is precisely what i want to expose in the ambient module declaration

@mhegazy
Copy link
Contributor

mhegazy commented Mar 27, 2015

silly question, what is the problem with calling the module "metadata/index" instead of "./metadata/index"?

The problem is given this definition:

declare module "aurelia-metadata" {
     export * from "./metadata/index"
}

that it is not clear were the "./" is relative too. is it relative to the current file (.d.ts) the referencing .ts file? or something else?

@cmichaelgraham
Copy link
Author

will that work if the contents of ./metadata/index.js are as shown above?

(and it has a corresponding .d.ts generated by the compiler)

i was hoping it would be relative to the current file (.d.ts)

@cmichaelgraham
Copy link
Author

i could surrender and manually copy the info from the compiler-generated origin.d.ts, resource-type.d.ts, and metadata.d.ts into the ambient module declaration, but have been trying to find a way to just expose what is exported in index.d.ts, as that is the public api for the module in the repo.

the issue with the manual approach is that there are already 20+ libraries, they will continue to grow, and if updating the api can't be done using the compiler, i will be forever tracking the changes in the repos and updating the api manually.

i believe that the public api for each repo must be an ambient module because the actual path to the corresponding import (aurelia-metadata in this case) is resolved using systemjs loader (the module dependencies are managed using jspm)

@basarat
Copy link
Contributor

basarat commented Mar 30, 2015

Assuming you have origin.d.ts:

declare module 'aurelia/origin' {
    export class Origin {
    }
}

You can import / reexport it as aurelia.d.ts:

/// <reference path="./origin/origin.d.ts"/>
declare module 'aurelia' {
    export * from 'aurelia/origin';
}

Verified from usage:

/// <reference path="./aurelia"/>

import {Origin as Origin1} from "aurelia/origin";
import {Origin as Origin2} from "aurelia";

In short

Tell me exactly the TS you want to write i.e. the Usage and then we can come up with a definition for it. ❤️

@basarat
Copy link
Contributor

basarat commented Mar 30, 2015

@cmichaelgraham
Copy link
Author

i will perform additional validation today, but your guidance made it possible to build the .d.ts files using gulp-typescript and then incorporate the results into ambient module declarations shown here

i am VERY grateful for your help !!! 😄

@cmichaelgraham
Copy link
Author

For any interested parties, here is a public github repo that illustrates the working compiler results. Thanks to @basarat & @mhegazy for the guidance !!

aurelia-ts-port

a spike to attempt to port aurelia code into typescript

The process is to take the ES6 Aurelia source code, maintain a local copy here for comparison when porting across new code changes:
aurelia repo source code

Using the source from above, the next step in the process is to create equivalent, matching typescript source code by copying .js files and renaming them .ts extension, making small edits to make the typescript compiler happy, and as an added bonus, adding typescript type annotations for the public api:
aurelia repo typescript-converted source code

The (gulp-based) build process then compiles the typescript aurelia source code, creating the .d.ts files that consist of only the type definitions. In addition, the .js files in ES6 format are created also. These files can hopefully be used by babel compiler to produce ES6 modules in register format.
build output

clone and build

  1. clone this repo
  2. run git bash shell, change to the main folder
  3. change to aurelia-ts folder
  4. run npm install
  5. change to node_modules/typescript folder
  6. run npm install
  7. run npm install -g jake (if you haven't already)
  8. run jake local
  9. run jake LKG
  10. change back to aurelia-ts folder
  11. run gulp build

you should now see folders in the output-gulp folder. each of these folders should contain .d.ts and .js files from the build.

process steps - to add aurelia repos (or add new files):

  1. run ./get-latest.sh

    this is a git bash script to help keep the aurelia-latest up to date

    1. clones aurelia repos into aurelia-latest-repos
    2. copies src folder from each repo into corresponding folder in aurelia-latest
  2. manually copy .js files from aurelia-latest into aurelia-ts (rename each to .ts)

  3. update gulpfile.js

  4. if it is a new repo, add the .d.ts file in output-gulp

@mhegazy
Copy link
Contributor

mhegazy commented Mar 31, 2015

thanks @cmichaelgraham for sharing. I would be interested to know how did the conversion process go? what are the issues you ran into?

@cmichaelgraham
Copy link
Author

I struggled a bit figuring out the right combination of files and configuration settings. The TypeScript 1.5 compiler is beautiful, in my opinion. The ES6 code syntax ports over very well. It would also probably be helpful to have some guidance on what .d.ts files provide with the TypeScript repo should be used in various situations. Some sort of mapping from types to .d.ts files. I had some issues figuring out where ES6 Promises might be defined.

Overall, this is right on target.

I do think some tooling would be useful - if I could say: "generate an ambient .d.ts file for metadata/index", for example, and it would round up the types an place them in a single ambient module definition (including comments). Right now it is spread out over several .d.ts files, but it does work as is.

@mhegazy
Copy link
Contributor

mhegazy commented Mar 31, 2015

thanks @cmichaelgraham for the feedback. i have created issue #2568 to track the single declaration file generation.

@basarat
Copy link
Contributor

basarat commented Apr 20, 2015

@cmichaelgraham FWIW atom-typescript now has integrated dts-generator and all it needs is the path to your package.json. It takes care of the rest for your automatically : #2829

Both exporting and importing should just work ™️ .

@microsoft microsoft locked and limited conversation to collaborators Jun 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants