Начало работы: Rsbuild

Клиентское SPA на Rspack: стили и ThemeProvider — в src/index.tsx, атрибуты темы — в своём HTML-шаблоне

1. Создайте приложение

Проверено с Rsbuild 2.2.

npm create rsbuild@latest my-app -- --template react-ts --no-git
cd my-app
npm install

2. Установите пакет

Подходят react и react-dom 17, 18 и 19 (на React 17 id из useId появляются сразу после монтирования). Пакет — ES-модули (плюс CommonJS-копия для require()), без runtime-зависимостей, по файлу на модуль: в бандл попадают только импортированные компоненты, а как грузить и CSS только их — в разделе «Только нужный CSS» ниже. Шрифты — отдельные файлы: тема vercel (по умолчанию в ThemeProvider) использует Geist, поэтому рядом со стилями импортируйте valyro-ui/fonts/geist.css и valyro-ui/fonts/geist-mono.css, иначе текст будет системным шрифтом; glass использует системные шрифты, ей файлы не нужны. Пока пакет не опубликован, соберите и упакуйте его в репозитории (npm run build:core && npm pack ./dist/core) и установите tarball из корня репозитория: npm install /path/to/ValyroUI/valyro-ui-0.1.0.tgz.

npm install valyro-ui

3. Тема на <html>

Опции для атрибутов <html> у Rsbuild нет, а встроенный шаблон зашит в пакет. Создайте свой index.html и укажите его в html.template — Rsbuild сам добавит в него meta, title, скрипты и <link> на CSS.

<!doctype html>
<html lang="en" data-theme="glass" data-mode="light">
  <head></head>
  <body>
    <div id="<%= mountId %>"></div>
  </body>
</html>

4. Подключите шаблон

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

// Docs: https://rsbuild.rs/config/
export default defineConfig({
  plugins: [pluginReact()],
  html: {
    // Custom template so <html> carries the theme before any JS runs.
    template: './index.html',
  },
});

5. Стили и ThemeProvider

Шаблонный src/App.css красит body (градиент, белый текст) — удалите его и импорт в App.tsx.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'valyro-ui/styles.css';
import { ThemeProvider } from 'valyro-ui';
import App from './App';

const rootEl = document.getElementById('root');
if (rootEl) {
  const root = createRoot(rootEl);
  root.render(
    <StrictMode>
      <ThemeProvider theme="glass" mode="light">
        <App />
      </ThemeProvider>
    </StrictMode>,
  );
}

6. Используйте компоненты

Showcase — компонент из гайда по Next.js, без изменений.

import { Showcase } from './Showcase';

const App = () => {
  return <Showcase />;
};

export default App;

7. Соберите

npm run build
npx tsc --noEmit
npm run preview

Другие фреймворки