Emotion: Initial Flow definition for emotion

[thangngoc89]

I'm integrating emotion into a Flow typed project, I've created a simple emotion flow definition. It's far from complete and only serves my use cases with template literal. I hope this will be a good starting point for anyone working on a flow definition.

// @flow

type $npm$emotion$Interpolation =
  | ((executionContext: Object) => string)
  | string
  | number
  | React$Component
  | React$Element

type $npm$emotion$React = (
  strings: Array<string>,
  ...interpolations: Array<$npm$emotion$Interpolation>
) => ReactClass<*>

type $npm$emotion$Component = ReactClass<*> | ((props: *) => React$Element<*>)

declare module "emotion" {
  declare module.exports: any
}

declare module "emotion/react" {
  declare type Interpolation = $npm$emotion$Interpolation

  declare type EmotionReact = $npm$emotion$React

  declare module.exports: {
    (baseComponent: Interpolation): EmotionReact,
    a: EmotionReact,
    abbr: EmotionReact,
    address: EmotionReact,
    area: EmotionReact,
    article: EmotionReact,
    aside: EmotionReact,
    audio: EmotionReact,
    b: EmotionReact,
    base: EmotionReact,
    bdi: EmotionReact,
    bdo: EmotionReact,
    big: EmotionReact,
    blockquote: EmotionReact,
    body: EmotionReact,
    br: EmotionReact,
    button: EmotionReact,
    canvas: EmotionReact,
    caption: EmotionReact,
    cite: EmotionReact,
    code: EmotionReact,
    col: EmotionReact,
    colgroup: EmotionReact,
    data: EmotionReact,
    datalist: EmotionReact,
    dd: EmotionReact,
    del: EmotionReact,
    details: EmotionReact,
    dfn: EmotionReact,
    dialog: EmotionReact,
    div: EmotionReact,
    dl: EmotionReact,
    dt: EmotionReact,
    em: EmotionReact,
    embed: EmotionReact,
    fieldset: EmotionReact,
    figcaption: EmotionReact,
    figure: EmotionReact,
    footer: EmotionReact,
    form: EmotionReact,
    h1: EmotionReact,
    h2: EmotionReact,
    h3: EmotionReact,
    h4: EmotionReact,
    h5: EmotionReact,
    h6: EmotionReact,
    head: EmotionReact,
    header: EmotionReact,
    hgroup: EmotionReact,
    hr: EmotionReact,
    html: EmotionReact,
    i: EmotionReact,
    iframe: EmotionReact,
    img: EmotionReact,
    input: EmotionReact,
    ins: EmotionReact,
    kbd: EmotionReact,
    keygen: EmotionReact,
    label: EmotionReact,
    legend: EmotionReact,
    li: EmotionReact,
    link: EmotionReact,
    main: EmotionReact,
    map: EmotionReact,
    mark: EmotionReact,
    menu: EmotionReact,
    menuitem: EmotionReact,
    meta: EmotionReact,
    meter: EmotionReact,
    nav: EmotionReact,
    noscript: EmotionReact,
    object: EmotionReact,
    ol: EmotionReact,
    optgroup: EmotionReact,
    option: EmotionReact,
    output: EmotionReact,
    p: EmotionReact,
    param: EmotionReact,
    picture: EmotionReact,
    pre: EmotionReact,
    progress: EmotionReact,
    q: EmotionReact,
    rp: EmotionReact,
    rt: EmotionReact,
    ruby: EmotionReact,
    s: EmotionReact,
    samp: EmotionReact,
    script: EmotionReact,
    section: EmotionReact,
    select: EmotionReact,
    small: EmotionReact,
    source: EmotionReact,
    span: EmotionReact,
    strong: EmotionReact,
    style: EmotionReact,
    sub: EmotionReact,
    summary: EmotionReact,
    sup: EmotionReact,
    table: EmotionReact,
    tbody: EmotionReact,
    td: EmotionReact,
    textarea: EmotionReact,
    tfoot: EmotionReact,
    th: EmotionReact,
    thead: EmotionReact,
    time: EmotionReact,
    title: EmotionReact,
    tr: EmotionReact,
    track: EmotionReact,
    u: EmotionReact,
    ul: EmotionReact,
    var: EmotionReact,
    video: EmotionReact,
    wbr: EmotionReact,

    // SVG
    circle: EmotionReact,
    clipPath: EmotionReact,
    defs: EmotionReact,
    ellipse: EmotionReact,
    g: EmotionReact,
    image: EmotionReact,
    line: EmotionReact,
    linearGradient: EmotionReact,
    mask: EmotionReact,
    path: EmotionReact,
    pattern: EmotionReact,
    polygon: EmotionReact,
    polyline: EmotionReact,
    radialGradient: EmotionReact,
    rect: EmotionReact,
    stop: EmotionReact,
    svg: EmotionReact,
    text: EmotionReact,
    tspan: EmotionReact,
  }
}

[hawkins]

Thanks for this!

And for what it's worth, I've been planning to work on flow definitions as soon as #37 is finished. Of course no hard feelings if you or someone else is itching to get this sooner than I am. 😋

[FezVrasta]

Is there anything available to annotate styled components?

styled.div`
  color: ${color}; /* I want to annotate `color` as `string` */
`

[zaynv]

I see that the source code is written in Flow, does this mean that I can use emotion now with Flow or is it still necessary to wait for someone to write the definitions for it?

[dashed]

@thangngoc89 have you ever considered adding your definitions to https://github.com/flowtype/flow-typed ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[mgrip]

Any chance this could be reopened to add types for Interpolation? Would be helpful to validate entries in the style object. I believe currently its typed as any