Короткие и полезные заметки про React
mount('#mount’) и mount(document.querySelector('#mount’)).
В статье рассматриваются несколько методов безопасного сужения типов:
- Использование нативных JS операторов, таких как typeof, === и других.
- Использование type guard функций. Они полезны, но, как ни странно, небезопасны для типов.
- Написать функцию приведения типа, например (x: unknown) => number.
blog.thoughtspile.tech/2023/01…e-narrow
---
const response = await fetch('https://an-endpoint.com/api');
const data = await response.json();
---
<p>{data.a_property}</p>
- Есть готовые интеграции
В Astro есть гайды по генерации sitemap, RSS ленты и оптимизации изображений. Также есть готовые модули для работы с СЕО.
- Сложно написать непроизводительное приложение
По умолчанию в Astro не создается JS для клиента. Создавать Astro компоненты легко, особенно после опыта написания React компонентов.
- Большая часть API построена на веб-стандартах
Большая часть низкоуровневого API Astro основана на веб-стандартах, поэтому его проще изучить. Например, Astro.request является объектом Request из Fetch API.
www.macarthur.me/posts/w…ut-astro
const Component = () => {
useEffect(() => {
// Будет обработан ErrorBoundary
throw new Error('Destroy everything!');
}, [])
const onClick = () => {
// Не будет обработан ErrorBoundary
throw new Error('Hulk smash!');
}
useEffect(() => {
// Если возникнет ошибка, то не будет обработан ErrorBoundary
fetch('/bla')
}, [])
return <button onClick={onClick}>click me</button>
}
const ComponentWithBoundary = () => {
return (
<ErrorBoundary>
<Component />
</ErrorBoundary>
)
}
Чтобы направить ошибку из колбека или асинхронного кода в ErrorBoundary, можно перекинуть ошибку в React используя трюк:
const onClick = () => {
try {
//–snip–
} catch (e) {
// вызвать обновление стейта с выбросом ошибки
setState(() => throw e);
}
}
Чтобы самостоятельно не изобретать колесо, рекомендуется использовать библиотеку react-error-boundary. В ней уже решены основные проблемы, возникающие при обработке ошибок.
www.developerway.com/posts/h…in-react
function loggedMethod<This, Args extends any[], Return>(
target: (this: This, ...args: Args) => Return,
context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>
) {
const methodName = String(context.name);
function replacementMethod(this: This, ...args: Args): Return {
console.log(`LOG: Entering method '${methodName}'.`)
const result = target.call(this, ...args);
console.log(`LOG: Exiting method '${methodName}'.`)
return result;
}
return replacementMethod;
}
class Person {
// --snip--
@bound
@loggedMethod
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
Для работы с декораторами добавлен новый тип ClassMethodDecoratorContext, который моделирует объект контекста, который принимают декораторы метода.
У метода может быть несколько декораторов. В примере сначала выполнится @loggedMethod, а потом @bound.
Декораторы можно использовать не только у метода, но и у класса и его полей.
const как параметр типа
В TS есть утверждение as const, которое делает выражение иммутабельным и говорит компилятору, что тип больше не будет расширяться.
В TS 5.0 можно добавить const как модификатор к объявлению типа параметра. Пример:
type HasNames = { names: readonly string[] };
function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
return arg.names;
}
// readonly ["Alice", "Bob", "Eve"]
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });
При этом использование модификатора const не требует ограничения типа в виде readonly. Если не использовать readonly, то результат будет другим:
declare function fnBad<const T extends string[]>(args: T): void; // 'T' будет 'string[]', а не 'readonly ["a", "b", "c"]' fnBad(["a", "b" ,"c"]);Несколько конфиг файлов в extends Появилась возможность расширять tsconfig от несколько файлов:
{
"compilerOptions": {
"extends": ["a.json", "b.json", "c.json"]
}
}
В этом случае b.json расширяет a.json, а c.json расширяет b.json, а текущий конфиг расширяет c.json.
devblogs.microsoft.com/typescr…5-0-beta
src/content, например “blog”, “newsletter”, "products". Внутри нее размещаются Markdown/MDX файлы с разметкой и полями. В корне src/content создается config файл, из которого экспортируется объект, где ключ - это название папки-коллекции, а значение - описание. В описании коллекции указывается Zod схема полей в разметке. После чего Astro проверяет поля в файлах разметки на правильность написания, а также предоставляет типобезопасное API запросов получения контента.
// src/content/config.ts
// –snip–
const blogCollection = defineCollection({ schema: blogSchema });
export const collections = {
'blog': blogCollection
};
// src/pages/work.astro
import { getCollection } from 'astro:content';
const allBlogPosts = await getCollection('blog');
// –snip–
Гибридный рендеринг
В Astro появилась возможность пререндера конкретной страницы. Эти страницы рендерятся во время сборки приложения, что приводит к экономии времени при загрузке страницы. Чтобы страница рендерилась во время сборки, нужно добавить запись:
export const prerender = true;Другие изменения: - Редизайн страницы ошибок - Оптимизация Hot Module Reloading (HMR) - Используется Vite 4.0 https://astro.build/blog/astro-2/
A extends B можно выразить как “A является подмножеством B”.
- Тип объединения | и пересечения & является объединением и пересечением двух множеств.
- Exclude<A, B> можно назвать разностью двух множеств, но с условием что A и B являются объединением.
- never – пустое множество. A & never = never и A | never = A.
Одним из интересных примеров можно выделить то, что TypeScript позволяет объявлять такие выражения: const x: {} = 9;. Это происходит из-за того, что тип {} не значит то же самое, что и пустой объект в JS. Это тип, в котором можно получить доступ к свойствам, но не важно к каким. Чтобы было понятнее, еще один похожий пример валидного выражения: const x: { toString(): string } = 9;. Это связано с тем, что TypeScript под капотом видит примитив как объект. Поэтому TypeScript позволяет выполнять такие выражения, т.к. благодаря автобоксингу JS выражение валидно и можно вызвать x.toString().
blog.thoughtspile.tech/2023/01…ipt-sets
@tamagui/core и компилятора @tamagui/static. Компилятор предназначен для генерации и оптимизации CSS стилей для веба. Поддерживает кастомизации, можно изменить тему любого компонента.
https://tamagui.dev/
<Modal> <Modal.CloseButton /> <Modal.Header> ... </Modal.Header> <Modal.Main> ... <Modal.Main> </Modal>www.smashingmagazine.com/2023/01…fishness
export default function Bars() {
// --snip--
const yScale = useMemo(
() =>
scaleLinear<number>({
range: [yMax, 0],
round: true,
domain: [0, Math.max(...data.map(getLetterFrequency))],
}),
[yMax],
);
return (
<svg width={width} height={height}>
<GradientTealBlue id="teal" />
<Group top={verticalMargin / 2}>
{data.map((d) => {
// --snip--
const barHeight = yMax - (yScale(getLetterFrequency(d)) ?? 0);
const barX = xScale(letter);
return (
<Bar
key={`bar-${letter}`}
x={barX}
y={barY}
// --snip--
/>
);
})}
</Group>
</svg>
);
}
mafs
Библиотека готовых компонентов для интерактивной математики. Позволяет создавать интерактивные и анимированные элементы из математики. Содержит компоненты: система координат, точки, линии, полигоны, круги и т.д.
function LineSegmentExample() {
const point1 = useMovablePoint([-1, -1])
const point2 = useMovablePoint([2, 1])
return (
<Mafs viewBox={{ y: [-1, 1] }}>
<CartesianCoordinates />
<Line.Segment
point1={point1.point}
point2={point2.point}
/>
{point1.element}
{point2.element}
</Mafs>
)
}
compose(withFoo, withBar, withBaz)(Component).
- Один HoC делает только одну работу, используйте кастомные хуки для хранения состояния.
- Используйте техники функционального программирования, например, каррирование.
Пример реализации HoC, который абстрагирует логику получения данных о пользователе:
import { useEffect, useState } from 'react';
function useFetchUsers(url) {
const [users, setUsers] = useState([]);
useEffect(() => {
async function fetchData() {
const res = await fetch(url);
const data = await res.json();
setUsers(data.users);
}
fetchData();
}, [url]);
return users;
}
function withFetchUsers(Component) {
return function WrappedComponent(props) {
const users = useFetchUsers(props.url);
return <Component {...props} users={users} />;
}
}
medium.com/@rivolt…ba8d37b1
import { useForm, UseFormProps } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { TypeOf, ZodSchema } from 'zod';
interface UseZodFormProps<Z extends ZodSchema>
extends Exclude<UseFormProps<TypeOf<Z>>, 'resolver'> {
schema: Z;
}
export const useZodForm = <Z extends ZodSchema>({
schema,
...formProps
}: UseZodFormProps<Z>) =>
useForm({
...formProps,
resolver: zodResolver(schema),
});
www.brendonovich.dev/blog/th…traction