Новый сайт https://www.reatom.dev/ 🌈🌈🌈

Переехали на https://starlight.astro.build/ - бомба! Ставится как доп пакет для astro.build - отличный баланс DX и гибкости.

- сам astro уже дает кучу всего простым и понятным способом
- я за час перевез существующий сайт на starlight
- простой, но элегантный UI, раскладки для нескольких экранов
- из коробки есть лаяут для доков и для лендоса
- оверрайдом одной css-переменной добавил брендинг 😅

Сравнения впечатляют, сайт просто раз в 10 меньше и быстрее аналогов! Хороший перф показал только vitepress, но он все равно требует в два раза больше ресурсов.

https://docusaurus.io/docs/installation
55 requests
957 kB transferred
3.4 MB resources

https://react.dev/community
29 requests
683 kB transferred
1.3 MB resources

https://nuxt.com/docs/api/composables/use-app-config
81 requests
427 kB transferred
1.1 MB resources

https://vitepress.dev/guide/what-is-vitepress
14 requests
141 kB transferred
344 kB resources

https://www.reatom.dev/
6 requests
47.9 kB transferred
202 kB resources

Вот интересное совпадение, “уточка” же - главный пет для выслушивания собственных тупняков 🤔

Сделать online playground в 2023 все еще сложно.

Что я хотел? Конечно, полностью рабочий TypeScript с подсказками - это очень удобно. Но таких реплов куча, и весят они как самолет, потому что нужно тащить метра два monaco и полноценный typescript.

Ну и ладно, это же запускается на компьютере разработчика, в чем проблема? Проблемы две. Иногда хочется открыть репл с мобилки, а это и медленная сеть, и для кого-то медленная инициализация. Но самая главная проблема - это несколько реплов на одной странице. Для некоторых доков это нужно, но от пачки codesandbox / stackblitz задохнется даже современная машина разраба.

Есть ли еще готовые решения? Я искал и не нашел.

И тут на помощь приходит гениальный esm.sh - это такой хедлес сендбокс, да еще и бесплатный. Кормим ему код, он его билдит и отдает ссылку на готовый ES модуль. Не нужно скачивать мегабайты из NPM, мы получаем только минимальный конечный бандл. Красота.

Натянул это на codemiror и получил вполне рабочее и очень быстрое решение! Но есть проблема :)

Суть нативных модулей в том что их кешит браузер и вы не можете один и тот же код запускать дважды. Что бы это пофиксить, исходники нужно хотя бы как-то модифицировать и пересоздавать модуль - а это лишний лаг на esm.sh и в целом спам сервиса.

Как бы вы это решили?)

Подумаем 🤔

Кеш импортируемых пакетов - это ок (его можно сбросить перезагрузкой страницы, на крайний случай), нам нужно перезапускать только код в редакторе, а сложности сборки можно оставить на esm.sh. Как это сделать? Заменить все импорты в вашем коде добавив им префикс https://esm.sh/. Делается это по такому регекспу /import.*('|")(?<path>.*)('|")/g (код), правда переносы строк пока не поддерживаются. Так все ломается, пока не понял почему: /import(.|\n)*(‘|”)(?<path>.*)(‘|”)/g.

Пдж, но если исходники мы больше не отправляем на билд, как вырезать типы? Самое маленькое что я нашел - это sucrace, делает много чего за пол сотни кб. Круто, конечно, но мне нужно только вырезание типов, надеюсь найду что-то еще меньше потом.

Редактор готов! Еще бы логи добавить… Хотел добавить @discoveryjs/discovery, но пока не осилил. Да и тяжелый он, скорее всего подрублю потом как доп модуль, а пока неплохо живется на крошечном @observablehq/inspector (в консоле все логи тоже есть).

Потыкать можно тут: https://reatom.dev/repl

11 requests, 265 kB transferred, кмк отличный начальный результат.

Там есть еще пачка багов со стилями и по UX, начал пилить обновление выпилив preact (временно взял для скорости разработки), но застрял из-за бага в astro, ждемс. Думаю, через 1-2 недельку запаблишу как отдельный пакет.

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