Cleanup components interface

Author: iddan

src/App.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { Node } from 'typescript';
 import './index.css';
 import { queryCode } from './engine';
 import QueryEditor from './QueryEditor';
 import Code, { HighlightedInterval, HighlightedIntervals } from './Code';
 import { isSyntaxError } from './tsquery-util';
+import Header from './Header';
 
 const REG_EXPS: Record<string, RegExp> = {
   AllLineBreaks: /\n/g,
@@ -16,7 +17,7 @@ const REG_EXPS: Record<string, RegExp> = {
   OnlyWhitespace: /^\s*$/,
 };
 
-export default function App() {
+const App: FC = () => {
   const [highlightedIntervals, setHighlightedIntervals] = useState<HighlightedIntervals>([]);
   const [query, setQuery] = useState<string>('');
   const [code, setCode] = useState<string>('');
@@ -54,20 +55,16 @@ export default function App() {
   // Layout
   return (
     <div className="App">
-      <header>
-        <h1>TSQuery Playground</h1>
-        <aside>
-          <a href="https://github.com/phenomnomnominal/tsquery#selectors">Reference</a>
-          <a href="https://github.com/flycode-org/tsquery-playground">GitHub</a>
-        </aside>
-      </header>
+      <Header />
       <h2>Query</h2>
       <QueryEditor onChange={handleQueryChange} />
       <h2>Code</h2>
       <Code highlighted={highlightedIntervals} onChange={handleCodeChange} />
     </div>
   );
-}
+};
+
+export default App;
 
 function mapNodeToHighlightInterval(node: Node): HighlightedInterval {
   const fullText = node.getFullText();

src/Code.tsx

@@ -9,10 +9,12 @@ export type HighlightedInterval = {
 
 export type HighlightedIntervals = HighlightedInterval[];
 
-const Code: FC<{
+export type CodeProps = {
   highlighted: HighlightedIntervals;
   onChange: OnChange;
-}> = ({ highlighted, onChange }) => {
+};
+
+const Code: FC<CodeProps> = ({ highlighted, onChange }) => {
   const [instances, setInstances] = useState<[Monaco.editor.IStandaloneCodeEditor, typeof Monaco] | null>(null);
 
   /** @todo https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#setmodelmarkers */

src/Header.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+const Header: FC = () => (
+  <header>
+    <h1>TSQuery Playground</h1>
+    <aside>
+      <a href="https://github.com/phenomnomnominal/tsquery#selectors">Reference</a>
+      <a href="https://github.com/flycode-org/tsquery-playground">GitHub</a>
+    </aside>
+  </header>
+);
+
+export default Header;

src/QueryEditor.tsx

@@ -7,10 +7,9 @@ import { isSyntaxError } from './tsquery-util';
 
 const MONACO_MODEL_MARKER_OWNER = 'tsquery';
 
-const QueryEditor: FC<Omit<EditorProps, 'defaultLanguage' | 'theme' | 'options' | 'onMount'>> = ({
-  onChange,
-  ...rest
-}) => {
+export type QueryEditorProps = Omit<EditorProps, 'defaultLanguage' | 'theme' | 'options' | 'onMount'>;
+
+const QueryEditor: FC<QueryEditorProps> = ({ onChange, ...rest }) => {
   const monacoRef = useRef<typeof Monaco>();
   const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor>();
   const handleQueryMount = useCallback((editor: Monaco.editor.IStandaloneCodeEditor, monaco: typeof Monaco) => {