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

SkateJS — это современная библиотека для создания Web Components на чистом JavaScript, обеспечивающая реактивность, лёгкую интеграцию с существующими проектами и поддержку стандартов Web Components. Основой любого проекта на SkateJS является правильная организация файлов и компонентов, что позволяет масштабировать код и упрощает поддержку.

Структура каталогов

Типичная структура проекта на SkateJS может выглядеть следующим образом:

project-root/
│
├─ src/
│  ├─ components/
│  │  ├─ my-button/
│  │  │  ├─ index.js
│  │  │  ├─ my-button.js
│  │  │  └─ my-button.css
│  │  ├─ my-modal/
│  │  │  ├─ index.js
│  │  │  ├─ my-modal.js
│  │  │  └─ my-modal.css
│  ├─ utils/
│  │  └─ helpers.js
│  └─ app.js
│
├─ public/
│  └─ index.html
│
├─ package.json
└─ webpack.config.js

Ключевые моменты:

  • src/components/ — каталог для всех компонентов. Каждый компонент хранится в отдельной папке, содержащей основной JS-файл, CSS и индексный файл для экспорта.
  • src/utils/ — вспомогательные функции и утилиты, используемые компонентами.
  • public/ — статические файлы, включая HTML и изображения.
  • app.js — точка входа для всего приложения, где подключаются компоненты и настраивается логика приложения.

Организация компонентов

Каждый компонент в SkateJS создаётся через функцию skate, которая принимает объект конфигурации с описанием поведения компонента. Структурно компонент состоит из нескольких частей:

  1. Определение класса компонента Создаётся класс, наследующийся от HTMLElement, или используется фабрика SkateJS для создания элемента:

    import { skate } from 'skatejs';

skate('my-button', {
    props: {
        label: String
    },
    render(elem) {
        elem.textContent = elem.label || 'Default';
    }
});

  2. Стилизация компонента Для поддержки инкапсуляции рекомендуется использовать Shadow DOM и подключать CSS напрямую к компоненту:

    const style = document.createElement('style');
style.textContent = `
    button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
`;
elem.shadowRoot.appendChild(style);

  3. Индексация и экспорт Для упрощения импорта компонентов используется индексный файл:

    import './my-button';
export * from './my-button';

Разделение логики и визуальной части

SkateJS поддерживает реактивные свойства и наблюдатели, что позволяет разделять логику и представление компонента. Например, можно определить реактивное свойство и функцию обновления DOM при его изменении:

skate('my-counter', {
    props: {
        count: Number
    },
    updated(elem) {
        elem.textContent = `Счётчик: ${elem.count}`;
    }
});

Это обеспечивает чистый код и упрощает тестирование компонентов.

Интеграция с утилитами и сервисами

В отдельной папке utils/ рекомендуется хранить функции, которые используются в нескольких компонентах. Например, форматирование даты, работа с API или обработка событий. Это позволяет избежать дублирования кода и делает проект более модульным.

// src/utils/helpers.js
export function formatDate(date) {
    return new Intl.DateTimeFormat('ru-RU').format(date);
}

Компоненты могут импортировать эти функции и использовать их в методах render или updated.

Настройка сборки

Для сборки проекта обычно используют Webpack, Rollup или Vite. Точка входа (app.js) подключает все компоненты:

import './components/my-button';
import './components/my-modal';

document.body.appendChild(document.createElement('my-button'));

Webpack конфигурируется с поддержкой ES-модулей и CSS, чтобы компоненты могли быть импортированы как отдельные модули. Это обеспечивает совместимость с любыми современными браузерами и облегчает масштабирование проекта.

Поддержка масштабируемости

Правильная структура проекта позволяет:

  • Добавлять новые компоненты без изменения существующих.
  • Легко подключать сторонние библиотеки и утилиты.
  • Сохранять модульность, облегчая тестирование и рефакторинг.
  • Использовать Shadow DOM и реактивные свойства для изоляции состояния компонентов.

Организация кода в папки по типу «components», «utils», «public» и точка входа с импортами всех компонентов является стандартной практикой, позволяющей эффективно управлять проектом на SkateJS.

Оглавление