Typescript definitions needed

[baststar]

Hi. I'm using the angular-cli ( with currently Angular 2 RC6, webpack) and want to use superlogin with it. I created a little definition for this package and i hope it helps someone who has the same issues with the definitions as me ;)

In Angular2App/src/typings.d.ts add this:

declare var superlogin: sc.Superlogin;

declare module "superlogin-client" {
    var Superlogin: sc.Superlogin;
    export default Superlogin;
}

declare module sc {
    interface Superlogin {
        login(credentials: any): any;
        configure(config: any): void;
    }
} 

then, for example, in your user.service.ts:

import { Injectable } from '@angular/core';
import superlogin from "superlogin-client";

@Injectable()
export class UserService {

  private superloginconfig = {
    baseUrl: "http://ip:port/auth/",
    endpoints: ["ip:port"],
    noDefaultEndpoint: false,
    storage: "local",
    providers: [],
    checkExpired: "stateChange",
    refreshThreshold: 0.5
  };

  constructor() {
    superlogin.configure(this.superloginconfig);
  }

  login(): void {
    superlogin.login({
      username: "username",
      password: "password"
    }).then((response: any) => {
      console.log(response);
    }).catch((error) => {
      console.log(error);
    });
  }
}

[micky2be]

This doesn't seem to be specific to Angular 2 but more to Typescript. If necessary I could make a declaration file such as the following:

declare module 'superlogin-client' {
    interface Http {
        post(path: string, data: any): Promise<any>;
        get(path: string): Promise<any>;
    }

    type loginType = { username: string, password: string };
    type registerType = { username: string, password: string, confirmPassword: string };
    type resetType = { password: string, confirmPassword: string, token: string };

    interface SuperLoginClient extends NodeJS.EventEmitter {
        getHttp(): Http;
        validateSession();
        configure(options: any);
        login(loginType);
        logout();
        socialAuth(social: string);
        register(registerType);
        setSession(session: any);
        forgotPassword(email: string);
        resetPassword(resetType);
    }

    var client: SuperLoginClient;
    export default client;
}

Not sure what I can do for Axios (getHttp) since it's a dependency and I'm not writing my code in Typescript.

[micky2be]

I'm not particularly good with Typescript. If someone could tackle down this one to be able to include the definition file with the module that would be great,

[baststar]

Found something: http://www.erikschierboom.com/2015/11/04/building-a-javascript-library-part-6-typescript/

see "Including the declaration file" Typescript-Compiler will automatically fetch the declaration-file

...
  "main": "lib/index.js",
  "typings": "lib/typings.d.ts",
  "maintainers": [
...

and then in typings.d.ts your typedefinition

with a short test it worked for me with a fresh angular-cli-project and "ng test"

``` #ng new typingstest --style=sass #cd typingstest #npm install superlogin-client --save - added typings.d.ts in your /lib/ - added "typings": "lib/typings.d.ts" to package.json in node_modules/superlogin-client/ #ng generate component login #ng test //////// login.component.ts import { Component, OnInit } from '@angular/core'; import superlogin from 'superlogin-client'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.sass'] }) export class LoginComponent implements OnInit { constructor() { superlogin.configure({}); } ngOnInit() { } } //////// typings.d.ts declare module 'superlogin-client' { interface Http { post(path: string, data: any): Promise; get(path: string): Promise; } type loginType = { username: string, password: string }; type registerType = { username: string, password: string, confirmPassword: string }; type resetType = { password: string, confirmPassword: string, token: string }; interface SuperLoginClient extends NodeJS.EventEmitter { getHttp(): Http; validateSession(); configure(options: any): void; // works! // configure(options: string): void; // test throws error: Argument of type '{}' is not assignable to parameter of type 'string'. login(loginType); logout(); socialAuth(social: string); register(registerType); setSession(session: any); forgotPassword(email: string); resetPassword(resetType); } var client: SuperLoginClient; export default client; } ```

[micky2be]

I know that part. What I need is to write the definition file with external references.

[baststar]

something here mentioned? https://github.com/Microsoft/TypeScript/issues/7352

[micky2be]

I'm quite busy at the moment, if you could have a try yourself to would be very helpful.

[micky2be]

Hey @baststar, I finally spent some time on it. If you could test the code on the following branch https://github.com/micky2be/superlogin-client/tree/typescript And confirm it's working properly I will do a release right after.

[baststar]

Nice! Yeah i will test it this weekend! :-)

[dhndeveloper]

Trying to do this as well. Thanks!

[dhndeveloper]

To test this out do I just download the files from https://github.com/micky2be/superlogin-client/tree/typescript and put in my node_modules then run npm install?

Then use this: import superlogin from 'superlogin-client';

Thats what I'm trying and I'm getting this error:

` Error: Could not resolve 'superlogin-client'

`

I'm using Ionic RC0 but it should work the same as the latest Angular RC

[baststar]

npm install https://github.com/micky2be/superlogin-client.git#typescript but same error right now

[dhndeveloper]

Thanks! Just tried that but still getting "Error: Could not resolve 'superlogin-client' "

[baststar]

i see, the lib-folder is missing in node_modules/superlogin-client/lib with the lib-folder, it works! (angular2) nice Micky!

[dhndeveloper]

Thats awesome! It looks like I'm getting closer but now I have this error:

SyntaxError: Unexpected token (55:4) in /Users/Dan/Documents/WebProjects/vacayerV3/node_modules/axios/lib/axios.js

import superlogin from 'superlogin-client';

constructor(public http: Http, private platform: Platform) {

var config = {
  // The base URL for the SuperLogin routes with leading and trailing slashes (defaults to '/auth/')
  baseUrl: '/auth/',
  // A list of API endpoints to automatically add the Authorization header to
  // By default the host the browser is pointed to will be added automatically
  endpoints: ['api.example.com'],
  // Set this to true if you do not want the URL bar host automatically added to the list
  noDefaultEndpoint: false,
  // Where to save your session token: localStorage ('local') or sessionStorage ('session'), default: 'local'
  storage: 'local',
  // The authentication providers that are supported by your SuperLogin host
  providers: ['facebook', 'twitter'],
  // Sets when to check if the session is expired. 'stateChange', 'startup' or nothing.
  // 'stateChange' checks every time $stateChangeStart or $routeChangeStart is fired
  // 'startup' checks just on app startup. If this is blank it will never check.
  checkExpired: 'stateChange',
  // A float that determines the percentage of a session duration, after which SuperLogin will automatically refresh the
  // token. For example if a token was issued at 1pm and expires at 2pm, and the threshold is 0.5, the token will
  // automatically refresh after 1:30pm. When authenticated, the token expiration is automatically checked on every
  // request. You can do this manually by calling superlogin.checkRefresh(). Default: 0.5
  refreshThreshold: 0.5
};

  superlogin.configure(config);

}

[baststar]

maybe a problem with angulars http and axios http? but i dont know. maybe remove the axios-dependencies in the definition-file or remove it from the contructor, just for testing

[dhndeveloper]

May be...

I commented out import axios from 'axios' and //this._http = axios.create()

It builds out but now I'm getting other errors like:

Uncaught TypeError: Cannot read property 'request' of undefined

which is on this:

this._http.interceptors.reqest

I know that has to do with commenting out axios...

Ionic also uses RollUp js now in the new RC... not sure if that has something to do with it.

[micky2be]

My bad, you need the transpiled version. After npm install go to its folder and run npm run compile.

I'll publish soon anyway as it's working fine on one of my projects.

[micky2be]

You need Axios. It's a dependency of Sulerlogin-client

[dhndeveloper]

Yup understand. Hopefully the new version will work. Thanks!

[micky2be]

Would be interesting to see what's happening here:

SyntaxError: Unexpected token (55:4) in /Users/Dan/Documents/WebProjects/vacayerV3/node_modules/axios/lib/axios.js

[micky2be]

How did you install superlogin-client? Are you sure you have the latest version with its dependencies?

[micky2be]

I published a beta version. Could you try installing the version 0.4.0 please

[dhndeveloper]

I just ran npm uninstall superlogin-client then npm install superlogin-client@0.4.0 --save (also tried without --save)

Looks like it installed correctly. Pretty sure I'm using the latest versions of the dependencies:

"dependencies": { "axios": "^0.14.0", "debug": "~2.2.0", "eventemitter2": "^2.1.3" },

I'm still getting that same axios error. I'm not sure how to debug that error. The axios/lib/axios.js file only has 46 lines so it must be happening when compiling?

Here is the full error:

[23:05:35] SyntaxError: Unexpected token (55:4) in /Users/Dan/Documents/WebProjects/vacayerV3/node_modules/axios/lib/axios.js at Parser.pp$4.raise (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:4072:13) at Parser.pp.unexpected (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:2270:8) at Parser.pp$2.parseBindingAtom (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:3175:10) at Parser.pp$1.parseVarId (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:2745:18) at Parser.pp$1.parseVar (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:2728:12) at Parser.pp$1.parseVarStatement (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:2613:8) at Parser.pp$1.parseStatement (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:2398:17) at Parser.pp$1.parseTopLevel (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:2315:23) at Parser.parse (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:2182:15) at parse (/Users/Dan/Documents/WebProjects/vacayerV3/node_modules/rollup/dist/rollup.js:4972:37)

[micky2be]

It's fine using es6, or reactjs. Not sure what Angularjs is doing. You might need to check with Axios people.

[micky2be]

Did you try to open the file /node_modules/axios/lib/axios.js to see what's in there?

Could you also try to set your Chrome debugger to pause on exemptions. It will help you to understand where it breaks.

[dhndeveloper]

I'm using Ionic 2 RC0 so it won't complete the build with this error.

This is whats in /node_modules/axios/lib/axios.js

` 'use strict';

var utils = require('./utils'); var bind = require('./helpers/bind'); var Axios = require('./core/Axios');

/**

• Create an instance of Axios *
• @param {Object} defaultConfig The default config for the instance

• @return {Axios} A new instance of Axios */ function createInstance(defaultConfig) { var context = new Axios(defaultConfig); var instance = bind(Axios.prototype.request, context);

  // Copy axios.prototype to instance utils.extend(instance, Axios.prototype, context);

  // Copy context to instance utils.extend(instance, context);

  return instance; }

// Create the default instance to be exported var axios = createInstance();

// Expose Axios class to allow class inheritance axios.Axios = Axios;

// Factory for creating new instances axios.create = function create(defaultConfig) { return createInstance(defaultConfig); };

// Expose all/spread axios.all = function all(promises) { return Promise.all(promises); }; axios.spread = require('./helpers/spread');

module.exports = axios;

// Allow use of default import syntax in TypeScript module.exports.default = axios;

`

[dhndeveloper]

Can I connect this issue to the axios guys or do I open a separate issue there?

[micky2be]

If not Axios it could be a problem the way your app is configured with Angular2.

If changes need to be done in superlogin-client I'll gladly accept a pull request. But for now, I'm afraid there is not much I can do.

[dhndeveloper]

I understand. What's the best practice to open the issue with them and see what they think?

[micky2be]

Closing since it seems to be an issue with Rollup. I have to do some small changes on the current beta, I'll publish it asap after.