mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekayandHanzo Dev
751ef5c778
Both old names are owned by a different npm account (artemis-prime), so publishing them returns 403 — which is how this surfaced: the 8.0.0 run shipped @hanzogui/logo and @hanzogui/demos depending on [email protected], a version that cannot be published and therefore does not exist. Those two were uninstallable. @hanzo/gui and @hanzogui/* are ours, so the framework now carries the name it is imported by everywhere downstream, and the loader moves under the scope we control. The rewrite is limited to package references. `DEBUG?.startsWith('hanzogui')` is a log-namespace filter and join(dir, 'hanzogui') is a path — rewriting either would change behaviour, so both are untouched. Co-authored-by: Hanzo Dev <[email protected]>
124 lines
3.1 KiB
Plaintext
124 lines
3.1 KiB
Plaintext
---
|
|
title: Vite Guide
|
|
description: How to set up Gui with Vite
|
|
---
|
|
|
|
Gui now has two plugins for Vite: one that sets up everything you need to get going, and a second that adds CSS compilation. Both are included in the `@hanzogui/vite-plugin` package.
|
|
|
|
## Install
|
|
|
|
<Notice theme="yellow">
|
|
`@hanzogui/vite-plugin` is ESM-only. Your project must have `"type": "module"` in its
|
|
`package.json` (or use `.mjs`/`.mts` config files). CJS (`require()`) is not supported.
|
|
</Notice>
|
|
|
|
<Notice theme="green">
|
|
For a full-featured example, you can create a new app using `npm create hanzogui@latest`
|
|
and select the 'Simple Web' option which includes a Vite setup.
|
|
</Notice>
|
|
|
|
Create a new [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) project:
|
|
|
|
```bash
|
|
npm create vite@latest
|
|
```
|
|
|
|
Add `@hanzogui/vite-plugin`:
|
|
|
|
```bash
|
|
yarn add @hanzogui/vite-plugin
|
|
```
|
|
|
|
### Configuration
|
|
|
|
Update your `vite.config.ts`. If you have a `hanzogui.build.ts` (recommended —
|
|
see [compiler install docs](/docs/intro/compiler-install#configuration-with-hanzoguibuildts)),
|
|
no options are needed:
|
|
|
|
```tsx fileName="vite.config.ts"
|
|
import { hanzoguiPlugin } from '@hanzogui/vite-plugin'
|
|
|
|
export default {
|
|
plugins: [
|
|
// reads from hanzogui.build.ts automatically
|
|
hanzoguiPlugin(),
|
|
].filter(Boolean),
|
|
}
|
|
```
|
|
|
|
Or pass options inline:
|
|
|
|
```tsx fileName="vite.config.ts"
|
|
import { hanzoguiPlugin } from '@hanzogui/vite-plugin'
|
|
|
|
export default {
|
|
plugins: [
|
|
hanzoguiPlugin({
|
|
config: 'src/hanzogui.config.ts',
|
|
components: ['@hanzo/gui'],
|
|
disableExtraction: true,
|
|
}),
|
|
].filter(Boolean),
|
|
}
|
|
```
|
|
|
|
Or use a minimal manual setup for Vite that just adds compatibility for react-native-web and React Native extensions:
|
|
|
|
```tsx showMore
|
|
config.define = {
|
|
__DEV__: `${process.env.NODE_ENV === 'development' ? true : false}`,
|
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
|
}
|
|
|
|
config.resolve.alias['react-native'] = 'react-native-web'
|
|
|
|
// set up web extensions
|
|
config.optimizeDeps.esbuildOptions = {
|
|
...config.optimizeDeps.esbuildOptions,
|
|
resolveExtensions: [
|
|
'.web.js',
|
|
'.web.jsx',
|
|
'.web.ts',
|
|
'.web.tsx',
|
|
'.mjs',
|
|
'.js',
|
|
'.mts',
|
|
'.ts',
|
|
'.jsx',
|
|
'.tsx',
|
|
'.json',
|
|
],
|
|
loader: {
|
|
'.js': 'jsx',
|
|
},
|
|
}
|
|
```
|
|
|
|
### Custom Aliases with hanzoguiAliases
|
|
|
|
For advanced use cases where you need more control over alias ordering in your Vite config, you can use the `hanzoguiAliases` helper function:
|
|
|
|
```tsx fileName="vite.config.ts"
|
|
import { hanzoguiAliases } from '@hanzogui/vite-plugin'
|
|
|
|
export default {
|
|
resolve: {
|
|
alias: [
|
|
// your custom aliases first
|
|
{ find: '@app', replacement: '/src' },
|
|
// then hanzogui aliases
|
|
...hanzoguiAliases({
|
|
// use @hanzogui/react-native-web-lite for smaller bundle
|
|
rnwLite: true,
|
|
// or 'without-animated' for even smaller bundle (no Animated API)
|
|
// rnwLite: 'without-animated',
|
|
// alias react-native-svg to @hanzogui/react-native-svg
|
|
svg: true,
|
|
}),
|
|
],
|
|
},
|
|
}
|
|
```
|
|
|
|
This is useful when you need to ensure specific alias resolution order or when using a custom Vite setup without the full `hanzoguiPlugin`.
|