Страница в браузере

Браузерный путь позволяет создать страницу Mercury без установки mx, Node.js, Rust и BEAM. Он использует обычный JavaScript, функции Hyperscript h и render, компоненты Mercury UI Card и Button и подключённую таблицу стилей. Браузер получает пакеты версии 4.1.1 с UNPKG; это не автономная сборка.

Откройте пример

Откройте полный пример первой страницы. Нужны браузер с поддержкой карт импортов и доступ к unpkg.com. Ожидаемый результат — оформленная карточка и кнопка Increment. Если пакеты или стили не загрузились, проверьте консоль и сетевые запросы браузера до продолжения работы.

Создайте свою копию

Сохраните пример как index.html в новом каталоге или скачайте его:

mkdir mercury-browser-page
cd mercury-browser-page
curl -fL https://mercury.jonnify.com/examples/first-page.html -o index.html

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

Как это работает

Карта импортов HTML закрепляет браузерные точки входа:

Элемент <link rel="stylesheet"> загружает https://unpkg.com/@fiberfx/ui@4.1.1/dist/styles.css. Закреплённая версия определяет запрошенный выпуск, но не заменяет локальную контрольную сумму или автономную копию. Браузер и CDN остаются участниками доставки.

Приложение написано на обычном JavaScript. Фрагмент показывает форму компонента; полный HTML содержит импорты, карту и элемент монтирования:

function Counter() {
  const [count, setCount] = useState(0);
  return h(Card, { title: "My first Mercury page", variant: "raised" },
    h("p", { id: "count", "aria-live": "polite" }, `Count: ${count}`),
    h(Button, { onClick: () => setCount(count + 1) }, "Increment")
  );
}
render(h(Counter, null), document.getElementById("app"));

Не вставляйте TSX в модульный скрипт браузера: браузер не компилирует JSX и TypeScript. Здесь используется h(Component, props, children). Запись jsx-runtime нужна импортам опубликованных пакетов; она не превращает браузер в компилятор TSX.

Проверьте страницу

В готовом счётчике проверьте оформление карточки и кнопки, изменение 0 → 1 → 2 после двух нажатий и появление сохранённого заголовка после перезагрузки. Проверьте, нет ли ошибок загрузки модулей, стилей и шрифтов. В собственной странице проверяйте действия, заказанные пользователем, включая подходящий случай неверного ввода или граничное условие. Счётчик — пример, а не критерий приёмки любой страницы.

Сообщайте только наблюдавшийся результат. Загрузка HTML не заменяет проверку в браузере. Если браузер недоступен, передайте файл и укажите, что оформление и взаимодействие не проверены. Этому пути нативная сборка не нужна.

Когда нужен mx

Сохраните инструменты существующего приложения Mercury. Если mx --version уже работает, используйте нативный путь: TSX, сервер разработки и сборка dist/. Иначе Установка mx поможет выбрать начальную установку через npm или архив с проверкой сумм с учётом их готовности. Phoenix/LiveView — необязательная интеграция.