External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

perf(bundle): replace plebbit-js imports with local utility, split chunks, fix CLS and rerenders

Browse Source 
Eliminate direct @plebbit/plebbit-js (8.7MB) imports from all UI components by replacing
Plebbit.getShortAddress() with a local get-short-address utility. Add Vite manual chunks for
plebbit-js, plebbit-react-hooks, and react-spring/use-gesture. Fix catalog CLS by matching
skeleton to wrapper dimensions. Lazy-load ChallengeModal and ReplyModal. Add failed-URL cache
to useFetchGifFirstFrame, optimize useHide selector, and memoize useFeed options in mod-queue.
This commit is contained in:
plebeius
2026-02-26 16:42:36 +08:00
parent cd71602730
commit 4bdee0362d
16 changed files with 92 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-header/board-header.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { useLocation, useParams, useNavigate } from 'react-router-dom';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import useAccountsStore from '@plebbit/plebbit-react-hooks/dist/stores/accounts';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../lib/get-short-address';
import { useStableSubplebbit } from '../../hooks/use-stable-subplebbit';
import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils';
import styles from './board-header.module.css';
@@ -95,7 +95,7 @@ const BoardHeader = () => {
? shortAddress.endsWith('.eth') || shortAddress.endsWith('.sol')
? shortAddress.slice(0, -4)
: shortAddress
: subplebbitAddress && Plebbit.getShortAddress({ address: subplebbitAddress }))}
: subplebbitAddress && getShortAddress(subplebbitAddress))}
{!isInAllView && !isInSubscriptionsView && !isInModView && <OfflineIndicator subplebbitAddress={subplebbitAddress} />}
</div>
<div className={styles.boardSubtitle}>
src/components/boardsbar/boardsbar.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../lib/get-short-address';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import useAccountsStore from '@plebbit/plebbit-react-hooks/dist/stores/accounts';
import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
@@ -200,7 +200,7 @@ const BoardsBarDesktop = () => {
// Render a subscription link
const renderSubscription = (address: string, index: number, total: number) => {
const boardPath = getBoardPath(address, directories);
const displayText = address.endsWith('.eth') || address.endsWith('.sol') ? address : Plebbit.getShortAddress({ address });
const displayText = address.endsWith('.eth') || address.endsWith('.sol') ? address : getShortAddress(address);
return (
<span key={address}>
src/components/catalog-row/catalog-row.module.css
+2 -2
View File
@@ -110,8 +110,8 @@
}
.loadingSkeleton {
width: var(--maxWidth);
height: var(--maxHeight);
width: 100%;
height: 100%;
display: inline-block;
}
src/components/catalog-row/catalog-row.tsx
+4 -4
View File
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { useFloating, offset, size, Placement } from '@floating-ui/react';
import { Comment, useReplies } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../lib/get-short-address';
import { shouldShowSnow } from '../../lib/snow';
import { getHasThumbnail } from '../../lib/utils/media-utils';
import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
@@ -57,8 +57,8 @@ export const CatalogPostMedia = ({ cid, commentMediaInfo, linkWidth, linkHeight
}
if (type === 'audio') {
displayWidth = 'unset';
displayHeight = 'unset';
displayWidth = `${maxThumbnailSize}px`;
displayHeight = '54px';
}
const numericWidth = parseInt(displayWidth) || undefined;
@@ -288,7 +288,7 @@ const CatalogPost = memo(
{author?.displayName || capitalize(t('anonymous'))}
{isCatalogPostAuthorMod && <span className='capitalize'>{` ## Board ${catalogPostAuthorRole}`}</span>}
</span>
{(isInAllView || isInSubscriptionsView) && subplebbitAddress && ` to p/${Plebbit.getShortAddress({ address: subplebbitAddress })}`}
{(isInAllView || isInSubscriptionsView) && subplebbitAddress && ` to p/${getShortAddress(subplebbitAddress)}`}
<span className={styles.postAgo}> {getFormattedTimeAgo(timestamp)}</span>
{replyCount > 0 && (
<div className={styles.postLast}>
src/components/comment-content/comment-content.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
import { Comment, useComment } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import usePostNumberStore from '../../stores/use-post-number-store';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../lib/get-short-address';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isPostPageView } from '../../lib/utils/view-utils';
import useIsMobile from '../../hooks/use-is-mobile';
@@ -253,7 +253,7 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
<br />
<Tooltip
content={`${t('ban_expires_at', {
address: subplebbitAddress && Plebbit.getShortAddress({ address: subplebbitAddress }),
address: subplebbitAddress && getShortAddress(subplebbitAddress),
timestamp: getFormattedDate(post?.author?.subplebbit?.banExpiresAt),
interpolation: { escapeValue: false },
})}${reason ? `. ${capitalize(t('reason'))}: "${reason}"` : ''}`}
src/components/post-desktop/post-desktop.tsx
+4 -4
View File
@@ -3,7 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { Comment, useEditedComment, useReplies, useAccount, useAccountComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../lib/get-short-address';
import styles from '../../views/post/post.module.css';
import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/post-utils';
@@ -211,7 +211,7 @@ const PostInfo = ({
const alertThresholdSeconds = getAlertThresholdSeconds();
const isOverThreshold = isAwaitingApproval && timeWaiting > alertThresholdSeconds;
const userID = address && Plebbit.getShortAddress({ address }); // shortened to 8 chars for display; users can verify the full user ID via "Copy user ID" in the post menu to guard against spoofing
const userID = address && getShortAddress(address); // shortened to 8 chars for display; users can verify the full user ID via "Copy user ID" in the post menu to guard against spoofing
const userIDBackgroundColor = hashStringToColor(userID);
const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
@@ -562,7 +562,7 @@ const PostMedia = ({
? boardPath
: subplebbitAddress.endsWith('.eth') || subplebbitAddress.endsWith('.sol')
? subplebbitAddress
: Plebbit.getShortAddress({ address: subplebbitAddress });
: getShortAddress(subplebbitAddress);
return (
<div className={styles.file}>
@@ -741,7 +741,7 @@ const PostDesktop = ({
? boardPath
: subplebbitAddress.endsWith('.eth') || subplebbitAddress.endsWith('.sol')
? subplebbitAddress
: Plebbit.getShortAddress({ address: subplebbitAddress })
: getShortAddress(subplebbitAddress)
: undefined;
const { hidden, unhide, hide } = useHide({ cid });
src/components/post-form/post-form.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { Comment, setAccount, useAccount, useAccountComment, useAccountSubplebbits, useEditedComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../lib/get-short-address';
import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import { getHasThumbnail, getLinkMediaInfo } from '../../lib/utils/media-utils';
@@ -280,7 +280,7 @@ const PostFormFields = ({
{isInModView &&
accountSubplebbitAddresses.map((address: string) => (
<option key={address} value={address}>
{address && Plebbit.getShortAddress({ address })}
{address && getShortAddress(address)}
</option>
))}
{isInSubscriptionsView &&
src/components/post-mobile/post-mobile.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { Comment, useEditedComment, useReplies, useAccount, usePublishCommentModeration, useAccountComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../lib/get-short-address';
import styles from '../../views/post/post.module.css';
import { shouldShowSnow } from '../../lib/snow';
import { getHasThumbnail } from '../../lib/utils/media-utils';
@@ -66,7 +66,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
? boardPath
: subplebbitAddress.endsWith('.eth') || subplebbitAddress.endsWith('.sol')
? subplebbitAddress
: Plebbit.getShortAddress({ address: subplebbitAddress })
: getShortAddress(subplebbitAddress)
: undefined;
const isReply = parentCid;
const title = post?.title?.trim();
@@ -203,7 +203,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
return Math.max(domCount, 1);
})();
const userID = address && Plebbit.getShortAddress({ address }); // shortened to 8 chars for display; users can verify the full user ID via "Copy user ID" in the post menu to guard against spoofing
const userID = address && getShortAddress(address); // shortened to 8 chars for display; users can verify the full user ID via "Copy user ID" in the post menu to guard against spoofing
const userIDBackgroundColor = hashStringToColor(userID);
const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { setAccount, useAccount, useSubscribe } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../../lib/get-short-address';
import styles from './subscriptions-setting.module.css';
import { useTranslation } from 'react-i18next';
import { useState } from 'react';
@@ -79,7 +79,7 @@ const SubscriptionsSetting = () => {
<ul className={styles.subscriptions}>
{subscriptions?.map((address: string) => (
<li key={address} className={styles.subscription}>
{address && Plebbit.getShortAddress({ address })} <SubscriptionButton address={address} />
{address && getShortAddress(address)} <SubscriptionButton address={address} />
</li>
))}
</ul>