Add TypeScript Definition

[Gi972]

Hello,

Good Tool, can you add a TypeScript Definition for use with *.tsx files.

Thanks

Gi

[tomitrescak]

Is this what you are after? @arunoda you can maybe add it? Or do you want a PR?

declare var module: any;

declare module "@kadira/storybook" {
  interface Story {
      add (storyName: string, callback: Function): Story;
  }

  export function storiesOf(name: string, module: any): Story;
  export function action(name: string): void;
}

[tomitrescak]

You also need to extend your definition of webpack.config.js to following. @arunoda, resolving jsx should be supported by default in my opinion.

const path = require('path');
module.exports = {
  module: {
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        query: { presets: ['react', 'es2015', 'stage-2'] },
        exclude: [path.resolve('./node_modules'), path.resolve(__dirname, 'node_modules')],
        include: [path.resolve('./'), __dirname],
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
};

[tomitrescak]

Hmm, resolving does not seem to work .. not sure why .. the jsx files are not resolved ;(

[arunoda]

@tomitrescak I am not good with TS, yes send me a PR.
Also add .configure() method as a definition.

BTW, how TS and .jsx extentions are related?

[tomitrescak]

tsx are compiled into jsx in some configurations (e.g. mine). I am not using typescript loaders or typescript compiler in Meteor, but am compiling TS files into JS. This is faster and more controllable.

[arunoda]

Okay. got it.
I took the jsx PR and now in master.
Will do a release in few hours.

[arunoda]

BTW: could you work on the TS definition file. Not sure where to add it.

[Gi972]

Thanks guys!

The best place for typescript definition is on the definitelytyped site.
http://definitelytyped.org/

it's a catalogue for typescript definition.

[tomitrescak]

@Gi972 I submitted a pull request, yet they need to include a test file with it as well. And I have noo idea what to put in those tests. Have you done a PR there before?

I also have a full d.t.s definition for Mantra ready, which I'm using personally and I can share it .. yet again .. no idea what tests should be there.

[tomitrescak]

Another problem is that storybook does not have a npmjs page, therefore it is not recognised by the DT CI workflow.

[arunoda]

We have a NPM page.
See: https://www.npmjs.com/package/@kadira/storybook/

[tomitrescak]

Yea, I know, but the silly CI scrip only check for high level npmjs addresses such as https://www.npmjs.com/package/storybook/

[Gi972]

hello Tomitrescak , I never make PR before, I don't know how it works.
For the test , I think you have already tcheck it : http://definitelytyped.org/guides/contributing.html#tests

It's right, I never saw the npm module name like @username/module-npm-Name I think it's not very conventional.
Does you think rename it like it: https://www.npmjs/package/storybook after @arunoda ?
It will better for the future not for only this case.

[arunoda]

@Gi972 yes it not. That's something NPM introduce recently. This is very important because of the recent NPM related issues.

If that user have used a scoped package, there may not such an issue.

[camwest]

Definitely Typed is deprecated in favour of https://github.com/typings/typings. It's much easier to add to.

[tomitrescak]

Great catch! I'll add it as soon as I'll have a bit of time.

[tomitrescak]

@camwest I simply do not have the time. Yet, @arunoda, if you make the typings part of your package (above), it can be easily added to the typings repository.

[arunoda]

@tomitrescak You mean, use typescript?

[tomitrescak]

No, making the typescript definition as a part of the package and including it in package.json:

// file lib/typings.d.ts
declare var module: any;

declare module "@kadira/storybook" {
  interface Story {
      add (storyName: string, callback: Function): Story;
  }

  export function storiesOf(name: string, module: any): Story;
  export function action(name: string): void;
}

and in package.json

"typings": "./lib/typings.d.ts"

More info ... http://www.typescriptlang.org/docs/handbook/typings-for-npm-packages.html

Do you want a PR for this?

[arunoda]

@tomitrescak Why not. Send me a PR.

[arunoda]

@tomitrescak This is merged and released with v1.20.0. What else do we need to have to do?

[tomitrescak]

All you need to do is enjoy the smiles of Typescript developers that will love you for this;) and occasionally update the typing when API changes. If you'll need help, just ping me. Thanks!

[tomitrescak]

And you can close this now. Thanks!

[arunoda]

Thanks @tomitrescak.
I think I can update the def file with API changes :)

[Gi972]

@tomitrescak @arunoda
Guys thanks a lot for your time

;-)