trxcllnt/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
console.clear();

import { Observable } from 'rxjs';
import { Model } from '@graphistry/falcor';

const m = new Model({ source: getDataSource() });
const get1 = Observable.from(m.get(['items', 'length'], ['items', {to: 1}, 'title']).progressively());
const get2 = Observable.from(m.get(['items', 'length'], ['items', {to: 2}, 'title']).progressively());

Observable.concat(
  get1.do((x) => console.log(`get1:`, x.json.$__status, x.json.toString())),
  get2.do((x) => console.log(`get2:`, x.json.$__status, x.json.toString()))
)
.subscribe();

function getDataSource() {
  const fragments = [{
    paths: [['items', { to: 1 }, 'title'],['items', 'length']],
    jsonGraph: {
      items: {
        0: { $type: 'ref', value: ['item', 'a'] },
        1: { $type: 'ref', value: ['item', 'b'] },
        length: 50
      },
      item: {
        a: { title: 'Item A' },
        b: { title: 'Item B' }
      }
    }
  }, {
    paths: [['items', 2, 'title']],
    jsonGraph: {
      items: {
        2: { $type: 'ref', value: ['item', 'c'] }
      },
      item: {
        c: { title: 'Item C' }
      }
    }
  }];
  return {
    i: 0,
    get() {
      console.log(`dataSource get ${this.i}`);
      return Observable
        .of(fragments[this.i++ % fragments.length])
        .delay(1000);
    }
  };
}

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "rxjs": "5.4.3",
    "@graphistry/falcor": "2.9.7"
  }
}

## transpiled.js
'use strict';

var _rxjs = require('rxjs');

var _falcor = require('@graphistry/falcor');

console.clear();

var m = new _falcor.Model({ source: getDataSource() });
var get1 = _rxjs.Observable.from(m.get(['items', 'length'], ['items', { to: 1 }, 'title']).progressively());
var get2 = _rxjs.Observable.from(m.get(['items', 'length'], ['items', { to: 2 }, 'title']).progressively());

_rxjs.Observable.concat(get1.do(function (x) {
  return console.log('get1:', x.json.$__status, x.json.toString());
}), get2.do(function (x) {
  return console.log('get2:', x.json.$__status, x.json.toString());
})).subscribe();

function getDataSource() {
  var fragments = [{
    paths: [['items', { to: 1 }, 'title'], ['items', 'length']],
    jsonGraph: {
      items: {
        0: { $type: 'ref', value: ['item', 'a'] },
        1: { $type: 'ref', value: ['item', 'b'] },
        length: 50
      },
      item: {
        a: { title: 'Item A' },
        b: { title: 'Item B' }
      }
    }
  }, {
    paths: [['items', 2, 'title']],
    jsonGraph: {
      items: {
        2: { $type: 'ref', value: ['item', 'c'] }
      },
      item: {
        c: { title: 'Item C' }
      }
    }
  }];
  return {
    i: 0,
    get: function get() {
      console.log('dataSource get ' + this.i);
      return _rxjs.Observable.of(fragments[this.i++ % fragments.length]).delay(1000);
    }
  };
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	</body>
	</html>
	console.clear();

	import { Observable } from 'rxjs';
	import { Model } from '@graphistry/falcor';

	const m = new Model({ source: getDataSource() });
	const get1 = Observable.from(m.get(['items', 'length'], ['items', {to: 1}, 'title']).progressively());
	const get2 = Observable.from(m.get(['items', 'length'], ['items', {to: 2}, 'title']).progressively());

	Observable.concat(
	get1.do((x) => console.log(`get1:`, x.json.$__status, x.json.toString())),
	get2.do((x) => console.log(`get2:`, x.json.$__status, x.json.toString()))
	)
	.subscribe();

	function getDataSource() {
	const fragments = [{
	paths: [['items', { to: 1 }, 'title'],['items', 'length']],
	jsonGraph: {
	items: {
	0: { $type: 'ref', value: ['item', 'a'] },
	1: { $type: 'ref', value: ['item', 'b'] },
	length: 50
	},
	item: {
	a: { title: 'Item A' },
	b: { title: 'Item B' }
	}
	}
	}, {
	paths: [['items', 2, 'title']],
	jsonGraph: {
	items: {
	2: { $type: 'ref', value: ['item', 'c'] }
	},
	item: {
	c: { title: 'Item C' }
	}
	}
	}];
	return {
	i: 0,
	get() {
	console.log(`dataSource get ${this.i}`);
	return Observable
	.of(fragments[this.i++ % fragments.length])
	.delay(1000);
	}
	};
	}
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"rxjs": "5.4.3",
	"@graphistry/falcor": "2.9.7"
	}
	}
	'use strict';

	var _rxjs = require('rxjs');

	var _falcor = require('@graphistry/falcor');

	console.clear();

	var m = new _falcor.Model({ source: getDataSource() });
	var get1 = _rxjs.Observable.from(m.get(['items', 'length'], ['items', { to: 1 }, 'title']).progressively());
	var get2 = _rxjs.Observable.from(m.get(['items', 'length'], ['items', { to: 2 }, 'title']).progressively());

	_rxjs.Observable.concat(get1.do(function (x) {
	return console.log('get1:', x.json.$__status, x.json.toString());
	}), get2.do(function (x) {
	return console.log('get2:', x.json.$__status, x.json.toString());
	})).subscribe();

	function getDataSource() {
	var fragments = [{
	paths: [['items', { to: 1 }, 'title'], ['items', 'length']],
	jsonGraph: {
	items: {
	0: { $type: 'ref', value: ['item', 'a'] },
	1: { $type: 'ref', value: ['item', 'b'] },
	length: 50
	},
	item: {
	a: { title: 'Item A' },
	b: { title: 'Item B' }
	}
	}
	}, {
	paths: [['items', 2, 'title']],
	jsonGraph: {
	items: {
	2: { $type: 'ref', value: ['item', 'c'] }
	},
	item: {
	c: { title: 'Item C' }
	}
	}
	}];
	return {
	i: 0,
	get: function get() {
	console.log('dataSource get ' + this.i);
	return _rxjs.Observable.of(fragments[this.i++ % fragments.length]).delay(1000);
	}
	};
	}