import { ErrorBoundary, lazy, Suspense } from 'solid-js'import { RouteDefinition } from '@solidjs/router'import useFindAllProject from './hooks/project/useFindAllProject'import E404 from './screens/E404'import Home from './screens/Home'import MainLayout from './screens/MainLayout'const ProjectsLayout = lazy(() => import('./screens/projects/ProjectsLayout'))const Projects = lazy(() => import('./screens/projects'))const Project = lazy(() => import('./screens/projects/project'))const routes: RouteDefinition[] = [ { path: '/', component: MainLayout, children: [ { path: '/', component: Home }, { path: '/projects', data: useFindAllProject, component: () => ( <ErrorBoundary fallback={(e) => <>{e.message}</>}> <Suspense fallback={<>LOADING</>}> <ProjectsLayout /> </Suspense> </ErrorBoundary> ), children: [ { path: '/', component: () => ( <Suspense fallback={<>LOADING</>}> <Projects /> </Suspense> ) }, { path: '/:projectId', component: () => ( <Suspense fallback={<>LOADING</>}> <Project /> </Suspense> ) } ] }, { path: '/*', component: E404 } ] }]export default routes
App
const App = (): JSX.Element => { return ( <Suspense> <I18nProvider> <ProjectProvider> <Router> <ErrorBoundary fallback={(e) => <>{e.message}</>}> <Routes> <Route path="/" component={MainLayout}> <Route path="/" component={Home} /> <Route path="/projects" data={useFindAllProject} component={() => ( <ErrorBoundary fallback={(e) => <>{e.message}</>}> <ProjectsLayout /> </ErrorBoundary> )} > <Route path="/" component={Projects} /> <Route path="/:projectId" component={Project} /> </Route> <Route path="/*" component={E404} /> </Route> </Routes> </ErrorBoundary> </Router> </ProjectProvider> </I18nProvider> </Suspense> )}
const App = (): JSX.Element => { return ( <Suspense> <I18nProvider> <ProjectProvider> <Router> <ErrorBoundary fallback={(e) => <>{e.message}</>}> <Routes> <Route path="/" component={MainLayout}> <Route path="/" component={Home} /> <ErrorBoundary fallback={(e) => <>{e.message}</>}> <Route path="/projects" data={useFindAllProject} component={ProjectsLayout} > <Route path="/" component={Projects} /> <Route path="/:projectId" component={Project} /> </Route> </ErrorBoundary> <Route path="/*" component={E404} /> </Route> </Routes> </ErrorBoundary> </Router> </ProjectProvider> </I18nProvider> </Suspense> )}
/** * Store type */type StoreState = { readonly toolMode: ToolMode readonly cursor: string readonly drawColor: string readonly drawWidth: number}/** * Context type */type ContextState = [ state: StoreState, actions: { /** * Set Tool Mode * @param toolMode */ setToolMode: (toolMode: ToolMode) => void /** * Set cursor * @param cursor */ setCursor: (cursor: string) => void /** * Set Draw Color * @param drawColor */ setDrawColor: (drawColor: string) => void /** * Set Draw Width * @param drawWidth */ setDrawWidth: (drawWidth: number) => void }]/** * Initial state of the store */const initialState: StoreState = { toolMode: ToolMode.CURSOR, cursor: 'inherit', drawColor: '#000000', drawWidth: 3}/** * Context */const UxContext = createContext<ContextState>()
setState( 'layers', layerIndex, produce(layer => { if (!layer.features) layer.features = [] }, 'features', produce(...))
