zindel

Fastpack - pack JavaScript fast & easy

This gist is a submission for a lightning talk on the ReactiveConf 2018.

Why?

• JavaScript bundling can be a lot faster
• There are proper tools to guarantee consistency
• Writing OCaml code is fun!

mafintosh

const stream = require('stream')
const cache = new Map() // you might wanna use an lru here

function createCacheStream (url) {
  const buf = []
  return stream.Transform({
    transform: function (data, enc, cb) {
      buffer.push(data)
      cb(null, data)
    },

robertgonzales

class Frame extends Component {
  componentDidMount() {
    this.iframeHead = this.node.contentDocument.head
    this.iframeRoot = this.node.contentDocument.body
    this.forceUpdate()
  }

  render() {
    const { children, head, ...rest } = this.props
    return (

jamiebuilds

Synchronous module inspection

This document describes the challenges presented by import() and how they could be addressed.

Problem

If you're starting up an app with multiple modules already loaded, using import() prevents you from gaining access to them synchronously.

ahmetb

#!/bin/bash

# Copyright © 2017 Google Inc.
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software

rosskevin

// @flow

declare module 'react-relay' {
  declare export type RecordState = 'EXISTENT' | 'NONEXISTENT' | 'UNKNOWN';

  declare export type onCompleted = (response: ?Object, errors: ?Array<PayloadError>) => void
  declare export type onError = (error: Error) => void

  declare export type CommitOptions = {
    onCompleted: onCompleted,

gabro

/* @flow */

// A simplified representation of types using phantom types (so that we store the Type information both at value and type level)
class Type<T> {};
class StringT extends Type<string> {}
class NumberT extends Type<number> {}

// A schema for a User
const User = {
  name: new StringT(),

nikgraf

Rich text editing with DraftJS Plugins

Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.

Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code. 🤓

DraftJS Plugins

joshdover

Idiomatic React Testing Patterns

Testing React components seems simple at first. Then you need to test something that isn't a pure interaction and things seem to break down. These 4 patterns should help you write readable, flexible tests for the type of component you are testing.

Setup

I recommend doing all setup in the most functional way possible. If you can avoid it, don't set variables in a beforeEach. This will help ensure tests are isolated and make things a bit easier to reason about. I use a pattern that gives great defaults for each test example but allows every example to override props when needed:

deebloo

// https://github.com/deebloo/rxjs-worker
var observable = Observable.of([0, 1, 2, 3, 4]);

observable
  .map(function (data) {
    return data.concat([5, 6, 7, 8, 9]);
  })
  .workerMap(function (data) {
    return data.concat([10,11,12,13,14]);;
  })