docs: show source link (faker-js#1780)

Co-authored-by: Shinigami92 <[email protected]>

Author: 2 people

docs/.vitepress/components/api-docs/method.ts

@@ -7,6 +7,7 @@ export interface Method {
   readonly examples: string; // HTML
   readonly deprecated: boolean;
   readonly since: string;
+  readonly sourcePath: string; // URL-Suffix
   readonly seeAlsos: string[];
 }
 

docs/.vitepress/components/api-docs/method.vue

@@ -2,6 +2,7 @@
 import type { Method } from './method';
 import MethodParameters from './method-parameters.vue';
 import { slugify } from '../../shared/utils/slugify';
+import { sourceBaseUrl } from '../../../api/source-base-url';
 
 const props = defineProps<{ method: Method }>();
 
@@ -20,11 +21,9 @@ function seeAlsoToUrl(see: string): string {
 
     <div v-html="props.method.description"></div>
 
-    <div v-if="props.method.since">
-      <p>
-        <em>Available since v<span v-html="props.method.since" /></em>
-      </p>
-    </div>
+    <p v-if="props.method.since">
+      <em>Available since v{{ props.method.since }}</em>
+    </p>
 
     <MethodParameters
       v-if="props.method.parameters.length > 0"
@@ -48,5 +47,44 @@ function seeAlsoToUrl(see: string): string {
         </li>
       </ul>
     </div>
+
+    <div v-if="props.method.sourcePath">
+      <h3>Source</h3>
+      <ul>
+        <li>
+          <a
+            :href="sourceBaseUrl + props.method.sourcePath"
+            target="_blank"
+            class="source-link"
+          >
+            View Source
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              width="1.2em"
+              height="1.2em"
+              class="source-link-icon"
+            >
+              <path
+                d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"
+              />
+            </svg>
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
+
+<style scoped>
+a.source-link {
+  display: flex;
+  align-items: center;
+}
+
+svg.source-link-icon {
+  display: inline;
+  margin-left: 0.3em;
+}
+</style>

scripts/apidoc/apiDocsWriter.ts

@@ -6,6 +6,7 @@ import type { APIGroup, APIItem } from '../../docs/api/api-types';
 import { formatMarkdown, formatTypescript } from './format';
 import {
   extractModuleName,
+  extractSourceBaseUrl,
   selectApiMethods,
   selectApiModules,
 } from './typedoc';
@@ -120,10 +121,20 @@ export function writeApiPagesIndex(pages: PageIndex): void {
   writeFileSync(pathDocsApiPages, apiPagesContent);
 }
 
+/**
+ * Writes the api diff index to the correct location.
+ *
+ * @param diffIndex The diff index project to write.
+ */
 export function writeApiDiffIndex(diffIndex: DocsApiDiffIndex): void {
   writeFileSync(pathDocsDiffIndexFile, JSON.stringify(diffIndex));
 }
 
+/**
+ * Writes the api search index to the correct location.
+ *
+ * @param project The typedoc project.
+ */
 export function writeApiSearchIndex(project: ProjectReflection): void {
   const apiIndex: APIGroup[] = [];
 
@@ -154,3 +165,22 @@ export function writeApiSearchIndex(project: ProjectReflection): void {
 
   writeFileSync(pathDocsApiSearchIndex, JSON.stringify(apiIndex));
 }
+
+/**
+ * Writes the source base url to the correct location.
+ *
+ * @param project The typedoc project.
+ */
+export function writeSourceBaseUrl(project: ProjectReflection): void {
+  const baseUrl = extractSourceBaseUrl(project);
+
+  let content = `
+  // This file is automatically generated.
+  // Run '${scriptCommand}' to update
+  export const sourceBaseUrl = '${baseUrl}';
+  `.replace(/\n +/, '\n');
+
+  content = formatTypescript(content);
+
+  writeFileSync(resolve(pathOutputDir, 'source-base-url.ts'), content);
+}

scripts/apidoc/generate.ts

@@ -3,6 +3,7 @@ import {
   writeApiDiffIndex,
   writeApiPagesIndex,
   writeApiSearchIndex,
+  writeSourceBaseUrl,
 } from './apiDocsWriter';
 import { processModuleMethods } from './moduleMethods';
 import { loadProject } from './typedoc';
@@ -26,4 +27,5 @@ export async function generate(): Promise<void> {
   );
 
   writeApiSearchIndex(project);
+  writeSourceBaseUrl(project);
 }

scripts/apidoc/moduleMethods.ts

@@ -9,7 +9,7 @@ import {
   selectApiModules,
 } from './typedoc';
 import type { PageAndDiffIndex } from './utils';
-import { diffHash } from './utils';
+import { diffHash, methodDiffHash } from './utils';
 
 /**
  * Analyzes and writes the documentation for modules and their methods such as `faker.animal.cat()`.
@@ -62,7 +62,7 @@ function processModuleMethod(module: DeclarationReflection): PageAndDiffIndex {
       diff: methods.reduce(
         (data, method) => ({
           ...data,
-          [method.name]: diffHash(method),
+          [method.name]: methodDiffHash(method),
         }),
         {
           moduleHash: diffHash({

scripts/apidoc/signature.ts

@@ -23,12 +23,15 @@ import {
   extractRawExamples,
   extractSeeAlsos,
   extractSince,
+  extractSourcePath,
   isDeprecated,
   joinTagParts,
 } from './typedoc';
 import { pathOutputDir } from './utils';
 
-export function prettifyMethodName(method: string): string {
+const code = '```';
+
+function prettifyMethodName(method: string): string {
   return (
     // Capitalize and insert space before upper case characters
     method.substring(0, 1).toUpperCase() +
@@ -176,15 +179,13 @@ export function analyzeSignature(
     mdToHtml(seeAlso, true)
   );
 
-  const prettyMethodName = prettifyMethodName(methodName);
-  const code = '```';
-
   return {
     name: methodName,
-    title: prettyMethodName,
+    title: prettifyMethodName(methodName),
     description: mdToHtml(toBlock(signature.comment)),
     parameters: parameters,
     since: extractSince(signature),
+    sourcePath: extractSourcePath(signature),
     returns: typeToText(signature.type),
     examples: mdToHtml(`${code}ts\n${examples}${code}`),
     deprecated: isDeprecated(signature),

scripts/apidoc/typedoc.ts

@@ -3,6 +3,7 @@ import type {
   CommentTag,
   DeclarationReflection,
   ProjectReflection,
+  Reflection,
   SignatureReflection,
   TypeDocOptions,
 } from 'typedoc';
@@ -144,6 +145,40 @@ export function extractModuleFieldName(module: DeclarationReflection): string {
   return moduleName.substring(0, 1).toLowerCase() + moduleName.substring(1);
 }
 
+/**
+ * Extracts the source url from the jsdocs.
+ *
+ * @param reflection The reflection instance to extract the source url from.
+ */
+function extractSourceUrl(reflection: Reflection): string {
+  const source = reflection.sources?.[0];
+  return source?.url ?? '';
+}
+
+/**
+ * Extracts the source base url from the jsdocs.
+ *
+ * @param reflection The reflection instance to extract the source base url from.
+ */
+export function extractSourceBaseUrl(reflection: Reflection): string {
+  return extractSourceUrl(reflection).replace(
+    /^(.*\/blob\/[0-9a-f]+\/)(.*)$/,
+    '$1'
+  );
+}
+
+/**
+ * Extracts the relative source path from the jsdocs.
+ *
+ * @param reflection The reflection instance to extract the source path from.
+ */
+export function extractSourcePath(reflection: Reflection): string {
+  return extractSourceUrl(reflection).replace(
+    /^(.*\/blob\/[0-9a-f]+\/)(.*)$/,
+    '$2'
+  );
+}
+
 /**
  * Extracts the text (md) from a jsdoc tag.
  *

scripts/apidoc/utils.ts

@@ -1,5 +1,6 @@
 import { createHash } from 'node:crypto';
 import { resolve } from 'node:path';
+import type { Method } from '../../docs/.vitepress/components/api-docs/method';
 
 // Types
 
@@ -53,6 +54,18 @@ export function mapByName<T extends { name: string }, V>(
   );
 }
 
+/**
+ * Creates a diff hash for the given method by removing the line number from the source path.
+ *
+ * @param method The method to create a hash for.
+ */
+export function methodDiffHash(method: Method): string {
+  return diffHash({
+    ...method,
+    sourcePath: method.sourcePath.replace(/#.*/g, ''),
+  });
+}
+
 /**
  * Creates a diff hash for the given object.
  *