More progress

Author: emmatown

babel.config.json

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "@babel/preset-env",
+    ["@babel/preset-env", { "targets": { "node": "12" } }],
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],

packages/compiler/package.json

@@ -21,7 +21,9 @@
     "find-pkg-json-field-up": "^1.0.1",
     "fs-extra": "^9.0.0",
     "globby": "^11.0.0",
-    "invariant": "^2.2.4"
+    "invariant": "^2.2.4",
+    "slash": "^3.0.0",
+    "strip-ansi": "^6.0.0"
   },
   "peerDependencies": {
     "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0"

packages/compiler/src/get-generated-types.ts

@@ -1,5 +1,5 @@
 import fs from "fs-extra";
-import path from "path";
+import nodePath from "path";
 import {
   DocumentNode,
   OperationDefinitionNode,
@@ -18,6 +18,8 @@ import {
   PluginObj,
 } from "@babel/core";
 import { TaggedTemplateExpression } from "@babel/types";
+import stripAnsi from "strip-ansi";
+import slash from "slash";
 import globby from "globby";
 import { cachedGenerateSchemaTypes } from "./schema-types";
 import { cachedGenerateOperationTypes } from "./operation-types";
@@ -34,8 +36,8 @@ export const getGeneratedTypes = async ({
   schema: GraphQLSchema;
   directory: string;
 }) => {
-  let generatedDirectory = path.join(
-    path.join(directory, "__generated__", "ts-gql")
+  let generatedDirectory = nodePath.join(
+    nodePath.join(directory, "__generated__", "ts-gql")
   );
 
   const files = await globby(["**/*.{ts,tsx}"], {
@@ -46,6 +48,7 @@ export const getGeneratedTypes = async ({
   let nodeMap: Record<
     string,
     {
+      filename: string;
       makeFrameError: (error: GraphQLError) => string;
       nodes:
         | readonly [OperationDefinitionNode, ...FragmentDefinitionNode[]]
@@ -99,6 +102,7 @@ export const getGeneratedTypes = async ({
                           );
                         }
                         nodeMap[val] = {
+                          filename: slash(nodePath.relative(directory, file)),
                           makeFrameError: (error) => {
                             let loc = locFrom(path.node, error);
                             if (loc) {
@@ -148,7 +152,7 @@ export const getGeneratedTypes = async ({
     if (nodeMap[name] === undefined) {
       fsOperations.push({
         type: "remove",
-        filename: path.join(generatedDirectory, name + ".ts"),
+        filename: nodePath.join(generatedDirectory, name + ".ts"),
       });
     }
   }
@@ -203,22 +207,26 @@ export const getGeneratedTypes = async ({
         nodes[0].kind === "OperationDefinition"
           ? specifiedRules
           : fragmentDocumentRules
+      ).map((err) =>
+        // TODO: make this better
+        nodeMap[key].makeFrameError(err)
       );
 
       if (gqlErrors.length) {
-        // TODO: make this better
-        errors.push(
-          ...gqlErrors.map((err) => nodeMap[key].makeFrameError(err))
-        );
+        errors.push(...gqlErrors);
       }
       let operation = await cachedGenerateOperationTypes(
         schema,
         document,
         nodes[0],
-        path.join(generatedDirectory, `${nodes[0].name!.value}.ts`),
+        nodePath.join(generatedDirectory, `${nodes[0].name!.value}.ts`),
         schemaHash,
         nodes[0].name!.value,
-        gqlErrors.length === 0
+        gqlErrors.length
+          ? `${nodeMap[key].filename}\nThere ${
+              gqlErrors.length === 1 ? "is an error" : "are errors"
+            } with ${nodes[0].name!.value}\n${stripAnsi(gqlErrors.join("\n"))}`
+          : undefined
       );
       if (operation) fsOperations.push(operation);
     })

packages/compiler/src/index.ts

@@ -1 +1,2 @@
 export { getGeneratedTypes } from "./get-generated-types";
+export { watch } from "./watch";

packages/compiler/src/operation-types.ts

@@ -19,9 +19,9 @@ async function generateOperationTypes(
   filename: string,
   operationHash: string,
   operationName: string,
-  isValid: boolean
+  error: string | undefined
 ): Promise<FsOperation> {
-  if (!isValid) {
+  if (error) {
     return {
       type: "output",
       filename,
@@ -31,11 +31,11 @@ async function generateOperationTypes(
         },
         null,
         2
-      )}\nts-gql-meta-end\n*/\n\n
-  
-  export type type = never
-  
-  throw new Error("There is an error in the types of ${operationName}")
+      )}\nts-gql-meta-end\n*/
+
+export type type = never;
+
+throw new Error(${JSON.stringify(error)});
   `,
     };
   }
@@ -106,9 +106,11 @@ export async function cachedGenerateOperationTypes(
   filename: string,
   schemaHash: string,
   operationName: string,
-  isValid: boolean
+  error: string | undefined
 ) {
-  let operationHash = hashString(schemaHash + JSON.stringify(operation) + "v3");
+  let operationHash = hashString(
+    schemaHash + JSON.stringify(operation) + error || "" + "v3"
+  );
   let types: string;
   try {
     types = await fs.readFile(filename, "utf8");
@@ -121,7 +123,7 @@ export async function cachedGenerateOperationTypes(
         filename,
         operationHash,
         operationName,
-        isValid
+        error
       );
     }
     throw err;
@@ -135,7 +137,7 @@ export async function cachedGenerateOperationTypes(
       filename,
       operationHash,
       operationName,
-      isValid
+      error
     );
   }
 }

packages/compiler/src/watch.ts

@@ -1,9 +1,9 @@
 import chokidar from "chokidar";
 import { getRawConfig } from "./config";
 import { createWatcher } from "./watcher";
-import { getGeneratedTypes } from "../dist/compiler.cjs";
+import { getGeneratedTypes } from "./get-generated-types";
 import { getSchemaFromOptions } from "./get-schema";
-import { applyFsOperation, FsOperation } from "./fs-operations";
+import { applyFsOperation } from "./fs-operations";
 
 // TODO: handle changes incrementally
 export const watch = async (cwd: string) => {

packages/next/src/index.ts

@@ -0,0 +1,17 @@
+import { watch } from "@ts-gql/compiler";
+
+export const withTsGql = (internalConfig: any = {}) => (
+  phase:
+    | "phase-export"
+    | "phase-production-build"
+    | "phase-production-server"
+    | "phase-development-server",
+  thing: any
+) => {
+  if (phase === "phase-development-server") {
+    watch(process.cwd());
+  }
+  return typeof internalConfig === "function"
+    ? internalConfig(phase, thing)
+    : internalConfig;
+};