sebmarkbage

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name default.js
// ==/ClosureCompiler==

/**
 * @constructor
 */
function Foo(name) {
  this.name = name;

sebmarkbage

var Bar1 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();
    console.log('Bar1');
  }
};

var Bar2 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();

sebmarkbage

import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
  constructor() {
    this.state = { data: null };
  }
  componentDidMount() {
    this.setState({ data: 'Hello' });
  }
  render() {

sebmarkbage

setProps - depends on reading the last reconciled props from the current reconciled state of the app, at the time of the call. It also depends on an object that doesn't necessarily need to be there outside reconciliation. This is unlike setState, which is state that needs to be there. setState is queued up and merged at the time of reconciliation. Not at the time of the call. setState has a side-effect but is not a stateful nor mutative API.

isMounted - reads the current state of the tree, which may be stale if you're in a batch or reconciliation.

getDOMNode/findDOMNode - Reads the currently flushed node. This currently relies on the state of the system and that everything has flushed at this time. We could potentially do a forced render but that would still rely on the state of the system allowing us to synchronously being able to force a rerender of the system. Note: in 0.14, refs directly to DOM node will resolve to the DOM node. This allow you to get access to a node at the time of its choos

sebmarkbage

React Native Decoupling

-- ONLY REQUIRED FOR PACKAGING PURPOSES (should be handled by the environment) --

InitializeJavaScriptAppEngine

-- MOVEABLE TO FBJS OR REACT OR STOP USING --
deepFreezeAndThrowOnMutationInDev
- Deep-anything in JS is bad. This is really only needed for structures that we don't know about. I.e. missing attribute configurations. It is unfortunate for other optimizations and auto-marshalling. Perhaps we should require attribute configs or at least pick a more restricted default than one that easily over freezes or causes infinite loops.

sebmarkbage

function measure(box) {
  const width = box.width + box.borderLeft + borderRight;
  return {
    width,
    offset(position) {
      return { left: position.left + box.borderLeft };
    }
  }
}

sebmarkbage

function shallowCompare(a, b) {
  if (a === b) {
    return true;
  }
  if (typeof a === 'object' && typeof b === 'object' && hiddenClass(a) === hiddenClass(b)) {
    return !memcmp(a, b, sizeOfClass(a));
  }
  if (typeof a === 'function' && typeof b === 'function') {
    if (sourceLocation(a) === sourceLocation(b)) {
      return shallowCompare(getClosureContextOf(a), getClosureContextOf(b));

sebmarkbage

/**
 * React v16.0.0-alpha
 *
 * Copyright 2013-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *

sebmarkbage

function asyncToReact(fn) {
  class PromiseComponent extends React.Component {
    state = { waiting: true, result: null };
    componentDidMount() {
      fn(...this.props.args).then(result => this.setState({ waiting: false, result }));
    }
    componentDidUpdate() {
      fn(...this.props.args).then(result => this.setState({ waiting: false, result }));
    }
    shouldComponentUpdate(newProps) {

sebmarkbage

Tagged Objects

The goal is to implement a form of pattern matching that works well in the existing dynamic environment of ECMAScript.

The goal is to find a way to do efficient pattern matching such as using an object tag. JS VMs already have a field for this that is used to tag various kinds of built-in objects.

This tag could be extended to also include a user space range.

The Mechanism