fix race condition

mdxts/package.json

@@ -75,6 +75,7 @@
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/mdx": "^2.3.0",
     "@next/mdx": "13.4.19",
+    "@preact/signals-core": "^1.5.0",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.94",
     "@types/hast": "^3.0.0",

mdxts/src/components/Code.tsx

@@ -5,6 +5,7 @@ import type { SourceFile } from 'ts-morph'
 import { getHighlighter, type Theme } from './highlighter'
 import { project } from './project'
 import { CodeView } from './CodeView'
+import { registerCodeComponent, unregisterCodeComponent } from './state'
 
 export type BaseCodeProps = {
   /** Name of the file. */
@@ -82,6 +83,11 @@ export async function Code({
   isNestedInEditor,
   ...props
 }: CodeProps) {
+  const id =
+    'source' in props ? props.source : filenameProp ?? `${filenameId++}`
+
+  registerCodeComponent(id)
+
   let finalValue
   let finalLanguage = languageMap[language] ?? language
   let isJsxOnly = false
@@ -105,8 +111,7 @@ export async function Code({
   const filename =
     'source' in props
       ? props.source
-      : filenameProp ?? `${filenameId++}.mdxts.${finalLanguage}`
-  const highlighter = await getHighlighter({ theme })
+      : filenameProp ?? `${id}.mdxts.${finalLanguage}`
   let sourceFile: SourceFile
 
   if (['js', 'jsx', 'ts', 'tsx'].includes(finalLanguage)) {
@@ -128,6 +133,9 @@ export async function Code({
     sourceFile.formatText({ indentSize: 2 })
   }
 
+  unregisterCodeComponent(id)
+
+  const highlighter = await getHighlighter({ theme })
   const tokens = highlighter(finalValue, finalLanguage, sourceFile, isJsxOnly)
 
   return (

mdxts/src/components/Preview.tsx

@@ -2,8 +2,11 @@ import React from 'react'
 import { bundle } from '../utils/bundle'
 import { ClientComponent } from './ClientComponent'
 import { project } from './project'
+import { waitUntilAllCodesProcessed } from './state'
 
 export async function Preview({ source }: { source: string }) {
+  await waitUntilAllCodesProcessed()
+
   const code = await bundle(project, source)
 
   if (!code) {

mdxts/src/components/RegisterSourceFile.tsx

@@ -1,5 +1,4 @@
 'use client'
-import { useLayoutEffect } from 'react'
 import { project } from './project'
 
 /** Registers code block source files on the client. */
@@ -10,17 +9,15 @@ export function RegisterSourceFile({
   filename: string
   source: string
 }) {
-  useLayoutEffect(() => {
-    if (!source) {
-      return
-    }
+  if (!source) {
+    return
+  }
 
-    const sourceFile = project.getSourceFile(filename)
+  const sourceFile = project.getSourceFile(filename)
 
-    if (!sourceFile) {
-      project.createSourceFile(filename, source)
-    }
-  }, [])
+  if (!sourceFile) {
+    project.createSourceFile(filename, source)
+  }
 
   return null
 }

mdxts/src/components/client/Editor.tsx

@@ -7,7 +7,6 @@ import React, {
   useState,
 } from 'react'
 import type { Diagnostic, SourceFile } from 'ts-morph'
-import { useMdxtsContext } from '../../context'
 import { getDiagnosticMessageText } from '../diagnostics'
 import type { Highlighter, Theme, Tokens } from '../highlighter'
 import { getHighlighter } from '../highlighter'
@@ -65,7 +64,6 @@ export function Editor({
   className,
   children,
 }: EditorProps & { children?: React.ReactNode }) {
-  const mdxtsContext = useMdxtsContext()
   const filenameId = useId()
   const filename = filenameProp || `index-${filenameId.slice(1, -1)}.tsx`
   const language = languageMap[languageProp] || languageProp

mdxts/src/components/project.ts

@@ -1,4 +1,5 @@
 import { Project, ts } from 'ts-morph'
+import { readFile } from 'node:fs/promises'
 
 export const project = new Project({
   compilerOptions: {

mdxts/src/components/state.ts

@@ -0,0 +1,41 @@
+import { signal, effect } from '@preact/signals-core'
+
+const activeCodeComponents = signal<Set<any> | null>(null)
+
+const areAllCodesProcessed = signal(false)
+
+export function registerCodeComponent(id) {
+  if (activeCodeComponents.value === null) {
+    activeCodeComponents.value = new Set([id])
+  } else {
+    activeCodeComponents.value.add(id)
+  }
+}
+
+export function unregisterCodeComponent(id) {
+  activeCodeComponents.value.delete(id)
+  if (activeCodeComponents.value.size === 0) {
+    areAllCodesProcessed.value = true
+  }
+}
+
+effect(() => {
+  if (activeCodeComponents.value?.size === 0) {
+    areAllCodesProcessed.value = true
+  }
+})
+
+export function waitUntilAllCodesProcessed() {
+  return new Promise((resolve) => {
+    if (areAllCodesProcessed.value) {
+      resolve(null)
+    } else {
+      const stop = effect(() => {
+        if (areAllCodesProcessed.value) {
+          stop()
+          resolve(null)
+        }
+      })
+    }
+  })
+}

mdxts/src/index.tsx

@@ -1,10 +1,6 @@
-import React from 'react'
 import title from 'title'
 import type { ComponentType } from 'react'
 import type { CodeBlocks, Headings } from './remark'
-import { MdxtsProvider } from './context'
-
-export * from './context'
 
 export type Module = {
   Component: ComponentType
@@ -30,11 +26,6 @@ function parseModule(module, filename: string) {
   const slug = pathname.split('/').pop()
 
   return {
-    // Component: (props) => (
-    //   <MdxtsProvider value={{ codeBlocks }}>
-    //     <Component {...props} />
-    //   </MdxtsProvider>
-    // ),
     Component,
     title: module.metadata?.title || module.headings?.[0]?.text || title(slug),
     pathname,

mdxts/src/utils/bundle.ts

@@ -17,16 +17,27 @@ export async function bundle(
     ...external,
   ]
   const inMemoryFiles = {}
+  let entryFilePresent = false
 
   project.getSourceFiles().forEach((sourceFile) => {
     if (sourceFile.isInNodeModules()) {
       return
     }
     const filePath = sourceFile.getFilePath()
     const fileContents = sourceFile.getFullText()
+
     inMemoryFiles[filePath] = fileContents
+
+    if (filePath === ensureLeadingSlash(entryPoint)) {
+      entryFilePresent = true
+    }
   })
 
+  if (!entryFilePresent) {
+    console.error(`mdxts esbuild: Entry point not found for ${entryPoint}`)
+    return null
+  }
+
   if (Object.keys(inMemoryFiles).length === 0) {
     return null
   }
@@ -103,7 +114,7 @@ export async function bundle(
             }
 
             return {
-              errors: [{ text: `File not found: ${path}` }],
+              errors: [{ text: `mdxts esbuild: File not found: ${path}` }],
             }
           })
         },