@d-fischer/documen.ts 0.16.3 → 0.16.4

package/src/common/components/Button.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
-import { makeStyles } from '@material-ui/styles';
+import React from 'react';
 
 type ButtonStyle = 'primary';
 
@@ -12,30 +12,33 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
 	onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		display: 'inline-block',
-		padding: '.4em .8em',
-		borderRadius: 5,
-		cursor: 'pointer'
-	},
-	rootSmall: {
-		padding: 1,
-		borderRadius: 5
-	},
-	rootPrimary: {
-		color: 'white',
-		transition: 'background-color .3s ease-in-out, border-color .3s ease-in-out',
-		backgroundColor: theme.colors.accent.default,
-		borderColor: theme.colors.accent.default,
-
-		'&:hover, &:active, &:focus': {
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			display: 'inline-block',
+			padding: '.4em .8em',
+			borderRadius: 5,
+			cursor: 'pointer'
+		},
+		rootSmall: {
+			padding: 1,
+			borderRadius: 5
+		},
+		rootPrimary: {
 			color: 'white',
-			backgroundColor: theme.colors.accent.focus,
-			borderColor: theme.colors.accent.focus
+			transition: 'background-color .3s ease-in-out, border-color .3s ease-in-out',
+			backgroundColor: theme.colors.accent.default,
+			borderColor: theme.colors.accent.default,
+
+			'&:hover, &:active, &:focus': {
+				color: 'white',
+				backgroundColor: theme.colors.accent.focus,
+				borderColor: theme.colors.accent.focus
+			}
 		}
-	}
-}), { name: 'Button' });
+	}),
+	{ name: 'Button' }
+);
 
 const Button: React.FC<ButtonProps> = ({ className, type, small, ...props }) => {
 	const classes = useStyles();

package/src/common/components/CodeBlock.tsx

@@ -3,7 +3,7 @@ import jsHighlight from '@d-fischer/react-syntax-highlighter/dist/esm/languages/
 import json from '@d-fischer/react-syntax-highlighter/dist/esm/languages/hljs/json';
 import tsHighlight from '@d-fischer/react-syntax-highlighter/dist/esm/languages/hljs/typescript';
 import darcula from '@d-fischer/react-syntax-highlighter/dist/esm/styles/hljs/darcula';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import { twoslasher } from '@typescript/twoslash';
 import * as lzString from 'lz-string';
 import React, { useCallback, useMemo, useState } from 'react';

package/src/common/components/CodeLink.tsx

@@ -1,11 +1,11 @@
-import React, { useContext } from 'react';
-import type { CallSignatureReferenceNode, ConstructSignatureReferenceNode, ReferenceNode } from '../reference';
-import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
-import { ConfigContext } from '../config';
+import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
+import { makeStyles } from '@mui/styles';
 
 import classNames from 'classnames';
-import { makeStyles } from '@material-ui/styles';
+import React, { useContext } from 'react';
+import { ConfigContext } from '../config';
+import type { CallSignatureReferenceNode, ConstructSignatureReferenceNode, ReferenceNode } from '../reference';
 
 interface CodeLinkProps {
 	symbol: ReferenceNode;

package/src/common/components/DeprecationNotice.tsx

@@ -1,5 +1,5 @@
+import { makeStyles } from '@mui/styles';
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles(
 	theme => ({
@@ -17,7 +17,7 @@ const useStyles = makeStyles(
 	{ name: 'DeprecationNotice' }
 );
 
-const DeprecationNotice: React.FC<React.PropsWithChildren> = ({ children }) => {
+const DeprecationNotice: React.FC = ({ children }) => {
 	const classes = useStyles();
 	return (
 		<div className={classes.root}>

package/src/common/components/FunctionParamDesc.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import type {
 	CallSignatureReferenceNode,

package/src/common/components/FunctionParamDescEntry.tsx

@@ -1,10 +1,11 @@
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import type {
 	CallSignatureReferenceNode,
-	ConstructorReferenceNode, ConstructSignatureReferenceNode,
+	ConstructorReferenceNode,
+	ConstructSignatureReferenceNode,
 	FunctionReferenceNode,
 	MethodReferenceNode,
 	ParameterReferenceNode,
@@ -26,31 +27,43 @@ interface FunctionParamDescEntryProps {
 	paramNamePrefix?: string;
 }
 
-const useStyles = makeStyles(theme => ({
-	row: {
-		padding: theme.spacing.unit,
-		textAlign: 'center',
+const useStyles = makeStyles(
+	theme => ({
+		row: {
+			padding: theme.spacing.unit,
+			textAlign: 'center',
 
-		'& p': {
-			margin: 0,
+			'& p': {
+				margin: 0,
 
-			'& + p': {
-				marginTop: theme.spacing.unit
+				'& + p': {
+					marginTop: theme.spacing.unit
+				}
 			}
+		},
+		checkMark: {
+			width: '1em'
 		}
-	},
-	checkMark: {
-		width: '1em'
-	}
-}), { name: 'FunctionParamDescEntry' });
+	}),
+	{ name: 'FunctionParamDescEntry' }
+);
 
-const FunctionParamDescEntry: React.FC<FunctionParamDescEntryProps> = ({ param, functionDefinition, functionSignature, isCallback, expandParams, paramNamePrefix = '' }) => {
+const FunctionParamDescEntry: React.FC<FunctionParamDescEntryProps> = ({
+	param,
+	functionDefinition,
+	functionSignature,
+	isCallback,
+	expandParams,
+	paramNamePrefix = ''
+}) => {
 	const classes = useStyles();
 	const shortDesc = param.comment?.shortText;
 	let desc = param.comment?.text;
 
 	if (!desc) {
-		const correctTag = (functionSignature?.comment ?? functionDefinition.comment)?.tags?.find(tag => tag.tag === 'param' && tag.param === param.name);
+		const correctTag = (functionSignature?.comment ?? functionDefinition.comment)?.tags?.find(
+			tag => tag.tag === 'param' && tag.param === param.name
+		);
 		if (correctTag) {
 			desc = correctTag.text;
 		}
@@ -60,28 +73,16 @@ const FunctionParamDescEntry: React.FC<FunctionParamDescEntryProps> = ({ param,
 	expandParams ||= isNamedParams;
 	const paramName = `${paramNamePrefix}${isNamedParams ? 'params' : param.name}`;
 	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-	const defaultValue = param.kind === 'property' ? undefined : (param.defaultValue || undefined);
+	const defaultValue = param.kind === 'property' ? undefined : param.defaultValue || undefined;
 
 	const result: React.ReactNode[] = [];
 
 	if (param.type.type === 'reflection') {
-		result.push(...getChildren(param.type.declaration).filter((c): c is VariableReferenceNode => c.kind === 'variable').sort(defaultNodeSort).map(subParam => (
-			<FunctionParamDescEntry
-				key={`${paramName}.${subParam.name}`}
-				param={subParam}
-				functionDefinition={functionDefinition}
-				functionSignature={functionSignature}
-				isCallback={isCallback}
-				expandParams={expandParams}
-				paramNamePrefix={`${paramName}.`}
-			/>
-		)));
-	} else if (param.type.type === 'reference' && param.type.id && expandParams) {
-		const refDesc = findSymbolByMember('id', param.type.id);
-		if (refDesc) {
-			const { symbol: ref } = refDesc;
-			if (ref.kind === 'interface' && !hasTag(ref, 'neverExpand')) {
-				result.push(...getChildren(ref).filter((c): c is PropertyReferenceNode => c.kind === 'property').sort(defaultNodeSort).map(subParam => (
+		result.push(
+			...getChildren(param.type.declaration)
+				.filter((c): c is VariableReferenceNode => c.kind === 'variable')
+				.sort(defaultNodeSort)
+				.map(subParam => (
 					<FunctionParamDescEntry
 						key={`${paramName}.${subParam.name}`}
 						param={subParam}
@@ -91,7 +92,29 @@ const FunctionParamDescEntry: React.FC<FunctionParamDescEntryProps> = ({ param,
 						expandParams={expandParams}
 						paramNamePrefix={`${paramName}.`}
 					/>
-				)));
+				))
+		);
+	} else if (param.type.type === 'reference' && param.type.id && expandParams) {
+		const refDesc = findSymbolByMember('id', param.type.id);
+		if (refDesc) {
+			const { symbol: ref } = refDesc;
+			if (ref.kind === 'interface' && !hasTag(ref, 'neverExpand')) {
+				result.push(
+					...getChildren(ref)
+						.filter((c): c is PropertyReferenceNode => c.kind === 'property')
+						.sort(defaultNodeSort)
+						.map(subParam => (
+							<FunctionParamDescEntry
+								key={`${paramName}.${subParam.name}`}
+								param={subParam}
+								functionDefinition={functionDefinition}
+								functionSignature={functionSignature}
+								isCallback={isCallback}
+								expandParams={expandParams}
+								paramNamePrefix={`${paramName}.`}
+							/>
+						))
+				);
 			}
 		}
 	}
@@ -100,27 +123,29 @@ const FunctionParamDescEntry: React.FC<FunctionParamDescEntryProps> = ({ param,
 		<tr key={paramName}>
 			<td className={classes.row}>{paramName}</td>
 			<td className={classes.row}>
-				<Type def={param.type} ignoreUndefined={param.kind !== 'parameter' || param.flags?.isOptional}/>
+				<Type def={param.type} ignoreUndefined={param.kind !== 'parameter' || param.flags?.isOptional} />
 			</td>
 			{isCallback ? null : (
 				<>
-					<td className={classes.row}>{
-						param.flags?.isOptional || defaultValue || isOptionalType(param.type)
-							? ''
-							: <Icon className={classes.checkMark} icon={faCheck}/>
-					}</td>
+					<td className={classes.row}>
+						{param.flags?.isOptional || defaultValue || isOptionalType(param.type) ? (
+							''
+						) : (
+							<Icon className={classes.checkMark} icon={faCheck} />
+						)}
+					</td>
 					<td className={classes.row}>{defaultValue ?? <em>none</em>}</td>
 				</>
 			)}
 			<td className={classes.row}>
-				{
-					(shortDesc || desc) ? (
-						<>
-							{shortDesc ? <MarkdownParser source={shortDesc}/> : null}
-							{desc ? <MarkdownParser source={desc}/> : null}
-						</>
-					) : <em>{result.length ? 'see below' : 'none'}</em>
-				}
+				{shortDesc || desc ? (
+					<>
+						{shortDesc ? <MarkdownParser source={shortDesc} /> : null}
+						{desc ? <MarkdownParser source={desc} /> : null}
+					</>
+				) : (
+					<em>{result.length ? 'see below' : 'none'}</em>
+				)}
 			</td>
 		</tr>
 	);

package/src/common/components/FunctionReturnType.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import type { CallSignatureReferenceNode } from '../reference';
 import { useAsyncType } from '../tools/NodeTools';

package/src/common/components/FunctionSignature.tsx

@@ -1,19 +1,27 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import React from 'react';
-import type { CallSignatureReferenceNode, ClassReferenceNode, ConstructSignatureReferenceNode, InterfaceReferenceNode } from '../reference';
+import type {
+	CallSignatureReferenceNode,
+	ClassReferenceNode,
+	ConstructSignatureReferenceNode,
+	InterfaceReferenceNode
+} from '../reference';
 
 interface FunctionSignatureProps {
 	signature: CallSignatureReferenceNode | ConstructSignatureReferenceNode;
 	parent?: ClassReferenceNode | InterfaceReferenceNode;
 }
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		fontFamily: theme.fonts.code,
-		margin: '0 0 .5em',
-		display: 'inline-block'
-	}
-}), { name: 'FunctionSignature' });
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			fontFamily: theme.fonts.code,
+			margin: '0 0 .5em',
+			display: 'inline-block'
+		}
+	}),
+	{ name: 'FunctionSignature' }
+);
 
 const FunctionSignature: React.FC<FunctionSignatureProps> = ({ signature, parent }) => {
 	const classes = useStyles();
@@ -39,12 +47,14 @@ const FunctionSignature: React.FC<FunctionSignatureProps> = ({ signature, parent
 					&gt;
 				</>
 			)}
-			({signature.parameters.map((param, idx) => (
-			<React.Fragment key={param.name}>
-				{idx === 0 ? '' : ', '}
-				{/^__\d+$/.test(param.name) ? 'params' : param.name}
-			</React.Fragment>
-		))})
+			(
+			{signature.parameters.map((param, idx) => (
+				<React.Fragment key={param.name}>
+					{idx === 0 ? '' : ', '}
+					{/^__\d+$/.test(param.name) ? 'params' : param.name}
+				</React.Fragment>
+			))}
+			)
 		</h3>
 	);
 };

package/src/common/components/InterfaceRepresentation.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
 import React from 'react';
 import { HashLink } from 'react-router-hash-link';
@@ -12,31 +12,34 @@ interface InterfaceRepresentationProps {
 	className?: string;
 }
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		fontFamily: theme.fonts.code,
-	},
-	prop: {
-		display: 'block',
-		marginLeft: '2em',
-		'& + $prop': {
-			marginTop: '.5em'
-		}
-	},
-	comment: {
-		color: '#808080',
-		fontSize: '.8em',
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			fontFamily: theme.fonts.code
+		},
+		prop: {
+			display: 'block',
+			marginLeft: '2em',
+			'& + $prop': {
+				marginTop: '.5em'
+			}
+		},
+		comment: {
+			color: '#808080',
+			fontSize: '.8em',
 
-		'&:before': {
-			content: '"// "',
-			display: 'inline'
+			'&:before': {
+				content: '"// "',
+				display: 'inline'
+			}
+		},
+		name: {
+			color: '#9876AA',
+			textDecoration: 'none'
 		}
-	},
-	name: {
-		color: '#9876AA',
-		textDecoration: 'none'
-	}
-}), { name: 'InterfaceRepresentation' });
+	}),
+	{ name: 'InterfaceRepresentation' }
+);
 
 const InterfaceRepresentation: React.FC<InterfaceRepresentationProps> = ({ symbol, className }) => {
 	const classes = useStyles();
@@ -44,42 +47,44 @@ const InterfaceRepresentation: React.FC<InterfaceRepresentationProps> = ({ symbo
 	return (
 		<div className={classNames(classes.root, className)}>
 			{'{'}
-			{getChildren(symbol).sort(defaultNodeSort).map(member => {
-				if (member.kind === 'property') {
-					return (
-						<div key={member.name} className={classes.prop}>
-							{member.comment?.shortText ? (
-								<div className={classes.comment}>
-									{member.comment.shortText}
+			{getChildren(symbol)
+				.sort(defaultNodeSort)
+				.map(member => {
+					if (member.kind === 'property') {
+						return (
+							<div key={member.name} className={classes.prop}>
+								{member.comment?.shortText ? (
+									<div className={classes.comment}>{member.comment.shortText}</div>
+								) : null}
+								<div>
+									<HashLink to={`#${member.name}`} className={classes.name}>
+										{member.name}
+									</HashLink>
+									{member.flags?.isOptional ? '?' : ''}
+									: <Type def={member.type} ignoreUndefined />
 								</div>
-							) : null}
-							<div>
-								<HashLink to={`#${member.name}`} className={classes.name}>{member.name}</HashLink>
-								{member.flags?.isOptional ? '?' : ''}
-								: <Type def={member.type} ignoreUndefined/>
 							</div>
-						</div>
-					);
-				}
-				if (member.kind === 'method') {
-					const sig = member.signatures![0];
-					return (
-						<div key={member.name} className={classes.prop}>
-							{sig.comment?.shortText ? (
-								<div className={classes.comment}>
-									{sig.comment.shortText}
+						);
+					}
+					if (member.kind === 'method') {
+						const sig = member.signatures![0];
+						return (
+							<div key={member.name} className={classes.prop}>
+								{sig.comment?.shortText ? (
+									<div className={classes.comment}>{sig.comment.shortText}</div>
+								) : null}
+								<div>
+									<HashLink to={`#${member.name}`} className={classes.name}>
+										{member.name}
+									</HashLink>
+									{member.flags?.isOptional ? '?' : ''}
+									(): <Type def={member.signatures![0].type} />
 								</div>
-							) : null}
-							<div>
-								<HashLink to={`#${member.name}`} className={classes.name}>{member.name}</HashLink>
-								{member.flags?.isOptional ? '?' : ''}
-								(): <Type def={member.signatures![0].type}/>
 							</div>
-						</div>
-					);
-				}
-				return null;
-			})}
+						);
+					}
+					return null;
+				})}
 			{'}'}
 		</div>
 	);

package/src/common/components/MainMenu.tsx

@@ -1,6 +1,6 @@
-import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { makeStyles } from '@material-ui/styles';
+import { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
+import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
 import React, { useContext, useMemo } from 'react';
 import { NavLink, useLocation, useResolvedPath } from 'react-router-dom';

package/src/common/components/NavMenu.tsx

@@ -1,13 +1,16 @@
-import React from 'react';
+import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
-import { makeStyles } from '@material-ui/styles';
+import React from 'react';
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		borderRight: `1px solid ${theme.colors.border}`,
-		minHeight: '100%'
-	}
-}), { name: 'NavMenu' });
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			borderRight: `1px solid ${theme.colors.border}`,
+			minHeight: '100%'
+		}
+	}),
+	{ name: 'NavMenu' }
+);
 
 interface NavMenuProps {
 	className?: string;
@@ -15,11 +18,7 @@ interface NavMenuProps {
 
 const NavMenu: React.FC<React.PropsWithChildren<NavMenuProps>> = ({ children, className }) => {
 	const classes = useStyles();
-	return (
-		<div className={classNames(classes.root, className)}>
-			{children}
-		</div>
-	);
+	return <div className={classNames(classes.root, className)}>{children}</div>;
 };
 
 export default NavMenu;

package/src/common/components/NavMenuGroup.tsx

@@ -1,40 +1,41 @@
+import { makeStyles } from '@mui/styles';
 import React from 'react';
-import { makeStyles } from '@material-ui/styles';
 
 interface NavMenuGroupProps {
 	title: string;
 }
 
-const useStyles = makeStyles(({ colors: { text: textColor }, spacing: { unit: space } }) => ({
-	root: {
-		display: 'block',
-		color: textColor,
-		padding: `${space}px 0`,
-	},
-	title: {
-		margin: 0,
-		padding: `${space / 2}px ${space}px ${space / 2}px ${space * 1.5}px`,
-		fontSize: '1.1em',
-		lineHeight: '1em',
-		height: '1em',
-		fontWeight: 'bold',
-		textTransform: 'uppercase'
-	},
-	items: {
-		'& > a': {
-			paddingLeft: space * 2.5
+const useStyles = makeStyles(
+	({ colors: { text: textColor }, spacing: { unit: space } }) => ({
+		root: {
+			display: 'block',
+			color: textColor,
+			padding: `${space}px 0`
+		},
+		title: {
+			margin: 0,
+			padding: `${space / 2}px ${space}px ${space / 2}px ${space * 1.5}px`,
+			fontSize: '1.1em',
+			lineHeight: '1em',
+			height: '1em',
+			fontWeight: 'bold',
+			textTransform: 'uppercase'
+		},
+		items: {
+			'& > a': {
+				paddingLeft: space * 2.5
+			}
 		}
-	}
-}), { name: 'NavMenuGroup' });
+	}),
+	{ name: 'NavMenuGroup' }
+);
 
 const NavMenuGroup: React.FC<React.PropsWithChildren<NavMenuGroupProps>> = ({ title, children }) => {
 	const classes = useStyles();
 	return (
 		<div className={classes.root}>
 			<h2 className={classes.title}>{title}</h2>
-			<div className={classes.items}>
-				{children}
-			</div>
+			<div className={classes.items}>{children}</div>
 		</div>
 	);
 };

package/src/common/components/NavMenuItem.tsx

@@ -1,7 +1,7 @@
+import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { makeStyles } from '@material-ui/styles';
 
 interface NavMenuItemProps {
 	path: string;

package/src/common/components/TypeAliasHint.tsx

@@ -1,8 +1,8 @@
+import { makeStyles } from '@mui/styles';
 import React from 'react';
 import type { TypeAliasReferenceNode } from '../reference';
-import { makeStyles } from '@material-ui/styles';
-import Type from './codeBuilders/Type';
 import MarkdownParser from '../tools/markdown/MarkdownParser';
+import Type from './codeBuilders/Type';
 
 interface TypeAliasHintProps {
 	symbol: TypeAliasReferenceNode;