diff --git a/apps/total-typescript/src/components/code-editor/code-editor.tsx b/apps/total-typescript/src/components/code-editor/code-editor.tsx
index 40f31a83c6..0cf02b0e3f 100644
--- a/apps/total-typescript/src/components/code-editor/code-editor.tsx
+++ b/apps/total-typescript/src/components/code-editor/code-editor.tsx
@@ -50,10 +50,6 @@ export type CodeEditorProps = {
onEmittedJavaScript?: (code: string) => void
}
-const getHeight = (code: string) => {
- return code.split('\n').length * 24
-}
-
let incrementable = 0
/**
@@ -86,14 +82,18 @@ export const EagerlyLoadedEditor = (props: CodeEditorProps) => {
return
}
- const worker =
- await monacoRef.current.languages.typescript.getTypeScriptWorker()
+ try {
+ const worker =
+ await monacoRef.current.languages.typescript.getTypeScriptWorker()
- const client = await worker(uri)
+ const client = await worker(uri)
- const emitOutput = await client.getEmitOutput(uri.toString())
+ const emitOutput = await client.getEmitOutput(uri.toString())
- props.onEmittedJavaScript(emitOutput.outputFiles[0].text)
+ props.onEmittedJavaScript(emitOutput.outputFiles[0].text)
+ } catch (e) {
+ console.error('Getting emitted JavaScript failed', e)
+ }
}
return (
@@ -177,11 +177,3 @@ export const EagerlyLoadedEditor = (props: CodeEditorProps) => {
/>
)
}
-
-export const EagerlyLoadedFullWidthEditor = (props: CodeEditorProps) => {
- return (
-
-
-
- )
-}
diff --git a/apps/total-typescript/src/components/code-editor/lazy-loaded-editor.tsx b/apps/total-typescript/src/components/code-editor/lazy-loaded-editor.tsx
index 105ba1821a..73c1b7777a 100644
--- a/apps/total-typescript/src/components/code-editor/lazy-loaded-editor.tsx
+++ b/apps/total-typescript/src/components/code-editor/lazy-loaded-editor.tsx
@@ -1,60 +1,42 @@
-import React from 'react'
-import type {Language} from './code-editor'
+import React, {useLayoutEffect} from 'react'
+import type {CodeEditorProps} from './code-editor'
-export const LazyLoadedFullWidthEditor = React.lazy(() =>
+const _LazyLoadedEditor = React.lazy(() =>
import('./code-editor').then((res) => {
return {
- default: res.EagerlyLoadedFullWidthEditor,
+ default: res.EagerlyLoadedEditor,
}
}),
)
-export const LazyLoadedTranspilePreview = React.lazy(() =>
- import('./transpile-preview').then((res) => {
- return {
- default: res.EagerlyLoadedTranspilePreview,
- }
- }),
-)
+const LoadWhenVisible = (props: {children: React.ReactNode}) => {
+ const [isVisible, setIsVisible] = React.useState(false)
-export const MDXEditor = (props: {children?: any}) => {
- // Yes, we're diving into React's internals to grab the
- // code from the element
- const code = props.children?.props?.children?.props?.children
+ const ref = React.useRef(null)
- if (!code) {
- return null
- }
+ React.useEffect(() => {
+ const observer = new IntersectionObserver(([entry]) => {
+ setIsVisible(entry.isIntersecting)
+ })
- let language = props.children?.props?.children?.props?.className
-
- if (language) {
- language = language.replace('language-', '') as Language
- }
-
- return
-}
+ observer.observe(ref.current!)
-export const MDXTranspilePreview = (props: {children?: any}) => {
- // Yes, we're diving into React's internals to grab the
- // code from the element
- const code = props.children?.props?.children?.props?.children
-
- if (!code) {
- return null
- }
-
- let language = props.children?.props?.children?.props?.className
-
- if (language) {
- language = language.replace('language-', '') as Language
- }
+ return () => {
+ observer.disconnect()
+ }
+ }, [])
- return
+ return (
+
+ {isVisible ? props.children : null}
+
+ )
}
-export const EditorTest = () => {
+export const LazyLoadedEditor = (props: CodeEditorProps) => {
return (
- {}`} />
+
+ <_LazyLoadedEditor {...props} />
+
)
}
diff --git a/apps/total-typescript/src/components/code-editor/mdx-editor.tsx b/apps/total-typescript/src/components/code-editor/mdx-editor.tsx
new file mode 100644
index 0000000000..54fa641f1a
--- /dev/null
+++ b/apps/total-typescript/src/components/code-editor/mdx-editor.tsx
@@ -0,0 +1,86 @@
+import Image from 'next/image'
+import {useState} from 'react'
+import type {CodeEditorProps, Language} from './code-editor'
+import {LazyLoadedEditor} from './lazy-loaded-editor'
+import tsSvg from './ts-logo.svg'
+import jsSvg from './js-logo.svg'
+
+const getHeight = (code: string) => {
+ return (code.split('\n').length + 3) * 24
+}
+
+const extractCodeAndLanguage = (props: {children?: any}) => {
+ const code = props.children?.props?.children?.props?.children
+ let language = props.children?.props?.children?.props?.className
+
+ if (!code || !language) {
+ return null
+ }
+
+ language = language.replace('language-', '') as Language
+
+ return {code, language}
+}
+
+export const MDXEditor = (props: {children?: any}) => {
+ // Yes, we're diving into React's internals to grab the
+ // code from the element
+ const extracted = extractCodeAndLanguage(props)
+
+ if (!extracted) {
+ return null
+ }
+
+ const {code, language} = extracted
+
+ return (
+
+
+
+ )
+}
+
+export const MDXTranspilePreview = (props: {children?: any}) => {
+ const extracted = extractCodeAndLanguage(props)
+ const [jsCode, setJsCode] = useState(undefined)
+
+ if (!extracted) {
+ return null
+ }
+
+ const {code, language} = extracted
+
+ return (
+
+
+
+
+
+ TypeScript Code
+
+
+
+
+
+
+ Emitted JavaScript
+
+
+
-
-
-
-
- TypeScript Code
-
-
-
-
-
-
- Emitted JavaScript
-
-
-