[
  {
    "path": ".gitignore",
    "content": "*.DS_Store\nnpm-debug.log*\nnode_modules\n.npm\nThumbs.db\n.idea"
  },
  {
    "path": "README.md",
    "content": "# Angular 2 TypeScript Live Templates (Snippets) for WebStorm\n\nThis script convert Angular 2 for TypeScript and HTML snippets from Visual Studio Code \n(Written by [John Papa](https://github.com/johnpapa/vscode-angular2-snippets)) to WebStorm Live Templates.\n\n![Usage in TypeScript](images/typescript-snippets.gif)\n\n## Installing the templates\n\n### From JetBrains Plugin repository\n\n- Open IDE preferences `Cmd + ,`\n- Go to `Plugins -> Browse repositories`\n- Type `angular` and install `Angular 2 TypeScript Templates`\n- Restart WebStorm\n\n![Install Plugin](images/install-snippets.gif)\n\n### By Copy xml file\n\n- Clone repo or download [ng2-templates.xml](https://github.com/MrZaYaC/ng2-webstorm-snippets/blob/master/dist/ng2-templates.xml)\n- Place the XML file in your [templates folder](https://www.jetbrains.com/webstorm/help/project-and-ide-settings.html)\n: On OSX that would be ~/Library/Preferences/WebStorm{Version}/templates\n\n- Restart WebStorm\n\n## Usage\nType part of a snippet, press `enter`, and the snippet unfolds.\n\n### TypeScript Angular Snippets\n```typescript\na-component                 // component\na-component-root            // root app component\na-directive                 // directive\na-guard-can-activate        // CanActivate guard\na-guard-can-activate-child  // CanActivateChild guard\na-guard-can-deactivate      // CanDeactivate guard\na-guard-can-load            // CanLoad guard\na-http-get                  // http.get with Rx Observable\na-module                    // module\na-module-root               // root app module\na-module-routing            // routing module file (forChild)\na-output-event              // @Output event and emitter\na-pipe                      // pipe\na-route-path-404            // 404 route path\na-route-path-default        // default route path\na-route-path-eager          // eager route path\na-route-path-lazy           // lazy route path\na-service                   // service\na-service-http              // service with Http\na-ctor-skip-self            // angular ngmodule's skipself constructor\na-subscribe                 // Rx Observable subscription\n```\n\n### TypeScript RxJS Snippets\n```typescript\nrx-observable               // Rx Observable import\nrx-subject                  // Rx Subject import\nrx-replay-subject           // Rx ReplaySubject import\nrx-behavior-subject         // Rx BehaviorSubject import\nrx-add-operator             // Rx add operator import\nrx-add-observable           // Rx add observable import\n```\n\n###HTML Snippets\n```html\na-class                     // [class] binding\na-select                    // <select> control\na-style                     // [style] binding\na-ngClass                   // ngClass\na-ngFor                     // *ngFor\na-ngForAsync                // *ngFor with async\na-ngIf                      // *ngIf\na-ngIfElse                  // *ngIf with else\na-ngModel                   // ngModel\na-routerLink                // routerLink\na-routerLink-param          // routerLink with a route parameter\na-ngStyle                   // ngStyle\na-ngSwitch                  // ngSwitch\na-prej                      // pre debug | json\na-preja                     // pre debug | async | json\n```\n\n![Usage in HTML](images/html-snippets.gif)"
  },
  {
    "path": "dist/ng2-templates.xml",
    "content": "<templateSet group=\"Angular2 TypeScript Live Templates\">\n    <template name=\"a-component\" value=\"import { Component, OnInit } from &#39;@angular/core&#39;;&#10;&#10;@Component({&#10;\tselector: &#39;$selectorname$&#39;,&#10;\ttemplateUrl: &#39;$name$.component.html&#39;&#10;})&#10;&#10;export class $Name$Component implements OnInit {&#10;\tconstructor() { }&#10;&#10;\tngOnInit() { }$END$&#10;}\" description=\"Angular component\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"selectorname\" defaultValue=\"&quot;selector-name&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"name\" defaultValue=\"&quot;name&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-service\" value=\"import { Injectable } from &#39;@angular/core&#39;;&#10;&#10;@Injectable()&#10;export class $Name$Service {&#10;$END$&#10;\tconstructor() { }&#10;}\" description=\"Angular service\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-pipe\" value=\"import { Pipe, PipeTransform } from &#39;@angular/core&#39;;&#10;&#10;@Pipe({&#10;\tname: &#39;$selectorname$&#39;&#10;})&#10;&#10;export class $Name$Pipe implements PipeTransform {&#10;\ttransform(value: any, ...args: any[]): any {&#10;\t\t$END$&#10;\t}&#10;}\" description=\"Angular pipe\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"selectorname\" defaultValue=\"&quot;selector-name&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-route-path-default\" value=\"{ path: &#39;&#39;, pathMatch: &#39;full&#39;, redirectTo: &#39;$path$&#39; }$END$\" description=\"Angular default route path\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"path\" defaultValue=\"&quot;path&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-route-path-404\" value=\"{ path: &#39;**&#39;, pathMatch: &#39;full&#39;, component: $PathNotFoundComponent$ }$END$\" description=\"Angular 404 route path\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"PathNotFoundComponent\" defaultValue=\"&quot;PathNotFoundComponent&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-route-path-eager\" value=\"{ path: &#39;$path$&#39;, component: $Name$Component },\" description=\"Angular eager route path\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"path\" defaultValue=\"&quot;path&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-route-path-lazy\" value=\"{ path: &#39;$path$&#39;, loadChildren: &#39;$lazypath$#$lazymodule$&#39; },\" description=\"Angular lazy route path\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"path\" defaultValue=\"&quot;path&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"lazypath\" defaultValue=\"&quot;lazy-path&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"lazymodule\" defaultValue=\"&quot;lazy-module&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-http-get\" value=\"return this.http.get(&#39;$url$&#39;)&#10;\t.map((response: Response) =&gt; response.json()$END$);\" description=\"Angular Http.get\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"url\" defaultValue=\"&quot;url&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-service-http\" value=\"import { Injectable } from &#39;@angular/core&#39;;&#10;import { Http, Response } from &#39;@angular/http&#39;;&#10;import { Observable } from &#39;rxjs/Observable&#39;;&#10;import &#39;rxjs/add/operator/map&#39;;&#10;import &#39;rxjs/add/operator/catch&#39;;&#10;&#10;@Injectable()&#10;export class $ServiceName$Service {&#10;\tconstructor(private http: Http) { }&#10;\t$END$&#10;}\" description=\"Angular service with Http\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"ServiceName\" defaultValue=\"&quot;ServiceName&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-output-event\" value=\"@Output() $eventName$: EventEmitter&lt;$eventType$&gt; = new EventEmitter&lt;$eventType$&gt;();\" description=\"Angular @Output event and emitter\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"eventName\" defaultValue=\"&quot;eventName&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"eventType\" defaultValue=\"&quot;eventType&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-subscribe\" value=\"this.$service$.$function$&#10;\t.subscribe($arg$ =&gt; this.$property$ = $arg$);&#10;$END$\" description=\"Angular observable subscribe\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"service\" defaultValue=\"&quot;service&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"function\" defaultValue=\"&quot;function&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"arg\" defaultValue=\"&quot;arg&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"property\" defaultValue=\"&quot;property&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-component-root\" value=\"import { Component } from &#39;@angular/core&#39;;&#10;&#10;@Component({&#10;\tselector: &#39;$prefixapp$&#39;,&#10;\ttemplate: `&#10;\t\t&lt;router-outlet&gt;&lt;/router-outlet&gt;&#10;\t\t`&#10;})&#10;export class $App$Component { }&#10;$END$\" description=\"Angular App root component\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"prefixapp\" defaultValue=\"&quot;prefix-app&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"App\" defaultValue=\"&quot;App&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-module-root\" value=\"import { NgModule } from &#39;@angular/core&#39;;&#10;import { BrowserModule  } from &#39;@angular/platform-browser&#39;;&#10;import { HttpModule } from &#39;@angular/http&#39;;&#10;&#10;import { $App$Component } from &#39;./$app$.component&#39;;&#10;import { AppRoutingModule } from &#39;./$app$.routing&#39;; //TODO: Create $app$.routing&#10;&#10;@NgModule({&#10;\timports: [&#10;\t\tBrowserModule,&#10;\t\tHttpModule,&#10;\t&#10;\t\tAppRoutingModule,&#10;\t],&#10;\tdeclarations: [$App$Component],&#10;\tproviders: [/* TODO: Providers go here */],&#10;\tbootstrap: [$App$Component],&#10;})&#10;export class $App$Module { }&#10;$END$\" description=\"Angular Root Module\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"App\" defaultValue=\"&quot;App&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"app\" defaultValue=\"&quot;app&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-module-routing\" value=\"import { NgModule } from &#39;@angular/core&#39;;&#10;import { Routes, RouterModule } from &#39;@angular/router&#39;;&#10;&#10;import { $Name$Component } from &#39;./$name$.component&#39;;&#10;&#10;const routes: Routes = [&#10;  { path: &#39;$path$&#39;, component: $Name$Component },&#10;];&#10;&#10;@NgModule({&#10;  imports: [RouterModule.forChild(routes)],&#10;  exports: [RouterModule],&#10;})&#10;export class $Name$RoutingModule { }&#10;&#10;export const routedComponents = [$Name$Component];\" description=\"Angular routing module file (forChild)\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"name\" defaultValue=\"&quot;name&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"path\" defaultValue=\"&quot;path&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-module\" value=\"import { NgModule } from &#39;@angular/core&#39;;&#10;&#10;import { $Name$Component } from &#39;./$name$.component&#39;;&#10;&#10;@NgModule({&#10;\timports: [],&#10;\texports: [],&#10;\tdeclarations: [$Name$Component],&#10;\tproviders: [],&#10;})&#10;export class $Name$Module { }&#10;$END$\" description=\"Angular Module\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"name\" defaultValue=\"&quot;name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-directive\" value=\"import { Directive } from &#39;@angular/core&#39;;&#10;&#10;@Directive({ selector: &#39;[$selectorname$]&#39; })&#10;export class $Name$Directive {&#10;\tconstructor() { }&#10;}\" description=\"Angular directive\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"selectorname\" defaultValue=\"&quot;selector-name&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-guard-can-activate\" value=\"import { Injectable } from &#39;@angular/core&#39;;&#10;import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from &#39;@angular/router&#39;;&#10;&#10;@Injectable()&#10;export class $Name$Guard implements CanActivate {&#10;\tconstructor() { }&#10;&#10;\tcanActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {&#10;\t\treturn true;$END$&#10;\t}&#10;}\" description=\"Angular CanActivate guard\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-guard-can-activate-child\" value=\"import { Injectable } from &#39;@angular/core&#39;;&#10;import { ActivatedRouteSnapshot, CanActivateChild, RouterStateSnapshot } from &#39;@angular/router&#39;;&#10;&#10;@Injectable()&#10;export class $Name$Guard implements CanActivateChild {&#10;\tconstructor() { }&#10;&#10;\tcanActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {&#10;\t\treturn true;$END$&#10;\t}&#10;}\" description=\"Angular CanActivateChild guard\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-guard-can-load\" value=\"import { Injectable } from &#39;@angular/core&#39;;&#10;import { CanLoad, Route } from &#39;@angular/router&#39;;&#10;&#10;@Injectable()&#10;export class $Name$Guard implements CanLoad {&#10;\tconstructor() { }&#10;&#10;\tcanLoad(route: Route) {&#10;\t\treturn true;$END$&#10;\t}&#10;}\" description=\"Angular CanLoad guard\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-guard-can-deactivate\" value=\"import { Injectable } from &#39;@angular/core&#39;;&#10;import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from &#39;@angular/router&#39;;&#10;import { Observable } from &#39;rxjs/Observable&#39;;&#10;&#10;import { $ComponentName$Component } from &#39;./$filename$.component&#39;;&#10;&#10;// Consider using this interface for all CanDeactivate guards,&#10;// and have your components implement this interface, too.&#10;//&#10;//   e.g. export class CanDeactivateGuard implements CanDeactivate&lt;CanComponentDeactivate&gt; {&#10;//&#10;// export interface CanComponentDeactivate {&#10;// canDeactivate: () =&gt; any;&#10;// }&#10;&#10;@Injectable()&#10;export class $Name$Guard implements CanDeactivate&lt;$ComponentName$Component&gt; {&#10;\tcanDeactivate(&#10;\t\tcomponent: $ComponentName$Component,&#10;\t\tcurrentRoute: ActivatedRouteSnapshot, &#10;\t\tcurrentState: RouterStateSnapshot&#10;\t): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean {&#10;\t\treturn false;$END$&#10;\t}&#10;}\" description=\"Angular CanDeactivate guard\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"ComponentName\" defaultValue=\"&quot;ComponentName&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"filename\" defaultValue=\"&quot;filename&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"Name\" defaultValue=\"&quot;Name&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-ctor-skip-self\" value=\"constructor( @Optional() @SkipSelf() parentModule: $ModuleName$ {&#10;\tif (parentModule) {&#10;\t\tconst msg = `$ModuleName$ has already been loaded. &#10;\t\t\tImport $ModuleName$ once, only, in the root AppModule.`;&#10;\t\tthrow new Error(msg);&#10;\t}&#10;}\" description=\"Angular Module SkipSelf constructor\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"ModuleName\" defaultValue=\"&quot;ModuleName&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"rx-observable\" value=\"import { Observable } from &#39;rxjs/Observable&#39;;&#10;$END$\" description=\"RxJS Observable import\" toReformat=\"false\" toShortenFQNames=\"true\">\n      \n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"rx-replay-subject\" value=\"import { ReplaySubject } from &#39;rxjs/ReplaySubject&#39;;&#10;$END$\" description=\"RxJS ReplaySubject import\" toReformat=\"false\" toShortenFQNames=\"true\">\n      \n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"rx-subject\" value=\"import { Subject } from &#39;rxjs/Subject&#39;;&#10;$END$\" description=\"RxJS Subject import\" toReformat=\"false\" toShortenFQNames=\"true\">\n      \n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"rx-behavior-subject\" value=\"import { BehaviorSubject } from &#39;rxjs/BehaviorSubject&#39;;&#10;$END$\" description=\"RxJS BehaviorSubject import\" toReformat=\"false\" toShortenFQNames=\"true\">\n      \n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"rx-add-operator\" value=\"import &#39;rxjs/add/operator/$map$&#39;;&#10;$END$\" description=\"RxJS Add Operator import\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"map\" defaultValue=\"&quot;map&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"rx-add-observable\" value=\"import &#39;rxjs/add/observable/$of$&#39;;&#10;$END$\" description=\"RxJS Add Observable import\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"of\" defaultValue=\"&quot;of&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>\n    </template>\n  \n    <template name=\"a-class\" value=\"[class]=&quot;$expression$&quot;\" description=\"Angular [class] binding\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"expression\" defaultValue=\"&quot;expression&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-style\" value=\"[style.$property$]=&quot;$expression$&quot;\" description=\"Angular [style] binding\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"property\" defaultValue=\"&quot;property&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"expression\" defaultValue=\"&quot;expression&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-ngClass\" value=\"[ngClass]=&quot;{$cssClass$: $expression$}&quot;\" description=\"Angular ngClass\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"cssClass\" defaultValue=\"&quot;cssClass&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"expression\" defaultValue=\"&quot;expression&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-ngFor\" value=\"*ngFor=&quot;let $item$ of $list$&quot;\" description=\"Angular *ngFor\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"item\" defaultValue=\"&quot;item&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"list\" defaultValue=\"&quot;list&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-ngForAsync\" value=\"*ngFor=&quot;let $item$ of $stream$ | async as $list$&quot;\" description=\"Angular *ngForAsync\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"item\" defaultValue=\"&quot;item&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"stream\" defaultValue=\"&quot;stream&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"list\" defaultValue=\"&quot;list&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-ngIf\" value=\"*ngIf=&quot;$expression$&quot;\" description=\"Angular *ngIf\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"expression\" defaultValue=\"&quot;expression&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-ngIfElse\" value=\"*ngIf=&quot;$expression$;else $templateName$&quot;\" description=\"Angular *ngIfElse\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"expression\" defaultValue=\"&quot;expression&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"templateName\" defaultValue=\"&quot;templateName&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-ngModel\" value=\"[(ngModel)]=&quot;$binding$&quot;\" description=\"Angular ngModel\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"binding\" defaultValue=\"&quot;binding&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-routerLink\" value=\"[routerLink]=&quot;[&#39;/$routePath$&#39;]&quot;$END$\" description=\"Angular routerLink\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"routePath\" defaultValue=\"&quot;routePath&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-routerLink-param\" value=\"[routerLink]=&quot;[&#39;$routePath$&#39;, $routeParameterValue$$END$]&quot;\" description=\"Angular routerLink with a route parameter\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"routePath\" defaultValue=\"&quot;routePath&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"routeParameterValue\" defaultValue=\"&quot;routeParameterValue&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-select\" value=\"&lt;select [(ngModel)]=&quot;$model$&quot;&gt;&#10;\t&lt;option *ngFor=&quot;let $item$ of $list$&quot; [value]=&quot;$item$&quot;&gt;{{$item$}}&lt;/option&gt;&#10;&lt;/select&gt;\" description=\"&lt;select&gt; control with ngModel\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"model\" defaultValue=\"&quot;model&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"item\" defaultValue=\"&quot;item&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"list\" defaultValue=\"&quot;list&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-ngStyle\" value=\"[ngStyle]=&quot;{$style$: $expression$}&quot;\" description=\"Angular ngStyle\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"style\" defaultValue=\"&quot;style&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"expression\" defaultValue=\"&quot;expression&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-ngSwitch\" value=\"&lt;div [ngSwitch]=&quot;$conditionExpression$&quot;&gt;&#10;\t&lt;div *ngSwitchCase=&quot;$expression$&quot;&gt;$output$&lt;/div&gt;&#10;\t&lt;div *ngSwitchDefault&gt;$output2$&lt;/div&gt;&#10;&lt;/div&gt;\" description=\"Angular ngSwitch\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"conditionExpression\" defaultValue=\"&quot;conditionExpression&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"expression\" defaultValue=\"&quot;expression&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"output\" defaultValue=\"&quot;output&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"output2\" defaultValue=\"&quot;output2&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-prej\" value=\"&lt;pre&gt;{{$var1$ | json}}&lt;/pre&gt;$var2$\" description=\"Angular pre debug | json\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"var1\" defaultValue=\"&quot;&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"var2\" defaultValue=\"&quot;&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  \n    <template name=\"a-preja\" value=\"&lt;pre&gt;{{$var1$ | async | json}}&lt;/pre&gt;$var2$\" description=\"Angular pre debug | async | json\" toReformat=\"false\" toShortenFQNames=\"true\">\n      <variable name=\"var1\" defaultValue=\"&quot;&quot;\" alwaysStopAt=\"true\"/>\n      <variable name=\"var2\" defaultValue=\"&quot;&quot;\" alwaysStopAt=\"true\"/>\n      <context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>\n    </template>\n  </templateSet>"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"ng2-webstorm-snippets\",\n  \"version\": \"2.0.0\",\n  \"description\": \"Angular 2 TypeScript snippets for WebStorm based on John Papa snippets for Visual Code\",\n  \"main\": \"src/app.js\",\n  \"scripts\": {\n    \"start\": \"node src/app.js\",\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"prestart\": \"npm install\"\n  },\n  \"author\": \"Denis Zaichenko\",\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git@github.com:MrZaYaC/ng2-webstorm-snippets.git\"\n  },\n  \"engines\" : {\n    \"node\" : \">=4.0.0 <6.0.0\"\n  },\n  \"dependencies\": {\n    \"Angular2\": \"github:johnpapa/vscode-angular2-snippets\",\n    \"escape-html\": \"^1.0.3\"\n  }\n}\n"
  },
  {
    "path": "src/app.js",
    "content": "'use strict';\nconst fs = require('fs');\nconst escape = require('escape-html');\n\nconst TYPESCRIPT_FILE = `${__dirname}/../node_modules/Angular2/snippets/typescript.json`;\nconst HTML_FILE = `${__dirname}/../node_modules/Angular2/snippets/html.json`;\n\nconst vsTsTemplate = JSON.parse(fs.readFileSync(TYPESCRIPT_FILE, 'utf8'));\nconst vsHTMLTemplate = JSON.parse(fs.readFileSync(HTML_FILE, 'utf8'));\n\nlet webshtormXML = '<templateSet group=\"Angular2 TypeScript Live Templates\">';\n\nwebshtormXML += convert(vsTsTemplate, 'typescript');\nwebshtormXML += convert(vsHTMLTemplate, 'html');\n\nwebshtormXML += '</templateSet>';\n\nfs.writeFileSync(`${__dirname}/../dist/ng2-templates.xml`, webshtormXML, 'utf8');\n\nconsole.log('\\x1b[32m', \"- created\", '\\x1b[0m', \"/dist/ng2-templates.xml\");\n\nfunction convert(vsTemplate, type) {\n  const variableRegexp = /\\$\\{([^\\}|^0]+)\\}/g;\n  const caretRegexp = /(\\$[1-9])/g;\n  let webstormXml = '';\n  let context =\n      `<context>\n         <option name=\"TypeScript\" value=\"true\"/>\n       </context>`;\n\n  if (type === 'html') {\n    context =\n      `<context>\n          <option name=\"HTML\" value=\"true\" />\n          <option name=\"JADE\" value=\"true\" />\n      </context>`;\n  }\n\n\n\n  for (const key in vsTemplate) {\n    let vars = [];\n    let body = [];\n    let varsXml = [];\n\n    for (let line of vsTemplate[key].body) {\n      if (variableRegexp.test(line)) {\n        line = line.replace(variableRegexp, (match, p1) => {\n          const name = p1.replace(/\\d:/, '').replace('-', '');\n          const value = p1.replace(/\\d:/, '');\n          if (!vars.filter(item => item.name === name).length) {\n            vars.push({name, value});\n          }\n          return `$${name}$`;\n        });\n      }\n      if (caretRegexp.test(line)) {\n        line = line.replace(caretRegexp, (match, p1) => {\n          const name = p1.replace(/\\$([1-9])/, 'var$1');\n          const value = p1.replace(/\\$([1-9])/, '');\n          if (!vars.filter(item => item.name === name).length) {\n            vars.push({name, value});\n          }\n          return `$${name}$`;\n        });\n      }\n      line = line.replace('$0', '$END$');\n      line = line.replace('${0}', '$END$');\n      line = escape(line);\n      body.push(line);\n    }\n    if (vars.length) {\n      for (const item of vars) {\n        varsXml.push(`<variable name=\"${item.name}\" defaultValue=\"&quot;${item.value}&quot;\" alwaysStopAt=\"true\"/>`);\n      }\n    }\n\n    webstormXml += `\n    <template name=\"${vsTemplate[key].prefix}\" value=\"${body.join('&#10;')}\" description=\"${escape(vsTemplate[key].description)}\" toReformat=\"false\" toShortenFQNames=\"true\">\n      ${varsXml.join(\"\\n      \")}\n      ${context}\n    </template>\n  `\n  }\n  \n  return webstormXml;\n}\n\n"
  }
]