@brojs/frontend-micro-adv-template

Расширенный шаблон для создания микрофронтендов в проектах BroJS.

Установка

npm install @brojs/frontend-micro-adv-template

Структура проекта

frontend-micro-adv-template/
├── template/
│   ├── src/
│   │   ├── pages/         # Страницы приложения
│   │   ├── __data__/      # Данные для шаблона
│   │   ├── app.tsx        # Корневой компонент
│   │   ├── dashboard.tsx  # Компонент дашборда
│   │   ├── index.tsx      # Точка входа
│   │   └── theme.tsx      # Настройки темы
│   ├── stubs/            # Заготовки файлов
│   ├── tsconfig.json     # Конфигурация TypeScript
│   ├── eslint.config.mjs # Конфигурация ESLint
│   ├── .prettierrc.json  # Конфигурация Prettier
│   ├── bro.config.js     # Конфигурация BroJS
│   ├── Jenkinsfile      # Конфигурация CI/CD
│   └── types.d.ts       # Глобальные типы
├── package.json         # Зависимости и скрипты
└── README.md           # Документация

Использование

Создание нового проекта

brojs create my-advanced-micro-frontend --template micro-adv

Разработка

npm run dev

Сборка

npm run build

Основные компоненты

TypeScript

interface User {
  id: string;
  name: string;
  email: string;
}

const UserCard: React.FC<{ user: User }> = ({ user }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

Стилизация

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    background-color: ${props => props.theme.colors.primaryDark};
  }
`;

Конфигурация

TypeScript

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  }
}

BroJS

module.exports = {
  name: 'my-micro-frontend',
  version: '1.0.0',
  description: 'Advanced micro frontend template',
  author: 'Your Name',
  license: 'MIT',
  dependencies: {
    react: '^18.2.0',
    'react-dom': '^18.2.0',
    'styled-components': '^5.3.10',
    typescript: '^4.9.5'
  }
};

Разработка

Компоненты

• Используйте TypeScript для типизации
• Следуйте принципам SOLID
• Применяйте паттерны проектирования

Стили

• Используйте styled-components
• Применяйте CSS Modules
• Используйте CSS Grid и Flexbox

Разработка

npm test

Лицензия

MIT