threepointone

// this component freezes redux state for its children when `cold` is true
// after every render, it saves a snapshot of the last used redux state
// it also replacies the redux store with a 'proxy' store, which, when cold
// - no-ops all action dispatches
// - returns state from the snapshot
class Freeze extends Component<{ cold: boolean, children: Node }> {
  context: {
    store: Store,
  };
  static contextTypes = {

threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

threepointone

// rn.js
import {createElement} from 'react'
import {View, Text, Image} from 'react-native'

const map = { view: View, text: Text, image: Image }

export default function rn(type, props, ...children){
  return createElement(map[type] || type, props, ...children)
}

threepointone

/* @flow */
import React from 'react';
import { Motion, spring } from 'react-motion';
import {
  AppRegistry,
  Box,
  View,
  PointLight,
} from 'react-vr';

threepointone

Something about css-in-js libs I noticed, but no one really talks about. There exists an implicit idea of a grouped-ruleset, ie - a set of rulesets that apply either directly to an element, or are meant to be composed with other rulesets. an example with 2 libs -

// glamor

const button = css({
 color: 'red',

threepointone

Configuring for host x86_64-apple-darwin16.6.0 ...
Configuring for target x86_64-apple-darwin16.6.0 ...
Using compiler gcc.
The C compiler is ANSI-compliant.
Checking the sizes of integers and pointers...
Wow! A 64 bit architecture!
This is a little-endian architecture.
Doubles can be word-aligned.
64-bit integers can be word-aligned.
Native division and modulus have round-towards-zero semantics, will use them.

threepointone

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/8.1.0/bin/node',
1 verbose cli   '/usr/local/bin/npmc',
1 verbose cli   'install',
1 verbose cli   '-g',
1 verbose cli   'git://github.com/reasonml/reason-cli.git#beta-v-1.13.5' ]
2 info using npm@5.0.3-canary.12
3 info using node@v8.1.0
4 notice CANARY npmc is experimental software. If you find an issue, please file it in the main npm repository, and call out that you were using npmc.
5 verbose npm-session 68f8ecdcf533092a

threepointone

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

threepointone

import React from 'react'
import { render } from 'react-dom'

// with fiber, we'll be able to write components that update text deep 
// inside another string without wrapper dom, or rerendering the whole component 

// before
class Lorem extends React.Component {
  state = {
    str: ''

threepointone

<div className={'blue '+ css({ '&&': { color: 'red'}})}>
  '&&' boosts specificity. add as many '&&&'s as you want
</div>,

<div className={css({ '& #meEle': { color: 'red' }})}>
    <div id='myEle'>
       targeting by id
     </div>
</div>