How to use extract-react-types - 10 common examples

const STARTING_CODE = {
  code: `type ButtonPropType = {
    /* This is*/
  label: string
}

class Button extends React.Component{

}`,
  typeSystem: 'flow'
};

class App extends Component {
  state = {
    code: STARTING_CODE.code,
    dataForPropTypes: ert(STARTING_CODE.code, STARTING_CODE.typeSystem),
    typeSystem: STARTING_CODE.typeSystem,
    error: null
  };

  updateCode = code => {
    console.log(compress(code));
    try {
      const ast = ert(code, this.state.typeSystem);
      this.setState({
        dataForPropTypes: ast,
        error: null
      });
    } catch (error) {
      this.setState({
        error
      });

code: `type ButtonPropType = {
    /* Handler to be called on click of the button*/
  onClick: () => void
}
class Button extends React.Component{
}`,
  typeSystem: 'flow'
};

class App extends Component {
  state = {
    code:
      uriUtils.parseQuery().code_lz !== undefined
        ? uriUtils.decompress(uriUtils.parseQuery().code_lz)
        : STARTING_CODE.code,
    dataForPropTypes: ert(STARTING_CODE.code, STARTING_CODE.typeSystem),
    typeSystem: STARTING_CODE.typeSystem,
    error: null
  };

  updateCode = code => {
    try {
      const ast = ert(code, this.state.typeSystem);
      this.setState({
        dataForPropTypes: ast,
        error: null
      });
      uriUtils.updateQuery({ code: uriUtils.compress(code) });
    } catch (error) {
      this.setState({
        error
      });

Program(programPath, state) {
        let typeSystem = state.file.opts.parserOpts.plugins
          .map(plugin => (Array.isArray(plugin) ? plugin[0] : plugin))
          .find(plugin => plugin === 'flow' || plugin === 'typescript');

        if (typeSystem) {
          try {
            let components = findExportedComponents(programPath, typeSystem, state.file.filename);
            components.forEach(({ name, component }) => {
              // TODO: handle when name is null
              // it will only happen when it's the default export
              // generate something like this
              // export default (var someName = function() {}, someName.___types = theTypes, someName)
              if (name !== null) {
                programPath.node.body.push(
                  t.expressionStatement(
                    t.assignmentExpression(
                      '=',
                      t.memberExpression(t.identifier(name), t.identifier('___types')),
                      babel.parse(`(${JSON.stringify(component)})`).program.body[0].expression
                    )
                  )
                );
              }

test('simple facts about two props', () => {
  const file2 = `
const MyComponent = (props: { simpleProp: string, secondProp?: number }) => null;

export default MyComponent;
`;

  const wrapper = mount(
    
  );

  const prop = wrapper.find('Prop');
  expect(prop.length).toBe(2);
});

test('should visualise props from extract-types-loader', () => {
  const wrapper = mount(
    
  );

  const prop = wrapper.find('Prop');

  expect(prop.length).toBe(1);
  expect(prop.prop('name')).toBe('simpleProp');
  expect(prop.prop('required')).toBe(true);
  expect(prop.prop('type')).toBe('string');
});

updateCode = code => {
    console.log(compress(code));
    try {
      const ast = ert(code, this.state.typeSystem);
      this.setState({
        dataForPropTypes: ast,
        error: null
      });
    } catch (error) {
      this.setState({
        error
      });
      window.error = error;
    }
  };

export default (content, typeSystem, filename) => {
  const resolveOpts = {
    pathFilter: (pkg, location, dist) => {
      if (pkg['atlaskit:src'] && location.includes('node_modules') && location.includes(pkg.main)) {
        return location.replace(dist, pkg['atlaskit:src']);
      }
      return null;
    }
  };
  const ertAst = extractReactTypes(content, target[typeSystem], filename, resolveOpts);
  if (typeSystem === 'typescript') {
    return convertToTs(ertAst);
  }
  return ertAst;
};

pathFilter: (pkg, location, dist) => {
      if (
        !pkg.types &&
        pkg['atlaskit:src'] &&
        location.includes('node_modules') &&
        location.includes(pkg.main)
      ) {
        return location.replace(dist, pkg['atlaskit:src']);
      }
      return null;
    },
    /*This is here for instances where there are paths which are not packages */
    moduleDirectory: ['node_modules', 'src']
  };

  const types = extractReactTypes(content, typeSystem, filename, resolveOpts);
  return `module.exports = ${JSON.stringify(types)}`;
};

const assembleERTAST = (propTypes, defaultProps, type = 'flow') => {
  let file = `
  class Component extends React.Component<${propTypes}> {
    defaultProps = ${defaultProps}
  }`;
  let res = extractReactTypes(file, type);
  return res.component.members;
};

updateCode = code => {
    try {
      const ast = ert(code, this.state.typeSystem);
      this.setState({
        dataForPropTypes: ast,
        error: null
      });
      uriUtils.updateQuery({ code: uriUtils.compress(code) });
    } catch (error) {
      this.setState({
        error
      });
      window.error = error;
    }
  };