Support flow annotations for syntax highlighting

[romandecker]

Is there any way to make rjsx-mode support flowtype-style type annotations in syntax highlighting? Having annotations in there can break highlighting pretty badly (everything from the start of the annotation is highlighted incorrectly).

Example:

// @flow

import * as React from 'react';
import { Row, Col } from 'react-bootstrap';
import Field from 'redux-form/lib/Field';
import type { FieldArrayProps } from 'redux-form';
import { translate as t } from '@util/locale';
import { objectMappings } from '@util/spJson/mappingConfig';

import Checkbox from '../Checkbox';

type Props = {
    labelNamespace?: string;
    sizeSm?: number;
    objMapping?: Object;
} & FieldArrayProps;

const CheckboxGroup = ({ fields, labelNamespace, sizeSm, objMapping }: Props) => {
    const mappingConfig = objMapping || objectMappings;
    const noTranslation = Boolean(mappingConfig[fields.name].byId);
    return (
        <Row>
            {
                fields.map((field: string, index: number) => {
                    const [fieldName] = (Object.keys(fields.get(index)): string[]);
                    const textName = noTranslation ?
                            (mappingConfig[fields.name].keyMappings[fieldName]: Object) :
                            (
                                labelNamespace ? t(`labels.${labelNamespace}.${fieldName}`) : ''
                            );
                    return (
                        <Col sm={sizeSm || 4} className="mb-0-5" key={fieldName}>
                            <Field
                                id={fieldName}
                                name={`${field}.${fieldName}`}
                                type="checkbox"
                                component={Checkbox}
                                inline
                                className="checkbox-text"
                            >
                                {textName}
                            </Field>
                        </Col>
                    );
                })
            }
        </Row>
    );
};

export default CheckboxGroup;

Simply ignoring the annotations would suffice as a starting point.

[felipeochoa]

This is not an easy task. js2 and rjsx use a recursive descent parser to understand syntax, and it needs to be manually modified (at the js2 level) to support flow. There's an issue on js2 about this: mooz/js2#224

[aij]

mooz/js2-mode#224