Skip to content

Commit

Permalink
docs(readme): update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
remarkablemark committed Jan 8, 2024
1 parent 0ec72d1 commit eb175f2
Showing 1 changed file with 47 additions and 8 deletions.
55 changes: 47 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,41 @@
[![NPM version](https://img.shields.io/npm/v/phaser-jsx.svg)](https://www.npmjs.com/package/phaser-jsx)
[![build](https://github.com/remarkablegames/phaser-jsx/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablegames/phaser-jsx/actions/workflows/build.yml)

Phaser JSX
> [!NOTE]
> This package is under development so expect breaking changes in future releases.
Use [JSX](https://facebook.github.io/jsx/) in [Phaser](https://phaser.io/).

## Quick Start

```ts
import { name } from 'phaser-jsx';
With JSX:

```jsx
import Phaser from 'phaser';
import { Text, render } from 'phaser-jsx';

new Phaser.Game({
scene: {
create() {
render(<Text text="Hello, world!" />, this);
},
},
});
```

Without JSX:

```js
import Phaser from 'phaser';
import { jsx, render } from 'phaser-jsx';

new Phaser.Game({
scene: {
create() {
render(jsx(Phaser.GameObjects.Text, { text: 'Hello, world!' }), this);
},
},
});
```

## Installation
Expand All @@ -30,32 +59,42 @@ yarn add phaser-jsx
[CDN](https://unpkg.com/browse/phaser-jsx/):

```html
<script src="https://unpkg.com/phaser@latest/dist/phaser.min.js"></script>
<script src="https://unpkg.com/phaser-jsx@latest/umd/phaser-jsx.min.js"></script>
```

## Usage

ES Modules:

```ts
import { name } from 'phaser-jsx';
```js
import { createElement, render } from 'phaser-jsx';
```

CommonJS:

```ts
const { name } = require('phaser-jsx');
```js
const { createElement, render } = require('phaser-jsx');
```

UMD:

```html
<script src="https://unpkg.com/phaser@latest/dist/phaser.min.js"></script>
<script src="https://unpkg.com/phaser-jsx@latest/umd/phaser-jsx.min.js"></script>
<script>
const { name } = window['phaser-jsx'];
const { render, jsx } = window.PhaserJSX;
</script>
```

## TypeScript

To get better type support, import the GameObject from `phaser-jsx` instead of `phaser`:

```ts
import { Text } from 'phaser-jsx';
```

## Release

Release is automated with [Release Please](https://github.com/googleapis/release-please).
Expand Down

0 comments on commit eb175f2

Please sign in to comment.