За последние месяцы За последние несколько месяцев мне было поручено определить, как писать автономные виджеты и управлять ими для моей основной работы. Хотя обеспечить их работоспособность было относительно просто, я быстро понял, что поддерживать их — совсем другая задача

Имея это ввиду, в свободное время я начал побочный проект и сделал его открытым исходным кодом. Это позволило мне поделиться своими идеями и стратегиями, которые помогли мне обеспечить качество моих виджетов.

Как я их делал изначально?

Поскольку мои виджеты требовали высокого уровня реактивности, я в значительной степени полагался на API компонентов Svelte и использовал Rollup для объединения. «Все было просто и понятно, пока у меня не возникли следующие проблемы:

• Мой неиспользуемый CSS со временем увеличивался, и я также не был уверен, включен ли в комплект только CSS нужного компонента.

• Трудно обрабатывать JavaScript через виджеты без строгой типизации. Это быстро превратилось в беспорядок, так как мне пришлось поделиться некоторыми утилитами, такими как декодирование jwt и аутентификация.

Как я это изменил?

Я начал обдумывать, как можно установить некоторые значения по умолчанию и, что более важно, интегрировать систему типов. Это привело к созданию моего побочного проекта — svelte-standalone.

Целью svelte-standalone было:

• Убедитесь, что CSS хорошо минимизирован, и удалите неиспользуемый CSS при объединении.
• Убедиться, что выбранная система типов хорошо поддерживается и повторно используется во всех моих приложениях.

Примечание: выбранной системой типов была TypeScript.

• Обеспечить модульное и интеграционное тестирование.
• Убедитесь, что я могу визуально проверять свои виджеты до и после их анализа.

Как я всего этого достиг?

Убедившись в совместимости TypeScript с плагинами Rollup и препроцессором Svelte, я сделал шаг назад и разбил свой проект на ключевые этапы. В основном у меня было:

1. .svelte.
2. Файл embed.js, отвечающий за запуск экземпляра файла .svelte и добавление его в тело.

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

1. declaration.d.ts - включено, что я могу напрямую импортировать свой svelte-компонент и обернуть его с использованием типа SvelteComponent, поэтому я по умолчанию сделал свои svelte-компоненты строго типизированными.
2. types.ts - включено, что я могу написать конфигурацию по умолчанию на основе реквизитов, объявленных в файлеdeclaration.d.ts.
3. embed.ts - стандартный запуск и остановка моего компонента для всех моих виджетов!

И вуаля! Этот подход решил мои проблемы с системой типов и улучшил удобство обслуживания моих виджетов.

Как я решал проблемы CSS:

Основные проблемы, связанные с CSS, с которыми я столкнулся, заключались в следующем: как я могу без проблем очистить и минимизировать свой CSS? Как я могу написать CSS, над которым будет легко работать вместе и который будет легко интегрироваться в различные среды?

Решение было довольно простым: просто используйте Tailwind CSS.

Благодаря такому подходу я выявил следующие преимущества:

• Больше никаких конфликтующих стилей: использование Tailwind позволило мне перестать беспокоиться о конфликтующих стилях. Например, при работе с устаревшим приложением, сильно зависящим от Bootstrap, я просто применил префикс и важный флаг к своему виджету, и конфликты были разрешены.

• Бесшовная интеграция: при импорте виджета в другое приложение Tailwind я мог легко пропустить определенные директивы Tailwind, чтобы уменьшить размер пакета.

• Легкая очистка и минимизация: минимизация стала простой, а благодаря встроенному в Tailwind PurgeCSS мне просто нужно было правильно настроить флаг контента для каждого виджета. Это гарантировало, что в окончательный комплект будут включены только необходимые стили.

Как я решил проблемы с тестированием?

Я столкнулся с проблемой обеспечения комплексного тестирования моих виджетов, включая модульное тестирование, интеграционное тестирование и визуальное тестирование.

Моей основной целью было визуализировать компоненты как до, так и после их обработки с помощью Rollup. Для этого я предпринял следующие шаги:

• Сборник рассказов со строгой типизацией: я реализовал сборник рассказов со строгой типизацией на основе моих файловdeclaration.d.ts иtypes.ts. Это позволило автоматически создавать историю по умолчанию для каждого из моих виджетов.

• Интеграция Vite: я использовал Vite для загрузки связанного компонента на маршруте Svelte. Также было удобно сгенерировать компонент маршрута по умолчанию на основе моих файлов TypeScript.

Это все! Буду искренне признателен за обратную связь! Также обратите внимание на svelte-standalone.

Если у вас есть вопросы, предложения или замечания, не стесняйтесь обращаться ко мне!