Skip to content

Instantly share code, notes, and snippets.

Avatar

James Gillmore faceyspacey

View GitHub Profile
@faceyspacey
faceyspacey / respond-framework_vs_concurrent-react.md
Last active Dec 10, 2019
how Respond Framework solves the same stuff as Concurrent React, but better without an API
View respond-framework_vs_concurrent-react.md
createModule({
  home: '/',
  login: '/login',
  dashboard: {
    path: '/dashboard',
    module: createModule({
      settings: '/settings',
      myAccount: '/my-account',
    }, {
@faceyspacey
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/CamTwist.app/Contents/MacOS/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
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
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) => (
<Modal
visible={!!state.modalText}
text={state.modalText}
onClose={actions.cancel}
onSubmit={actions.confirm}
/>
)
const Modal = ({ visible, text, onClose, onSubmit }) => {
@faceyspacey
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: {
LIST: {
path: '/list/:category',
@faceyspacey
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',
HOME: {
path: '/',
next: {
LOGIN: request => !!request.getState().cookies.existingUser,
@faceyspacey
faceyspacey / respond-framework-walkthrough.md
Last active Apr 25, 2019
Respond Framework Walkthrough
View respond-framework-walkthrough.md

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.

Installation

@faceyspacey
faceyspacey / route-splitting-manifest.md
Last active Mar 23, 2019
Example of our automatically code-split manifest
View route-splitting-manifest.md

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
faceyspacey / remixx-modules-splitting-planning.md
Last active Mar 15, 2019
BRAINSTORM: Remixx Modules is also all about automatic splitting across routes + modules -- our own special manifest is the key
View remixx-modules-splitting-planning.md

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
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) || {}
You can’t perform that action at this time.