JSFiddle - React, Tailwind, and code Playground

by theianjones

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) {
        	if(obj[name]){
          	obj[name] = [obj[name], child].flat()
		      } else {
    		    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 from="react" to="preact-compat" />
			<alias from="react-dom" to="preact-compat" />

		</resolve>
		<plugins>
			<uglify-js opts={{
				compression: true,
				mangle: false
			}} />
			<CustomPlugin foo="bar" />
		</plugins>
	</webpack>
);

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