wclr/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
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import {run} from '@cycle/xstream-run'
import {makeDOMDriver, div, button} from '@cycle/dom'
import xs from 'xstream'
import delay from 'xstream/extra/delay'
import isolate from '@cycle/isolate'

const {combine, of, merge, periodic} = xs

const LoginX = () => {
  return {
    logged$: of({}).compose(delay(100)).startWith(false),
    DOM: of(div('.wrapper', []))
  }
}

const App = ({DOM}) => {

  let login = isolate(LoginX)({ DOM })

  DOM.select('button').events('click')
      .map((x) => {
      console.log('sidebar-mini toggle', x)
      //$('body').toggleClass('sidebar-mini', x)
      //$('body').toggleClass('sidebar-mini', x)
      //setTimeout(() => {
document.body.className = 'sidebar-mini'
      //}, 0)

      return x
    })
  .addListener({
    next: (m) => {console.log(m)},
    error: () => {},
    complete: () => {}
  })

  return {
    DOM: combine(
      login.DOM,
      login.logged$
    ).map(([loginDOM, logged]) => {
        if (!logged) {
          return loginDOM
          //return div('.wrapper', [])
        }
        return div('.wrapper', [
          button('click2')
        ])
      })
  }
}


run(App, {
  log: (message$) => message$.addListener({
    next: (m) => {console.log(m)},
    error: () => {},
    complete: () => {}
  }),
  DOM: makeDOMDriver('body')
})

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "@cycle/dom": "*",
  "xstream": "*",
  "@cycle/xstream-run": "*",
  "dependencies": {
    "@cycle/xstream-run": "3.1.0",
    "@cycle/dom": "12.2.5",
    "xstream": "6.4.1",
    "@cycle/isolate": "1.2.1",
    "babel-runtime": "6.11.6"
  }
}

## transpiled.js
'use strict';

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _xstreamRun = require('@cycle/xstream-run');

var _dom = require('@cycle/dom');

var _xstream = require('xstream');

var _xstream2 = _interopRequireDefault(_xstream);

var _delay = require('xstream/extra/delay');

var _delay2 = _interopRequireDefault(_delay);

var _isolate = require('@cycle/isolate');

var _isolate2 = _interopRequireDefault(_isolate);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var combine = _xstream2.default.combine; // write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var of = _xstream2.default.of;
var merge = _xstream2.default.merge;
var periodic = _xstream2.default.periodic;


var LoginX = function LoginX() {
  return {
    logged$: of({}).compose((0, _delay2.default)(100)).startWith(false),
    DOM: of((0, _dom.div)('.wrapper', []))
  };
};

var App = function App(_ref) {
  var DOM = _ref.DOM;


  var login = (0, _isolate2.default)(LoginX)({ DOM: DOM });

  DOM.select('button').events('click').map(function (x) {
    console.log('sidebar-mini toggle', x);
    //$('body').toggleClass('sidebar-mini', x)
    //$('body').toggleClass('sidebar-mini', x)
    //setTimeout(() => {
    document.body.className = 'sidebar-mini';
    //}, 0)

    return x;
  }).addListener({
    next: function next(m) {
      console.log(m);
    },
    error: function error() {},
    complete: function complete() {}
  });

  return {
    DOM: combine(login.DOM, login.logged$).map(function (_ref2) {
      var _ref3 = (0, _slicedToArray3.default)(_ref2, 2);

      var loginDOM = _ref3[0];
      var logged = _ref3[1];

      if (!logged) {
        return loginDOM;
        //return div('.wrapper', [])
      }
      return (0, _dom.div)('.wrapper', [(0, _dom.button)('click2')]);
    })
  };
};

(0, _xstreamRun.run)(App, {
  log: function log(message$) {
    return message$.addListener({
      next: function next(m) {
        console.log(m);
      },
      error: function error() {},
      complete: function complete() {}
    });
  },
  DOM: (0, _dom.makeDOMDriver)('body')
});
	<!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>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	import {run} from '@cycle/xstream-run'
	import {makeDOMDriver, div, button} from '@cycle/dom'
	import xs from 'xstream'
	import delay from 'xstream/extra/delay'
	import isolate from '@cycle/isolate'

	const {combine, of, merge, periodic} = xs

	const LoginX = () => {
	return {
	logged$: of({}).compose(delay(100)).startWith(false),
	DOM: of(div('.wrapper', []))
	}
	}

	const App = ({DOM}) => {

	let login = isolate(LoginX)({ DOM })

	DOM.select('button').events('click')
	.map((x) => {
	console.log('sidebar-mini toggle', x)
	//$('body').toggleClass('sidebar-mini', x)
	//$('body').toggleClass('sidebar-mini', x)
	//setTimeout(() => {
	document.body.className = 'sidebar-mini'
	//}, 0)

	return x
	})
	.addListener({
	next: (m) => {console.log(m)},
	error: () => {},
	complete: () => {}
	})

	return {
	DOM: combine(
	login.DOM,
	login.logged$
	).map(([loginDOM, logged]) => {
	if (!logged) {
	return loginDOM
	//return div('.wrapper', [])
	}
	return div('.wrapper', [
	button('click2')
	])
	})
	}
	}


	run(App, {
	log: (message$) => message$.addListener({
	next: (m) => {console.log(m)},
	error: () => {},
	complete: () => {}
	}),
	DOM: makeDOMDriver('body')
	})
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"@cycle/dom": "*",
	"xstream": "*",
	"@cycle/xstream-run": "*",
	"dependencies": {
	"@cycle/xstream-run": "3.1.0",
	"@cycle/dom": "12.2.5",
	"xstream": "6.4.1",
	"@cycle/isolate": "1.2.1",
	"babel-runtime": "6.11.6"
	}
	}
	'use strict';

	var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

	var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

	var _xstreamRun = require('@cycle/xstream-run');

	var _dom = require('@cycle/dom');

	var _xstream = require('xstream');

	var _xstream2 = _interopRequireDefault(_xstream);

	var _delay = require('xstream/extra/delay');

	var _delay2 = _interopRequireDefault(_delay);

	var _isolate = require('@cycle/isolate');

	var _isolate2 = _interopRequireDefault(_isolate);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var combine = _xstream2.default.combine; // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var of = _xstream2.default.of;
	var merge = _xstream2.default.merge;
	var periodic = _xstream2.default.periodic;


	var LoginX = function LoginX() {
	return {
	logged$: of({}).compose((0, _delay2.default)(100)).startWith(false),
	DOM: of((0, _dom.div)('.wrapper', []))
	};
	};

	var App = function App(_ref) {
	var DOM = _ref.DOM;


	var login = (0, _isolate2.default)(LoginX)({ DOM: DOM });

	DOM.select('button').events('click').map(function (x) {
	console.log('sidebar-mini toggle', x);
	//$('body').toggleClass('sidebar-mini', x)
	//$('body').toggleClass('sidebar-mini', x)
	//setTimeout(() => {
	document.body.className = 'sidebar-mini';
	//}, 0)

	return x;
	}).addListener({
	next: function next(m) {
	console.log(m);
	},
	error: function error() {},
	complete: function complete() {}
	});

	return {
	DOM: combine(login.DOM, login.logged$).map(function (_ref2) {
	var _ref3 = (0, _slicedToArray3.default)(_ref2, 2);

	var loginDOM = _ref3[0];
	var logged = _ref3[1];

	if (!logged) {
	return loginDOM;
	//return div('.wrapper', [])
	}
	return (0, _dom.div)('.wrapper', [(0, _dom.button)('click2')]);
	})
	};
	};

	(0, _xstreamRun.run)(App, {
	log: function log(message$) {
	return message$.addListener({
	next: function next(m) {
	console.log(m);
	},
	error: function error() {},
	complete: function complete() {}
	});
	},
	DOM: (0, _dom.makeDOMDriver)('body')
	});