update sidebar titles, signature boxes

Author: avivkeller

src/generators/jsx-ast/utils/buildBarProps.mjs

@@ -1,6 +1,7 @@
 import readingTime from 'reading-time';
 import { visit } from 'unist-util-visit';
 
+import { getFullName } from './createSignatureElements.mjs';
 import { DOC_API_BLOB_EDIT_BASE_URL } from '../../../constants.mjs';
 import {
   getCompatibleVersions,
@@ -27,14 +28,25 @@ export const buildMetaBarProps = (head, entries) => {
     .filter(
       entry => entry.heading?.data?.text && entry.heading?.data?.depth < 3
     )
-    .map(entry => ({
-      depth: entry.heading.depth,
-      value: entry.heading.data.text
-        .replace(/`/g, '')
-        .replace(/^[^:]+:/, '')
-        .trim(),
-      slug: entry.heading.data.slug,
-    }));
+    .map(entry => {
+      let heading = getFullName(
+        entry.heading.data,
+        entry.heading.data.name
+          .replace(/`/g, '')
+          .replace(/^[^:]+:/, '')
+          .trim()
+      );
+
+      if (entry.heading.data.type === 'ctor') {
+        heading += ' Constructor';
+      }
+
+      return {
+        depth: entry.heading.depth,
+        value: heading,
+        slug: entry.heading.data.slug,
+      };
+    });
 
   return {
     headings,

src/generators/jsx-ast/utils/buildContent.mjs

@@ -88,7 +88,7 @@ const createSourceLink = sourceLink =>
 const createHeadingElement = (content, changeElement) => {
   const { type, depth, slug } = content.data;
 
-  const headingContent =
+  let headingContent =
     getFullName(content.data, false) ||
     sliceMarkdown(
       content,
@@ -97,6 +97,10 @@ const createHeadingElement = (content, changeElement) => {
       { trimWhitespace: true }
     ).children;
 
+  if (type === 'ctor') {
+    headingContent += ' Constructor';
+  }
+
   const headingWrapper = createElement('div', [
     createElement(`h${depth}`, [
       createElement(`a#${slug}`, { href: `#${slug}` }, headingContent),

src/generators/jsx-ast/utils/createSignatureElements.mjs

@@ -132,16 +132,17 @@ export const createPropertyTable = (node, withHeading = true) => {
  * Generates all valid function signatures based on optional parameters
  * @param {string} functionName - Name of the function
  * @param {import('../../legacy-json/types.d.ts').MethodSignature} signature - Signature object
+ * @param {string} prefix - `'new '` or `''`
  */
-export const generateSignatures = (functionName, signature) => {
+export const generateSignatures = (functionName, signature, prefix = '') => {
   const { params, return: returnType } = signature;
   const returnStr = returnType ? `: ${returnType.type}` : '';
 
   // Handle case with no optional parameters
   const optionalParams = params.filter(param => param.optional);
   if (!optionalParams.length) {
     const paramsStr = params.map(param => param.name).join(', ');
-    return [`${functionName}(${paramsStr})${returnStr}`];
+    return [`${prefix}${functionName}(${paramsStr})${returnStr}`];
   }
 
   // Find indexes of optional parameters
@@ -175,7 +176,7 @@ export const generateSignatures = (functionName, signature) => {
       })
       .join(', ');
 
-    signatures.push(`${functionName}(${paramsStr})${returnStr}`);
+    signatures.push(`${prefix}${functionName}(${paramsStr})${returnStr}`);
   }
 
   return signatures;
@@ -185,11 +186,13 @@ export const generateSignatures = (functionName, signature) => {
  * Creates a code block with function signatures
  * @param {string} functionName - Name of the function
  * @param {import('../../legacy-json/types.d.ts').MethodSignature} signature - Signature object
+ * @param {string} prefix - `'new '` or `''`
  */
-export const createSignatureCodeBlock = (functionName, signature) => {
-  const signatures = generateSignatures(functionName, signature);
+export const createSignatureCodeBlock = (functionName, signature, prefix) => {
+  const signatures = generateSignatures(functionName, signature, prefix);
   const codeContent = signatures.join('\n');
-  return highlightToHast(codeContent, 'typescript');
+  const highlighted = highlightToHast(codeContent, 'typescript');
+  return createElement('div', { class: 'signature' }, [highlighted]);
 };
 
 /**
@@ -226,5 +229,13 @@ export default ({ children }, { data }, idx) => {
   const signature = parseSignature(data.text, params);
   const displayName = getFullName(data);
 
-  children.splice(idx, 0, createSignatureCodeBlock(displayName, signature));
+  children.splice(
+    idx,
+    0,
+    createSignatureCodeBlock(
+      displayName,
+      signature,
+      data.type === 'ctor' ? 'new ' : ''
+    )
+  );
 };

src/generators/web/build/bundle.mjs

@@ -21,7 +21,7 @@ const createConfig = (code, { server, debug }) => ({
     loader: 'jsx',
   },
   bundle: true,
-  minify: true,
+  minify: !debug,
   format: 'iife',
   platform: server ? 'node' : 'browser',
   jsx: 'automatic',

src/generators/web/ui/index.css

@@ -14,3 +14,12 @@ code {
 a {
   padding-right: unset;
 }
+
+/* No line numbers on signatures */
+.signature .line::after {
+  all: unset !important;
+}
+
+.signature .line {
+  padding-left: unset !important;
+}