nuxt-graphql-middleware 5.0.0-alpha.4 → 5.0.0-alpha.5

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { loadSchema } from '@graphql-tools/load';
 import { fileURLToPath } from 'url';
 import { relative } from 'pathe';
 import { defu } from 'defu';
-import { useLogger, resolveFiles, defineNuxtModule, resolveAlias, createResolver, addImports, addServerImports, addTemplate, addServerHandler, addPlugin } from '@nuxt/kit';
+import { useLogger, resolveFiles, defineNuxtModule, resolveAlias, createResolver, addImports, addServerImports, addTypeTemplate, addTemplate, addServerHandler, addPlugin } from '@nuxt/kit';
 import { onDevToolsInitialized, extendServerRpc } from '@nuxt/devtools-kit';
 import { existsSync } from 'fs';
 import { GraphqlMiddlewareTemplate } from '../dist/runtime/settings/index.js';
@@ -11,14 +11,13 @@ import { existsSync as existsSync$1, promises } from 'node:fs';
 import { generate } from '@graphql-codegen/cli';
 import * as PluginSchemaAst from '@graphql-codegen/schema-ast';
 import { basename } from 'node:path';
-import { printSourceLocation, parse, Source } from 'graphql';
+import { printSourceLocation, parse, OperationTypeNode, Source } from 'graphql';
 import { Generator, FieldNotFoundError, TypeNotFoundError, FragmentNotFoundError } from 'graphql-typescript-deluxe';
-import { pascalCase } from 'change-case-all';
 import colors from 'picocolors';
 import { validateGraphQlDocuments } from '@graphql-tools/utils';
 
 const name = "nuxt-graphql-middleware";
-const version = "5.0.0-alpha.4";
+const version = "5.0.0-alpha.5";
 
 const DEVTOOLS_UI_ROUTE = "/__nuxt-graphql-middleware";
 const DEVTOOLS_UI_LOCAL_PORT = 3300;
@@ -98,7 +97,8 @@ const defaultOptions = {
   debug: false,
   includeComposables: true,
   documents: [],
-  devtools: true
+  devtools: true,
+  errorOverlay: true
 };
 function validateOptions(options) {
   if (!options.graphqlEndpoint) {
@@ -136,111 +136,19 @@ const fileExists = (path, extensions = ["js", "ts", "mjs"]) => {
   return extension ? `${path}.${extension}` : null;
 };
 
-function groupOperationsByType(ops) {
-  const result = {
-    query: {},
-    mutation: {},
-    subscription: {}
-  };
-  for (const op of ops) {
-    result[op.operationType][op.graphqlName] = {
-      hasVariables: op.hasVariables,
-      variablesOptional: !op.needsVariables
-    };
-  }
-  return result;
-}
-function buildOperationTypeCode(operationMetadata, typeName, serverApiPrefix) {
-  const imports = [];
-  const resultTypes = [];
-  let code = "";
-  let nitroCode = "";
-  const operationNames = Object.keys(operationMetadata);
-  if (operationNames.length === 0) {
-    return { code, nitroCode, imports, resultTypes };
-  }
-  const lines = [];
-  const nitroLines = [];
-  for (const name of operationNames) {
-    const nameResult = pascalCase(`${name}${typeName}`);
-    const nameVariables = pascalCase(`${name}${typeName}Variables`);
-    resultTypes.push(nameResult);
-    imports.push(nameResult);
-    const { hasVariables, variablesOptional } = operationMetadata[name];
-    if (hasVariables) {
-      imports.push(nameVariables);
-    }
-    const variablesType = hasVariables ? nameVariables : "null";
-    lines.push(
-      `    ${name}: [${variablesType}, ${variablesOptional ? "true" : "false"}, ${nameResult}]`
-    );
-    nitroLines.push(`
-    '${serverApiPrefix}/${typeName.toLowerCase()}/${name}': {
-      'default': GraphqlResponse<${nameResult}>
-    }`);
-  }
-  code += `  export type GraphqlMiddleware${typeName} = {
-${lines.join(",\n")}
-  }
-`;
-  nitroCode += nitroLines.join("\n");
-  return { code, nitroCode, imports, resultTypes };
-}
-function generateContextTemplate(collectedOperations, serverApiPrefix) {
-  const grouped = groupOperationsByType(collectedOperations);
-  const queryResult = buildOperationTypeCode(
-    grouped.query,
-    "Query",
-    serverApiPrefix
-  );
-  const mutationResult = buildOperationTypeCode(
-    grouped.mutation,
-    "Mutation",
-    serverApiPrefix
-  );
-  const subscriptionResult = buildOperationTypeCode(
-    grouped.subscription,
-    "Subscription",
-    serverApiPrefix
-  );
-  const allImports = [
-    ...queryResult.imports,
-    ...mutationResult.imports,
-    ...subscriptionResult.imports
-  ];
-  const allResultTypes = [
-    ...queryResult.resultTypes,
-    ...mutationResult.resultTypes,
-    ...subscriptionResult.resultTypes
-  ];
-  const combinedCode = [
-    queryResult.code,
-    mutationResult.code,
-    subscriptionResult.code
-  ].filter(Boolean).join("\n");
-  const combinedNitroCode = [
-    queryResult.nitroCode,
-    mutationResult.nitroCode,
-    subscriptionResult.nitroCode
-  ].join("\n");
-  const typeImports = allImports.length ? `import type {
-  ${allImports.join(",\n  ")}
-} from './../graphql-operations'` : "";
-  return `
-import type { GraphqlResponse } from '#graphql-middleware-server-options-build'
-${typeImports}
+function generateResponseTypeTemplate(operations, context) {
+  const allTypes = operations.map((v) => v.typeName).sort();
+  return `import type {
+  ${allTypes.join(",\n  ")}
+} from './../graphql-operations'
+import type { GraphqlResponseAdditions } from './server-options'
+import type { GraphqlServerResponse } from '${context.runtimeTypesPath}'
 
-declare module '#nuxt-graphql-middleware/generated-types' {
-  export type GraphqlMiddlewareResponseUnion = ${allResultTypes.join(" | ") || "never"}
-${combinedCode}
-}
+export type GraphqlMiddlewareResponseUnion =
+  | ${allTypes.join("\n  | ") || "never"}
 
-declare module 'nitropack' {
-  interface InternalApi {
-${combinedNitroCode}
-  }
-}
-`;
+export type GraphqlResponse<T> = GraphqlServerResponse<T> & GraphqlResponseAdditions
+export type GraphqlResponseTyped = GraphqlResponse<GraphqlMiddlewareResponseUnion>`;
 }
 
 const SYMBOL_CROSS = "x";
@@ -330,6 +238,45 @@ class CollectedFile {
   }
 }
 
+function generateNitroTypes(operations, serverApiPrefix) {
+  const endpoints = [];
+  const imports = [];
+  for (const operation of operations) {
+    imports.push(operation.typeName);
+    const method = operation.operationType === OperationTypeNode.QUERY ? "get" : "post";
+    endpoints.push(
+      `    '${serverApiPrefix}/${operation.operationType}/${operation.graphqlName}': {
+      '${method}': GraphqlResponse<${operation.typeName}>
+    }`
+    );
+  }
+  return `import type { GraphqlResponse } from './response'
+import type {
+  ${imports.sort().join(",\n  ")}
+} from './../graphql-operations'
+
+declare module 'nitropack/types' {
+  interface InternalApi {
+${endpoints.sort().join("\n")}
+  }
+}`;
+}
+
+function generateSourcesTemplate(operations, srcDir) {
+  const lines = [];
+  for (const operation of operations) {
+    const filePath = relative(srcDir, operation.filePath);
+    lines.push(
+      `${operation.operationType}_${operation.graphqlName}: '${filePath}',`
+    );
+  }
+  return `
+export const operationSources = {
+  ${lines.join("\n  ")}
+}
+`;
+}
+
 class Collector {
   constructor(schema, context, nuxtConfigDocuments = [], generatorOptions = {}) {
     this.schema = schema;
@@ -374,10 +321,22 @@ class Collector {
    * The generated oeprations file.
    */
   outputOperations = "";
+  /**
+   * The generated oepration types file.
+   */
+  outputOperationTypes = "";
   /**
    * The generated context template file.
    */
-  outputContext = "";
+  outputResponseTypes = "";
+  /**
+   * The generated nitro template file.
+   */
+  outputNitroTypes = "";
+  /**
+   * The generated nitro template file.
+   */
+  outputSources = "";
   filePathToBuildRelative(filePath) {
     return "./" + relative(this.context.buildDir, filePath);
   }
@@ -410,13 +369,27 @@ class Collector {
     const output = this.generator.build();
     const operations = output.getCollectedOperations();
     const generatedCode = output.getGeneratedCode();
-    this.outputOperations = output.getOperationsFile().getSource();
+    this.outputOperations = output.getOperationsFile({
+      exportName: "documents",
+      minify: !this.context.isDev
+    }).getSource();
+    this.outputOperationTypes = output.getOperationTypesFile({
+      importFrom: "./../graphql-operations"
+    }).getSource();
     this.outputEnums = output.buildFile(["enum"]).getSource();
     this.outputTypes = this.buildOutputTypes(output.getTypes());
-    this.outputContext = generateContextTemplate(
+    this.outputResponseTypes = generateResponseTypeTemplate(
+      operations,
+      this.context
+    );
+    this.outputNitroTypes = generateNitroTypes(
       operations,
       this.context.serverApiPrefix
     );
+    this.outputSources = generateSourcesTemplate(
+      operations,
+      this.context.rootDir
+    );
     const fragmentMap = /* @__PURE__ */ new Map();
     const operationSourceMap = /* @__PURE__ */ new Map();
     for (const code of generatedCode) {
@@ -636,8 +609,8 @@ class Collector {
   /**
    * Get the context template contents.
    */
-  getTemplateContext() {
-    return this.outputContext;
+  getTemplateResponseTypes() {
+    return this.outputResponseTypes;
   }
   /**
    * Get the operations template contents.
@@ -645,6 +618,37 @@ class Collector {
   getTemplateOperations() {
     return this.outputOperations;
   }
+  /**
+   * Get the operation types template contents.
+   */
+  getTemplateOperationTypes() {
+    return this.outputOperationTypes;
+  }
+  /**
+   * Get the nitro types template contents.
+   */
+  getTemplateNitroTypes() {
+    return this.outputNitroTypes;
+  }
+  /**
+   * Get the nitro types template contents.
+   */
+  getTemplateSources() {
+    return this.outputSources;
+  }
+}
+
+function generateDocumentTypesTemplate() {
+  return `
+import type { Query, Mutation } from './operations'
+
+declare module '#nuxt-graphql-middleware/documents' {
+  export type Documents = {
+    query: Record<keyof Query, string>
+    mutation: Record<keyof Mutation, string>
+  }
+  export const documents: Documents
+}`;
 }
 
 function useViteWebSocket(nuxt) {
@@ -661,15 +665,19 @@ const module = defineNuxtModule({
     configKey: "graphqlMiddleware",
     version,
     compatibility: {
-      nuxt: ">=3.13.0"
+      nuxt: ">=3.15.0"
     }
   },
   defaults: defaultOptions,
   async setup(passedOptions, nuxt) {
     const options = defu({}, passedOptions, defaultOptions);
-    function addAlias(name2, arg) {
-      const aliasPath = typeof arg === "string" ? arg : arg.dst;
-      nuxt.options.alias[name2] = aliasPath;
+    function addAlias(name2, path) {
+      nuxt.options.alias[name2] = path;
+    }
+    function inlineNitroExternals(path) {
+      nuxt.options.nitro.externals = nuxt.options.nitro.externals || {};
+      nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || [];
+      nuxt.options.nitro.externals.inline.push(path);
     }
     const isModuleBuild = process.env.MODULE_BUILD === "true" && nuxt.options._prepare;
     if (isModuleBuild) {
@@ -709,17 +717,30 @@ const module = defineNuxtModule({
     });
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     nuxt.options.build.transpile.push(runtimeDir);
+    const nuxtGraphqlMiddlewareBuildDir = nuxt.options.buildDir + "/nuxt-graphql-middleware";
+    const operationTypesBuildDir = nuxt.options.buildDir + "/graphql-operations";
+    const toBuildRelative = (path) => {
+      return relative(nuxtGraphqlMiddlewareBuildDir, path);
+    };
+    addAlias("#nuxt-graphql-middleware", nuxtGraphqlMiddlewareBuildDir);
+    addAlias("#graphql-operations", operationTypesBuildDir);
+    const context = {
+      isDev: nuxt.options.dev,
+      patterns: options.autoImportPatterns || [],
+      srcDir: nuxt.options.srcDir,
+      rootDir: nuxt.options.rootDir,
+      buildDir: srcResolver.resolve(nuxt.options.buildDir),
+      nuxtConfigPath: rootResolver.resolve("nuxt.config.ts"),
+      schemaPath,
+      serverApiPrefix: options.serverApiPrefix,
+      logOnlyErrors: !!options.logOnlyErrors,
+      runtimeTypesPath: toBuildRelative(
+        moduleResolver.resolve("./runtime/types.ts")
+      )
+    };
     const collector = new Collector(
       schema,
-      {
-        patterns: options.autoImportPatterns || [],
-        srcDir: nuxt.options.srcDir,
-        buildDir: srcResolver.resolve(nuxt.options.buildDir),
-        nuxtConfigPath: rootResolver.resolve("nuxt.config.ts"),
-        schemaPath,
-        serverApiPrefix: options.serverApiPrefix,
-        logOnlyErrors: !!options.logOnlyErrors
-      },
+      context,
       options.documents,
       options.codegenConfig
     );
@@ -741,9 +762,6 @@ const module = defineNuxtModule({
         });
       });
     }
-    nuxt.options.runtimeConfig.public["nuxt-graphql-middleware"] = {
-      serverApiPrefix: options.serverApiPrefix
-    };
     nuxt.options.appConfig.graphqlMiddleware = {
       clientCacheEnabled: !!options.clientCache?.enabled,
       clientCacheMaxSize: options.clientCache?.maxSize || 100
@@ -777,55 +795,74 @@ const module = defineNuxtModule({
       );
       addServerImports(serverUtils);
     }
-    addAlias(
-      "#graphql-operations",
-      addTemplate({
-        filename: GraphqlMiddlewareTemplate.OperationTypes,
-        write: true,
-        getContents: () => collector.getTemplateTypes()
-      })
-    );
-    addAlias(
-      "#graphql-operations/enums",
-      addTemplate({
-        filename: GraphqlMiddlewareTemplate.Enums,
-        write: true,
-        getContents: () => collector.getTemplateEnums()
-      })
-    );
-    const templateDocuments = addTemplate({
-      filename: GraphqlMiddlewareTemplate.Documents,
-      write: true,
-      getContents: () => collector.getTemplateOperations()
-    });
-    addAlias("#graphql-documents", templateDocuments.dst);
-    const templateContext = addTemplate({
-      filename: GraphqlMiddlewareTemplate.ComposableContext,
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.OperationTypes,
       write: true,
-      getContents: () => collector.getTemplateContext()
+      getContents: () => collector.getTemplateTypes()
     });
-    addAlias("#nuxt-graphql-middleware/generated-types", templateContext.dst);
-    addTemplate({
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.Types,
       write: true,
-      filename: "nuxt-graphql-middleware/graphql-documents.d.ts",
       getContents: () => {
         return `
-import type {
-  GraphqlMiddlewareQuery,
-  GraphqlMiddlewareMutation,
-} from '#nuxt-graphql-middleware/generated-types'
-
-declare module '#graphql-documents' {
-  type Operations = {
-    query: GraphqlMiddlewareQuery
-    mutation: GraphqlMiddlewareMutation
-  }
-  const operations: Operations
-  export { operations, Operations }
+declare module '#nuxt-graphql-middleware/sources' {
+  export const operationSources: Record<string, string>
 }
 `;
       }
     });
+    addTemplate({
+      filename: GraphqlMiddlewareTemplate.Enums,
+      write: true,
+      getContents: () => collector.getTemplateEnums()
+    });
+    addTemplate({
+      filename: GraphqlMiddlewareTemplate.OperationSources,
+      write: true,
+      getContents: () => collector.getTemplateSources()
+    });
+    addTemplate({
+      filename: GraphqlMiddlewareTemplate.Helpers,
+      write: true,
+      getContents: () => `export const serverApiPrefix = '${context.serverApiPrefix}'
+export function getEndpoint(operation, operationName) {
+  return '${context.serverApiPrefix}' + '/' + operation + '/' + operationName
+}
+`
+    });
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.HelpersTypes,
+      write: true,
+      getContents: () => `export const serverApiPrefix: string;
+export function getEndpoint(operation: string, operationName: string): string
+`
+    });
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.NitroTypes,
+      write: true,
+      getContents: () => collector.getTemplateNitroTypes()
+    });
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.OperationTypesAll,
+      write: true,
+      getContents: () => collector.getTemplateOperationTypes()
+    });
+    const templateDocuments = addTemplate({
+      filename: GraphqlMiddlewareTemplate.Documents,
+      write: true,
+      getContents: () => collector.getTemplateOperations()
+    });
+    inlineNitroExternals(templateDocuments.dst);
+    addTypeTemplate({
+      filename: GraphqlMiddlewareTemplate.ResponseTypes,
+      write: true,
+      getContents: () => collector.getTemplateResponseTypes()
+    });
+    addTypeTemplate({
+      write: true,
+      filename: "nuxt-graphql-middleware/documents.d.ts",
+      getContents: () => generateDocumentTypesTemplate()
+    });
     const findServerOptions = () => {
       const newPath = serverResolver.resolve("graphqlMiddleware.serverOptions");
       const serverPath = fileExists(newPath);
@@ -850,13 +887,10 @@ declare module '#graphql-documents' {
       logger.info("No graphqlMiddleware.serverOptions file found.");
     };
     const resolvedServerOptionsPath = findServerOptions();
-    const moduleTypesPath = relative(
-      nuxt.options.buildDir,
-      moduleResolver.resolve("./types")
-    );
-    const resolvedPathRelative = resolvedServerOptionsPath ? relative(nuxt.options.buildDir, resolvedServerOptionsPath) : null;
+    const moduleTypesPath = toBuildRelative(moduleResolver.resolve("./types"));
+    const resolvedPathRelative = resolvedServerOptionsPath ? toBuildRelative(resolvedServerOptionsPath) : null;
     const template = addTemplate({
-      filename: "graphqlMiddleware.serverOptions.mjs",
+      filename: "nuxt-graphql-middleware/server-options.mjs",
       write: true,
       getContents: () => {
         const serverOptionsLine = resolvedPathRelative ? `import serverOptions from '${resolvedPathRelative}'` : `const serverOptions = {}`;
@@ -866,26 +900,20 @@ export { serverOptions }
 `;
       }
     });
+    inlineNitroExternals(template.dst);
     addTemplate({
-      filename: "graphqlMiddleware.serverOptions.d.ts",
+      filename: "nuxt-graphql-middleware/server-options.d.ts",
       write: true,
       getContents: () => {
         const serverOptionsLineTypes = resolvedPathRelative ? `import serverOptions from '${resolvedPathRelative}'` : `const serverOptions: GraphqlMiddlewareServerOptions = {}`;
         return `
 import type { GraphqlMiddlewareServerOptions } from '${moduleTypesPath}'
 ${serverOptionsLineTypes}
-import type { GraphqlServerResponse } from '${runtimeTypesPath}'
-import type { GraphqlMiddlewareResponseUnion } from '#nuxt-graphql-middleware/generated-types'
 
-type GraphqlResponseAdditions =
+export type GraphqlResponseAdditions =
   typeof serverOptions extends GraphqlMiddlewareServerOptions<infer R, any, any> ? R : {}
 
-export type GraphqlResponse<T> = GraphqlServerResponse<T> & GraphqlResponseAdditions
-
-export type GraphqlResponseTyped = GraphqlResponse<GraphqlMiddlewareResponseUnion>
-
-export { serverOptions }
-`;
+export { serverOptions }`;
       }
     });
     const getClientOptionsImport = () => {
@@ -893,13 +921,13 @@ export { serverOptions }
         "graphqlMiddleware.clientOptions"
       );
       if (fileExists(clientOptionsPath)) {
-        const pathRelative = relative(nuxt.options.buildDir, clientOptionsPath);
+        const pathRelative = toBuildRelative(clientOptionsPath);
         return `import clientOptions from '${pathRelative}'`;
       }
     };
     const clientOptionsImport = getClientOptionsImport();
-    const clientOptionsTemplate = addTemplate({
-      filename: "graphqlMiddleware.clientOptions.mjs",
+    addTemplate({
+      filename: "nuxt-graphql-middleware/client-options.mjs",
       write: true,
       getContents: () => {
         if (clientOptionsImport) {
@@ -909,39 +937,25 @@ export { clientOptions }`;
         return `export const clientOptions = {}`;
       }
     });
-    const runtimeTypesPath = relative(
-      nuxt.options.buildDir,
-      moduleResolver.resolve("./runtime/types.ts")
-    );
     addTemplate({
-      filename: "graphqlMiddleware.clientOptions.d.ts",
+      filename: "nuxt-graphql-middleware/client-options.d.ts",
       write: true,
       getContents: () => {
         if (clientOptionsImport) {
-          return `import type { GraphqlClientOptions } from '${runtimeTypesPath}'
+          return `import type { GraphqlClientOptions } from '${context.runtimeTypesPath}'
 ${clientOptionsImport}
 
 export type GraphqlClientContext = typeof clientOptions extends GraphqlClientOptions<infer R> ? R : {}
 
 export { clientOptions }`;
         }
-        return `import type { GraphqlClientOptions } from '${runtimeTypesPath}'
+        return `import type { GraphqlClientOptions } from '${context.runtimeTypesPath}'
 export const clientOptions: GraphqlClientOptions
 
 export type GraphqlClientContext = {}
 `;
       }
     });
-    addAlias("#graphql-middleware-client-options", clientOptionsTemplate.dst);
-    nuxt.options.nitro.externals = nuxt.options.nitro.externals || {};
-    nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || [];
-    nuxt.options.nitro.externals.inline.push(template.dst);
-    nuxt.options.nitro.externals.inline.push(templateDocuments.dst);
-    addAlias("#graphql-middleware-server-options-build", template.dst);
-    addAlias(
-      "#graphql-middleware/types",
-      moduleResolver.resolve("./runtime/types.ts")
-    );
     addServerHandler({
       handler: moduleResolver.resolve("./runtime/serverHandler/index"),
       route: options.serverApiPrefix + "/:operation/:name"
@@ -955,6 +969,11 @@ export type GraphqlClientContext = {}
     addPlugin(moduleResolver.resolve("./runtime/plugins/provideState"), {
       append: false
     });
+    if (context.isDev && options.errorOverlay) {
+      addPlugin(moduleResolver.resolve("./runtime/plugins/devMode"), {
+        append: false
+      });
+    }
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.externals = defu(
         typeof nitroConfig.externals === "object" ? nitroConfig.externals : {},
@@ -994,8 +1013,10 @@ export type GraphqlClientContext = {}
         if (error) {
           sendError(error);
         }
-        if (hasChanged && rpc) {
-          rpc.broadcast.documentsUpdated([...collector.rpcItems.values()]);
+        if (hasChanged) {
+          if (rpc) {
+            rpc.broadcast.documentsUpdated([...collector.rpcItems.values()]);
+          }
         }
       });
     }

package/dist/runtime/components/CodeFrame.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="nuxt-graphql-middleware-errors-code">
+    <div>
+      <div
+        v-for="(l, i) in lines"
+        :key="'lineNumber' + i"
+        class="nuxt-graphql-middleware-errors-code-line-number"
+        :class="{ 'ngm-is-highlighted': l.isHighlighted }"
+      >
+        <div v-html="l.lineNumber" />
+      </div>
+    </div>
+    <div>
+      <div
+        v-for="(l, i) in lines"
+        :key="'code' + i"
+        class="nuxt-graphql-middleware-errors-code-code"
+        :class="{ 'ngm-is-highlighted': l.isHighlighted }"
+      >
+        <div v-html="l.code" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from '#imports'
+
+const props = defineProps<{
+  source: string
+  line: number
+  column: number
+}>()
+
+const before = 20
+const after = 20
+
+const lines = computed(() => {
+  const fullLines = props.source.split('\n')
+  const indexStart = Math.max(props.line - before - 1, 0)
+  const indexEnd = Math.min(props.line + after, fullLines.length)
+
+  // Take only the lines we care about
+  const sliced = fullLines.slice(indexStart, indexEnd)
+
+  // Remove trailing empty lines
+  while (sliced.length && !sliced[sliced.length - 1].trim()) {
+    sliced.pop()
+  }
+
+  // Map to your final structure
+  return sliced.map((code, i) => {
+    const lineNumber = indexStart + i + 1
+    return {
+      lineNumber,
+      code,
+      isHighlighted: lineNumber === props.line,
+    }
+  })
+})
+</script>