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]>
96 lines
2.2 KiB
Plaintext
96 lines
2.2 KiB
Plaintext
---
|
|
title: Metro Guide
|
|
description: How to set up Gui with Metro
|
|
---
|
|
|
|
## Basic Setup
|
|
|
|
The default Expo Metro configuration works out of the box:
|
|
|
|
```ts fileName="metro.config.js"
|
|
const { getDefaultConfig } = require('expo/metro-config')
|
|
|
|
module.exports = getDefaultConfig(__dirname)
|
|
```
|
|
|
|
## With Metro Plugin (Recommended)
|
|
|
|
For better dev experience, use `@hanzogui/metro-plugin` which loads your Gui
|
|
config and watches for changes:
|
|
|
|
```bash
|
|
yarn add @hanzogui/metro-plugin
|
|
```
|
|
|
|
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="metro.config.js"
|
|
const { getDefaultConfig } = require('expo/metro-config')
|
|
const { withGui } = require('@hanzogui/metro-plugin')
|
|
|
|
const config = getDefaultConfig(__dirname)
|
|
|
|
// reads from hanzogui.build.ts automatically
|
|
module.exports = withGui(config)
|
|
```
|
|
|
|
Or pass options inline:
|
|
|
|
```tsx fileName="metro.config.js"
|
|
const { getDefaultConfig } = require('expo/metro-config')
|
|
const { withGui } = require('@hanzogui/metro-plugin')
|
|
|
|
const config = getDefaultConfig(__dirname)
|
|
|
|
module.exports = withGui(config, {
|
|
components: ['@hanzo/gui'],
|
|
config: './hanzogui.config.ts',
|
|
})
|
|
```
|
|
|
|
## Optimized Production Builds
|
|
|
|
For maximum optimization, use the `hanzogui build` command which pre-compiles
|
|
your components:
|
|
|
|
```bash
|
|
# Optimize and build, then restore source files
|
|
hanzogui build --target web ./app -- expo export --platform web
|
|
```
|
|
|
|
The `--` syntax runs the command after optimization, then automatically restores
|
|
your source files. Add this to your `package.json`:
|
|
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"build:web": "expo export --platform web",
|
|
"build:web:optimized": "hanzogui build --target web ./app -- expo export --platform web"
|
|
}
|
|
}
|
|
```
|
|
|
|
## Debugging
|
|
|
|
To debug the compiler output, add `// debug` at the top of a file:
|
|
|
|
```tsx
|
|
// debug
|
|
import { YStack } from '@hanzo/gui'
|
|
|
|
export function MyComponent() {
|
|
return <YStack flex={1} bg="$background" />
|
|
}
|
|
```
|
|
|
|
This will print detailed compiler output showing what optimizations are
|
|
happening:
|
|
|
|
```
|
|
[✅] flattened YStack div
|
|
```
|
|
|
|
Use `// debug-verbose` for even more detailed output.
|