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

electron-vite: renderer — это Vite + React. CSP шаблона менять не нужно

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

Проверено с electron-vite 5 и Electron 39.

npm create @quick-start/electron@latest my-app -- --template react-ts --skip
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>

CSP шаблона оставьте как есть: в styles.css нет url() и @import, файлы шрифтов из valyro-ui/fonts/*.css попадают в сборку renderer и грузятся по default-src 'self', а inline-стили React ставит через CSSOM — это работает даже со строгим style-src 'self'.

<!doctype html>
<html data-theme="glass" data-mode="light">
  <head>
    <meta charset="UTF-8" />
    <title>Electron</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
    />
  </head>

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

4. Стили и ThemeProvider

Замените шаблонный ./assets/main.css (фон и цвета на body) стилями пакета. Числа Electron форматирует по локали ОС («1 200» вместо «1,200») — если нужен стабильный формат, передайте locale в ThemeProvider.

import 'valyro-ui/styles.css'

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

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider theme="glass" mode="light">
      <App />
    </ThemeProvider>
  </StrictMode>
)

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

Showcase — компонент из гайда по Next.js. Линтер шаблона требует явный тип возврата: export function Showcase(): React.JSX.Element.

import { Showcase } from './Showcase'

function App(): React.JSX.Element {
  return <Showcase />
}

export default App

6. Соберите

npm run build проверяет типы main- и renderer-процессов и собирает приложение.

npm run build

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