rtorr · May 5, 2017 21:29
diff --git a/.babelrc b/.babelrc
 {
  "presets": [
    "babili"
  ],
  "plugins": [
    [
      "transform-react-jsx",
      {
        "pragma": "h" // default pragma is React.createElement
      }
    ]
  ]
 }
diff --git a/element.js b/element.js
 export class Element{constructor(a,b,...c){const d=a?a:'div';this.el=document.createElement(d),this.props=b||{},this.props.children=c||[],this.render&&(this.children=this.render())}}export function h(a,b,...c){let d;switch(typeof a){case'string':d=new Element(a,b,c);break;case'object':d=a;break;case'function':d=a.prototype instanceof Element?new a:a();}return c&&(d.children=c,c.map((e)=>{return e?(e&&'object'==typeof e.el?d.el.append(e.el):d.el.append(e),e):null})),d}
diff --git a/index.html b/index.html
 <!doctype html>
 <html class="no-js" lang="">

 <head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <link rel="stylesheet" href="/public/css/index.css">
 </head>

 <body>
  <div id="app"></div>
  <script type="module" src="/build/main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
 import { h } from './lib/element.js';
 const mainEl = document.getElementById('app');

 var Foo = h(
  'div',
  { hello: 'bob', foo: 'cool' },
  'test ',
  h('p', null, 'also a test'),
  h('p', null, 'also a test', h('p', null, 'also a test'))
 );

 var Bar = _ => {
  const button = (
    <button hello={'bob'} foo={'cool'}>
      halp
    </button>
  );
  button.el.addEventListener(
    'click',
    e => {
      console.log('wat');
    },
    false
  );
  return button;
 };

 var b = (
  <div>
    hello world <Foo /><Bar />
  </div>
 );

 console.log(b, '~~~~~~~~~~~~~~~~~~~~\n', mainEl.appendChild(b.el));
diff --git a/package.json b/package.json
 {
  "name": "welp",
  "version": "1.0.0",
  "main": "build/main.js",
  "license": "MIT",
  "scripts": {
    "start": "babel src --out-dir build --watch"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-plugin-transform-react-jsx": "^6.24.1"
  }
 }
	{
	"presets": [
	"babili"
	],
	"plugins": [
	[
	"transform-react-jsx",
	{
	"pragma": "h" // default pragma is React.createElement
	}
	]
	]
	}
	<!doctype html>
	<html class="no-js" lang="">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<link rel="stylesheet" href="/public/css/index.css">
	</head>

	<body>
	<div id="app"></div>
	<script type="module" src="/build/main.js"></script>
	</body>
	</html>
	import { h } from './lib/element.js';
	const mainEl = document.getElementById('app');

	var Foo = h(
	'div',
	{ hello: 'bob', foo: 'cool' },
	'test ',
	h('p', null, 'also a test'),
	h('p', null, 'also a test', h('p', null, 'also a test'))
	);

	var Bar = _ => {
	const button = (
	<button hello={'bob'} foo={'cool'}>
	halp
	</button>
	);
	button.el.addEventListener(
	'click',
	e => {
	console.log('wat');
	},
	false
	);
	return button;
	};

	var b = (
	<div>
	hello world <Foo /><Bar />
	</div>
	);

	console.log(b, '~~~~~~~~~~~~~~~~~~~~\n', mainEl.appendChild(b.el));
	{
	"name": "welp",
	"version": "1.0.0",
	"main": "build/main.js",
	"license": "MIT",
	"scripts": {
	"start": "babel src --out-dir build --watch"
	},
	"devDependencies": {
	"babel-cli": "^6.24.1",
	"babel-plugin-transform-react-jsx": "^6.24.1"
	}
	}