feat(nuxt): gqltada module (#212)

* feat(nuxt): gql.data module

* refactor: graphqlYoga export schame name

* chore: update function to handle edge cases

* chore: fix lint

packages/nuxt/package.json

@@ -75,6 +75,7 @@
     "yaml": "^2.4.1"
   },
   "devDependencies": {
+    "@0no-co/graphqlsp": "^1.4.2",
     "@antfu/eslint-config": "^2.8.0",
     "@aws-sdk/client-ses": "^3.525.0",
     "@capacitor/action-sheet": "^6.0.0-rc.0",
@@ -121,6 +122,7 @@
     "esbuild-plugin-file-path-extensions": "^2.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-tailwindcss": "^3.14.3",
+    "gql.tada": "^1.3.1",
     "graphql": "^16.8.1",
     "h3": "^1.11.1",
     "happy-dom": "^13.6.2",

packages/nuxt/playgrounds/drizzle/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "my-module-playground",
+  "name": "playground-drizzle",
   "type": "module",
   "private": true,
   "scripts": {
@@ -9,28 +9,18 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "@aws-sdk/client-ses": "^3.525.0",
     "@faker-js/faker": "^8.4.1",
     "@json2csv/node": "^7.0.6",
     "@lucia-auth/adapter-drizzle": "1.0.2",
     "@lucia-auth/adapter-postgresql": "3.1.0",
     "@pergel/module-box": "workspace:^",
-    "@pergel/module-graphql": "workspace:*",
-    "@pergel/module-s3": "workspace:*",
-    "bullmq": "^5.4.2",
-    "dotenv": "^16.4.5",
     "drizzle-kit": "^0.20.14",
     "drizzle-orm": "^0.29.5",
-    "ioredis": "^5.3.2",
     "lucia": "3.0.1",
-    "node-cron": "^3.0.3",
-    "oslo": "^1.1.3",
-    "p-timeout": "^6.1.2",
     "postgres": "^3.4.3"
   },
   "devDependencies": {
     "@pergel/nuxt": "link:..",
-    "@types/node-cron": "^3.0.11",
     "nuxt": "latest",
     "pergel": "^0.12.0",
     "pg": "^8.11.3"

packages/nuxt/playgrounds/gql.tada/.config/pergel.ts

@@ -0,0 +1,5 @@
+import { definePergel } from 'pergel'
+
+export default definePergel({
+
+})

packages/nuxt/playgrounds/gql.tada/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

packages/nuxt/playgrounds/gql.tada/app.vue

@@ -0,0 +1,3 @@
+<template>
+  asdas
+</template>

packages/nuxt/playgrounds/gql.tada/nuxt.config.ts

@@ -0,0 +1,57 @@
+import { resolve } from 'node:path'
+import { defineNuxtModule } from '@nuxt/kit'
+import { startSubprocess } from '@nuxt/devtools-kit'
+
+import { DEVTOOLS_UI_PORT } from '../../src/constants'
+
+export default defineNuxtConfig({
+  devtools: {
+    enabled: true,
+  },
+  modules: [
+    /**
+     * My module
+     */
+    '../../src/module',
+    /**
+     * Start a sub Nuxt Server for developing the client
+     *
+     * The terminal output can be found in the Terminals tab of the devtools.
+     */
+    defineNuxtModule({
+      setup(_, nuxt) {
+        if (!nuxt.options.dev)
+          return
+
+        const subprocess = startSubprocess(
+          {
+            command: 'npx',
+            args: ['nuxi', 'dev', '--port', DEVTOOLS_UI_PORT.toString()],
+            cwd: resolve(__dirname, '../client'),
+          },
+          {
+            id: 'nuxt-pergel:client',
+            name: 'Pergel Devtools RPC Client',
+          },
+        )
+
+        subprocess.getProcess().stdout?.on('data', (data) => {
+          // eslint-disable-next-line no-console
+          console.log(` sub: ${data.toString()}`)
+        })
+
+        process.on('exit', () => {
+          subprocess.terminate()
+        })
+      },
+    }),
+  ],
+  pergel: {
+    debug: true,
+    projects: {
+      changeName: {
+        gqltada: true,
+      },
+    },
+  },
+})

packages/nuxt/playgrounds/gql.tada/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "playground-gqltada",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "prepare": "nuxi prepare",
+    "generate": "nuxi generate"
+  },
+  "dependencies": {
+    "gql.tada": "^1.3.1"
+  },
+  "devDependencies": {
+    "@0no-co/graphqlsp": "^1.4.2",
+    "@pergel/nuxt": "link:..",
+    "nuxt": "latest",
+    "pergel": "^0.12.0"
+  }
+}

packages/nuxt/playgrounds/gql.tada/server/changeNameSchema.graphql

@@ -0,0 +1,23 @@
+directive @auth on FIELD_DEFINITION
+
+directive @skipAuth on FIELD_DEFINITION
+
+
+type Query {
+  me: User
+  user(id: ID!): User
+  users: [User]
+}
+
+type Mutation {
+  changeName(name: String!): User
+}
+
+type User {
+  id: ID!
+  name: String!
+  email: String!
+  password: String!
+  createdAt: String!
+  updatedAt: String!
+}

packages/nuxt/playgrounds/gql.tada/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

packages/nuxt/src/runtime/core/setupPergel.ts

@@ -141,6 +141,7 @@ declare module 'h3' {
       'vitest',
       'eslint',
       'renovate',
+      'gqltada',
     ],
     projectNames,
     nitroImports: {},

packages/nuxt/src/runtime/core/types/nuxtModule.ts

@@ -12,6 +12,7 @@ import type { EslintConfig, ResolvedEslintConfig } from '../../modules/eslint/ty
 import type { RenovateConfig, ResolvedRenovateConfig } from '../../modules/renovate/types'
 import type { ResolvedUrqlConfig, UrqlModuleOptions } from '../../modules/urql/types'
 import type { CapacitorOptions, ResolvedCapacitorOptions } from '../../modules/capacitor/types'
+import type { GQLTadaOptions, ResolvedGQLTadaOptions } from '../../modules/gqltada/types'
 import type { ResolvedPergelModuleOptions, UserModuleOptions } from './module'
 
 // @MODULE
@@ -31,6 +32,7 @@ export interface PergelNuxtModules {
   vitest?: true
   eslint?: true | EslintConfig
   renovate?: true | RenovateConfig
+  gqltada?: true | GQLTadaOptions
 }
 
 export interface ResolvedPergelNuxtModuleConfig<T> {
@@ -49,6 +51,7 @@ export interface ResolvedPergelNuxtModuleConfig<T> {
   eslint?: true | ResolvedEslintConfig
   renovate?: true | ResolvedRenovateConfig
   capacitor?: true | ResolvedCapacitorOptions
+  gqltada?: true | ResolvedGQLTadaOptions
 }
 
 export type PergelModuleNames = keyof PergelNuxtModules

packages/nuxt/src/runtime/modules/gqltada/index.ts

@@ -0,0 +1,74 @@
+import { existsSync } from 'node:fs'
+import { basename, join, relative, resolve } from 'node:path'
+import { camelCase } from 'scule'
+import { globbySync } from 'globby'
+import { definePergelModule } from '../../core/definePergel'
+import { generateProjectReadme } from '../../core/utils/generateYaml'
+import { writeFilePergel } from '../../core/utils/writeFilePergel'
+import type { GQLTadaOptions, ResolvedGQLTadaOptions } from './types'
+
+export default definePergelModule<GQLTadaOptions, ResolvedGQLTadaOptions>({
+  meta: {
+    name: 'gqltada',
+    version: '0.0.1',
+    dependencies(options, nuxt) {
+      const deps = nuxt._pergel.pergelPackageJson
+      return {
+        'gql.tada': deps['gql.tada'],
+      }
+    },
+    devDependencies(_options, nuxt) {
+      const deps = nuxt._pergel.pergelPackageJson
+      return {
+        '@0no-co/graphqlsp': deps['@0no-co/graphqlsp'],
+      }
+    },
+  },
+  defaults: {
+  },
+  async setup({ nuxt, options }) {
+    const { projectName, moduleName } = options
+
+    nuxt.options.typescript.tsConfig ??= {}
+    nuxt.options.typescript.tsConfig.compilerOptions ??= []
+    nuxt.options.typescript.tsConfig.compilerOptions.plugins ??= []
+    nuxt.options.typescript.tsConfig.compilerOptions.plugins.push({
+      name: '@0no-co/graphqlsp',
+      schema: relative(nuxt.options.buildDir, join(nuxt.options.serverDir, `${camelCase(`${options.projectName}-schema`)}.graphql`)),
+      tadaOutputLocation: relative(nuxt.options.buildDir, join(options.rootModuleDir, 'graphql-env.d.ts')),
+    })
+
+    if (!existsSync(resolve(options.rootModuleDir, 'index.ts'))) {
+      const files = globbySync((join(nuxt._pergel.pergelModuleRoot, 'templates', options.moduleName, 'root', '**/*')), {
+        onlyFiles: true,
+      })
+
+      for (const file of files) {
+        const readFile = await nuxt._pergel.jitiDyanmicImport(file)
+        if (readFile) {
+          const fileData = readFile({
+            projectName: options.projectName,
+            nuxt,
+          })
+          const fileName = basename(file)
+
+          writeFilePergel(resolve(options.rootModuleDir, fileName), fileData)
+        }
+      }
+    }
+
+    generateProjectReadme({
+      nuxt,
+      projectName,
+      moduleName,
+      data() {
+        return {
+          vscode: {
+            'typescript.tsdk': 'node_modules/typescript/lib',
+            'typescript.enablePromptUseWorkspaceTsdk': true,
+          },
+        }
+      },
+    })
+  },
+})

packages/nuxt/src/runtime/modules/gqltada/types.ts

@@ -0,0 +1,5 @@
+export interface GQLTadaOptions {
+}
+
+export interface ResolvedGQLTadaOptions {
+}

packages/nuxt/src/runtime/modules/graphqlYoga/utils/generateCodegen.ts

@@ -1,6 +1,7 @@
 import { join, resolve } from 'node:path'
 import { existsSync } from 'node:fs'
 import consola from 'consola'
+import { camelCase } from 'scule'
 import { buildTime } from '../utils'
 import { useNitroImports, useNuxtImports } from '../../../core/utils/useImports'
 import type { ResolvedGraphQLYogaConfig } from '../types'
@@ -14,11 +15,13 @@ export async function loadGraphQLFiles(
     rootDir,
     schemaDir,
     documentDir,
+    options,
   }:
   {
     rootDir: string
     schemaDir: string
     documentDir: string
+    options: ResolvedGraphQLYogaConfig
   },
 ) {
   const { loadSchemaFiles, loadDocumentsFiles, writeSchema } = useCodegen()
@@ -32,7 +35,7 @@ export async function loadGraphQLFiles(
     cwd: rootDir,
   })
 
-  const printSchema = await writeSchema(schema!, resolve(rootDir, 'schema.graphql'))
+  const printSchema = await writeSchema(schema!, resolve(rootDir, `${camelCase(`${options.projectName}-schema`)}.graphql`))
 
   return {
     schema,
@@ -64,6 +67,7 @@ export function useGenerateCodegen({
         rootDir: nuxt._pergel.serverDir,
         documentDir: options.documentDir,
         schemaDir: options.schemaDir,
+        options,
       })
       return `// THIS FILE IS GENERATED, DO NOT EDIT!
 /* eslint-disable eslint-comments/no-unlimited-disable */
@@ -101,6 +105,7 @@ export const schema = \`${printSchema}\``
         rootDir: nuxt._pergel.serverDir,
         documentDir: options.documentDir,
         schemaDir: options.schemaDir,
+        options,
       })
 
       const { server } = useCodegen()
@@ -148,6 +153,7 @@ export const schema = \`${printSchema}\``
         rootDir: nuxt._pergel.serverDir,
         documentDir: options.documentDir,
         schemaDir: options.schemaDir,
+        options,
       })
       const { server } = useCodegen()
 
@@ -180,6 +186,7 @@ export const schema = \`${printSchema}\``
         rootDir: nuxt._pergel.serverDir,
         documentDir: options.documentDir,
         schemaDir: options.schemaDir,
+        options,
       })
       const { client } = useCodegen()
 

packages/nuxt/src/templates/gqltada/root/index.ts

@@ -0,0 +1,31 @@
+import { camelCase } from 'scule'
+
+export default function (data: {
+  projectName: string
+}) {
+  const graphqlService = camelCase(`${data.projectName}-Graphql`)
+
+  return /* TS */ `import { initGraphQLTada } from 'gql.tada'
+import type {
+  introspection,
+} from './graphql-env.d.ts'
+
+export const ${graphqlService} = initGraphQLTada<{
+  introspection: introspection
+  scalars: {
+    DateTime: string
+    JSON: any
+    Cursor: string
+    ID: string
+  }
+}>()
+
+export type {
+  FragmentOf,
+  ResultOf,
+  VariablesOf,
+} from 'gql.tada'
+
+export { readFragment } from 'gql.tada'
+`
+}