7iomka

Организация сложной асинхронной логики в FSD-проекте на Vue

В данной архитектуре сложная бизнес-логика, не связанная напрямую с отображением, выносится в отдельный слой – слой доменной логики (Domain Layer) или слой сценариев/Use Case. При использовании подхода Feature-Driven Development (FSD) можно организовать это следующим образом:

1. Отдельная фича или доменный модуль

   Для сущности Game можно создать фичу game, внутри которой будут:

• Use Case / сценарии (например, сценарий добавления игры). В нем реализована цепочка действий: обход файлов, парсинг файла README.md, подготовка данных и вызов API для загрузки.

7iomka

/*
 * ***** FORKED AND MODIFIED FROM https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
 * Commit: https://github.com/adobe/react-spectrum/commit/3706c6a504192bf7cb547467671e3c760b0dd14e
 * Issue: https://github.com/adobe/react-spectrum/issues/1216
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under

7iomka

Mantine v7 migration notes & questions

variantColorResolver

• It is impossible to know from the argument whether the user passed the color prop or it is a default value defined in the button-like component - the value seems have always fallback value. Usecase: I wan't to use currentColor as default value for color only for outline variant and only if user not passed different value with prop, even if this value is the same as default one.

getSize based utils alternative for safe usage?

Example: we like how tabs looks, except that we don't have ability to change spacing between tab pills (data-variant="pill"). For this case we write a simple component-wrapper, with one purpose - to support spacing prop:

7iomka

import { createStyles, rem } from '@mantine/core';
import { getSize } from '@steklo24/utils';

interface DynamicTableStylesParams {
  hasActions?: boolean;
  atStart?: boolean;
  atEnd?: boolean;
  hasScroll?: boolean;
  hasExtraColumnsAtTheEnd?: boolean;
}

7iomka

import type { CSSProperties } from 'react';
import type { MantineGradient, MantineColor, MantineTheme } from '@mantine/core';
import { getReadableColor, themeColor } from './theme-color';

export interface VariantInput {
  variant: string;
  color?: MantineColor;
  gradient?: MantineGradient;
  primaryFallback?: boolean;
}

7iomka

import type { ReactNode } from 'react';
import { useContext, createContext, useMemo } from 'react';

export const createReactContext = <ContextValueType extends object | null>(
  rootComponentName: string,
  defaultContext?: ContextValueType,
) => {
  const Context = createContext<ContextValueType | undefined>(defaultContext);

  const Provider = (props: ContextValueType & { children: ReactNode }): JSX.Element => {

7iomka

import type { CarouselStylesNames, Embla } from '@mantine/carousel';
import { Carousel } from '@mantine/carousel';
import { useMantineTheme } from '@mantine/core';
import { useCallback, useEffect, useRef, useState } from 'react';
import AutoHeight from 'embla-carousel-auto-height';
import type { CategoryEntity } from '@/shared/api';
import { createView } from '@/shared/lib/view';
import { ImageCard } from '@/shared/ui';
import type { CustomCarouselStylesParams } from '@/shared/lib/mantine';
import { useCarouselStyles } from '@/shared/lib/mantine';

7iomka

import clsx from 'clsx';
import { Anchor, Button, Loader, LoadingOverlay } from '@mantine/core';
import type { PropsWithChildren } from 'react';
import { useUnit } from 'effector-react';
import { $$viewer } from '@/entities/viewer';
import { Form, FormField, useForm } from '@/shared/form';
import { createView } from '@/shared/lib/view';
import { CustomLink } from '@/shared/ui';
import { createModelProvider2 } from '@/shared/lib/factory';
import { factory } from '../../register.model';

7iomka

// CAUTION
// - Avoid dynamic factories calls
// - Generic factories are not supported in `useModel`and `modelView` components
// Usage:
// const Root = modelView(factory, () => { ... })
// const model = useModel(factory)
// ... const $$instance = invoke(createSome, {someParams})

'use client';

7iomka

// CAUTION
// - Avoid dynamic factories calls
// - Generic factories are not supported in `useModel`and `modelView` components
// Usage:
// const Root = modelView(factory, () => { ... })
// const model = useModel(factory)
// ... const $$instance = invoke(createSome, {someParams})

'use client';