Vegtex

Фреймворк для фронт-энд разработки сайтов с WebComponents.

Что такое Vegtex?

Vegtex - это крутой фреймворк для фронт-энда сайтов. Этот фреймворк добавляет кучу встроенных тегов (компонентов), а также функционал для определения собственных тегов с помощью технологии WebComponents. Vegtex из коробки имеет следующий функционал:

Определение собственных тегов
Компоненты для Лендинга
Компоненты для SPA (Single Page Application)
Компоненты для Мобильных приложений
Темы (выбор базы и акцента)

Установка

Установка фреймворка предельна проста, то есть через npm. Использовать Vegtex можно вместе с любыми упоковщиками кода, например - Webpack или Parcel. Для установки фреймворка в ваш проект пропишите:

К сожалению, установка через сторонние менеджеры пакетов пока не предусмотрена.

npm i vegtex -D

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

Для инициализации просто используйте функцию vegtex.use(theme, themeAccent).

Доступные темы: dark и light Доступные акценты: azure,amethyst,toxicyellow

import { vegtex } from 'vegtex'

// Инициализируем vegtex
vegtex.use('dark', 'azure')

Создание компонента

Одна из главных фич фреймфорка - это определение собственных реактивных HTML тегов. Определить свой компонент - несложно, просто создайте инстанс VegtexComponent, укажите название тега в первом аргумента. Пример код:

import { vegtex, VegtexComponent } from 'vegtex'
  
// Инициализируем vegtex
vegtex.use('dark', 'azure')

// Создаем компонент
new VegtexComponent('my-component')

<my-component></my-component>

Event-handling

Также можно схватывать любые DOM события из любого инстанса определенного компонента.

import { vegtex, VegtexComponent } from 'vegtex'
  
// Инициализируем vegtex
vegtex.use('dark', 'azure')

// Создаем компонент
new VegtexComponent('my-component', {
    events: {
        onclick: (instance, event) => {
            console.log('Clicked my-component')
        }
    }
})

Закажи разработку
проекта

Заполнить бриф