Skip to content

Instantly share code, notes, and snippets.

View faceyspacey's full-sized avatar

James Gillmore faceyspacey

547 followers · 547 following
View GitHub Profile
@faceyspacey
faceyspacey / webpack-magic-comments-usage.js
Last active June 13, 2017 12:30
how to use Webpack magic comments to flush chunks with React Universal Component and Webpack Flush Chunks
export default webpackStats => (req, res) => {
const appString = ReactDOM.renderToString(<App />)
const chunkNames = flushChunkNames()
const assets = webpackStats.assetsByChunkName
const filesForChunk = chunk => assets[chunk]
const files = flatten(chunkNames.map(filesForChunk))
const scripts = files.filter(f => f.endsWith('.js'))
const stylesheets = files.filter(f => f.endsWith('.css'))
@faceyspacey
faceyspacey / redux-first-article-code.js
Last active June 16, 2017 06:58
code for redux-first router pre release article
routesMap: {
HOME: '/',
POST: '/feed/post/:id',
USER: '/users/:slug',
}
which I'm sure you're familiar with. But then what you can do is this:
store.dispatch({ type: 'HOME' })
@faceyspacey
faceyspacey / react-redux.flow.js
Created June 21, 2017 12:48 — forked from rsolomon/react-redux.flow.js
react-redux.flow.js
/** @flow */
import type { Dispatch, Store } from 'redux';
declare module 'react-redux' {
/*
S = State
A = Action
AS = AppState
@faceyspacey
faceyspacey / redux-first-router-interview.md
Last active December 2, 2019 09:41 — forked from bebraw/redux-first-router-interview.md
title redux-first-router - Just dispatch actions - Interview with James Gillmore
date 2017-xx-xx
headerImage /assets/img/XXX.jpg
keywords
interview

redux-first-router flow chart

TODO: I'll fill this up and link to your Twitter (@faceyspacey)

@faceyspacey
faceyspacey / asdf.js
Created July 7, 2017 22:40
import { flushChunkNames } from 'react-universal-component/server'
import flushChunks from 'webpack-flush-chunks'
export default ({ clientStats, outputPath }) => (req, res) => {
const app = ReactDOM.renderToString(<App />)
const chunkNames = flushChunkNames()
const { js, styles, cssHash } = flushChunks(clientStats, { chunkNames })
res.send(
`<!doctype html>
@faceyspacey
faceyspacey / foo.md
Created July 12, 2017 16:03

Edit Redux-First Router Demo

@faceyspacey
faceyspacey / codsandbox1.js
Created July 12, 2017 21:34
codsandbox1.js
import Tooltip from 'app/components/Tooltip';
import Switch from 'app/components/Switch';
<Tooltip
title={isProjectView ? 'Project View' : 'Current Module View'}
position="left"
>
<Switch right={isProjectView} onClick={toggleProjectView} />
</Tooltip>
</SwitchContainer>
@faceyspacey
faceyspacey / browserify-splitting-with-rudy.js
Last active July 22, 2017 09:15
quick example of promise.all in Rudy route thunk to get data + module
// src/components/App.js
window.ASYNC_COMPONENTS = {}
const App = () => ...
export default App
// src/routesMap.js
@faceyspacey
faceyspacey / browserify-rudy-example-with-components-in-store.js
Created July 22, 2017 09:15
browserify-rudy-example-with-components-in-store
const routesMap = {
ACTION_TYPE1: {
path: '/foo/:param1/:param2',
thunk: async (dispatch, getState) {
const someParams = getState().location.payload
const responses = await Promise.all([
import('./components/Foo'),
fetchData(someParams)
])
@faceyspacey
faceyspacey / isLoadingReducer.js
Created July 23, 2017 22:38
isLoadingReducer.js
const memory = {}
const isLoading = (state = false, action = {}, mem = memory) => {
switch (action.type) {
case 'LIST':
return !mem[action.payload.category]
case 'VIDEO':
return !mem[action.payload.slug]
case 'VIDEOS_FETCHED':
return !(mem[action.payload.category] = true)