JSX

Write UI for apps with GlyEngine + TSX.

Gly Engine supports building applications using JSX for interfaces, but with a few differences: you cannot insert raw text directly into the DOM tree, but you can easily include nodes written in Lua or Typescript.

Node (JSX)

JSX.Element

• grid

  <grid class="5x5"></grid>

• offset

  <node/>

• node

  <node
      name='Alan'
      draw={(std: GlyStd, props: {}) => {
          std.text.print('Ola, '..props.name)
      }}
  />

JSX.Component

• node (creating/using)

  const Btn = (props: {}, std: GlyStd) => <node draw={() => {
      std.draw.color(std.color.white)
      std.draw.rect(1, 0, 0, props.width, props.height)
      std.text.print_ex(props.width/2, props.height/2, props.label, 0, 0)
  }}>

  <Btn label="OK"/>

UI

• node

  {{
      name: 'Zoka'
      draw: (std: GlyStd, props: {}) => {
          std.text.print("Ola, "..props.name)
      }
  }}

Tutorial Gly+JSX

• Step 1
  configure your tsconfig.json and package.json like this:
  • tsconfig.json
    You can omit JSX fragment if you don't want the possibility of using <></>, but there are also special options:
    "jsxFragmentFactory": "std.ui" fragment is allowed everywhere.
    "jsxFragmentFactory": "std.h" fragment is allow only in root.
    "jsxFragmentFactory": "std" fragment is allow only in root. (strict)

    {
      "$schema": "https://raw.githubusercontent.com/TypeScriptToLua/TypeScriptToLua/master/tsconfig-schema.json",
      "compilerOptions": {
        "outDir": "build",
        "jsx": "react",
        "jsxFactory": "std.h",
        "jsxFragmentFactory": "std.h"
      },
      "tstl": {
        "buildMode": "library",
        "luaTarget": "universal",
        "luaLibImport": "inline",
        "noImplicitGlobalVariables": true,
        "noImplicitSelf": true,
        "noHeader": true
      }
    }

  • package.json
    You don't necessarily need to build for HTML because it's in Node JS, you can use other targets:
    "build": "gly-cli build --cwd build src/game.lua --core love --bundler"
"build": "gly-cli build --cwd build src/game.lua --core ginga --bundler --enterprise"

    {
      "scripts": {
        "prebuild": "tstl",
        "build": "gly-cli build-html --cwd build src/game.lua --fengari --enginecdn"
      },
      "dependencies": {
        "@gamely/gly-cli": "0.1.1",
        "typescript-to-lua": "^1.31.2"
      }
    }

• Step 2
  download npmjs packages

  npm install

• Step 3
  execute build script

  npm run build

Template (JSX)

import { GlyStd } from '@gamely/gly-types'
 
export const meta = {
    title: 'Your Awesome Game',
    author: 'IntellectualAuthor',
    version: '1.0.0',
    description: 'The best game in the world made in GlyEngine'
}
 
function Foo(props: {bar:string}, std: GlyStd) {
    console.log(props.bar)
    return <node/>
}
 
function load(std: GlyStd, props: any) {
    const Bar = <node load={() => console.log('Y')}/>;
    const Baz = {load: () => {console.log('W')}};
 
    <grid class="2x2">
        <Foo bar="z"/>
        <node />
        {Bar}
        {Baz}
    </grid>
}
 
export const callbacks = {
    load
}