From f61a57b9ee3376fa4da13281929d4a96799a5310 Mon Sep 17 00:00:00 2001 From: andrewmcgivery Date: Mon, 4 Apr 2016 10:30:55 -0400 Subject: [PATCH] Typescript generators * @Inject to parameters() Changed injection of Http to use parameters() instead of @Inject * import map operator Added import of map operator from rxjs * Typescript Generator Support Support for typescript generators * Tabs -> spaces * Changes From Tim's Feedback --- tooling/generator.js | 11 ++++++ .../generators/component/component.tmpl.ts | 19 +++++++++ .../generators/directive/directive.tmpl.ts | 16 ++++++++ tooling/generators/page/page.tmpl.ts | 16 ++++++++ tooling/generators/pipe/pipe.tmpl.ts | 21 ++++++++++ tooling/generators/provider/provider.tmpl.js | 9 ++++- tooling/generators/provider/provider.tmpl.ts | 39 +++++++++++++++++++ tooling/generators/tabs/tabs.tmpl.ts | 15 +++++++ 8 files changed, 144 insertions(+), 2 deletions(-) create mode 100644 tooling/generators/component/component.tmpl.ts create mode 100644 tooling/generators/directive/directive.tmpl.ts create mode 100644 tooling/generators/page/page.tmpl.ts create mode 100644 tooling/generators/pipe/pipe.tmpl.ts create mode 100644 tooling/generators/provider/provider.tmpl.ts create mode 100644 tooling/generators/tabs/tabs.tmpl.ts diff --git a/tooling/generator.js b/tooling/generator.js index 38c5028e45..13dc58bae4 100644 --- a/tooling/generator.js +++ b/tooling/generator.js @@ -9,6 +9,7 @@ function Generator(options) { this.name = options.name; this.type = options.generator; this.appDirectory = options.appDirectory; + this.isTS = options.isTS; //templateVars this.fileName = _.kebabCase(this.name); @@ -49,6 +50,16 @@ Generator.prototype.loadTemplates = function() { if (template.indexOf('.tmpl') == -1) { return; } + + //If not using typescript, ignore .ts files + if(!this.isTS && template.indexOf('.ts') != -1){ + return; + } + + //If using typescript, ignore .js files + if(this.isTS && template.indexOf('.js') != -1){ + return; + } templates.push({path: path.join(generatorPath, template), extension: path.extname(template)}); }, this); diff --git a/tooling/generators/component/component.tmpl.ts b/tooling/generators/component/component.tmpl.ts new file mode 100644 index 0000000000..a1285b9835 --- /dev/null +++ b/tooling/generators/component/component.tmpl.ts @@ -0,0 +1,19 @@ +import {Component} from 'angular2/core'; +import {IONIC_DIRECTIVES} from 'ionic-angular'; + +/* + Generated class for the <%= jsClassName %> component. + + See https://angular.io/docs/ts/latest/api/core/ComponentMetadata-class.html + for more info on Angular 2 Components. +*/ +@Component({ + selector: '<%= fileName %>', + templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html', + directives: [IONIC_DIRECTIVES] // makes all Ionic directives available to your component +}) +export class <%= jsClassName %> { + constructor() { + this.text = 'Hello World'; + } +} diff --git a/tooling/generators/directive/directive.tmpl.ts b/tooling/generators/directive/directive.tmpl.ts new file mode 100644 index 0000000000..d78948b35f --- /dev/null +++ b/tooling/generators/directive/directive.tmpl.ts @@ -0,0 +1,16 @@ +import {Directive} from 'angular2/core'; + +/* + Generated class for the <%= jsClassName %> directive. + + See https://angular.io/docs/ts/latest/api/core/DirectiveMetadata-class.html + for more info on Angular 2 Directives. +*/ +@Directive({ + selector: '[<%= fileName %>]' // Attribute selector +}) +export class <%= jsClassName %> { + constructor() { + console.log('Hello World'); + } +} diff --git a/tooling/generators/page/page.tmpl.ts b/tooling/generators/page/page.tmpl.ts new file mode 100644 index 0000000000..8fd02e7078 --- /dev/null +++ b/tooling/generators/page/page.tmpl.ts @@ -0,0 +1,16 @@ +import {Page, NavController} from 'ionic-angular'; + +/* + Generated class for the <%= jsClassName %> page. + + See http://ionicframework.com/docs/v2/components/#navigation for more info on + Ionic pages and navigation. +*/ +@Page({ + templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html', +}) +export class <%= jsClassName %> { + constructor(public nav: NavController) { + this.nav = nav; + } +} diff --git a/tooling/generators/pipe/pipe.tmpl.ts b/tooling/generators/pipe/pipe.tmpl.ts new file mode 100644 index 0000000000..6502ccd3a1 --- /dev/null +++ b/tooling/generators/pipe/pipe.tmpl.ts @@ -0,0 +1,21 @@ +import {Injectable, Pipe} from 'angular2/core'; + +/* + Generated class for the <%= jsClassName %> pipe. + + See https://angular.io/docs/ts/latest/guide/pipes.html for more info on + Angular 2 Pipes. +*/ +@Pipe({ + name: '<%= fileName %>' +}) +@Injectable() +export class <%= jsClassName %> { + /* + Takes a value and makes it lowercase. + */ + transform(value: string, args: any[]) { + value = value + ''; // make sure it's a string + return value.toLowerCase(); + } +} diff --git a/tooling/generators/provider/provider.tmpl.js b/tooling/generators/provider/provider.tmpl.js index f15dcac459..5e3bf27c88 100644 --- a/tooling/generators/provider/provider.tmpl.js +++ b/tooling/generators/provider/provider.tmpl.js @@ -1,5 +1,6 @@ -import {Injectable, Inject} from 'angular2/core'; +import {Injectable} from 'angular2/core'; import {Http} from 'angular2/http'; +import 'rxjs/add/operator/map'; /* Generated class for the <%= jsClassName %> provider. @@ -9,7 +10,11 @@ import {Http} from 'angular2/http'; */ @Injectable() export class <%= jsClassName %> { - constructor(@Inject(Http) http) { + static get parameters(){ + return [[Http]] + } + + constructor(http) { this.http = http; this.data = null; } diff --git a/tooling/generators/provider/provider.tmpl.ts b/tooling/generators/provider/provider.tmpl.ts new file mode 100644 index 0000000000..e6e574b941 --- /dev/null +++ b/tooling/generators/provider/provider.tmpl.ts @@ -0,0 +1,39 @@ +import {Injectable} from 'angular2/core'; +import {Http} from 'angular2/http'; +import 'rxjs/add/operator/map'; + +/* + Generated class for the <%= jsClassName %> provider. + + See https://angular.io/docs/ts/latest/guide/dependency-injection.html + for more info on providers and Angular 2 DI. +*/ +@Injectable() +export class <%= jsClassName %> { + data: any = null; + + constructor(public http: Http) {} + + load() { + if (this.data) { + // already loaded data + return Promise.resolve(this.data); + } + + // don't have the data yet + return new Promise(resolve => { + // We're using Angular Http provider to request the data, + // then on the response it'll map the JSON data to a parsed JS object. + // Next we process the data and resolve the promise with the new data. + this.http.get('path/to/data.json') + .map(res => res.json()) + .subscribe(data => { + // we've got back the raw data, now generate the core schedule data + // and save the data for later reference + this.data = data; + resolve(this.data); + }); + }); + } +} + diff --git a/tooling/generators/tabs/tabs.tmpl.ts b/tooling/generators/tabs/tabs.tmpl.ts new file mode 100644 index 0000000000..36fa6086a0 --- /dev/null +++ b/tooling/generators/tabs/tabs.tmpl.ts @@ -0,0 +1,15 @@ +import {NavController, Page} from 'ionic-angular'; +<% _.forEach(tabs, function(tab) { %>import {<%= tab.jsClassName %>} from '../<%= tab.fileName %>/<%= tab.fileName %>'; +<% }); %> + +@Page({ + templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html' +}) +export class <%= jsClassName %> { + + constructor(public nav: NavController) { + // set the root pages for each tab + <% _.forEach(tabs, function(tab, i) { %>this.tab<%= ++i %>Root = <%= tab.jsClassName %>; + <% }); %> + } +}