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

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

// Array shuffle for MooTools

Array.implement({

	shuffle: function(){
		for (var i = this.length; i && --i;){
			var temp = this[i], r = Math.floor(Math.random() * ( i + 1 ));
			this[i] = this[r];
			this[r] = temp;
		}

sebmarkbage

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

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

You're probably getting this warning because you're accessing methods on a component before it gets mounted. This will be soon be an unsupported use case.

The component that gets created by invoking the convenience constructor MyComponent(props, children) or using the JSX syntax <MyComponent /> is not guaranteed to be the instance that actually gets mounted. It's a description of what the actual mounted instance should look like.

Anti-pattern:

The component also doesn't have access to state or other important information such as the final props. As a consequence you shouldn't be calling custom methods on this object.

var MyComponent = React.createClass({

sebmarkbage

// Mutative

company.users.push({ name: 'New User' });
return company;

// Immutable

return { ...company, users: [ ...company.users, { name: 'New User' } ] };

// Implicit identifier

sebmarkbage

// EXAMPLE: a compound iterator with sequencing

// Python style
function cat() {
    let is = arguments;
    return {
        next: {
            let length;
            while ((length = is.length) > 0) {
                try {

sebmarkbage

var originalFunction = obj.myMethod;
obj.myMethod = function(){
  // Before
  console.log('before myMethod on ', this);
  var result = originalFunction.apply(this, arguments);
  // After
  console.log('after myMethod on ', this);
  return result;
};

sebmarkbage