Repository: MrZaYaC/ng2-webstorm-snippets
Branch: master
Commit: c709bf759290
Files: 5
Total size: 29.6 KB
Directory structure:
gitextract_aml89cmv/
├── .gitignore
├── README.md
├── dist/
│ └── ng2-templates.xml
├── package.json
└── src/
└── app.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
*.DS_Store
npm-debug.log*
node_modules
.npm
Thumbs.db
.idea
================================================
FILE: README.md
================================================
# Angular 2 TypeScript Live Templates (Snippets) for WebStorm
This script convert Angular 2 for TypeScript and HTML snippets from Visual Studio Code
(Written by [John Papa](https://github.com/johnpapa/vscode-angular2-snippets)) to WebStorm Live Templates.
## Installing the templates
### From JetBrains Plugin repository
- Open IDE preferences `Cmd + ,`
- Go to `Plugins -> Browse repositories`
- Type `angular` and install `Angular 2 TypeScript Templates`
- Restart WebStorm
### By Copy xml file
- Clone repo or download [ng2-templates.xml](https://github.com/MrZaYaC/ng2-webstorm-snippets/blob/master/dist/ng2-templates.xml)
- Place the XML file in your [templates folder](https://www.jetbrains.com/webstorm/help/project-and-ide-settings.html)
: On OSX that would be ~/Library/Preferences/WebStorm{Version}/templates
- Restart WebStorm
## Usage
Type part of a snippet, press `enter`, and the snippet unfolds.
### TypeScript Angular Snippets
```typescript
a-component // component
a-component-root // root app component
a-directive // directive
a-guard-can-activate // CanActivate guard
a-guard-can-activate-child // CanActivateChild guard
a-guard-can-deactivate // CanDeactivate guard
a-guard-can-load // CanLoad guard
a-http-get // http.get with Rx Observable
a-module // module
a-module-root // root app module
a-module-routing // routing module file (forChild)
a-output-event // @Output event and emitter
a-pipe // pipe
a-route-path-404 // 404 route path
a-route-path-default // default route path
a-route-path-eager // eager route path
a-route-path-lazy // lazy route path
a-service // service
a-service-http // service with Http
a-ctor-skip-self // angular ngmodule's skipself constructor
a-subscribe // Rx Observable subscription
```
### TypeScript RxJS Snippets
```typescript
rx-observable // Rx Observable import
rx-subject // Rx Subject import
rx-replay-subject // Rx ReplaySubject import
rx-behavior-subject // Rx BehaviorSubject import
rx-add-operator // Rx add operator import
rx-add-observable // Rx add observable import
```
###HTML Snippets
```html
a-class // [class] binding
a-select // <select> control
a-style // [style] binding
a-ngClass // ngClass
a-ngFor // *ngFor
a-ngForAsync // *ngFor with async
a-ngIf // *ngIf
a-ngIfElse // *ngIf with else
a-ngModel // ngModel
a-routerLink // routerLink
a-routerLink-param // routerLink with a route parameter
a-ngStyle // ngStyle
a-ngSwitch // ngSwitch
a-prej // pre debug | json
a-preja // pre debug | async | json
```
================================================
FILE: dist/ng2-templates.xml
================================================
<templateSet group="Angular2 TypeScript Live Templates">
<template name="a-component" value="import { Component, OnInit } from '@angular/core'; @Component({ selector: '$selectorname$', templateUrl: '$name$.component.html' }) export class $Name$Component implements OnInit { constructor() { } ngOnInit() { }$END$ }" description="Angular component" toReformat="false" toShortenFQNames="true">
<variable name="selectorname" defaultValue=""selector-name"" alwaysStopAt="true"/>
<variable name="name" defaultValue=""name"" alwaysStopAt="true"/>
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-service" value="import { Injectable } from '@angular/core'; @Injectable() export class $Name$Service { $END$ constructor() { } }" description="Angular service" toReformat="false" toShortenFQNames="true">
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-pipe" value="import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: '$selectorname$' }) export class $Name$Pipe implements PipeTransform { transform(value: any, ...args: any[]): any { $END$ } }" description="Angular pipe" toReformat="false" toShortenFQNames="true">
<variable name="selectorname" defaultValue=""selector-name"" alwaysStopAt="true"/>
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-route-path-default" value="{ path: '', pathMatch: 'full', redirectTo: '$path$' }$END$" description="Angular default route path" toReformat="false" toShortenFQNames="true">
<variable name="path" defaultValue=""path"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-route-path-404" value="{ path: '**', pathMatch: 'full', component: $PathNotFoundComponent$ }$END$" description="Angular 404 route path" toReformat="false" toShortenFQNames="true">
<variable name="PathNotFoundComponent" defaultValue=""PathNotFoundComponent"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-route-path-eager" value="{ path: '$path$', component: $Name$Component }," description="Angular eager route path" toReformat="false" toShortenFQNames="true">
<variable name="path" defaultValue=""path"" alwaysStopAt="true"/>
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-route-path-lazy" value="{ path: '$path$', loadChildren: '$lazypath$#$lazymodule$' }," description="Angular lazy route path" toReformat="false" toShortenFQNames="true">
<variable name="path" defaultValue=""path"" alwaysStopAt="true"/>
<variable name="lazypath" defaultValue=""lazy-path"" alwaysStopAt="true"/>
<variable name="lazymodule" defaultValue=""lazy-module"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-http-get" value="return this.http.get('$url$') .map((response: Response) => response.json()$END$);" description="Angular Http.get" toReformat="false" toShortenFQNames="true">
<variable name="url" defaultValue=""url"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-service-http" value="import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; @Injectable() export class $ServiceName$Service { constructor(private http: Http) { } $END$ }" description="Angular service with Http" toReformat="false" toShortenFQNames="true">
<variable name="ServiceName" defaultValue=""ServiceName"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-output-event" value="@Output() $eventName$: EventEmitter<$eventType$> = new EventEmitter<$eventType$>();" description="Angular @Output event and emitter" toReformat="false" toShortenFQNames="true">
<variable name="eventName" defaultValue=""eventName"" alwaysStopAt="true"/>
<variable name="eventType" defaultValue=""eventType"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-subscribe" value="this.$service$.$function$ .subscribe($arg$ => this.$property$ = $arg$); $END$" description="Angular observable subscribe" toReformat="false" toShortenFQNames="true">
<variable name="service" defaultValue=""service"" alwaysStopAt="true"/>
<variable name="function" defaultValue=""function"" alwaysStopAt="true"/>
<variable name="arg" defaultValue=""arg"" alwaysStopAt="true"/>
<variable name="property" defaultValue=""property"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-component-root" value="import { Component } from '@angular/core'; @Component({ selector: '$prefixapp$', template: ` <router-outlet></router-outlet> ` }) export class $App$Component { } $END$" description="Angular App root component" toReformat="false" toShortenFQNames="true">
<variable name="prefixapp" defaultValue=""prefix-app"" alwaysStopAt="true"/>
<variable name="App" defaultValue=""App"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-module-root" value="import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { $App$Component } from './$app$.component'; import { AppRoutingModule } from './$app$.routing'; //TODO: Create $app$.routing @NgModule({ imports: [ BrowserModule, HttpModule, AppRoutingModule, ], declarations: [$App$Component], providers: [/* TODO: Providers go here */], bootstrap: [$App$Component], }) export class $App$Module { } $END$" description="Angular Root Module" toReformat="false" toShortenFQNames="true">
<variable name="App" defaultValue=""App"" alwaysStopAt="true"/>
<variable name="app" defaultValue=""app"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-module-routing" value="import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { $Name$Component } from './$name$.component'; const routes: Routes = [ { path: '$path$', component: $Name$Component }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) export class $Name$RoutingModule { } export const routedComponents = [$Name$Component];" description="Angular routing module file (forChild)" toReformat="false" toShortenFQNames="true">
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<variable name="name" defaultValue=""name"" alwaysStopAt="true"/>
<variable name="path" defaultValue=""path"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-module" value="import { NgModule } from '@angular/core'; import { $Name$Component } from './$name$.component'; @NgModule({ imports: [], exports: [], declarations: [$Name$Component], providers: [], }) export class $Name$Module { } $END$" description="Angular Module" toReformat="false" toShortenFQNames="true">
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<variable name="name" defaultValue=""name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-directive" value="import { Directive } from '@angular/core'; @Directive({ selector: '[$selectorname$]' }) export class $Name$Directive { constructor() { } }" description="Angular directive" toReformat="false" toShortenFQNames="true">
<variable name="selectorname" defaultValue=""selector-name"" alwaysStopAt="true"/>
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-guard-can-activate" value="import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router'; @Injectable() export class $Name$Guard implements CanActivate { constructor() { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return true;$END$ } }" description="Angular CanActivate guard" toReformat="false" toShortenFQNames="true">
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-guard-can-activate-child" value="import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivateChild, RouterStateSnapshot } from '@angular/router'; @Injectable() export class $Name$Guard implements CanActivateChild { constructor() { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return true;$END$ } }" description="Angular CanActivateChild guard" toReformat="false" toShortenFQNames="true">
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-guard-can-load" value="import { Injectable } from '@angular/core'; import { CanLoad, Route } from '@angular/router'; @Injectable() export class $Name$Guard implements CanLoad { constructor() { } canLoad(route: Route) { return true;$END$ } }" description="Angular CanLoad guard" toReformat="false" toShortenFQNames="true">
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-guard-can-deactivate" value="import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import { $ComponentName$Component } from './$filename$.component'; // Consider using this interface for all CanDeactivate guards, // and have your components implement this interface, too. // // e.g. export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> { // // export interface CanComponentDeactivate { // canDeactivate: () => any; // } @Injectable() export class $Name$Guard implements CanDeactivate<$ComponentName$Component> { canDeactivate( component: $ComponentName$Component, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot ): Observable<boolean>|Promise<boolean>|boolean { return false;$END$ } }" description="Angular CanDeactivate guard" toReformat="false" toShortenFQNames="true">
<variable name="ComponentName" defaultValue=""ComponentName"" alwaysStopAt="true"/>
<variable name="filename" defaultValue=""filename"" alwaysStopAt="true"/>
<variable name="Name" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-ctor-skip-self" value="constructor( @Optional() @SkipSelf() parentModule: $ModuleName$ { if (parentModule) { const msg = `$ModuleName$ has already been loaded. Import $ModuleName$ once, only, in the root AppModule.`; throw new Error(msg); } }" description="Angular Module SkipSelf constructor" toReformat="false" toShortenFQNames="true">
<variable name="ModuleName" defaultValue=""ModuleName"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="rx-observable" value="import { Observable } from 'rxjs/Observable'; $END$" description="RxJS Observable import" toReformat="false" toShortenFQNames="true">
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="rx-replay-subject" value="import { ReplaySubject } from 'rxjs/ReplaySubject'; $END$" description="RxJS ReplaySubject import" toReformat="false" toShortenFQNames="true">
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="rx-subject" value="import { Subject } from 'rxjs/Subject'; $END$" description="RxJS Subject import" toReformat="false" toShortenFQNames="true">
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="rx-behavior-subject" value="import { BehaviorSubject } from 'rxjs/BehaviorSubject'; $END$" description="RxJS BehaviorSubject import" toReformat="false" toShortenFQNames="true">
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="rx-add-operator" value="import 'rxjs/add/operator/$map$'; $END$" description="RxJS Add Operator import" toReformat="false" toShortenFQNames="true">
<variable name="map" defaultValue=""map"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="rx-add-observable" value="import 'rxjs/add/observable/$of$'; $END$" description="RxJS Add Observable import" toReformat="false" toShortenFQNames="true">
<variable name="of" defaultValue=""of"" alwaysStopAt="true"/>
<context>
<option name="TypeScript" value="true"/>
</context>
</template>
<template name="a-class" value="[class]="$expression$"" description="Angular [class] binding" toReformat="false" toShortenFQNames="true">
<variable name="expression" defaultValue=""expression"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-style" value="[style.$property$]="$expression$"" description="Angular [style] binding" toReformat="false" toShortenFQNames="true">
<variable name="property" defaultValue=""property"" alwaysStopAt="true"/>
<variable name="expression" defaultValue=""expression"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-ngClass" value="[ngClass]="{$cssClass$: $expression$}"" description="Angular ngClass" toReformat="false" toShortenFQNames="true">
<variable name="cssClass" defaultValue=""cssClass"" alwaysStopAt="true"/>
<variable name="expression" defaultValue=""expression"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-ngFor" value="*ngFor="let $item$ of $list$"" description="Angular *ngFor" toReformat="false" toShortenFQNames="true">
<variable name="item" defaultValue=""item"" alwaysStopAt="true"/>
<variable name="list" defaultValue=""list"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-ngForAsync" value="*ngFor="let $item$ of $stream$ | async as $list$"" description="Angular *ngForAsync" toReformat="false" toShortenFQNames="true">
<variable name="item" defaultValue=""item"" alwaysStopAt="true"/>
<variable name="stream" defaultValue=""stream"" alwaysStopAt="true"/>
<variable name="list" defaultValue=""list"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-ngIf" value="*ngIf="$expression$"" description="Angular *ngIf" toReformat="false" toShortenFQNames="true">
<variable name="expression" defaultValue=""expression"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-ngIfElse" value="*ngIf="$expression$;else $templateName$"" description="Angular *ngIfElse" toReformat="false" toShortenFQNames="true">
<variable name="expression" defaultValue=""expression"" alwaysStopAt="true"/>
<variable name="templateName" defaultValue=""templateName"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-ngModel" value="[(ngModel)]="$binding$"" description="Angular ngModel" toReformat="false" toShortenFQNames="true">
<variable name="binding" defaultValue=""binding"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-routerLink" value="[routerLink]="['/$routePath$']"$END$" description="Angular routerLink" toReformat="false" toShortenFQNames="true">
<variable name="routePath" defaultValue=""routePath"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-routerLink-param" value="[routerLink]="['$routePath$', $routeParameterValue$$END$]"" description="Angular routerLink with a route parameter" toReformat="false" toShortenFQNames="true">
<variable name="routePath" defaultValue=""routePath"" alwaysStopAt="true"/>
<variable name="routeParameterValue" defaultValue=""routeParameterValue"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-select" value="<select [(ngModel)]="$model$"> <option *ngFor="let $item$ of $list$" [value]="$item$">{{$item$}}</option> </select>" description="<select> control with ngModel" toReformat="false" toShortenFQNames="true">
<variable name="model" defaultValue=""model"" alwaysStopAt="true"/>
<variable name="item" defaultValue=""item"" alwaysStopAt="true"/>
<variable name="list" defaultValue=""list"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-ngStyle" value="[ngStyle]="{$style$: $expression$}"" description="Angular ngStyle" toReformat="false" toShortenFQNames="true">
<variable name="style" defaultValue=""style"" alwaysStopAt="true"/>
<variable name="expression" defaultValue=""expression"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-ngSwitch" value="<div [ngSwitch]="$conditionExpression$"> <div *ngSwitchCase="$expression$">$output$</div> <div *ngSwitchDefault>$output2$</div> </div>" description="Angular ngSwitch" toReformat="false" toShortenFQNames="true">
<variable name="conditionExpression" defaultValue=""conditionExpression"" alwaysStopAt="true"/>
<variable name="expression" defaultValue=""expression"" alwaysStopAt="true"/>
<variable name="output" defaultValue=""output"" alwaysStopAt="true"/>
<variable name="output2" defaultValue=""output2"" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-prej" value="<pre>{{$var1$ | json}}</pre>$var2$" description="Angular pre debug | json" toReformat="false" toShortenFQNames="true">
<variable name="var1" defaultValue="""" alwaysStopAt="true"/>
<variable name="var2" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
<template name="a-preja" value="<pre>{{$var1$ | async | json}}</pre>$var2$" description="Angular pre debug | async | json" toReformat="false" toShortenFQNames="true">
<variable name="var1" defaultValue="""" alwaysStopAt="true"/>
<variable name="var2" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>
</template>
</templateSet>
================================================
FILE: package.json
================================================
{
"name": "ng2-webstorm-snippets",
"version": "2.0.0",
"description": "Angular 2 TypeScript snippets for WebStorm based on John Papa snippets for Visual Code",
"main": "src/app.js",
"scripts": {
"start": "node src/app.js",
"test": "echo \"Error: no test specified\" && exit 1",
"prestart": "npm install"
},
"author": "Denis Zaichenko",
"license": "MIT",
"repository": {
"type": "git",
"url": "git@github.com:MrZaYaC/ng2-webstorm-snippets.git"
},
"engines" : {
"node" : ">=4.0.0 <6.0.0"
},
"dependencies": {
"Angular2": "github:johnpapa/vscode-angular2-snippets",
"escape-html": "^1.0.3"
}
}
================================================
FILE: src/app.js
================================================
'use strict';
const fs = require('fs');
const escape = require('escape-html');
const TYPESCRIPT_FILE = `${__dirname}/../node_modules/Angular2/snippets/typescript.json`;
const HTML_FILE = `${__dirname}/../node_modules/Angular2/snippets/html.json`;
const vsTsTemplate = JSON.parse(fs.readFileSync(TYPESCRIPT_FILE, 'utf8'));
const vsHTMLTemplate = JSON.parse(fs.readFileSync(HTML_FILE, 'utf8'));
let webshtormXML = '<templateSet group="Angular2 TypeScript Live Templates">';
webshtormXML += convert(vsTsTemplate, 'typescript');
webshtormXML += convert(vsHTMLTemplate, 'html');
webshtormXML += '</templateSet>';
fs.writeFileSync(`${__dirname}/../dist/ng2-templates.xml`, webshtormXML, 'utf8');
console.log('\x1b[32m', "- created", '\x1b[0m', "/dist/ng2-templates.xml");
function convert(vsTemplate, type) {
const variableRegexp = /\$\{([^\}|^0]+)\}/g;
const caretRegexp = /(\$[1-9])/g;
let webstormXml = '';
let context =
`<context>
<option name="TypeScript" value="true"/>
</context>`;
if (type === 'html') {
context =
`<context>
<option name="HTML" value="true" />
<option name="JADE" value="true" />
</context>`;
}
for (const key in vsTemplate) {
let vars = [];
let body = [];
let varsXml = [];
for (let line of vsTemplate[key].body) {
if (variableRegexp.test(line)) {
line = line.replace(variableRegexp, (match, p1) => {
const name = p1.replace(/\d:/, '').replace('-', '');
const value = p1.replace(/\d:/, '');
if (!vars.filter(item => item.name === name).length) {
vars.push({name, value});
}
return `$${name}$`;
});
}
if (caretRegexp.test(line)) {
line = line.replace(caretRegexp, (match, p1) => {
const name = p1.replace(/\$([1-9])/, 'var$1');
const value = p1.replace(/\$([1-9])/, '');
if (!vars.filter(item => item.name === name).length) {
vars.push({name, value});
}
return `$${name}$`;
});
}
line = line.replace('$0', '$END$');
line = line.replace('${0}', '$END$');
line = escape(line);
body.push(line);
}
if (vars.length) {
for (const item of vars) {
varsXml.push(`<variable name="${item.name}" defaultValue=""${item.value}"" alwaysStopAt="true"/>`);
}
}
webstormXml += `
<template name="${vsTemplate[key].prefix}" value="${body.join(' ')}" description="${escape(vsTemplate[key].description)}" toReformat="false" toShortenFQNames="true">
${varsXml.join("\n ")}
${context}
</template>
`
}
return webstormXml;
}
gitextract_aml89cmv/
├── .gitignore
├── README.md
├── dist/
│ └── ng2-templates.xml
├── package.json
└── src/
└── app.js
SYMBOL INDEX (3 symbols across 1 files)
FILE: src/app.js
constant TYPESCRIPT_FILE (line 5) | const TYPESCRIPT_FILE = `${__dirname}/../node_modules/Angular2/snippets/...
constant HTML_FILE (line 6) | const HTML_FILE = `${__dirname}/../node_modules/Angular2/snippets/html.j...
function convert (line 22) | function convert(vsTemplate, type) {
Condensed preview — 5 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (32K chars).
[
{
"path": ".gitignore",
"chars": 59,
"preview": "*.DS_Store\nnpm-debug.log*\nnode_modules\n.npm\nThumbs.db\n.idea"
},
{
"path": "README.md",
"chars": 3238,
"preview": "# Angular 2 TypeScript Live Templates (Snippets) for WebStorm\n\nThis script convert Angular 2 for TypeScript and HTML sni"
},
{
"path": "dist/ng2-templates.xml",
"chars": 23675,
"preview": "<templateSet group=\"Angular2 TypeScript Live Templates\">\n <template name=\"a-component\" value=\"import { Component, OnI"
},
{
"path": "package.json",
"chars": 651,
"preview": "{\n \"name\": \"ng2-webstorm-snippets\",\n \"version\": \"2.0.0\",\n \"description\": \"Angular 2 TypeScript snippets for WebStorm "
},
{
"path": "src/app.js",
"chars": 2709,
"preview": "'use strict';\nconst fs = require('fs');\nconst escape = require('escape-html');\n\nconst TYPESCRIPT_FILE = `${__dirname}/.."
}
]
About this extraction
This page contains the full source code of the MrZaYaC/ng2-webstorm-snippets GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 5 files (29.6 KB), approximately 8.5k tokens, and a symbol index with 3 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.