Add DocoffFunctionDoc component for JavaScript/TypeScript function documentation

[Copilot]

Adds a new custom HTML element <docoff-function-doc> that automatically generates documentation for JavaScript and TypeScript functions based on their JSDoc comments.

Features

• Custom HTML Element: <docoff-function-doc href="/path/to/file.js"></docoff-function-doc>
• JSDoc Parsing: Extracts function documentation from JavaScript and TypeScript files using @babel/parser and doctrine
• Structured Output: Generates HTML description lists (<dl>) with function parameters and return values
• Type Information: Displays parameter types with color-coded styling (blue for parameters, green for return types)
• Optional Parameters: Clearly marks optional parameters with "(optional)" indicator
• Error Handling: Graceful handling of fetch errors, parse errors, and files without documented functions
• Comprehensive Tests: Full test coverage for parsing logic and table generation

Usage

<docoff-function-doc href="/path/to/your/functions.js"></docoff-function-doc>

The component automatically parses JSDoc comments and displays:

• Function names as headings
• Function descriptions
• Parameter names, types, and descriptions
• Return value types and descriptions
• Optional parameter indicators

Example

Given a JavaScript file with JSDoc comments:

/**
 * 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;
}

The component renders structured documentation showing the function name, description, parameters with types, and return value.

Implementation

• Follows the same patterns as existing components (DocoffReactProps)
• Uses @babel/parser for JavaScript/TypeScript AST parsing
• Uses doctrine for JSDoc comment parsing
• Includes comprehensive error handling and fallbacks
• Added to main.js component registration
• Includes demo in public/index.html


Fixes #34.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[mbohal]

I would like to only support TS, not JS.

Since we only need TS support, we can switch from extracting the JSDoc manually to using https://www.npmjs.com/package/@microsoft/tsdoc . Because this dependency is too heavy for in browser parsing, we need to add a build step to replace any occurrence of docoff-function-doc with the output HTML definition list.

The build step should be implemented as a isolated function that is called by a webpack plugin.

[Copilot]

Implemented TypeScript-only support with @microsoft/tsdoc and build-time processing. The heavy parsing is now done at build time using a webpack plugin and standalone script, removing the runtime overhead. The component now only supports the file/path.ts:functionName format and uses TSDoc comments instead of JSDoc. (555ccc7)

[mbohal]

The types are not shown in the output HTML

[Copilot]

Fixed! The types are now extracted from the TypeScript AST and displayed in the HTML output with color-coded styling (blue for parameters, green for return types). The type extraction includes proper handling of optional parameters. (d273ee1)

[mbohal]

This change should not be here. The <dl> HTML should be generated dynamically by the webpack plugin.

[Copilot]

Replaced the static <dl> HTML with a dynamic <docoff-function-doc src="/exampleTS/functions.ts:formatName"></docoff-function-doc> element that gets processed by the webpack plugin during build. (d273ee1)

[mbohal]

Lets keep this custom HTML element and if it is not replaced by the Webpack plugin it should show some warning that the file needs to be run through the build process first.

[Copilot]

Kept the custom HTML element and registered it in main.js. When the element is not processed by the webpack plugin, it now shows a warning message: "This file needs to be processed through the build system first." (d273ee1)

[mbohal]

This should not be needed as the ransformation ought to be done by the Webpack plugin.

[Copilot]

Removed the separate build script step from package.json. The transformation is now handled entirely by the webpack plugin during the normal build process. (d273ee1)

[mbohal]

The file index.html should be renamed to index.template.html. It is not meant to be served as is, but to be traasformed by the webpack DocoffFunctionDocPlugin plugin.

This plugin looks for the <docoff-function-doc> tag and replaces it with the <dl>. Hower now the <dl> is hardcoded here and that is wrong.

So in summery the <dl> on this line should not be in git as it must be dynamically generated at build time.

[Copilot]

Implemented as requested! The file has been renamed to index.template.html and now contains the dynamic <docoff-function-doc> element instead of hardcoded <dl> content. The webpack plugin processes .template.html files at build time and outputs the final .html files with the generated documentation. The generated index.html is now excluded from git via .gitignore. (25335eb)

[mbohal]

I get the error bundle.js:9614 Uncaught TypeError: execOptions.factory.call is not a function in browser console as soon as I view the generated index.html page.

Please fix it.