Skip to content

Instantly share code, notes, and snippets.

@samwgoldman

samwgoldman/example.js

Last active April 3, 2021 22:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save samwgoldman/79d0da4bda25738c20c1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save samwgoldman/79d0da4bda25738c20c1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. samwgoldman revised this gist Apr 19, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@ type Element = ReactElement<any, any, any>
    function component<P>(render: (props: P) => Element): Component<P> {
    return (React.createClass({
    shouldComponentUpdate(props) {
    return Immutable.is(this.props.data, props.data)
    return !Immutable.is(this.props.data, props.data)
    },
    render() {
    return render((this.props.data : any))
  2. samwgoldman revised this gist Apr 19, 2015. 1 changed file with 13 additions and 8 deletions.
    21 changes: 13 additions & 8 deletions example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,24 +3,29 @@
    var React = require("react")
    var Immutable = require("immutable")

    // Flow has complex built-in types for React, but purity affords us a simpler API.
    // In order to use any type as props, including Immutable objects, we
    // wrap our prop type as the sole "data" key passed as props.
    type Component<P> = ReactClass<{},{ data: P },{}>
    type Element = ReactElement<any, any, any>
    type Component<P> = ReactClass<{},P,{}>

    // We need a small `any` escape hatch to convince Flow to use our types
    // Our componenets are truly a function of props, and immutability is
    // assumed. This discipline is a feature, not a bug.
    function component<P>(render: (props: P) => Element): Component<P> {
    return (React.createClass({
    shouldComponentUpdate(props) {
    return Immutable.is(this.props, props)
    return Immutable.is(this.props.data, props.data)
    },
    render() {
    return render((this.props : any))
    return render((this.props.data : any))
    }
    }) : any)
    }

    var Example: Component<{ foo: string }> = component((props) => {
    return <span>{props.foo}</span>
    // Defining components couldn't be simpler.
    var Example: Component<string> = component((foo) => {
    return <span>{foo}</span>
    })

    var foo = <Example foo="bar" />
    // In order to use JSX, we need to pass our props as `data`, but flow
    // will still type check this for us.
    var foo = <Example data={"bar"} />
  3. samwgoldman revised this gist Apr 19, 2015. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,9 +3,11 @@
    var React = require("react")
    var Immutable = require("immutable")

    // Flow has complex built-in types for React, but purity affords us a simpler API.
    type Element = ReactElement<any, any, any>
    type Component<P> = ReactClass<{},P,{}>

    // We need a small `any` escape hatch to convince Flow to use our types
    function component<P>(render: (props: P) => Element): Component<P> {
    return (React.createClass({
    shouldComponentUpdate(props) {
  4. samwgoldman created this gist Apr 19, 2015.
    24 changes: 24 additions & 0 deletions example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    /* @flow */

    var React = require("react")
    var Immutable = require("immutable")

    type Element = ReactElement<any, any, any>
    type Component<P> = ReactClass<{},P,{}>

    function component<P>(render: (props: P) => Element): Component<P> {
    return (React.createClass({
    shouldComponentUpdate(props) {
    return Immutable.is(this.props, props)
    },
    render() {
    return render((this.props : any))
    }
    }) : any)
    }

    var Example: Component<{ foo: string }> = component((props) => {
    return <span>{props.foo}</span>
    })

    var foo = <Example foo="bar" />