the-react 1.0.0

package/README.md

@@ -0,0 +1,2 @@
+# My-React
+React realization

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "the-react",
+  "version": "1.0.0",
+  "description": "A React library for TheBugs Project",
+  "main": "dist/my-react.umd.js",
+  "module": "dist/my-react.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArtemS18/My-React.git"
+  },
+  "keywords": [
+    "typescript",
+    "react",
+    "library",
+    "js",
+    "ts"
+  ],
+  "author": "Artemii",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ArtemS18/My-React/issues"
+  },
+  "homepage": "https://github.com/ArtemS18/My-React#readme",
+  "devDependencies": {
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.1.1"
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,102 @@
+import { ComponentInstance, markDirty } from "../my-react";
+
+/**
+ * Глобальный контекст активного компонента для хуков.
+ * Устанавливается во время рендера компонента функцией _setActiveInstance.
+ */
+let activeInstance: ComponentInstance<any> | undefined = undefined;
+
+/** Индекс текущего состояния useState в массиве состояний компонента */
+let activeStateIndex: number = 0;
+
+/**
+ * Устанавливает активный экземпляр компонента для хуков.
+ * Вызывается автоматически в начале и конце updateVTree().
+ * @param instance - Текущий компонент или undefined (сброс).
+ * @internal
+ */
+export function _setActiveInstance(instance: ComponentInstance<any> | undefined) {
+    activeInstance = instance;
+}
+
+/**
+ * Устанавливает индекс следующего состояния useState.
+ * Инкрементируется для каждого вызова useState в компоненте.
+ * @param stateIndex - Индекс состояния.
+ * @internal
+ */
+export function _setActiveStateIndex(stateIndex: number) {
+    activeStateIndex = stateIndex;
+}
+
+/**
+ * Хук useState - управляет локальным состоянием компонента.
+ * Состояние сохраняется в массиве states компонента по индексу вызова.
+ * 
+ * @param initialState - Начальное значение состояния.
+ * @returns Массив [текущее_состояние, setter_функция].
+ * 
+ * @example
+ * ```ts
+ * const [count, setCount] = useState(0);
+ * setCount(count + 1); // Обновит компонент через markDirty
+ * ```
+ */
+export function useState<T>(
+    initialState: T
+): [T, (newState: T) => void] {
+    if (activeInstance === undefined) {
+        throw new Error("useState must be called inside a component");
+    }
+    
+    if (activeInstance.states.length <= activeStateIndex) {
+        activeInstance.states.push(initialState);
+    }
+    
+    const curInstance = activeInstance;
+    const idx = activeStateIndex;
+    activeStateIndex++;
+    
+    return [
+        activeInstance.states[idx] as T,
+        (newState: T) => {
+            curInstance.states[idx] = newState;
+            markDirty(curInstance);
+        }
+    ];
+}
+
+/**
+ * Хук useEffect - выполняет побочные эффекты после рендера.
+ * Поддерживает cleanup функции и зависимости для оптимизации.
+ * 
+ * @param effect - Функция эффекта. Может вернуть cleanup функцию.
+ * @param deps - Массив зависимостей. Если undefined - выполняется каждый рендер.
+ * 
+ * @example
+ * ```ts
+ * useEffect(() => {
+ *   const timer = setInterval(() => console.log('tick'), 1000);
+ *   return () => clearInterval(timer); // cleanup
+ * }, []);
+ * ```
+ */
+export function useEffect(
+    effect: () => void | (() => void), 
+    deps?: any[]
+) {
+    if (activeInstance === undefined) {
+        throw new Error('useEffect must be called inside a component');
+    }
+
+    const idx = activeInstance.effectIndex++;
+    let eff = activeInstance.effects[idx];
+
+    if (!eff) {
+        eff = { execute: effect, deps };
+        activeInstance.effects[idx] = eff;
+    } else {
+        eff.execute = effect;
+        eff.deps = deps;
+    }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export {createApp} from "./my-react";
+export  {type JSX} from "./types/jsx";
+export { useState, useEffect } from "./hooks";
+export * from "./jsx-runtime";
+export * from "./router-dom";

package/src/jsx-dev-runtime/index.ts

@@ -0,0 +1 @@
+export { jsx as jsxDEV } from '../jsx-runtime';  // Или ваша реализация jsxDEV

package/src/jsx-runtime/index.ts

@@ -0,0 +1,102 @@
+import type {
+    ChildrenType, 
+    NormalizedChildrenType, 
+    ComponentPropsType, 
+    JSX, 
+    JSXElement, 
+    JSXElementType
+} from "../types/jsx"
+
+/**
+ * Нормализует children в плоский массив JSX-элементов и строк.
+ * Преобразует undefined → [], одиночные элементы → [element], массивы → flat().
+ * @param children - Исходные children из JSX.
+ * @returns Нормализованный массив для reconciler'а.
+ */
+const normalizedChildren = (children: ChildrenType): NormalizedChildrenType => {
+   if (children === undefined || children === null) {
+        return [];
+    }
+    if (!Array.isArray(children)) {
+        return [children];
+    }
+    return children.flat().filter(child => 
+        child !== null && child !== undefined
+    );
+}
+
+/**
+ * Основная функция создания JSX-элементов и компонентов (jsx).
+ * Поддерживает создание DOM-элементов (string tag) и компонентов (function).
+ * Автоматически нормализует children и преобразует атрибуты.
+ * 
+ * @param type - Тип элемента: string (div, span) или функция-компонент.
+ * @param props - Пропсы элемента/компонента + опциональные children.
+ * @param key - Уникальный ключ для reconciler'а (опционально).
+ * @returns JSXElement (DOM) или JSXComponent (компонент).
+ * 
+ * @example Создание DOM-элемента:
+ * ```ts
+ * jsx('div', { className: 'container', children: 'Hello' }, 'unique-key')
+ * // → { type: 'element', tagName: 'div', attributes: Map, children: ['Hello'] }
+ * ```
+ * 
+ * @example Создание компонента:
+ * ```ts
+ * const MyButton = (props) => jsx('button', props);
+ * jsx(MyButton, { text: 'Click me' }, 'btn-1')
+ * // → { type: 'component', func: MyButton, props, key: 'btn-1' }
+ * ```
+ */
+function jsx<PropsType extends ComponentPropsType>(
+    type: string | ((props: PropsType) => any),
+    props: PropsType & { children?: ChildrenType },
+    key: string | undefined
+): JSXElementType {
+    if (typeof type === 'string') {
+        // Создаем DOM-элемент (div, span, button)
+        const attributes = new Map<string, any>();
+        Object.entries(props).forEach(([k, v]) => {
+            if (k !== "children") {
+                if (k === "disabled" && !v) {
+                    return
+                }
+                if (k === "className") {
+                    attributes.set("class", v)
+                } else {
+                    attributes.set(k, v)
+                }
+            }
+        })
+        return {
+            type: "element",
+            tagName: type,
+            attributes: attributes,
+            children: normalizedChildren(props.children)
+        } as JSXElement
+    } else {
+        if (key === undefined) {
+            key = props.key as string
+        }
+        if (!key || key === null) {
+            const propsForHash = { ...props };
+            delete propsForHash.children;
+            key = `${type.name}_${stableHash(propsForHash)}`;
+        }
+        return {
+            type: "component",
+            key: key,
+            func: type,
+            props,
+            children: normalizedChildren(props.children)
+        }
+    }
+}
+function stableHash(obj: any): string {
+  return btoa(
+    JSON.stringify(obj, Object.keys(obj).sort())
+  ).slice(0, 8);
+}
+
+export type { JSX };
+export { jsx, jsx as jsxs };

package/src/my-react/index.ts

@@ -0,0 +1,509 @@
+import type {
+    ComponentPropsType, 
+    JSXElement, 
+    JSXComponent, 
+    JSXElementType, 
+    KeyType
+} from '../types/jsx'
+import type {
+    DOMElement,
+    DOMTextNode
+} from '../types/dom'
+
+import {
+    _setActiveInstance,
+    _setActiveStateIndex
+} from '../hooks/index'
+
+/**
+ * Обновляет атрибуты DOM-элемента согласно новой карте атрибутов JSX.
+ * Сравнивает старые и новые атрибуты, удаляет устаревшие, добавляет новые,
+ * обрабатывает события и специальные атрибуты (style, value).
+ * @param repr - DOM-представление элемента.
+ * @param newAttrs - Новые атрибуты из JSX-дерева.
+ */
+const patchAttributes = (repr: DOMElement, newAttrs: Map<string, any>) => {
+    repr.attrs.forEach((_, k) => {
+        if (!newAttrs.has(k)) {
+            repr.attrs.delete(k);
+            repr.elem.removeAttribute(k);
+        }
+    })
+
+    repr.attrs.forEach((v, k) => {
+        if (newAttrs.get(k) !== v) {
+            repr.attrs.set(k, newAttrs.get(k))
+            repr.elem.setAttribute(k, newAttrs.get(k));
+        }
+    })
+    repr.eventListeners.forEach((l) => {
+        repr.elem.removeEventListener(l.type, l.callback)
+    })
+    repr.eventListeners = []
+
+    newAttrs.forEach((v, k) => {
+        if (k.startsWith("on") && k[2] == k[2].toUpperCase()) {
+            const typeEvent = k.slice("on".length).toLocaleLowerCase()
+            repr.elem.addEventListener(typeEvent, v as () => void);
+            repr.eventListeners.push({type: typeEvent, callback: v})
+        } else if (k === "value" && repr.elem instanceof HTMLInputElement) {
+            repr.elem.value = v;
+            repr.attrs.set(k, v)
+        } else if (k === "style" && typeof v === "object" && v !== null) {
+            const oldStyle = repr.attrs.get("style") || {};
+            for (const prop in oldStyle) {
+                if (!(prop in v)) {
+                    (repr.elem as any).style[prop] = "";
+                }
+            }
+            Object.assign((repr.elem as any).style, v);
+            repr.attrs.set(k, v);
+        } else if(!repr.attrs.has(k)) {
+            // Обычные атрибуты
+            repr.attrs.set(k, v)
+            repr.elem.setAttribute(k, v)
+        }
+    })
+}
+
+/** Массив очередей "грязных" компонентов по уровням глубины */
+const dirtyInstances: Set<ComponentInstance<any>>[] = [];
+let isUpdateScheduled = false;
+
+/**
+ * Глубокое сравнение двух значений с поддержкой функций и вложенных объектов.
+ * @param val1 - Первое значение для сравнения.
+ * @param val2 - Второе значение для сравнения.
+ * @returns true если значения равны.
+ */
+function deepEqual(val1: any, val2: any): boolean {
+    if (val1 === val2) return true;
+
+    if (typeof val1 === 'function' && typeof val2 === 'function') {
+        return true
+    }
+
+    if (val1 == null || val2 == null || typeof val1 !== 'object' || typeof val2 !== 'object') {
+        return val1 === val2;
+    }
+    
+    if (Array.isArray(val1) && Array.isArray(val2)) {
+        if (val1.length !== val2.length) return false;
+        for (let i = 0; i < val1.length; i++) {
+            if (!deepEqual(val1[i], val2[i])) return false;
+        }
+        return true;
+    }
+
+    const keys1 = Object.keys(val1);
+    const keys2 = Object.keys(val2);
+
+    if (keys1.length !== keys2.length) return false;
+
+    for (const key of keys1) {
+        if (!Object.prototype.hasOwnProperty.call(val2, key) || !deepEqual(val1[key], val2[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+/**
+ * Помечает компонент как "грязный" для обновления и планирует raf-обновление.
+ * @param instance - Компонент для обновления.
+ */
+export const markDirty = (instance: ComponentInstance<any>) => {
+    while (dirtyInstances.length <= instance.depth) {
+        dirtyInstances.push(new Set());
+    }
+    dirtyInstances[instance.depth].add(instance);
+    if (!isUpdateScheduled) {
+        window.requestAnimationFrame(() => {
+            schedUpdate();
+        })
+    }
+}
+
+/**
+ * Планировщик обновлений - обрабатывает "грязные" компоненты по уровням глубины.
+ * Использует requestAnimationFrame для батчинга обновлений.
+ */
+const schedUpdate = () => {
+    isUpdateScheduled = true;
+    for (let i = 0; i < dirtyInstances.length; i++) {
+        if (dirtyInstances[i].size === 0) {
+            continue
+        }
+        dirtyInstances[i].forEach((instance) => {
+            instance.update();
+            dirtyInstances[i].delete(instance);
+        });
+        window.requestAnimationFrame(() => {
+            schedUpdate();
+        })
+        return
+    }
+    
+    isUpdateScheduled = false;
+};
+
+/**
+ * Структура эффекта useEffect с зависимостями и cleanup функцией.
+ */
+type Effect = {
+    execute: () => void | (() => void);
+    deps?: any[];
+    prevDeps?: any[];
+    cleanup?: () => void;
+};
+
+/**
+ * Экземпляр компонента React, управляющий жизненным циклом и DOM-патчингом.
+ * Содержит VTree, состояние, эффекты, дочерние компоненты и DOM-представление.
+ */
+export class ComponentInstance<PropsType extends ComponentPropsType> {
+    /** Функция рендера компонента */
+    func: (props: PropsType) => any;
+    /** Карта дочерних компонентов по ключам */
+    instanceMap: Map<KeyType, ComponentInstance<any>>;
+    /** DOM-представление корневого элемента */
+    domElement: DOMElement | undefined;
+    /** Виртуальное дерево JSX */
+    vTree: JSXElement | undefined;
+    /** Пропсы компонента */
+    props: PropsType;
+    /** Массив состояний useState */
+    states: any[] = [];
+    /** Уровень глубины в дереве компонентов */
+    depth: number;
+    /** Родительский компонент */
+    parent: ComponentInstance<any> | undefined;
+    /** Массив эффектов useEffect */
+    effects: Effect[] = [];
+    /** Индекс текущего эффекта */
+    
+    effectIndex: number = 0;     
+
+    /**
+     * Создает новый экземпляр компонента.
+     * @param func - Функция рендера компонента.
+     * @param props - Пропсы компонента.
+     * @param parent - Родительский компонент.
+     */
+    constructor(
+        func: (props: PropsType) => any, 
+        props: PropsType, 
+        parent: ComponentInstance<any> | undefined
+    ) {
+        this.func = func;
+        this.props = props;
+        this.instanceMap = new Map();
+        this.parent = parent;
+        this.depth = (parent?.depth ?? 1) + 1;
+
+        this.update();
+    }
+
+    /** Полный цикл обновления компонента */
+    update() {
+        this.updateVTree();
+        if (this.vTree !== null){
+            this.patchInstances();
+            this.patchDOMNodes();
+            this.flushEffects();
+        }else{
+            this.destroy()
+        }
+
+    }
+
+    /** Пересоздает виртуальное дерево JSX */
+    updateVTree() {
+        _setActiveInstance(this)
+        _setActiveStateIndex(0)
+        this.effectIndex = 0;
+        this.vTree = this.func(this.props)
+        _setActiveInstance(undefined)
+    }
+
+    /**
+     * Извлекает виртуальные компоненты из JSX-дерева в карту.
+     * @param branch - Текущая ветка JSX-дерева.
+     * @param mapToAdd - Карта для добавления компонентов.
+     */
+    extractVirtualComponents(
+        branch: JSXElement, 
+        mapToAdd: Map<KeyType, JSXComponent<any>>
+    ) {
+        branch.children.forEach((ch) => {
+            if (typeof ch === "string") {
+                return;
+            }
+            if (ch === undefined || ch === null) {
+                return;
+            }
+            if (ch.type == "element") {
+                this.extractVirtualComponents(ch, mapToAdd)
+            } else {
+                if (ch.key !== undefined) {
+                    mapToAdd.set(ch.key, ch);
+                }
+            }
+        })
+    }
+
+    /** Синхронизирует дочерние компоненты с новым VTree */
+    patchInstances() {
+        if (this.vTree === undefined) {
+            throw new Error("vTree is undefined")
+        }
+        const newInstanceMap = new Map<KeyType, JSXComponent<any>>();
+        this.extractVirtualComponents(this.vTree, newInstanceMap);
+        
+        this.instanceMap.forEach((v, k) => {
+            if (!newInstanceMap.has(k)) {
+                v.destroy();
+                this.instanceMap.delete(k);
+            }
+        });
+
+        this.instanceMap.forEach((v, k) => {
+            const newProps = (newInstanceMap.get(k) as JSXComponent<any>).props
+            if (!deepEqual(v.props, newProps)) {
+                v.props = newProps
+                v.update();
+            }
+        });
+
+        newInstanceMap.forEach((v, k) => {
+            if (!this.instanceMap.has(k)) {
+                this.instanceMap.set(k, new ComponentInstance<any>(v.func, v.props, this));
+            }
+        });
+    }
+
+    /** Выполняет эффекты useEffect с проверкой зависимостей */
+    flushEffects() {
+        for (const eff of this.effects) {
+            if (!eff) continue;
+
+            const depsChanged = 
+                !eff.prevDeps ||
+                eff.deps?.length !== eff.prevDeps.length ||
+                eff.deps?.some((dep, i) => !deepEqual(dep, eff.prevDeps?.[i]));
+
+            if (depsChanged) {
+                if (eff.cleanup) {
+                    eff.cleanup();
+                }
+                const cleanup = eff.execute();
+                if (typeof cleanup === 'function') {
+                    eff.cleanup = cleanup;
+                } else {
+                    eff.cleanup = undefined;
+                }
+                eff.prevDeps = eff.deps ? [...eff.deps] : undefined;
+            }
+        }
+    }
+
+    /** Патчит DOM согласно новому VTree */
+    patchDOMNodes() {
+        if (this.vTree === undefined) {
+            throw new Error()
+        }
+        const parentElem = this.domElement?.elem.parentElement;
+        if (this.domElement?.elem.tagName.toLowerCase() !== this.vTree.tagName) {
+            const prevChild = this.domElement?.elem
+            this.domElement = {
+                type: "element",
+                elem: document.createElement(this.vTree?.tagName),
+                attrs: new Map<string, any>(),
+                children: [],
+                eventListeners: [],
+            };
+            
+            if (parentElem) {
+                parentElem.replaceChild(this.domElement.elem, prevChild as Node);
+            }
+        }
+        patchAttributes(this.domElement, this.vTree.attributes)
+        this.patchDOMNodesImpl(this.vTree.children, this.domElement.children, this.domElement.elem)
+    }
+
+    /**
+     * Рекурсивно патчит DOM-дерево согласно JSX-ветке.
+     * @param branch - Ветка JSX-дерева.
+     * @param domRepr - DOM-представление.
+     * @param parentElement - Родительский DOM-элемент.
+     */
+    patchDOMNodesImpl(
+        branch: (JSXElementType | string)[], 
+        domRepr: (DOMElement | DOMTextNode)[],
+        parentElement: Element
+    ) {
+        let branchIndex = 0;
+        let domReprIndex = 0;
+
+        while(true) {
+            if (branch.length <= branchIndex) {
+                break;
+            }
+         
+            const vNode = branch[branchIndex];
+            if (vNode === null || vNode === undefined) {
+                branchIndex++;
+                continue;
+            }
+            if (typeof vNode !== "string" && vNode?.type === undefined) {
+                branchIndex++;
+                continue
+            }
+
+            if (typeof vNode !== "string" && vNode.type === "component") {
+                const compInstance = this.instanceMap.get(vNode.key) as ComponentInstance<any>;
+                const compDom = compInstance.domElement;
+                console.log("compInstance", compInstance)
+                if (!compDom) { 
+                    branchIndex++;
+                    continue
+                }
+
+                if (domReprIndex >= domRepr.length) {
+                    domRepr.push(compDom);
+                } else if (domRepr[domReprIndex] !== compDom) {
+                    domRepr.splice(domReprIndex, 0, compDom);
+                }
+
+                const currentNode = parentElement.childNodes[domReprIndex];
+                if (compDom.elem !== currentNode) {
+                    if (currentNode) {
+                        parentElement.insertBefore(compDom.elem, currentNode);
+                    } else {
+                        parentElement.appendChild(compDom.elem);
+                    }
+                }
+
+                branchIndex++;
+                domReprIndex++;
+                continue;
+            }
+            if (domReprIndex >= domRepr.length) {
+                if (typeof vNode !== "string") {
+                    domRepr.push({
+                        type: "element",
+                        attrs: new Map(),
+                        elem: document.createElement(vNode.tagName),
+                        children: [],
+                        eventListeners: [],
+                    })
+                } else {
+                    domRepr.push({
+                        type: "textNode",
+                        text: vNode,
+                        node: document.createTextNode(vNode),
+                    });
+                }
+            }
+
+            const domNode = domRepr[domReprIndex];
+            
+            if (typeof vNode === "string" && domNode.type === "element") {
+                domNode.elem.parentElement?.removeChild(domNode.elem);
+                domRepr.splice(domReprIndex, 1);
+                continue;
+            }
+            
+            if (typeof vNode !== "string" && domNode.type === "textNode") {
+                domNode.node.parentElement?.removeChild(domNode.node);
+                domRepr.splice(domReprIndex, 1)
+                continue;
+            }
+
+            if (typeof vNode === "string" && domNode.type === "textNode") {
+                domNode.node.textContent = vNode;
+                const refNode = parentElement.childNodes[domReprIndex];
+                if (refNode) {
+                    parentElement.insertBefore(domNode.node, refNode);
+                } else {
+                    parentElement.appendChild(domNode.node);
+                }
+                branchIndex++;
+                domReprIndex++;
+                continue;
+            }
+
+            if (typeof vNode !== "string" && domNode.type !== "textNode") {
+                let elemRepr = domNode
+                if (domNode.elem.tagName.toLowerCase() !== vNode.tagName) {
+                    const newElemRepr: DOMElement = {
+                        type: "element", 
+                        attrs: new Map(),
+                        elem: document.createElement(vNode.tagName),
+                        children: [],
+                        eventListeners: []
+                    }
+                    if (domNode.elem.parentElement === parentElement) {
+                        parentElement.insertBefore(newElemRepr.elem, domNode.elem);
+                    } else {
+                        parentElement.appendChild(newElemRepr.elem);
+                    }
+                    domRepr.splice(domReprIndex, 0, newElemRepr);
+                    elemRepr = newElemRepr
+                }
+                patchAttributes(elemRepr, vNode.attributes)
+                const currentNode = parentElement.childNodes[domReprIndex];
+                if (elemRepr.elem !== currentNode) {
+                    if (currentNode) {
+                        parentElement.insertBefore(elemRepr.elem, currentNode);
+                    } else {
+                        parentElement.appendChild(elemRepr.elem);
+                    }
+                }
+                
+                this.patchDOMNodesImpl(vNode.children, elemRepr.children, elemRepr.elem)
+                branchIndex++;
+                domReprIndex++;
+            }
+        }
+
+        while(domRepr.length > domReprIndex) {
+            const r = domRepr[domReprIndex]
+            if (r.type === "element") {
+                r.elem.parentElement?.removeChild(r.elem);
+            } else {
+                r.node.parentElement?.removeChild(r.node);
+            }
+            domRepr.splice(domReprIndex, 1);
+        }
+    }
+
+    /** Разрушает компонент и все дочерние */
+    destroy() {
+        for (const eff of this.effects) {
+            if (eff?.cleanup) {
+                eff.cleanup();
+            }
+        }
+        this.instanceMap.forEach((v) => {
+            v.destroy();
+        });
+        this.instanceMap.clear()
+        if (this.domElement?.elem.parentElement !== null) {
+            this.domElement?.elem.parentElement.removeChild(this.domElement.elem);
+        }
+        this.domElement = undefined;
+    }
+}
+
+/**
+ * Создает React-приложение и монтирует его в DOM-элемент.
+ * @param elem - Контейнер DOM-элемент.
+ * @param fn - Функция рендера корневого компонента.
+ */
+const createApp = (elem: Element, fn: () => JSXElementType) => {
+    const inst = new ComponentInstance<any>(fn, {}, undefined);
+    elem.appendChild(inst.domElement?.elem as Node);
+}
+
+export { createApp };

package/src/router-dom/Router.tsx

@@ -0,0 +1,79 @@
+import type { JSXElementType } from "../types/jsx"
+
+interface IRouterProps{
+    path: string
+    children: JSXElementType
+    currentPath: string
+}
+
+export function matchPath(pattern: string, path: string) {
+    const names: string[] = []
+    let regexStr = ''
+
+    for (let i = 0; i < pattern.length;) {
+        const ch = pattern[i]
+        if (ch === '{') {
+            const close = pattern.indexOf('}', i + 1)
+            if (close === -1) {
+                regexStr += '\\{'
+                i++
+                continue
+            }
+            const name = pattern.substring(i + 1, close)
+            names.push(name)
+            regexStr += '([^/]+)'
+            i = close + 1
+        } else {
+            if ('^$\\.*+?()[]|/'.includes(ch)) {
+                regexStr += '\\' + ch
+            } else {
+                regexStr += ch
+            }
+            i++
+        }
+    }
+
+    const regex = new RegExp('^' + regexStr + '$')
+    const m = regex.exec(path)
+    if (!m) return { matches: false, params: {} as Record<string, string> }
+
+    const params: Record<string, string> = {}
+    for (let i = 0; i < names.length; i++) {
+        params[names[i]] = decodeURIComponent(m[i + 1])
+    }
+    return { matches: true, params }
+}
+
+export function Router({path, children, currentPath}: IRouterProps){
+    const { matches, params } = matchPath(path, currentPath)
+    console.log(`Router ${path}:`, { currentPath, matches, params, children })
+
+    if (!matches && path != "*") return null
+
+    if (children.type === 'component') {
+        children.props = { ...children.props, ...params }
+        console.log(`render children ${path}`)
+        return (<div>{children}</div>)
+    }
+
+    return (<div>{children}</div>)
+}
+
+interface ISwitchrProps{
+    children: any[]
+    currentPath: string
+}
+
+export function Switch({ currentPath, children }: ISwitchrProps) {
+  const childrenArray = Array.isArray(children) ? children : [children];
+  
+  for (const child of childrenArray) {
+    if (child && child.type === 'component' && child.props.path) {
+      const { matches } = matchPath(child.props.path, currentPath);
+      if (matches || child.props.path == "*") {
+        return <div>{child}</div>;
+      }
+    }
+  }
+  return null;
+}

package/src/router-dom/hooks.ts

@@ -0,0 +1,8 @@
+export function useNavigate() {
+  const navigate = (path: string) => {
+    console.log(path)
+    window.history.pushState({}, '', path);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  };
+  return navigate;
+}

package/src/router-dom/index.ts

@@ -0,0 +1,2 @@
+export { Router, Switch } from "./Router";
+export { useNavigate } from "./hooks";

package/src/types/dom.ts

@@ -0,0 +1,29 @@
+/**
+ * Представление DOM-элемента в виртуальном DOM.
+ * Содержит реальный DOM-узел, атрибуты, дочерние элементы и обработчики событий.
+ */
+export interface DOMElement {
+    /** Тип узла */
+    type: "element";
+    /** Реальный DOM-элемент браузера */
+    elem: Element;
+    /** Карта атрибутов элемента (ключ-значение) */
+    attrs: Map<string, any>;
+    /** Массив дочерних DOM-узлов */
+    children: (DOMElement | DOMTextNode)[];
+    /** Массив обработчиков событий элемента */
+    eventListeners: { type: string; callback: () => void; }[];
+}
+
+/**
+ * Представление текстового DOM-узла в виртуальном DOM.
+ * Используется для рендера строкового контента между элементами.
+ */
+export interface DOMTextNode {
+    /** Тип узла */
+    type: "textNode";
+    /** Текстовое содержимое */
+    text: string;
+    /** Реальный DOM текстовый узел */
+    node: Node;
+}

package/src/types/jsx.ts

@@ -0,0 +1,39 @@
+type any1 = any;
+export type KeyType = string;
+
+export namespace JSX{
+    export interface IntrinsicAttributes extends any1{
+        key?: KeyType;
+    }
+    export type SVGAttributes = any;
+    export type HTMLAttributes = any;
+    export interface IntrinsicElements extends any1{}
+}
+export interface ComponentPropsType {
+    key: KeyType;
+    onClick: ()=>any | undefined;
+}
+
+export interface JSXElement {
+    type: "element"
+    tagName: string;
+    attributes: Map<string, any>;
+    children: NormalizedChildrenType;
+}
+export interface JSXComponent<PropsType extends ComponentPropsType>{
+    type: "component";
+    func: (props: any) => JSXElementType;
+    key: KeyType;
+    props: PropsType;
+    children: NormalizedChildrenType;
+}
+
+export type JSXElementType = JSXElement | JSXComponent<any> ;
+
+export type ChildrenType =  
+    | JSXElementType 
+    | string 
+    | (JSXElementType | string)[] 
+    | undefined;
+
+export type NormalizedChildrenType = (JSXElementType | string)[];

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "paths":{
+      "@my-react/*": ["./src/*"]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "@my-react",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}