joshblack

Babel Types, Construction

Identifier

t.identifier: (string) => identifier

Only really useful thing about an identifier is getting its name.

visitor: {
 Identifier(node) {

joshblack

// Usage
const container = div({
  id: 'foo',
  style: {
    background: 'black',
    width: '100px',
    height: '100px'
  }
});

joshblack

Relay

Learning

• Relay for Visually Minded People
• Efficient Data Fetching with GraphQL and Relay
• From Flux to Relay and Graphql
• Relay Playground
• Relay and Routing
• Facebook Relay Talk - Lunch and Learn

joshblack

GraphQL

Main site: http://graphql.org/

What is GraphQL

• GraphQL Introduction
• GraphQL is SQL for Knowledge, Not Data
• Demistifying GraphQL

joshblack

Importing

Brief writeup on how to import modules in ES2015, what syntax they have, and how we can grab relevant properties from their AST's.

Introduction

In ES2015, we can import modules into a file using an Import Declaration. An Import Declaration takes on the following interface:

interface ImportDeclaration <: ModuleDeclaration {

joshblack

const box = document.querySelector('div');

animate(box, { 
  translated: [250, 250],
  rotated: 360,
  scaled: [2, 2]
}, 1000, scaling);

function scaling(node) {
  return animate(node, {

joshblack

Babel Types

Hopefully will be documentation of unclear methods available for Babel Types

• is
• isType
• shallowEqual
• appendToMemberExpression
• prependToMemberExpression
• ensureBlock

joshblack

Babel Notes

Just personal notes that I'm collecting as I learn more about how to write plugins for babel.

• Making a property on an object
  • t.property('init', t.identifier('foo'), t.literal('bar'))
  • Not sure why, but the kind of the property is init, second parameter is key of the object, final one is the value
• Value to node
  • t.valueToNode()
• Remove a node

joshblack

{
  "retainLines": true,
  "compact": true,
  "comments": false,
  "whitelist": [
    "es6.arrowFunctions",
    "es6.blockScoping",
    "es6.classes",
    "es6.constants",
    "es6.destructuring",

joshblack

{ 
  isJSXAttribute: [Function],
  assertJSXAttribute: [Function],
  isJSXClosingElement: [Function],
  assertJSXClosingElement: [Function],
  isJSXElement: [Function],
  assertJSXElement: [Function],
  isJSXEmptyExpression: [Function],
  assertJSXEmptyExpression: [Function],
  isJSXExpressionContainer: [Function],