opaque types (#79)

Author: Noviny

.changeset/large-bottles-melt/changes.json

@@ -0,0 +1,23 @@
+{
+  "releases": [
+    { "name": "extract-react-types", "type": "minor" },
+    { "name": "kind2string", "type": "minor" }
+  ],
+  "dependents": [
+    {
+      "name": "babel-plugin-extract-react-types",
+      "type": "patch",
+      "dependencies": ["extract-react-types"]
+    },
+    {
+      "name": "extract-react-types-loader",
+      "type": "patch",
+      "dependencies": ["extract-react-types"]
+    },
+    {
+      "name": "pretty-proptypes",
+      "type": "patch",
+      "dependencies": ["extract-react-types", "kind2string"]
+    }
+  ]
+}

.changeset/large-bottles-melt/changes.md

@@ -0,0 +1 @@
+Add support for opaque types

package.json

@@ -6,7 +6,7 @@
     "test": "jest",
     "changeset": "changeset",
     "bump": "changeset bump",
-    "release": "changeset release --public",
+    "release": "yarn build && changeset release --public",
     "postinstall": "preconstruct dev",
     "dev:pretty-proptypes": "bolt w pretty-proptypes run dev",
     "lint": "yarn eslint \"./**/*.js\"",
@@ -63,6 +63,7 @@
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
     "jest-in-case": "^1.0.2",
+    "preconstruct": "^0.0.81",
     "react-markings": "^1.2.0",
     "resolve": "^1.10.1",
     "strip-indent": "^2.0.0"
@@ -89,7 +90,6 @@
     "jest": "^24.7.1",
     "jest-in-case": "^1.0.2",
     "jsdom": "^11.7.0",
-    "preconstruct": "^0.0.64",
     "prettier": "^1.13.7",
     "react": "^16.3.1",
     "react-addons-test-utils": "^15.6.2",

packages/extract-react-types/__snapshots__/test.js.snap

@@ -368,6 +368,41 @@ Object {
 }
 `;
 
+exports[`OpaqueType test 1`] = `
+Object {
+  "component": Object {
+    "kind": "generic",
+    "name": Object {
+      "kind": "id",
+      "name": "SomeComponent",
+      "type": null,
+    },
+    "value": Object {
+      "kind": "object",
+      "members": Array [
+        Object {
+          "key": Object {
+            "kind": "id",
+            "name": "ok",
+          },
+          "kind": "property",
+          "optional": true,
+          "value": Object {
+            "kind": "generic",
+            "value": Object {
+              "kind": "id",
+              "name": "SomethingId",
+            },
+          },
+        },
+      ],
+      "referenceIdName": "Props",
+    },
+  },
+  "kind": "program",
+}
+`;
+
 exports[`Should handle ArrayTypeAnnotations 1`] = `
 Object {
   "component": Object {

packages/extract-react-types/package.json

@@ -43,4 +43,4 @@
     "jest": "^24.7.1",
     "prettier": "^1.13.7"
   }
-}
+}

packages/extract-react-types/src/index.js

@@ -395,6 +395,34 @@ converters.NewExpression = (path, context): K.New => {
   };
 };
 
+converters.InterfaceDeclaration = (path, context): K.InterfaceDeclaration => {
+  return { kind: 'interfaceDeclaration', id: convert(path.get('id'), context) };
+};
+
+converters.OpaqueType = (path, context): K.OpaqueType => {
+  // OpaqueTypes have several optional nodes that exist as a null when not present
+  // We need to convert these when they exist, and ignore them when they don't;
+  let supertypePath = path.get('supertype');
+  let impltypePath = path.get('impltype');
+  let typeParametersPath = path.get('typeParameters');
+
+  // TODO we are having a fight at the moment with id returning a binding, not a node,
+  // and don't have time to solve this properly - I am pathing it to being working-ish
+  // here, and will come back to this later. If you find this comment still here and
+  // want to fix this problem, I encourage you to do is.
+
+  let supertype;
+  let impltype;
+  let typeParameters;
+  let id = convert(path.get('id'), context);
+
+  if (supertypePath.node) supertype = convert(supertypePath, context);
+  if (impltypePath.node) impltype = convert(impltypePath, context);
+  if (typeParametersPath.node) typeParameters = convert(typeParametersPath, context);
+
+  return { kind: 'opaqueType', id, supertype, impltype, typeParameters };
+};
+
 converters.TypeofTypeAnnotation = (path, context): K.Typeof => {
   let type = convert(path.get('argument'), { ...context, mode: 'value' });
   let ungeneric = resolveFromGeneric(type);
@@ -742,7 +770,6 @@ converters.Identifier = (path, context): K.Id => {
   } else if (context.mode === 'type') {
     if (kind === 'reference') {
       let bindingPath;
-
       if (isFlowIdentifier(path)) {
         let flowBinding = getTypeBinding(path, name);
         if (!flowBinding) throw new Error();
@@ -771,15 +798,21 @@ converters.Identifier = (path, context): K.Id => {
       }
 
       if (bindingPath) {
-        if (bindingPath.kind === 'module') {
-          bindingPath = bindingPath.path;
-        }
+        if (name === 'SomethingId')
+          if (bindingPath.kind === 'module') {
+            bindingPath = bindingPath.path;
+          }
 
         // If path is a descendant of bindingPath and share the same name, this is a recursive type.
         if (path.isDescendant(bindingPath) && bindingPath.get('id').node.name === name) {
           return { kind: 'id', name };
         }
 
+        // This is a hack that stops horrible regression errors and problems
+        if (bindingPath.kind === 'unknown') {
+          return { kind: 'id', name };
+        }
+
         if (bindingPath.kind !== 'module') {
           const convertedValue = convert(bindingPath, context);
           return {
@@ -1435,9 +1468,31 @@ function attachComments(source, dest) {
   attachCommentProperty(source, dest, 'innerComments');
 }
 
+// This function is from mdn:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#Examples
+const getCircularReplacer = () => {
+  const seen = new WeakSet();
+  return (key, value) => {
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
 function convert(path, context) {
-  if (typeof path.get !== 'function')
-    throw new Error(`Did not pass a NodePath to convert() ${JSON.stringify(path)}`);
+  if (typeof path.get !== 'function') {
+    // We were getting incredible unhelpful errors here at times, so we have a circular replacement
+    // throw path.identifier;
+    let stringedPath = JSON.stringify(path, getCircularReplacer(), 2);
+    throw new Error(`Did not pass a NodePath to convert() ${stringedPath}`);
+  }
+
+  // console.log(path.node);
+
   let converter = converters[path.type];
   if (!converter) throw new Error(`Missing converter for: ${path.type}`);
   let result = converter(path, context);

packages/extract-react-types/src/kinds.js

@@ -155,6 +155,16 @@ export type Import = {
   external?: boolean
 };
 
+export type OpaqueType = {
+  kind: 'opaqueType',
+  id: AnyTypeKind,
+  supertype?: AnyTypeKind,
+  impltype?: AnyTypeKind,
+  typeParameters?: AnyTypeKind
+};
+
+export type InterfaceDeclaration = { kind: 'interfaceDeclaration', id: AnyTypeKind };
+
 export type Program = { kind: 'program', component?: Property };
 
 export type ExportSpecifier = { kind: 'exportSpecifier', local: Id, exported: Id };

packages/extract-react-types/test.js

@@ -1558,6 +1558,23 @@ const TESTS = [
 
     `
   },
+  {
+    name: 'OpaqueType test',
+    typeSystem: 'flow',
+    code: `
+    opaque type SomethingId = string;
+
+    type Props = {
+      ok?: SomethingId
+    }
+
+    const SomeComponent = function(props: Props) {
+
+    }
+
+    export default SomeComponent
+    `
+  },
   {
     name: 'flow forwardRef default export',
     typeSystem: 'flow',
@@ -1619,7 +1636,7 @@ const TESTS = [
     class Component extends React.Component<Foo<string, {}>> {
     }
   `
-  },
+  }
 ];
 
 cases(

packages/kind2string/src/index.js

@@ -78,6 +78,13 @@ const converters = {
   id: (type: K.Id, mode: string): string => {
     return type.name;
   },
+  // TODO - this is not right and needs to be improved
+  opaqueType: (type: K.OpaqueType, mode: string): string => {
+    return convert(type.id);
+  },
+  interfaceDeclaration: (type: K.InterfaceDeclaration) => {
+    return convert(type.id);
+  },
   typeCastExpression: (type: K.TypeCastExpression, mode: string): string => {
     return convert(type.expression);
   },

packages/pretty-proptypes/package.json

@@ -39,5 +39,8 @@
     "react": "^16.3.1",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=16"
   }
-}
+}