@d-fischer/documen.ts 0.16.2 → 0.16.4

package/src/common/tools/markdown/MarkdownParser.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -12,94 +12,121 @@ interface MarkdownParserProps {
 	source: string;
 }
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		'& table': {
-			borderCollapse: 'collapse'
-		},
+const useStyles = makeStyles(
+	theme => ({
+		root: {
+			'& table': {
+				borderCollapse: 'collapse'
+			},
 
-		'& th, & td': {
-			border: `1px solid ${theme.colors.border}`,
-			padding: theme.spacing.unit
-		},
+			'& th, & td': {
+				border: `1px solid ${theme.colors.border}`,
+				padding: theme.spacing.unit
+			},
 
-		'& li': {
-			margin: `${theme.spacing.unit * 2}px 0`,
+			'& li': {
+				margin: `${theme.spacing.unit * 2}px 0`,
 
-			'&::marker': {
-				color: '#647d0f'
+				'&::marker': {
+					color: '#647d0f'
+				}
 			}
-		}
-	},
-	link: {
-		color: 'inherit',
-		fontWeight: 'bold',
-		textDecoration: 'none',
-		borderBottom: `1.5px solid ${theme.colors.accent.default}`,
-		transition: 'border-color .3s ease-in-out',
+		},
+		link: {
+			color: 'inherit',
+			fontWeight: 'bold',
+			textDecoration: 'none',
+			borderBottom: `1.5px solid ${theme.colors.accent.default}`,
+			transition: 'border-color .3s ease-in-out',
 
-		'&:hover': {
-			borderBottomColor: theme.colors.accent.focus
+			'&:hover': {
+				borderBottomColor: theme.colors.accent.focus
+			}
+		},
+		warning: {
+			display: 'flow-root',
+			borderLeft: `${theme.spacing.unit / 2}px solid ${theme.colors.warning}`,
+			backgroundColor: theme.colors.background.active,
+			marginBottom: '1em',
+			padding: '0 1em'
+		},
+		warningTitle: {
+			fontSize: '1em'
 		}
-	},
-	warning: {
-		display: 'flow-root',
-		borderLeft: `${theme.spacing.unit / 2}px solid ${theme.colors.warning}`,
-		backgroundColor: theme.colors.background.active,
-		marginBottom: '1em',
-		padding: '0 1em'
-	},
-	warningTitle: {
-		fontSize: '1em',
-	}
-}), { name: 'MarkdownParser' });
+	}),
+	{ name: 'MarkdownParser' }
+);
 
 const MarkdownParser: React.FC<MarkdownParserProps> = ({ source }) => {
 	const classes = useStyles();
 
-	const components = useMemo(() => ({
-		/* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call */
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/naming-convention
-		a: function MdLink(mdProps: any) {
-			const props = {
-				key: mdProps.nodeKey,
-				className: mdProps.className
-			};
+	const components = useMemo(
+		() => ({
+			/* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call */
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/naming-convention
+			a: function MdLink(mdProps: any) {
+				const props = {
+					key: mdProps.nodeKey,
+					className: mdProps.className
+				};
 
-			if (mdProps.href.startsWith('/')) {
-				return (
-					<HashLink {...props} className={classNames(props.className, classes.link)} to={mdProps.href}>
-						{mdProps.children}
-					</HashLink>
-				);
-			} else {
-				return (
-					<a className={classes.link} href={mdProps.href}>
-						{mdProps.children}
-					</a>
-				);
-			}
-		},
+				if (mdProps.href.startsWith('/')) {
+					return (
+						<HashLink {...props} className={classNames(props.className, classes.link)} to={mdProps.href}>
+							{mdProps.children}
+						</HashLink>
+					);
+				} else {
+					return (
+						<a className={classes.link} href={mdProps.href}>
+							{mdProps.children}
+						</a>
+					);
+				}
+			},
 
-		// eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/no-explicit-any
-		code: function MdCodeBlock({node, inline, className, children, ...props}: any) {
-			if (!inline) {
-				const match = /language-(\w+)/.exec(className || '');
-				if (match) {
-					return <CodeBlock lang={match[1]} langMeta={node.data?.meta.split(' ') ?? []} text={String(children).trimEnd()}/>;
+			// eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/no-explicit-any
+			code: function MdCodeBlock({ node, inline, className, children, ...props }: any) {
+				if (!inline) {
+					const match = /language-(\w+)/.exec(className || '');
+					if (match) {
+						return (
+							<CodeBlock
+								lang={match[1]}
+								langMeta={node.data?.meta.split(' ') ?? []}
+								text={String(children).trimEnd()}
+							/>
+						);
+					}
 				}
+				return (
+					<code className={className} {...props}>
+						{children}
+					</code>
+				);
 			}
-			return <code className={className} {...props}>{children}</code>;
-		},
-		/* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call */
-	}), [classes]);
+			/* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call */
+		}),
+		[classes]
+	);
 
-	const customDirectiveClasses = useMemo(() => ({
-		warning: classes.warning,
-		warningTitle: classes.warningTitle
-	}), [classes]);
+	const customDirectiveClasses = useMemo(
+		() => ({
+			warning: classes.warning,
+			warningTitle: classes.warningTitle
+		}),
+		[classes]
+	);
 
-	return <ReactMarkdown className={classes.root} remarkPlugins={[symbolLinks, gfmTables, [customDirectives, { classes: customDirectiveClasses }]]} components={components}>{source}</ReactMarkdown>
+	return (
+		<ReactMarkdown
+			className={classes.root}
+			remarkPlugins={[symbolLinks, gfmTables, [customDirectives, { classes: customDirectiveClasses }]]}
+			components={components}
+		>
+			{source}
+		</ReactMarkdown>
+	);
 };
 
 export default React.memo(MarkdownParser);

package/src/dev/index.tsx

@@ -2,7 +2,7 @@ import { Light as SyntaxHighlighter } from '@d-fischer/react-syntax-highlighter'
 import js from '@d-fischer/react-syntax-highlighter/dist/esm/languages/hljs/javascript';
 import json from '@d-fischer/react-syntax-highlighter/dist/esm/languages/hljs/json';
 import ts from '@d-fischer/react-syntax-highlighter/dist/esm/languages/hljs/typescript';
-import { ThemeProvider } from '@material-ui/styles';
+import { ThemeProvider } from '@mui/styles';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, HashRouter } from 'react-router-dom';

package/src/progressiveEnhancement/index.tsx

@@ -1,4 +1,4 @@
-import { createGenerateClassName, StylesProvider, ThemeProvider } from '@material-ui/styles';
+import { createGenerateClassName, StylesProvider, ThemeProvider } from '@mui/styles';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { CodeBlock } from '../common/components/CodeBlock';
@@ -8,7 +8,7 @@ import theme from '../common/theme';
 const registeredComponents = {
 	/* eslint-disable @typescript-eslint/naming-convention */
 	CodeBlock,
-	VersionMenu,
+	VersionMenu
 	/* eslint-enable @typescript-eslint/naming-convention */
 };
 
@@ -21,13 +21,11 @@ for (const elem of document.querySelectorAll<HTMLElement>('[data-dynamic-compone
 	if (Component) {
 		const props = JSON.parse(elem.dataset.componentProps ?? '{}') as JSX.IntrinsicAttributes;
 		ReactDOM.render(
-			(
-				<StylesProvider generateClassName={generateClassName}>
-					<ThemeProvider theme={theme}>
-						<Component {...props}/>
-					</ThemeProvider>
-				</StylesProvider>
-			),
+			<StylesProvider generateClassName={generateClassName}>
+				<ThemeProvider theme={theme}>
+					<Component {...props} />
+				</ThemeProvider>
+			</StylesProvider>,
 			elem
 		);
 	}

package/vite.config.dev.ts

@@ -63,7 +63,7 @@ export default defineConfig(async () => {
 		define: {
 			__DOCTS_REFERENCE: monoRefJson,
 			__DOCTS_CONFIG: JSON.stringify(generatorConfig),
-			__DOCTS_FSMAP: JSON.stringify([...fsMap.entries()]).replace(/\$/g, '$$$$'),
+			__DOCTS_FSMAP: JSON.stringify([...fsMap.entries()]),
 			__DOCTS_MOCK_FS: mockFs ? JSON.stringify([...mockFs]) : 'null',
 			__DOCTS_PATHS: JSON.stringify({ projectBase: path.resolve('../twitch') }),
 			__DOCTS_COMPONENT_MODE: JSON.stringify('dynamic'),