@cdx-ui/网络

在React web应用程序中使用Forge UI的Vite集成.

安装

安装 @cdx-ui/web 与您其他 Forge UI 软件包相同的版本 :

npm install --save-dev @cdx-ui/web vite @tailwindcss/vite tailwindcss uniwind

配置维特( V) (forge()(中文(简体) )

添加 forge() 在 React 插件之前,并将其指向您的应用程序的 CSS 条目文件 :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { forge } from '@cdx-ui/web/vite';

export default defineConfig({
  plugins: [forge({ cssEntryFile: 'src/index.css' }), react()],
});

forge() 配置 Tailwind 和 Uniwind, React 本地 Web 分辨率, 依赖性预捆绑, 和Forge UI所要求的兼容设置.

forge() 选项

使用 Vitest 进行测试( E)forgeVitest()(中文(简体) )

执行 没有 设置 forge() 内 vitest.config.ts。Uniwind的维特适配器别名 react-native 在一个 vitest 解决 Flow- syntax 本地软件包的方法。 使用 forgeVitest() 相反:

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import { forgeVitest } from '@cdx-ui/web/vite';

export default defineConfig({
  plugins: [react(), forgeVitest()],
  test: {
    setupFiles: ['./src/__tests__/setup.ts'],
  },
});

// src/__tests__/setup.ts
import '@testing-library/jest-dom/vitest';
import { afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';

afterEach(() => {
  cleanup();
});

在测试中将Forge UI 包入 ForgeDesignProvider (Dialog和其他覆盖需要其门户主机):

import type { ReactElement } from 'react';
import { render } from '@testing-library/react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { ForgeDesignProvider } from '@cdx-ui/components';

export function renderWithForgeProviders(ui: ReactElement) {
  return render(ui, {
    wrapper: ({ children }) => (
      <SafeAreaProvider>
        <ForgeDesignProvider config={{ toast: false }}>{children}</ForgeDesignProvider>
      </SafeAreaProvider>
    ),
  });
}

forgeVitest() 拥有 :

• react-native → react-native-web (不是Uniwind的维特别名)
• @react-native-aria/* • 无害环境管理 lib/module 条目
• @cdx-ui/* 因此,Bob 无害环境管理目录的进口将得到解决
• jsdom 单风、再动、手动、工作、安全区域、SVG、屏幕、底页、闪光列表、闪光日历和再动木马

这些替身 导入时间边界测试 @cdx-ui/components API;它们不验证生产CSS,动画计时,或本地手势. 见 @cdx-ui/web/testing 用于模拟包列表.

维系着消费者的生命 examples/forge-ui-mui-vite。 。 。 .

forgeVitest() 选项