has error
This commit is contained in:
303
src/app.tsx
Normal file
303
src/app.tsx
Normal file
@@ -0,0 +1,303 @@
|
||||
import React, { useState, useEffect, createElement } from 'react';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
import { compile } from '@mdx-js/mdx';
|
||||
import * as runtime from 'react/jsx-runtime';
|
||||
import { ComponentProps } from 'react';
|
||||
|
||||
interface CodeProps extends ComponentProps<'code'> {
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface BlockquoteProps extends ComponentProps<'blockquote'> { }
|
||||
|
||||
interface UlProps extends ComponentProps<'ul'> { }
|
||||
interface OlProps extends ComponentProps<'ol'> { }
|
||||
|
||||
interface ListItemProps extends ComponentProps<'li'> { }
|
||||
|
||||
const components = {
|
||||
h1: (props: ComponentProps<'h1'>) => <h1 style={{ color: '#2563eb' }} {...props} />,
|
||||
h2: (props: ComponentProps<'h2'>) => <h2 style={{ color: '#1e40af' }} {...props} />,
|
||||
p: (props: ComponentProps<'p'>) => <p style={{ fontSize: '16px', lineHeight: '1.6' }} {...props} />,
|
||||
code: ({ className, children, ...props }: CodeProps) => (
|
||||
<code
|
||||
style={{
|
||||
backgroundColor: '#f3f4f6',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px',
|
||||
fontFamily: 'monospace'
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
),
|
||||
pre: (props: ComponentProps<'pre'>) => (
|
||||
<pre
|
||||
style={{
|
||||
backgroundColor: '#1f2937',
|
||||
color: '#f9fafb',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
overflow: 'auto',
|
||||
fontFamily: 'monospace'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
blockquote: (props: BlockquoteProps) => (
|
||||
<blockquote
|
||||
style={{
|
||||
borderLeft: '4px solid #e5e7eb',
|
||||
paddingLeft: '16px',
|
||||
margin: '16px 0',
|
||||
fontStyle: 'italic'
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
ul: (props: UlProps) => <ul style={{ paddingLeft: '20px' }} {...props} />,
|
||||
ol: (props: OlProps) => <ol style={{ paddingLeft: '20px' }} {...props} />,
|
||||
li: (props: ListItemProps) => <li style={{ marginBottom: '8px' }} {...props} />
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const [Content, setContent] = useState<React.ComponentType | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [reloading, setReloading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadMDX = async () => {
|
||||
if (!loading) {
|
||||
setReloading(true);
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/example.mdx?t=' + Date.now());
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const text = await response.text();
|
||||
|
||||
const compiledCode = await compile(text, {
|
||||
outputFormat: 'function-body',
|
||||
development: import.meta.env.DEV,
|
||||
});
|
||||
|
||||
const code = String(compiledCode);
|
||||
console.log('Raw compiled code:', code);
|
||||
|
||||
try {
|
||||
// Define basic HTML components for missing ones
|
||||
const htmlComponents = {
|
||||
h3: (props: any) => <h3 style={{ color: '#374151' }} {...props} />,
|
||||
h4: (props: any) => <h4 style={{ color: '#4b5563' }} {...props} />,
|
||||
h5: (props: any) => <h5 style={{ color: '#6b7280' }} {...props} />,
|
||||
h6: (props: any) => <h6 style={{ color: '#9ca3af' }} {...props} />,
|
||||
a: (props: any) => <a style={{ color: '#2563eb', textDecoration: 'underline' }} {...props} />,
|
||||
img: (props: any) => <img style={{ maxWidth: '100%', height: 'auto' }} {...props} />,
|
||||
hr: (props: any) => <hr style={{ border: '1px solid #e5e7eb', margin: '16px 0' }} {...props} />,
|
||||
br: (props: any) => <br {...props} />,
|
||||
em: (props: any) => <em style={{ fontStyle: 'italic' }} {...props} />,
|
||||
strong: (props: any) => <strong style={{ fontWeight: 'bold' }} {...props} />,
|
||||
table: (props: any) => <table style={{ width: '100%', borderCollapse: 'collapse', margin: '16px 0' }} {...props} />,
|
||||
thead: (props: any) => <thead style={{ backgroundColor: '#f9fafb' }} {...props} />,
|
||||
tbody: (props: any) => <tbody {...props} />,
|
||||
tr: (props: any) => <tr style={{ borderBottom: '1px solid #e5e7eb' }} {...props} />,
|
||||
th: (props: any) => <th style={{ padding: '12px', textAlign: 'left', fontWeight: 'bold' }} {...props} />,
|
||||
td: (props: any) => <td style={{ padding: '12px' }} {...props} />,
|
||||
div: (props: any) => <div {...props} />,
|
||||
span: (props: any) => <span {...props} />,
|
||||
};
|
||||
|
||||
// Merge all components
|
||||
const allComponents = { ...components, ...htmlComponents };
|
||||
|
||||
const scope = {
|
||||
React,
|
||||
components: allComponents,
|
||||
createElement,
|
||||
Fragment: React.Fragment,
|
||||
jsx: runtime.jsx,
|
||||
jsxs: runtime.jsxs,
|
||||
// Include all components directly in scope
|
||||
h1: allComponents.h1,
|
||||
h2: allComponents.h2,
|
||||
h3: allComponents.h3,
|
||||
h4: allComponents.h4,
|
||||
h5: allComponents.h5,
|
||||
h6: allComponents.h6,
|
||||
p: allComponents.p,
|
||||
a: allComponents.a,
|
||||
img: allComponents.img,
|
||||
ul: allComponents.ul,
|
||||
ol: allComponents.ol,
|
||||
li: allComponents.li,
|
||||
blockquote: allComponents.blockquote,
|
||||
hr: allComponents.hr,
|
||||
br: allComponents.br,
|
||||
em: allComponents.em,
|
||||
strong: allComponents.strong,
|
||||
code: allComponents.code,
|
||||
pre: allComponents.pre,
|
||||
table: allComponents.table,
|
||||
thead: allComponents.thead,
|
||||
tbody: allComponents.tbody,
|
||||
tr: allComponents.tr,
|
||||
th: allComponents.th,
|
||||
td: allComponents.td,
|
||||
div: allComponents.div,
|
||||
span: allComponents.span,
|
||||
};
|
||||
|
||||
const keys = Object.keys(scope);
|
||||
const values = Object.values(scope);
|
||||
|
||||
// Try to evaluate the code using a more robust approach
|
||||
try {
|
||||
// First, try to execute as function body
|
||||
const fn1 = new Function(
|
||||
...keys,
|
||||
`${code}; return MDXContent;`
|
||||
);
|
||||
const Component1 = fn1(...values);
|
||||
const MDXComponent1 = Component1.default || Component1;
|
||||
|
||||
if (MDXComponent1) {
|
||||
setContent(() => MDXComponent1);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
} catch (e1) {
|
||||
console.log('First evaluation method failed, trying second...');
|
||||
}
|
||||
|
||||
try {
|
||||
// Second, try to execute as function expression
|
||||
const fn2 = new Function(
|
||||
...keys,
|
||||
`return ${code}`
|
||||
);
|
||||
const Component2 = fn2(...values);
|
||||
const MDXComponent2 = Component2.default || Component2;
|
||||
|
||||
if (MDXComponent2) {
|
||||
setContent(() => MDXComponent2);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
} catch (e2) {
|
||||
console.log('Second evaluation method failed, trying third...');
|
||||
}
|
||||
|
||||
try {
|
||||
// Third, try to execute directly with eval-like approach
|
||||
const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
|
||||
const fn3 = new AsyncFunction(
|
||||
...keys,
|
||||
code
|
||||
);
|
||||
const result = await fn3(...values);
|
||||
const MDXComponent3 = result.default || result;
|
||||
|
||||
if (MDXComponent3) {
|
||||
setContent(() => MDXComponent3);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
} catch (e3) {
|
||||
console.log('Third evaluation method failed');
|
||||
}
|
||||
|
||||
throw new Error('All evaluation methods failed');
|
||||
} catch (evalError) {
|
||||
console.error('Evaluation error:', evalError);
|
||||
console.error('Compiled code sample:', code.substring(0, 500));
|
||||
const errorMessage = evalError instanceof Error ? evalError.message : String(evalError);
|
||||
throw new Error(`MDX evaluation failed: ${errorMessage}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading MDX:', err);
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
setLoading(false);
|
||||
} finally {
|
||||
setReloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadMDX();
|
||||
|
||||
// Set up interval for auto-reloading during development
|
||||
let intervalId: NodeJS.Timeout;
|
||||
if (import.meta.env.DEV) {
|
||||
intervalId = setInterval(loadMDX, 2000); // Check every 2 seconds
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (intervalId) {
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
};
|
||||
}, [loading]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ padding: '20px', textAlign: 'center' }}>
|
||||
<h1>MDX Viewer</h1>
|
||||
<p>Loading MDX content...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ padding: '20px' }}>
|
||||
<h1>MDX Viewer</h1>
|
||||
<div style={{
|
||||
backgroundColor: '#fef2f2',
|
||||
border: '1px solid #fecaca',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
color: '#dc2626'
|
||||
}}>
|
||||
<h3>Error loading MDX:</h3>
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<MDXProvider components={components}>
|
||||
<div style={{
|
||||
maxWidth: '800px',
|
||||
margin: '0 auto',
|
||||
padding: '20px',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
||||
}}>
|
||||
<div style={{ marginBottom: '32px', textAlign: 'center', position: 'relative' }}>
|
||||
<h1>MDX Viewer</h1>
|
||||
{reloading && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
backgroundColor: '#22c55e',
|
||||
color: 'white',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
🔄 Reloading...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{Content && <Content />}
|
||||
</div>
|
||||
</MDXProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user