perf(vite): add dynamic imports
This commit is contained in:
parent
78e15f6218
commit
85921a0a08
29 changed files with 470 additions and 326 deletions
|
|
@ -24,6 +24,7 @@
|
|||
"@tensamin/cache": "workspace:*",
|
||||
"@tensamin/crypto": "workspace:*",
|
||||
"@tensamin/hotkeys": "workspace:*",
|
||||
"@tensamin/markdown": "workspace:*",
|
||||
"@tensamin/mtp": "workspace:*",
|
||||
"@tensamin/shared": "workspace:*",
|
||||
"@tensamin/storage": "workspace:*",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Button } from "@methanium/ui";
|
||||
import { Emoji } from "@methanium/ui/markdown";
|
||||
import Emoji from "@tensamin/markdown/emoji";
|
||||
import { getRecentEmojis, useEmojiRanks } from "./emojiRanks";
|
||||
|
||||
export default function EmojiPicker({
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useStorage } from "@tensamin/storage/context";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { normalizeShortcode } from "@methanium/ui/markdown";
|
||||
import { normalizeShortcode } from "@tensamin/markdown/emoji";
|
||||
|
||||
const RANKS_CHANGED_EVENT = "tensamin-reaction-ranks-changed";
|
||||
let recordQueue = Promise.resolve();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Input, type InputController } from "@methanium/ui/markdown";
|
||||
import Input, { type InputController } from "@tensamin/markdown/input";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
|
|
@ -10,7 +10,14 @@ import {
|
|||
PopoverTrigger,
|
||||
} from "@methanium/ui";
|
||||
import { useStorage } from "@tensamin/storage/context";
|
||||
import React, { useCallback, useEffect, useState, useRef } from "react";
|
||||
import React, {
|
||||
lazy,
|
||||
Suspense,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { Button } from "@methanium/ui";
|
||||
|
||||
import { Plus, Laugh, FileVideo, SendHorizonal } from "lucide-react";
|
||||
|
|
@ -21,14 +28,15 @@ import { cn, useIsMobile } from "@methanium/ui";
|
|||
import { encryptChatText } from "@tensamin/crypto/chatSecret";
|
||||
|
||||
import { useSession } from "@tensamin/storage/session";
|
||||
import EmojiPicker from "./emoji/emojiPicker";
|
||||
import { useEmojiRanks, useRecordEmojiUse } from "./emoji/emojiRanks";
|
||||
import GifPicker from "./media/gifPicker";
|
||||
import ReplyBox from "./replyBox";
|
||||
import { useHotkey } from "@tensamin/hotkeys";
|
||||
import { editLastMessageHotkey } from "../hotkeys";
|
||||
import { useUser } from "@tensamin/identity/context";
|
||||
|
||||
const EmojiPicker = lazy(() => import("./emoji/emojiPicker"));
|
||||
const GifPicker = lazy(() => import("./media/gifPicker"));
|
||||
|
||||
export default function InputComponent({
|
||||
value,
|
||||
setValue,
|
||||
|
|
@ -351,13 +359,15 @@ export default function InputComponent({
|
|||
)}
|
||||
/>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<EmojiPicker
|
||||
onSelect={(shortcode) => {
|
||||
setValue(`${value}${shortcode} `);
|
||||
recordUse(shortcode);
|
||||
setEmojiPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
<Suspense fallback={null}>
|
||||
<EmojiPicker
|
||||
onSelect={(shortcode) => {
|
||||
setValue(`${value}${shortcode} `);
|
||||
recordUse(shortcode);
|
||||
setEmojiPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{isMobile ? (
|
||||
|
|
@ -371,12 +381,14 @@ export default function InputComponent({
|
|||
</DrawerTrigger>
|
||||
<DrawerContent className="h-[80dvh]">
|
||||
<div className="min-h-0 flex-1 p-3">
|
||||
<GifPicker
|
||||
onSelect={(url) => {
|
||||
void handleSubmit(url, true);
|
||||
setGifPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
<Suspense fallback={null}>
|
||||
<GifPicker
|
||||
onSelect={(url) => {
|
||||
void handleSubmit(url, true);
|
||||
setGifPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
|
@ -408,14 +420,16 @@ export default function InputComponent({
|
|||
className="absolute left-0 top-0 z-10 h-4 w-4 cursor-nwse-resize"
|
||||
onPointerDown={handleGifPopoverResizeStart}
|
||||
/>
|
||||
<GifPicker
|
||||
resizeHeight={gifPopoverSize?.height}
|
||||
resizeWidth={gifPopoverSize?.width}
|
||||
onSelect={(url) => {
|
||||
void handleSubmit(url, true);
|
||||
setGifPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
<Suspense fallback={null}>
|
||||
<GifPicker
|
||||
resizeHeight={gifPopoverSize?.height}
|
||||
resizeWidth={gifPopoverSize?.width}
|
||||
onSelect={(url) => {
|
||||
void handleSubmit(url, true);
|
||||
setGifPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Text } from "@methanium/ui/markdown";
|
||||
import Text from "@tensamin/markdown/text";
|
||||
import { useStorage } from "@tensamin/storage/context";
|
||||
import {
|
||||
Avatar,
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@ import { useMTP } from "@tensamin/mtp";
|
|||
import { getMessage, useChat } from "../context";
|
||||
import { decryptChatText, encryptChatText } from "@tensamin/crypto/chatSecret";
|
||||
import { log, toast } from "@tensamin/shared/log";
|
||||
import { Emoji, Input, normalizeShortcode, Text } from "@methanium/ui/markdown";
|
||||
import Emoji, { normalizeShortcode } from "@tensamin/markdown/emoji";
|
||||
import Input from "@tensamin/markdown/input";
|
||||
import Text from "@tensamin/markdown/text";
|
||||
import { useRecordEmojiUse } from "./emoji/emojiRanks";
|
||||
import ReplyBox from "./replyBox";
|
||||
import { useHotkey } from "@tensamin/hotkeys";
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ import type {
|
|||
Ref,
|
||||
} from "react";
|
||||
import { useChat } from "../context";
|
||||
import { Emoji } from "@methanium/ui/markdown";
|
||||
import Emoji from "@tensamin/markdown/emoji";
|
||||
import EmojiPicker from "./emoji/emojiPicker";
|
||||
import { getRecentEmojis, useEmojiRanks } from "./emoji/emojiRanks";
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {
|
|||
cn,
|
||||
Skeleton,
|
||||
} from "@methanium/ui";
|
||||
import { Text } from "@methanium/ui/markdown";
|
||||
import Text from "@tensamin/markdown/text";
|
||||
import type { SelectedUser } from "@tensamin/identity/context";
|
||||
import Wrapper from "@tensamin/identity/wrapper";
|
||||
import { Forward, X } from "lucide-react";
|
||||
|
|
|
|||
Loading…
Reference in a new issue