feat(playground): refactor demo to new ngMetadata api

playground/app/app.ts

@@ -1,5 +1,5 @@
 import * as angular from 'angular';
-import { provide, makeDirective, makePipe } from 'ng-metadata/ng-metadata';
+import { provide } from 'ng-metadata/core';
 
 import { TodoAppCmp } from './components/todo-app.component';
 import { TodoItemCmp } from './components/todo-item.component';
@@ -13,12 +13,9 @@ import { ElementReadyDirective } from './directives/element-ready.directive';
 
 export const AppModule = angular.module( 'app', [] )
 
-  .directive( provide( TodoAppCmp ), makeDirective( TodoAppCmp ) )
-  .directive( provide( AddTodoCmp ), makeDirective( AddTodoCmp ) )
-  .directive( provide( TodoItemCmp ), makeDirective( TodoItemCmp ) )
-
-  .filter( provide( RemainingTodosPipe ), makePipe( RemainingTodosPipe ) )
-
-  .service( provide( TodoStore ), TodoStore )
-
-  .directive( provide( ElementReadyDirective ), makeDirective( ElementReadyDirective ) );
+  .directive( ...provide( TodoAppCmp ) )
+  .directive( ...provide( AddTodoCmp ) )
+  .directive( ...provide( TodoItemCmp ) )
+  .filter( ...provide( RemainingTodosPipe ) )
+  .service( ...provide( TodoStore ) )
+  .directive( ...provide( ElementReadyDirective ) );

playground/app/components/add-todo.component.ts

@@ -1,4 +1,4 @@
-import { Component, Output } from 'ng-metadata/ng-metadata';
+import { Component, Output } from 'ng-metadata/core';
 import { TodoModel } from '../stores/todoStore.service.ts';
 
 @Component({

playground/app/components/todo-app.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from 'ng-metadata/ng-metadata';
+import { Component, Inject } from 'ng-metadata/core';
 import { TodoModel, TodoStore } from '../stores/todoStore.service';
 
 @Component( {

playground/app/components/todo-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output } from 'ng-metadata/ng-metadata';
+import { Component, Input, Output } from 'ng-metadata/core';
 import { TodoModel } from '../stores/todoStore.service';
 
 @Component({

playground/app/directives/element-ready.directive.ts

@@ -1,4 +1,4 @@
-import { Inject, Directive, AfterContentInit } from 'ng-metadata/ng-metadata';
+import { Inject, Directive, AfterContentInit } from 'ng-metadata/core';
 
 type MDLcomponentHandler = {
   upgradeAllRegistered()

playground/app/main.ts

@@ -1,5 +1,5 @@
 //main entry point
-import {bootstrap} from 'ng-metadata/ng-metadata';
+import {bootstrap} from 'ng-metadata/platform';
 import {AppModule} from './app';
 
 bootstrap(AppModule);

playground/app/pipes/remainingTodos.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe } from 'ng-metadata/ng-metadata';
+import { Pipe } from 'ng-metadata/core';
 import { TodoModel } from '../stores/todoStore.service';
 
 @Pipe( {

playground/app/stores/todoStore.service.ts

@@ -0,0 +1,39 @@
+import {Injectable} from 'ng-metadata/core';
+
+export type TodoModel = {
+  label: string,
+  complete: boolean
+}
+
+@Injectable()
+export class TodoStore {
+
+  // have some dummy data for the todo list
+  // complete property with Boolean values to display
+  // finished todos
+  private _todos: TodoModel[] = [
+    {
+      label: 'Learn Angular',
+      complete: false
+    }, {
+      label: 'Deploy to S3',
+      complete: true
+    }, {
+      label: 'Rewrite Todo Component',
+      complete: true
+    }
+  ];
+
+  get todos() {
+
+    return angular.copy( this._todos );
+
+  }
+
+  set todos( value ) {
+
+    this._todos = angular.copy( value );
+
+  }
+
+}

playground/index.html

@@ -13,7 +13,7 @@
     System.config( {
       baseURL: '/',
       paths: {
-        "npm:*": "../../node_modules/*"
+        'npm:*': '../../node_modules/*'
       },
       meta: {
         "npm:angular": {
@@ -25,7 +25,7 @@
       map: {
         app: "./app",
         angular: 'npm:angular',
-        'ng-metadata/ng-metadata': '/../../'
+        'ng-metadata': '/../../'
       },
       //packages defines our app package
       packages: {
@@ -35,8 +35,15 @@
         angular: {
           main:'./angular'
         },
-        'ng-metadata/ng-metadata': {
-          main: './ng-metadata'
+        'ng-metadata':{
+          map:{
+            '/core':{
+              main: 'core.js'
+            },
+            '/platform':{
+              main: './platform.js'
+            }
+          }
         }
       }
     } );

playground/ng-metadata.legacy.d.ts

@@ -1,16 +1,34 @@
-declare module ngMetadata{
+declare module ngMetadataPlatform{
 
   type AppRoot = string | Element | Document;
   function bootstrap(ngModule: ng.IModule, {element, strictDi}?: {
     element?: AppRoot;
     strictDi?: boolean;
   }): void;
 
-  function provide(Type: any, {useAlias}?: {
-    useAlias?: string;
-  }): string;
-  function makeDirective(Type: any): ng.IDirectiveFactory;
-  function makePipe(Type: any): ($injector: ng.auto.IInjectorService) => any;
+}
+declare module ngMetadataCore{
+
+  export interface Type extends Function {}
+
+  export class OpaqueToken {
+    private _desc;
+    constructor(_desc: string);
+    desc: string;
+    toString(): string;
+  }
+
+  export type ProviderType = Type | string | OpaqueToken;
+  /**
+   * should extract the string token from provided Type and add $inject angular 1 annotation to constructor if @Inject
+   * was used
+   * @param type
+   * @returns {string}
+   */
+  export function provide(type: ProviderType, {useClass, useValue}?: {
+    useClass?: Type;
+    useValue?: any;
+  }): [string, Type];
 
   function Directive({selector, legacy}: {
     selector: string;
@@ -88,6 +106,9 @@ declare module ngMetadata{
   }
 
 }
-declare module "ng-metadata/ng-metadata" {
-  export = ngMetadata;
+declare module "ng-metadata/core" {
+  export = ngMetadataCore;
+}
+declare module "ng-metadata/platform" {
+  export = ngMetadataPlatform;
 }