tusharmath/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>

</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

import jss from 'jss'
import preset from 'jss-preset-default'
import h from 'hyperscript'

jss.setup(preset())

const containerStyles = {
  'container': {
    backgroundColor: '#DDD',
    padding: '30px'
  },
  touchMove: {
    backgroundColor: '#FA0'
  }
}
const playlistStyles = {
  'playlist': {
    color: '#F00'
  }
}

const playlistStyles2 = {
  'playlist': {
    color: '#00F'
  }
}

const playlistSheet = jss.createStyleSheet(playlistStyles)
playlistSheet.addRules(playlistStyles2)

const containerSheet = jss.createStyleSheet(containerStyles)

playlistSheet.attach()
containerSheet.attach()

const css0 = containerSheet.classes
const css1 = playlistSheet.classes

const view =h(`div.${css0.container}`,
  h(`div.${css1.playlist}`, 'hello'),
  h(`div.${css1.playlist}`, 'World')
)

document.body.appendChild(view)

const containerEL = view

let added = false
setInterval(function () {
  if(added) {
    containerEL.classList.remove(css0.touchMove)
    added = false
  }
  else {
    containerEL.classList.add(css0.touchMove)
    added = true
  }
}, 1000)

## package.json
{
  "name": "esnextbin-sketch",
  "dependencies": {
    "jss": "5.4.0",
    "jss-preset-default": "0.2.0",
    "hyperscript": "1.2.2"
  },
  "version": "0.0.0"
}

## transpiled.js
'use strict';

var _jss = require('jss');

var _jss2 = _interopRequireDefault(_jss);

var _jssPresetDefault = require('jss-preset-default');

var _jssPresetDefault2 = _interopRequireDefault(_jssPresetDefault);

var _hyperscript = require('hyperscript');

var _hyperscript2 = _interopRequireDefault(_hyperscript);

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

_jss2.default.setup((0, _jssPresetDefault2.default)()); // write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var containerStyles = {
  'container': {
    backgroundColor: '#DDD',
    padding: '30px'
  },
  touchMove: {
    backgroundColor: '#FA0'
  }
};
var playlistStyles = {
  'playlist': {
    color: '#F00'
  }
};

var playlistStyles2 = {
  'playlist': {
    color: '#00F'
  }
};

var playlistSheet = _jss2.default.createStyleSheet(playlistStyles);
playlistSheet.addRules(playlistStyles2);

var containerSheet = _jss2.default.createStyleSheet(containerStyles);

playlistSheet.attach();
containerSheet.attach();

var css0 = containerSheet.classes;
var css1 = playlistSheet.classes;

var view = (0, _hyperscript2.default)('div.' + css0.container, (0, _hyperscript2.default)('div.' + css1.playlist, 'hello'), (0, _hyperscript2.default)('div.' + css1.playlist, 'World'));

document.body.appendChild(view);

var containerEL = view;

var added = false;
setInterval(function () {
  if (added) {
    containerEL.classList.remove(css0.touchMove);
    added = false;
  } else {
    containerEL.classList.add(css0.touchMove);
    added = true;
  }
}, 1000);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>

	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	import jss from 'jss'
	import preset from 'jss-preset-default'
	import h from 'hyperscript'

	jss.setup(preset())

	const containerStyles = {
	'container': {
	backgroundColor: '#DDD',
	padding: '30px'
	},
	touchMove: {
	backgroundColor: '#FA0'
	}
	}
	const playlistStyles = {
	'playlist': {
	color: '#F00'
	}
	}

	const playlistStyles2 = {
	'playlist': {
	color: '#00F'
	}
	}

	const playlistSheet = jss.createStyleSheet(playlistStyles)
	playlistSheet.addRules(playlistStyles2)

	const containerSheet = jss.createStyleSheet(containerStyles)

	playlistSheet.attach()
	containerSheet.attach()

	const css0 = containerSheet.classes
	const css1 = playlistSheet.classes

	const view =h(`div.${css0.container}`,
	h(`div.${css1.playlist}`, 'hello'),
	h(`div.${css1.playlist}`, 'World')
	)

	document.body.appendChild(view)

	const containerEL = view

	let added = false
	setInterval(function () {
	if(added) {
	containerEL.classList.remove(css0.touchMove)
	added = false
	}
	else {
	containerEL.classList.add(css0.touchMove)
	added = true
	}
	}, 1000)
	{
	"name": "esnextbin-sketch",
	"dependencies": {
	"jss": "5.4.0",
	"jss-preset-default": "0.2.0",
	"hyperscript": "1.2.2"
	},
	"version": "0.0.0"
	}
	'use strict';

	var _jss = require('jss');

	var _jss2 = _interopRequireDefault(_jss);

	var _jssPresetDefault = require('jss-preset-default');

	var _jssPresetDefault2 = _interopRequireDefault(_jssPresetDefault);

	var _hyperscript = require('hyperscript');

	var _hyperscript2 = _interopRequireDefault(_hyperscript);

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

	_jss2.default.setup((0, _jssPresetDefault2.default)()); // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var containerStyles = {
	'container': {
	backgroundColor: '#DDD',
	padding: '30px'
	},
	touchMove: {
	backgroundColor: '#FA0'
	}
	};
	var playlistStyles = {
	'playlist': {
	color: '#F00'
	}
	};

	var playlistStyles2 = {
	'playlist': {
	color: '#00F'
	}
	};

	var playlistSheet = _jss2.default.createStyleSheet(playlistStyles);
	playlistSheet.addRules(playlistStyles2);

	var containerSheet = _jss2.default.createStyleSheet(containerStyles);

	playlistSheet.attach();
	containerSheet.attach();

	var css0 = containerSheet.classes;
	var css1 = playlistSheet.classes;

	var view = (0, _hyperscript2.default)('div.' + css0.container, (0, _hyperscript2.default)('div.' + css1.playlist, 'hello'), (0, _hyperscript2.default)('div.' + css1.playlist, 'World'));

	document.body.appendChild(view);

	var containerEL = view;

	var added = false;
	setInterval(function () {
	if (added) {
	containerEL.classList.remove(css0.touchMove);
	added = false;
	} else {
	containerEL.classList.add(css0.touchMove);
	added = true;
	}
	}, 1000);