|
| 1 | +import React from 'react'; |
| 2 | +import { Section } from '../components/Section'; |
| 3 | +import { CodeBlock } from '../components/CodeBlock'; |
| 4 | + |
| 5 | +interface UseCodeExecutionPageProps { |
| 6 | + theme: string; |
| 7 | +} |
| 8 | + |
| 9 | +export const UseCodeExecutionPage: React.FC<UseCodeExecutionPageProps> = ({ theme }) => { |
| 10 | + const isDark = theme === 'rcv-theme-dark'; |
| 11 | + const codeTheme = isDark ? 'github-dark' : 'github-light'; |
| 12 | + |
| 13 | + const minimalExample = `import React from 'react'; |
| 14 | +import { useCodeExecution } from '@react-code-view/react'; |
| 15 | +
|
| 16 | +const initialCode = \`const Hello = () => <button onClick={() => alert('hi!')}>Click</button>; |
| 17 | +render(<Hello />);\`; |
| 18 | +
|
| 19 | +export function Demo() { |
| 20 | + const { element, error } = useCodeExecution(initialCode, { |
| 21 | + dependencies: { React }, |
| 22 | + }); |
| 23 | +
|
| 24 | + if (error) return <pre>{error.message}</pre>; |
| 25 | + return <>{element}</>; |
| 26 | +} |
| 27 | +`; |
| 28 | + |
| 29 | + const advancedExample = `import React from 'react'; |
| 30 | +import { useCodeExecution } from '@react-code-view/react'; |
| 31 | +
|
| 32 | +const initialCode = \`import { useState } from 'react'; |
| 33 | +
|
| 34 | +const Counter = () => { |
| 35 | + const [count, setCount] = useState(0); |
| 36 | + return ( |
| 37 | + <div> |
| 38 | + <p>Count: {count}</p> |
| 39 | + <button onClick={() => setCount(count + 1)}>Increment</button> |
| 40 | + </div> |
| 41 | + ); |
| 42 | +}; |
| 43 | +
|
| 44 | +render(<Counter />);\`; |
| 45 | +
|
| 46 | +export function Demo() { |
| 47 | + const { element, error, execute, updateCode } = useCodeExecution(initialCode, { |
| 48 | + dependencies: { React }, |
| 49 | + onError: (err) => console.error('Execution failed', err), |
| 50 | + transformOptions: { transforms: ['typescript', 'jsx'] }, |
| 51 | + }); |
| 52 | +
|
| 53 | + // Manually re-run after editing the string |
| 54 | + const handleRun = () => execute(initialCode); |
| 55 | +
|
| 56 | + if (error) return <pre>{error.message}</pre>; |
| 57 | + return ( |
| 58 | + <div> |
| 59 | + <button onClick={handleRun}>Run</button> |
| 60 | + <div style={{ marginTop: 12 }}>{element}</div> |
| 61 | + </div> |
| 62 | + ); |
| 63 | +} |
| 64 | +`; |
| 65 | + |
| 66 | + const optionsTable = [ |
| 67 | + { name: 'dependencies', type: 'Record<string, unknown>', desc: 'Globals injected to execution sandbox' }, |
| 68 | + { name: 'transformOptions', type: 'Sucrase Options', desc: 'Customize JSX/TS transforms' }, |
| 69 | + { name: 'beforeCompile', type: '(code: string) => string', desc: 'Transform code before compile' }, |
| 70 | + { name: 'afterCompile', type: '(code: string) => string', desc: 'Transform code after compile' }, |
| 71 | + { name: 'onError', type: '(error: Error) => void', desc: 'Callback on execution failure' }, |
| 72 | + ]; |
| 73 | + |
| 74 | + return ( |
| 75 | + <div className="page-content"> |
| 76 | + <Section id="use-code-execution" title="useCodeExecution (hook)"> |
| 77 | + <p className="section-intro"> |
| 78 | + Lower-level hook used by CodeView to execute code strings, inject dependencies, and return rendered HTML. |
| 79 | + </p> |
| 80 | + |
| 81 | + <h3>When to use</h3> |
| 82 | + <ul> |
| 83 | + <li>Custom rendering pipeline without the full CodeView UI.</li> |
| 84 | + <li>Server-rendered or pre-rendered demos where you handle layout yourself.</li> |
| 85 | + <li>Embedding execution output into existing docs components.</li> |
| 86 | + </ul> |
| 87 | + |
| 88 | + <h3>Minimal example</h3> |
| 89 | + <CodeBlock language="tsx" theme={codeTheme} code={minimalExample} /> |
| 90 | + |
| 91 | + <h3>With dependencies and error handling</h3> |
| 92 | + <CodeBlock language="tsx" theme={codeTheme} code={advancedExample} /> |
| 93 | + |
| 94 | + <h3>Options</h3> |
| 95 | + <div className="api-table-wrapper"> |
| 96 | + <table className="api-table"> |
| 97 | + <thead> |
| 98 | + <tr> |
| 99 | + <th>Option</th> |
| 100 | + <th>Type</th> |
| 101 | + <th>Description</th> |
| 102 | + </tr> |
| 103 | + </thead> |
| 104 | + <tbody> |
| 105 | + {optionsTable.map(row => ( |
| 106 | + <tr key={row.name}> |
| 107 | + <td><code>{row.name}</code></td> |
| 108 | + <td><code>{row.type}</code></td> |
| 109 | + <td>{row.desc}</td> |
| 110 | + </tr> |
| 111 | + ))} |
| 112 | + </tbody> |
| 113 | + </table> |
| 114 | + </div> |
| 115 | + |
| 116 | + <h3>Return value</h3> |
| 117 | + <ul> |
| 118 | + <li><code>element</code>: ReactNode — captured React output</li> |
| 119 | + <li><code>error</code>: Error | null — execution error, if any</li> |
| 120 | + <li><code>code</code>: string — current code string</li> |
| 121 | + <li><code>setCode / updateCode</code>: setter to change code (re-runs)</li> |
| 122 | + <li><code>execute</code>: function to manually run a code string</li> |
| 123 | + </ul> |
| 124 | + </Section> |
| 125 | + </div> |
| 126 | + ); |
| 127 | +}; |
0 commit comments