Pipes examples for Uri

pipes_examples.js

// app.ts
@Component({})
@View({})
class Main {
  myData : Mongo.Cursor<any>;
  
  constructor() {
    this.myData = MyCollection.find({});
  }
}

// Case 1: Data comes from Mongo.Cursor and you want to run an AngularJS 2.0 @Pipe on the data array
// app.html
<ul>
  <li *ngFor="#item in myData | convertToCustom"></li>
</ul>

// Case 2: You want to provide sort / filter in the client side, without using the find({}) options - users that comes
// from AngularJS environment does not want to learn how to orderBy / filter with find({}) and might want to use
// it just like they used to in AngularJS.


// The problem is that the Pipe "convertToCustom" expect to get an Array, but it gets the cursor instead
// and need to fetch from it - which means that it will run each Zone cycle, instead of using reactive Array.
// NgFor is the only one that uses Differs which means that your pipe should fetch, follow, watch and handle the Cursor,
// and return a JS Array and do the logic inside the Pipe.

// Solution ideas:
// 1. Abstract class for Pipe that you can extend and will provide logic for handling Mongo.Cursor and it's reactivity. 
// 2. Provide an array on the context instead of cursor - with a property annotation, for example: 
export function MongoCursor(target:Object, propertyKey:string | symbol):void {
  let dataArray = [];

  Object.defineProperty(target, propertyKey, {
    enumerable: true,
    configurable: false,
    get: function () {
      return dataArray;
    },
    set: function (newCursor) {
      if (newCursor instanceof Mongo.Cursor) {
        dataArray = newCursor.fetch();
      }
      else {
        throw new Error('The value of ' + propertyKey + ' cursor, must be Mongo.Cursor!');
      }
    }
  });
}

// This is JUST AN EXAMPLE - we need to provide an array and handle it like we done in Angular1-Meteor!