JSFiddle - React, Tailwind, and code Playground

by dine

HTML

<script src="https://cdn.rawgit.com/developit/a60ee5af1c246a2b5535/raw/988b7d5bc680dfdd23fc1bee53e3abc4e5c5d6e2/linky.js?repo=developit/jsxobj&amp;/badge"></script>

CSS

body{font:14px menlo,courier,monospace;white-space:pre;}

Babel + JSX

/* Lib: git.io/jsxobj */

/** @jsx h */
function h(name, attrs, ...children) {
	let obj = { name, ...attrs };
	if (typeof name==='function') obj = name(obj);
	[].concat(...children).forEach( child => {
		let { name } = child;
		if (name) {
			obj[name] = child;
			delete child.name;
		}
		else obj.value = child;
	});
	return obj;
}

// example of an import'd plugin
const CustomPlugin = config => ({
	...config,
	name: 'custom-plugin'
});

const CONFIG = (
	<webpack target="web" watch>
		<entry path="src/index.js" />
		<resolve>
			<alias {...{
				react: 'preact-compat',
				'react-dom': 'preact-compat'
			}} />
		</resolve>
		<plugins>
			<uglify-js opts={{
				compression: true,
				mangle: false
			}} />
			<CustomPlugin foo="bar" />
		</plugins>
	</webpack>
);

document.body.textContent = JSON.stringify(CONFIG, 0, '  ');