vite-plugin-graphql-loader - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/index.d.ts

@@ -1,3 +0,1 @@
-declare module "*.graphql";
-declare module "*.gql";
 export declare const vitePluginGraphqlLoader: () => {
@@ -4,0 +2,0 @@ name: string;

dist/index.js

 import { EOL } from "os";
 import { gql } from "graphql-tag";
-import { ONE_QUERY, UNIQUE } from "./snippets.js";
+import { ONE_QUERY_FUNCTION_TEMPLATE, UNIQUE_FUNCTION_TEMPLATE, } from "./snippets.js";
 const expandImports = (source) => {
     const lines = source.split(/\r\n|\r|\n/);
-    let outputCode = UNIQUE;
+    let outputCode;
     lines.some((line) => {
@@ -11,9 +11,15 @@ const result = line.match(/^#\s?import (.+)$/);
             const [_, importFile] = result;
-            const parseDocument = `(await import(${importFile})).default`;
-            const appendDefinition = `doc.definitions = doc.definitions.concat(unique(${parseDocument}.definitions));`;
-            outputCode += appendDefinition + EOL;
+            const importName = "Import_" + importFile.replace(/[^a-z0-9]/gi, "_");
+            const importStatement = `import ${importName} from ${importFile};`;
+            const appendDefinition = `doc.definitions = doc.definitions.concat(unique(${importName}.definitions));`;
+            outputCode =
+                (outputCode ?? UNIQUE_FUNCTION_TEMPLATE) +
+                    importStatement +
+                    EOL +
+                    appendDefinition +
+                    EOL;
         }
         return line.length > 0 && line[0] !== "#";
     });
-    return outputCode;
+    return outputCode ?? "";
 };
@@ -37,16 +43,12 @@ export const vitePluginGraphqlLoader = () => {
             let outputCode = "";
-            const operationCount = documentNode.definitions.reduce((accum, op) => {
-                if (op.kind === "OperationDefinition" ||
-                    op.kind === "FragmentDefinition") {
-                    return accum + 1;
-                }
-                return accum;
-            }, 0);
+            const operationCount = documentNode.definitions.filter((op) => (op.kind === "OperationDefinition" ||
+                op.kind === "FragmentDefinition") &&
+                op.name).length;
             if (operationCount < 1) {
                 outputCode += `
-              export default doc;
+export default doc;
             `;
             }
             else {
-                outputCode += ONE_QUERY;
+                outputCode += ONE_QUERY_FUNCTION_TEMPLATE;
                 for (const op of documentNode.definitions) {
@@ -65,4 +67,11 @@ if (op.kind === "OperationDefinition" ||
                         outputCode += `
-export const ${opName} = oneQuery(doc, "${opName}");
-                `;
+export const ${opName} = oneQuery(doc, "${opName}");`;
+                        if (op.kind === "OperationDefinition") {
+                            outputCode += `
+_queries["${opName}"] = ${opName};`;
+                        }
+                        else {
+                            outputCode += `
+_fragments["${opName}"] = ${opName};`;
+                        }
                     }
@@ -69,0 +78,0 @@ }

dist/snippets.d.ts

@@ -1,3 +0,3 @@
-export declare const UNIQUE = "\nconst names = {};\nfunction unique(defs) {\n  return defs.filter(\n    function(def) {\n      if (def.kind !== 'FragmentDefinition') return true;\n      const name = def.name.value\n      if (names[name]) {\n        return false;\n      } else {\n        names[name] = true;\n        return true;\n      }\n    }\n  )\n}\n";
-export declare const ONE_QUERY = "\n// Collect any fragment/type references from a node, adding them to the refs Set\nfunction collectFragmentReferences(node, refs) {\n  if (node.kind === \"FragmentSpread\") {\n    refs.add(node.name.value);\n  } else if (node.kind === \"VariableDefinition\") {\n    const type = node.type;\n    if (type.kind === \"NamedType\") {\n      refs.add(type.name.value);\n    }\n  }\n  if (node.selectionSet) {\n    node.selectionSet.selections.forEach(function(selection) {\n      collectFragmentReferences(selection, refs);\n    });\n  }\n  if (node.variableDefinitions) {\n    node.variableDefinitions.forEach(function(def) {\n      collectFragmentReferences(def, refs);\n    });\n  }\n  if (node.definitions) {\n    node.definitions.forEach(function(def) {\n      collectFragmentReferences(def, refs);\n    });\n  }\n}\nconst definitionRefs = {};\n(function extractReferences() {\n  doc.definitions.forEach(function(def) {\n    if (def.name) {\n      const refs = new Set();\n      collectFragmentReferences(def, refs);\n      definitionRefs[def.name.value] = refs;\n    }\n  });\n})();\nfunction findOperation(doc, name) {\n  for (let i = 0; i < doc.definitions.length; i++) {\n    const element = doc.definitions[i];\n    if (element.name && element.name.value == name) {\n      return element;\n    }\n  }\n}\nfunction oneQuery(doc, operationName) {\n  // Copy the DocumentNode, but clear out the definitions\n  const newDoc = {\n    kind: doc.kind,\n    definitions: [findOperation(doc, operationName)]\n  };\n  if (doc.hasOwnProperty(\"loc\")) {\n    newDoc.loc = doc.loc;\n  }\n  // Now, for the operation we're running, find any fragments referenced by\n  // it or the fragments it references\n  const opRefs = definitionRefs[operationName] || new Set();\n  const allRefs = new Set();\n  let newRefs = new Set();\n  // IE 11 doesn't support \"new Set(iterable)\", so we add the members of opRefs to newRefs one by one\n  opRefs.forEach(function(refName) {\n    newRefs.add(refName);\n  });\n  while (newRefs.size > 0) {\n    const prevRefs = newRefs;\n    newRefs = new Set();\n    prevRefs.forEach(function(refName) {\n      if (!allRefs.has(refName)) {\n        allRefs.add(refName);\n        const childRefs = definitionRefs[refName] || new Set();\n        childRefs.forEach(function(childRef) {\n          newRefs.add(childRef);\n        });\n      }\n    });\n  }\n  allRefs.forEach(function(refName) {\n    const op = findOperation(doc, refName);\n    if (op) {\n      newDoc.definitions.push(op);\n    }\n  });\n  return newDoc;\n}\n\nexport default doc;\n";
+export declare const UNIQUE_FUNCTION_TEMPLATE: string;
+export declare const ONE_QUERY_FUNCTION_TEMPLATE: string;
 //# sourceMappingURL=snippets.d.ts.map

dist/snippets.js

@@ -1,105 +0,112 @@
-export const UNIQUE = `
 const names = {};
-function unique(defs) {
-  return defs.filter(
-    function(def) {
-      if (def.kind !== 'FragmentDefinition') return true;
-      const name = def.name.value
-      if (names[name]) {
-        return false;
-      } else {
-        names[name] = true;
-        return true;
-      }
-    }
-  )
-}
+const unique = (defs) => {
+    return defs.filter(function (def) {
+        if (def.kind !== "FragmentDefinition")
+            return true;
+        const name = def.name.value;
+        if (names[name]) {
+            return false;
+        }
+        else {
+            names[name] = true;
+            return true;
+        }
+    });
+};
+export const UNIQUE_FUNCTION_TEMPLATE = `
+const names = {};
+const unique = ${unique.toString()};
 `;
-export const ONE_QUERY = `
-// Collect any fragment/type references from a node, adding them to the refs Set
-function collectFragmentReferences(node, refs) {
-  if (node.kind === "FragmentSpread") {
-    refs.add(node.name.value);
-  } else if (node.kind === "VariableDefinition") {
-    const type = node.type;
-    if (type.kind === "NamedType") {
-      refs.add(type.name.value);
+const collectFragmentReferences = (node, refs) => {
+    if (node.kind === "FragmentSpread") {
+        refs.add(node.name.value);
     }
-  }
-  if (node.selectionSet) {
-    node.selectionSet.selections.forEach(function(selection) {
-      collectFragmentReferences(selection, refs);
+    else if (node.kind === "VariableDefinition") {
+        const type = node.type;
+        if (type.kind === "NamedType") {
+            refs.add(type.name.value);
+        }
+    }
+    if (node.selectionSet) {
+        node.selectionSet.selections.forEach(function (selection) {
+            collectFragmentReferences(selection, refs);
+        });
+    }
+    if (node.variableDefinitions) {
+        node.variableDefinitions.forEach(function (def) {
+            collectFragmentReferences(def, refs);
+        });
+    }
+    if (node.definitions) {
+        node.definitions.forEach(function (def) {
+            collectFragmentReferences(def, refs);
+        });
+    }
+};
+const definitionRefs = {};
+const extractReferences = (doc) => {
+    doc.definitions.forEach(function (def) {
+        if (def.name) {
+            const refs = new Set();
+            collectFragmentReferences(def, refs);
+            definitionRefs[def.name.value] = refs;
+        }
     });
-  }
-  if (node.variableDefinitions) {
-    node.variableDefinitions.forEach(function(def) {
-      collectFragmentReferences(def, refs);
-    });
-  }
-  if (node.definitions) {
-    node.definitions.forEach(function(def) {
-      collectFragmentReferences(def, refs);
-    });
-  }
-}
-const definitionRefs = {};
-(function extractReferences() {
-  doc.definitions.forEach(function(def) {
-    if (def.name) {
-      const refs = new Set();
-      collectFragmentReferences(def, refs);
-      definitionRefs[def.name.value] = refs;
+};
+const findOperation = (doc, name) => {
+    for (let i = 0; i < doc.definitions.length; i++) {
+        const element = doc.definitions[i];
+        if (element.name && element.name.value == name) {
+            return element;
+        }
     }
-  });
-})();
-function findOperation(doc, name) {
-  for (let i = 0; i < doc.definitions.length; i++) {
-    const element = doc.definitions[i];
-    if (element.name && element.name.value == name) {
-      return element;
+};
+const oneQuery = (doc, operationName) => {
+    const newDoc = {
+        kind: doc.kind,
+        definitions: [findOperation(doc, operationName)],
+    };
+    if (doc.hasOwnProperty("loc")) {
+        newDoc.loc = doc.loc;
     }
-  }
-}
-function oneQuery(doc, operationName) {
-  // Copy the DocumentNode, but clear out the definitions
-  const newDoc = {
-    kind: doc.kind,
-    definitions: [findOperation(doc, operationName)]
-  };
-  if (doc.hasOwnProperty("loc")) {
-    newDoc.loc = doc.loc;
-  }
-  // Now, for the operation we're running, find any fragments referenced by
-  // it or the fragments it references
-  const opRefs = definitionRefs[operationName] || new Set();
-  const allRefs = new Set();
-  let newRefs = new Set();
-  // IE 11 doesn't support "new Set(iterable)", so we add the members of opRefs to newRefs one by one
-  opRefs.forEach(function(refName) {
-    newRefs.add(refName);
-  });
-  while (newRefs.size > 0) {
-    const prevRefs = newRefs;
-    newRefs = new Set();
-    prevRefs.forEach(function(refName) {
-      if (!allRefs.has(refName)) {
-        allRefs.add(refName);
-        const childRefs = definitionRefs[refName] || new Set();
-        childRefs.forEach(function(childRef) {
-          newRefs.add(childRef);
+    const opRefs = definitionRefs[operationName] || new Set();
+    const allRefs = new Set();
+    let newRefs = new Set();
+    opRefs.forEach((refName) => {
+        newRefs.add(refName);
+    });
+    while (newRefs.size > 0) {
+        const prevRefs = newRefs;
+        newRefs = new Set();
+        prevRefs.forEach((refName) => {
+            if (!allRefs.has(refName)) {
+                allRefs.add(refName);
+                const childRefs = definitionRefs[refName] || new Set();
+                childRefs.forEach((childRef) => {
+                    newRefs.add(childRef);
+                });
+            }
         });
-      }
+    }
+    allRefs.forEach((refName) => {
+        const op = findOperation(doc, refName);
+        if (op) {
+            newDoc.definitions.push(op);
+        }
     });
-  }
-  allRefs.forEach(function(refName) {
-    const op = findOperation(doc, refName);
-    if (op) {
-      newDoc.definitions.push(op);
-    }
-  });
-  return newDoc;
-}
+    return newDoc;
+};
+export const ONE_QUERY_FUNCTION_TEMPLATE = `
+const collectFragmentReferences = ${collectFragmentReferences.toString()};
+const definitionRefs = {};
+const extractReferences = ${extractReferences.toString()};
+extractReferences(doc);
+const findOperation = ${findOperation.toString()};
+const oneQuery = ${oneQuery.toString()};
 
+export const _queries = {};
+export const _fragments = {};
+
 export default doc;
 `;
 //# sourceMappingURL=snippets.js.map

package.json

 {
     "name": "vite-plugin-graphql-loader",
-    "version": "3.0.0",
+    "version": "3.0.1",
     "description": "A Vite plugin for loading GraphQL files.",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -9,3 +9,3 @@ # vite-plugin-graphql-loader
 
-If you are using TypeScript, I recommend using GraphQL Codegen and [vite-plugin-graphql-codegen](https://www.npmjs.com/package/vite-plugin-graphql-codegen) instead to generate TypesScript interfaces for your queries and fragments.
+This package _doesn't_ generate TypeScript definitions from the queries and fragments - see [vite-plugin-graphql-codegen](https://www.npmjs.com/package/vite-plugin-graphql-codegen) if you require this.
 
@@ -60,19 +60,41 @@ ## Install
 
-If you are using TypeScript, you will have to declare `.gql` or `.graphql` files:
+If you have multiple queries in the same file, import them like this:
 
-`graphql.d.ts`:
+```javascript
+import { FirstQuery, SecondQuery } from "./example.graphql";
+```
 
+## TypeScript
+
+If you are using TypeScript, you will have to declare `.gql` or `.graphql` files.
+
+Create `graphql.d.ts` anywhere in your source directory and
+
 ```typescript
 declare module "*.gql";
 declare module "*.graphql";
+```
 
-// Or if you aren't using fragments:
-// declare module "*.gql" {
-//     const Query: import("graphql").DocumentNode;
-//     export default Query;
-// }
+**_Alternatively_**, change it to this (replacing .gql with .graphql depending on what you use):
+
+```typescript
+declare module "*.gql" {
+    const Query: import("graphql").DocumentNode;
+    export default Query;
+    export const _queries: Record<string, import("graphql").DocumentNode>;
+    export const _fragments: Record<
+        string,
+        import("graphql").FragmentDefinitionNode
+    >;
+}
 ```
 
+And then import fragments and queries like so in order to type them as `DocumentNode` and `FragmentDefinitionNode` objects.
+
+```typescript
+import Document, { _queries, _fragments } from "./example.graphql";
+```
+
 ## Changelog
 
 **_v3.0.0_**: Moved from CJS to ESM, inline with Vite 5.0's CJS deprecation. If you are using CommonJS, continue using v2.0 of this package.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17287

increased by13.64%

Lines of code

200

increased by2.04%

Number of lines in readme file

99

increased by28.57%

No dependency changes