From 338687937a682fbb69404b0f0047c50adcc29a37 Mon Sep 17 00:00:00 2001 From: dineug Date: Fri, 29 Dec 2023 07:54:21 +0900 Subject: [PATCH] fix: app lazy --- .../src/{store => atoms}/modules/schema/index.ts | 2 +- .../src/{store => atoms}/modules/sidebar/index.ts | 0 .../src/{store => atoms}/modules/theme/index.ts | 0 packages/erd-editor-app/src/components/app/App.tsx | 2 +- .../erd-editor-app/src/components/sidebar/Sidebar.tsx | 8 ++++---- packages/erd-editor-app/src/components/viewer/Viewer.tsx | 2 +- .../src/components/viewer/editor/Editor.tsx | 9 +++++---- .../erd-editor/src/components/erd-editor/ErdEditor.ts | 8 ++++---- .../table/column/column-data-type/ColumnDataType.ts | 6 +++--- packages/erd-editor/src/components/erd/useErdShortcut.ts | 2 +- packages/erd-editor/src/hooks/useDarkMode.ts | 2 +- packages/erd-editor/src/utils/device-detect/index.ts | 2 +- 12 files changed, 22 insertions(+), 21 deletions(-) rename packages/erd-editor-app/src/{store => atoms}/modules/schema/index.ts (97%) rename packages/erd-editor-app/src/{store => atoms}/modules/sidebar/index.ts (100%) rename packages/erd-editor-app/src/{store => atoms}/modules/theme/index.ts (100%) diff --git a/packages/erd-editor-app/src/store/modules/schema/index.ts b/packages/erd-editor-app/src/atoms/modules/schema/index.ts similarity index 97% rename from packages/erd-editor-app/src/store/modules/schema/index.ts rename to packages/erd-editor-app/src/atoms/modules/schema/index.ts index 63f4323f..b3c26222 100644 --- a/packages/erd-editor-app/src/store/modules/schema/index.ts +++ b/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>>( [] diff --git a/packages/erd-editor-app/src/store/modules/sidebar/index.ts b/packages/erd-editor-app/src/atoms/modules/sidebar/index.ts similarity index 100% rename from packages/erd-editor-app/src/store/modules/sidebar/index.ts rename to packages/erd-editor-app/src/atoms/modules/sidebar/index.ts diff --git a/packages/erd-editor-app/src/store/modules/theme/index.ts b/packages/erd-editor-app/src/atoms/modules/theme/index.ts similarity index 100% rename from packages/erd-editor-app/src/store/modules/theme/index.ts rename to packages/erd-editor-app/src/atoms/modules/theme/index.ts diff --git a/packages/erd-editor-app/src/components/app/App.tsx b/packages/erd-editor-app/src/components/app/App.tsx index 13aab6b5..bd8d1a0d 100644 --- a/packages/erd-editor-app/src/components/app/App.tsx +++ b/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'; diff --git a/packages/erd-editor-app/src/components/sidebar/Sidebar.tsx b/packages/erd-editor-app/src/components/sidebar/Sidebar.tsx index 5cb26f40..bf50f594 100644 --- a/packages/erd-editor-app/src/components/sidebar/Sidebar.tsx +++ b/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'; diff --git a/packages/erd-editor-app/src/components/viewer/Viewer.tsx b/packages/erd-editor-app/src/components/viewer/Viewer.tsx index 0ceff4c5..8bfa8ed4 100644 --- a/packages/erd-editor-app/src/components/viewer/Viewer.tsx +++ b/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'; diff --git a/packages/erd-editor-app/src/components/viewer/editor/Editor.tsx b/packages/erd-editor-app/src/components/viewer/editor/Editor.tsx index cc4f6b5f..a62b042f 100644 --- a/packages/erd-editor-app/src/components/viewer/editor/Editor.tsx +++ b/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; diff --git a/packages/erd-editor/src/components/erd-editor/ErdEditor.ts b/packages/erd-editor/src/components/erd-editor/ErdEditor.ts index eb8ba942..56f54e33 100644 --- a/packages/erd-editor/src/components/erd-editor/ErdEditor.ts +++ b/packages/erd-editor/src/components/erd-editor/ErdEditor.ts @@ -114,7 +114,7 @@ const ErdEditor: FC = (props, ctx) => { }); const checkAndFocus = () => { - window.setTimeout(() => { + setTimeout(() => { if (document.activeElement !== ctx) { ctx.focus(); } @@ -126,7 +126,7 @@ const ErdEditor: FC = (props, ctx) => { }; let currentFocus = false; - let timerId = -1; + let timerId: any = -1; const handleFocus = () => { currentFocus = true; @@ -136,8 +136,8 @@ const ErdEditor: FC = (props, ctx) => { const handleFocusout = () => { currentFocus = false; - window.clearTimeout(timerId); - timerId = window.setTimeout(() => { + clearTimeout(timerId); + timerId = setTimeout(() => { state.isFocus = currentFocus; }, 10); }; diff --git a/packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts b/packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts index b8feb5b7..6d15dd70 100644 --- a/packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts +++ b/packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts @@ -145,7 +145,7 @@ const ColumnDataType: FC = (props, ctx) => { }; let currentFocus = false; - let timerId = -1; + let timerId: any = -1; const handleFocus = () => { currentFocus = true; @@ -156,8 +156,8 @@ const ColumnDataType: FC = (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; diff --git a/packages/erd-editor/src/components/erd/useErdShortcut.ts b/packages/erd-editor/src/components/erd/useErdShortcut.ts index 7fab6873..f427db8c 100644 --- a/packages/erd-editor/src/components/erd/useErdShortcut.ts +++ b/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) diff --git a/packages/erd-editor/src/hooks/useDarkMode.ts b/packages/erd-editor/src/hooks/useDarkMode.ts index 0980104e..3e1d0b35 100644 --- a/packages/erd-editor/src/hooks/useDarkMode.ts +++ b/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, diff --git a/packages/erd-editor/src/utils/device-detect/index.ts b/packages/erd-editor/src/utils/device-detect/index.ts index cd69e129..820bd708 100644 --- a/packages/erd-editor/src/utils/device-detect/index.ts +++ b/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) ||