Первая страница Mercury

В этом уроке вы получите из публичных архивов страницу Mercury UI с оформленным Card и кнопкой Button, которая увеличивает счётчик. Среда — Linux x86_64. Приложение использует Hyperscript и Mercury UI; React, сборка Rust, BEAM и закрытый репозиторий не требуются. Архивный путь и образ запускают нативный mx без Node/npm. Планируемый npm-путь устанавливает обёртку на Node и платформенный пакет; Node нужен для вызова mx через эту обёртку и после установки.

Начните с публичного архива

Сохраните существующее приложение и работающий mx. Для нового стартового приложения следуйте установке mx: выберите существующий mx, npm или полный архивный путь, проверьте готовность публикации и сумму стартового архива, затем выполните mx install и mx verify. Вы окажетесь в mercury-first-page/, а mx будет доступен через PATH текущей оболочки. Стартовое приложение закрепляет @fiberfx/hyperscript, @fiberfx/core и @fiberfx/ui на версии 4.0.0 и содержит mx.sum. Не заменяйте его файлы зависимостей пустым mx.mod.

Полное приложение

mercury-first-page/
  index.html
  app/main.tsx
  package.json
  mx.mod
  mx.sum

Файлы index.html и mx.mod в одном каталоге позволяют mx распознать приложение. package.json задаёт приложение и зависимости пакета; mx.mod — требования к модулям; mx.sum закрепляет содержимое загрузок. Стартовое приложение получает зависимости из публичного источника, без локальных каталогов replace и копирования исходников репозитория.

HTML требует элемента для монтирования, маркера карты импортов и модульного скрипта. Это самостоятельное браузерное приложение. Сайт документации обслуживает Phoenix-приложение mercury_lms; в репозитории также сохранён отдельный нативный пример sites/mercury. Исходники этих приложений для стартовой страницы не требуются:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first Mercury page</title>
  <!-- mercury:importmap -->
</head>
<body>
  <main id="app"></main>
  <script type="module" src="./app/main.tsx"></script>
</body>
</html>

Маркер указывает mx место вставки карты импортов. Скрипт задаёт входной TSX-файл, который компилирует mx. Этим HTML можно заменить исходную страницу стартового приложения, чтобы оставить минимальную разметку.

Компонент счётчика

Замените app/main.tsx следующим полным компонентом или измените аналогичный счётчик из стартового приложения:

import { render } from "@fiberfx/hyperscript";
import { useState } from "@fiberfx/hyperscript/hooks";
import { Card, Button } from "@fiberfx/ui";
import "@fiberfx/ui/styles.css";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <Card title="My first Mercury page">
      <p aria-live="polite">Count: {count}</p>
      <Button onClick={() => setCount(count + 1)}>Increment</Button>
    </Card>
  );
}

render(<Counter />, document.getElementById("app")!);

render монтирует компонент в #app; useState хранит локальный счётчик. Card и Button импортируются из Mercury UI, а явный импорт таблицы стилей подключает их оформление и токены. mx выбирает среду JSX Hyperscript; директива JSX не нужна. Собранное приложение исполняется в браузере как JavaScript.

Запуск и изменение страницы

Из каталога приложения выполните:

mx dev

Откройте выведенный адрес http://127.0.0.1:<port>/. Если браузер работает вне изолированной среды, используйте её механизм перенаправления портов: mx слушает локальный интерфейс loopback. На странице должны быть оформленная карточка, Count: 0 и кнопка Increment. Первое нажатие должно дать 1, второе — 2.

Измените заголовок карточки в app/main.tsx, сохраните файл и убедитесь, что появился новый текст. Горячая перезагрузка может обновить всю страницу и сбросить локальный счётчик; сохранение состояния при правке здесь не обещается. Перед следующей командой остановите mx сочетанием Ctrl-C.

Сборка страницы

mx build

mx распознаёт приложение и собирает его в dist/. Результат включает dist/index.html и dist/assets/ с JavaScript и импортированными стилями UI. Запустите статический HTTP-сервер для dist/ или предпросмотр хостинга и повторите проверку счётчика. BEAM-сервер необязателен; интеграция с Phoenix и LiveView описана отдельно в Live Mercury.

mx помечает свой каталог сборки файлом .mx-bundle. Он отказывается перезаписывать неизвестный непустой каталог вывода или корень приложения. В этом упражнении оставьте стандартный dist/.

Проверка результата

• Зависимости: mx install и mx verify завершаются успешно с суммами стартового приложения.
• Разработка: Card и Button оформлены, два нажатия дают 1 и 2, сохранённая правка заголовка появляется на странице.
• Сборка: mx build создаёт dist/index.html и ресурсы; страница, открытая через HTTP-сервер, сохраняет оформление и работу счётчика.
• Ошибка: при несовпадении суммы архива не распаковывайте и не запускайте его. Ошибка загрузки пакета или стилей в браузере означает, что работу ещё нельзя считать завершённой.

Кандидаты нативных загрузок требуют Linux x86_64 с glibc 2.39 или новее: это установлено по требованиям символов ELF. Проверка у потребителя ещё не выполнена; macOS и Windows этой инструкцией не проверены. Добавление зависимостей описано в уроке Модули, работа сервера — в уроке Цикл разработки.