fix(typings): add quoted field names support

alfa-laboratory · Mar 28, 2019 · d987c1a · d987c1a
1 parent a795f4e
commit d987c1a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/typings/__examples__/a.jsx b/typings/__examples__/a.jsx
@@ -61,7 +61,8 @@ export default class A extends React.Component {
                  * Even deeper documentation
                  */
                 name: PropTypes.string,
-                size: PropTypes.number
+                size: PropTypes.number,
+                'quoted-field': PropTypes.string
             })
         }),
         /**
@@ -76,7 +77,8 @@ export default class A extends React.Component {
          * @returns {string|number}
          */
         onClick: PropTypes.func,
-        onChange: PropTypes.func
+        onChange: PropTypes.func,
+        '9validPropName': PropTypes.number
     };
 
     render() {

diff --git a/typings/__tests__/__snapshots__/index.tests.js.snap b/typings/__tests__/__snapshots__/index.tests.js.snap
@@ -35,7 +35,8 @@ export type AOptionalObjectWithShapeSubShapeShapeType = {
      * Even deeper documentation
      */
     name?: string;
-    size?: number
+    size?: number;
+    'quoted-field'?: string
 };
 export type AOptionalObjectWithShapeShapeType = {
     color?: string;
@@ -101,6 +102,7 @@ export type AProps = DeepReadonlyObject<{
      */
     onClick?: (stringParam?: string, count?: number, event?: React.MouseEvent<any>, anotherEvent?: React.KeyboardEvent<any>, element?: HTMLDivElement) => AOnClickReturnFieldType;
     onChange?: Function;
+    '9validPropName'?: number;
 
 }>;
 

diff --git a/typings/stringify-component-definition.js b/typings/stringify-component-definition.js
@@ -117,11 +117,20 @@ function stringifyFunctionDefinition(type, componentName, propName, typeRefs, us
     return `(${paramsTypes.join(', ')}) ${useArrowNotation ? '=>' : ':'} ${returnType}`;
 }
 
+function stringifyFieldName(fieldName) {
+    if (/^[A-z][A-z0-9]+$/.test(fieldName)) {
+        return fieldName;
+    }
+
+    return `'${fieldName}'`;
+}
+
 function stringifyField(fieldName, type, componentName, propName, typeRefs) {
     const typeDescription = stringifyType(type, componentName, `${propName}${upperCamelCase(fieldName)}`, typeRefs);
+
     return (
         stringifyDescription(type.description, type.docblock) + // eslint-disable-line prefer-template
-        `${fieldName}${type.required ? '' : '?'}: ${typeDescription}`
+        `${stringifyFieldName(fieldName)}${type.required ? '' : '?'}: ${typeDescription}`
     );
 }
 
@@ -178,7 +187,7 @@ function stringifyComponentDefinition(info) {
             const typeDef = stringifyType(type, info.displayName, propName, typeRefs);
             const descriptionString = stringifyDescription(description, docblock);
 
-            return `${descriptionString}${propName}${required ? '' : '?'}: ${typeDef};\n`;
+            return `${descriptionString}${stringifyFieldName(propName)}${required ? '' : '?'}: ${typeDef};\n`;
         }).join('')}
         }>;
         `