faceyspacey

Valtio - How it Works!

So the way Valtio works is the proxy() function is passed an object, which it wraps in a proxy via proxyFunction(). This proxy has a trap for "set" and "deleteProperty" which notifies interested listeners whenever a value is set on any of the keys of the object.

If the proxy finds that you assign another object, it recursively calls proxyFunction again with this object, wrapping it in another similar proxy, in case it too has values assigned to its keys. And so on. On first call to proxy() the entire object is traversed, applying proxy traps to nested objects.

Thereafter, whenever a value is assigned to a key, subscribed listeners to those keys are called recursively up to the top of the object, finalizing with a call to the callback supplied to useSyncExternalStore in useSnapshot hooks, resulting in a re-render of its containing component, if that component accessed changed keys.

The way the subscription mechanism works is that when useSnapshot subscribes to the proxy, it recurs

faceyspacey

createModule({
  home: '/',
  login: '/login',
  dashboard: {
    path: '/dashboard',
    module: createModule({
      settings: '/settings',
      myAccount: '/my-account',
    }, {

faceyspacey

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

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

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

export default createApp({
  components: {
    App: (props, { location }) => {
      const Component = location.components.list.ComponentWithHoistedDataDeps
      return Component ? <Component /> : <Spinner />
    },
  },
  routes: {
    LIST: {
      path: '/list/:category',

faceyspacey

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

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

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

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: