Support of arrow functions and methods

Arrow functions which have been introduced in typescript following ES6 standard (also known as ES2015) are supported. Since arrow functions are equivalent to standard functions, the same function objects are created by the analyzer for both standard functions and arrow functions. Arrow functions can also define methods in which case method objects are created by the analyzer. Examples of arrow functions and methods are provided in the Objects section of this documentation.

Support of anonymous functions

For anonymous functions, the analyzer creates function objects named <Anonymous$i> where $i is incremented such that each anonymous function object has a unique fullname.

Web Services

XMLHttpRequest

The analysis of the following code will create a TypeScript GET http service named "foo/url" and a callLink between my_func function and that service :

 Image Modified

fetch

The analysis of the following code will create a TypeScript POST http service named "foo/url" and a callLink between my_func function and that service :

function my_func(){
  const response = await fetch('foo/path', {
    method: 'POST'
  })
}

Web Services

Angular web services are supported for both the older Http and new HttpClient (Angular ≥4.3) libraries. The method calls get, post, put, delete, jsonp, and request are recognized.

import { HttpClient } from '@angular/common/http';

// web-service_GET.ts
 
export class ExampleService {

  constructor(private http: HttpClient) { }
  getData() {
    const url = "http://httpbin.org/get";
    return this.http.get(url);
  }
}

The results of this code snippet are shown below.:

Finally the use of the rxjs/ajax API as web service call is also supported. The different types of web services (GET, POST, PUT, DELELTEDELETE) are represented with the same Angular objects we have used above, despite they are not restricted to the Angular framework.

Angular components and HTML fragments

In addition to the basic TypeScript objects the analyzer will generate specific objects and links for the Angular framework. In the following example, the analyser analyzer creates a TypeScript module object associated to with the file and a TypeScript class object associated to with the decorated class MyComponent. Angular components objects are created when finding special class decorators with the name Component. The view of Angular components is described in HTML language and the associated code can be either found in an external .html file or embedded in the decorator metadata. 

// example.ts
 
@Component({
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class MyComponent {
}

For embedded data, the analyzer creates an HTML5 HTML Fragment belonging to the component, and will automatically generate a use (U) link between the Component and the HTML fragment:

The generation of these links is necessary to describe the higher level call flow abstracted in the Angular framework and thus to retrieve transactions.

Environment variables

In our analysis, we consider a production deployment scenario. Thus we mimic the behavior of Angular when overloading behind-the-scenes the variables declared inside the exported environment dictionary defined in environment.ts  by those defined in environment.prod.ts. Global variables might be used to connect different technology layers (via URLs for example), thus retrieving them correctly can be critical for full transactions. Latest The latest versions of Angular allows allow using many different production files. We only support a single production environment file, the standard environment.prod.ts. When using a no-production environment file a warning message will be logged.

// environment.ts
export const environment = { 
  production: false,
  urls = { .... }   // urls used for development
};

// environment.prod.ts
export const environment = { 
  production: true,
  urls = { .... }   // production urls
};

Known limitations

• Connectivity between components through Angular routing is not supported.
• Use of HttpRequest in Angular is not supported

ReactJS Application

This declaration will create a ReactJS application named App:

ReactDOM.render(
  <AppContainer>
    <Provider store={store}>
      <App version={appVersion} />
    </Provider>
  </AppContainer>,
  appElement
);

ReactJS Component

This declaration will create a ReactJS component named Sequence because the class inherits from Component (a class that inherits from PureComponent would also induce the creation of a ReactJS component). A component must contain a render method. The render method is automatically called when the component is referred to in an HTML fragment:

import React, { Component } from 'react';
 
 class Sequence extends Component {
 
  shouldComponentUpdate(nextProps) {
    return this.props.positionFrom !== nextProps.positionFrom ||
      this.props.sequence !== nextProps.sequence ||
      this.props.nucleotidesPerRow !== nextProps.nucleotidesPerRow ||
      this.props.rowHeight !== nextProps.rowHeight;
  }
 
  render() {
    return (
      <g>
        {this.props.sequence.map((nucleotide, index) =>
          <Nucleotide
            type={nucleotide}
            position={this.props.positionFrom + index}
           <Field name="firstName" component="input" type="text" />key={index}
        </div>    index={index}
  <div>         <label htmlFor="lastName">Last Name</label>onClick={this.props.onNucleotideClick}
         <Field name="lastName" component="input" type="text" /> {...this.props}
       </div>   />,
   <div>     )}
   <label htmlFor="email">Email</label>  </g>
    );
 <Field name="email" component="input" type="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  )
}

ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact'
})(ContactForm)

HTML fragment

This declaration will create a HTML fragment named render_fragment_1 starting with "<g>" and ending with "</g>". There can be several fragments in any function/method:

render() {
  return (
    <g>
      {this.props.sequence.map((nucleotide, index) =>
}
}

ReactJS Form

This declaration will create a ReactJS form named contact:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

let ContactForm = props => {
  const { handleSubmit } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      <div>
<Nucleotide        <label htmlFor="lastName">Last  type={nucleotide}Name</label>
        <Field name="lastName" component="input" position={this.props.positionFrom + index}type="text" />
      </div>
     key={index} <div>
        <label index={index}htmlFor="email">Email</label>
        <Field name="email" onClick={this.props.onNucleotideClick}
 component="input" type="email" />
      </div>
 {...this.props}     <button type="submit">Submit</button>
  />,
  </form>
  )
}

ContactForm = reduxForm({
  // a unique )}name for the form
 </g> form: 'contact'
})(ContactForm);
}

Links

Links from the ReactJS application

HTML fragment

Please remember that components are called mainly from html fragments, and render methods are implicitly called from ReactJS components.

Image Removed

Links from a HTML fragment

HTML tags present in HTML fragments are linked to ReactJS components if they exist:

It is possible to developp custom node packages. Apackageis a file or a directory that is described by apackage.jsonfile.

An application can combine mutliple packages. The packages can be built together using npm. npm adds these packages to a node_mudules directory. Note that the analyzer will skip everything which is inside a node_modules directory. Users should provide their custom packages at the root of the analyzed source code.

Let's consider a package named my_proj. The root dir contains a package.json file which defines the project name.

{ "name": "@myprojname"
}

Everything which is exported (or re-exported) from the my_proj/src/index.ts can be imported from any project which uses this package. 

export function my_func(){
}

For instance when an other package uses this package, it can import the my_func function using the name of the package for the import:

import {my_func} from '@myprojname'


function other_func(){
  my_func()	
}

When analyzing these source code, a callLink will be created between other_func and my_func:

Image Added

When analyzing the following source code, an email object is created with a callLink from the my_send_mail function

import * as nodemailer from 'nodemailer';

async function my_send_mail() {
  let transporter = nodemailer.createTransport({
    //...
  });

  // send mail with defined transport object
  let info = await transporter.sendMail({
    from: '"Fred Foo" <foo@example.com>', // sender address
    to: "bar@example.com, baz@example.com", // list of receivers
    //...
  });
}

Image Added

Similarly when analyzing the following source code, an email object is created with a callLink from the my_send_mail function:

const sgMail = require('@sendgrid/mail');

function my_send_mail(msg){
  sgMail
   .send(msg)
}

Image Added

This extension currently supports the use of these modules for http requests from the client-side only (i.e. the use of these modules as server is not yet supported).

The analysis of the previous code will generate Node.js Get HttpRequest service object which is called by my_request function. A link between my_request function and the anonymous handler function is also added. 

import * as https from "https"

function my_request(){
  https.get('https://encrypted.google.com/', (res) => {
    console.log('statusCode:', res.statusCode);
    console.log('headers:', res.headers);
}

Image Added

Nest (NestJS) is a framework for building Node.js server-side applications. Nest provides a level of abstraction above many common Node.js frameworks. The following features provided by nestjs are supported.

Controllers

A controller's purpose is to receive specific requests for the application. A controller is defined using a classe@ and decorators.

The analysis of the following code will create a Node.js Get Operation named cats/all/ with a call link from the operation to the handler method findAll. The URL corresponds to the concatenation of the argument of the @Controller decorator with that of the @Get decorator of the method. The decorator of each method defines the type of the operation

import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Get('/all')
  findAll(): string {
    return 'This action returns all cats';
  }}

Image Added

Middlewares

Middleware is a function that is called before the route handler. For instance, in the following source code, the logger function will be called before each handler of the CatsController. Our analyzer will create a callLink between the operations defined in the CatsController and the logger.

import { Module, NestModule, MiddlewareConsumer } from '@nestjs/common';
export function logger(req: Request, res: Response, next: Function) {
  console.log(`Request...`);
  next();
};

@Module({
  imports: [CatsModule],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer
      .apply(logger)
      .forRoutes(CatsController);
  }
}

Image Added

HTTP module

Nestjs allows performing http requests using the HTTP module. The analysis of the following source code will create a Node.js Get HttpRequest named foo/path/ with a call link from the findAll method to that request:

import { HttpService, Injectable, Logger } from '@nestjs/common';

@Injectable()
export class CatsService {
  constructor(private httpService: HttpService) {}

  findAll(): Observable<AxiosResponse<Cat[]>> {
    return this.httpService.get('foo/path');
  }
}

Image Added

Known limitations

All nestjs features which are not documented here are not supported. 

The analysis of the following code will create a Node.js Get Operation named /login/{} with a call link from the operation to the handler function f:

import * as Sequelizefastify from 'sequelizefastify';

const Model = Sequelize.Model;
class User extends Model {}
User.init({
  // attributes
  firstName: {
    type: Sequelize.STRING,
    allowNull: false
  },
  lastName: {
    type: Sequelize.STRING
    // allowNull defaults to true
  }
}, {
  sequelize,
  modelName: 'user'
  tableName: 'users'
  // options
});
function myfind(){
	User.findAll().then(users => {
  	console.log("All users:", JSON.stringify(users, null, 4));
	});
}

the User class defines a model which is linked with the table named 'users' (through the User.init() call). The name of the table is defined by the tableName value which if not defined is set to the pluralized (if freezeTableName is not set to true) value of modelName which is itself set to the class name when it is not explicitly defined. The User.findAll() call then selects elements from that table 'users'.

In this example, this extension creates a useSelect link to the table 'users':

Image Removed

Note that a model can also be defined using method sequelize.define().

The analysis of the following code will create a Node.js Post HttpRequest named foo/post/ with a call link from my_func to that request:

import * as rp from 'request-promise-native'

function my_post(){
  var options = {
    method: 'POST',
    uri: 'foo/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
  };
 
  rp(options)
    .then(function (parsedBody) {
        // POST succeeded...
    })
    .catch(function (err) {
        // POST failed...
    });
}

Image Added

The analysis of the following code will create a Node.js Put HttpRequest named foo/put/ with a call link from my_func to that request:

import * as axios from 'axios';

function my_func(){
  axios('foo/put', {method:'put'})

     .then(function (response) {
       // handle success
       console.log(response);
     })
}

Image Added

In the following code: 

import * as Sequelize from 'sequelize';

const Model = Sequelize.Model;
class User extends Model {}
User.init({
  // attributes
  firstName: {
    type: Sequelize.STRING,
    allowNull: false
  },
  lastName: {
    type: Sequelize.STRING
    // allowNull defaults to true
  }
}, {
  sequelize,
  modelName: 'user'
  tableName: 'users'
  // options
});
function myfind(){
	User.findAll().then(users => {
  	console.log("All users:", JSON.stringify(users, null, 4));
	});
}

the User class defines a model which is linked with the table named 'users' (through the User.init() call). The name of the table is defined by the tableName value which if not defined is set to the pluralized (if freezeTableName is not set to true) value of modelName which is itself set to the class name when it is not explicitly defined. The User.findAll() call then selects elements from that table 'users'.

In this example, this extension creates a useSelect link to the table 'users':

Image Added

Note that a model can also be defined using method sequelize.define().

Connection

TypeORM can be used both with SQL and NoSQL databases. The database type is set through the connection option type : 

import {createConnection, Connection} from "typeorm";
import
{User}const from "./user";

function update_user()connection = await createConnection({
    const userRepository = getRepository(User);type: "mysql",
    host: "localhost",
 const user = await userRepository.findOne(1);port: 3306,
    user.name = "fooname";username: "test",
    await userRepository.save(user);
}

• The userRepository.findOne(1) method call generates a "useSelectLink" to the User table/entity.
• The userRepository.save(user) method call  generates a "useUpdateLink" to the User table/entity.

Example for a mongodb database: both useSelect and useUpdate links are created between the update_user function and the User entity which belongs to the <Default> connection:

Image Removed

Example for a sql database: both useSelect and useUpdate links are created between the update_user function and the user table. 

Image Removed

Cascades

Cascades are supported.
In the following example, the User entity has its column profile with a one-to-one relation with the Profile entity and cascade set to true:

password: "test",
    database: "test"
});

The only NoSQL database which is supported by TypeORM is mongodb. A connection object is created by our analyzer only for mongodb databases. The name of the connection is the URL mongodb://localhost/test which is constructed using the host and database values.

An Entity is a class that maps to a database table (or collection when using MongoDB):

import {Entity, PrimaryGeneratedColumn, Column, OneToOne, JoinColumn} from "typeorm";
import
{Profile} from "./profile";

@Entity()
export class User {

    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    namefirstName: string;

    @OneToOne@Column(type => Profile, {)
         cascadelastName: true
  string;

})     @JoinColumn@Column()
    profileisActive: Profileboolean;

}

When the profile column of a user instance is saved, if the profile column of that instance was updated with a profile instance, that profile instance is also saved.

In 1.3.x, MongoDB Connection and MongoDB Collection objects were added to Typescript Module objects and when a connection (or a collection) is accessed using Mongoose from several files, the analyzer was creating one connection (or collection) object per such file.
In versions >=1.4.x. In such case, there would be "deleted objects" during the migration.

Behavior explanation

Lambda services allow executing some source code on the cloud and define when this source code should be executed. 

Lambda functions can be deployed using several deployment frameworks. The supported deployment frameworks are listed on this page.

When a lambda function is created and its runtime is nodejs, the current extension is responsible for linking the lambda objects and their triggers with the TypeScript handler functions.

Example

Let us consider a source code defining a lambda function that has two triggers: an SQS queue and an API Gateway. The lambda function has a nodejs runtime and the handler function is given by the handler function fullname. 

If the lambda function is deployed using a supported deployment framework (such as CloudConfiguration), the analysis will create a lambda function, an SQS receiver, and an API Gateway objects. Each of these objects has a runtime property (nodejs) and a handler property with the function fullname. 

If the current extension finds a TypeScript method matching the handler fullname a link to that TypeScript method will be added from the lambda function, the SQS queue and the API Gateway objects:

Click to enlarge

Image Added

Links

Code samples

This code will create an S3 Bucket named "MyBucket" on an AWS server in region "REGION" and puts an object in it

// Load the AWS SDK for Node.js
var AWS = require('aws-sdk');
// Set the region 
AWS.config.update({region: 'REGION'});

// Create S3 service object
s3 = new AWS.S3({apiVersion: '2006-03-01'});

// Create the parameters for calling createBucket
var bucketParams = {
  Bucket : "MyBucket",
  ACL : 'public-read'
};

// call S3 to create the bucket
s3.createBucket(bucketParams, function(err, data) {
  if (err) {
    console.log("Error", err);
  } else {
    console.log("Success", data.Location);
  }
});

params = {
	// ...
    Bucket: "MyBucket"
};
s3.putObject(params, function(err, data) {
    if (err) console.log(err, err.stack); // an error occurred
    else     console.log(data);           // successful response
});

What results can you expect?

Once the analysis/snapshot generation has completed, you can view the results in the normal manner (for example via CAST Enlighten):

Image Added

Analysis of the code sample

Links

Support for SDK

This code will publish a message into the "SQS_QUEUE_URL" queue:

import * as AWS from "aws-sdk";
AWS.config.update({ region: 'REGION' });

const sqs = new AWS.SQS({apiVersion: '2012-11-05'});

const queueUrl = "SQS_QUEUE_URL"

const params = {
	MessageBody: "This is a message",
    QueueUrl: queueUrl,
    MaxNumberOfMessages: 1,
    VisibilityTimeout: 0,
};


sqs.sendMessage(params, function (err, data) {
    if (err) {
        console.log("Error", err);
    } else {
        console.log("Success", data.MessageId);
    }
});
}

This code will receive a message from the queue "SQS_QUEUE_URL"

import * as AWS from "aws-sdk";
AWS.config.update({ region: 'REGION' });

const sqs = new AWS.SQS({apiVersion: '2012-11-05'});

const queueUrl = "SQS_QUEUE_URL"

const params = {
    QueueUrl: queueUrl,
    MaxNumberOfMessages: 1,
    VisibilityTimeout: 0,
};

export class SqsReciver {
    constructor() {
        this.reciver();
    }
    private reciver(): void {
        sqs.receiveMessage(params, (err, data) => {
	// do something
        });
    }
}

What results can you expect?

Once the analysis/snapshot generation has been completed, you can view the results in the standard manner (for example via CAST Enlighten):

Click to enlarge

Image Added

When the evaluation of the queue name fails, a Node.js AWS SQS Unknown Publisher (or Receiver) will be created.

aws-xray encapsulates AWS methods calls in order to provide status and load status. However, the encapsulation did not allow the extension to provide objects and links. With the support of AWS XRay starting in 2.6.0-beta4, these objects and links will be created.

Code samples

This code will encapsulate AWS SDK then create a dynamoDB instance, and a Table instance.

import AWSXRay from 'aws-xray-sdk-core'
import AWS from 'aws-sdk'
const AWS = AWSXRay.captureAWS(AWS) // Encapsulate AWS SDK
const DDB = new AWS.DynamoDB({ apiVersion: "2012-10-08" }) // use AWS as usual
const { v1: uuidv1 } = require('uuid');
 
// environment variables
const { TABLE_NAME, ENDPOINT_OVERRIDE, REGION } = process.env
const options = { region: REGION }
AWS.config.update({ region: REGION })
 
if (ENDPOINT_OVERRIDE !== "") {
    options.endpoint = ENDPOINT_OVERRIDE
}
 
const docClient = new AWS.DynamoDB.DocumentClient(options)
// response helper
const response = (statusCode, body, additionalHeaders) => ({
    statusCode,
    body: JSON.stringify(body),
    headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', ...additionalHeaders },
})
 

 
function addRecord(event) {
 
    let usernameField = {
        "cognito-username": getCognitoUsername(event)
    }
 
    // auto generated date fields
    let d = new Date()
    let dISO = d.toISOString()
    let auto_fields = {
        console.log("Successid": uuidv1(),
data.MessageId);      } }); }

This code will receive a message from the queue "SQS_QUEUE_URL"

import * as AWS from "aws-sdk";
AWS.config.update({ region: 'REGION' });

const sqs = new AWS.SQS({apiVersion: '2012-11-05'});

const queueUrl = "SQS_QUEUE_URL"

const params = {
    QueueUrl: queueUrl,
    MaxNumberOfMessages: 1,
    VisibilityTimeout: 0,
};

export class SqsReciver {
    constructor() {
        this.reciver();
    }
    private reciver(): void {
        sqs.receiveMessage(params, (err, data) => {
	// do something
        });
    }
}"creation_date": dISO,
        "lastupdate_date": dISO
    }
 
    //merge the json objects
    let item_body = {...usernameField, ...auto_fields, ...JSON.parse(event.body) }
 
    console.log(item_body);
     
    //final params to DynamoDB
    const params = {
        TableName: TABLE_NAME,
        Item: item_body
    }
 
    return docClient.put(params)
}
 

What results can you expect?

Once the analysis/snapshot generation has been completed, you can view the results in the normal manner with your favorite tool (for example via CAST Enlighten):

Click to enlarge

Image RemovedImage Added

When the evaluation of the queue name fails, a Node.js AWS SQS Unknown Publisher (or Receiver) will be created.Analysis of the code sample