[Transform] Imported test fixtures from babel-plugin-relay

Author: kastermester

transform/package.json

@@ -28,6 +28,7 @@
     "@types/jest": "^22.0.1",
     "@types/node": "^9.3.0",
     "jest": "^22.1.4",
+    "relay-test-utils": "^1.5.0-rc.1",
     "ts-jest": "^22.0.1"
   },
   "jest": {

transform/src/Options.ts

@@ -11,6 +11,7 @@ export interface Options {
 	isDevVariable?: string;
 	buildCommand?: string;
 	isDevelopment?: boolean;
+	substituteVariables?: boolean;
 }
 
 export interface NormalizedOptions {
@@ -20,6 +21,7 @@ export interface NormalizedOptions {
 	isDevVariable?: string;
 	buildCommand?: string;
 	isDevelopment?: boolean;
+	substituteVariables?: boolean;
 }
 
 const dotJsonLength = '.json'.length;
@@ -49,7 +51,7 @@ export function normalizeOptions(options: Options): NormalizedOptions {
 		relayQLTransformer: options.schema ? new RelayQLTransformer(readGraphQLSchema(options.schema), {
 			inputArgumentName: 'input',
 			snakeCase: false,
-			substituteVariables: true,
+			substituteVariables: options.substituteVariables || false,
 			validator: null,
 		}) : undefined,
 	};

transform/src/RelayQLTransformer.ts

@@ -80,13 +80,20 @@ export class RelayQLTransformer {
     node: ts.TaggedTemplateExpression,
     options: TextTransformOptions,
   ): Printable {
+    const documentName = sanitizeDocumentName(options.documentName);
+    const opts = {
+      documentName,
+      propName: options.propName,
+      enableValidation: options.enableValidation,
+      tagName: options.tagName,
+    };
     const {
       substitutions,
       templateText,
       variableNames,
-    } = this.processTemplateLiteral(node, options.documentName);
-    const documentText = this.processTemplateText(templateText, options);
-    const definition = this.processDocumentText(documentText, options);
+    } = this.processTemplateLiteral(node, documentName);
+    const documentText = this.processTemplateText(templateText, opts);
+    const definition = this.processDocumentText(documentText, opts);
 
     const Printer = RelayQLPrinter(this.options);
     return new Printer(options.tagName, variableNames).print(
@@ -119,14 +126,14 @@ export class RelayQLTransformer {
       };
     }
     chunks.push(template.head.text);
+    let previousChunk = template.head.text;
     template.templateSpans.forEach((element, ii) => {
       const literal = element.literal;
       const chunk = literal.text;
-      chunks.push(chunk);
       const name = 'RQL_' + ii;
       const value = element.expression;
       substitutions.push({ name, value });
-      if (/:\s*$/.test(chunk)) {
+      if (/:\s*$/.test(previousChunk)) {
         if (!this.options.substituteVariables) {
           throw new Error(util.format(
             "You supplied a GraphQL document named `%s` that uses template " +
@@ -140,6 +147,8 @@ export class RelayQLTransformer {
       } else {
         chunks.push('...' + name);
       }
+      chunks.push(chunk);
+      previousChunk = chunk;
     });
     return { substitutions, templateText: chunks.join('').trim(), variableNames };
   }
@@ -151,9 +160,8 @@ export class RelayQLTransformer {
     templateText: string,
     { documentName, propName }: TextTransformOptions,
   ): string {
-    const pattern = /^(fragment|mutation|query|subscription)\s*(\w*)?([\s\S]*)/;
+    const pattern = /^[\s\n]*(fragment|mutation|query|subscription)\s*(\w*)?([\s\S]*)/;
     const matches = pattern.exec(templateText);
-    const sanitizedDocumentName = sanitizeDocumentName(documentName);
     if (!matches) {
       throw new Error(util.format(
         "You supplied a GraphQL document named `%s` with invalid syntax. It " +
@@ -167,7 +175,7 @@ export class RelayQLTransformer {
     // Allow `fragment on Type {...}`.
     if (type === 'fragment' && name === 'on') {
       name =
-        sanitizedDocumentName + (propName ? '_' + capitalize(propName) : '') + 'RelayQL';
+        documentName + (propName ? '_' + capitalize(propName) : '') + 'RelayQL';
       rest = 'on' + rest;
     }
     const definitionName = capitalize(name);

transform/src/RelayTransformError.ts

@@ -1,13 +1,13 @@
 import { Location } from "graphql";
 
-export class RelayTransformError {
+export class RelayTransformError extends Error {
   message: string;
   loc: Location | null;
   stack: string;
 
   constructor(message: string, loc: Location | undefined) {
-    this.message = message;
+    super(message);
     this.loc = loc || null;
-    this.stack = new Error().stack || "";
+    Object.setPrototypeOf(this, RelayTransformError.prototype);
   }
 }

transform/src/compileGraphQLTag.ts

@@ -82,18 +82,12 @@ function createAST(
   const buildCommand =
     (opts.buildCommand) || 'relay-compiler';
 
-  // Fallback is 'true'
-  const isDevelopment =
-    (process.env.NODE_ENV) !== 'production';
-
   const modernNode = createModernNode(ctx, opts, graphqlDefinition, fileName);
   if (isCompatMode) {
-    console.log('Launching compat mode!');
     const result = createCompatNode(
       modernNode,
       createClassicNode(ctx, bindingsAtNode(node), node, graphqlDefinition, opts),
     );
-    console.log('Done generating stuff');
     if (setSourceMapRange) {
       ts.setSourceMapRange(result, ts.getSourceMapRange(node));
     }

transform/src/compileRelayQLTag.ts

@@ -17,11 +17,14 @@ export function compileRelayQLTag(
 	tagName: string,
 	enableValidation: boolean,
 ): ts.Expression {
-	const result = transformer.transform(node, {
-		documentName,
-		propName,
-		tagName,
-		enableValidation,
-	});
-	return result;
+	try {
+		return transformer.transform(node, {
+			documentName,
+			propName,
+			tagName,
+			enableValidation,
+		});
+	} catch (e) {
+		throw createTransformError(e);
+	}
 }

transform/src/index.ts

@@ -16,18 +16,45 @@ interface ExtraNode {
   transformFlags: TransformFlags;
 }
 
+function insertVarDecl(varDecl: ts.Statement, insertInto: ts.NodeArray<ts.Statement>): ts.Statement[] {
+  const useStrictIdx = insertInto.findIndex(
+    stmt => ts.isExpressionStatement(stmt) && ts.isLiteralExpression(stmt.expression) && stmt.expression.text == 'use strict'
+  );
+  if (useStrictIdx >= 0) {
+    const newStmts = insertInto.slice(0);
+    newStmts.splice(useStrictIdx + 1, 0, varDecl);
+    return newStmts;
+  }
+  return [varDecl, ...insertInto];
+}
+
 function visitor(ctx: ts.TransformationContext, sf: ts.SourceFile, opts: NormalizedOptions): ts.Visitor {
   const fileName = sf.fileName;
+  let i = 0;
+  const varDecls: ts.VariableDeclaration[] = [];
+  function declareVar(id: ts.Identifier): void {
+    varDecls.push(ts.createVariableDeclaration(id, undefined, undefined));
+  }
+  let scopeLevel = 0;
   const visit = (node: ts.Node): ts.Node => {
     // Easy bailout if there are not ES2015 features used
     if (((node as any as ExtraNode).transformFlags & TransformFlags.ContainsES2015) !== TransformFlags.ContainsES2015) {
       return node;
     }
+    if (ts.isBlock(node)) {
+      scopeLevel++;
+    }
 
     if (ts.isTaggedTemplateExpression(node)) {
       const ast = getValidGraphQLTag(node);
       if (ast) {
-        return compileGraphQLTag(ctx, opts, node, ast, fileName);
+        const res = compileGraphQLTag(ctx, opts, node, ast, fileName);
+        if (scopeLevel > 0) {
+          const id = ts.createIdentifier('__graphql$' + i++);
+          declareVar(id);
+          return ts.createLogicalOr(id, ts.createAssignment(id, res));
+        }
+        return res;
       }
 
       const relayQLTag = getValidRelayQLTag(node);
@@ -43,7 +70,16 @@ function visitor(ctx: ts.TransformationContext, sf: ts.SourceFile, opts: Normali
         return result;
       }
     }
-    return ts.visitEachChild(node, visit, ctx);
+    const res = ts.visitEachChild(node, visit, ctx);
+
+    if (ts.isSourceFile(res) && varDecls.length > 0) {
+      const varDecl = ts.createVariableStatement(undefined, ts.createVariableDeclarationList(varDecls));
+      return ts.updateSourceFileNode(res, insertVarDecl(varDecl, res.statements));
+    }
+    if (ts.isBlock(node)) {
+      scopeLevel--;
+    }
+    return res;
   };
 
   return visit;

transform/test/TSTransform-test.ts

@@ -2,36 +2,90 @@ import { transformer } from '../src';
 import * as ts from 'typescript';
 import * as path from 'path';
 import { Options } from '../src/Options';
+import { generateTestsFromFixtures } from 'relay-test-utils/lib/RelayModernTestUtils'
 
-function transformWithOptions(options: Options, contents: string, fileName: string): ts.TranspileOutput {
-  return ts.transpileModule(contents, {
-    compilerOptions: {
-      target: ts.ScriptTarget.ES5,
-      sourceMap: true,
-    },
-    fileName: fileName,
-    transformers: {
-      before: [transformer(options)],
-    },
-  });
+function transformWithOptions(options: Options, fileName: string) {
+  return (text, providedFileName?: string) =>
+    ts.transpileModule(text, {
+      compilerOptions: {
+        target: ts.ScriptTarget.ES2017,
+        jsx: ts.JsxEmit.Preserve,
+        sourceMap: false,
+      },
+      fileName: fileName,
+      transformers: {
+        before: [transformer(options)],
+      },
+    }).outputText;
 }
 
-const schemaPath = path.resolve(__dirname, 'testschema.rfc.graphql');
+const schemaPath = path.resolve(__dirname, 'testschema.graphql');
+const oldSchemaPath = path.resolve(__dirname, 'testschema.old.graphql');
 
 describe('TSTransform', () => {
-  it('Modern should compile', async () => {
-    const text = 'createFragmentContainer(MyComponent, {todo: graphql`fragment MyFragment_todo on Node { id }`})';
+  generateTestsFromFixtures(`${__dirname}/fixtures-modern`, transformWithOptions({}, '/test/MyComponent.tsx'));
 
-    expect(transformWithOptions({ isDevVariable: 'IS_DEV', artifactDirectory: '/testing/artifacts' }, text, '/test/MyComponent.ts')).toMatchSnapshot('modern test');
-  });
-  it('Compat should compile', async () => {
-    const text = 'createFragmentContainer(MyComponent, {todo: graphql`fragment MyFragment_todo on Node { id }`})';
+  generateTestsFromFixtures(
+    `${__dirname}/fixtures-compat`,
+    transformWithOptions({
+      compat: true,
+      schema: schemaPath,
+      substituteVariables: true,
+    }, '/test/MyComponent.tsx'),
+  );
 
-    expect(transformWithOptions({ isDevVariable: 'IS_DEV', artifactDirectory: '/testing/artifacts', schema: schemaPath, compat: true }, text, '/test/MyComponent.ts')).toMatchSnapshot('compat test');
-  });
-  it('Classic should compile', async () => {
-    const text = 'createFragmentContainer(MyComponent, {todo: () => Relay.QL`fragment on Node { id }`})';
+  generateTestsFromFixtures(
+    `${__dirname}/fixtures-compat`,
+    transformWithOptions({
+      compat: true,
+      schema: schemaPath,
+      substituteVariables: true,
+    }, '/test/MyComponent.tsx'),
+  );
+
+  generateTestsFromFixtures(
+    `${__dirname}/fixtures-classic`,
+    transformWithOptions({
+      schema: oldSchemaPath,
+      substituteVariables: true,
+    }, '/test/MyComponent.tsx'),
+  );
+
+  describe('`development` option', () => {
+    it('tests the hash when `development` is set', () => {
+      expect(
+        transformWithOptions({ isDevelopment: true }, '/test/TestFrag.ts')(
+          'graphql`fragment TestFrag on Node { id }`',
+        ),
+      ).toMatchSnapshot();
+    });
+
+    it('tests the hash when `isDevVariable` is set', () => {
+      expect(
+        transformWithOptions({ isDevVariable: 'IS_DEV' }, '/test/TestFrag.ts')(
+          'graphql`fragment TestFrag on Node { id }`',
+        ),
+      ).toMatchSnapshot();
+    });
+
+    it('uses a custom build command in message', () => {
+      expect(
+        transformWithOptions(
+          {
+            buildCommand: 'relay-build',
+            isDevelopment: true,
+          },
+          '/test/TestFrag.ts',
+        )('graphql`fragment TestFrag on Node { id }`'),
+      ).toMatchSnapshot();
+    });
 
-    expect(transformWithOptions({ isDevVariable: 'IS_DEV', artifactDirectory: '/testing/artifacts', schema: schemaPath }, text, '/test/MyComponent.ts')).toMatchSnapshot('classic test');
+    it('does not test the hash when `development` is not set', () => {
+      expect(
+        transformWithOptions({}, '/test/TestFrag.ts')(
+          'graphql`fragment TestFrag on Node { id }`',
+        ),
+      ).toMatchSnapshot();
+    });
   });
 });