diff --git a/.gitignore b/.gitignore index 20c42fa..1f3a99c 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,9 @@ logs # Node files node_modules +# Built ngc AOT stuff +factories + # Built demo files demo/public/style.css demo/public/bundle.js diff --git a/demo/package.json b/demo/package.json index d9a64a8..60a45c3 100755 --- a/demo/package.json +++ b/demo/package.json @@ -33,7 +33,7 @@ }, "devDependencies": { "gh-pages": "^0.11.0", - "node-sass": "^3.10.0", + "node-sass": "^3.10.1", "ts-loader": "^0.8.2", "typescript": "^2.0.3", "webpack": "^1.13.2", diff --git a/lib/index.d.ts b/lib/index.d.ts index fa14a76..53942ab 100644 --- a/lib/index.d.ts +++ b/lib/index.d.ts @@ -1,4 +1,2 @@ -import InlineSVGDirective from './inline-svg.directive'; -export { InlineSVGDirective }; export declare class InlineSVGModule { } diff --git a/lib/index.js b/lib/index.js index c304f39..b2c5c7e 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,28 +1,18 @@ "use strict"; -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -var __metadata = (this && this.__metadata) || function (k, v) { - if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); -}; var core_1 = require('@angular/core'); var http_1 = require('@angular/http'); var inline_svg_directive_1 = require('./inline-svg.directive'); -exports.InlineSVGDirective = inline_svg_directive_1.default; var InlineSVGModule = (function () { function InlineSVGModule() { } - InlineSVGModule = __decorate([ - core_1.NgModule({ - declarations: [inline_svg_directive_1.default], - imports: [http_1.HttpModule], - exports: [inline_svg_directive_1.default] - }), - __metadata('design:paramtypes', []) - ], InlineSVGModule); + InlineSVGModule.decorators = [ + { type: core_1.NgModule, args: [{ + declarations: [inline_svg_directive_1.InlineSVGDirective], + imports: [http_1.HttpModule], + exports: [inline_svg_directive_1.InlineSVGDirective] + },] }, + ]; + InlineSVGModule.ctorParameters = []; return InlineSVGModule; }()); exports.InlineSVGModule = InlineSVGModule; diff --git a/lib/index.metadata.json b/lib/index.metadata.json new file mode 100644 index 0000000..c27e582 --- /dev/null +++ b/lib/index.metadata.json @@ -0,0 +1 @@ +{"__symbolic":"module","version":1,"metadata":{"InlineSVGModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./inline-svg.directive","name":"InlineSVGDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/http","name":"HttpModule"}],"exports":[{"__symbolic":"reference","module":"./inline-svg.directive","name":"InlineSVGDirective"}]}]}]}}} \ No newline at end of file diff --git a/lib/inline-svg.directive.d.ts b/lib/inline-svg.directive.d.ts index 720ada2..1a9d4a9 100644 --- a/lib/inline-svg.directive.d.ts +++ b/lib/inline-svg.directive.d.ts @@ -1,6 +1,6 @@ import { ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core'; -import SVGCache from './svg-cache.service'; -export default class InlineSVGDirective implements OnInit, OnChanges { +import { SVGCache } from './svg-cache.service'; +export declare class InlineSVGDirective implements OnInit, OnChanges { private _document; private _el; private _svgCache; @@ -10,7 +10,7 @@ export default class InlineSVGDirective implements OnInit, OnChanges { removeSVGAttributes: Array; onSVGInserted: EventEmitter; private _absUrl; - constructor(_document: HTMLDocument, _el: ElementRef, _svgCache: SVGCache); + constructor(_document: any, _el: ElementRef, _svgCache: SVGCache); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; private _insertSVG(); diff --git a/lib/inline-svg.directive.js b/lib/inline-svg.directive.js index 4c606ad..af89be1 100644 --- a/lib/inline-svg.directive.js +++ b/lib/inline-svg.directive.js @@ -1,16 +1,4 @@ "use strict"; -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -var __metadata = (this && this.__metadata) || function (k, v) { - if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); -}; -var __param = (this && this.__param) || function (paramIndex, decorator) { - return function (target, key) { decorator(target, key, paramIndex); } -}; var core_1 = require('@angular/core'); var platform_browser_1 = require('@angular/platform-browser'); var svg_cache_service_1 = require('./svg-cache.service'); @@ -37,19 +25,6 @@ var InlineSVGDirective = (function () { console.error('No URL passed to [inlineSVG]!'); return; } - if (this.inlineSVG.charAt(0) === '#' || this.inlineSVG.indexOf('.svg#') > -1) { - var elSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - var elSvgUse = document.createElementNS('http://www.w3.org/2000/svg', 'use'); - elSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); - elSvgUse.setAttribute('xlink:href', this.inlineSVG); - elSvg.appendChild(elSvgUse); - if (this.replaceContents) { - this._el.nativeElement.innerHTML = ''; - } - this._el.nativeElement.appendChild(elSvg); - this.onSVGInserted.emit(elSvg); - return; - } var absUrl = this._getAbsoluteUrl(this.inlineSVG); if (absUrl !== this._absUrl) { this._absUrl = absUrl; @@ -86,35 +61,24 @@ var InlineSVGDirective = (function () { } } }; - __decorate([ - core_1.Input(), - __metadata('design:type', String) - ], InlineSVGDirective.prototype, "inlineSVG", void 0); - __decorate([ - core_1.Input(), - __metadata('design:type', Boolean) - ], InlineSVGDirective.prototype, "replaceContents", void 0); - __decorate([ - core_1.Input(), - __metadata('design:type', Boolean) - ], InlineSVGDirective.prototype, "cacheSVG", void 0); - __decorate([ - core_1.Input(), - __metadata('design:type', Array) - ], InlineSVGDirective.prototype, "removeSVGAttributes", void 0); - __decorate([ - core_1.Output(), - __metadata('design:type', core_1.EventEmitter) - ], InlineSVGDirective.prototype, "onSVGInserted", void 0); - InlineSVGDirective = __decorate([ - core_1.Directive({ - selector: '[inlineSVG]', - providers: [svg_cache_service_1.default] - }), - __param(0, core_1.Inject(platform_browser_1.DOCUMENT)), - __metadata('design:paramtypes', [HTMLDocument, core_1.ElementRef, svg_cache_service_1.default]) - ], InlineSVGDirective); + InlineSVGDirective.decorators = [ + { type: core_1.Directive, args: [{ + selector: '[inlineSVG]', + providers: [svg_cache_service_1.SVGCache] + },] }, + ]; + InlineSVGDirective.ctorParameters = [ + { type: undefined, decorators: [{ type: core_1.Inject, args: [platform_browser_1.DOCUMENT,] },] }, + { type: core_1.ElementRef, }, + { type: svg_cache_service_1.SVGCache, }, + ]; + InlineSVGDirective.propDecorators = { + 'inlineSVG': [{ type: core_1.Input },], + 'replaceContents': [{ type: core_1.Input },], + 'cacheSVG': [{ type: core_1.Input },], + 'removeSVGAttributes': [{ type: core_1.Input },], + 'onSVGInserted': [{ type: core_1.Output },], + }; return InlineSVGDirective; }()); -Object.defineProperty(exports, "__esModule", { value: true }); -exports.default = InlineSVGDirective; +exports.InlineSVGDirective = InlineSVGDirective; diff --git a/lib/inline-svg.directive.metadata.json b/lib/inline-svg.directive.metadata.json new file mode 100644 index 0000000..1695426 --- /dev/null +++ b/lib/inline-svg.directive.metadata.json @@ -0,0 +1 @@ +{"__symbolic":"module","version":1,"metadata":{"InlineSVGDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[inlineSVG]","providers":[{"__symbolic":"reference","module":"./svg-cache.service","name":"SVGCache"}]}]}],"members":{"inlineSVG":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"replaceContents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cacheSVG":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"removeSVGAttributes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onSVGInserted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT"}]}],null,null],"parameters":[null,{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./svg-cache.service","name":"SVGCache"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"_insertSVG":[{"__symbolic":"method"}],"_getAbsoluteUrl":[{"__symbolic":"method"}],"_removeAttributes":[{"__symbolic":"method"}]}}}} \ No newline at end of file diff --git a/lib/svg-cache.service.d.ts b/lib/svg-cache.service.d.ts index 9dada4f..fb687e4 100644 --- a/lib/svg-cache.service.d.ts +++ b/lib/svg-cache.service.d.ts @@ -5,12 +5,12 @@ import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/finally'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/share'; -export default class SVGCache { +export declare class SVGCache { private _document; private _http; private static _cache; private static _inProgressReqs; - constructor(_document: HTMLDocument, _http: Http); + constructor(_document: any, _http: Http); getSVG(url: string, cache?: boolean): Observable; private _svgElementFromString(str); private _cloneSVG(svg); diff --git a/lib/svg-cache.service.js b/lib/svg-cache.service.js index 6aa1066..53fd5d9 100644 --- a/lib/svg-cache.service.js +++ b/lib/svg-cache.service.js @@ -1,16 +1,4 @@ "use strict"; -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -var __metadata = (this && this.__metadata) || function (k, v) { - if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); -}; -var __param = (this && this.__param) || function (paramIndex, decorator) { - return function (target, key) { decorator(target, key, paramIndex); } -}; var core_1 = require('@angular/core'); var http_1 = require('@angular/http'); var platform_browser_1 = require('@angular/platform-browser'); @@ -67,12 +55,13 @@ var SVGCache = (function () { SVGCache.prototype._cloneSVG = function (svg) { return svg.cloneNode(true); }; - SVGCache = __decorate([ - core_1.Injectable(), - __param(0, core_1.Inject(platform_browser_1.DOCUMENT)), - __metadata('design:paramtypes', [HTMLDocument, http_1.Http]) - ], SVGCache); + SVGCache.decorators = [ + { type: core_1.Injectable }, + ]; + SVGCache.ctorParameters = [ + { type: undefined, decorators: [{ type: core_1.Inject, args: [platform_browser_1.DOCUMENT,] },] }, + { type: http_1.Http, }, + ]; return SVGCache; }()); -Object.defineProperty(exports, "__esModule", { value: true }); -exports.default = SVGCache; +exports.SVGCache = SVGCache; diff --git a/lib/svg-cache.service.metadata.json b/lib/svg-cache.service.metadata.json new file mode 100644 index 0000000..a4db392 --- /dev/null +++ b/lib/svg-cache.service.metadata.json @@ -0,0 +1 @@ +{"__symbolic":"module","version":1,"metadata":{"SVGCache":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT"}]}],null],"parameters":[null,{"__symbolic":"reference","module":"@angular/http","name":"Http"}]}],"getSVG":[{"__symbolic":"method"}],"_svgElementFromString":[{"__symbolic":"method"}],"_cloneSVG":[{"__symbolic":"method"}]},"statics":{"_cache":{"__symbolic":"error","message":"Variable not initialized","line":12,"character":17},"_inProgressReqs":{"__symbolic":"error","message":"Variable not initialized","line":13,"character":17}}}}} \ No newline at end of file diff --git a/package.json b/package.json index ad583bf..6a27ce4 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "typings": "./lib/index.d.ts", "scripts": { "lint": "tslint src/**/*.ts", - "start": "npm run lint && tsc", + "start": "npm run lint && ngc -p tsconfig.json", "prepublish": "npm start" }, "peerDependencies": { @@ -41,9 +41,11 @@ "devDependencies": { "@angular/common": "^2.0.1", "@angular/compiler": "^2.0.1", + "@angular/compiler-cli": "^0.6.3", "@angular/core": "^2.0.1", "@angular/http": "^2.0.1", "@angular/platform-browser": "^2.0.1", + "@angular/platform-server": "^2.0.1", "rxjs": "5.0.0-beta.12", "tslint": "^3.15.1", "typescript": "^2.0.3", diff --git a/src/index.ts b/src/index.ts index 56f8d2e..c697115 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,9 +1,7 @@ import { NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; -import InlineSVGDirective from './inline-svg.directive'; - -export { InlineSVGDirective }; +import { InlineSVGDirective } from './inline-svg.directive'; @NgModule({ declarations: [InlineSVGDirective], diff --git a/src/inline-svg.directive.ts b/src/inline-svg.directive.ts index 8325ca8..54a4ea9 100644 --- a/src/inline-svg.directive.ts +++ b/src/inline-svg.directive.ts @@ -11,13 +11,13 @@ import { } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; -import SVGCache from './svg-cache.service'; +import { SVGCache } from './svg-cache.service'; @Directive({ selector: '[inlineSVG]', providers: [SVGCache] }) -export default class InlineSVGDirective implements OnInit, OnChanges { +export class InlineSVGDirective implements OnInit, OnChanges { @Input() inlineSVG: string; @Input() replaceContents: boolean = true; @Input() cacheSVG: boolean = true; @@ -28,7 +28,7 @@ export default class InlineSVGDirective implements OnInit, OnChanges { private _absUrl: string; constructor( - @Inject(DOCUMENT) private _document: HTMLDocument, + @Inject(DOCUMENT) private _document /*: HTMLDocument*/, private _el: ElementRef, private _svgCache: SVGCache) { } @@ -51,22 +51,22 @@ export default class InlineSVGDirective implements OnInit, OnChanges { } // Support for symbol ID - if (this.inlineSVG.charAt(0) === '#' || this.inlineSVG.indexOf('.svg#') > -1) { - const elSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - const elSvgUse = document.createElementNS('http://www.w3.org/2000/svg', 'use'); - elSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); - elSvgUse.setAttribute('xlink:href', this.inlineSVG); - elSvg.appendChild(elSvgUse); - - if (this.replaceContents) { - this._el.nativeElement.innerHTML = ''; - } - - this._el.nativeElement.appendChild(elSvg); - this.onSVGInserted.emit(elSvg); - - return; - } + // if (this.inlineSVG.charAt(0) === '#' || this.inlineSVG.indexOf('.svg#') > -1) { + // const elSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + // const elSvgUse = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + // elSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); + // elSvgUse.setAttribute('xlink:href', this.inlineSVG); + // elSvg.appendChild(elSvgUse); + + // if (this.replaceContents) { + // this._el.nativeElement.innerHTML = ''; + // } + + // this._el.nativeElement.appendChild(elSvg); + // this.onSVGInserted.emit(elSvg); + + // return; + // } // Get absolute URL, and check if it's actually new const absUrl = this._getAbsoluteUrl(this.inlineSVG); diff --git a/src/svg-cache.service.ts b/src/svg-cache.service.ts index f120fcb..a736202 100644 --- a/src/svg-cache.service.ts +++ b/src/svg-cache.service.ts @@ -9,12 +9,12 @@ import 'rxjs/add/operator/map'; import 'rxjs/add/operator/share'; @Injectable() -export default class SVGCache { +export class SVGCache { private static _cache: Map; private static _inProgressReqs: Map>; constructor( - @Inject(DOCUMENT) private _document: HTMLDocument, + @Inject(DOCUMENT) private _document /*: HTMLDocument*/, private _http: Http) { if (!SVGCache._cache) { SVGCache._cache = new Map(); diff --git a/tsconfig.json b/tsconfig.json index be131d7..6bc307a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,5 +14,8 @@ "src/**/*" ], "compileOnSave": false, - "buildOnSave": false + "buildOnSave": false, + "angularCompilerOptions": { + "genDir": "factories" + } }