Сделать 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 недельку запаблишу как отдельный пакет.

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