From 22a8ecf88722249ec7df34873542d48e1b886c58 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 6 Jul 2025 06:45:33 +0000
Subject: [PATCH 1/9] Initial plan


From af05716b6f6f7de08eefd53b87052a17e2f83ead Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 6 Jul 2025 06:49:58 +0000
Subject: [PATCH 2/9] Initial exploration and setup - created example function
 file

Co-authored-by: mbohal <4589176+mbohal@users.noreply.github.com>
---
 public/exampleJS/functions.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 public/exampleJS/functions.js

diff --git a/public/exampleJS/functions.js b/public/exampleJS/functions.js
new file mode 100644
index 0000000..988e625
--- /dev/null
+++ b/public/exampleJS/functions.js
@@ -0,0 +1,35 @@
+/**
+ * Calculates the sum of two numbers
+ * @param {number} a - The first number
+ * @param {number} b - The second number
+ * @returns {number} The sum of a and b
+ */
+function add(a, b) {
+  return a + b;
+}
+
+/**
+ * Formats a user's full name
+ * @param {string} firstName - The user's first name
+ * @param {string} lastName - The user's last name
+ * @param {boolean} [includeTitle=false] - Whether to include a title
+ * @returns {string} The formatted full name
+ */
+function formatName(firstName, lastName, includeTitle = false) {
+  const fullName = `${firstName} ${lastName}`;
+  return includeTitle ? `Mr./Ms. ${fullName}` : fullName;
+}
+
+/**
+ * Fetches user data from an API
+ * @param {string} userId - The ID of the user to fetch
+ * @param {Object} [options] - Configuration options
+ * @param {boolean} [options.includeProfile=true] - Whether to include profile data
+ * @param {number} [options.timeout=5000] - Request timeout in milliseconds
+ * @returns {Promise<Object>} Promise that resolves to user data
+ */
+async function fetchUser(userId, options = {}) {
+  const { includeProfile = true, timeout = 5000 } = options;
+  // Implementation would go here
+  return { id: userId, name: 'John Doe', profile: includeProfile ? {} : null };
+}
\ No newline at end of file

From 8997fe5077987a9d3dd7c39e3dbd065b417a6c65 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 6 Jul 2025 07:01:33 +0000
Subject: [PATCH 3/9] Complete implementation of DocoffFunctionDoc component
 with tests

Co-authored-by: mbohal <4589176+mbohal@users.noreply.github.com>
---
 public/exampleJS/functions.js                 |  23 +-
 public/index.html                             |  18 ++
 src/DocoffFunctionDoc/DocoffFunctionDoc.js    |  43 ++++
 .../_helpers/getFunctionDocTable.js           | 143 ++++++++++++
 .../_helpers/getFunctionDocTable.test.js      |  74 ++++++
 .../_helpers/parseFunctionDoc.js              | 212 ++++++++++++++++++
 .../_helpers/parseFunctionDoc.test.js         |  89 ++++++++
 src/DocoffFunctionDoc/index.js                |   1 +
 src/main.js                                   |   2 +
 9 files changed, 598 insertions(+), 7 deletions(-)
 create mode 100644 src/DocoffFunctionDoc/DocoffFunctionDoc.js
 create mode 100644 src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
 create mode 100644 src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
 create mode 100644 src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
 create mode 100644 src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
 create mode 100644 src/DocoffFunctionDoc/index.js

diff --git a/public/exampleJS/functions.js b/public/exampleJS/functions.js
index 988e625..63878ab 100644
--- a/public/exampleJS/functions.js
+++ b/public/exampleJS/functions.js
@@ -4,7 +4,7 @@
  * @param {number} b - The second number
  * @returns {number} The sum of a and b
  */
-function add(a, b) {
+export function add(a, b) {
   return a + b;
 }
 
@@ -15,7 +15,7 @@ function add(a, b) {
  * @param {boolean} [includeTitle=false] - Whether to include a title
  * @returns {string} The formatted full name
  */
-function formatName(firstName, lastName, includeTitle = false) {
+export function formatName(firstName, lastName, includeTitle = false) {
   const fullName = `${firstName} ${lastName}`;
   return includeTitle ? `Mr./Ms. ${fullName}` : fullName;
 }
@@ -28,8 +28,17 @@ function formatName(firstName, lastName, includeTitle = false) {
  * @param {number} [options.timeout=5000] - Request timeout in milliseconds
  * @returns {Promise<Object>} Promise that resolves to user data
  */
-async function fetchUser(userId, options = {}) {
-  const { includeProfile = true, timeout = 5000 } = options;
-  // Implementation would go here
-  return { id: userId, name: 'John Doe', profile: includeProfile ? {} : null };
-}
\ No newline at end of file
+export async function fetchUser(userId, options = {}) {
+  const {
+    includeProfile = true,
+    timeout = 5000,
+  } = options;
+
+  // Implementation would go here - using timeout to avoid linting error
+  return {
+    id: userId,
+    name: 'John Doe',
+    profile: includeProfile ? {} : null,
+    requestTimeout: timeout,
+  };
+}
diff --git a/public/index.html b/public/index.html
index e84706a..155eac5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -236,6 +236,24 @@ <h3>Layout</h3>
   <docoff-placeholder inline bordered></docoff-placeholder>
 </>
   </textarea>
+
+      <h2><code>docoff-function-doc</code></h2>
+
+      <p><code>&ltdocoff-function-doc&gt;</code> displays function documentation extracted from JSDoc comments in JavaScript or TypeScript files.</p>
+
+      <h3>Usage</h3>
+
+      <h4>Pure HTML</h4>
+      <pre><code>
+&lt;docoff-function-doc href="/path/to/your/functions.js"&gt;&lt;/docoff-function-doc&gt;
+      </code></pre>
+
+      <h3>Example</h3>
+
+      <p>Displaying documentation for example functions:</p>
+
+      <docoff-function-doc href="/exampleJS/functions.js"></docoff-function-doc>
+
       </textarea>
     </div>
 
diff --git a/src/DocoffFunctionDoc/DocoffFunctionDoc.js b/src/DocoffFunctionDoc/DocoffFunctionDoc.js
new file mode 100644
index 0000000..e181209
--- /dev/null
+++ b/src/DocoffFunctionDoc/DocoffFunctionDoc.js
@@ -0,0 +1,43 @@
+import { getFunctionDocTable } from './_helpers/getFunctionDocTable';
+
+class DocoffFunctionDoc extends HTMLElement {
+  static get observedAttributes() {
+    return ['href'];
+  }
+
+  async connectedCallback() {
+    const functionUrl = this.getHrefAttributeValue();
+    if (functionUrl) {
+      try {
+        const data = await getFunctionDocTable(functionUrl);
+        this.replaceChildren(data);
+      } catch (error) {
+        const errorEl = document.createElement('div');
+        errorEl.style.color = 'red';
+        errorEl.textContent = `Error loading function documentation: ${error.message}`;
+        this.replaceChildren(errorEl);
+      }
+    }
+  }
+
+  async attributeChangedCallback() {
+    const functionUrl = this.getHrefAttributeValue();
+    if (functionUrl) {
+      try {
+        const data = await getFunctionDocTable(functionUrl);
+        this.replaceChildren(data);
+      } catch (error) {
+        const errorEl = document.createElement('div');
+        errorEl.style.color = 'red';
+        errorEl.textContent = `Error loading function documentation: ${error.message}`;
+        this.replaceChildren(errorEl);
+      }
+    }
+  }
+
+  getHrefAttributeValue() {
+    return this.attributes.href?.value?.trim();
+  }
+}
+
+export default DocoffFunctionDoc;
diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
new file mode 100644
index 0000000..6c5eddf
--- /dev/null
+++ b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
@@ -0,0 +1,143 @@
+import { parseFunctionDoc } from './parseFunctionDoc';
+
+/**
+ * Fetches a JavaScript/TypeScript file and generates function documentation table
+ * @param {string} functionUrl - URL to the JS/TS file
+ * @returns {Promise<HTMLElement>} Promise that resolves to documentation element
+ */
+export const getFunctionDocTable = async (functionUrl) => {
+  try {
+    // Fetch the file content
+    const response = await fetch(functionUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`);
+    }
+
+    const fileContent = await response.text();
+
+    // Parse the functions and their documentation
+    const functions = parseFunctionDoc(fileContent);
+
+    if (functions.length === 0) {
+      const noFunctionsEl = document.createElement('div');
+      noFunctionsEl.style.fontStyle = 'italic';
+      noFunctionsEl.textContent = 'No documented functions found in this file.';
+      return noFunctionsEl;
+    }
+
+    // Create a container for all function documentation
+    const container = document.createElement('div');
+    container.style.fontFamily = 'inherit';
+
+    functions.forEach((func, index) => {
+      // Create section for each function
+      const functionSection = document.createElement('div');
+      if (index > 0) {
+        functionSection.style.marginTop = '2rem';
+        functionSection.style.paddingTop = '1rem';
+        functionSection.style.borderTop = '1px solid #e0e0e0';
+      }
+
+      // Function name as heading
+      const heading = document.createElement('h4');
+      heading.textContent = func.name;
+      heading.style.margin = '0 0 0.5rem 0';
+      heading.style.fontWeight = 'bold';
+      functionSection.appendChild(heading);
+
+      // Function description
+      if (func.description) {
+        const description = document.createElement('p');
+        description.textContent = func.description;
+        description.style.margin = '0 0 1rem 0';
+        description.style.color = '#666';
+        functionSection.appendChild(description);
+      }
+
+      // Create description list for parameters and return value
+      const dl = document.createElement('dl');
+      dl.style.margin = '0';
+      dl.style.display = 'grid';
+      dl.style.gridTemplateColumns = 'auto 1fr';
+      dl.style.gap = '0.5rem 1rem';
+
+      // Add parameters
+      if (func.params && func.params.length > 0) {
+        const paramsHeader = document.createElement('dt');
+        paramsHeader.textContent = 'Parameters:';
+        paramsHeader.style.fontWeight = 'bold';
+        paramsHeader.style.gridColumn = '1 / -1';
+        paramsHeader.style.marginTop = '0.5rem';
+        dl.appendChild(paramsHeader);
+
+        func.params.forEach((param) => {
+          const paramName = document.createElement('dt');
+          paramName.innerHTML = `<code style="background: #f5f5f5; padding: 2px 4px; border-radius: 3px;">${param.name}</code>`;
+          paramName.style.marginLeft = '1rem';
+
+          const paramDetails = document.createElement('dd');
+          paramDetails.style.margin = '0';
+
+          let paramText = '';
+          if (param.type) {
+            paramText += `<code style="background: #e3f2fd; padding: 2px 4px; border-radius: 3px; color: #1976d2;">${param.type}</code>`;
+          }
+          if (param.optional) {
+            paramText += ' <em>(optional)</em>';
+          }
+          if (param.description) {
+            paramText += ` - ${param.description}`;
+          }
+
+          paramDetails.innerHTML = paramText;
+
+          dl.appendChild(paramName);
+          dl.appendChild(paramDetails);
+        });
+      }
+
+      // Add return value
+      if (func.returns) {
+        const returnsHeader = document.createElement('dt');
+        returnsHeader.textContent = 'Returns:';
+        returnsHeader.style.fontWeight = 'bold';
+        returnsHeader.style.marginTop = '0.5rem';
+
+        const returnsDetails = document.createElement('dd');
+        returnsDetails.style.margin = '0';
+
+        let returnText = '';
+        if (func.returns.type) {
+          returnText += `<code style="background: #e8f5e8; padding: 2px 4px; border-radius: 3px; color: #2e7d32;">${func.returns.type}</code>`;
+        }
+        if (func.returns.description) {
+          returnText += ` - ${func.returns.description}`;
+        }
+
+        returnsDetails.innerHTML = returnText;
+
+        dl.appendChild(returnsHeader);
+        dl.appendChild(returnsDetails);
+      }
+
+      functionSection.appendChild(dl);
+      container.appendChild(functionSection);
+    });
+
+    return container;
+  } catch (error) {
+    // Suppress console in production, but allow for debugging
+    if (process.env.NODE_ENV !== 'test') {
+      // eslint-disable-next-line no-console
+      console.error('Error generating function documentation table:', error);
+    }
+    const errorEl = document.createElement('div');
+    errorEl.style.color = 'red';
+    errorEl.style.padding = '1rem';
+    errorEl.style.border = '1px solid #ffcdd2';
+    errorEl.style.borderRadius = '4px';
+    errorEl.style.backgroundColor = '#ffebee';
+    errorEl.innerHTML = `<strong>Error:</strong> ${error.message}`;
+    return errorEl;
+  }
+};
diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
new file mode 100644
index 0000000..abb2213
--- /dev/null
+++ b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
@@ -0,0 +1,74 @@
+import { getFunctionDocTable } from './getFunctionDocTable';
+
+// Mock DOM globals with simplified implementation for testing
+const mockDocument = {
+  createElement: jest.fn().mockImplementation((tagName) => ({
+    appendChild: jest.fn(),
+    innerHTML: '',
+    style: {},
+    tagName: tagName.toUpperCase(),
+    textContent: '',
+  })),
+};
+
+// Mock fetch for testing
+global.fetch = jest.fn();
+global.document = mockDocument;
+
+describe('getFunctionDocTable', () => {
+  beforeEach(() => {
+    fetch.mockClear();
+    mockDocument.createElement.mockClear();
+  });
+
+  it('should handle fetch success and create DOM elements', async () => {
+    const mockCode = `
+/**
+ * Adds two numbers
+ * @param {number} a - First number
+ * @param {number} b - Second number
+ * @returns {number} The sum
+ */
+function add(a, b) {
+  return a + b;
+}
+    `;
+
+    fetch.mockResolvedValueOnce({
+      ok: true,
+      text: () => Promise.resolve(mockCode),
+    });
+
+    const result = await getFunctionDocTable('/test.js');
+
+    expect(result.tagName).toBe('DIV');
+    expect(mockDocument.createElement).toHaveBeenCalledWith('div');
+    expect(fetch).toHaveBeenCalledWith('/test.js');
+  });
+
+  it('should handle fetch errors', async () => {
+    fetch.mockResolvedValueOnce({
+      ok: false,
+      status: 404,
+      statusText: 'Not Found',
+    });
+
+    const result = await getFunctionDocTable('/nonexistent.js');
+
+    expect(result.tagName).toBe('DIV');
+    expect(result.style.color).toBe('red');
+  });
+
+  it('should handle files with no documented functions', async () => {
+    const mockCode = 'function undocumented() { return "no docs"; }';
+
+    fetch.mockResolvedValueOnce({
+      ok: true,
+      text: () => Promise.resolve(mockCode),
+    });
+
+    const result = await getFunctionDocTable('/test.js');
+
+    expect(result.tagName).toBe('DIV');
+  });
+});
diff --git a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
new file mode 100644
index 0000000..47d2a0c
--- /dev/null
+++ b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
@@ -0,0 +1,212 @@
+// These are available as transitive dependencies
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { parse } from '@babel/parser';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as doctrine from 'doctrine';
+
+/**
+ * Formats a doctrine type object into a readable string
+ * @param {Object} type - The doctrine type object
+ * @returns {string} Formatted type string
+ */
+const formatType = (type) => {
+  if (!type) {
+    return 'any';
+  }
+
+  switch (type.type) {
+    case 'NameExpression':
+      return type.name;
+    case 'OptionalType':
+      return `${formatType(type.expression)}?`;
+    case 'UnionType':
+      return type.elements.map(formatType).join(' | ');
+    case 'ArrayType':
+      return `${formatType(type.elements[0])}[]`;
+    case 'TypeApplication':
+      return `${formatType(type.expression)}<${type.applications.map(formatType).join(', ')}>`;
+    default:
+      return type.name || 'any';
+  }
+};
+
+/**
+ * Extracts JSDoc information from a function node
+ * @param {Object} node - The AST node
+ * @param {string} fileContent - Original file content for extracting comments
+ * @param {string} [customName] - Custom function name for variable declarations
+ * @returns {Object|null} Function documentation object or null
+ */
+const extractFunctionDoc = (node, fileContent, customName) => {
+  const functionName = customName || node.id?.name || node.key?.name;
+  if (!functionName) {
+    return null;
+  }
+
+  // Find the preceding comment block
+  const leadingComments = node.leadingComments || [];
+  let jsdocComment = null;
+
+  // Look for JSDoc comment (/** ... */)
+  for (let i = leadingComments.length - 1; i >= 0; i -= 1) {
+    const comment = leadingComments[i];
+    if (comment.type === 'CommentBlock' && comment.value.startsWith('*')) {
+      jsdocComment = comment;
+      break;
+    }
+  }
+
+  if (!jsdocComment) {
+    // If no leading comments on the node, try to find comments manually
+    // by looking at the source code before the function
+    const lines = fileContent.split('\n');
+    const functionLine = node.loc?.start?.line;
+
+    if (functionLine) {
+      // Look backwards for JSDoc comment
+      for (let i = functionLine - 2; i >= 0; i -= 1) {
+        const line = lines[i]?.trim();
+        if (line === '*/') {
+          // Found end of comment block, now find the start
+          let commentStart = i;
+          for (let j = i - 1; j >= 0; j -= 1) {
+            if (lines[j]?.trim().startsWith('/**')) {
+              commentStart = j;
+              break;
+            }
+          }
+
+          // Extract the comment
+          const commentLines = lines.slice(commentStart, i + 1);
+          const commentText = commentLines.join('\n');
+          jsdocComment = { value: commentText.replace(/^\/\*\*|\*\/$/g, '') };
+          break;
+        } else if (line && !line.startsWith('*') && !line.startsWith('//')) {
+          // Hit non-comment content, stop looking
+          break;
+        }
+      }
+    }
+  }
+
+  if (!jsdocComment) {
+    return null;
+  }
+
+  try {
+    // Parse the JSDoc comment with doctrine
+    const parsedComment = doctrine.parse(`/*${jsdocComment.value}*/`, {
+      sloppy: true,
+      unwrap: true,
+    });
+
+    return {
+      description: parsedComment.description || '',
+      name: functionName,
+      params: parsedComment.tags
+        ?.filter((tag) => tag.title === 'param')
+        ?.map((tag) => ({
+          description: tag.description || '',
+          name: tag.name,
+          optional: tag.type?.type === 'OptionalType' || tag.name?.includes('['),
+          type: tag.type ? formatType(tag.type) : 'any',
+        })) || [],
+      returns: parsedComment.tags
+        ?.find((tag) => tag.title === 'returns' || tag.title === 'return')
+        ? {
+          description: parsedComment.tags.find((tag) => tag.title === 'returns' || tag.title === 'return').description || '',
+          type: formatType(parsedComment.tags.find((tag) => tag.title === 'returns' || tag.title === 'return').type) || 'void',
+        }
+        : null,
+    };
+  } catch (error) {
+    // Suppress console in production, but allow for debugging
+    if (process.env.NODE_ENV !== 'test') {
+      // eslint-disable-next-line no-console
+      console.error('Error parsing JSDoc comment:', error);
+    }
+    return null;
+  }
+};
+
+/**
+ * Parses a JavaScript/TypeScript file to extract function documentation
+ * @param {string} fileContent - The content of the JS/TS file
+ * @returns {Array} Array of function documentation objects
+ */
+export const parseFunctionDoc = (fileContent) => {
+  try {
+    // Parse the file content into an AST
+    const ast = parse(fileContent, {
+      allowAwaitOutsideFunction: true,
+      allowImportExportEverywhere: true,
+      plugins: [
+        'jsx',
+        'typescript',
+        'decorators-legacy',
+        'classProperties',
+        'asyncGenerators',
+        'functionBind',
+        'exportDefaultFrom',
+        'exportNamespaceFrom',
+        'dynamicImport',
+        'nullishCoalescingOperator',
+        'optionalChaining',
+      ],
+      sourceType: 'module',
+      strictMode: false,
+    });
+
+    const functions = [];
+
+    // Walk through the AST to find function declarations and expressions
+    const walkNode = (node) => {
+      if (!node || typeof node !== 'object') {
+        return;
+      }
+
+      // Handle function declarations
+      if (node.type === 'FunctionDeclaration' && node.id?.name) {
+        const functionDoc = extractFunctionDoc(node, fileContent);
+        if (functionDoc) {
+          functions.push(functionDoc);
+        }
+      }
+
+      // Handle variable declarations with function expressions
+      if (node.type === 'VariableDeclaration') {
+        node.declarations?.forEach((declaration) => {
+          if (
+            declaration.id?.name
+            && (declaration.init?.type === 'FunctionExpression'
+              || declaration.init?.type === 'ArrowFunctionExpression')
+          ) {
+            const functionDoc = extractFunctionDoc(declaration, fileContent, declaration.id.name);
+            if (functionDoc) {
+              functions.push(functionDoc);
+            }
+          }
+        });
+      }
+
+      // Recursively walk child nodes
+      Object.values(node).forEach((child) => {
+        if (Array.isArray(child)) {
+          child.forEach(walkNode);
+        } else if (child && typeof child === 'object') {
+          walkNode(child);
+        }
+      });
+    };
+
+    walkNode(ast);
+    return functions;
+  } catch (error) {
+    // Suppress console in production, but allow for debugging
+    if (process.env.NODE_ENV !== 'test') {
+      // eslint-disable-next-line no-console
+      console.error('Error parsing function documentation:', error);
+    }
+    return [];
+  }
+};
diff --git a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
new file mode 100644
index 0000000..80f292d
--- /dev/null
+++ b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
@@ -0,0 +1,89 @@
+import { parseFunctionDoc } from './parseFunctionDoc';
+
+describe('parseFunctionDoc', () => {
+  it('should parse function with JSDoc comments', () => {
+    const code = `
+/**
+ * Adds two numbers
+ * @param {number} a - First number
+ * @param {number} b - Second number
+ * @returns {number} The sum
+ */
+function add(a, b) {
+  return a + b;
+}
+    `;
+
+    const result = parseFunctionDoc(code);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('add');
+    expect(result[0].description).toBe('Adds two numbers');
+    expect(result[0].params).toHaveLength(2);
+    expect(result[0].params[0].name).toBe('a');
+    expect(result[0].params[0].type).toBe('number');
+    expect(result[0].params[0].description).toBe('First number');
+    expect(result[0].returns.type).toBe('number');
+    expect(result[0].returns.description).toBe('The sum');
+  });
+
+  it('should parse arrow function in variable declaration', () => {
+    const code = `
+/**
+ * Multiplies two numbers
+ * @param {number} x - First number
+ * @param {number} y - Second number
+ * @returns {number} The product
+ */
+const multiply = (x, y) => x * y;
+    `;
+
+    const result = parseFunctionDoc(code);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('multiply');
+    expect(result[0].description).toBe('Multiplies two numbers');
+    expect(result[0].params).toHaveLength(2);
+    expect(result[0].returns.type).toBe('number');
+  });
+
+  it('should handle optional parameters', () => {
+    const code = `
+/**
+ * Greets a person
+ * @param {string} name - The person's name
+ * @param {string} [title] - Optional title
+ * @returns {string} Greeting message
+ */
+function greet(name, title) {
+  return title ? \`Hello \${title} \${name}\` : \`Hello \${name}\`;
+}
+    `;
+
+    const result = parseFunctionDoc(code);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].params).toHaveLength(2);
+    expect(result[0].params[1].optional).toBe(true);
+  });
+
+  it('should return empty array for code without JSDoc', () => {
+    const code = `
+function noDoc() {
+  return 'no documentation';
+}
+    `;
+
+    const result = parseFunctionDoc(code);
+
+    expect(result).toHaveLength(0);
+  });
+
+  it('should handle invalid code gracefully', () => {
+    const code = 'invalid javascript code {{{';
+
+    const result = parseFunctionDoc(code);
+
+    expect(result).toHaveLength(0);
+  });
+});
diff --git a/src/DocoffFunctionDoc/index.js b/src/DocoffFunctionDoc/index.js
new file mode 100644
index 0000000..b38ebf6
--- /dev/null
+++ b/src/DocoffFunctionDoc/index.js
@@ -0,0 +1 @@
+export { default as DocoffFunctionDoc } from './DocoffFunctionDoc';
diff --git a/src/main.js b/src/main.js
index 115d4b5..b1f8a45 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,10 +2,12 @@ import { DocoffPlaceholder } from './DocoffPlaceholder';
 import { DocoffReactPreview } from './DocoffReactPreview';
 import { DocoffReactBase } from './DocoffReactBase';
 import { DocoffReactProps } from './DocoffReactProps';
+import { DocoffFunctionDoc } from './DocoffFunctionDoc';
 
 customElements.define('docoff-react-preview', DocoffReactPreview, { extends: 'textarea' });
 customElements.define('docoff-react-base', DocoffReactBase, { extends: 'textarea' });
 customElements.define('docoff-react-props', DocoffReactProps);
+customElements.define('docoff-function-doc', DocoffFunctionDoc);
 customElements.define('docoff-placeholder', DocoffPlaceholder);
 
 // For comfortable usage in Markdown any `<code>` elements with class `language-docoff-*`

From 794a96a68653ce12dfcdba6261a87397319ff28c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 7 Jul 2025 04:30:21 +0000
Subject: [PATCH 4/9] Address PR feedback: simplify example, rename href to
 src, remove styling, combine table

Co-authored-by: mbohal <4589176+mbohal@users.noreply.github.com>
---
 public/exampleJS/functions.js                 | 33 --------
 public/index.html                             |  2 +-
 src/DocoffFunctionDoc/DocoffFunctionDoc.js    | 25 +++---
 .../_helpers/getFunctionDocTable.js           | 79 ++++++++-----------
 .../_helpers/getFunctionDocTable.test.js      | 59 +++++++++++++-
 5 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/public/exampleJS/functions.js b/public/exampleJS/functions.js
index 63878ab..0f020cd 100644
--- a/public/exampleJS/functions.js
+++ b/public/exampleJS/functions.js
@@ -1,13 +1,3 @@
-/**
- * Calculates the sum of two numbers
- * @param {number} a - The first number
- * @param {number} b - The second number
- * @returns {number} The sum of a and b
- */
-export function add(a, b) {
-  return a + b;
-}
-
 /**
  * Formats a user's full name
  * @param {string} firstName - The user's first name
@@ -19,26 +9,3 @@ export function formatName(firstName, lastName, includeTitle = false) {
   const fullName = `${firstName} ${lastName}`;
   return includeTitle ? `Mr./Ms. ${fullName}` : fullName;
 }
-
-/**
- * Fetches user data from an API
- * @param {string} userId - The ID of the user to fetch
- * @param {Object} [options] - Configuration options
- * @param {boolean} [options.includeProfile=true] - Whether to include profile data
- * @param {number} [options.timeout=5000] - Request timeout in milliseconds
- * @returns {Promise<Object>} Promise that resolves to user data
- */
-export async function fetchUser(userId, options = {}) {
-  const {
-    includeProfile = true,
-    timeout = 5000,
-  } = options;
-
-  // Implementation would go here - using timeout to avoid linting error
-  return {
-    id: userId,
-    name: 'John Doe',
-    profile: includeProfile ? {} : null,
-    requestTimeout: timeout,
-  };
-}
diff --git a/public/index.html b/public/index.html
index 155eac5..de7dac2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -252,7 +252,7 @@ <h3>Example</h3>
 
       <p>Displaying documentation for example functions:</p>
 
-      <docoff-function-doc href="/exampleJS/functions.js"></docoff-function-doc>
+      <docoff-function-doc src="/exampleJS/functions.js:formatName"></docoff-function-doc>
 
       </textarea>
     </div>
diff --git a/src/DocoffFunctionDoc/DocoffFunctionDoc.js b/src/DocoffFunctionDoc/DocoffFunctionDoc.js
index e181209..b615c4c 100644
--- a/src/DocoffFunctionDoc/DocoffFunctionDoc.js
+++ b/src/DocoffFunctionDoc/DocoffFunctionDoc.js
@@ -2,26 +2,19 @@ import { getFunctionDocTable } from './_helpers/getFunctionDocTable';
 
 class DocoffFunctionDoc extends HTMLElement {
   static get observedAttributes() {
-    return ['href'];
+    return ['src'];
   }
 
   async connectedCallback() {
-    const functionUrl = this.getHrefAttributeValue();
-    if (functionUrl) {
-      try {
-        const data = await getFunctionDocTable(functionUrl);
-        this.replaceChildren(data);
-      } catch (error) {
-        const errorEl = document.createElement('div');
-        errorEl.style.color = 'red';
-        errorEl.textContent = `Error loading function documentation: ${error.message}`;
-        this.replaceChildren(errorEl);
-      }
-    }
+    await this.render();
   }
 
   async attributeChangedCallback() {
-    const functionUrl = this.getHrefAttributeValue();
+    await this.render();
+  }
+
+  async render() {
+    const functionUrl = this.getSrcAttributeValue();
     if (functionUrl) {
       try {
         const data = await getFunctionDocTable(functionUrl);
@@ -35,8 +28,8 @@ class DocoffFunctionDoc extends HTMLElement {
     }
   }
 
-  getHrefAttributeValue() {
-    return this.attributes.href?.value?.trim();
+  getSrcAttributeValue() {
+    return this.attributes.src?.value?.trim();
   }
 }
 
diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
index 6c5eddf..bffa004 100644
--- a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
+++ b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
@@ -2,13 +2,16 @@ import { parseFunctionDoc } from './parseFunctionDoc';
 
 /**
  * Fetches a JavaScript/TypeScript file and generates function documentation table
- * @param {string} functionUrl - URL to the JS/TS file
+ * @param {string} functionUrl - URL to the JS/TS file, optionally with :functionName
  * @returns {Promise<HTMLElement>} Promise that resolves to documentation element
  */
 export const getFunctionDocTable = async (functionUrl) => {
   try {
+    // Parse file path and function name
+    const [filePath, targetFunctionName] = functionUrl.split(':');
+
     // Fetch the file content
-    const response = await fetch(functionUrl);
+    const response = await fetch(filePath);
     if (!response.ok) {
       throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`);
     }
@@ -16,74 +19,62 @@ export const getFunctionDocTable = async (functionUrl) => {
     const fileContent = await response.text();
 
     // Parse the functions and their documentation
-    const functions = parseFunctionDoc(fileContent);
+    let functions = parseFunctionDoc(fileContent);
+
+    // Filter to specific function if specified
+    if (targetFunctionName) {
+      functions = functions.filter((func) => func.name === targetFunctionName);
+      if (functions.length === 0) {
+        const noFunctionsEl = document.createElement('div');
+        noFunctionsEl.textContent = `Function "${targetFunctionName}" not found in this file.`;
+        return noFunctionsEl;
+      }
+    }
 
     if (functions.length === 0) {
       const noFunctionsEl = document.createElement('div');
-      noFunctionsEl.style.fontStyle = 'italic';
       noFunctionsEl.textContent = 'No documented functions found in this file.';
       return noFunctionsEl;
     }
 
     // Create a container for all function documentation
     const container = document.createElement('div');
-    container.style.fontFamily = 'inherit';
 
-    functions.forEach((func, index) => {
+    functions.forEach((func) => {
       // Create section for each function
       const functionSection = document.createElement('div');
-      if (index > 0) {
-        functionSection.style.marginTop = '2rem';
-        functionSection.style.paddingTop = '1rem';
-        functionSection.style.borderTop = '1px solid #e0e0e0';
-      }
 
-      // Function name as heading
-      const heading = document.createElement('h4');
-      heading.textContent = func.name;
-      heading.style.margin = '0 0 0.5rem 0';
-      heading.style.fontWeight = 'bold';
-      functionSection.appendChild(heading);
+      // Function name as heading (only if no specific function was requested or multiple functions)
+      if (!targetFunctionName || functions.length > 1) {
+        const heading = document.createElement('h4');
+        heading.textContent = func.name;
+        functionSection.appendChild(heading);
+      }
 
       // Function description
       if (func.description) {
         const description = document.createElement('p');
         description.textContent = func.description;
-        description.style.margin = '0 0 1rem 0';
-        description.style.color = '#666';
         functionSection.appendChild(description);
       }
 
       // Create description list for parameters and return value
       const dl = document.createElement('dl');
-      dl.style.margin = '0';
-      dl.style.display = 'grid';
-      dl.style.gridTemplateColumns = 'auto 1fr';
-      dl.style.gap = '0.5rem 1rem';
 
-      // Add parameters
+      // Add parameters and return value in one table
       if (func.params && func.params.length > 0) {
-        const paramsHeader = document.createElement('dt');
-        paramsHeader.textContent = 'Parameters:';
-        paramsHeader.style.fontWeight = 'bold';
-        paramsHeader.style.gridColumn = '1 / -1';
-        paramsHeader.style.marginTop = '0.5rem';
-        dl.appendChild(paramsHeader);
-
         func.params.forEach((param) => {
           const paramName = document.createElement('dt');
-          paramName.innerHTML = `<code style="background: #f5f5f5; padding: 2px 4px; border-radius: 3px;">${param.name}</code>`;
-          paramName.style.marginLeft = '1rem';
+          paramName.innerHTML = `<code>${param.name}</code>`;
 
           const paramDetails = document.createElement('dd');
-          paramDetails.style.margin = '0';
 
           let paramText = '';
           if (param.type) {
-            paramText += `<code style="background: #e3f2fd; padding: 2px 4px; border-radius: 3px; color: #1976d2;">${param.type}</code>`;
+            paramText += `<code>${param.type}</code>`;
           }
           if (param.optional) {
-            paramText += ' <em>(optional)</em>';
+            paramText += ' (optional)';
           }
           if (param.description) {
             paramText += ` - ${param.description}`;
@@ -98,17 +89,14 @@ export const getFunctionDocTable = async (functionUrl) => {
 
       // Add return value
       if (func.returns) {
-        const returnsHeader = document.createElement('dt');
-        returnsHeader.textContent = 'Returns:';
-        returnsHeader.style.fontWeight = 'bold';
-        returnsHeader.style.marginTop = '0.5rem';
+        const returnsName = document.createElement('dt');
+        returnsName.innerHTML = '<code>returns</code>';
 
         const returnsDetails = document.createElement('dd');
-        returnsDetails.style.margin = '0';
 
         let returnText = '';
         if (func.returns.type) {
-          returnText += `<code style="background: #e8f5e8; padding: 2px 4px; border-radius: 3px; color: #2e7d32;">${func.returns.type}</code>`;
+          returnText += `<code>${func.returns.type}</code>`;
         }
         if (func.returns.description) {
           returnText += ` - ${func.returns.description}`;
@@ -116,7 +104,7 @@ export const getFunctionDocTable = async (functionUrl) => {
 
         returnsDetails.innerHTML = returnText;
 
-        dl.appendChild(returnsHeader);
+        dl.appendChild(returnsName);
         dl.appendChild(returnsDetails);
       }
 
@@ -132,11 +120,6 @@ export const getFunctionDocTable = async (functionUrl) => {
       console.error('Error generating function documentation table:', error);
     }
     const errorEl = document.createElement('div');
-    errorEl.style.color = 'red';
-    errorEl.style.padding = '1rem';
-    errorEl.style.border = '1px solid #ffcdd2';
-    errorEl.style.borderRadius = '4px';
-    errorEl.style.backgroundColor = '#ffebee';
     errorEl.innerHTML = `<strong>Error:</strong> ${error.message}`;
     return errorEl;
   }
diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
index abb2213..2cee87a 100644
--- a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
+++ b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
@@ -56,7 +56,6 @@ function add(a, b) {
     const result = await getFunctionDocTable('/nonexistent.js');
 
     expect(result.tagName).toBe('DIV');
-    expect(result.style.color).toBe('red');
   });
 
   it('should handle files with no documented functions', async () => {
@@ -71,4 +70,62 @@ function add(a, b) {
 
     expect(result.tagName).toBe('DIV');
   });
+
+  it('should handle function name specification in URL', async () => {
+    const mockCode = `
+/**
+ * Adds two numbers
+ * @param {number} a - First number
+ * @param {number} b - Second number
+ * @returns {number} The sum
+ */
+function add(a, b) {
+  return a + b;
+}
+
+/**
+ * Multiplies two numbers
+ * @param {number} x - First number
+ * @param {number} y - Second number
+ * @returns {number} The product
+ */
+function multiply(x, y) {
+  return x * y;
+}
+    `;
+
+    fetch.mockResolvedValueOnce({
+      ok: true,
+      text: () => Promise.resolve(mockCode),
+    });
+
+    const result = await getFunctionDocTable('/test.js:add');
+
+    expect(result.tagName).toBe('DIV');
+    expect(fetch).toHaveBeenCalledWith('/test.js');
+  });
+
+  it('should handle nonexistent function name', async () => {
+    const mockCode = `
+/**
+ * Adds two numbers
+ * @param {number} a - First number
+ * @param {number} b - Second number
+ * @returns {number} The sum
+ */
+function add(a, b) {
+  return a + b;
+}
+    `;
+
+    fetch.mockResolvedValueOnce({
+      ok: true,
+      text: () => Promise.resolve(mockCode),
+    });
+
+    const result = await getFunctionDocTable('/test.js:nonexistent');
+
+    expect(result.tagName).toBe('DIV');
+    expect(result.textContent).toContain('Function "nonexistent" not found');
+  });
 });

From cc845ec236db490324e9d7974505587b89933437 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 7 Jul 2025 04:42:41 +0000
Subject: [PATCH 5/9] Remove unnecessary loop since we now only support one
 function per component

Co-authored-by: mbohal <4589176+mbohal@users.noreply.github.com>
---
 .../_helpers/getFunctionDocTable.js           | 118 ++++++++----------
 1 file changed, 54 insertions(+), 64 deletions(-)

diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
index bffa004..5746e4b 100644
--- a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
+++ b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
@@ -37,82 +37,72 @@ export const getFunctionDocTable = async (functionUrl) => {
       return noFunctionsEl;
     }
 
-    // Create a container for all function documentation
-    const container = document.createElement('div');
-
-    functions.forEach((func) => {
-      // Create section for each function
-      const functionSection = document.createElement('div');
-
-      // Function name as heading (only if no specific function was requested or multiple functions)
-      if (!targetFunctionName || functions.length > 1) {
-        const heading = document.createElement('h4');
-        heading.textContent = func.name;
-        functionSection.appendChild(heading);
-      }
+    // Since we now only support one function, get the first (and only) function
+    const func = functions[0];
 
-      // Function description
-      if (func.description) {
-        const description = document.createElement('p');
-        description.textContent = func.description;
-        functionSection.appendChild(description);
-      }
+    // Create section for the function
+    const functionSection = document.createElement('div');
 
-      // Create description list for parameters and return value
-      const dl = document.createElement('dl');
-
-      // Add parameters and return value in one table
-      if (func.params && func.params.length > 0) {
-        func.params.forEach((param) => {
-          const paramName = document.createElement('dt');
-          paramName.innerHTML = `<code>${param.name}</code>`;
-
-          const paramDetails = document.createElement('dd');
-
-          let paramText = '';
-          if (param.type) {
-            paramText += `<code>${param.type}</code>`;
-          }
-          if (param.optional) {
-            paramText += ' (optional)';
-          }
-          if (param.description) {
-            paramText += ` - ${param.description}`;
-          }
-
-          paramDetails.innerHTML = paramText;
-
-          dl.appendChild(paramName);
-          dl.appendChild(paramDetails);
-        });
-      }
+    // Function description
+    if (func.description) {
+      const description = document.createElement('p');
+      description.textContent = func.description;
+      functionSection.appendChild(description);
+    }
 
-      // Add return value
-      if (func.returns) {
-        const returnsName = document.createElement('dt');
-        returnsName.innerHTML = '<code>returns</code>';
+    // Create description list for parameters and return value
+    const dl = document.createElement('dl');
 
-        const returnsDetails = document.createElement('dd');
+    // Add parameters and return value in one table
+    if (func.params && func.params.length > 0) {
+      func.params.forEach((param) => {
+        const paramName = document.createElement('dt');
+        paramName.innerHTML = `<code>${param.name}</code>`;
 
-        let returnText = '';
-        if (func.returns.type) {
-          returnText += `<code>${func.returns.type}</code>`;
+        const paramDetails = document.createElement('dd');
+
+        let paramText = '';
+        if (param.type) {
+          paramText += `<code>${param.type}</code>`;
+        }
+        if (param.optional) {
+          paramText += ' (optional)';
         }
-        if (func.returns.description) {
-          returnText += ` - ${func.returns.description}`;
+        if (param.description) {
+          paramText += ` - ${param.description}`;
         }
 
-        returnsDetails.innerHTML = returnText;
+        paramDetails.innerHTML = paramText;
+
+        dl.appendChild(paramName);
+        dl.appendChild(paramDetails);
+      });
+    }
+
+    // Add return value
+    if (func.returns) {
+      const returnsName = document.createElement('dt');
+      returnsName.innerHTML = '<code>returns</code>';
 
-        dl.appendChild(returnsName);
-        dl.appendChild(returnsDetails);
+      const returnsDetails = document.createElement('dd');
+
+      let returnText = '';
+      if (func.returns.type) {
+        returnText += `<code>${func.returns.type}</code>`;
+      }
+      if (func.returns.description) {
+        returnText += ` - ${func.returns.description}`;
       }
 
-      functionSection.appendChild(dl);
-      container.appendChild(functionSection);
-    });
+      returnsDetails.innerHTML = returnText;
+
+      dl.appendChild(returnsName);
+      dl.appendChild(returnsDetails);
+    }
+
+    functionSection.appendChild(dl);
 
-    return container;
+    return functionSection;
   } catch (error) {
     // Suppress console in production, but allow for debugging
     if (process.env.NODE_ENV !== 'test') {

From e9a35b3d384310110929883e319586e8682834f0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 7 Jul 2025 05:03:14 +0000
Subject: [PATCH 6/9] Optimize parsing to avoid inefficient parsing of all
 functions when only one is needed

Co-authored-by: mbohal <4589176+mbohal@users.noreply.github.com>
---
 .../_helpers/getFunctionDocTable.js           | 18 ++----
 .../_helpers/getFunctionDocTable.test.js      | 30 +++++++---
 .../_helpers/parseFunctionDoc.js              | 57 ++++++++++++++-----
 .../_helpers/parseFunctionDoc.test.js         | 48 ++++++++++++++++
 4 files changed, 121 insertions(+), 32 deletions(-)

diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
index 5746e4b..9f8acfd 100644
--- a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
+++ b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
@@ -19,21 +19,15 @@ export const getFunctionDocTable = async (functionUrl) => {
     const fileContent = await response.text();
 
     // Parse the functions and their documentation
-    let functions = parseFunctionDoc(fileContent);
-
-    // Filter to specific function if specified
-    if (targetFunctionName) {
-      functions = functions.filter((func) => func.name === targetFunctionName);
-      if (functions.length === 0) {
-        const noFunctionsEl = document.createElement('div');
-        noFunctionsEl.textContent = `Function "${targetFunctionName}" not found in this file.`;
-        return noFunctionsEl;
-      }
-    }
+    const functions = parseFunctionDoc(fileContent, targetFunctionName);
 
     if (functions.length === 0) {
       const noFunctionsEl = document.createElement('div');
-      noFunctionsEl.textContent = 'No documented functions found in this file.';
+      if (targetFunctionName) {
+        noFunctionsEl.textContent = `Function "${targetFunctionName}" not found in this file.`;
+      } else {
+        noFunctionsEl.textContent = 'No documented functions found in this file.';
+      }
       return noFunctionsEl;
     }
 
diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
index 2cee87a..2eb5f82 100644
--- a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
+++ b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
@@ -2,13 +2,29 @@ import { getFunctionDocTable } from './getFunctionDocTable';
 
 // Mock DOM globals with simplified implementation for testing
 const mockDocument = {
-  createElement: jest.fn().mockImplementation((tagName) => ({
-    appendChild: jest.fn(),
-    innerHTML: '',
-    style: {},
-    tagName: tagName.toUpperCase(),
-    textContent: '',
-  })),
+  createElement: jest.fn().mockImplementation((tagName) => {
+    const element = {
+      appendChild: jest.fn(),
+      innerHTML: '',
+      style: {},
+      tagName: tagName.toUpperCase(),
+      _textContent: '',
+    };
+    
+    // Define textContent as a property with getter and setter
+    Object.defineProperty(element, 'textContent', {
+      get() {
+        return this._textContent;
+      },
+      set(value) {
+        this._textContent = value;
+      },
+      enumerable: true,
+      configurable: true,
+    });
+    
+    return element;
+  }),
 };
 
 // Mock fetch for testing
diff --git a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
index 47d2a0c..9842627 100644
--- a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
+++ b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
@@ -132,9 +132,10 @@ const extractFunctionDoc = (node, fileContent, customName) => {
 /**
  * Parses a JavaScript/TypeScript file to extract function documentation
  * @param {string} fileContent - The content of the JS/TS file
+ * @param {string} [targetFunctionName] - Optional specific function name to search for
  * @returns {Array} Array of function documentation objects
  */
-export const parseFunctionDoc = (fileContent) => {
+export const parseFunctionDoc = (fileContent, targetFunctionName) => {
   try {
     // Parse the file content into an AST
     const ast = parse(fileContent, {
@@ -158,10 +159,11 @@ export const parseFunctionDoc = (fileContent) => {
     });
 
     const functions = [];
+    let foundTargetFunction = false;
 
     // Walk through the AST to find function declarations and expressions
     const walkNode = (node) => {
-      if (!node || typeof node !== 'object') {
+      if (!node || typeof node !== 'object' || foundTargetFunction) {
         return;
       }
 
@@ -169,13 +171,25 @@ export const parseFunctionDoc = (fileContent) => {
       if (node.type === 'FunctionDeclaration' && node.id?.name) {
         const functionDoc = extractFunctionDoc(node, fileContent);
         if (functionDoc) {
-          functions.push(functionDoc);
+          // If we have a target function name, only add it if it matches
+          if (targetFunctionName) {
+            if (functionDoc.name === targetFunctionName) {
+              functions.push(functionDoc);
+              foundTargetFunction = true;
+              return; // Exit early since we found our target
+            }
+          } else {
+            // No target specified, add all functions
+            functions.push(functionDoc);
+          }
         }
       }
 
       // Handle variable declarations with function expressions
       if (node.type === 'VariableDeclaration') {
-        node.declarations?.forEach((declaration) => {
+        for (const declaration of node.declarations || []) {
+          if (foundTargetFunction) break;
+          
           if (
             declaration.id?.name
             && (declaration.init?.type === 'FunctionExpression'
@@ -183,20 +197,37 @@ export const parseFunctionDoc = (fileContent) => {
           ) {
             const functionDoc = extractFunctionDoc(declaration, fileContent, declaration.id.name);
             if (functionDoc) {
-              functions.push(functionDoc);
+              // If we have a target function name, only add it if it matches
+              if (targetFunctionName) {
+                if (functionDoc.name === targetFunctionName) {
+                  functions.push(functionDoc);
+                  foundTargetFunction = true;
+                  return; // Exit early since we found our target
+                }
+              } else {
+                // No target specified, add all functions
+                functions.push(functionDoc);
+              }
             }
           }
-        });
+        }
       }
 
-      // Recursively walk child nodes
-      Object.values(node).forEach((child) => {
-        if (Array.isArray(child)) {
-          child.forEach(walkNode);
-        } else if (child && typeof child === 'object') {
-          walkNode(child);
+      // Recursively walk child nodes only if we haven't found the target function yet
+      if (!foundTargetFunction) {
+        for (const child of Object.values(node)) {
+          if (foundTargetFunction) break;
+          
+          if (Array.isArray(child)) {
+            for (const item of child) {
+              if (foundTargetFunction) break;
+              walkNode(item);
+            }
+          } else if (child && typeof child === 'object') {
+            walkNode(child);
+          }
         }
-      });
+      }
     };
 
     walkNode(ast);
diff --git a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
index 80f292d..1a5f4a9 100644
--- a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
+++ b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
@@ -86,4 +86,52 @@ function noDoc() {
 
     expect(result).toHaveLength(0);
   });
+
+  it('should find specific function when targetFunctionName is provided', () => {
+    const code = `
+/**
+ * Adds two numbers
+ * @param {number} a - First number
+ * @param {number} b - Second number
+ * @returns {number} The sum
+ */
+function add(a, b) {
+  return a + b;
+}
+
+/**
+ * Multiplies two numbers
+ * @param {number} x - First number
+ * @param {number} y - Second number
+ * @returns {number} The product
+ */
+function multiply(x, y) {
+  return x * y;
+}
+    `;
+
+    const result = parseFunctionDoc(code, 'multiply');
+
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('multiply');
+    expect(result[0].description).toBe('Multiplies two numbers');
+  });
+
+  it('should return empty array when target function not found', () => {
+    const code = `
+/**
+ * Adds two numbers
+ * @param {number} a - First number
+ * @param {number} b - Second number
+ * @returns {number} The sum
+ */
+function add(a, b) {
+  return a + b;
+}
+    `;
+
+    const result = parseFunctionDoc(code, 'nonexistent');
+
+    expect(result).toHaveLength(0);
+  });
 });

From 555ccc763a4493b8ee2195556c73bd5b6e94f689 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 7 Jul 2025 05:38:43 +0000
Subject: [PATCH 7/9] Implement build-time TypeScript function documentation
 with @microsoft/tsdoc

Co-authored-by: mbohal <4589176+mbohal@users.noreply.github.com>
---
 package-lock.json                             | 446 +++++++++++++++++-
 package.json                                  |   5 +-
 public/exampleTS/functions.ts                 |  11 +
 public/index.html                             |   7 +-
 scripts/processDocoffFunctionDoc.js           | 216 +++++++++
 src/DocoffFunctionDoc/DocoffFunctionDoc.js    |  36 --
 .../_helpers/getFunctionDocTable.js           | 110 -----
 .../_helpers/getFunctionDocTable.test.js      | 147 ------
 .../_helpers/parseFunctionDoc.js              | 243 ----------
 .../_helpers/parseFunctionDoc.test.js         | 137 ------
 src/DocoffFunctionDoc/index.js                |   1 -
 src/_plugins/DocoffFunctionDocPlugin.js       |  28 ++
 src/main.js                                   |   2 -
 webpack.config.babel.js                       |   2 +
 14 files changed, 699 insertions(+), 692 deletions(-)
 create mode 100644 public/exampleTS/functions.ts
 create mode 100644 scripts/processDocoffFunctionDoc.js
 delete mode 100644 src/DocoffFunctionDoc/DocoffFunctionDoc.js
 delete mode 100644 src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
 delete mode 100644 src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
 delete mode 100644 src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
 delete mode 100644 src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
 delete mode 100644 src/DocoffFunctionDoc/index.js
 create mode 100644 src/_plugins/DocoffFunctionDocPlugin.js

diff --git a/package-lock.json b/package-lock.json
index 64d8c68..f914924 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@babel/preset-react": "^7.16.7",
         "@babel/preset-typescript": "^7.26.0",
         "@babel/register": "^7.16.9",
+        "@microsoft/tsdoc": "^0.15.1",
         "@visionappscz/eslint-config-visionapps": "^1.5.0",
         "babel-loader": "^9.2.1",
         "babel-plugin-prismjs": "^2.1.0",
@@ -38,9 +39,11 @@
         "eslint-plugin-markdown": "^2.2.1",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
+        "glob": "^11.0.3",
         "jest": "^29.7.0",
         "style-loader": "^4.0.0",
         "terser-webpack-plugin": "^5.3.1",
+        "typescript": "^5.8.3",
         "uglify-js": "^3.15.5",
         "webpack": "^5.66.0",
         "webpack-cli": "^6.0.1",
@@ -2098,6 +2101,125 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@isaacs/balanced-match": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
+      "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@isaacs/brace-expansion": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+      "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@isaacs/balanced-match": "^4.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2402,6 +2524,28 @@
         }
       }
     },
+    "node_modules/@jest/reporters/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@jest/schemas": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
@@ -2630,6 +2774,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.15.1.tgz",
+      "integrity": "sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -5130,6 +5281,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6341,6 +6499,36 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -6521,22 +6709,24 @@
       }
     },
     "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz",
+      "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "foreground-child": "^3.3.1",
+        "jackspeak": "^4.1.1",
+        "minimatch": "^10.0.3",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^2.0.0"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": "*"
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -6562,6 +6752,22 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
+      "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/brace-expansion": "^5.0.0"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -7848,6 +8054,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
+      "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
@@ -8002,6 +8224,28 @@
         }
       }
     },
+    "node_modules/jest-config/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/jest-diff": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
@@ -8309,6 +8553,28 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/jest-runtime/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/jest-snapshot": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.7.0.tgz",
@@ -8977,6 +9243,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -9393,6 +9669,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -9496,6 +9779,33 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
+    "node_modules/path-scurry": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
+      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.1.0.tgz",
+      "integrity": "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
@@ -10301,6 +10611,28 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/run-applescript": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.0.0.tgz",
@@ -11029,6 +11361,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -11162,6 +11517,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -11362,6 +11731,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/test-exclude/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -11607,6 +11998,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/uc.micro": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
@@ -12248,6 +12653,25 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 9b890ad..f58b2d2 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/register": "^7.16.9",
+    "@microsoft/tsdoc": "^0.15.1",
     "@visionappscz/eslint-config-visionapps": "^1.5.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-prismjs": "^2.1.0",
@@ -58,16 +59,18 @@
     "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "glob": "^11.0.3",
     "jest": "^29.7.0",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.1",
+    "typescript": "^5.8.3",
     "uglify-js": "^3.15.5",
     "webpack": "^5.66.0",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.0"
   },
   "scripts": {
-    "build": "webpack --mode=production",
+    "build": "webpack --mode=production && node scripts/processDocoffFunctionDoc.js",
     "prepublishOnly": "npm run build",
     "start": "webpack serve --mode=development",
     "test": "npm run test:eslint && npm run test:jest",
diff --git a/public/exampleTS/functions.ts b/public/exampleTS/functions.ts
new file mode 100644
index 0000000..d7a959d
--- /dev/null
+++ b/public/exampleTS/functions.ts
@@ -0,0 +1,11 @@
+/**
+ * Formats a user's full name with proper capitalization
+ * @param firstName - The user's first name
+ * @param lastName - The user's last name
+ * @param includeTitle - Whether to include a title prefix
+ * @returns The formatted full name
+ */
+export function formatName(firstName: string, lastName: string, includeTitle: boolean = false): string {
+  const fullName = `${firstName} ${lastName}`;
+  return includeTitle ? `Mr./Ms. ${fullName}` : fullName;
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index de7dac2..1fc19c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -239,22 +239,21 @@ <h3>Layout</h3>
 
       <h2><code>docoff-function-doc</code></h2>
 
-      <p><code>&ltdocoff-function-doc&gt;</code> displays function documentation extracted from JSDoc comments in JavaScript or TypeScript files.</p>
+      <p><code>&ltdocoff-function-doc&gt;</code> displays function documentation extracted from TSDoc comments in TypeScript files.</p>
 
       <h3>Usage</h3>
 
       <h4>Pure HTML</h4>
       <pre><code>
-&lt;docoff-function-doc href="/path/to/your/functions.js"&gt;&lt;/docoff-function-doc&gt;
+&lt;docoff-function-doc src="/path/to/your/functions.ts:functionName"&gt;&lt;/docoff-function-doc&gt;
       </code></pre>
 
       <h3>Example</h3>
 
       <p>Displaying documentation for example functions:</p>
 
-      <docoff-function-doc src="/exampleJS/functions.js:formatName"></docoff-function-doc>
+      <dl><dt><strong>formatName</strong></dt><dd>Formats a user's full name with proper capitalization</dd><dt>Parameter: <code>firstName</code></dt><dd>The user's first name</dd><dt>Parameter: <code>lastName</code></dt><dd>The user's last name</dd><dt>Parameter: <code>includeTitle</code></dt><dd>Whether to include a title prefix</dd><dt>Returns:</dt><dd>The formatted full name</dd></dl>
 
-      </textarea>
     </div>
 
   </body>
diff --git a/scripts/processDocoffFunctionDoc.js b/scripts/processDocoffFunctionDoc.js
new file mode 100644
index 0000000..824c7af
--- /dev/null
+++ b/scripts/processDocoffFunctionDoc.js
@@ -0,0 +1,216 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const { TSDocParser } = require('@microsoft/tsdoc');
+const ts = require('typescript');
+
+/**
+ * Standalone function to process docoff-function-doc elements in HTML files
+ * and replace them with static HTML content
+ */
+async function processDocoffFunctionDoc(options = {}) {
+  const {
+    sourceDir = 'public',
+    outputDir = 'public',
+    htmlPattern = '**/*.html',
+  } = options;
+
+  console.log('Processing docoff-function-doc elements...');
+
+  // Find all HTML files to process
+  const htmlFiles = glob.sync(path.join(sourceDir, htmlPattern));
+
+  for (const htmlFile of htmlFiles) {
+    console.log(`Processing ${htmlFile}...`);
+    
+    let content = fs.readFileSync(htmlFile, 'utf-8');
+    let hasChanges = false;
+
+    // Find all docoff-function-doc elements
+    const regex = /<docoff-function-doc\s+src="([^"]+)"><\/docoff-function-doc>/g;
+    let match;
+
+    while ((match = regex.exec(content)) !== null) {
+      const srcAttribute = match[1];
+      const [filePath, functionName] = srcAttribute.split(':');
+
+      if (filePath && functionName) {
+        try {
+          const htmlContent = await generateFunctionDoc(filePath, functionName, path.dirname(htmlFile));
+          content = content.replace(match[0], htmlContent);
+          hasChanges = true;
+          console.log(`  Replaced docoff-function-doc for ${srcAttribute}`);
+        } catch (error) {
+          console.warn(`  Warning: Failed to process docoff-function-doc for ${srcAttribute}: ${error.message}`);
+          // Replace with error message
+          const errorHtml = `<div style="color: red;">Error loading function documentation: ${error.message}</div>`;
+          content = content.replace(match[0], errorHtml);
+          hasChanges = true;
+        }
+      }
+    }
+
+    if (hasChanges) {
+      // Calculate output path
+      const outputPath = path.resolve(outputDir, path.relative(sourceDir, htmlFile));
+      
+      // Ensure output directory exists
+      fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+      
+      // Write the updated content
+      fs.writeFileSync(outputPath, content, 'utf-8');
+      console.log(`  Updated ${outputPath}`);
+    }
+  }
+
+  console.log('Finished processing docoff-function-doc elements.');
+}
+
+async function generateFunctionDoc(filePath, functionName, baseDir) {
+  // Resolve the absolute path to the TypeScript file
+  const fullPath = path.resolve(baseDir, filePath.replace(/^\//, ''));
+
+  if (!fs.existsSync(fullPath)) {
+    throw new Error(`File not found: ${fullPath}`);
+  }
+
+  const fileContent = fs.readFileSync(fullPath, 'utf-8');
+
+  // Parse TypeScript file
+  const sourceFile = ts.createSourceFile(
+    fullPath,
+    fileContent,
+    ts.ScriptTarget.Latest,
+    true
+  );
+
+  // Find the specific function
+  const functionNode = findFunctionNode(sourceFile, functionName);
+
+  if (!functionNode) {
+    throw new Error(`Function '${functionName}' not found in ${filePath}`);
+  }
+
+  // Extract TSDoc comment
+  const tsdocComment = extractTSDocComment(sourceFile, functionNode);
+
+  if (!tsdocComment) {
+    throw new Error(`No TSDoc comment found for function '${functionName}'`);
+  }
+
+  // Parse TSDoc comment
+  const parser = new TSDocParser();
+  const parserContext = parser.parseString(tsdocComment);
+
+  if (parserContext.log.messages.length > 0) {
+    console.warn(`TSDoc parsing warnings for ${functionName}:`, parserContext.log.messages);
+  }
+
+  // Generate HTML from parsed TSDoc
+  return generateHTMLFromTSDoc(functionName, parserContext.docComment);
+}
+
+function findFunctionNode(sourceFile, functionName) {
+  let functionNode = null;
+
+  const visit = (node) => {
+    if (ts.isFunctionDeclaration(node) && node.name && node.name.text === functionName) {
+      functionNode = node;
+      return;
+    }
+
+    if (ts.isVariableStatement(node)) {
+      for (const declaration of node.declarationList.declarations) {
+        if (ts.isIdentifier(declaration.name) && declaration.name.text === functionName) {
+          if (declaration.initializer && 
+              (ts.isFunctionExpression(declaration.initializer) || 
+               ts.isArrowFunction(declaration.initializer))) {
+            functionNode = node;
+            return;
+          }
+        }
+      }
+    }
+
+    ts.forEachChild(node, visit);
+  };
+
+  visit(sourceFile);
+  return functionNode;
+}
+
+function extractTSDocComment(sourceFile, functionNode) {
+  // Get leading trivia (comments) for the function node
+  const leadingTrivia = functionNode.getFullText().substring(0, functionNode.getLeadingTriviaWidth());
+
+  // Look for TSDoc comment (/** ... */)
+  const tsdocRegex = /\/\*\*[\s\S]*?\*\//g;
+  const matches = leadingTrivia.match(tsdocRegex);
+
+  if (matches && matches.length > 0) {
+    // Return the last (closest) TSDoc comment
+    return matches[matches.length - 1];
+  }
+
+  return null;
+}
+
+function generateHTMLFromTSDoc(functionName, docComment) {
+  const summary = docComment.summarySection;
+  const params = docComment.params;
+  const returnsBlock = docComment.returnsBlock;
+
+  let html = '<dl>';
+
+  // Function name and description
+  html += `<dt><strong>${functionName}</strong></dt>`;
+
+  if (summary && summary.nodes.length > 0) {
+    const description = extractTextFromNodes(summary.nodes);
+    html += `<dd>${description}</dd>`;
+  }
+
+  // Parameters
+  if (params.blocks.length > 0) {
+    for (const param of params.blocks) {
+      const paramName = param.parameterName;
+      const paramDescription = param.content ? extractTextFromNodes(param.content.nodes) : '';
+      html += `<dt>Parameter: <code>${paramName}</code></dt>`;
+      html += `<dd>${paramDescription}</dd>`;
+    }
+  }
+
+  // Returns
+  if (returnsBlock && returnsBlock.content) {
+    const returnDescription = extractTextFromNodes(returnsBlock.content.nodes);
+    html += `<dt>Returns:</dt>`;
+    html += `<dd>${returnDescription}</dd>`;
+  }
+
+  html += '</dl>';
+
+  return html;
+}
+
+function extractTextFromNodes(nodes) {
+  return nodes.map(node => {
+    if (node.kind === 'PlainText') {
+      return node.text;
+    } else if (node.kind === 'Paragraph') {
+      return extractTextFromNodes(node.nodes);
+    } else if (node.kind === 'CodeSpan') {
+      return `<code>${node.code}</code>`;
+    }
+    return '';
+  }).join('').trim();
+}
+
+module.exports = {
+  processDocoffFunctionDoc,
+  generateFunctionDoc,
+};
+
+// If called directly from command line
+if (require.main === module) {
+  processDocoffFunctionDoc().catch(console.error);
+}
\ No newline at end of file
diff --git a/src/DocoffFunctionDoc/DocoffFunctionDoc.js b/src/DocoffFunctionDoc/DocoffFunctionDoc.js
deleted file mode 100644
index b615c4c..0000000
--- a/src/DocoffFunctionDoc/DocoffFunctionDoc.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { getFunctionDocTable } from './_helpers/getFunctionDocTable';
-
-class DocoffFunctionDoc extends HTMLElement {
-  static get observedAttributes() {
-    return ['src'];
-  }
-
-  async connectedCallback() {
-    await this.render();
-  }
-
-  async attributeChangedCallback() {
-    await this.render();
-  }
-
-  async render() {
-    const functionUrl = this.getSrcAttributeValue();
-    if (functionUrl) {
-      try {
-        const data = await getFunctionDocTable(functionUrl);
-        this.replaceChildren(data);
-      } catch (error) {
-        const errorEl = document.createElement('div');
-        errorEl.style.color = 'red';
-        errorEl.textContent = `Error loading function documentation: ${error.message}`;
-        this.replaceChildren(errorEl);
-      }
-    }
-  }
-
-  getSrcAttributeValue() {
-    return this.attributes.src?.value?.trim();
-  }
-}
-
-export default DocoffFunctionDoc;
diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
deleted file mode 100644
index 9f8acfd..0000000
--- a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { parseFunctionDoc } from './parseFunctionDoc';
-
-/**
- * Fetches a JavaScript/TypeScript file and generates function documentation table
- * @param {string} functionUrl - URL to the JS/TS file, optionally with :functionName
- * @returns {Promise<HTMLElement>} Promise that resolves to documentation element
- */
-export const getFunctionDocTable = async (functionUrl) => {
-  try {
-    // Parse file path and function name
-    const [filePath, targetFunctionName] = functionUrl.split(':');
-
-    // Fetch the file content
-    const response = await fetch(filePath);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`);
-    }
-
-    const fileContent = await response.text();
-
-    // Parse the functions and their documentation
-    const functions = parseFunctionDoc(fileContent, targetFunctionName);
-
-    if (functions.length === 0) {
-      const noFunctionsEl = document.createElement('div');
-      if (targetFunctionName) {
-        noFunctionsEl.textContent = `Function "${targetFunctionName}" not found in this file.`;
-      } else {
-        noFunctionsEl.textContent = 'No documented functions found in this file.';
-      }
-      return noFunctionsEl;
-    }
-
-    // Since we now only support one function, get the first (and only) function
-    const func = functions[0];
-
-    // Create section for the function
-    const functionSection = document.createElement('div');
-
-    // Function description
-    if (func.description) {
-      const description = document.createElement('p');
-      description.textContent = func.description;
-      functionSection.appendChild(description);
-    }
-
-    // Create description list for parameters and return value
-    const dl = document.createElement('dl');
-
-    // Add parameters and return value in one table
-    if (func.params && func.params.length > 0) {
-      func.params.forEach((param) => {
-        const paramName = document.createElement('dt');
-        paramName.innerHTML = `<code>${param.name}</code>`;
-
-        const paramDetails = document.createElement('dd');
-
-        let paramText = '';
-        if (param.type) {
-          paramText += `<code>${param.type}</code>`;
-        }
-        if (param.optional) {
-          paramText += ' (optional)';
-        }
-        if (param.description) {
-          paramText += ` - ${param.description}`;
-        }
-
-        paramDetails.innerHTML = paramText;
-
-        dl.appendChild(paramName);
-        dl.appendChild(paramDetails);
-      });
-    }
-
-    // Add return value
-    if (func.returns) {
-      const returnsName = document.createElement('dt');
-      returnsName.innerHTML = '<code>returns</code>';
-
-      const returnsDetails = document.createElement('dd');
-
-      let returnText = '';
-      if (func.returns.type) {
-        returnText += `<code>${func.returns.type}</code>`;
-      }
-      if (func.returns.description) {
-        returnText += ` - ${func.returns.description}`;
-      }
-
-      returnsDetails.innerHTML = returnText;
-
-      dl.appendChild(returnsName);
-      dl.appendChild(returnsDetails);
-    }
-
-    functionSection.appendChild(dl);
-
-    return functionSection;
-  } catch (error) {
-    // Suppress console in production, but allow for debugging
-    if (process.env.NODE_ENV !== 'test') {
-      // eslint-disable-next-line no-console
-      console.error('Error generating function documentation table:', error);
-    }
-    const errorEl = document.createElement('div');
-    errorEl.innerHTML = `<strong>Error:</strong> ${error.message}`;
-    return errorEl;
-  }
-};
diff --git a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js b/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
deleted file mode 100644
index 2eb5f82..0000000
--- a/src/DocoffFunctionDoc/_helpers/getFunctionDocTable.test.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { getFunctionDocTable } from './getFunctionDocTable';
-
-// Mock DOM globals with simplified implementation for testing
-const mockDocument = {
-  createElement: jest.fn().mockImplementation((tagName) => {
-    const element = {
-      appendChild: jest.fn(),
-      innerHTML: '',
-      style: {},
-      tagName: tagName.toUpperCase(),
-      _textContent: '',
-    };
-    
-    // Define textContent as a property with getter and setter
-    Object.defineProperty(element, 'textContent', {
-      get() {
-        return this._textContent;
-      },
-      set(value) {
-        this._textContent = value;
-      },
-      enumerable: true,
-      configurable: true,
-    });
-    
-    return element;
-  }),
-};
-
-// Mock fetch for testing
-global.fetch = jest.fn();
-global.document = mockDocument;
-
-describe('getFunctionDocTable', () => {
-  beforeEach(() => {
-    fetch.mockClear();
-    mockDocument.createElement.mockClear();
-  });
-
-  it('should handle fetch success and create DOM elements', async () => {
-    const mockCode = `
-/**
- * Adds two numbers
- * @param {number} a - First number
- * @param {number} b - Second number
- * @returns {number} The sum
- */
-function add(a, b) {
-  return a + b;
-}
-    `;
-
-    fetch.mockResolvedValueOnce({
-      ok: true,
-      text: () => Promise.resolve(mockCode),
-    });
-
-    const result = await getFunctionDocTable('/test.js');
-
-    expect(result.tagName).toBe('DIV');
-    expect(mockDocument.createElement).toHaveBeenCalledWith('div');
-    expect(fetch).toHaveBeenCalledWith('/test.js');
-  });
-
-  it('should handle fetch errors', async () => {
-    fetch.mockResolvedValueOnce({
-      ok: false,
-      status: 404,
-      statusText: 'Not Found',
-    });
-
-    const result = await getFunctionDocTable('/nonexistent.js');
-
-    expect(result.tagName).toBe('DIV');
-  });
-
-  it('should handle files with no documented functions', async () => {
-    const mockCode = 'function undocumented() { return "no docs"; }';
-
-    fetch.mockResolvedValueOnce({
-      ok: true,
-      text: () => Promise.resolve(mockCode),
-    });
-
-    const result = await getFunctionDocTable('/test.js');
-
-    expect(result.tagName).toBe('DIV');
-  });
-
-  it('should handle function name specification in URL', async () => {
-    const mockCode = `
-/**
- * Adds two numbers
- * @param {number} a - First number
- * @param {number} b - Second number
- * @returns {number} The sum
- */
-function add(a, b) {
-  return a + b;
-}
-
-/**
- * Multiplies two numbers
- * @param {number} x - First number
- * @param {number} y - Second number
- * @returns {number} The product
- */
-function multiply(x, y) {
-  return x * y;
-}
-    `;
-
-    fetch.mockResolvedValueOnce({
-      ok: true,
-      text: () => Promise.resolve(mockCode),
-    });
-
-    const result = await getFunctionDocTable('/test.js:add');
-
-    expect(result.tagName).toBe('DIV');
-    expect(fetch).toHaveBeenCalledWith('/test.js');
-  });
-
-  it('should handle nonexistent function name', async () => {
-    const mockCode = `
-/**
- * Adds two numbers
- * @param {number} a - First number
- * @param {number} b - Second number
- * @returns {number} The sum
- */
-function add(a, b) {
-  return a + b;
-}
-    `;
-
-    fetch.mockResolvedValueOnce({
-      ok: true,
-      text: () => Promise.resolve(mockCode),
-    });
-
-    const result = await getFunctionDocTable('/test.js:nonexistent');
-
-    expect(result.tagName).toBe('DIV');
-    expect(result.textContent).toContain('Function "nonexistent" not found');
-  });
-});
diff --git a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
deleted file mode 100644
index 9842627..0000000
--- a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.js
+++ /dev/null
@@ -1,243 +0,0 @@
-// These are available as transitive dependencies
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { parse } from '@babel/parser';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import * as doctrine from 'doctrine';
-
-/**
- * Formats a doctrine type object into a readable string
- * @param {Object} type - The doctrine type object
- * @returns {string} Formatted type string
- */
-const formatType = (type) => {
-  if (!type) {
-    return 'any';
-  }
-
-  switch (type.type) {
-    case 'NameExpression':
-      return type.name;
-    case 'OptionalType':
-      return `${formatType(type.expression)}?`;
-    case 'UnionType':
-      return type.elements.map(formatType).join(' | ');
-    case 'ArrayType':
-      return `${formatType(type.elements[0])}[]`;
-    case 'TypeApplication':
-      return `${formatType(type.expression)}<${type.applications.map(formatType).join(', ')}>`;
-    default:
-      return type.name || 'any';
-  }
-};
-
-/**
- * Extracts JSDoc information from a function node
- * @param {Object} node - The AST node
- * @param {string} fileContent - Original file content for extracting comments
- * @param {string} [customName] - Custom function name for variable declarations
- * @returns {Object|null} Function documentation object or null
- */
-const extractFunctionDoc = (node, fileContent, customName) => {
-  const functionName = customName || node.id?.name || node.key?.name;
-  if (!functionName) {
-    return null;
-  }
-
-  // Find the preceding comment block
-  const leadingComments = node.leadingComments || [];
-  let jsdocComment = null;
-
-  // Look for JSDoc comment (/** ... */)
-  for (let i = leadingComments.length - 1; i >= 0; i -= 1) {
-    const comment = leadingComments[i];
-    if (comment.type === 'CommentBlock' && comment.value.startsWith('*')) {
-      jsdocComment = comment;
-      break;
-    }
-  }
-
-  if (!jsdocComment) {
-    // If no leading comments on the node, try to find comments manually
-    // by looking at the source code before the function
-    const lines = fileContent.split('\n');
-    const functionLine = node.loc?.start?.line;
-
-    if (functionLine) {
-      // Look backwards for JSDoc comment
-      for (let i = functionLine - 2; i >= 0; i -= 1) {
-        const line = lines[i]?.trim();
-        if (line === '*/') {
-          // Found end of comment block, now find the start
-          let commentStart = i;
-          for (let j = i - 1; j >= 0; j -= 1) {
-            if (lines[j]?.trim().startsWith('/**')) {
-              commentStart = j;
-              break;
-            }
-          }
-
-          // Extract the comment
-          const commentLines = lines.slice(commentStart, i + 1);
-          const commentText = commentLines.join('\n');
-          jsdocComment = { value: commentText.replace(/^\/\*\*|\*\/$/g, '') };
-          break;
-        } else if (line && !line.startsWith('*') && !line.startsWith('//')) {
-          // Hit non-comment content, stop looking
-          break;
-        }
-      }
-    }
-  }
-
-  if (!jsdocComment) {
-    return null;
-  }
-
-  try {
-    // Parse the JSDoc comment with doctrine
-    const parsedComment = doctrine.parse(`/*${jsdocComment.value}*/`, {
-      sloppy: true,
-      unwrap: true,
-    });
-
-    return {
-      description: parsedComment.description || '',
-      name: functionName,
-      params: parsedComment.tags
-        ?.filter((tag) => tag.title === 'param')
-        ?.map((tag) => ({
-          description: tag.description || '',
-          name: tag.name,
-          optional: tag.type?.type === 'OptionalType' || tag.name?.includes('['),
-          type: tag.type ? formatType(tag.type) : 'any',
-        })) || [],
-      returns: parsedComment.tags
-        ?.find((tag) => tag.title === 'returns' || tag.title === 'return')
-        ? {
-          description: parsedComment.tags.find((tag) => tag.title === 'returns' || tag.title === 'return').description || '',
-          type: formatType(parsedComment.tags.find((tag) => tag.title === 'returns' || tag.title === 'return').type) || 'void',
-        }
-        : null,
-    };
-  } catch (error) {
-    // Suppress console in production, but allow for debugging
-    if (process.env.NODE_ENV !== 'test') {
-      // eslint-disable-next-line no-console
-      console.error('Error parsing JSDoc comment:', error);
-    }
-    return null;
-  }
-};
-
-/**
- * Parses a JavaScript/TypeScript file to extract function documentation
- * @param {string} fileContent - The content of the JS/TS file
- * @param {string} [targetFunctionName] - Optional specific function name to search for
- * @returns {Array} Array of function documentation objects
- */
-export const parseFunctionDoc = (fileContent, targetFunctionName) => {
-  try {
-    // Parse the file content into an AST
-    const ast = parse(fileContent, {
-      allowAwaitOutsideFunction: true,
-      allowImportExportEverywhere: true,
-      plugins: [
-        'jsx',
-        'typescript',
-        'decorators-legacy',
-        'classProperties',
-        'asyncGenerators',
-        'functionBind',
-        'exportDefaultFrom',
-        'exportNamespaceFrom',
-        'dynamicImport',
-        'nullishCoalescingOperator',
-        'optionalChaining',
-      ],
-      sourceType: 'module',
-      strictMode: false,
-    });
-
-    const functions = [];
-    let foundTargetFunction = false;
-
-    // Walk through the AST to find function declarations and expressions
-    const walkNode = (node) => {
-      if (!node || typeof node !== 'object' || foundTargetFunction) {
-        return;
-      }
-
-      // Handle function declarations
-      if (node.type === 'FunctionDeclaration' && node.id?.name) {
-        const functionDoc = extractFunctionDoc(node, fileContent);
-        if (functionDoc) {
-          // If we have a target function name, only add it if it matches
-          if (targetFunctionName) {
-            if (functionDoc.name === targetFunctionName) {
-              functions.push(functionDoc);
-              foundTargetFunction = true;
-              return; // Exit early since we found our target
-            }
-          } else {
-            // No target specified, add all functions
-            functions.push(functionDoc);
-          }
-        }
-      }
-
-      // Handle variable declarations with function expressions
-      if (node.type === 'VariableDeclaration') {
-        for (const declaration of node.declarations || []) {
-          if (foundTargetFunction) break;
-          
-          if (
-            declaration.id?.name
-            && (declaration.init?.type === 'FunctionExpression'
-              || declaration.init?.type === 'ArrowFunctionExpression')
-          ) {
-            const functionDoc = extractFunctionDoc(declaration, fileContent, declaration.id.name);
-            if (functionDoc) {
-              // If we have a target function name, only add it if it matches
-              if (targetFunctionName) {
-                if (functionDoc.name === targetFunctionName) {
-                  functions.push(functionDoc);
-                  foundTargetFunction = true;
-                  return; // Exit early since we found our target
-                }
-              } else {
-                // No target specified, add all functions
-                functions.push(functionDoc);
-              }
-            }
-          }
-        }
-      }
-
-      // Recursively walk child nodes only if we haven't found the target function yet
-      if (!foundTargetFunction) {
-        for (const child of Object.values(node)) {
-          if (foundTargetFunction) break;
-          
-          if (Array.isArray(child)) {
-            for (const item of child) {
-              if (foundTargetFunction) break;
-              walkNode(item);
-            }
-          } else if (child && typeof child === 'object') {
-            walkNode(child);
-          }
-        }
-      }
-    };
-
-    walkNode(ast);
-    return functions;
-  } catch (error) {
-    // Suppress console in production, but allow for debugging
-    if (process.env.NODE_ENV !== 'test') {
-      // eslint-disable-next-line no-console
-      console.error('Error parsing function documentation:', error);
-    }
-    return [];
-  }
-};
diff --git a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js b/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
deleted file mode 100644
index 1a5f4a9..0000000
--- a/src/DocoffFunctionDoc/_helpers/parseFunctionDoc.test.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import { parseFunctionDoc } from './parseFunctionDoc';
-
-describe('parseFunctionDoc', () => {
-  it('should parse function with JSDoc comments', () => {
-    const code = `
-/**
- * Adds two numbers
- * @param {number} a - First number
- * @param {number} b - Second number
- * @returns {number} The sum
- */
-function add(a, b) {
-  return a + b;
-}
-    `;
-
-    const result = parseFunctionDoc(code);
-
-    expect(result).toHaveLength(1);
-    expect(result[0].name).toBe('add');
-    expect(result[0].description).toBe('Adds two numbers');
-    expect(result[0].params).toHaveLength(2);
-    expect(result[0].params[0].name).toBe('a');
-    expect(result[0].params[0].type).toBe('number');
-    expect(result[0].params[0].description).toBe('First number');
-    expect(result[0].returns.type).toBe('number');
-    expect(result[0].returns.description).toBe('The sum');
-  });
-
-  it('should parse arrow function in variable declaration', () => {
-    const code = `
-/**
- * Multiplies two numbers
- * @param {number} x - First number
- * @param {number} y - Second number
- * @returns {number} The product
- */
-const multiply = (x, y) => x * y;
-    `;
-
-    const result = parseFunctionDoc(code);
-
-    expect(result).toHaveLength(1);
-    expect(result[0].name).toBe('multiply');
-    expect(result[0].description).toBe('Multiplies two numbers');
-    expect(result[0].params).toHaveLength(2);
-    expect(result[0].returns.type).toBe('number');
-  });
-
-  it('should handle optional parameters', () => {
-    const code = `
-/**
- * Greets a person
- * @param {string} name - The person's name
- * @param {string} [title] - Optional title
- * @returns {string} Greeting message
- */
-function greet(name, title) {
-  return title ? \`Hello \${title} \${name}\` : \`Hello \${name}\`;
-}
-    `;
-
-    const result = parseFunctionDoc(code);
-
-    expect(result).toHaveLength(1);
-    expect(result[0].params).toHaveLength(2);
-    expect(result[0].params[1].optional).toBe(true);
-  });
-
-  it('should return empty array for code without JSDoc', () => {
-    const code = `
-function noDoc() {
-  return 'no documentation';
-}
-    `;
-
-    const result = parseFunctionDoc(code);
-
-    expect(result).toHaveLength(0);
-  });
-
-  it('should handle invalid code gracefully', () => {
-    const code = 'invalid javascript code {{{';
-
-    const result = parseFunctionDoc(code);
-
-    expect(result).toHaveLength(0);
-  });
-
-  it('should find specific function when targetFunctionName is provided', () => {
-    const code = `
-/**
- * Adds two numbers
- * @param {number} a - First number
- * @param {number} b - Second number
- * @returns {number} The sum
- */
-function add(a, b) {
-  return a + b;
-}
-
-/**
- * Multiplies two numbers
- * @param {number} x - First number
- * @param {number} y - Second number
- * @returns {number} The product
- */
-function multiply(x, y) {
-  return x * y;
-}
-    `;
-
-    const result = parseFunctionDoc(code, 'multiply');
-
-    expect(result).toHaveLength(1);
-    expect(result[0].name).toBe('multiply');
-    expect(result[0].description).toBe('Multiplies two numbers');
-  });
-
-  it('should return empty array when target function not found', () => {
-    const code = `
-/**
- * Adds two numbers
- * @param {number} a - First number
- * @param {number} b - Second number
- * @returns {number} The sum
- */
-function add(a, b) {
-  return a + b;
-}
-    `;
-
-    const result = parseFunctionDoc(code, 'nonexistent');
-
-    expect(result).toHaveLength(0);
-  });
-});
diff --git a/src/DocoffFunctionDoc/index.js b/src/DocoffFunctionDoc/index.js
deleted file mode 100644
index b38ebf6..0000000
--- a/src/DocoffFunctionDoc/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DocoffFunctionDoc } from './DocoffFunctionDoc';
diff --git a/src/_plugins/DocoffFunctionDocPlugin.js b/src/_plugins/DocoffFunctionDocPlugin.js
new file mode 100644
index 0000000..f459323
--- /dev/null
+++ b/src/_plugins/DocoffFunctionDocPlugin.js
@@ -0,0 +1,28 @@
+const { processDocoffFunctionDoc } = require('../../scripts/processDocoffFunctionDoc');
+
+/**
+ * Webpack plugin that processes docoff-function-doc elements during build
+ */
+class DocoffFunctionDocPlugin {
+  constructor(options = {}) {
+    this.options = {
+      htmlPattern: options.htmlPattern || '**/*.html',
+      outputDir: options.outputDir || 'public',
+      sourceDir: options.sourceDir || 'public',
+      ...options,
+    };
+  }
+
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync('DocoffFunctionDocPlugin', async (compilation, callback) => {
+      try {
+        await processDocoffFunctionDoc(this.options);
+        callback();
+      } catch (error) {
+        callback(error);
+      }
+    });
+  }
+}
+
+module.exports = DocoffFunctionDocPlugin;
diff --git a/src/main.js b/src/main.js
index b1f8a45..115d4b5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,12 +2,10 @@ import { DocoffPlaceholder } from './DocoffPlaceholder';
 import { DocoffReactPreview } from './DocoffReactPreview';
 import { DocoffReactBase } from './DocoffReactBase';
 import { DocoffReactProps } from './DocoffReactProps';
-import { DocoffFunctionDoc } from './DocoffFunctionDoc';
 
 customElements.define('docoff-react-preview', DocoffReactPreview, { extends: 'textarea' });
 customElements.define('docoff-react-base', DocoffReactBase, { extends: 'textarea' });
 customElements.define('docoff-react-props', DocoffReactProps);
-customElements.define('docoff-function-doc', DocoffFunctionDoc);
 customElements.define('docoff-placeholder', DocoffPlaceholder);
 
 // For comfortable usage in Markdown any `<code>` elements with class `language-docoff-*`
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 6b87d7f..d446733 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -1,6 +1,7 @@
 const Path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
+const DocoffFunctionDocPlugin = require('./src/_plugins/DocoffFunctionDocPlugin');
 
 const MAX_OUTPUT_SIZE_KB = 1600000;
 
@@ -51,6 +52,7 @@ module.exports = (env, argv) => ({
     publicPath: '/generated/',
   },
   plugins: [
+    new DocoffFunctionDocPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(argv.mode),
       'process.env.BABEL_ENV': JSON.stringify(argv.mode),

From d273ee10b5406582234c7852aca4519544139417 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 7 Jul 2025 06:11:59 +0000
Subject: [PATCH 8/9] Address all new feedback: add types, make TSDoc a link,
 use dynamic element, add warning for unprocessed elements

Co-authored-by: mbohal <4589176+mbohal@users.noreply.github.com>
---
 package.json                               |  2 +-
 public/index.html                          |  4 +-
 scripts/processDocoffFunctionDoc.js        | 52 ++++++++++++++++++++--
 src/DocoffFunctionDoc/DocoffFunctionDoc.js | 36 +++++++++++++++
 src/DocoffFunctionDoc/index.js             |  1 +
 src/main.js                                |  2 +
 6 files changed, 90 insertions(+), 7 deletions(-)
 create mode 100644 src/DocoffFunctionDoc/DocoffFunctionDoc.js
 create mode 100644 src/DocoffFunctionDoc/index.js

diff --git a/package.json b/package.json
index f58b2d2..22ed145 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "webpack-dev-server": "^5.2.0"
   },
   "scripts": {
-    "build": "webpack --mode=production && node scripts/processDocoffFunctionDoc.js",
+    "build": "webpack --mode=production",
     "prepublishOnly": "npm run build",
     "start": "webpack serve --mode=development",
     "test": "npm run test:eslint && npm run test:jest",
diff --git a/public/index.html b/public/index.html
index 1fc19c3..94ec894 100644
--- a/public/index.html
+++ b/public/index.html
@@ -239,7 +239,7 @@ <h3>Layout</h3>
 
       <h2><code>docoff-function-doc</code></h2>
 
-      <p><code>&ltdocoff-function-doc&gt;</code> displays function documentation extracted from TSDoc comments in TypeScript files.</p>
+      <p><code>&ltdocoff-function-doc&gt;</code> displays function documentation extracted from <a href="https://tsdoc.org/" target="_blank">TSDoc</a> comments in TypeScript files.</p>
 
       <h3>Usage</h3>
 
@@ -252,7 +252,7 @@ <h3>Example</h3>
 
       <p>Displaying documentation for example functions:</p>
 
-      <dl><dt><strong>formatName</strong></dt><dd>Formats a user's full name with proper capitalization</dd><dt>Parameter: <code>firstName</code></dt><dd>The user's first name</dd><dt>Parameter: <code>lastName</code></dt><dd>The user's last name</dd><dt>Parameter: <code>includeTitle</code></dt><dd>Whether to include a title prefix</dd><dt>Returns:</dt><dd>The formatted full name</dd></dl>
+      <dl><dt><strong>formatName</strong></dt><dd>Formats a user's full name with proper capitalization</dd><dt>Parameter: <code>firstName</code>: <span style="color: #0066cc;">string</span></dt><dd>The user's first name</dd><dt>Parameter: <code>lastName</code>: <span style="color: #0066cc;">string</span></dt><dd>The user's last name</dd><dt>Parameter: <code>includeTitle</code>: <span style="color: #0066cc;">boolean</span> (optional)</dt><dd>Whether to include a title prefix</dd><dt>Returns: <span style="color: #009900;">string</span></dt><dd>The formatted full name</dd></dl>
 
     </div>
 
diff --git a/scripts/processDocoffFunctionDoc.js b/scripts/processDocoffFunctionDoc.js
index 824c7af..f060ae5 100644
--- a/scripts/processDocoffFunctionDoc.js
+++ b/scripts/processDocoffFunctionDoc.js
@@ -98,6 +98,9 @@ async function generateFunctionDoc(filePath, functionName, baseDir) {
     throw new Error(`No TSDoc comment found for function '${functionName}'`);
   }
 
+  // Extract type information from the function
+  const typeInfo = extractTypeInformation(functionNode);
+
   // Parse TSDoc comment
   const parser = new TSDocParser();
   const parserContext = parser.parseString(tsdocComment);
@@ -107,7 +110,7 @@ async function generateFunctionDoc(filePath, functionName, baseDir) {
   }
 
   // Generate HTML from parsed TSDoc
-  return generateHTMLFromTSDoc(functionName, parserContext.docComment);
+  return generateHTMLFromTSDoc(functionName, parserContext.docComment, typeInfo);
 }
 
 function findFunctionNode(sourceFile, functionName) {
@@ -155,7 +158,41 @@ function extractTSDocComment(sourceFile, functionNode) {
   return null;
 }
 
-function generateHTMLFromTSDoc(functionName, docComment) {
+function extractTypeInformation(functionNode) {
+  const typeInfo = {
+    parameters: [],
+    returnType: null
+  };
+
+  // Extract parameter types
+  if (functionNode.parameters) {
+    for (const param of functionNode.parameters) {
+      const paramName = param.name.text;
+      let paramType = 'any';
+      
+      if (param.type) {
+        paramType = param.type.getText();
+      }
+      
+      const isOptional = param.questionToken !== undefined || param.initializer !== undefined;
+      
+      typeInfo.parameters.push({
+        name: paramName,
+        type: paramType,
+        optional: isOptional
+      });
+    }
+  }
+
+  // Extract return type
+  if (functionNode.type) {
+    typeInfo.returnType = functionNode.type.getText();
+  }
+
+  return typeInfo;
+}
+
+function generateHTMLFromTSDoc(functionName, docComment, typeInfo) {
   const summary = docComment.summarySection;
   const params = docComment.params;
   const returnsBlock = docComment.returnsBlock;
@@ -175,7 +212,13 @@ function generateHTMLFromTSDoc(functionName, docComment) {
     for (const param of params.blocks) {
       const paramName = param.parameterName;
       const paramDescription = param.content ? extractTextFromNodes(param.content.nodes) : '';
-      html += `<dt>Parameter: <code>${paramName}</code></dt>`;
+      
+      // Find type information for this parameter
+      const typeInfoParam = typeInfo.parameters.find(p => p.name === paramName);
+      const typeDisplay = typeInfoParam ? `<span style="color: #0066cc;">${typeInfoParam.type}</span>` : '';
+      const optionalDisplay = typeInfoParam && typeInfoParam.optional ? ' (optional)' : '';
+      
+      html += `<dt>Parameter: <code>${paramName}</code>${typeDisplay ? `: ${typeDisplay}` : ''}${optionalDisplay}</dt>`;
       html += `<dd>${paramDescription}</dd>`;
     }
   }
@@ -183,7 +226,8 @@ function generateHTMLFromTSDoc(functionName, docComment) {
   // Returns
   if (returnsBlock && returnsBlock.content) {
     const returnDescription = extractTextFromNodes(returnsBlock.content.nodes);
-    html += `<dt>Returns:</dt>`;
+    const returnTypeDisplay = typeInfo.returnType ? `<span style="color: #009900;">${typeInfo.returnType}</span>` : '';
+    html += `<dt>Returns${returnTypeDisplay ? `: ${returnTypeDisplay}` : ''}</dt>`;
     html += `<dd>${returnDescription}</dd>`;
   }
 
diff --git a/src/DocoffFunctionDoc/DocoffFunctionDoc.js b/src/DocoffFunctionDoc/DocoffFunctionDoc.js
new file mode 100644
index 0000000..c79a87f
--- /dev/null
+++ b/src/DocoffFunctionDoc/DocoffFunctionDoc.js
@@ -0,0 +1,36 @@
+/**
+ * Custom element for displaying function documentation
+ * Shows a warning when not processed by the webpack plugin
+ */
+export class DocoffFunctionDoc extends HTMLElement {
+  static get observedAttributes() {
+    return ['src'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get src() {
+    return this.getAttribute('src');
+  }
+
+  render() {
+    if (!this.src) {
+      this.innerHTML = '<div style="color: red;">Error: src attribute is required</div>';
+      return;
+    }
+
+    // If this element is still present, it means the webpack plugin didn't process it
+    this.innerHTML = `
+      <div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 10px; border-radius: 4px; color: #856404;">
+        <strong>Warning:</strong> This file needs to be processed through the build system first.
+        <br>Function documentation for <code>${this.src}</code> will be generated during build.
+      </div>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/src/DocoffFunctionDoc/index.js b/src/DocoffFunctionDoc/index.js
new file mode 100644
index 0000000..c51e44b
--- /dev/null
+++ b/src/DocoffFunctionDoc/index.js
@@ -0,0 +1 @@
+export { DocoffFunctionDoc } from './DocoffFunctionDoc';
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 115d4b5..438d72f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,11 +2,13 @@ import { DocoffPlaceholder } from './DocoffPlaceholder';
 import { DocoffReactPreview } from './DocoffReactPreview';
 import { DocoffReactBase } from './DocoffReactBase';
 import { DocoffReactProps } from './DocoffReactProps';
+import { DocoffFunctionDoc } from './DocoffFunctionDoc';
 
 customElements.define('docoff-react-preview', DocoffReactPreview, { extends: 'textarea' });
 customElements.define('docoff-react-base', DocoffReactBase, { extends: 'textarea' });
 customElements.define('docoff-react-props', DocoffReactProps);
 customElements.define('docoff-placeholder', DocoffPlaceholder);
+customElements.define('docoff-function-doc', DocoffFunctionDoc);
 
 // For comfortable usage in Markdown any `<code>` elements with class `language-docoff-*`
 // get replaced by the respective custom elements

From 25335ebf7658f26c85fbf20294b17ab9d5dcd674 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 8 Jul 2025 05:50:18 +0000
Subject: [PATCH 9/9] Rename index.html to index.template.html and implement
 build-time processing

Co-authored-by: mbohal <4589176+mbohal@users.noreply.github.com>
---
 .gitignore                          |   1 +
 public/index.template.html          | 260 ++++++++++++++++++++++++++++
 scripts/processDocoffFunctionDoc.js |   6 +-
 webpack.config.babel.js             |   4 +-
 4 files changed, 268 insertions(+), 3 deletions(-)
 create mode 100644 public/index.template.html

diff --git a/.gitignore b/.gitignore
index aee3beb..a4cb0e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 /node_modules
 /public/generated
+/public/index.html
diff --git a/public/index.template.html b/public/index.template.html
new file mode 100644
index 0000000..b5997c7
--- /dev/null
+++ b/public/index.template.html
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Docoff</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+      crossorigin="anonymous"
+    />
+    <link type="text/css" rel="stylesheet" href="/main.css" />
+
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script crossorigin src="https://unpkg.com/prop-types@15/prop-types.min.js"></script>
+    <script src="/generated/bundle.js"></script>
+    <style>
+      h2 {
+        padding-top: 2em;
+      }
+      h3, h4 {
+        padding-top: 1em;
+      }
+      th, td {
+        border: 1px solid black;
+        padding: 8px;
+      }
+      thead th {
+        width: 25%;
+      }
+    </style>
+  </head>
+
+  <body class="py-5">
+    <div class="container">
+
+      <h1>Docoff Demo</h1>
+
+      <p>Styles used in this demo:</p>
+      <ul>
+        <li><code>/shadow.css</code> Sets all text inside preview to be red and monospaced.</li>
+        <li><code>/main.css</code> Sets CSS custom properties including location of the <code>/shadow.css</code></li>
+      </ul>
+
+      <p>Feel free to inspect them in dev tools!</p>
+
+      <h2><code>docoff-react-base</code></h2>
+
+      <p><code>&ltdocoff-react-base&gt;</code> allows to define code that is common for all <code>docoff-react-preview</code> elements on the
+        given page. This is handy for defining code fragments susch as constants or placeholder React components that
+        can be used further on.</p>
+
+      <h3>Usage</h3>
+
+      <h4>Pure HTML</h4>
+      <pre><code>
+&lt;textarea is=&quot;docoff-react-base&quot;&gt;
+// Your JS code here
+&lt;/textarea&gt;
+      </code></pre>
+
+      <h4>Markdown</h4>
+      <pre><code>
+```docoff-react-base
+// Your JS code here
+```
+      </code></pre>
+
+      <h3>Example</h3>
+
+      <textarea is="docoff-react-base">
+const MyHello = ({name}) => (
+  <strong>Hello, {name}</strong>
+);
+
+const MyHelloTS: React.FC<{ name: string }> = ({name}) => (
+  <strong>Hello, {name} from TS stack.</strong>
+);
+      </textarea>
+
+      <h2><code>docoff-react-preview</code></h2>
+
+      <p><code>&ltdocoff-react-preview&gt;</code> renders a live preview of JSX code.</p>
+
+      <h3>Usage</h3>
+
+      <h4>Pure HTML</h4>
+      <pre><code>
+&lt;textarea is=&quot;docoff-react-preview&quot; css=&quot;/shadow.css&quot;&gt;
+  &lt;YourCustomJSX /&gt;
+&lt;/textarea&gt;
+      </code></pre>
+
+      <h4>Markdown</h4>
+      <pre><code>
+```docoff-react-base
+// Your JS code here
+```
+      </code></pre>
+
+      <h3>Example</h3>
+
+      <h4>Single Component</h4>
+      <textarea is="docoff-react-preview">
+<MyHello name="Igor" />
+      </textarea>
+
+      <h4>Typescript</h4>
+      <textarea is="docoff-react-preview">
+React.createElement(() => {
+  const name: string = 'Olina';
+
+  return (
+    <MyHelloTS name="Olina" />
+  );
+});
+      </textarea>
+
+      <h4>Multiple Components</h4>
+      <textarea is="docoff-react-preview">
+<>
+  <MyHello name="Igor" />
+  <br />
+  <MyHello name="Mia" />
+</>
+      </textarea>
+
+      <h4>With Hooks</h4>
+
+      <textarea is="docoff-react-preview">
+React.createElement(() => {
+  const [name, setName] = React.useState('Igor');
+  const MyButton = ({
+    label,
+    onClick,
+  }) => (
+    <button onClick={onClick}>{label}</button>
+  );
+
+  return (
+    <>
+      <MyHello name={name} />
+      <br />
+      <MyButton
+        label={'Swap name'}
+        onClick={() => setName(name === 'Igor' ? 'Mia' : 'Igor')}
+      />
+    </>
+  );
+});
+      </textarea>
+
+
+
+      <h2><code>docoff-react-props</code></h2>
+
+      <p><code>&ltdocoff-react-props&gt;</code> renders the component prop definition table.</p>
+      <p>For JavaScript, the props can be loaded from multiple files. This allows for writing more DRY code when several components share same props.</p>
+      <p>There are simple rules for loading props from multiple files:</p>
+      <ul>
+        <li>Files get processed sequentially
+        <li>The result of merging all previous files is used as base when merging in the current file</li>
+        <li>When a prop is not defined in the current file, it will not be present in the merge result</li>
+        <li>When a prop is defined in the current file, with docblock description of the prop type definition, the definition from current file will be used</li>
+        <li>When a prop default value is defined in the current file, with no docblock description of the prop type definition, the definition from base will be used, but with the default value from the current file</li>
+        <li>When a prop is defined in the current file, with no docblock description of the prop type definition, the definition from base will be used including default value</li>
+      </ul>
+
+      <h3>Examples</h3>
+      <p>Using <code>docoff-react-preview</code> :)</p>
+
+      <h4>Typescript</h4>
+      <code><pre>node_modules/.bin/react-docgen public/exampleTS/Greeting.tsx > Greeting.props.json</pre></code>
+
+      <textarea is="docoff-react-preview">
+<docoff-react-props src="/exampleTS/Greeting.props.json"></docoff-react-props>
+      </textarea>
+
+      <h4>Relative URL with Overloading</h4>
+
+      <p>⚠️ Does not work with TypeScript</p>
+
+      <textarea is="docoff-react-preview">
+<docoff-react-props src="
+    /exampleJS/common.props.js
+    |/exampleJS/Greeting.jsx
+"></docoff-react-props>
+      </textarea>
+
+      <h4>Absolute URL</h4>
+
+      <textarea is="docoff-react-preview">
+<docoff-react-props
+    src="https://raw.githubusercontent.com/react-ui-org/react-ui/master/src/components/Alert/Alert.jsx"
+></docoff-react-props>
+      </textarea>
+
+
+
+      <h2><code>docoff-placeholder</code></h2>
+
+      <code>&ltdocoff-placeholder&gt;</code> renders a placeholder that can be used in code examples.
+
+      <textarea is="docoff-react-preview">
+<docoff-placeholder bordered></docoff-placeholder>
+      </textarea>
+
+      <h3>Children</h3>
+      <p>Children can be inserted</p>
+      <textarea is="docoff-react-preview">
+<docoff-placeholder bordered>Hello</docoff-placeholder>
+      </textarea>
+
+      <h3>Color</h3>
+      <p>It can be rendered dark</p>
+      <textarea is="docoff-react-preview">
+<docoff-placeholder dark></docoff-placeholder>
+      </textarea>
+
+      <h3>Size</h3>
+      <p>Size can be set using any valid css units</p>
+      <textarea is="docoff-react-preview">
+<docoff-placeholder width="50px" height="50px" bordered></docoff-placeholder>
+      </textarea>
+
+      <h3>Layout</h3>
+      <p>It can be rendered inline</p>
+      <textarea is="docoff-react-preview">
+<>
+  Inline
+  {' '}
+  <docoff-placeholder inline bordered></docoff-placeholder>
+</>
+  </textarea>
+
+      <h2><code>docoff-function-doc</code></h2>
+
+      <p><code>&ltdocoff-function-doc&gt;</code> displays function documentation extracted from <a href="https://tsdoc.org/" target="_blank">TSDoc</a> comments in TypeScript files.</p>
+
+      <h3>Usage</h3>
+
+      <h4>Pure HTML</h4>
+      <pre><code>
+&lt;docoff-function-doc src="/path/to/your/functions.ts:functionName"&gt;&lt;/docoff-function-doc&gt;
+      </code></pre>
+
+      <h3>Example</h3>
+
+      <p>Displaying documentation for example functions:</p>
+
+      <docoff-function-doc src="/exampleTS/functions.ts:formatName"></docoff-function-doc>
+
+    </div>
+
+  </body>
+</html>
diff --git a/scripts/processDocoffFunctionDoc.js b/scripts/processDocoffFunctionDoc.js
index f060ae5..4349c0e 100644
--- a/scripts/processDocoffFunctionDoc.js
+++ b/scripts/processDocoffFunctionDoc.js
@@ -51,8 +51,10 @@ async function processDocoffFunctionDoc(options = {}) {
     }
 
     if (hasChanges) {
-      // Calculate output path
-      const outputPath = path.resolve(outputDir, path.relative(sourceDir, htmlFile));
+      // Calculate output path - remove .template from filename
+      let relativePath = path.relative(sourceDir, htmlFile);
+      relativePath = relativePath.replace('.template.html', '.html');
+      const outputPath = path.resolve(outputDir, relativePath);
       
       // Ensure output directory exists
       fs.mkdirSync(path.dirname(outputPath), { recursive: true });
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index d446733..20bbb59 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -52,7 +52,9 @@ module.exports = (env, argv) => ({
     publicPath: '/generated/',
   },
   plugins: [
-    new DocoffFunctionDocPlugin(),
+    new DocoffFunctionDocPlugin({
+      htmlPattern: '**/*.template.html'
+    }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(argv.mode),
       'process.env.BABEL_ENV': JSON.stringify(argv.mode),