ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactoring] Fix some TS typings, update some dependencies (#1702)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-02-11 15:13:05 +01:00
parent 0e7f5658c4
commit 70774928fc
58 changed files with 1611 additions and 2099 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dev/localize/auto-localize.ts
View File

@ -1,4 +1,4 @@
// @ts-ignore
// @ts-nocheck
const replaceInFile = require('replace-in-file');
const langPackIOs = require('./en-ios.json');
const langPackExtra = require('./en-extra.json');

2
dev/localize/auto-relocalize.ts
View File

@ -1,4 +1,4 @@
// @ts-ignore
// @ts-nocheck
const replaceInFile = require('replace-in-file');
const langPackAndroid = require('./en-android.json');
const langPackIOs = require('./en-ios.json');

3506
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

36
package.json
View File

@ -32,7 +32,7 @@
"author": "Alexander Zinchuk (alexander@zinchuk.com)",
"license": "GPL-3.0-or-later",
"devDependencies": {
"@babel/core": "^7.16.12",
"@babel/core": "^7.17.0",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
@ -40,27 +40,27 @@
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@peculiar/webcrypto": "^1.2.3",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/jest-dom": "^5.16.2",
"@types/croppie": "^2.6.1",
"@types/css-font-loading-module": "0.0.7",
"@types/dom-mediacapture-record": "^1.0.11",
"@types/jest": "^27.4.0",
"@types/react": "^17.0.38",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@types/resize-observer-browser": "^0.1.6",
"@types/resize-observer-browser": "^0.1.7",
"@types/wicg-mediasession": "^1.1.3",
"@typescript-eslint/eslint-plugin": "^5.10.1",
"@typescript-eslint/parser": "^5.10.1",
"@typescript-eslint/eslint-plugin": "^5.11.0",
"@typescript-eslint/parser": "^5.11.0",
"@webpack-cli/serve": "^1.6.1",
"autoprefixer": "^10.4.2",
"babel-loader": "^8.2.3",
"browserlist": "^1.0.1",
"buffer": "^6.0.3",
"cross-env": "^7.0.3",
"css-loader": "^6.5.1",
"css-loader": "^6.6.0",
"css-minimizer-webpack-plugin": "^3.4.1",
"dotenv": "^14.3.2",
"eslint": "^8.7.0",
"dotenv": "^16.0.0",
"eslint": "^8.8.0",
"eslint-config-airbnb-typescript": "^16.1.0",
"eslint-config-react-app": "^7.0.0",
"eslint-import-resolver-webpack": "^0.13.2",
@ -71,31 +71,25 @@
"eslint-plugin-no-null": "^1.0.2",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-teactn": "github:korenskoy/eslint-plugin-teactn#8fbd2b9",
"file-loader": "^6.2.0",
"eslint-plugin-teactn": "git+https://github.com/korenskoy/eslint-plugin-teactn#c2c39dd005d58c07c24c4361de804dce1c6261b5",
"html-webpack-plugin": "^5.5.0",
"husky": "^7.0.4",
"jest": "^27.4.7",
"jest": "^27.5.0",
"jest-raw-loader": "^1.0.1",
"lint-staged": "^12.3.2",
"lint-staged": "^12.3.3",
"mini-css-extract-plugin": "^2.5.3",
"postcss-loader": "^6.2.1",
"postcss-modules": "^4.3.0",
"raw-loader": "^4.0.2",
"react": "^17.0.2",
"replace-in-file": "^6.3.2",
"sass": "^1.49.0",
"sass": "^1.49.7",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"terser": "^5.10.0",
"terser-webpack-plugin": "^5.3.0",
"ts-node": "^10.4.0",
"typescript": "^4.5.5",
"url-loader": "^4.1.1",
"webpack": "^5.67.0",
"webpack": "^5.68.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3",
"webpack-dev-server": "^4.7.4",
"webpack-merge": "^5.8.0"
},
"dependencies": {

25
src/@types/global.d.ts vendored
View File

@ -6,6 +6,9 @@ declare namespace React {
teactFastList?: boolean;
}
// Teact feature
interface CSSProperties extends String {}
interface Attributes {
// Optimization for DOM nodes reordering. Requires `teactFastList` for parent
teactOrderKey?: number;
@ -45,13 +48,35 @@ type EmojiWithSkins = Record<number, Emoji>;
type AllEmojis = Record<string, Emoji | EmojiWithSkins>;
// Declare supported for import formats as modules
declare module '*.png';
declare module '*.svg';
declare module '*.tgs';
declare module '*.txt' {
const content: string;
export default content;
}
declare module 'pako/dist/pako_inflate' {
function inflate(...args: any[]): string;
}
declare module 'opus-recorder' {
export interface IOpusRecorder extends Omit<MediaRecorder, 'start' | 'ondataavailable'> {
new(options: AnyLiteral): IOpusRecorder;
start(stream?: MediaStreamAudioSourceNode): void;
sourceNode: MediaStreamAudioSourceNode;
ondataavailable: (typedArray: Uint8Array) => void;
}
const recorder: IOpusRecorder;
export default recorder;
}
interface TEncodedImage {
result: Uint8ClampedArray;
width: number;

1
src/components/auth/AuthPhoneNumber.tsx
View File

@ -1,6 +1,5 @@
import { ChangeEvent } from 'react';
// @ts-ignore
import monkeyPath from '../../assets/monkey.svg';
import React, {

1
src/components/calls/group/GroupCallParticipantStreams.tsx
View File

@ -61,7 +61,6 @@ const GroupCallParticipantStreams: FC<OwnProps & StateProps> = ({
'videos',
shouldSpanLastVideo && 'span-last-video',
)}
// @ts-ignore teact feature
style={`--column-count: ${selectedVideo ? 1 : columnCount}`}
>
{selectedVideo && (

1
src/components/common/AnimatedEmoji.tsx
View File

@ -75,7 +75,6 @@ const AnimatedEmoji: FC<OwnProps> = ({
<div
ref={ref}
className={buildClassName('AnimatedEmoji media-inner', sticker.id === LIKE_STICKER_ID && 'like-sticker-thumb')}
// @ts-ignore teact feature
style={style}
onClick={handleClick}
>

1
src/components/common/AnimatedSticker.tsx
View File

@ -223,7 +223,6 @@ const AnimatedSticker: FC<OwnProps> = ({
<div
ref={container}
className={fullClassName}
// @ts-ignore
style={style}
/>
);

3
src/components/common/Audio.tsx
View File

@ -507,19 +507,16 @@ function renderSeekline(
>
<span className="seekline-buffered-progress">
<i
// @ts-ignore
style={`transform: translateX(${bufferedProgress * 100}%)`}
/>
</span>
<span className="seekline-play-progress">
<i
// @ts-ignore
style={`transform: translateX(${playProgress * 100}%)`}
/>
</span>
<span className="seekline-thumb">
<i
// @ts-ignore
style={`transform: translateX(${playProgress * 100}%)`}
/>
</span>

1
src/components/common/GifButton.tsx
View File

@ -73,7 +73,6 @@ const GifButton: FC<OwnProps> = ({
ref={thumbRef}
className="thumbnail"
// We need to always render to avoid blur re-calculation
// @ts-ignore
style={isVideoReady ? 'display: none;' : undefined}
/>
)}

1
src/components/common/LocalAnimatedEmoji.tsx
View File

@ -62,7 +62,6 @@ const LocalAnimatedEmoji: FC<OwnProps> = ({
<div
ref={ref}
className="AnimatedEmoji media-inner"
// @ts-ignore teact feature
style={style}
onClick={handleClick}
>

1
src/components/common/StickerButton.tsx
View File

@ -105,7 +105,6 @@ const StickerButton: FC<OwnProps> = ({
ref={ref}
className={fullClassName}
title={title || (sticker?.emoji)}
// @ts-ignore
style={style}
data-sticker-id={sticker.id}
onMouseDown={preventMessageInputBlurWithBubbling}

4
src/components/common/UiLoader.tsx
View File

@ -16,11 +16,8 @@ import buildClassName from '../../util/buildClassName';
import './UiLoader.scss';
// @ts-ignore
import telegramLogoPath from '../../assets/telegram-logo.svg';
// @ts-ignore
import reactionThumbsPath from '../../assets/reaction-thumbs.png';
// @ts-ignore
import monkeyPath from '../../assets/monkey.svg';
import { selectIsRightColumnShown, selectTheme } from '../../modules/selectors';
@ -138,7 +135,6 @@ const UiLoader: FC<OwnProps & StateProps> = ({
<>
<div
className="left"
// @ts-ignore teact feature
style={leftColumnWidth ? `width: ${leftColumnWidth}px` : undefined}
/>
<div

1
src/components/common/helpers/parseEmojiOnlyString.ts
View File

@ -1,4 +1,3 @@
// @ts-ignore
import twemojiRegex from '../../../lib/twemojiRegex';
const DETECT_UP_TO = 3;

1
src/components/left/main/ChatList.tsx
View File

@ -122,7 +122,6 @@ const ChatList: FC<OwnProps> = ({
folderId={folderId}
animationType={getAnimationType(id)}
orderDiff={orderDiffById[id]}
// @ts-ignore
style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
/>
));

3
src/components/left/settings/SettingsGeneralBackgroundColor.tsx
View File

@ -214,7 +214,6 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps> = ({
<canvas />
<div
className="handle"
// @ts-ignore
style={`transform: translate(${colorPosition[0]}px, ${colorPosition[1]}px); background-color: #${hex};`}
/>
</div>
@ -222,7 +221,6 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps> = ({
<canvas />
<div
className="handle"
// @ts-ignore
style={`transform: translateX(${huePosition}px); background-color: #${hueHex};`}
/>
</div>
@ -236,7 +234,6 @@ const SettingsGeneralBackground: FC<OwnProps & StateProps> = ({
<div
className={color === `#${hex}` ? 'active' : undefined}
data-color={color}
// @ts-ignore
style={`background-color: ${color};`}
onClick={handlePredefinedColorClick}
/>

5
src/components/mediaViewer/MediaViewerContent.tsx
View File

@ -293,7 +293,6 @@ function renderPhoto(blobUrl?: string, imageSize?: ApiDimensions, canDrag?: bool
<img
src={blobUrl}
alt=""
// @ts-ignore teact feature
style={imageSize ? `width: ${imageSize.width}px` : ''}
draggable={Boolean(canDrag)}
/>
@ -301,7 +300,6 @@ function renderPhoto(blobUrl?: string, imageSize?: ApiDimensions, canDrag?: bool
: (
<div
className="spinner-wrapper"
// @ts-ignore teact feature
style={imageSize ? `width: ${imageSize.width}px` : ''}
>
<Spinner color="white" />
@ -318,12 +316,10 @@ function renderVideoPreview(blobUrl?: string, imageSize?: ApiDimensions, canDrag
className="VideoPlayer"
>
<div
// @ts-ignore
style={wrapperStyle}
>
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<video
// @ts-ignore
style={videoStyle}
draggable={Boolean(canDrag)}
/>
@ -333,7 +329,6 @@ function renderVideoPreview(blobUrl?: string, imageSize?: ApiDimensions, canDrag
: (
<div
className="spinner-wrapper"
// @ts-ignore teact feature
style={imageSize ? `width: ${imageSize.width}px` : ''}
>
<Spinner color="white" />

5
src/components/mediaViewer/MediaViewerSlides.tsx
View File

@ -506,7 +506,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
return (
<div className="MediaViewerSlides" ref={containerRef}>
{previousMessageId && scale === 1 && /* @ts-ignore */ (
{previousMessageId && scale === 1 && (
<div className="MediaViewerSlide" style={getAnimationStyle(-window.innerWidth + offsetX - SLIDES_GAP)}>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<MediaViewerContent {...rest} messageId={previousMessageId} isFooterHidden={isFooterHidden} />
@ -517,7 +517,6 @@ const MediaViewerSlides: FC<OwnProps> = ({
className={`MediaViewerSlide ${isActive ? 'MediaViewerSlide--active' : ''}`}
onClick={handleToggleFooterVisibility}
ref={activeSlideRef}
/* @ts-ignore */
style={getAnimationStyle(offsetX, offsetY, scale)}
>
<MediaViewerContent
@ -529,7 +528,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
/>
</div>
)}
{nextMessageId && scale === 1 && /* @ts-ignore */ (
{nextMessageId && scale === 1 && (
<div className="MediaViewerSlide" style={getAnimationStyle(window.innerWidth + offsetX + SLIDES_GAP)}>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<MediaViewerContent {...rest} messageId={nextMessageId} isFooterHidden={isFooterHidden} />

2
src/components/mediaViewer/VideoPlayer.tsx
View File

@ -157,7 +157,6 @@ const VideoPlayer: FC<OwnProps> = ({
onMouseOut={!isGif && !IS_TOUCH_ENV ? handleMouseOut : undefined}
>
<div
// @ts-ignore
style={wrapperStyle}
>
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
@ -169,7 +168,6 @@ const VideoPlayer: FC<OwnProps> = ({
// This is to force auto playing on mobiles
muted={isGif}
id="media-viewer-video"
// @ts-ignore
style={videoStyle}
onPlay={IS_IOS ? () => setIsPlayed(true) : undefined}
onEnded={handleEnded}

2
src/components/mediaViewer/VideoPlayerControls.tsx
View File

@ -180,12 +180,10 @@ function renderSeekLine(
<div className="player-seekline-track">
<div
className="player-seekline-buffered"
// @ts-ignore teact feature
style={`width: ${percentageBuffered || 0}%`}
/>
<div
className="player-seekline-played"
// @ts-ignore teact feature
style={`width: ${percentagePlayed || 0}%`}
/>
</div>

1
src/components/mediaViewer/ZoomControls.tsx
View File

@ -102,7 +102,6 @@ const ZoomControls: FC<OwnProps> = ({ isShown, onChangeZoom }) => {
<div className="seekline-track">
<div
className="seekline-played"
// @ts-ignore teact feature
style={`width: ${(zoomLevel - 1) * ONE_STEP_PERCENT}%`}
/>
<input

1
src/components/middle/EmojiInteractionAnimation.tsx
View File

@ -93,7 +93,6 @@ const EmojiInteractionAnimation: FC<OwnProps & StateProps> = ({
className={buildClassName(
'EmojiInteractionAnimation', isHiding && 'hiding', isPlaying && 'playing', isReversed && 'reversed',
)}
// @ts-ignore teact feature
style={`--scale: ${scale}; --start-x: ${emojiInteraction.x}px; --start-y: ${emojiInteraction.y}px;`}
>
<AnimatedSticker

4
src/components/middle/MessageList.tsx
View File

@ -339,8 +339,6 @@ const MessageList: FC<OwnProps & StateProps> = ({
// Handles updated message list, takes care of scroll repositioning
useLayoutEffectWithPrevDeps(([
prevMessageIds, prevIsViewportNewest, prevContainerHeight,
]: [
typeof messageIds, typeof isViewportNewest, typeof containerHeight,
]) => {
const container = containerRef.current!;
listItemElementsRef.current = Array.from(container.querySelectorAll<HTMLDivElement>('.message-list-item'));
@ -463,7 +461,7 @@ const MessageList: FC<OwnProps & StateProps> = ({
console.timeEnd('scrollTop');
}
// This should match deps for `useOnChange` above
}, [messageIds, isViewportNewest, containerHeight, hasTools]);
}, [messageIds, isViewportNewest, containerHeight, hasTools] as const);
useEffectWithPrevDeps(([prevIsSelectModeActive]) => {
if (prevIsSelectModeActive !== undefined) {

2
src/components/middle/MiddleColumn.tsx
View File

@ -363,7 +363,6 @@ const MiddleColumn: FC<StateProps> = ({
id="MiddleColumn"
className={className}
onTransitionEnd={handleOpenEnd}
// @ts-ignore teact-feature
style={`
--composer-hidden-scale: ${composerHiddenScale};
--toolbar-hidden-scale: ${toolbarHiddenScale};
@ -379,7 +378,6 @@ const MiddleColumn: FC<StateProps> = ({
>
<div
id="middle-column-bg"
// @ts-ignore
style={customBackgroundValue ? `--custom-background: ${customBackgroundValue}` : undefined}
/>
<div id="middle-column-portals" />

2
src/components/middle/PinnedMessageNavigation.tsx
View File

@ -84,7 +84,6 @@ const PinnedMessageNavigation: FC<OwnProps> = ({
<div
className="pinned-message-border-wrapper"
ref={containerRef}
// @ts-ignore
style={
`clip-path: url("#${clipPathId}"); width: 2px;
height: ${trackHeight}px; transform: translateY(-${trackTranslateY}px);`
@ -93,7 +92,6 @@ const PinnedMessageNavigation: FC<OwnProps> = ({
<span />
<div
className="pinned-message-border-mark"
// @ts-ignore
style={`height: ${markHeight}px; transform: translateY(${markTranslateY}px);`}
/>
</div>

1
src/components/middle/composer/EmojiCategory.tsx
View File

@ -52,7 +52,6 @@ const EmojiCategory: FC<OwnProps> = ({
</p>
<div
className={buildClassName('symbol-set-container', transitionClassNames)}
// @ts-ignore
style={`height: ${height}px;`}
dir={lang.isRtl ? 'rtl' : undefined}
>

1
src/components/middle/composer/StickerSet.tsx
View File

@ -56,7 +56,6 @@ const StickerSet: FC<OwnProps> = ({
<p className="symbol-set-name">{stickerSet.title}</p>
<div
className={buildClassName('symbol-set-container', transitionClassNames)}
// @ts-ignore
style={`height: ${height}px;`}
>
{shouldRender && stickerSet.stickers && stickerSet.stickers.map((sticker) => (

1
src/components/middle/composer/TextFormatter.tsx
View File

@ -406,7 +406,6 @@ const TextFormatter: FC<OwnProps> = ({
<div
ref={containerRef}
className={className}
// @ts-ignore Teact feature
style={style}
onKeyDown={handleContainerKeyDown}
>

1
src/components/middle/message/Album.tsx
View File

@ -122,7 +122,6 @@ const Album: FC<OwnProps & StateProps> = ({
return (
<div
className="Album"
// @ts-ignore
style={`width: ${containerWidth}px; height: ${containerHeight}px;`}
>
{album.messages.map(renderAlbumMessage)}

2
src/components/middle/message/Message.tsx
View File

@ -827,7 +827,6 @@ const Message: FC<OwnProps & StateProps> = ({
ref={ref}
id={`message${messageId}`}
className={containerClassName}
// @ts-ignore teact feature
style={metaSafeAuthorWidth ? `--meta-safe-author-width: ${metaSafeAuthorWidth}px` : undefined}
data-message-id={messageId}
onMouseDown={handleMouseDown}
@ -867,7 +866,6 @@ const Message: FC<OwnProps & StateProps> = ({
<div
ref={contentRef}
className={contentClassName}
// @ts-ignore
style={style}
dir="auto"
>

1
src/components/middle/message/MessageContextMenu.tsx
View File

@ -216,7 +216,6 @@ const MessageContextMenu: FC<OwnProps> = ({
<div
className="scrollable-content custom-scroll"
// @ts-ignore teact feature
style={menuStyle}
ref={scrollableRef}
>

2
src/components/middle/message/Photo.tsx
View File

@ -153,14 +153,12 @@ const Photo: FC<OwnProps> = ({
id={id}
ref={ref}
className={className}
// @ts-ignore teact feature
style={style}
onClick={isUploading ? undefined : handleClick}
>
<canvas
ref={thumbRef}
className="thumbnail"
// @ts-ignore teact feature
style={`width: ${width}px; height: ${height}px`}
/>
<img

1
src/components/middle/message/PollOption.tsx
View File

@ -89,7 +89,6 @@ const PollOption: FC<OwnProps> = ({
<div className="poll-option-corner" ref={lineRef} />
<div
className="poll-option-line"
// @ts-ignore
style={lineStyle}
/>
</div>

1
src/components/middle/message/ReactionSelectorReaction.tsx
View File

@ -59,7 +59,6 @@ const ReactionSelectorReaction: FC<OwnProps> = ({ reaction, previewIndex, onSend
'static',
isReady ? [staticClassNames] : undefined,
)}
// @ts-ignore
style={`background-position-x: ${previewIndex * -32}px;`}
/>
)}

1
src/components/middle/message/RoundVideo.tsx
View File

@ -207,7 +207,6 @@ const RoundVideo: FC<OwnProps> = ({
<canvas
ref={thumbRef}
className="thumbnail"
// @ts-ignore teact feature
style={`width: ${ROUND_VIDEO_DIMENSIONS_PX}px; height: ${ROUND_VIDEO_DIMENSIONS_PX}px`}
/>
</div>

3
src/components/middle/message/Video.tsx
View File

@ -159,20 +159,17 @@ const Video: FC<OwnProps> = ({
ref={ref}
id={id}
className={className}
// @ts-ignore teact feature
style={style}
onClick={isUploading ? undefined : handleClick}
>
<canvas
ref={thumbRef}
className="thumbnail"
// @ts-ignore teact feature
style={`width: ${width}px; height: ${height}px;`}
/>
<img
src={previewBlobUrl}
className={buildClassName('thumbnail', previewClassNames)}
// @ts-ignore teact feature
style={`width: ${width}px; height: ${height}px;`}
alt=""
draggable={!isProtected}

1
src/components/middle/message/hocs/withSelectControl.tsx
View File

@ -57,7 +57,6 @@ export default function withSelectControl(WrappedComponent: FC) {
return (
<div
className={buildClassName('album-item-select-wrapper', isSelected && 'is-selected')}
// @ts-ignore
style={dimensions ? `left: ${dimensions.x}px; top: ${dimensions.y}px;` : ''}
onClick={isInSelectMode ? handleMessageSelect : undefined}
>

2
src/components/payment/CardInput.tsx
View File

@ -10,9 +10,7 @@ import InputText from '../ui/InputText';
import './CardInput.scss';
// @ts-ignore
import mastercardIconPath from '../../assets/mastercard.svg';
// @ts-ignore
import visaIconPath from '../../assets/visa.svg';
const CARD_NUMBER_MAX_LENGTH = 23;

1
src/components/test/TestPortal.tsx
View File

@ -26,7 +26,6 @@ const TestPortal: FC = () => {
</div>
<Portal>
<div
// @ts-ignore
style={`position: absolute; top: ${position}px; left: ${position}px; width: 250px;`}
>
<h2>

1
src/components/ui/Button.tsx
View File

@ -153,7 +153,6 @@ const Button: FC<OwnProps> = ({
title={ariaLabel}
tabIndex={tabIndex}
dir={isRtl ? 'rtl' : undefined}
// @ts-ignore
style={backgroundImage ? `background-image: url(${backgroundImage})` : undefined}
>
{isLoading ? (

1
src/components/ui/InfiniteScroll.tsx
View File

@ -225,7 +225,6 @@ const InfiniteScroll: FC<OwnProps> = ({
{withAbsolutePositioning && items?.length ? (
<div
teactFastList={!noFastList}
// @ts-ignore
style={`position: relative;${IS_ANDROID ? ` height: ${maxHeight}px;` : undefined}`}
>
{children}

1
src/components/ui/ListItem.tsx
View File

@ -160,7 +160,6 @@ const ListItem: FC<OwnProps> = ({
ref={containerRef}
className={fullClassName}
dir={lang.isRtl ? 'rtl' : undefined}
// @ts-ignore
style={style}
onMouseDown={onMouseDown}
>

2
src/components/ui/Menu.tsx
View File

@ -114,7 +114,6 @@ const Menu: FC<OwnProps> = ({
onKeyDown={isOpen ? handleKeyDown : undefined}
onMouseEnter={onMouseEnter}
onMouseLeave={isOpen ? onMouseLeave : undefined}
// @ts-ignore teact feature
style={style}
>
{isOpen && (
@ -124,7 +123,6 @@ const Menu: FC<OwnProps> = ({
<div
ref={menuRef}
className={bubbleClassName}
// @ts-ignore teact feature
style={`transform-origin: ${transformOriginXStyle || positionX} ${transformOriginYStyle || positionY};${
bubbleStyle || ''}`}
onClick={autoClose ? onClose : undefined}

1
src/components/ui/RangeSlider.tsx
View File

@ -63,7 +63,6 @@ const RangeSlider: FC<OwnProps> = ({
<div className="slider-main">
<div
className="slider-fill-track"
// @ts-ignore
style={`width: ${trackWidth}%`}
/>
<input

1
src/components/ui/RippleEffect.tsx
View File

@ -50,7 +50,6 @@ const RippleEffect: FC = () => {
<div className="ripple-container" onMouseDown={handleMouseDown}>
{ripples.map(({ x, y, size }) => (
<span
// @ts-ignore
style={`left: ${x}px; top: ${y}px; width: ${size}px; height: ${size}px;`}
/>
))}

3
src/hooks/useEffectWithPrevDeps.ts
View File

@ -1,10 +1,9 @@
import { useEffect } from '../lib/teact/teact';
import usePrevious from './usePrevious';
const useEffectWithPrevDeps = <T extends any[], PT = T>(cb: (args: PT) => void, dependencies: T, debugKey?: string) => {
const useEffectWithPrevDeps = <T extends any[]>(cb: (args: T | []) => void, dependencies: T, debugKey?: string) => {
const prevDeps = usePrevious<T>(dependencies);
return useEffect(() => {
// @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
return cb(prevDeps || []);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dependencies, debugKey);

5
src/hooks/useLayoutEffectWithPrevDeps.ts
View File

@ -1,12 +1,11 @@
import { useLayoutEffect } from '../lib/teact/teact';
import usePrevious from './usePrevious';
const useLayoutEffectWithPrevDeps = <T extends any[], PT = T>(
cb: (args: PT) => void, dependencies: T, debugKey?: string,
const useLayoutEffectWithPrevDeps = <T extends readonly any[]>(
cb: (args: T | readonly []) => void, dependencies: T, debugKey?: string,
) => {
const prevDeps = usePrevious<T>(dependencies);
return useLayoutEffect(() => {
// @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
return cb(prevDeps || []);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dependencies, debugKey);

5
src/hooks/useMedia.ts
View File

@ -5,11 +5,10 @@ import { ApiMediaFormat } from '../api/types';
import * as mediaLoader from '../util/mediaLoader';
import useForceUpdate from './useForceUpdate';
const useMedia = <T extends ApiMediaFormat = ApiMediaFormat.BlobUrl>(
const useMedia = (
mediaHash: string | false | undefined,
noLoad = false,
// @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
mediaFormat: T = ApiMediaFormat.BlobUrl,
mediaFormat = ApiMediaFormat.BlobUrl,
cacheBuster?: number,
delay?: number | false,
) => {

5
src/hooks/useMediaWithLoadProgress.ts
View File

@ -13,11 +13,10 @@ const STREAMING_PROGRESS = 0.75;
const STREAMING_TIMEOUT = 1500;
const PROGRESS_THROTTLE = 500;
export default function useMediaWithLoadProgress<T extends ApiMediaFormat = ApiMediaFormat.BlobUrl>(
export default function useMediaWithLoadProgress(
mediaHash: string | undefined,
noLoad = false,
// @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
mediaFormat: T = ApiMediaFormat.BlobUrl,
mediaFormat = ApiMediaFormat.BlobUrl,
cacheBuster?: number,
delay?: number | false,
isHtmlAllowed = false,

1
src/hooks/useMessageMediaMetadata.ts
View File

@ -14,7 +14,6 @@ import { buildMediaMetadata } from '../util/mediaSession';
import { scaleImage, resizeImage } from '../util/imageResize';
import { AVATAR_FULL_DIMENSIONS } from '../components/common/helpers/mediaDimensions';
// @ts-ignore
import telegramLogoPath from '../assets/telegram-logo-filled.svg';
const LOGO_DIMENSIONS = { width: 200, height: 200 };

3
src/hooks/useOnChange.ts
View File

@ -1,9 +1,8 @@
import usePrevious from './usePrevious';
const useOnChange = <T extends any[], PT = T>(cb: (args: PT) => void, dependencies: T) => {
const useOnChange = <T extends any[]>(cb: (args: T | []) => void, dependencies: T) => {
const prevDeps = usePrevious<T>(dependencies);
if (!prevDeps || dependencies.some((d, i) => d !== prevDeps[i])) {
// @ts-ignore (workaround for "could be instantiated with a different subtype" issue)
cb(prevDeps || []);
}
};

4
src/lib/gramjs/tl/generationHelpers.js
View File

@ -163,7 +163,6 @@ function buildArgConfig(name, argType) {
// Note that 'flags' is NOT the flags name; this
// is determined by a previous argument
// However, we assume that the argument will always be called 'flags'
// @ts-ignore
const flagMatch = currentConfig.type.match(/flags.(\d+)\?([\w<>.]+)/);
if (flagMatch) {
@ -174,7 +173,6 @@ function buildArgConfig(name, argType) {
}
// Then check if the type is a Vector<REAL_TYPE>
// @ts-ignore
const vectorMatch = currentConfig.type.match(/[Vv]ector<([\w\d.]+)>/);
if (vectorMatch) {
@ -182,7 +180,6 @@ function buildArgConfig(name, argType) {
// If the type's first letter is not uppercase, then
// it is a constructor and we use (read/write) its ID.
// @ts-ignore
currentConfig.useVectorId = currentConfig.type.charAt(0) === 'V';
// Update the type to match the one inside the vector
@ -191,7 +188,6 @@ function buildArgConfig(name, argType) {
// See use_vector_id. An example of such case is ipPort in
// help.configSpecial
// @ts-ignore
if (/^[a-z]$/.test(currentConfig.type.split('.')
.pop()
.charAt(0))

8
src/lib/teact/teact.ts
View File

@ -69,7 +69,7 @@ interface ComponentInstance {
cursor: number;
byCursor: {
effect: () => void;
dependencies?: any[];
dependencies?: readonly any[];
cleanup?: Function;
}[];
};
@ -522,7 +522,7 @@ function useLayoutEffectBase(
schedulerFn: typeof onTickEnd | typeof requestAnimationFrame,
primarySchedulerFn: typeof onTickEnd | typeof requestAnimationFrame,
effect: () => Function | void,
dependencies?: any[],
dependencies?: readonly any[],
debugKey?: string,
) {
const { cursor, byCursor } = renderingInstance.hooks.effects;
@ -621,11 +621,11 @@ function useLayoutEffectBase(
renderingInstance.hooks.effects.cursor++;
}
export function useEffect(effect: () => Function | void, dependencies?: any[], debugKey?: string) {
export function useEffect(effect: () => Function | void, dependencies?: readonly any[], debugKey?: string) {
return useLayoutEffectBase(fastRaf, fastRafPrimary, effect, dependencies, debugKey);
}
export function useLayoutEffect(effect: () => Function | void, dependencies?: any[], debugKey?: string) {
export function useLayoutEffect(effect: () => Function | void, dependencies?: readonly any[], debugKey?: string) {
return useLayoutEffectBase(onTickEnd, onTickEndPrimary, effect, dependencies, debugKey);
}

1
src/modules/actions/ui/messages.ts
View File

@ -36,7 +36,6 @@ import {
import { findLast } from '../../../util/iteratees';
import { getServerTime } from '../../../util/serverTime';
// @ts-ignore
import versionNotification from '../../../versionNotification.txt';
import parseMessageInput from '../../../util/parseMessageInput';

2
src/util/mediaSession.ts
View File

@ -94,13 +94,11 @@ export function setPositionState(state?: MediaPositionState) {
export function setMicrophoneActive(active: boolean) {
const { mediaSession } = window.navigator;
// @ts-ignore typings not updated yet
mediaSession?.setMicrophoneActive?.(active);
}
export function setCameraActive(active: boolean) {
const { mediaSession } = window.navigator;
// @ts-ignore typings not updated yet
mediaSession?.setCameraActive?.(active);
}

15
src/util/voiceRecording.ts
View File

@ -1,18 +1,8 @@
// @ts-ignore
import encoderPath from 'file-loader!opus-recorder/dist/encoderWorker.min';
import { IOpusRecorder } from 'opus-recorder';
export type Result = { blob: Blob; duration: number; waveform: number[] };
interface IOpusRecorder extends Omit<MediaRecorder, 'start' | 'ondataavailable'> {
new(options: AnyLiteral): IOpusRecorder;
start(stream?: MediaStreamAudioSourceNode): void;
sourceNode: MediaStreamAudioSourceNode;
ondataavailable: (typedArray: Uint8Array) => void;
}
const encoderPath = new URL('opus-recorder/dist/encoderWorker.min', import.meta.url).href;
const MIN_RECORDING_TIME = 1000;
const POLYFILL_OPTIONS = { encoderPath, reuseWorker: true };
const BLOB_PARAMS = { type: 'audio/ogg' };
@ -25,7 +15,6 @@ let mediaRecorder: IOpusRecorder;
export async function init() {
if (!opusRecorderPromise) {
// @ts-ignore
opusRecorderPromise = import('opus-recorder');
OpusRecorder = (await opusRecorderPromise).default;
mediaRecorder = new OpusRecorder(POLYFILL_OPTIONS);

18
webpack.config.js
View File

@ -8,7 +8,6 @@ const {
const HtmlPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const TerserJSPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
dotenv.config();
@ -86,25 +85,13 @@ module.exports = (env = {}, argv = {}) => {
test: /\.(woff(2)?|ttf|eot|svg|png|jpg|tgs)(\?v=\d+\.\d+\.\d+)?$/,
type: 'asset/resource',
},
{
test: /-extra\.json$/,
loader: 'file-loader',
type: 'javascript/auto',
options: {
name: '[name].[contenthash].[ext]',
},
},
{
test: /\.wasm$/,
loader: 'file-loader',
type: 'javascript/auto',
options: {
name: '[name].[contenthash].[ext]',
},
type: 'asset/resource',
},
{
test: /\.(txt|tl)$/i,
loader: 'raw-loader',
type: 'asset/source',
},
],
},
@ -153,7 +140,6 @@ module.exports = (env = {}, argv = {}) => {
optimization: {
minimize: !env.noMinify,
minimizer: [
new TerserJSPlugin({ sourceMap: true }),
new CssMinimizerPlugin(),
],
},