Skip to content

Instantly share code, notes, and snippets.


James Gillmore faceyspacey

View GitHub Profile
faceyspacey /
Last active Dec 10, 2019
how Respond Framework solves the same stuff as Concurrent React, but better without an API
  home: '/',
  login: '/login',
  dashboard: {
    path: '/dashboard',
    module: createModule({
      settings: '/settings',
      myAccount: '/my-account',
    }, {
faceyspacey / camtwist_crash_report.txt
Created Aug 3, 2019
Camtwist Crash Report (OSX El Capitan 10.11.6, Camtwist 3.4.3)
View camtwist_crash_report.txt
Process: CamTwist [1578]
Path: /Applications/CamTwist/
Identifier: com.allocinit.CamTwist
Version: 3.4.3 (3.4.3)
Code Type: X86-64 (Native)
Parent Process: ??? [1]
Responsible: CamTwist [1578]
User ID: 501
Date/Time: 2019-08-02 18:24:51.316 -0700
faceyspacey / simple-functional-hypothetical-react-example.js
Last active Apr 24, 2019
Simple Functional Hypothetical React Example
View simple-functional-hypothetical-react-example.js
import { Box } from 'respond'
export function Items(props) {
return Box({
style: { margin: 20, padding: 10 },
children: [
Item({ name: 'svelte' }),
Item({ name: 'react' }),
Item({ name: 'vue' }),
faceyspacey / respond-plus-hooks-modal.js
Last active Apr 8, 2019
Respond Plus Hooks Modal
View respond-plus-hooks-modal.js
const MyRespondModal = (props, state, actions) => (
const Modal = ({ visible, text, onClose, onSubmit }) => {
faceyspacey / respond-modular-components.js
Last active Apr 8, 2019
Respond Modular Components
View respond-modular-components.js
export default createApp({
components: {
App: (props, { location }) => {
const Component = location.components.list.ComponentWithHoistedDataDeps
return Component ? <Component /> : <Spinner />
routes: {
path: '/list/:category',
faceyspacey / respond-framework-statecharts.js
Last active Mar 28, 2019
Respond Framework support for Statecharts
View respond-framework-statecharts.js
import { testGenerator } from 'respond-framework/test'
const routes = {
LOGIN: '/login',
SIGNUP: '/signup',
POST: '/post/:slug',
path: '/',
next: {
LOGIN: request => !!request.getState().cookies.existingUser,
faceyspacey /
Last active Apr 25, 2019
Respond Framework Walkthrough

Respond Framework Walkthrough

Respond Framework is what happens if you build Redux & first-class concerns for routing into React, plus take a page from the traditional server-side MVC playbook when it comes to side-effects.

Here's a quick overview of the features and usage in Respond Framework.


faceyspacey /
Last active Mar 23, 2019
Example of our automatically code-split manifest

Our Manifest

Below is our manifest which has the information of every route the app has. It's statically generated by our babel-plugin at compile time.

It has the absolute minimal amount of information necessary so that it's possible for any route to dispatch actions to any other route.

Since createScene() generates action creators from simply our routesMap types/keys, that's all we need to generate ALL ACTIONS. Well, there is a few small edge cases, but you got the idea.

faceyspacey /
Last active Mar 15, 2019
BRAINSTORM: Remixx Modules is also all about automatic splitting across routes + modules -- our own special manifest is the key

How we assign components to modules

This insures each component only can access the state from the module its part of.

  1. here's the intermediary data structure we generate in a single babel pass:
faceyspacey / code-splitting.js
Last active Mar 13, 2019
Rudy custom code-splitting middleware (split reducers, components, routes, libs)
View code-splitting.js
// implementation 1
const load = (api) => async (req, next) => {
const { route, action } = req
const hasLoad = route && route.load
if (!hasLoad) return next()
const { components, reducers, chunks, ...res } = await route.load(req) || {}