milesj / babel-plugin-typescript-to-proptypes

Generate React PropTypes from TypeScript interfaces or type aliases.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Not working, only imports prop-types

TidyIQ opened this issue · comments

I'm trying to get this to work but the only thing it does is add import _pt from "prop-types"; to the file. It never actually converts the types to prop-types...

I've tried with a very basic example, such as:

./packages/core/src/AppProvider/index.tsx

import React from 'react';
import { Provider as StateProvider, ProviderProps as StateProviderProps } from 'react-redux';
import { ThemeProvider, ThemeProviderProps } from '@material-ui/core/styles';
import { SnackbarProvider } from 'notistack';
import CssBaseline from '@material-ui/core/CssBaseline';

interface AppProviderProps {
  store: StateProviderProps['store'];
  theme: ThemeProviderProps['theme'];
}

const AppProvider: React.FC<AppProviderProps> = (props) => {
  const { children, store, theme } = props;

  return (
    <StateProvider store={store}>
      <ThemeProvider theme={theme}>
        <SnackbarProvider>
          <React.Fragment>
            <CssBaseline />
            {children}
          </React.Fragment>
        </SnackbarProvider>
      </ThemeProvider>
    </StateProvider>
  );
};

export default AppProvider;
export { default as createTheme } from './createTheme';
export { default as createStore } from './createStore';
export { AppProviderProps };

./babel.config.js

// checking if NODE_ENV === 'production' removed to ensure no issues with env variables

module.exports = {
  presets: ['@babel/preset-typescript', '@babel/preset-react'],
  plugins: ['@babel/plugin-proposal-class-properties', 'babel-plugin-typescript-to-proptypes']
};

./packages/core/package.json

{
  // bunch of irrelevant package data
  scripts: {
    "build": "babel --config-file ../../babel.config.js ./src --out-dir ./build --extensions \".tsx,.ts\""
  }

BUILD OUTPUT: ./packages/core/build/AppProvider/index.js

import _pt from "prop-types";
import React from 'react';
import { Provider as StateProvider } from 'react-redux';
import { ThemeProvider } from '@material-ui/core/styles';
import { SnackbarProvider } from 'notistack';
import CssBaseline from '@material-ui/core/CssBaseline';

const AppProvider = props => {
  const {
    children,
    store,
    theme
  } = props;
  return /*#__PURE__*/React.createElement(StateProvider, {
    store: store
  }, /*#__PURE__*/React.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React.createElement(SnackbarProvider, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssBaseline, null), children))));
};

export default AppProvider;
export { default as createTheme } from './createTheme';
export { default as createStore } from './createStore';

I've also tried the following which still doesn't work:

[
  'babel-plugin-typescript-to-proptypes',
  {
    implicitChildren: true,
    typeCheck: true,
    maxSize: 0,
    maxDepth: 100
  },
]

@TidyIQ It doesn't convert types imported from other files. So StateProviderProps['store'] and ThemeProviderProps['theme'] are invalid.