mattmccray

<template>
	<section class="Post">
		<h2 class="Post_Title" @click="titleOnClick">
			{{ title }}
		</h2>
		<div class="Post_Body">
			{{ body }}
		</div>
		<div class="Post_Footer">
			{{ poster }}

mattmccray

Keybase proof

I hereby claim:

• I am mattmccray on github.
• I am inkwellian (https://keybase.io/inkwellian) on keybase.
• I have a public key whose fingerprint is 2534 290C AB92 BAEF 7BBA 8B16 3DBB 5327 0DF6 CBB7

To claim this, I am signing this object:

mattmccray

/**
 * A simple command example that updates a todo's name.
 * 
 * @param todoId {number}
 * @param newName {string}
 * @param context {MadeUpBackendAPI}
 */
 function UpdateTodoName(todoId, newName, context) {
  // Get current name so we can revert back to it, if needed:
  const prevName = context.getObjectOfTye('todo', todoId).name

mattmccray

Loot.js!

Smart stores for Riot (like flux, based on ideas from RiotControl)

Small (<1.5Kb) flux-like store container.

Example

Make sure loot.js is included in your page after riot.js:

mattmccray

import {assign}  from 'lodash'

function startModule() {
  //etc.
}

global['Project'] = assign(global['Project'] || {}, {
  startModule
});

mattmccray

// The 'After' revised:
import * as React from "react";

// The T in React.Props<T> is used for the function style access of `ref`
// for use by the caller. Example (defines `component` parameter of callback):
//     <Button ref={ component => this._button = component }/>
interface ButtonProps extends React.Props<Button> {
  icon : string;
  caption : string;
  handler : ()=>boolean;

mattmccray

import {makeReactive, sideEffect, asReference, transaction} from 'mobservable'

function TooltipManager() {
  const DOM_ROOT = document.getElementById('tooltip_root')
  const LEAVE_DELAY = 400

  let state = makeReactive({
    hoverCount: 0,
    tooltip: asReference(null),
    position: asReference({})

mattmccray

export function SimpleComponent( renderFn ) {
  return React.createClass({
    displayName: renderFn.displayName || renderFn.name,
    mixins:[ React.addons.PureRenderMixin ],
    render() {
      return renderFn.call( this, this.props )
    }
  })
}

mattmccray

import uuid from 'node-uuid'
import {makeReactive} from 'mobservable'

export class NoteStore {
  constructor(initialNotes=[]) {
    this.notes = makeReactive(initialNotes)
  }
  
  addNote({task}) {
    this.notes.push({id: uuid.v4(), task})

mattmccray

// So these are essentially equivalent in the latest/upcoming mobservable release, yeah? (Not count differences from Babel)

class FormField {
  constructor() {
    makeReactiveProps( this, {
       pristine: "", 
       validators: [],
       value: "",
       isDirty() {
         return this.value != this.pristine