@cdd-team/react

Учебная реализация React на TypeScript

От JSX и компонентов до hooks, Context и обновления DOM.

Быстрый старт · Возможности · Разработка · Контекст проекта

Реализация React команды Cringe-Driven Development с функциональными компонентами, JSX, hooks, Context и мемоизацией. В основе — Fiber-дерево, собственный планировщик и обновление DOM.

Быстрый старт

Установи пакет в приложение со сборщиком, поддерживающим TSX:

bun add @cdd-team/react

В tsconfig.json настрой automatic JSX runtime:

{
	"compilerOptions": {
		"jsx": "react-jsx",
		"jsxImportSource": "@cdd-team/react"
	}
}

Добавь в HTML контейнер <div id="root"></div>. Пример входного файла приложения:

import { createRoot, useState } from "@cdd-team/react";
import type { ReactElement } from "@cdd-team/react";

function Counter(): ReactElement {
	const [count, setCount] = useState(0);

	return (
		<button onClick={() => setCount((value) => value + 1)}>
			Счётчик: {count}
		</button>
	);
}

const container = document.getElementById("root");

if (container) {
	createRoot(container).render(<Counter />);
}

Стейт-менеджер для этой библиотеки — @cdd-team/zustand.

Возможности

| Механизм | API и реализация | | --- | --- | | Элементы | h, hFragment, createElement, Fragment, Children, isValidElement | | Рендеринг | createRoot, root.render, root.unmount, Fiber и reconciliation | | Планирование | scheduler, render и commit phases | | Состояние и эффекты | useState, useEffect, useLayoutEffect | | Мемоизация | memo, useMemo, useCallback | | Контекст | createContext, useContext | | Внешние сторы | useSyncExternalStore, useSyncExternalStoreWithSelector | | JSX | automatic runtime: jsx-runtime и jsx-dev-runtime |

Публичные экспорты собраны в src/index.ts. Проект развивается как учебная реализация; набор поддерживаемых API определяется этим репозиторием.

Безопасность

Рендерер закрывает пять путей к XSS через props и элементы:

• javascript:-URL. В href, src, action, formAction, xlink:href и xlinkHref (имя без учёта регистра) URL с протоколом javascript: не записывается ни в property, ни в attribute, а атрибут удаляется. Проверка учитывает регистр протокола, начальные символы с кодами 0–32 и tab/CR/LF внутри протокола. Значение приводится к строке один раз, и записывается именно проверенная строка. Prop protocol (без учёта регистра) игнорируется: иначе он превращает уже записанный безопасный href в javascript:.
• Сырой HTML через props. innerHTML, outerHTML и srcdoc (без учёта регистра) не записываются при установке и обновлении. Запрет srcDoc — собственная политика библиотеки. Текстовые children остаются текстом.
• Поддельные элементы. Объект без $$typeof === Symbol.for("react.element"), например распарсенный JSON, отклоняется с TypeError в h, JSX, createElement, Children.toArray, результате компонента и root.render(). Отклонённый root.render() не меняет DOM и не отменяет уже запланированный рендер.
• Строковые обработчики. Props с префиксом on в любом регистре считаются событиями. Значение, которое не является функцией, не попадает ни в DOM, ни в addEventListener.
• HTML <script>. Тег script (без учёта регистра) создаётся HTML-парсером из фиксированной строки <script></script>, и браузер не исполняет его ни при вставке, ни после смены children или src. Элемент остаётся в DOM со своими props и children; данные приложения в парсер не попадают. Намеренно исполняемых скриптов рендерер не создаёт.

Ограничения:

• Поведение не обещает полного совпадения с официальным React.
• Spread произвольного объекта в props не становится безопасным: защищены только перечисленные пути.
• Это не защита от всех XSS. Проверка $$typeof не является песочницей для недоверенного JavaScript.
• <script> внутри <svg> создаётся в SVG namespace и не становится инертным.
• Допустимые ресурсы определяет приложение: URL allowlist, санитайзер HTML и CSS, CSP, Trusted Types и проверка data:-URL в библиотеку не входят.

Разработка

Пакет живёт в монорепозитории frontend-packages. Нужен Bun 1.4.4; версия указана в .bvmrc.

git clone https://github.com/Cringe-Driven-Development-Team/frontend-packages.git
cd frontend-packages
bun install --frozen-lockfile
cd packages/react
bun run build

Общие команды проверки и порядок их запуска — в корневом README, правила выпуска — в release runbook.

Playground

playground/ — ручной dev-стенд с примерами состояния, эффектов, Context и мемоизации. Он находится вне workspaces, CI и релизов; зависимости устанавливаются отдельно.

Чтобы запустить стенд на локальной сборке пакета, после сборки выполни из корня монорепозитория:

cd packages/react
bun link
cd playground
bun install
bun link @cdd-team/react
bun run dev -- --host 127.0.0.1

Для запуска с опубликованным пакетом достаточно выполнить bun install и bun run dev -- --host 127.0.0.1 в packages/react/playground. Версия зависимости указана в его package.json.

На Windows сохраняй playground вне корневых workspaces: зависимость на собственный пакет порождает рекурсивные цепочки node_modules.

Навигация по коду

• src/ — элементы, Fiber, scheduler, reconciliation, hooks и DOM-layer.
• test/ — тесты библиотеки.
• playground/src/ — примеры использования библиотеки.
• AGENTS.md — инструкции для работы с монорепозиторием.

Документация и участие

• Контекст проекта — общепроектная документация, архитектура и планы.
• Трек учебных библиотек — документация библиотек монорепозитория.
• Задачи монорепозитория — обсуждения и развитие пакетов.
• Правила команды — оформление задач и pull requests.