dpzxsm / reactproptypes-plugin Goto Github PK

View Code? Open in Web Editor NEW

63.0 3.0 3.0 110.71 MB

A Jetbrains Plugin for react PropTypes

License: MIT License

Java 100.00%

intellij idea-plugin react react-proptypes-plugin proptypes webstorm phpstorm jetbrains react-native plugin ast

reactproptypes-plugin's Introduction

ReactPropTypes-Plugin

中文文档

This is a JetBrains plug-in that automatically generates PropTypes code for React components, and only supports ES6 later at the moment. If you need to support ES5, please leave a message in issue.Compatible with: IntelliJ IDEA, PhpStorm, WebStorm, PyCharm, RubyMine, AppCode, CLion, Gogland, Rider.

If you are want use it by Visual Code or command line, I suggest you to use another plugin: react-proptypes-generate, now it is imperfect, welcome issue and PR.

Installed

In plugin store search "ReactPropTypes" and install it , this is Store Link, Welcome comments.
Click ReactPropTypes.jar(Recently, but may Unstable) to download and open Setting/Plugins/Install Plugin from disk to install.

How to use

Select your Component's name
Press command + N (Windows is alt + insert) show Generate Group and select PropTypesGenerate, or press shift + command + alt + P (Windows is shift + ctrl + alt + P) in the macOS
Edit the PropTypes Table to modify default type

Preview

Class Components

Functional Components

When you select `Shape` as the PropType

How to Build and Development the project

Dependency Library

IntelliJ Platform Plugin SDK
JavaScriptLanguage's lib (In macOS, the path is /Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/lib, Windows are similar)

Development Step

Download the latest IntelliJ IDEA Ultimate
Clone and Open this project
Delete default module and import plugin module by ReactPropTypes.iml
Config Project SDK named IntelliJ IDEA IU-182.** and Config language level 8
Config plugin out dir and plugin launch Configurations

For Example

Features

Get a heightLight text as component's name if you are not select any text.
In the Standard ES6 component, the plugin can distinguish props's reference and destructuring assignment with keyword "props" or "nextProps".
In the Stateless component, only when your first param must be named "props" or a destructuring parameter the plugin can distinguished.
If you select ES6 code style , the propTypes code will generate at the last line .Of cause, if you select ES7 code style, the propTypes code will generate at the component inside's first line.
Double Click the row's name in the table, can modify distinguished name if not you expect, also support add a new row or delete what you not need.
If your component has a default value for props, the plugin will fill the default type to the table.
Support PropTypes.shape and handle defaultProps.
You can custom your code generate's style.
Supports automatic inference of functions and array types in code, and can be opened in the settings.
Support full list of PropTypes

Next plan

Developing a similar plugin on the VS Code's platform
Support Flow Or TypeScript's TypeChecker, and not use PropTypes

reactproptypes-plugin's People

Contributors

Stargazers

Watchers

Forkers

cooliean gsiete lambgirl

reactproptypes-plugin's Issues

Didn'work

I have this issue

In v1.0.9, can't manual added a PropTypes, the plugin will carash !!!

I found a bug when you manual added a PropTypes , will throw a error
java.lang.ClassCastException: java.lang.String cannot be cast to java.util.HashMap
at com.suming.plugin.ui.PropTypesModel.data2PropList(PropTypesModel.java:68)
at com.suming.plugin.ui.PropTypesDialog.onOK(PropTypesDialog.java:177)
at com.suming.plugin.ui.PropTypesDialog.lambda$new$0(PropTypesDialog.java:47)
at javax.swing.AbstractButton.fireActionPerformed(AbstractButton.java:2022)
at javax.swing.AbstractButton$Handler.actionPerformed(AbstractButton.java:2348)
at javax.swing.DefaultButtonModel.fireActionPerformed(DefaultButtonModel.java:402)
at javax.swing.DefaultButtonModel.setPressed(DefaultButtonModel.java:259)
at javax.swing.plaf.basic.BasicButtonListener.mouseReleased(BasicButtonListener.java:252)
at java.awt.Component.processMouseEvent(Component.java:6533)

Update needed for compatibility with latest version

The plugin reports this error in new versions of WebStorm:

java.lang.IllegalAccessError: class com.suming.plugin.ui.PropTypesDialog (in unnamed module @0x759ba67c) cannot access class sun.swing.table.DefaultTableCellHeaderRenderer (in module java.desktop) because module java.desktop does not export sun.swing.table to unnamed module @0x759ba67c

My component is not detected

When I select the name of my stateless component and trigger the plugin, I get an alert claiming The selected text is not a valid React Component (with a type, it's valid, not vaild).

My component is valid, however, but what may be throwing the plugin off is that it's wrapped in a HOC (withStyles).

Full code

Auto-Detect "if you are using 'prop-types' model"

Instead of making the user check "if you are using 'prop-types' model" every time, it would be nice if this could just be auto-detected by the plugin inspecting the file.

If this is difficult to do, an alternative would be just remembering the setting from the last time. Having to check this every time is pretty annoying.

Does not work when component is wrapped with memo

The plugin does not recognize the component if it is wrapped with memo

example:

export const MyComponent = memo(props => {
    return (
        <div>{props.text}</div>
    );
})

PropTypesGenerate doesn't show up

Hello,

I'm running the plugin on Windows 10 and IntelliJ IDEA Ultimate 2020.2.

When I do alt + enter in the className / functionName it doesn't show the field "PropTypesGenerate ".

Here's the source code:

import React     from "react";
import TextField from "@material-ui/core/TextField";

export default function CustomTextField(props) {
    const {
 value, onChange, error, label, name, helperText
} = props;
    return (
        <TextField
            value={value}
            color="secondary"
            label={label}
            error={error}
            helperText={helperText}
            name={name}
            onChange={(e) => {
                onChange(name, e);
            }}
            fullWidth
        />
    );
}

Do you have any idea if I'm doing something wrong?

Thanks in advance

Add functionality for functional components

It doesn't look like this extension supports functional components, only class components. It would be very nice to support that, especially with functional components becoming more popular in general (React framework optimizations for functional component performance, libraries like recompose making it possible to add lifecycle methods to functional components, etc).

proptypes popup is not opening up

Proptypes popup is not showing up recently.

I am using below mentioned webstorm version.

WebStorm 2020.2.3

I am seeing this error in the IDE

java.lang.ClassCastException: class com.intellij.lang.javascript.psi.ecmal4.impl.JSAttributeListImpl cannot be cast to class com.intellij.lang.javascript.psi.JSDestructuringObject (com.intellij.lang.javascript.psi.ecmal4.impl.JSAttributeListImpl and com.intellij.lang.javascript.psi.JSDestructuringObject are in unnamed module of loader com.intellij.ide.plugins.cl.PluginClassLoader @37669929)
	at com.suming.plugin.CommonAction.findPropsNameList(CommonAction.java:260)
	at com.suming.plugin.CommonAction.actionPerformed(CommonAction.java:75)
	at com.suming.plugin.PropTypeAction.actionPerformed(PropTypeAction.java:24)
	at com.intellij.openapi.actionSystem.ex.ActionUtil.performActionDumbAware(ActionUtil.java:282)
	at com.intellij.openapi.actionSystem.ex.ActionUtil.performActionDumbAwareWithCallbacks(ActionUtil.java:276)
	at com.intellij.ui.popup.ActionPopupStep.performAction(ActionPopupStep.java:224)
	at com.intellij.ui.popup.ActionPopupStep.performAction(ActionPopupStep.java:214)
	at com.intellij.ui.popup.ActionPopupStep.lambda$onChosen$2(ActionPopupStep.java:208)
	at com.intellij.openapi.application.TransactionGuardImpl.performUserActivity(TransactionGuardImpl.java:94)
	at com.intellij.ui.popup.AbstractPopup.lambda$dispose$16(AbstractPopup.java:1464)
	at com.intellij.util.ui.UIUtil.invokeLaterIfNeeded(UIUtil.java:2254)
	at com.intellij.ide.IdeEventQueue.ifFocusEventsInTheQueue(IdeEventQueue.java:188)
	at com.intellij.ide.IdeEventQueue.executeWhenAllFocusEventsLeftTheQueue(IdeEventQueue.java:140)
	at com.intellij.openapi.wm.impl.FocusManagerImpl.doWhenFocusSettlesDown(FocusManagerImpl.java:178)
	at com.intellij.openapi.wm.impl.IdeFocusManagerImpl.doWhenFocusSettlesDown(IdeFocusManagerImpl.java:36)
	at com.intellij.ui.popup.AbstractPopup.dispose(AbstractPopup.java:1460)
	at com.intellij.ui.popup.WizardPopup.dispose(WizardPopup.java:158)
	at com.intellij.ui.popup.list.ListPopupImpl.dispose(ListPopupImpl.java:326)
	at com.intellij.ui.popup.PopupFactoryImpl$ActionGroupPopup.dispose(PopupFactoryImpl.java:304)
	at com.intellij.openapi.util.ObjectNode.lambda$execute$0(ObjectNode.java:111)
	at com.intellij.openapi.util.ObjectTree.executeActionWithRecursiveGuard(ObjectTree.java:193)
	at com.intellij.openapi.util.ObjectNode.execute(ObjectNode.java:71)
	at com.intellij.openapi.util.ObjectTree.executeAll(ObjectTree.java:141)
	at com.intellij.openapi.util.Disposer.dispose(Disposer.java:130)
	at com.intellij.openapi.util.Disposer.dispose(Disposer.java:120)
	at com.intellij.ui.popup.WizardPopup.disposeAllParents(WizardPopup.java:261)
	at com.intellij.ui.popup.list.ListPopupImpl.handleNextStep(ListPopupImpl.java:461)
	at com.intellij.ui.popup.list.ListPopupImpl._handleSelect(ListPopupImpl.java:415)
	at com.intellij.ui.popup.list.ListPopupImpl.handleSelect(ListPopupImpl.java:356)
	at com.intellij.ui.popup.list.ListPopupImpl$1.actionPerformed(ListPopupImpl.java:269)
	at com.intellij.ui.popup.WizardPopup.proceedKeyEvent(WizardPopup.java:376)
	at com.intellij.ui.popup.WizardPopup.dispatch(WizardPopup.java:356)
	at com.intellij.ui.popup.PopupDispatcher.dispatchKeyEvent(PopupDispatcher.java:112)
	at com.intellij.ui.popup.PopupDispatcher.dispatch(PopupDispatcher.java:148)
	at com.intellij.ide.IdePopupManager.dispatch(IdePopupManager.java:93)
	at com.intellij.ide.IdeEventQueue._dispatchEvent(IdeEventQueue.java:808)
	at com.intellij.ide.IdeEventQueue.lambda$dispatchEvent$8(IdeEventQueue.java:452)
	at com.intellij.openapi.progress.impl.CoreProgressManager.computePrioritized(CoreProgressManager.java:744)
	at com.intellij.ide.IdeEventQueue.lambda$dispatchEvent$9(IdeEventQueue.java:451)
	at com.intellij.openapi.application.impl.ApplicationImpl.runIntendedWriteActionOnCurrentThread(ApplicationImpl.java:802)
	at com.intellij.ide.IdeEventQueue.dispatchEvent(IdeEventQueue.java:505)
	at java.desktop/java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:203)
	at java.desktop/java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:124)
	at java.desktop/java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:113)
	at java.desktop/java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:109)
	at java.desktop/java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:101)
	at java.desktop/java.awt.EventDispatchThread.run(EventDispatchThread.java:90)

PropTypes.exact is not fully supported

Hello, this plugin is very great!

Please add full support of PropTypes.exact. It should act like PropTypes.shape.

// An object taking on a particular shape
 optionalObjectWithShape: PropTypes.shape({
   optionalProperty: PropTypes.string,
   requiredProperty: PropTypes.number.isRequired
 }),

 // An object with warnings on extra properties
 optionalObjectWithStrictShape: PropTypes.exact({
   optionalProperty: PropTypes.string,
   requiredProperty: PropTypes.number.isRequired
 }),

Semi-colons not inserted with imports or propTypes block

When you add PropTypes to a component there are no semi-colons after the auto-added imports and after the PropTypes block itself:

import PropTypes from 'prop-types'

//etc

PreferenceOptions.propTypes = {
  URL: PropTypes.string.isRequired,
  thing: PropTypes.array,
  messages: PropTypes.object.isRequired,
  options: PropTypes.array.isRequired  
}

Support full list of propTypes

Is it possible to add a few values to support full list:

array
bool
func
number
object
string
symbol 
any
arrayOf - missed
element - missed
instanceOf - missed
node - missed
objectOf - missed
oneOf - missed
oneOfType - missed
shape
exact - missed

Thanks for great plugin 💯

Ubuntu 18.04, PhpStorm 2018.2.2