From a05fbae578e2ca49a45f3b0c0660be5946aa8a18 Mon Sep 17 00:00:00 2001
From: Mark <remarkablemark@users.noreply.github.com>
Date: Mon, 8 Jan 2024 20:19:41 -0500
Subject: [PATCH] docs(readme): document configs

---
 README.md | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5ba69f48..246b120b 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,7 @@ Use [JSX](https://facebook.github.io/jsx/) in [Phaser](https://phaser.io/).
 With JSX:
 
 ```jsx
+// index.jsx
 import Phaser from 'phaser';
 import { Text, render } from 'phaser-jsx';
 
@@ -36,6 +37,7 @@ new Phaser.Game({
 Without JSX:
 
 ```js
+// index.js
 import Phaser from 'phaser';
 import { jsx, render } from 'phaser-jsx';
 
@@ -95,12 +97,49 @@ UMD:
 
 ## TypeScript
 
-To get better type support, import the GameObject from `phaser-jsx` instead of `phaser`:
+To get better type support, import the [GameObject](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.html) from `phaser-jsx` instead of `phaser`:
 
 ```ts
 import { Text } from 'phaser-jsx';
 ```
 
+> [!TIP]
+> All GameObjects exported from `phaser-jsx` are aliases of GameObjects from `phaser`.
+
+Update `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "phaser-jsx"
+  }
+}
+```
+
+## Vite
+
+Update `vite.config.mjs`:
+
+```js
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  esbuild: {
+    jsxImportSource: 'phaser-jsx',
+  },
+});
+```
+
+### JSX Pragma
+
+If you're not using `jsxImportSource`, you can set JSX pragma at the top of your file:
+
+```jsx
+/** @jsx jsx */
+import { jsx } from 'phaser-jsx';
+```
+
 ## Release
 
 Release is automated with [Release Please](https://github.com/googleapis/release-please).