Add a config option to add pure magic comment for static global varia…

…bles (#4380) * Add a config option to add pure magic comment for static global variables * pureMagicComment is JS specific so make it optional * Remove extra space * Remove annoying warning * Fix
dotansimha · Jul 21, 2020 · 3dac6d8 · 3dac6d8
1 parent b044d32
commit 3dac6d8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1,2 +1 @@
-
 custom: https://www.buymeacoffee.com/JDnuAwr
diff --git a/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts b/packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts
@@ -130,6 +130,11 @@ export interface RawClientSideBasePluginConfig extends RawConfig {
    *
    */
   importDocumentNodeExternallyFrom?: string;
+  /**
+   * @default false
+   * @description This config adds PURE magic comment to the static variables to enforce treeshaking for your bundler.
+   */
+  pureMagicComment?: boolean;
 }
 
 export interface ClientSideBasePluginConfig extends ParsedConfig {
@@ -146,6 +151,7 @@ export interface ClientSideBasePluginConfig extends ParsedConfig {
   importDocumentNodeExternallyFrom?: 'near-operation-file' | string;
   importOperationTypesFrom?: string;
   globalNamespace?: boolean;
+  pureMagicComment?: boolean;
 }
 
 export class ClientSideBaseVisitor<
@@ -182,6 +188,7 @@ export class ClientSideBaseVisitor<
         return getConfigValue(rawConfig.documentMode, DocumentMode.graphQLTag);
       })(rawConfig),
       importDocumentNodeExternallyFrom: getConfigValue(rawConfig.importDocumentNodeExternallyFrom, ''),
+      pureMagicComment: getConfigValue(rawConfig.pureMagicComment, false),
       ...additionalConfig,
     } as any);
 
@@ -296,7 +303,9 @@ export class ClientSideBaseVisitor<
     const isDocumentNode =
       this.config.documentMode === DocumentMode.documentNode ||
       this.config.documentMode === DocumentMode.documentNodeImportFragments;
-    return `export const ${name}${isDocumentNode ? ': DocumentNode' : ''} = ${this._gql(fragmentDocument)};`;
+    return `export const ${name}${isDocumentNode ? ': DocumentNode' : ''} =${
+      this.config.pureMagicComment ? ' /*#__PURE__*/' : ''
+    } ${this._gql(fragmentDocument)};`;
   }
 
   private get fragmentsGraph(): DepGraph<LoadedFragment> {
@@ -342,7 +351,7 @@ export class ClientSideBaseVisitor<
     return localFragments.join('\n');
   }
 
-  protected _parseImport(importStr: string) {
+  protected _parseImport(importStr: string): { moduleName: string; propName: string } {
     const [moduleName, propName] = importStr.split('#');
 
     return {
@@ -443,7 +452,7 @@ export class ClientSideBaseVisitor<
         this.config.documentMode === DocumentMode.documentNodeImportFragments;
       documentString = `${this.config.noExport ? '' : 'export'} const ${documentVariableName}${
         isDocumentNode ? ': DocumentNode' : ''
-      } = ${this._gql(node)};`;
+      } =${this.config.pureMagicComment ? ' /*#__PURE__*/' : ''} ${this._gql(node)};`;
     }
 
     const operationType: string = pascalCase(node.operation);

diff --git a/packages/plugins/other/visitor-plugin-common/src/utils.ts b/packages/plugins/other/visitor-plugin-common/src/utils.ts
@@ -225,7 +225,9 @@ export class DeclarationBlock {
     return (
       (this._comment ? this._comment : '') +
       result +
-      (this._kind === 'interface' || this._kind === 'enum' || this._kind === 'namespace' || this._kind === "function" ? '' : ';') +
+      (this._kind === 'interface' || this._kind === 'enum' || this._kind === 'namespace' || this._kind === 'function'
+        ? ''
+        : ';') +
       '\n'
     );
   }