Александр

Использовать deleteSync или async/await.

Object.fromEntries(Object.entries(...).map(([key, value]) => [key, [value]]));

Зависит как минимум от свойства display

Типизировать можно и таким образом:

type Branch<T> = {
  data: T;
  children: Branch<T>[];
};

type Tree<T> = Branch<T>[];

const createTree = <T, K>(
  collection: T[],
  extractId: (entry: T) => K,
  extractParentId: (entry: T) => K | null
): Tree<T> => {
  const cache = new Map<K, Branch<T>>();
  const tree: Tree<T> = [];

  for (const entry of collection) {
    const id = extractId(entry);
    const parentId = extractParentId(entry);
    const branch: Branch<T> = {
      data: entry,
      children: []
    };

    const root =
      parentId !== null ? cache.get(parentId)?.children ?? tree : tree;
    root.push(branch);
    cache.set(id, branch);
  }

  return tree;
};

const tree = createTree(
  item_list,
  (entry) => entry.id,
  (entry) => entry.parentId
);

Для деплоя приложения на GitHub Pages необходимо корректно настроить Vite/Webpack.
Для Vite необходимо указать base - пример.
Для Webpack необходимо указать homepage.
Также вот пример настройки автоматического деплоя на GitHub Pages.

Ещё можете почитать статью: Smoother & sharper shadows with layered box-shadows.

Function.prototype.apply() принимает первым аргументом контекст (this), с которым будет работать, в Вашем случае - person. Вторым аргументом принимает массив аргументов вызова функции, которую вызываете при помощи .apply. Можете почитать подробнее на MDN и learn.javascript.ru.

https://codesandbox.io/p/sandbox/qna-q-1313246-zkkdfd

1. Необходимо создать Path2D один раз, а у Вас в него добавляется новый прямоугольник на каждой итерации render. Что-то вроде:

const createPath = (x, y) => {
  const path = new Path2D();
  path.roundRect(x, y, 200, 40, 30);
  return path;
};

let taskList = [
  { id: 0, value: "", x: 150, y: 75 },
  { id: 0, value: "", x: -150, y: 75 },
].map((entry) => ({ ...entry, path: createPath(entry.x, entry.y) }));

2. Храните позицию камеры и перемещайте холст на каждой итерации render.
Добавляем переменные для отслеживания позиции камеры на холсте.

let cameraX = 0;
let cameraY = 0;

Обновляем позицию камеры на холсте.

addEventListener("mousemove", ({ button, clientX, clientY }) => {
  if (pressMM) {
    cameraX += clientX - lastX;
    cameraY += clientY - lastY;
    lastX = clientX;
    lastY = clientY;
  }
});

Рисуем элементы с учетом позиции камеры холста.

const drawTasks = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.save();
  context.translate(cameraX, cameraY);

  for (const { x, y, path, value } of taskList) {
    context.beginPath();
    context.stroke(path);
  }

  context.restore();
};

Второй пример сначала дополните всеми изменениями и после решайте, насколько корректное поведение.

Вставляйте ссылку программно после инициализации.

https://create-react-app.dev/docs/proxying-api-req...
https://vitejs.dev/config/server-options.html#serv...