Handle aliases in graphql-flow. (#68)

## Summary:
This adds a new option to the config for graphql-flow so that you can specify aliases to map to, to help resolve imports. I used the same format as Vite to keep things simple. This will make it so that we can support our `~/`-style imports.

In the process I realized a number of things about this repo were broken, so I fixed them:

- We weren't running tsc, so I fixed that, and then fixed a bunch of TS failures that were hidden.
- The ESLint config was broken, so I fixed that (and then fixed all the failures that came up).
- Prettier was broken (still expecting Flow), so I fixed that.
- VS Code wasn't set up properly, so I fixed that.
- The Github PR Workflow was broken, still expecting Flow/.js files, so I fixed that.

Hopefully this helps things to run more smoothly!

Issue: FEI-5745

## Test plan:
I ran `yarn tsc` and `yarn eslint src/**/*.ts` and they both passed.

Author: jeresig

Reviewers: jeresig, kevinb-khan

Required Reviewers:

Approved By: kevinb-khan

Checks: ✅ Lint & Test (ubuntu-latest, 20.x)

Pull Request URL: #68

Author: jeresig

.changeset/shiny-fireants-yawn.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/graphql-flow": minor
+---
+
+Add alias resolution.

.eslintrc.js

@@ -1,9 +1,20 @@
 module.exports = {
-    extends: ['@khanacademy'],
     root: true,
-    parser: '@babel/eslint-parser',
-    plugins: ['flowtype-errors'],
+    plugins: ["prettier", "jest"],
+    extends: ["eslint:recommended", "prettier"],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        sourceType: "module",
+        ecmaVersion: 2020,
+    },
     rules: {
-        'prettier/prettier': ['error', {singleQuote: true}],
+        "prettier/prettier": "error",
+        "no-unused-vars": "off",
+        "no-case-declarations": "off",
+    },
+    env: {
+        es6: true,
+        node: true,
+        jest: true,
     },
 };

.github/workflows/changeset-release.yml

@@ -31,12 +31,10 @@ jobs:
     name: Release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+      - uses: Khan/actions@shared-node-cache-v2
         with:
-          fetch-depth: 0
-      - uses: Khan/[email protected]
-        with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

.github/workflows/pr-checks.yml

@@ -14,45 +14,45 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [16.x]
+        node-version: [20.x]
     steps:
-    - uses: actions/checkout@v2
-    - uses: Khan/actions@shared-node-cache-v0
+    - uses: actions/checkout@v4
+    - uses: Khan/actions@shared-node-cache-v2
       with:
         node-version: ${{ matrix.node-version }}
 
     - name: Get All Changed Files
-      uses: Khan/actions@get-changed-files-v1
+      uses: Khan/actions@get-changed-files-v2
       id: changed
 
-    - id: js-files
-      name: Find .js changed files
-      uses: Khan/actions@filter-files-v0
+    - id: ts-files
+      name: Find .ts changed files
+      uses: Khan/actions@filter-files-v1
       with:
         changed-files: ${{ steps.changed.outputs.files }}
-        extensions: '.js'
+        extensions: '.ts'
 
-    - name: Run Flow
-      if: steps.js-files.outputs.filtered != '[]'
-      run: yarn flow
+    - name: Run TypeScript
+      if: steps.ts-files.outputs.filtered != '[]'
+      run: yarn tsc
 
     - id: eslint-reset
-      uses: Khan/actions@filter-files-v0
+      uses: Khan/actions@filter-files-v1
       name: Files that would trigger a full eslint run
       with:
         changed-files: ${{ steps.changed.outputs.files }}
         files: '.eslintrc.js,package.json,.eslintignore'
 
-    - name: Eslint
+    - name: ESlint
       uses: Khan/actions@full-or-limited-v0
       with:
         full-trigger: ${{ steps.eslint-reset.outputs.filtered }}
-        full: yarn eslint
-        limited-trigger: ${{ steps.js-files.outputs.filtered }}
+        full: yarn eslint src/**/*.ts
+        limited-trigger: ${{ steps.ts-files.outputs.filtered }}
         limited: yarn eslint {}
 
     - id: jest-reset
-      uses: Khan/actions@filter-files-v0
+      uses: Khan/actions@filter-files-v1
       name: Files that would trigger a full jest run
       with:
         changed-files: ${{ steps.changed.outputs.files }}
@@ -63,5 +63,5 @@ jobs:
       with:
         full-trigger: ${{ steps.jest-reset.outputs.filtered }}
         full: yarn jest
-        limited-trigger: ${{ steps.js-files.outputs.filtered }}
+        limited-trigger: ${{ steps.ts-files.outputs.filtered }}
         limited: yarn jest --findRelatedTests {}

.prettierrc

@@ -1,7 +1,7 @@
 {
-    "parser": "flow",
+    "parser": "typescript",
     "tabWidth": 4,
     "trailingComma": "all",
     "bracketSpacing": false,
-    "singleQuote": true
+    "singleQuote": false
 }

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true,
+    "eslint.format.enable": true
+}

package.json

@@ -17,20 +17,21 @@
         "@babel/preset-env": "^7.16.11",
         "@babel/preset-typescript": "^7.22.5",
         "@changesets/cli": "^2.21.1",
-        "@khanacademy/eslint-config": "^0.1.0",
+        "@khanacademy/eslint-config": "^4.0.0",
         "@types/jest": "^29.5.3",
+        "@types/prop-types": "^15.7.12",
+        "@types/react": "^18.3.3",
+        "@typescript-eslint/eslint-plugin": "^7.17.0",
+        "@typescript-eslint/parser": "^7.17.0",
         "babel-jest": "23.4.2",
-        "eslint": "8.7.0",
+        "eslint": "^8.57.0",
         "eslint-config-prettier": "7.0.0",
-        "eslint-plugin-flowtype": "^8.0.3",
-        "eslint-plugin-flowtype-errors": "^4.5.0",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-jest": "^28.6.0",
         "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-react": "^7.29.2",
-        "eslint-plugin-react-hooks": "^4.3.0",
-        "flow-bin": "^0.172.0",
         "graphql-tag": "2.10.1",
         "jest": "^27.5.1",
+        "prettier": "^2.5.1",
+        "prettier-eslint": "^13.0.0",
         "typescript": "^5.1.6"
     },
     "dependencies": {
@@ -40,9 +41,7 @@
         "@babel/types": "^7.17.0",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "apollo-utilities": "^1.3.4",
-        "graphql": "^16.3.0",
-        "jsonschema": "^1.4.1",
-        "prettier": "^2.5.1",
-        "prettier-eslint": "^13.0.0"
+        "graphql": "^16.9.0",
+        "jsonschema": "^1.4.1"
     }
 }

src/__test__/generateTypeFileContents.test.ts

@@ -1,15 +1,16 @@
 // Test the generate the type file contents
+import {describe, it, expect} from "@jest/globals";
+import gql from "graphql-tag";
 
-import {getSchemas} from '../cli/config';
-import {generateTypeFileContents, indexPrelude} from '../generateTypeFiles';
-import gql from 'graphql-tag';
+import {getSchemas} from "../cli/config";
+import {generateTypeFileContents, indexPrelude} from "../generateTypeFiles";
 
-const [_, exampleSchema] = getSchemas(__dirname + '/example-schema.graphql');
+const [_, exampleSchema] = getSchemas(__dirname + "/example-schema.graphql");
 
-describe('generateTypeFileContents', () => {
-    it('split types should export response & variables types', () => {
+describe("generateTypeFileContents", () => {
+    it("split types should export response & variables types", () => {
         const {indexContents, files} = generateTypeFileContents(
-            'hello.js',
+            "hello.js",
             exampleSchema,
             gql`
                 query Hello {
@@ -18,9 +19,9 @@ describe('generateTypeFileContents', () => {
                     }
                 }
             `,
-            {splitTypes: true, schemaFilePath: ''},
-            '__generated__',
-            indexPrelude('yarn queries'),
+            {splitTypes: true, schemaFilePath: ""},
+            "__generated__",
+            indexPrelude("yarn queries"),
         );
         expect(indexContents).toMatchInlineSnapshot(`
             "// AUTOGENERATED
@@ -35,7 +36,7 @@ describe('generateTypeFileContents', () => {
         expect(
             Object.keys(files)
                 .map((k: any) => `// ${k}\n${files[k]}`)
-                .join('\n\n'),
+                .join("\n\n"),
         ).toMatchInlineSnapshot(`
             "// __generated__/Hello.ts
             // AUTOGENERATED -- DO NOT EDIT
@@ -56,9 +57,9 @@ describe('generateTypeFileContents', () => {
         `);
     });
 
-    it('should respect the typeFileName option', () => {
+    it("should respect the typeFileName option", () => {
         const {files} = generateTypeFileContents(
-            'hello.js',
+            "hello.js",
             exampleSchema,
             gql`
                 query Hello {
@@ -69,16 +70,16 @@ describe('generateTypeFileContents', () => {
             `,
             {
                 splitTypes: true,
-                typeFileName: 'prefix-[operationName]-suffix.js',
-                schemaFilePath: '',
+                typeFileName: "prefix-[operationName]-suffix.js",
+                schemaFilePath: "",
             },
-            '__generated__',
-            indexPrelude('yarn queries'),
+            "__generated__",
+            indexPrelude("yarn queries"),
         );
         expect(
             Object.keys(files)
                 .map((k: any) => `// ${k}\n${files[k]}`)
-                .join('\n\n'),
+                .join("\n\n"),
         ).toMatchInlineSnapshot(`
             "// __generated__/prefix-Hello-suffix.js
             // AUTOGENERATED -- DO NOT EDIT
@@ -99,10 +100,10 @@ describe('generateTypeFileContents', () => {
         `);
     });
 
-    describe('experimentalEnums', () => {
-        it('should generate the expected values', () => {
+    describe("experimentalEnums", () => {
+        it("should generate the expected values", () => {
             const {files} = generateTypeFileContents(
-                'hello.js',
+                "hello.js",
                 exampleSchema,
                 gql`
                     query Hello {
@@ -113,15 +114,15 @@ describe('generateTypeFileContents', () => {
                 `,
                 {
                     experimentalEnums: true,
-                    schemaFilePath: '',
+                    schemaFilePath: "",
                 },
-                '__generated__',
-                indexPrelude('yarn queries'),
+                "__generated__",
+                indexPrelude("yarn queries"),
             );
             expect(
                 Object.keys(files)
                     .map((k: any) => `// ${k}\n${files[k]}`)
-                    .join('\n\n'),
+                    .join("\n\n"),
             ).toMatchInlineSnapshot(`
                 "// __generated__/Hello.ts
                 // AUTOGENERATED -- DO NOT EDIT