Skip to content

Instantly share code, notes, and snippets.

View Akiyamka's full-sized avatar
🚩
Fight

Alexander CherryTea Akiyamka

🚩
Fight
View GitHub Profile
@Akiyamka
Akiyamka / useExtendedClick.ts
Last active February 13, 2024 13:17
@floating-ui/react provide hook that can listen left button mouse click. This exatended version do the same but allow you to specify left, right or middle click you want to listen
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) {
@Akiyamka
Akiyamka / client.js
Last active September 11, 2023 17:46
Wordpress endpoint for upload file to s3
(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) {
@Akiyamka
Akiyamka / rfc.md
Created June 19, 2023 08:58
Form json

FJSON

Json based standart for html forms

interface FieldValidation {
  minLength?: number;
  maxLength?: number;
  format?: 'email' | 'uri' | 'phone';
  minimum?: number;
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,

Что не так с enum в typescript

Вводная

Я никак не могу обойти тему того чем является тайпскрипт, и чем он должен был быть.

"TypeScript is JavaScript with syntax for types." www.typescriptlang.org

Это именно то что отличает тайпскрипт он кофескриптов, эльмов, ризонов и т.д. Все что нужно чтобы получить javascript - убрать аннотации типов. В вебе где размер бандла одна из ключевых метрик это жизненно важная ключая особенность.

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",
@Akiyamka
Akiyamka / api-example.md
Last active June 28, 2023 08:31
reatom 2 - Обзор с примерами

Асинхронный эффект в атоме

Разберем как сделать асинхронный запрос в апи для получения курса валюты. На react c useEffect это выглядит так:

import { useEffect, useState } from 'react';

Rollup Plugin Name: commonjs Rollup Plugin Version: 13.0.0

Ожидаемое поведение / Ситуация

Данный плагин (и Rollup in расширениях) работает настолько seamlessly насколько это возможно как с тем кодом который он генерирует сам, так и другими инструментами в экосистеме.

Текущее поведение / Ситуация

Есть большое количество интеграционных вопросов, о чем написано ниже.