@graphql-codegen/cli 2.12.2 → 2.12.3-alpha-20220927092513-40482d1aa

package/cjs/init/helpers.js

@@ -7,13 +7,44 @@ const path_1 = require("path");
 const fs_1 = require("fs");
 const detect_indent_1 = tslib_1.__importDefault(require("detect-indent"));
 const get_latest_version_js_1 = require("../utils/get-latest-version.js");
+const template_1 = tslib_1.__importDefault(require("@babel/template"));
+const generator_1 = tslib_1.__importDefault(require("@babel/generator"));
+const t = tslib_1.__importStar(require("@babel/types"));
+function jsObjectToBabelObjectExpression(obj) {
+    const objExp = t.objectExpression([]);
+    Object.entries(obj).forEach(([key, val]) => {
+        if (Array.isArray(val)) {
+            objExp.properties.push(t.objectProperty(/^[a-zA-Z0-9]+$/.test(key) ? t.identifier(key) : t.stringLiteral(key), t.arrayExpression(val.map(v => (typeof v === 'object' ? jsObjectToBabelObjectExpression(v) : t.valueToNode(v))))));
+        }
+        else {
+            objExp.properties.push(t.objectProperty(/^[a-zA-Z0-9]+$/.test(key) ? t.identifier(key) : t.stringLiteral(key), typeof val === 'object' ? jsObjectToBabelObjectExpression(val) : t.valueToNode(val)));
+        }
+    });
+    return objExp;
+}
 // Parses config and writes it to a file
 async function writeConfig(answers, config) {
     const YAML = await Promise.resolve().then(() => tslib_1.__importStar(require('json-to-pretty-yaml'))).then(m => ('default' in m ? m.default : m));
-    const ext = answers.config.toLocaleLowerCase().endsWith('.json') ? 'json' : 'yml';
-    const content = ext === 'json' ? JSON.stringify(config) : YAML.stringify(config);
+    const ext = answers.config.toLocaleLowerCase().split('.')[1];
     const fullPath = (0, path_1.resolve)(process.cwd(), answers.config);
     const relativePath = (0, path_1.relative)(process.cwd(), answers.config);
+    let content;
+    if (ext === 'ts') {
+        const buildRequire = template_1.default.statement(`%%config%%`);
+        const ast = buildRequire({
+            config: jsObjectToBabelObjectExpression(config),
+        });
+        content = `
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = ${(0, generator_1.default)(ast).code.replace(/\(|\)/g, '')}
+
+export default config;
+`;
+    }
+    else {
+        content = ext === 'json' ? JSON.stringify(config) : YAML.stringify(config);
+    }
     (0, fs_1.writeFileSync)(fullPath, content, {
         encoding: 'utf-8',
     });
@@ -40,7 +71,7 @@ async function writePackage(answers, configLocation) {
     if (!pkg.devDependencies) {
         pkg.devDependencies = {};
     }
-    await Promise.all(answers.plugins.map(async (plugin) => {
+    await Promise.all((answers.plugins || []).map(async (plugin) => {
         pkg.devDependencies[plugin.package] = await (0, get_latest_version_js_1.getLatestVersion)(plugin.package);
     }));
     if (answers.introspection) {

package/cjs/init/index.js

@@ -22,10 +22,11 @@ async function init() {
     const config = {
         overwrite: true,
         schema: answers.schema,
-        documents: answers.targets.includes(types_js_1.Tags.browser) ? answers.documents : null,
+        documents: answers.targets.includes(types_js_1.Tags.client) ? answers.documents : undefined,
         generates: {
             [answers.output]: {
-                plugins: answers.plugins.map(p => p.value),
+                preset: answers.targets.includes(types_js_1.Tags.client) ? 'client' : undefined,
+                plugins: answers.plugins ? answers.plugins.map(p => p.value) : [],
             },
         },
     };
@@ -41,7 +42,7 @@ async function init() {
     // Emit status to the terminal
     log(`
     Config file generated at ${(0, helpers_js_1.bold)(relativePath)}
-    
+
       ${(0, helpers_js_1.bold)('$ npm install')}
 
     To install the plugins.

package/cjs/init/plugins.js

@@ -18,7 +18,7 @@ exports.plugins = [
         package: '@graphql-codegen/typescript-operations',
         value: 'typescript-operations',
         pathInRepo: 'typescript/operations',
-        available: tags => allOf(tags, types_js_1.Tags.browser, types_js_1.Tags.typescript),
+        available: tags => allOf(tags, types_js_1.Tags.client, types_js_1.Tags.typescript) || hasTag(types_js_1.Tags.stencil)(tags),
         shouldBeSelected: tags => oneOf(tags, types_js_1.Tags.angular, types_js_1.Tags.stencil) || allOf(tags, types_js_1.Tags.typescript, types_js_1.Tags.react),
         defaultExtension: '.ts',
     },
@@ -45,7 +45,7 @@ exports.plugins = [
         package: '@graphql-codegen/flow-operations',
         value: 'flow-operations',
         pathInRepo: 'flow/operations',
-        available: tags => allOf(tags, types_js_1.Tags.browser, types_js_1.Tags.flow),
+        available: tags => allOf(tags, types_js_1.Tags.client, types_js_1.Tags.flow),
         shouldBeSelected: tags => noneOf(tags, types_js_1.Tags.typescript),
         defaultExtension: '.js',
     },
@@ -58,42 +58,6 @@ exports.plugins = [
         shouldBeSelected: tags => noneOf(tags, types_js_1.Tags.typescript),
         defaultExtension: '.js',
     },
-    {
-        name: `TypeScript Apollo Angular ${(0, helpers_js_1.italic)('(typed GQL services)')}`,
-        package: '@graphql-codegen/typescript-apollo-angular',
-        value: 'typescript-apollo-angular',
-        pathInRepo: 'typescript/apollo-angular',
-        available: hasTag(types_js_1.Tags.angular),
-        shouldBeSelected: () => true,
-        defaultExtension: '.js',
-    },
-    {
-        name: `TypeScript Vue Apollo Composition API ${(0, helpers_js_1.italic)('(typed functions)')}`,
-        package: '@graphql-codegen/typescript-vue-apollo',
-        value: 'typescript-vue-apollo',
-        pathInRepo: 'typescript/vue-apollo',
-        available: tags => allOf(tags, types_js_1.Tags.vue, types_js_1.Tags.typescript),
-        shouldBeSelected: () => true,
-        defaultExtension: '.ts',
-    },
-    {
-        name: `TypeScript Vue Apollo Smart Operations ${(0, helpers_js_1.italic)('(typed functions)')}`,
-        package: '@graphql-codegen/typescript-vue-apollo-smart-ops',
-        value: 'typescript-vue-apollo-smart-ops',
-        pathInRepo: 'typescript/vue-apollo-smart-ops',
-        available: tags => allOf(tags, types_js_1.Tags.vue, types_js_1.Tags.typescript),
-        shouldBeSelected: () => true,
-        defaultExtension: '.ts',
-    },
-    {
-        name: `TypeScript React Apollo ${(0, helpers_js_1.italic)('(typed components and HOCs)')}`,
-        package: '@graphql-codegen/typescript-react-apollo',
-        value: 'typescript-react-apollo',
-        pathInRepo: 'typescript/react-apollo',
-        available: tags => allOf(tags, types_js_1.Tags.react, types_js_1.Tags.typescript),
-        shouldBeSelected: () => true,
-        defaultExtension: '.tsx',
-    },
     {
         name: `TypeScript Stencil Apollo ${(0, helpers_js_1.italic)('(typed components)')}`,
         package: '@graphql-codegen/typescript-stencil-apollo',
@@ -117,7 +81,7 @@ exports.plugins = [
         package: '@graphql-codegen/typescript-graphql-files-modules',
         value: 'typescript-graphql-files-modules',
         pathInRepo: 'typescript/graphql-files-modules',
-        available: tags => allOf(tags, types_js_1.Tags.browser, types_js_1.Tags.typescript),
+        available: tags => allOf(tags, types_js_1.Tags.client, types_js_1.Tags.typescript) || hasTag(types_js_1.Tags.stencil)(tags),
         shouldBeSelected: () => false,
         defaultExtension: '.ts',
     },
@@ -126,7 +90,7 @@ exports.plugins = [
         package: '@graphql-codegen/typescript-document-nodes',
         value: 'typescript-document-nodes',
         pathInRepo: 'typescript/document-nodes',
-        available: tags => allOf(tags, types_js_1.Tags.typescript),
+        available: tags => allOf(tags, types_js_1.Tags.typescript) || hasTag(types_js_1.Tags.stencil)(tags),
         shouldBeSelected: () => false,
         defaultExtension: '.ts',
     },
@@ -135,7 +99,7 @@ exports.plugins = [
         package: '@graphql-codegen/fragment-matcher',
         value: 'fragment-matcher',
         pathInRepo: 'other/fragment-matcher',
-        available: hasTag(types_js_1.Tags.browser),
+        available: tags => hasTag(types_js_1.Tags.client)(tags) || hasTag(types_js_1.Tags.stencil)(tags),
         shouldBeSelected: () => false,
         defaultExtension: '.ts',
     },
@@ -144,7 +108,7 @@ exports.plugins = [
         package: '@graphql-codegen/urql-introspection',
         value: 'urql-introspection',
         pathInRepo: 'other/urql-introspection',
-        available: hasTag(types_js_1.Tags.browser),
+        available: tags => hasTag(types_js_1.Tags.client)(tags) || hasTag(types_js_1.Tags.stencil)(tags),
         shouldBeSelected: () => false,
         defaultExtension: '.ts',
     },

package/cjs/init/questions.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOutputDefaultValue = exports.getPluginChoices = exports.getApplicationTypeChoices = exports.getQuestions = void 0;
+exports.getDocumentsDefaultValue = exports.getOutputDefaultValue = exports.getPluginChoices = exports.getApplicationTypeChoices = exports.getQuestions = void 0;
 const helpers_js_1 = require("./helpers.js");
 const types_js_1 = require("./types.js");
 const plugins_js_1 = require("./plugins.js");
 function getQuestions(possibleTargets) {
     return [
         {
-            type: 'checkbox',
+            type: 'list',
             name: 'targets',
             message: `What type of application are you building?`,
             choices: getApplicationTypeChoices(possibleTargets),
             validate: ((targets) => targets.length > 0),
+            default: getApplicationTypeChoices(possibleTargets).findIndex(c => c.checked),
         },
         {
             type: 'input',
@@ -29,14 +30,20 @@ function getQuestions(possibleTargets) {
                 // flatten targets
                 // I can't find an API in Inquirer that would do that
                 answers.targets = normalizeTargets(answers.targets);
-                return answers.targets.includes(types_js_1.Tags.browser);
+                return answers.targets.includes(types_js_1.Tags.client) || answers.targets.includes(types_js_1.Tags.stencil);
             },
-            default: 'src/**/*.graphql',
+            default: getDocumentsDefaultValue,
             validate: (str) => str.length > 0,
         },
         {
             type: 'checkbox',
             name: 'plugins',
+            when: answers => {
+                // flatten targets
+                // I can't find an API in Inquirer that would do that
+                answers.targets = normalizeTargets(answers.targets);
+                return !answers.targets.includes(types_js_1.Tags.client);
+            },
             message: 'Pick plugins:',
             choices: getPluginChoices,
             validate: ((plugins) => plugins.length > 0),
@@ -51,22 +58,24 @@ function getQuestions(possibleTargets) {
         {
             type: 'confirm',
             name: 'introspection',
+            default: false,
             message: 'Do you want to generate an introspection file?',
         },
         {
             type: 'input',
             name: 'config',
             message: 'How to name the config file?',
-            default: 'codegen.yml',
+            default: answers => (answers.targets.includes(types_js_1.Tags.client) ? 'codegen.ts' : 'codegen.yml'),
             validate: (str) => {
                 const isNotEmpty = str.length > 0;
-                const hasCorrectExtension = ['json', 'yml', 'yaml'].some(ext => str.toLocaleLowerCase().endsWith(`.${ext}`));
+                const hasCorrectExtension = ['json', 'yml', 'yaml', 'js', 'ts'].some(ext => str.toLocaleLowerCase().endsWith(`.${ext}`));
                 return isNotEmpty && hasCorrectExtension;
             },
         },
         {
             type: 'input',
             name: 'script',
+            default: 'codegen',
             message: 'What script in package.json should run the codegen?',
             validate: (str) => str.length > 0,
         },
@@ -81,8 +90,9 @@ function getApplicationTypeChoices(possibleTargets) {
         else if (possibleTargets.Flow) {
             tags.push(types_js_1.Tags.flow);
         }
-        else {
-            tags.push(types_js_1.Tags.flow, types_js_1.Tags.typescript);
+        else if (possibleTargets.Node) {
+            tags.push(types_js_1.Tags.typescript);
+            tags.push(types_js_1.Tags.flow);
         }
         return tags;
     }
@@ -96,25 +106,37 @@ function getApplicationTypeChoices(possibleTargets) {
         {
             name: 'Application built with Angular',
             key: 'angular',
-            value: [types_js_1.Tags.angular, types_js_1.Tags.browser, types_js_1.Tags.typescript],
+            value: [types_js_1.Tags.angular, types_js_1.Tags.client],
             checked: possibleTargets.Angular,
         },
         {
             name: 'Application built with React',
             key: 'react',
-            value: withFlowOrTypescript([types_js_1.Tags.react, types_js_1.Tags.browser]),
+            value: withFlowOrTypescript([types_js_1.Tags.react, types_js_1.Tags.client]),
             checked: possibleTargets.React,
         },
         {
             name: 'Application built with Stencil',
             key: 'stencil',
-            value: [types_js_1.Tags.stencil, types_js_1.Tags.browser, types_js_1.Tags.typescript],
+            value: [types_js_1.Tags.stencil, types_js_1.Tags.typescript],
             checked: possibleTargets.Stencil,
         },
+        {
+            name: 'Application built with Vue',
+            key: 'vue',
+            value: [types_js_1.Tags.vue, types_js_1.Tags.client],
+            checked: possibleTargets.Vue,
+        },
+        {
+            name: 'Application using graphql-request',
+            key: 'graphqlRequest',
+            value: [types_js_1.Tags.graphqlRequest, types_js_1.Tags.client],
+            checked: possibleTargets.graphqlRequest,
+        },
         {
             name: 'Application built with other framework or vanilla JS',
             key: 'client',
-            value: [types_js_1.Tags.browser, types_js_1.Tags.typescript, types_js_1.Tags.flow],
+            value: [types_js_1.Tags.typescript, types_js_1.Tags.flow],
             checked: possibleTargets.Browser && !possibleTargets.Angular && !possibleTargets.React && !possibleTargets.Stencil,
         },
     ];
@@ -136,6 +158,9 @@ function normalizeTargets(targets) {
     return [].concat(...targets);
 }
 function getOutputDefaultValue(answers) {
+    if (answers.targets.includes(types_js_1.Tags.client)) {
+        return 'src/gql';
+    }
     if (answers.plugins.some(plugin => plugin.defaultExtension === '.tsx')) {
         return 'src/generated/graphql.tsx';
     }
@@ -145,3 +170,18 @@ function getOutputDefaultValue(answers) {
     return 'src/generated/graphql.js';
 }
 exports.getOutputDefaultValue = getOutputDefaultValue;
+function getDocumentsDefaultValue(answers) {
+    if (answers.targets.includes(types_js_1.Tags.vue)) {
+        return 'src/**/*.vue';
+    }
+    else if (answers.targets.includes(types_js_1.Tags.angular)) {
+        return 'src/**/*.ts';
+    }
+    else if (answers.targets.includes(types_js_1.Tags.client)) {
+        return 'src/**/*.tsx';
+    }
+    else {
+        return 'src/**/*.graphql';
+    }
+}
+exports.getDocumentsDefaultValue = getDocumentsDefaultValue;

package/cjs/init/targets.js

@@ -17,10 +17,11 @@ async function guessTargets() {
         [types_js_1.Tags.react]: isReact(dependencies),
         [types_js_1.Tags.stencil]: isStencil(dependencies),
         [types_js_1.Tags.vue]: isVue(dependencies),
-        [types_js_1.Tags.browser]: false,
+        [types_js_1.Tags.client]: false,
         [types_js_1.Tags.node]: false,
         [types_js_1.Tags.typescript]: isTypescript(dependencies),
         [types_js_1.Tags.flow]: isFlow(dependencies),
+        [types_js_1.Tags.graphqlRequest]: isGraphqlRequest(dependencies),
     };
 }
 exports.guessTargets = guessTargets;
@@ -42,3 +43,6 @@ function isTypescript(dependencies) {
 function isFlow(dependencies) {
     return dependencies.includes('flow');
 }
+function isGraphqlRequest(dependencies) {
+    return dependencies.includes('graphql-request');
+}

package/cjs/init/types.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tags = void 0;
 var Tags;
 (function (Tags) {
-    Tags["browser"] = "Browser";
+    Tags["client"] = "Browser";
     Tags["node"] = "Node";
     Tags["typescript"] = "TypeScript";
     Tags["flow"] = "Flow";
@@ -11,4 +11,5 @@ var Tags;
     Tags["stencil"] = "Stencil";
     Tags["react"] = "React";
     Tags["vue"] = "Vue";
+    Tags["graphqlRequest"] = "graphqlRequest";
 })(Tags = exports.Tags || (exports.Tags = {}));

package/esm/init/helpers.js

@@ -3,13 +3,44 @@ import { resolve, relative } from 'path';
 import { writeFileSync, readFileSync } from 'fs';
 import detectIndent from 'detect-indent';
 import { getLatestVersion } from '../utils/get-latest-version.js';
+import template from '@babel/template';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+function jsObjectToBabelObjectExpression(obj) {
+    const objExp = t.objectExpression([]);
+    Object.entries(obj).forEach(([key, val]) => {
+        if (Array.isArray(val)) {
+            objExp.properties.push(t.objectProperty(/^[a-zA-Z0-9]+$/.test(key) ? t.identifier(key) : t.stringLiteral(key), t.arrayExpression(val.map(v => (typeof v === 'object' ? jsObjectToBabelObjectExpression(v) : t.valueToNode(v))))));
+        }
+        else {
+            objExp.properties.push(t.objectProperty(/^[a-zA-Z0-9]+$/.test(key) ? t.identifier(key) : t.stringLiteral(key), typeof val === 'object' ? jsObjectToBabelObjectExpression(val) : t.valueToNode(val)));
+        }
+    });
+    return objExp;
+}
 // Parses config and writes it to a file
 export async function writeConfig(answers, config) {
     const YAML = await import('json-to-pretty-yaml').then(m => ('default' in m ? m.default : m));
-    const ext = answers.config.toLocaleLowerCase().endsWith('.json') ? 'json' : 'yml';
-    const content = ext === 'json' ? JSON.stringify(config) : YAML.stringify(config);
+    const ext = answers.config.toLocaleLowerCase().split('.')[1];
     const fullPath = resolve(process.cwd(), answers.config);
     const relativePath = relative(process.cwd(), answers.config);
+    let content;
+    if (ext === 'ts') {
+        const buildRequire = template.statement(`%%config%%`);
+        const ast = buildRequire({
+            config: jsObjectToBabelObjectExpression(config),
+        });
+        content = `
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = ${generate(ast).code.replace(/\(|\)/g, '')}
+
+export default config;
+`;
+    }
+    else {
+        content = ext === 'json' ? JSON.stringify(config) : YAML.stringify(config);
+    }
     writeFileSync(fullPath, content, {
         encoding: 'utf-8',
     });
@@ -35,7 +66,7 @@ export async function writePackage(answers, configLocation) {
     if (!pkg.devDependencies) {
         pkg.devDependencies = {};
     }
-    await Promise.all(answers.plugins.map(async (plugin) => {
+    await Promise.all((answers.plugins || []).map(async (plugin) => {
         pkg.devDependencies[plugin.package] = await getLatestVersion(plugin.package);
     }));
     if (answers.introspection) {

package/esm/init/index.js

@@ -18,10 +18,11 @@ export async function init() {
     const config = {
         overwrite: true,
         schema: answers.schema,
-        documents: answers.targets.includes(Tags.browser) ? answers.documents : null,
+        documents: answers.targets.includes(Tags.client) ? answers.documents : undefined,
         generates: {
             [answers.output]: {
-                plugins: answers.plugins.map(p => p.value),
+                preset: answers.targets.includes(Tags.client) ? 'client' : undefined,
+                plugins: answers.plugins ? answers.plugins.map(p => p.value) : [],
             },
         },
     };
@@ -37,7 +38,7 @@ export async function init() {
     // Emit status to the terminal
     log(`
     Config file generated at ${bold(relativePath)}
-    
+
       ${bold('$ npm install')}
 
     To install the plugins.

package/esm/init/plugins.js

@@ -15,7 +15,7 @@ export const plugins = [
         package: '@graphql-codegen/typescript-operations',
         value: 'typescript-operations',
         pathInRepo: 'typescript/operations',
-        available: tags => allOf(tags, Tags.browser, Tags.typescript),
+        available: tags => allOf(tags, Tags.client, Tags.typescript) || hasTag(Tags.stencil)(tags),
         shouldBeSelected: tags => oneOf(tags, Tags.angular, Tags.stencil) || allOf(tags, Tags.typescript, Tags.react),
         defaultExtension: '.ts',
     },
@@ -42,7 +42,7 @@ export const plugins = [
         package: '@graphql-codegen/flow-operations',
         value: 'flow-operations',
         pathInRepo: 'flow/operations',
-        available: tags => allOf(tags, Tags.browser, Tags.flow),
+        available: tags => allOf(tags, Tags.client, Tags.flow),
         shouldBeSelected: tags => noneOf(tags, Tags.typescript),
         defaultExtension: '.js',
     },
@@ -55,42 +55,6 @@ export const plugins = [
         shouldBeSelected: tags => noneOf(tags, Tags.typescript),
         defaultExtension: '.js',
     },
-    {
-        name: `TypeScript Apollo Angular ${italic('(typed GQL services)')}`,
-        package: '@graphql-codegen/typescript-apollo-angular',
-        value: 'typescript-apollo-angular',
-        pathInRepo: 'typescript/apollo-angular',
-        available: hasTag(Tags.angular),
-        shouldBeSelected: () => true,
-        defaultExtension: '.js',
-    },
-    {
-        name: `TypeScript Vue Apollo Composition API ${italic('(typed functions)')}`,
-        package: '@graphql-codegen/typescript-vue-apollo',
-        value: 'typescript-vue-apollo',
-        pathInRepo: 'typescript/vue-apollo',
-        available: tags => allOf(tags, Tags.vue, Tags.typescript),
-        shouldBeSelected: () => true,
-        defaultExtension: '.ts',
-    },
-    {
-        name: `TypeScript Vue Apollo Smart Operations ${italic('(typed functions)')}`,
-        package: '@graphql-codegen/typescript-vue-apollo-smart-ops',
-        value: 'typescript-vue-apollo-smart-ops',
-        pathInRepo: 'typescript/vue-apollo-smart-ops',
-        available: tags => allOf(tags, Tags.vue, Tags.typescript),
-        shouldBeSelected: () => true,
-        defaultExtension: '.ts',
-    },
-    {
-        name: `TypeScript React Apollo ${italic('(typed components and HOCs)')}`,
-        package: '@graphql-codegen/typescript-react-apollo',
-        value: 'typescript-react-apollo',
-        pathInRepo: 'typescript/react-apollo',
-        available: tags => allOf(tags, Tags.react, Tags.typescript),
-        shouldBeSelected: () => true,
-        defaultExtension: '.tsx',
-    },
     {
         name: `TypeScript Stencil Apollo ${italic('(typed components)')}`,
         package: '@graphql-codegen/typescript-stencil-apollo',
@@ -114,7 +78,7 @@ export const plugins = [
         package: '@graphql-codegen/typescript-graphql-files-modules',
         value: 'typescript-graphql-files-modules',
         pathInRepo: 'typescript/graphql-files-modules',
-        available: tags => allOf(tags, Tags.browser, Tags.typescript),
+        available: tags => allOf(tags, Tags.client, Tags.typescript) || hasTag(Tags.stencil)(tags),
         shouldBeSelected: () => false,
         defaultExtension: '.ts',
     },
@@ -123,7 +87,7 @@ export const plugins = [
         package: '@graphql-codegen/typescript-document-nodes',
         value: 'typescript-document-nodes',
         pathInRepo: 'typescript/document-nodes',
-        available: tags => allOf(tags, Tags.typescript),
+        available: tags => allOf(tags, Tags.typescript) || hasTag(Tags.stencil)(tags),
         shouldBeSelected: () => false,
         defaultExtension: '.ts',
     },
@@ -132,7 +96,7 @@ export const plugins = [
         package: '@graphql-codegen/fragment-matcher',
         value: 'fragment-matcher',
         pathInRepo: 'other/fragment-matcher',
-        available: hasTag(Tags.browser),
+        available: tags => hasTag(Tags.client)(tags) || hasTag(Tags.stencil)(tags),
         shouldBeSelected: () => false,
         defaultExtension: '.ts',
     },
@@ -141,7 +105,7 @@ export const plugins = [
         package: '@graphql-codegen/urql-introspection',
         value: 'urql-introspection',
         pathInRepo: 'other/urql-introspection',
-        available: hasTag(Tags.browser),
+        available: tags => hasTag(Tags.client)(tags) || hasTag(Tags.stencil)(tags),
         shouldBeSelected: () => false,
         defaultExtension: '.ts',
     },

package/esm/init/questions.js

@@ -4,11 +4,12 @@ import { plugins } from './plugins.js';
 export function getQuestions(possibleTargets) {
     return [
         {
-            type: 'checkbox',
+            type: 'list',
             name: 'targets',
             message: `What type of application are you building?`,
             choices: getApplicationTypeChoices(possibleTargets),
             validate: ((targets) => targets.length > 0),
+            default: getApplicationTypeChoices(possibleTargets).findIndex(c => c.checked),
         },
         {
             type: 'input',
@@ -26,14 +27,20 @@ export function getQuestions(possibleTargets) {
                 // flatten targets
                 // I can't find an API in Inquirer that would do that
                 answers.targets = normalizeTargets(answers.targets);
-                return answers.targets.includes(Tags.browser);
+                return answers.targets.includes(Tags.client) || answers.targets.includes(Tags.stencil);
             },
-            default: 'src/**/*.graphql',
+            default: getDocumentsDefaultValue,
             validate: (str) => str.length > 0,
         },
         {
             type: 'checkbox',
             name: 'plugins',
+            when: answers => {
+                // flatten targets
+                // I can't find an API in Inquirer that would do that
+                answers.targets = normalizeTargets(answers.targets);
+                return !answers.targets.includes(Tags.client);
+            },
             message: 'Pick plugins:',
             choices: getPluginChoices,
             validate: ((plugins) => plugins.length > 0),
@@ -48,22 +55,24 @@ export function getQuestions(possibleTargets) {
         {
             type: 'confirm',
             name: 'introspection',
+            default: false,
             message: 'Do you want to generate an introspection file?',
         },
         {
             type: 'input',
             name: 'config',
             message: 'How to name the config file?',
-            default: 'codegen.yml',
+            default: answers => (answers.targets.includes(Tags.client) ? 'codegen.ts' : 'codegen.yml'),
             validate: (str) => {
                 const isNotEmpty = str.length > 0;
-                const hasCorrectExtension = ['json', 'yml', 'yaml'].some(ext => str.toLocaleLowerCase().endsWith(`.${ext}`));
+                const hasCorrectExtension = ['json', 'yml', 'yaml', 'js', 'ts'].some(ext => str.toLocaleLowerCase().endsWith(`.${ext}`));
                 return isNotEmpty && hasCorrectExtension;
             },
         },
         {
             type: 'input',
             name: 'script',
+            default: 'codegen',
             message: 'What script in package.json should run the codegen?',
             validate: (str) => str.length > 0,
         },
@@ -77,8 +86,9 @@ export function getApplicationTypeChoices(possibleTargets) {
         else if (possibleTargets.Flow) {
             tags.push(Tags.flow);
         }
-        else {
-            tags.push(Tags.flow, Tags.typescript);
+        else if (possibleTargets.Node) {
+            tags.push(Tags.typescript);
+            tags.push(Tags.flow);
         }
         return tags;
     }
@@ -92,25 +102,37 @@ export function getApplicationTypeChoices(possibleTargets) {
         {
             name: 'Application built with Angular',
             key: 'angular',
-            value: [Tags.angular, Tags.browser, Tags.typescript],
+            value: [Tags.angular, Tags.client],
             checked: possibleTargets.Angular,
         },
         {
             name: 'Application built with React',
             key: 'react',
-            value: withFlowOrTypescript([Tags.react, Tags.browser]),
+            value: withFlowOrTypescript([Tags.react, Tags.client]),
             checked: possibleTargets.React,
         },
         {
             name: 'Application built with Stencil',
             key: 'stencil',
-            value: [Tags.stencil, Tags.browser, Tags.typescript],
+            value: [Tags.stencil, Tags.typescript],
             checked: possibleTargets.Stencil,
         },
+        {
+            name: 'Application built with Vue',
+            key: 'vue',
+            value: [Tags.vue, Tags.client],
+            checked: possibleTargets.Vue,
+        },
+        {
+            name: 'Application using graphql-request',
+            key: 'graphqlRequest',
+            value: [Tags.graphqlRequest, Tags.client],
+            checked: possibleTargets.graphqlRequest,
+        },
         {
             name: 'Application built with other framework or vanilla JS',
             key: 'client',
-            value: [Tags.browser, Tags.typescript, Tags.flow],
+            value: [Tags.typescript, Tags.flow],
             checked: possibleTargets.Browser && !possibleTargets.Angular && !possibleTargets.React && !possibleTargets.Stencil,
         },
     ];
@@ -130,6 +152,9 @@ function normalizeTargets(targets) {
     return [].concat(...targets);
 }
 export function getOutputDefaultValue(answers) {
+    if (answers.targets.includes(Tags.client)) {
+        return 'src/gql';
+    }
     if (answers.plugins.some(plugin => plugin.defaultExtension === '.tsx')) {
         return 'src/generated/graphql.tsx';
     }
@@ -138,3 +163,17 @@ export function getOutputDefaultValue(answers) {
     }
     return 'src/generated/graphql.js';
 }
+export function getDocumentsDefaultValue(answers) {
+    if (answers.targets.includes(Tags.vue)) {
+        return 'src/**/*.vue';
+    }
+    else if (answers.targets.includes(Tags.angular)) {
+        return 'src/**/*.ts';
+    }
+    else if (answers.targets.includes(Tags.client)) {
+        return 'src/**/*.tsx';
+    }
+    else {
+        return 'src/**/*.graphql';
+    }
+}

package/esm/init/targets.js

@@ -14,10 +14,11 @@ export async function guessTargets() {
         [Tags.react]: isReact(dependencies),
         [Tags.stencil]: isStencil(dependencies),
         [Tags.vue]: isVue(dependencies),
-        [Tags.browser]: false,
+        [Tags.client]: false,
         [Tags.node]: false,
         [Tags.typescript]: isTypescript(dependencies),
         [Tags.flow]: isFlow(dependencies),
+        [Tags.graphqlRequest]: isGraphqlRequest(dependencies),
     };
 }
 function isAngular(dependencies) {
@@ -38,3 +39,6 @@ function isTypescript(dependencies) {
 function isFlow(dependencies) {
     return dependencies.includes('flow');
 }
+function isGraphqlRequest(dependencies) {
+    return dependencies.includes('graphql-request');
+}

package/esm/init/types.js

@@ -1,6 +1,6 @@
 export var Tags;
 (function (Tags) {
-    Tags["browser"] = "Browser";
+    Tags["client"] = "Browser";
     Tags["node"] = "Node";
     Tags["typescript"] = "TypeScript";
     Tags["flow"] = "Flow";
@@ -8,4 +8,5 @@ export var Tags;
     Tags["stencil"] = "Stencil";
     Tags["react"] = "React";
     Tags["vue"] = "Vue";
+    Tags["graphqlRequest"] = "graphqlRequest";
 })(Tags || (Tags = {}));

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@graphql-codegen/cli",
-  "version": "2.12.2",
+  "version": "2.12.3-alpha-20220927092513-40482d1aa",
   "peerDependencies": {
     "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
+    "@babel/generator": "^7.18.13",
+    "@babel/template": "^7.18.10",
+    "@babel/types": "^7.18.13",
+    "@graphql-codegen/client-preset": "1.0.1-alpha-20220927092513-40482d1aa",
     "@graphql-codegen/core": "2.6.2",
-    "@graphql-codegen/plugin-helpers": "^2.7.1",
+    "@graphql-codegen/plugin-helpers": "2.8.0-alpha-20220927092513-40482d1aa",
     "@graphql-tools/apollo-engine-loader": "^7.3.6",
     "@graphql-tools/code-file-loader": "^7.3.1",
     "@graphql-tools/git-loader": "^7.2.1",
@@ -17,12 +21,12 @@
     "@graphql-tools/prisma-loader": "^7.2.7",
     "@graphql-tools/url-loader": "^7.13.2",
     "@graphql-tools/utils": "^8.9.0",
-    "@whatwg-node/fetch": "^0.4.0",
+    "@whatwg-node/fetch": "^0.3.0",
     "ansi-escapes": "^4.3.1",
     "chalk": "^4.1.0",
     "chokidar": "^3.5.2",
     "cosmiconfig": "^7.0.0",
-    "cosmiconfig-typescript-loader": "^4.0.0",
+    "cosmiconfig-typescript-loader": "4.0.0",
     "debounce": "^1.2.0",
     "detect-indent": "^6.0.0",
     "graphql-config": "^4.3.5",

package/typings/init/questions.d.cts

@@ -8,4 +8,5 @@ export declare function getApplicationTypeChoices(possibleTargets: Record<Tags,
     checked: boolean;
 }[];
 export declare function getPluginChoices(answers: Answers): inquirer.DistinctChoice<inquirer.AllChoiceMap<inquirer.Answers>, inquirer.AllChoiceMap<inquirer.AllChoiceMap<inquirer.Answers>>>[];
-export declare function getOutputDefaultValue(answers: Answers): "src/generated/graphql.tsx" | "src/generated/graphql.ts" | "src/generated/graphql.cjs";
+export declare function getOutputDefaultValue(answers: Answers): "src/gql" | "src/generated/graphql.tsx" | "src/generated/graphql.ts" | "src/generated/graphql.cjs";
+export declare function getDocumentsDefaultValue(answers: Answers): "src/**/*.vue" | "src/**/*.ts" | "src/**/*.tsx" | "src/**/*.graphql";

package/typings/init/questions.d.ts

@@ -8,4 +8,5 @@ export declare function getApplicationTypeChoices(possibleTargets: Record<Tags,
     checked: boolean;
 }[];
 export declare function getPluginChoices(answers: Answers): inquirer.DistinctChoice<inquirer.AllChoiceMap<inquirer.Answers>, inquirer.AllChoiceMap<inquirer.AllChoiceMap<inquirer.Answers>>>[];
-export declare function getOutputDefaultValue(answers: Answers): "src/generated/graphql.tsx" | "src/generated/graphql.ts" | "src/generated/graphql.js";
+export declare function getOutputDefaultValue(answers: Answers): "src/gql" | "src/generated/graphql.tsx" | "src/generated/graphql.ts" | "src/generated/graphql.js";
+export declare function getDocumentsDefaultValue(answers: Answers): "src/**/*.vue" | "src/**/*.ts" | "src/**/*.tsx" | "src/**/*.graphql";

package/typings/init/types.d.cts

@@ -10,7 +10,7 @@ export interface PluginOption {
 export interface Answers {
     targets: Tags[];
     config: string;
-    plugins: PluginOption[];
+    plugins?: PluginOption[];
     schema: string;
     documents?: string;
     output: string;
@@ -18,12 +18,13 @@ export interface Answers {
     introspection: boolean;
 }
 export declare enum Tags {
-    browser = "Browser",
+    client = "Browser",
     node = "Node",
     typescript = "TypeScript",
     flow = "Flow",
     angular = "Angular",
     stencil = "Stencil",
     react = "React",
-    vue = "Vue"
+    vue = "Vue",
+    graphqlRequest = "graphqlRequest"
 }

package/typings/init/types.d.ts

@@ -10,7 +10,7 @@ export interface PluginOption {
 export interface Answers {
     targets: Tags[];
     config: string;
-    plugins: PluginOption[];
+    plugins?: PluginOption[];
     schema: string;
     documents?: string;
     output: string;
@@ -18,12 +18,13 @@ export interface Answers {
     introspection: boolean;
 }
 export declare enum Tags {
-    browser = "Browser",
+    client = "Browser",
     node = "Node",
     typescript = "TypeScript",
     flow = "Flow",
     angular = "Angular",
     stencil = "Stencil",
     react = "React",
-    vue = "Vue"
+    vue = "Vue",
+    graphqlRequest = "graphqlRequest"
 }