Skip to content

Instantly share code, notes, and snippets.

Avatar

Lakshya Ranganath lakshyaranganath

View GitHub Profile
View dawm.js
const h = (type, props, ...children) =>
({ type, props, children });
/* -------------------- */
/* Creating */
/* -------------------- */
/* using h */
const App = (props) => h('div', null, 'hello');
@lakshyaranganath
lakshyaranganath / Accordion.js
Last active Sep 17, 2017
Compound Components: Accordion
View Accordion.js
import React from 'react';
import cn from 'classnames';
import './accordion.css';
class List extends React.Component {
state = {
open: 0,
}
toggleSection = (index) => () => {
@lakshyaranganath
lakshyaranganath / fragments.js
Last active Sep 11, 2017
inlining-asynchronous-css
View fragments.js
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,
},
View html.js
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>
View Text.js
import React, { PropTypes } from 'react';
import cn from 'classnames';
const Text = ({
className,
tag,
preview,
previewStyle,
children,
...props
View fragments.js
// 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)
View manifest.json
{
"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": [{
View webpack.js
resolve: {
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat',
},
},
View html.js
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}">`}
@lakshyaranganath
lakshyaranganath / reactMiddleware.js
Last active Sep 11, 2017
vendor-and-manifest-splitting
View reactMiddleware.js
//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>