fix: app lazy

packages/erd-editor-app/src/store/modules/schema/index.ts → packages/erd-editor-app/src/atoms/modules/schema/index.ts

@@ -1,9 +1,9 @@
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { atomWithImmer } from 'jotai-immer';
 
+import { selectedSchemaIdAtom } from '@/atoms/modules/sidebar';
 import { getAppDatabaseService } from '@/services/indexeddb';
 import { SchemaEntity } from '@/services/indexeddb/modules/schema';
-import { selectedSchemaIdAtom } from '@/store/modules/sidebar';
 
 const schemaEntitiesAtom = atomWithImmer<Array<Omit<SchemaEntity, 'value'>>>(
   []

packages/erd-editor-app/src/components/app/App.tsx

@@ -3,9 +3,9 @@ import { Theme } from '@radix-ui/themes';
 import { useAtom } from 'jotai';
 import { DevTools } from 'jotai-devtools';
 
+import { themeAtom } from '@/atoms/modules/theme';
 import Sidebar from '@/components/sidebar/Sidebar';
 import Viewer from '@/components/viewer/Viewer';
-import { themeAtom } from '@/store/modules/theme';
 
 import * as styles from './App.styles';
 

packages/erd-editor-app/src/components/sidebar/Sidebar.tsx

@@ -2,16 +2,16 @@ import { Button, Flex, ScrollArea } from '@radix-ui/themes';
 import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 
-import SidebarAddItem from '@/components/sidebar/sidebar-add-item/SidebarAddItem';
-import SidebarItem from '@/components/sidebar/sidebar-item/SidebarItem';
 import {
   useAddSchemaEntity,
   useDeleteSchemaEntity,
   useSchemaEntities,
   useUpdateSchemaEntities,
   useUpdateSchemaEntity,
-} from '@/store/modules/schema';
-import { selectedSchemaIdAtom } from '@/store/modules/sidebar';
+} from '@/atoms/modules/schema';
+import { selectedSchemaIdAtom } from '@/atoms/modules/sidebar';
+import SidebarAddItem from '@/components/sidebar/sidebar-add-item/SidebarAddItem';
+import SidebarItem from '@/components/sidebar/sidebar-item/SidebarItem';
 
 import * as styles from './Sidebar.styles';
 

packages/erd-editor-app/src/components/viewer/Viewer.tsx

@@ -1,7 +1,7 @@
 import { Flex, Link, Text } from '@radix-ui/themes';
 import { lazy, Suspense } from 'react';
 
-import { useSchemaEntity } from '@/store/modules/sidebar';
+import { useSchemaEntity } from '@/atoms/modules/sidebar';
 
 import * as styles from './Viewer.styles';
 

packages/erd-editor-app/src/components/viewer/editor/Editor.tsx

@@ -2,17 +2,18 @@ import {
   ErdEditorElement,
   setGetShikiServiceCallback,
 } from '@dineug/erd-editor';
-import { getShikiService } from '@dineug/erd-editor-shiki-worker';
 import { useAtom } from 'jotai';
 import { useLayoutEffect, useRef } from 'react';
 
+import { useUpdateSchemaEntityValue } from '@/atoms/modules/sidebar';
+import { themeAtom } from '@/atoms/modules/theme';
 import { SchemaEntity } from '@/services/indexeddb/modules/schema';
-import { useUpdateSchemaEntityValue } from '@/store/modules/sidebar';
-import { themeAtom } from '@/store/modules/theme';
 
 import * as styles from './Editor.styles';
 
-setGetShikiServiceCallback(getShikiService);
+import('@dineug/erd-editor-shiki-worker').then(({ getShikiService }) => {
+  setGetShikiServiceCallback(getShikiService);
+});
 
 interface EditorProps {
   entity: SchemaEntity;

packages/erd-editor/src/components/erd-editor/ErdEditor.ts

@@ -114,7 +114,7 @@ const ErdEditor: FC<ErdEditorProps, ErdEditorElement> = (props, ctx) => {
   });
 
   const checkAndFocus = () => {
-    window.setTimeout(() => {
+    setTimeout(() => {
       if (document.activeElement !== ctx) {
         ctx.focus();
       }
@@ -126,7 +126,7 @@ const ErdEditor: FC<ErdEditorProps, ErdEditorElement> = (props, ctx) => {
   };
 
   let currentFocus = false;
-  let timerId = -1;
+  let timerId: any = -1;
 
   const handleFocus = () => {
     currentFocus = true;
@@ -136,8 +136,8 @@ const ErdEditor: FC<ErdEditorProps, ErdEditorElement> = (props, ctx) => {
   const handleFocusout = () => {
     currentFocus = false;
 
-    window.clearTimeout(timerId);
-    timerId = window.setTimeout(() => {
+    clearTimeout(timerId);
+    timerId = setTimeout(() => {
       state.isFocus = currentFocus;
     }, 10);
   };

packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts

@@ -145,7 +145,7 @@ const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
   };
 
   let currentFocus = false;
-  let timerId = -1;
+  let timerId: any = -1;
 
   const handleFocus = () => {
     currentFocus = true;
@@ -156,8 +156,8 @@ const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
 
     currentFocus = false;
 
-    window.clearTimeout(timerId);
-    timerId = window.setTimeout(() => {
+    clearTimeout(timerId);
+    timerId = setTimeout(() => {
       const input = root.value?.querySelector('input');
       const isFocus = currentFocus && input && props.edit;
 

packages/erd-editor/src/components/erd/useErdShortcut.ts

@@ -98,7 +98,7 @@ export function useErdShortcut(ctx: Ctx) {
       event.preventDefault();
       store.dispatch(focusMoveTableAction$(event.key, event.shiftKey));
 
-      window.setTimeout(() => {
+      setTimeout(() => {
         if (
           !editor.focusTable ||
           isToggleColumnTypes(editor.focusTable.focusType)

packages/erd-editor/src/hooks/useDarkMode.ts

@@ -3,7 +3,7 @@ import { observable, onMounted } from '@dineug/r-html';
 import { useUnmounted } from '@/hooks/useUnmounted';
 
 export function useDarkMode() {
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const mediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
   const state = observable(
     {
       isDark: mediaQuery.matches,

packages/erd-editor/src/utils/device-detect/index.ts

@@ -32,7 +32,7 @@ export const isSafari =
   browser.name === BrowserTypes.MobileSafari;
 
 function getIOS13() {
-  const nav = window.navigator || navigator;
+  const nav = globalThis.navigator || navigator;
   return (
     nav &&
     (/iPad|iPhone|iPod/.test(nav.platform) ||