Fix documentation not being correctly generated for modules-lib

Author: leeyi45

lib/buildtools/src/build/__tests__/manifest.test.ts

@@ -10,26 +10,31 @@ describe('Test bundle manifest schema validation', () => {
 
   test('Valid Schema', async () => {
     mockedReadFile.mockResolvedValueOnce('{ "tabs": [] }');
+    mockedReadFile.mockResolvedValueOnce('{ version: "1.0.0" }');
 
     await expect(getBundleManifest('yes'))
       .resolves
       .toMatchObject({
-        tabs: []
+        tabs: [],
+        version: '1.0.0'
       });
   });
 
   test('Valid Schema with tabs without verification', async () => {
     mockedReadFile.mockResolvedValueOnce('{ "tabs": ["tab0", "tab1"] }');
+    mockedReadFile.mockResolvedValueOnce('{ version: "1.0.0" }');
 
     await expect(getBundleManifest('yes', false))
       .resolves
       .toMatchObject({
-        tabs: ['tab0', 'tab1']
+        tabs: ['tab0', 'tab1'],
+        version: '1.0.0'
       });
   });
 
   test('Valid schema with tabs and verification', async () => {
     mockedReadFile.mockResolvedValueOnce('{ "tabs": ["tab0"] }');
+    mockedReadFile.mockResolvedValueOnce('{}');
 
     await expect(getBundleManifest('yes', true))
       .resolves
@@ -40,13 +45,15 @@ describe('Test bundle manifest schema validation', () => {
 
   test('Valid schema with invalid tab verification', async () => {
     mockedReadFile.mockResolvedValueOnce('{ "tabs": ["tab2"] }');
+    mockedReadFile.mockResolvedValueOnce('{}');
 
     await expect(getBundleManifest('yes', true))
       .rejects.toThrow();
   });
 
   test('Schema with additional properties', async () => {
     mockedReadFile.mockResolvedValueOnce('{ "tabs": ["tab0", "tab1"], "unknown": true }');
+    mockedReadFile.mockResolvedValueOnce('{}');
 
     await expect(getBundleManifest('yes'))
       .rejects
@@ -55,6 +62,7 @@ describe('Test bundle manifest schema validation', () => {
 
   test('Schema with invalid requires', async () => {
     mockedReadFile.mockResolvedValueOnce('{ "tabs": ["tab0", "tab1"], "requires": "yes" }');
+    mockedReadFile.mockResolvedValueOnce('{}');
 
     await expect(getBundleManifest('yes'))
       .rejects

lib/buildtools/src/build/manifest.ts

@@ -11,11 +11,22 @@ import manifestSchema from './modules/manifest.schema.json' with { type: 'json'
 /**
  * Checks that the given bundle manifest was correctly specified
  */
-export async function getBundleManifest(manifestFile: string, tabCheck?: boolean): Promise<BundleManifest | undefined> {
+export async function getBundleManifest(directory: string, tabCheck?: boolean): Promise<BundleManifest | undefined> {
   let manifestStr: string;
 
   try {
-    manifestStr = await fs.readFile(manifestFile, 'utf-8');
+    manifestStr = await fs.readFile(`${directory}/manifest.json`, 'utf-8');
+  } catch (error) {
+    if (isNodeError(error) && error.code === 'ENOENT') {
+      return undefined;
+    }
+    throw error;
+  }
+
+  let versionStr: string | undefined;
+  try {
+    const rawPackageJson = await fs.readFile(`${directory}/package.json`, 'utf-8')
+    ;({ version: versionStr } = JSON.parse(rawPackageJson));
   } catch (error) {
     if (isNodeError(error) && error.code === 'ENOENT') {
       return undefined;
@@ -26,9 +37,10 @@ export async function getBundleManifest(manifestFile: string, tabCheck?: boolean
   const rawManifest = JSON.parse(manifestStr) as BundleManifest;
   validate(rawManifest, manifestSchema, { throwError: true });
 
-  const manifest = {
+  const manifest: BundleManifest = {
     ...rawManifest,
     tabs: !rawManifest.tabs ? rawManifest.tabs : rawManifest.tabs.map(each => each.trim()),
+    version: versionStr,
   };
 
   // Make sure that all the tabs specified exist
@@ -62,7 +74,7 @@ export async function getBundleManifests(bundlesDir: string, tabCheck?: boolean)
     const fullPath = pathlib.join(bundlesDir, fileName);
     const stats = await fs.stat(fullPath);
     if (stats.isDirectory()) {
-      const manifest = await getBundleManifest(`${fullPath}/manifest.json`, tabCheck);
+      const manifest = await getBundleManifest(fullPath, tabCheck);
       if (manifest === undefined) return undefined;
       return [fileName, manifest] as [string, BundleManifest];
     }
@@ -88,7 +100,7 @@ export async function resolveSingleBundle(bundleDir: string): Promise<ResolvedBu
   const stats = await fs.stat(fullyResolved);
   if (!stats.isDirectory()) return undefined;
 
-  const manifest = await getBundleManifest(`${fullyResolved}/manifest.json`);
+  const manifest = await getBundleManifest(fullyResolved);
   if (!manifest) return undefined;
 
   try {

lib/modules-lib/package.json

@@ -7,6 +7,9 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "eslint": "^9.29.0",
+    "typedoc": "^0.28.4",
+    "typedoc-plugin-markdown": "^4.7.0",
+    "typedoc-plugin-rename-defaults": "^0.7.3",
     "typescript": "^5.8.2",
     "vitest": "^3.2.3"
   },

lib/modules-lib/src/tabs/AnimationCanvas.tsx

@@ -8,7 +8,7 @@ import PlayButton from './PlayButton';
 import WebGLCanvas from './WebglCanvas';
 import { BP_TAB_BUTTON_MARGIN, BP_TEXT_MARGIN, CANVAS_MAX_WIDTH } from './css_constants';
 
-type AnimCanvasProps = {
+export type AnimCanvasProps = {
   animation: glAnimation;
 };
 
@@ -28,12 +28,7 @@ type AnimCanvasState = {
   errored?: any;
 };
 
-/**
- * Canvas to display glAnimations.
- *
- * Uses WebGLCanvas internally.
- */
-export default class AnimationCanvas extends React.Component<
+class AnimationCanvasInternal extends React.Component<
   AnimCanvasProps,
   AnimCanvasState
 > {
@@ -345,3 +340,12 @@ export default class AnimationCanvas extends React.Component<
     </div>;
   }
 }
+
+/**
+ * React Component for displaying {@link glAnimation|glAnimations}.
+ *
+ * Uses {@link WebGLCanvas} internally.
+ */
+export default function AnimationCanvas(props: AnimCanvasProps) {
+  return <AnimationCanvasInternal {...props} />;
+}

lib/modules-lib/src/tabs/AutoLoopSwitch.tsx

@@ -7,19 +7,17 @@ export type AutoLoopSwitchProps = Omit<SwitchProps, 'checked' | 'style'> & {
 };
 
 /* [Main] */
-export default class AutoLoopSwitch extends React.Component<AutoLoopSwitchProps> {
-  render() {
-    return <Switch
-      style={{
+export default function AutoLoopSwitch(props: AutoLoopSwitchProps) {
+  return <Switch
+    style={{
       // Remove default bottom margin
-        marginBottom: '0px',
+      marginBottom: '0px',
 
-        // Prevent label from wrapping at every letter when width is small
-        whiteSpace: 'nowrap'
-      }}
-      label="Auto Loop"
-      checked={ this.props.isAutoLooping }
-      {...this.props}
-    />;
-  }
+      // Prevent label from wrapping at every letter when width is small
+      whiteSpace: 'nowrap'
+    }}
+    label="Auto Loop"
+    checked={props.isAutoLooping}
+    {...props}
+  />;
 }

lib/modules-lib/src/tabs/ButtonComponent.tsx

@@ -9,23 +9,22 @@ const defaultOptions = {
   minimal: true
 };
 
-type Props = {
+export type ButtonComponentProps = {
   onClick?: MouseEventHandler<HTMLElement>,
   disabled?: boolean,
   children?: ReactNode,
 };
 
-const ButtonComponent = (props: Props) => {
+/**
+ * Button Component that retains interactability even when disabled. Refer to
+ * {@link https://blueprintjs.com/docs/#core/components/buttons.anchorbutton|this} for more information
+ */
+export default function ButtonComponent(props: ButtonComponentProps) {
   const buttonProps = {
     ...defaultOptions,
     ...props
   };
   return props.disabled
-    ? (
-      <AnchorButton {...buttonProps} />
-    )
-    : (
-      <Button {...buttonProps} />
-    );
+    ? <AnchorButton {...buttonProps} />
+    : <Button {...buttonProps} />;
 };
-export default ButtonComponent;

lib/modules-lib/src/tabs/ModalDiv.tsx

@@ -39,14 +39,14 @@ const backdropStyle = {
   filter: 'blur(10px)'
 } as CSSProperties;
 
-interface ModalProp {
+export interface ModalProps {
   open: boolean
   height: string
   width: string
   handleClose: MouseEventHandler
   children: ReactElement
 }
-const Modal = ({ open, height, width, children, handleClose }: ModalProp) => (
+const Modal = ({ open, height, width, children, handleClose }: ModalProps) => (
   <>
     {open && (
       <>

lib/modules-lib/src/tabs/MultItemDisplay.tsx

@@ -3,11 +3,14 @@ import { IconNames } from '@blueprintjs/icons';
 import { clamp } from 'lodash';
 import React from 'react';
 
-type MultiItemDisplayProps = {
+export type MultiItemDisplayProps = {
   elements: React.JSX.Element[]
 };
 
-const MultiItemDisplay = ({ elements }: MultiItemDisplayProps) => {
+/**
+ * React Component for displaying multiple items
+ */
+const MultiItemDisplay = (props: MultiItemDisplayProps) => {
   // The actual index of the currently selected element
   const [currentStep, setCurrentStep] = React.useState(0);
 
@@ -16,7 +19,7 @@ const MultiItemDisplay = ({ elements }: MultiItemDisplayProps) => {
   const [stepEditorFocused, setStepEditorFocused] = React.useState(false);
 
   const resetStepEditor = () => setStepEditorValue((currentStep + 1).toString());
-  const elementsDigitCount = Math.floor(Math.log10(Math.max(1, elements.length))) + 1;
+  const elementsDigitCount = Math.floor(Math.log10(Math.max(1, props.elements.length))) + 1;
 
   return (
     <div
@@ -68,7 +71,7 @@ const MultiItemDisplay = ({ elements }: MultiItemDisplayProps) => {
             <div style={{ width: `${stepEditorFocused ? elementsDigitCount + 2 : elementsDigitCount}ch` }}>
               <EditableText
                 value={stepEditorValue}
-                disabled={elements.length === 1}
+                disabled={props.elements.length === 1}
                 placeholder={undefined}
                 type="number"
                 onChange={(newValue) => {
@@ -82,7 +85,7 @@ const MultiItemDisplay = ({ elements }: MultiItemDisplayProps) => {
                 onConfirm={(value) => {
                   if (value) {
                     const newStep = parseInt(value);
-                    const clampedStep = clamp(newStep, 1, elements.length);
+                    const clampedStep = clamp(newStep, 1, props.elements.length);
                     setCurrentStep(clampedStep - 1);
                     setStepEditorFocused(false);
                     setStepEditorValue(clampedStep.toString());
@@ -103,7 +106,7 @@ const MultiItemDisplay = ({ elements }: MultiItemDisplayProps) => {
                 onEdit={() => setStepEditorFocused(true)}
               />
             </div>
-            {stepEditorFocused && <>&nbsp;</>}/{elements.length}
+            {stepEditorFocused && <>&nbsp;</>}/{props.elements.length}
           </div>
         </h3>
         <Button
@@ -118,7 +121,7 @@ const MultiItemDisplay = ({ elements }: MultiItemDisplayProps) => {
             setCurrentStep(currentStep + 1);
             setStepEditorValue((currentStep + 2).toString());
           }}
-          disabled={currentStep === elements.length - 1}
+          disabled={currentStep === props.elements.length - 1}
         >
           Next
         </Button>
@@ -133,7 +136,7 @@ const MultiItemDisplay = ({ elements }: MultiItemDisplayProps) => {
           justifyContent: 'center'
         }}
       >
-        {elements[currentStep]}
+        {props.elements[currentStep]}
       </div>
     </div>
   );

lib/modules-lib/src/tabs/PlayButton.tsx

@@ -1,7 +1,6 @@
 /* [Imports] */
 import { Icon, type ButtonProps, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React from 'react';
 import ButtonComponent from './ButtonComponent';
 
 /* [Exports] */
@@ -11,17 +10,15 @@ export type PlayButtonProps = ButtonProps & {
 };
 
 /* [Main] */
-export default class PlayButton extends React.Component<PlayButtonProps> {
-  render() {
-    return <Tooltip
-      content={ this.props.isPlaying ? 'Pause' : 'Play' }
-      placement="top"
-    >
-      <ButtonComponent {...this.props} >
-        <Icon
-          icon={ this.props.isPlaying ? IconNames.PAUSE : IconNames.PLAY }
-        />
-      </ButtonComponent>
-    </Tooltip>;
-  }
+export default function PlayButton(props: PlayButtonProps) {
+  return <Tooltip
+    content={props.isPlaying ? 'Pause' : 'Play'}
+    placement="top"
+  >
+    <ButtonComponent {...props} >
+      <Icon
+        icon={props.isPlaying ? IconNames.PAUSE : IconNames.PLAY}
+      />
+    </ButtonComponent>
+  </Tooltip>;
 }