Разберем как сделать асинхронный запрос в апи для получения курса валюты. На react c useEffect это выглядит так:
import { useEffect, useState } from 'react';
import { useMemo, useRef } from 'react'; | |
import type { ElementProps, FloatingContext, ReferenceType } from '@floating-ui/react'; | |
import { isMouseLikePointerType, isTypeableElement } from '@floating-ui/react/utils'; | |
import { isHTMLElement } from '@floating-ui/utils/dom'; | |
function isButtonTarget(event: React.KeyboardEvent<Element>) { | |
return isHTMLElement(event.target) && event.target.tagName === 'BUTTON'; | |
} | |
function isSpaceIgnored(element: Element | null) { |
(function () { | |
const TARGET_CONTAINER = '.upload-input-target'; | |
const ERROR_MESSAGE_ID = 'upload-error-message'; | |
const FILE_INPUT_ID = 'resume-input'; | |
const UPLOAD_ENDPOINT = 'https://example.com/wp-json/api/upload'; | |
const ERROR_CLASS = 'error'; | |
const LOADING_CLASS = 'loading'; | |
const LABEL_TEXT = 'Upload' | |
const FALLBACK_ERROR_MESSAGE = 'Something wrong. Please use Intercom for contact with us'; |
class MutationError extends Error { | |
message = 'Attempt to mutate empty dummy array'; | |
} | |
class DummyArr extends Array { | |
get length() { | |
return 0; | |
} | |
set length(v) { |
import { isObject } from '@reatom/core'; | |
import { memo } from '@reatom/core/experiments'; | |
import { createAtom, createPrimitiveAtom } from '~utils/atoms/createPrimitives'; | |
import { store } from '~core/store/store'; | |
import { isErrorWithMessage } from '~utils/common'; | |
import { ABORT_ERROR_MESSAGE, isAbortError } from './abort-error'; | |
import type { ResourceAtomOptions, ResourceAtomState, Fetcher } from './types'; | |
import type { | |
Action, | |
Atom, |
Я никак не могу обойти тему того чем является тайпскрипт, и чем он должен был быть.
"TypeScript is JavaScript with syntax for types." www.typescriptlang.org
Это именно то что отличает тайпскрипт он кофескриптов, эльмов, ризонов и т.д. Все что нужно чтобы получить javascript - убрать аннотации типов. В вебе где размер бандла одна из ключевых метрик это жизненно важная ключая особенность.
/** | |
* @author Boggddan <github.com/boggddan> | |
* Запускается в браузерах которые не поддерживают свойство background-blend-mode. | |
* Полифил применяется к тегам помеченым атрибутом `data-background-blend-mode` в свойтвах которого нужно передать режим смешивания. | |
* Поддерживается: normal, multiply, lighten, screen, darken. (протестировано в IE 11) | |
* @example: <div data-background-blend-mode="multiply"></div> | |
*/ | |
/* Element.prepend polyfill for IE 11 */ | |
function prependPolyfill() { |
import { createAtom } from '@reatom/core'; | |
export type NotificationType = 'error' | 'warning' | 'info'; | |
interface NotificationMessage { | |
title: string; | |
text?: string; | |
} | |
interface Notification { | |
id: number; |
export const MAP_CSS_MAPBOX = { | |
// Line | |
"width": { | |
"type": "line", | |
"category": "paint", | |
"name": "line-width", | |
"valueConverter": null | |
}, | |
"casing-width": { | |
"type": "casing_line", |