HTTP Handler #31

// This approach creates a React playground with a code editor and live preview.
// We'll use React for the UI, CodeMirror for the code editor, and Babel for live transpilation.
// The playground will include a dropdown to select from predefined React component examples.

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>React Playground</title>
      <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
      <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/jsx/jsx.min.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/material.min.css">
      <style>
        body { margin: 0; font-family: sans-serif; }
        #root { display: flex; height: 100vh; }
        #editor { flex: 1; display: flex; flex-direction: column; }
        #preview { flex: 1; padding: 20px; border-left: 1px solid #ccc; overflow: auto; }
        .CodeMirror { flex-grow: 1; height: auto; }
      </style>
    </head>
    <body>
      <div id="root"></div>
      <script type="text/babel">
        const exampleComponents = {
          Counter: \`function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}\`,
          TodoList: \`function TodoList() {
  const [todos, setTodos] = React.useState([]);
  const [input, setInput] = React.useState('');

const addTodo = () => {
    if (input) {
      setTodos([...todos, input]);
      setInput('');
    }
  };

return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a todo"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}\`,
          Timer: \`function Timer() {
  const [seconds, setSeconds] = React.useState(0);

React.useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

return <div>Seconds: {seconds}</div>;
}\`
        };

function App() {
          console.log(exampleComponents)
          const [code, setCode] = React.useState(exampleComponents.Counter);
          const [error, setError] = React.useState(null);
          const editorRef = React.useRef(null);
          const [key, setKey] = React.useState(0);

console.log(error)

React.useEffect(() => {
            if (!editorRef.current) {
              editorRef.current = CodeMirror(document.getElementById('editor'), {
                value: code,
                mode: 'jsx',
                theme: 'material',
                lineNumbers: true,
                lineWrapping: true,
              });
              editorRef.current.on('change', (instance) => {
                setCode(instance.getValue());
              });
            } else {
              editorRef.current.setValue(code);
            }
          }, []);

const handleExampleChange = (e) => {
            const newCode = exampleComponents[e.target.value];
            setCode(newCode);
            if (editorRef.current) {
              editorRef.current.setValue(newCode);
            }
          };

if (typeof Component !== 'function') {
                throw new Error('Component must be a function');
              }

return React.createElement(Component);
            } catch (err) {
            console.log(err)
              return <div style={{ color: 'red' }}>{err.toString()}</div>;
            }
          });

const transpileAndExecute = React.useCallback((code) => {
            setError(null);
            setKey(prevKey => prevKey + 1); // Force re-render of EvaluatedComponent
          }, []);

React.useEffect(() => {
            transpileAndExecute(code);
          }, [code, transpileAndExecute]);

return (
            <React.Fragment>
              <div id="editor">
                <select onChange={handleExampleChange}>
                  {Object.keys(exampleComponents).map(key => (
                    <option key={key} value={key}>{key}</option>
                  ))}
                </select>
              </div>
              <div id="preview">
                <h2>Preview</h2>
                {error ? (
                  <div style={{ color: 'red' }}>{error}</div>
                ) : <EvaluatedComponent key={key} code={code} />}
              </div>
            </React.Fragment>
          );
        }

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
      </script>
    </body>
    </html>
  `, {
    headers: { "Content-Type": "text/html" },
  });
}

Visit: https://maxm-valtowntown.web.val.run/serve/31

Return home

🏘️ 🌳 🏠
🚶‍♂️ ⛲ 🚶‍♀️
🏡 🚲 🌳

View Source