fix types

Author: KurtGokhan

plugins/md-layout-loader.js

@@ -29,7 +29,9 @@ module.exports = async function (src) {
   const layout = layoutMap[pageParentDir] || 'Home';
   const code =
     `import withLayout from 'components/Layout/Layout${layout}';
-export default withLayout(${JSON.stringify(data)})
+export default withLayout(${JSON.stringify(data)});
+
+
 ` + content;
 
   return callback(null, code);

src/components/Layout/useMediaQuery.tsx

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useState } from 'react';
 const useMediaQuery = (width: number) => {
   const [targetReached, setTargetReached] = useState(false);
 
-  const updateTarget = useCallback((e) => {
+  const updateTarget = useCallback((e: MediaQueryListEvent) => {
     if (e.matches) {
       setTargetReached(true);
     } else {

src/components/MDX/APIAnatomy.tsx

@@ -2,6 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+import { CodeMirrorRef } from '@codesandbox/sandpack-react/dist/types/components/CodeEditor/CodeMirror';
 import cn from 'classnames';
 import * as React from 'react';
 import tailwindConfig from '../../../tailwind.config';
@@ -42,7 +43,7 @@ const colors = [
 
 export function APIAnatomy({ children }: APIAnatomyProps) {
   const [activeStep, setActiveStep] = React.useState<number | null>(null);
-  const ref = React.useRef<HTMLDivElement>();
+  const ref = React.useRef<CodeMirrorRef>();
 
   const { steps, code } = React.Children.toArray(children).reduce(
     (acc: AnatomyContent, child) => {

src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -8,6 +8,7 @@ import {
   SandpackProvider,
   SandpackThemeProvider
 } from '@codesandbox/sandpack-react';
+import { CodeMirrorRef } from '@codesandbox/sandpack-react/dist/types/components/CodeEditor/CodeMirror';
 import cn from 'classnames';
 import rangeParser from 'parse-numeric-range';
 import * as React from 'react';
@@ -36,7 +37,7 @@ const CodeBlock = React.forwardRef(
       noMargin?: boolean;
       noMarkers?: boolean;
     },
-    ref?: React.Ref<HTMLDivElement>
+    ref?: React.Ref<CodeMirrorRef>
   ) => {
     const getDecoratedLineInfo = () => {
       if (!metastring) {

src/components/MDX/Sandpack/compile.ts

@@ -7,7 +7,7 @@ export interface CompiledCode {
   error?: any;
 }
 
-type TransformFn = (x: string) => string;
+type TransformFn = (x: string) => string | null | undefined;
 const transformJsxToES5: TransformFn = (code: string) => Babel.transform(code, { presets: ['es2015', 'react'] }).code;
 const identity: TransformFn = x => x;
 

src/components/MDX/Sandpack/index.tsx

@@ -11,7 +11,7 @@ import { CustomPreset } from './CustomPreset';
 
 
 type SandpackProps = {
-  children: React.ReactChildren;
+  children: React.ReactNode;
   autorun?: boolean;
   setup?: SandpackSetup;
 };

src/components/unity/cartridge.tsx

@@ -6,8 +6,8 @@ import { useGlobalUnity } from './context';
 import styles from './index.module.scss';
 
 interface Props {
-  script?: string;
-  style?: string;
+  script?: string | null;
+  style?: string | null;
   className?: string;
   autoActivate?: boolean;
   hideActivateButton?: boolean;
@@ -24,7 +24,7 @@ export const UnityCardridge = forwardRef<UnityCardridgeRef, Props>(
     const latestStyle = React.useRef(style);
 
     const unityContainer = React.useRef<HTMLDivElement | null>(null);
-    const setRef = useCallback((el) => {
+    const setRef = useCallback((el: HTMLDivElement | null) => {
       if (el) unityContainer.current = el;
     }, [unityContainer]);
     const { instance, insertTo, insertedToRef, setLoaded } = useGlobalUnity();

src/components/unity/instance.tsx

@@ -24,7 +24,7 @@ export function Unity({ className, sampleName = defaultUnityInstanceName, unityR
     return createPortal(<div style={{ width: 0, height: 0 }} id={id} />, document.body, id);
   }, [id])
 
-  const setCanvasRef = useCallback(async canvas => {
+  const setCanvasRef = useCallback(async (canvas: HTMLCanvasElement | null) => {
     if (!canvas || !scriptLoaded) { return; }
 
     const unityInstance: UnityInstance = await global.createUnityInstance(canvas, {

src/pages/learn/index.md

@@ -32,6 +32,14 @@ export default function App() {
 
 </Sandpack>
 
+### What is ReactUnity?
+
+ReactUnity is a framework that lets you code UI using React and show it inside Unity.
+
+ReactUnity is not a hack or a workaround. It is a legitimate way to use React. React framework is built in a way so that the React logic can be used in different platforms. In fact, all platforms which can run Javascript can have a framework like ReactUnity.
+
+In Web development, it is ReactDOM. In native mobile (and desktop) applications, it is React Native. And in Unity, it is ReactUnity. There are actually more [Awesome React Renderers](https://github.com/chentsulin/awesome-react-renderer) you probably haven't heard of.
+
 ## How can I learn ReactUnity
 
-To learn ReactUnity, you need to learn React first. You can start by the [official React documentation](https://reactjs.org/). If you already feel confident with React, then you can keep reading this documentation.
+To learn ReactUnity, you need to learn React first. You can start by the [official React documentation](https://reactjs.org/). If you already feel confident with React, you can keep reading this documentation.