Lakshya Ranganath whilelucky

whilelucky / dawm.js

Last active March 12, 2020 12:57

	const h = (type, props, ...children) =>
	({ type, props, children });

	/* -------------------- */
	/* Creating */
	/* -------------------- */

	/* using h */
	const App = (props) => h('div', null, 'hello');

whilelucky / Accordion.js

Last active September 17, 2017 03:01

Compound Components: Accordion

	import React from 'react';
	import cn from 'classnames';
	import './accordion.css';

	class List extends React.Component {
	state = {
	open: 0,
	}

	toggleSection = (index) => () => {

whilelucky / fragments.js

Last active September 11, 2017 06:55

inlining-asynchronous-css

	import assetsManifest from '../../build/client/assetsManifest.json';
	//read the styles into an assets object during server startup
	export const assets = Object.keys(assetsManifest)
	.reduce((o, entry) => ({
	...o,
	[entry]: {
	...assetsManifest[entry],
	styles: assetsManifest[entry].css
	? fs.readFileSync(`build/client/css/${assetsManifest[entry].css.split('/').pop()}`, 'utf8') : undefined,
	},

whilelucky / html.js

Last active September 30, 2017 15:36

dual-import

	import assetsManifest from '../../build/client/assetsManifest.json';

	lateChunk(app, head, initialState, route) {
	return `
	<style>${assets.main.styles}</style>
	// inline the current route's css and assign an id to it
	${!assets[route.name] ? '' : `<style id="${route.name}.css">${assets[route.name].styles}</style>`}
	</head>
	<body>
	<div id="root">${app}</div>

whilelucky / Text.js

Created August 23, 2017 07:33

interface-previews

	import React, { PropTypes } from 'react';
	import cn from 'classnames';

	const Text = ({
	className,
	tag,
	preview,
	previewStyle,
	children,
	...props

whilelucky / fragments.js

Last active July 3, 2017 05:28

service-worker

	// register the service worker after the onload event to prevent
	// bandwidth resource contention during the main and vendor js downloads
	export const scripts = {
	serviceWorker:
	`"serviceWorker" in window.navigator && window.addEventListener("load", function() {
	window.navigator.serviceWorker.register("/serviceWorker.js")
	.then(function(r) {
	console.log("ServiceWorker registration successful with scope: ", r.scope)
	}).catch(function(e) {
	console.error("ServiceWorker registration failed: ", e)

whilelucky / manifest.json

Created July 3, 2017 05:19

webapp-manifest

	{
	"name": "Treebo Hotels",
	"short_name": "Treebo",
	"description": "India's Top Rated Budget Hotel Chain",
	"theme_color": "#ffffff",
	"background_color": "#ffffff",
	"start_url": "/",
	"display": "standalone",
	"orientation": "portrait",
	"icons": [{

whilelucky / webpack.js

Created July 3, 2017 05:17

preact

whilelucky / html.js

Last active October 27, 2017 03:04

streaming

	earlyChunk(route) {
	return `
	<!doctype html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="${assets.main.css}">
	<link rel="preload" as="script" href="${assets.webpackManifest.js}">
	<link rel="preload" as="script" href="${assets.vendor.js}">
	<link rel="preload" as="script" href="${assets.main.js}">
	${!assets[route.name] ? '' : `<link rel="preload" as="script" href="${assets[route.name].js}">`}

whilelucky / reactMiddleware.js

Last active September 11, 2017 06:54

vendor-and-manifest-splitting

	//add the webpackManifest and vendor script files to your html
	<body>
	<div id="root">${app}</div>
	<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>
	<script src="${assets.webpackManifest.js}"></script>
	<script src="${assets.vendor.js}"></script>
	<script src="${assets.main.js}"></script>
	</body>