Gagan Jakhotiya gaganjakhotiya

🏠

Working from home

Source controlled

gaganjakhotiya / webpack.config.js

Last active October 27, 2017 14:46

Webpack Config for Lazy Loading

	const path = require('path')
	const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

	const BUNDLE_LOADER_RULES = [
	{
	test: /.\/admin\/.\.widget\.jsx$/,
	use: [
	{
	loader: 'bundle-loader',
	options: {

gaganjakhotiya / renderWidget.js

Created October 27, 2017 14:39

Render Lazy Widgets

	import React from 'react'
	import ReactDOM from 'react-dom'
	import getLazyComponent from './getLazyComponent'

	function renderWidget(domSelector, widgetName, props) {
	ReactDOM.render(
	React.createElement(getLazyComponent(widgetName, props)),
	document.querySelector(domSelector)
	)
	}

gaganjakhotiya / getLazyComponent.js

Created October 27, 2017 14:08

Use Lazy Widget

	import React from 'react'
	import widgetMap from './widgetMap'

	function getLazyComponent(widgetName, defaultProps, loader = 'loading...') {
	if (!widgetMap[widgetName])
	throw 'WidgetNotFound: Provided widget name does not exist.'

	return (
	class LoaderWrapper extends React.Component {
	static defaultProps = defaultProps

gaganjakhotiya / widgetMap.js

Last active October 27, 2017 14:54

Prepare Widget Map

	const widgetMap = {}
	const requireContext = require.context('../src', true, /\.widget.jsx$/)
	const modulesPathList = requireContext.keys()
	const widgetNameRegex = /[a-z-A-Z]+(?=\.widget\.jsx$)/
	for (const path of modulesPathList) {
	widgetMap[widgetNameRegex.exec(path)[0]] = requireContext(path)
	}

	export default widgetMap

gaganjakhotiya / index.html

Last active October 27, 2017 14:50

Widget Driven Development

	<html>
	<head>
	<title>WDD</title>
	</head>
	<body>
	<div id="content"></div>
	<script src="./build/vendor.bundle.js"></script>
	<script src="./build/index.bundle.js"></script>
	<script>
	window.renderWidget('#content', 'user')