fix: trying to prevent error element unmount on global react components. This is bricking JS state

This commit is contained in:
Kevin Nadro
2025-04-14 11:28:08 -06:00
parent 8f3687106e
commit b3e1326921
5 changed files with 48 additions and 43 deletions

41
src/Root.tsx Normal file
View File

@ -0,0 +1,41 @@
import { AppStateProvider } from '@src/AppState'
import LspProvider from '@src/components/LspProvider'
import { MachineManagerProvider } from '@src/components/MachineManagerProvider'
import { OpenInDesktopAppHandler } from '@src/components/OpenInDesktopAppHandler'
import { ProjectsContextProvider } from '@src/components/ProjectsContextProvider'
import { SystemIOMachineLogicListener } from '@src/components/Providers/SystemIOProviderDesktop'
import { RouteProvider } from '@src/components/RouteProvider'
import { KclContextProvider } from '@src/lang/KclProvider'
import {Outlet} from 'react-router-dom'
import {useEffect} from "react"
function RootLayout () {
useEffect(() => {
console.log('MyComponent mounted');
return () => {
console.log('MyComponent unmounted');
};
}, []);
return(
<div>
<OpenInDesktopAppHandler>
<RouteProvider>
<LspProvider>
<ProjectsContextProvider>
<KclContextProvider>
<AppStateProvider>
<MachineManagerProvider>
<SystemIOMachineLogicListener />
<Outlet />
</MachineManagerProvider>
</AppStateProvider>
</KclContextProvider>
</ProjectsContextProvider>
</LspProvider>
</RouteProvider>
</OpenInDesktopAppHandler>
</div>
)
}
export default RootLayout

View File

@ -49,30 +49,14 @@ import Onboarding, { onboardingRoutes } from '@src/routes/Onboarding'
import { Settings } from '@src/routes/Settings'
import SignIn from '@src/routes/SignIn'
import { Telemetry } from '@src/routes/Telemetry'
import RootLayout from "@src/Root"
const createRouter = isDesktop() ? createHashRouter : createBrowserRouter
const router = createRouter([
{
id: PATHS.INDEX,
element: (
<OpenInDesktopAppHandler>
<RouteProvider>
<LspProvider>
<ProjectsContextProvider>
<KclContextProvider>
<AppStateProvider>
<MachineManagerProvider>
<SystemIOMachineLogicListener />
<Outlet />
</MachineManagerProvider>
</AppStateProvider>
</KclContextProvider>
</ProjectsContextProvider>
</LspProvider>
</RouteProvider>
</OpenInDesktopAppHandler>
),
element: <RootLayout/>,
errorElement: <ErrorPage />,
children: [
{

View File

@ -16,15 +16,13 @@ export function SystemIOMachineLogicListener() {
const projectDirectoryPath = useProjectDirectoryPath()
const navigate = useNavigate()
useEffect(() => {
// TODO: use a {requestedProjectName: string} to by pass this clear logic...
if (!requestedProjectName) {return}
if (!requestedProjectName.name) {return}
let projectPathWithoutSpecificKCLFile =
projectDirectoryPath + window.electron.path.sep + requestedProjectName
projectDirectoryPath + window.electron.path.sep + requestedProjectName.name
const requestedPath = `${PATHS.FILE}/${encodeURIComponent(
projectPathWithoutSpecificKCLFile
)}`
navigate(requestedPath)
systemIOActor.send({type:SystemIOMachineEvents.clearRequestedProjectName})
}, [requestedProjectName])
return null
}

View File

@ -38,9 +38,6 @@ export const systemIOMachine = setup({
type: SystemIOMachineEvents.openProject
data: { requestedProjectName: string }
}
| {
type: SystemIOMachineEvents.clearRequestedProjectName
},
},
actions: {
[SystemIOMachineActions.setFolders]: assign({
@ -61,13 +58,7 @@ export const systemIOMachine = setup({
[SystemIOMachineActions.setRequestedProjectName]: assign({
requestedProjectName: ({ event }) => {
assertEvent(event, SystemIOMachineEvents.openProject)
return event.data.requestedProjectName
},
}),
[SystemIOMachineActions.clearRequestedProjectName]: assign({
requestedProjectName: ({ event }) => {
assertEvent(event, SystemIOMachineEvents.clearRequestedProjectName)
return NO_PROJECT_DIRECTORY
return {name:event.data.requestedProjectName}
},
}),
},
@ -88,7 +79,7 @@ export const systemIOMachine = setup({
defaultProjectFolderName: DEFAULT_PROJECT_NAME,
projectDirectoryPath: NO_PROJECT_DIRECTORY,
hasListedProjects: false,
requestedProjectName: NO_PROJECT_DIRECTORY,
requestedProjectName: {name:NO_PROJECT_DIRECTORY},
}),
states: {
[SystemIOMachineStates.idle]: {
@ -101,7 +92,6 @@ export const systemIOMachine = setup({
actions: [SystemIOMachineActions.setProjectDirectoryPath],
},
[SystemIOMachineEvents.openProject]: {
target: SystemIOMachineStates.openingProject,
actions: [SystemIOMachineActions.setRequestedProjectName],
},
},
@ -123,12 +113,6 @@ export const systemIOMachine = setup({
},
},
[SystemIOMachineStates.openingProject] : {
on: {
[SystemIOMachineEvents.clearRequestedProjectName]: {
target: SystemIOMachineStates.idle,
actions: [SystemIOMachineActions.clearRequestedProjectName],
},
}
}
},
})

View File

@ -20,14 +20,12 @@ export enum SystemIOMachineEvents {
'read folders from project directory',
setProjectDirectoryPath = 'set project directory path',
openProject = 'open project',
clearRequestedProjectName = 'clear requested project name',
}
export enum SystemIOMachineActions {
setFolders = 'set folders',
setProjectDirectoryPath = 'set project directory path',
setRequestedProjectName = 'set requested project name',
clearRequestedProjectName = 'clear requested project name'
}
export const NO_PROJECT_DIRECTORY = ''
@ -43,5 +41,5 @@ export type SystemIOContext = {
// has the application gone through the initialiation of systemIOMachine at least once.
// this is required to prevent chokidar from spamming invalid events during initialization.
hasListedProjects: boolean
requestedProjectName: string
requestedProjectName: {name: string}
}