SolidJS Support

With the latest versions of Prysm, we have actively worked on supporting SolidJS. This addition allows developers to leverage SolidJS’s reactive programming model and fine-grained reactivity to create dynamic and efficient game UIs.

Using Create Solid for Project Setup #

To begin a new SolidJS project, refer to the Quick start guide from SolidJS. This guide explains how to set up a project using the create-solid tool, which generates all required configurations and dependencies. Since there are several templates available, we will highlight the one most compatible with Prysm.

Setting Up a New SolidJS Project #

The steps to create a new SolidJS project are as follows:

1. Open a terminal in the directory where you want to create your project.
2. Run the npm init solid command and follow the prompts to set up your project.
   1. For Project name, enter your desired project name.
   2. For What type of project would you like to create?, select SolidJS + Vite.
   3. If you want to use TypeScript in your project select Yes for Use TypeScript?.
   4. For Which template would you like to use?, select basic.
3. The tool will generate a new directory with your chosen name and scaffold the project files.
4. Navigate into your project directory using cd your-project-name.
5. Install the project dependencies by running npm install.

Configuring closing tags #

By default, SolidJS optimizes performance by omitting the last closing tag of an element and quotes around attributes. However, Prysm expects strict, valid HTML structure. To ensure compatibility and prevent warnings in the console, you must configure vite-plugin-solid to disable these optimizations.

You need to set the following options to false in your vite.config.ts:

• omitNestedClosingTags
• omitLastClosingTag
• omitQuotes

Your final vite.config.ts file should look like this:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';

export default defineConfig({
  plugins: [devtools(), solidPlugin({
    solid: {
      omitLastClosingTag: false,
      omitNestedClosingTags: false,
      omitQuotes: false,
    }
  })],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
});

Running the project in development mode #

After you have completed the above steps you can now start the development server by running npm run dev and begin building your game UI.

When you started the development server you will see a message in the terminal indicating that the server is running and providing the local URL where you can access your application, usually http://localhost:3000.

To run the project in Prysm, you will need to have the Player running. To open the UI inside the Player.exe you need to open it with the url parameter set to the local URL provided by the development server - for example: http://localhost:3000.

This can be done by running the Player.bat with http://localhost:3000 argument: Player.bat http://localhost:3000

The Player.bat file is typically located in the root directory of your Prysm package.

Running the project in production mode #

To prepare your SolidJS project for production build you need to make sure that the base option in the vite.config.ts file is set to ./. This ensures that all the assets are correctly referenced relative to the index.html file when the project is built for production. Here is how the vite.config.ts file should look with the base option set:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';

export default defineConfig({
  plugins: [devtools(), solidPlugin({
    solid: {
      omitLastClosingTag: false,
      omitNestedClosingTags: false,
      omitQuotes: false,
    }
  })],
  server: {
    port: 3000,
  },
  base: './',
  build: {
    target: 'esnext',
  },
});

Then to build your SolidJS project for production, you can run the npm run build command in your project root directory. This will create an optimized version of your application in the dist directory.

After building the project you can preview the UI directly by drag and dropping the index.html file from the dist directory into the Player.exe.

Using the Gameface UI #

With the support for SolidJS in Prysm we have introduced GamefaceUI that is comprehensive collection of components designed to simplify the prototyping of game user interfaces. These components are built using SolidJS and are optimized for performance and ease of use in Prysm. GamefaceUI comes with the following features:

• Getting started guide to help you set up your project quickly.
• A boilerplate project to kickstart your development.
• Components for building intuitive game user interfaces.
  • Basic components like buttons, sliders, toggles, inputs, dropdowns and others.
  • Layout components like grids, rows, columns and others.
  • Media components for handling images, live views and others.
  • Feedback components like modals, tooltips and others.
  • Complex components like carousel, color picker and others.
• Seamless integration with the SolidJS framework for reactive and efficient UI development.
• Setup for testing your UI by writing E2E tests.
• Comprehensive HUD and Menu UIs demonstrating how to use the components in a real-world scenario.
• Support for using SVGs as SolidJS components.

Additional SolidJS plugins #

To enhance the development experience with SolidJS and Prysm, you can also consider using the following Vite plugins that we have created:

• Gameface Vite Plugin - The plugin applies fixes for some known issues with solid such as:
  • Properly closing all the HTML tags.
  • Fixes empty text nodes generated by SolidJS.
  • Correctly quoting SVG attributes.
• Solid Style to CSS Plugin - Convert style properties to class, enhancing performance by reducing inline styles and leveraging CSS for better caching and reusability.

Known Issues with SolidJS support #

• Unclosed Tags: By default, SolidJS omits the last closing tag in compiled code for performance. This produces warnings in Prysm. See the Configuring closing tags section for the fix.
• Hydration Markers (<!>): SolidJS generates <!> comment nodes that can cause runtime errors in Prysm. We have developed the Gameface Vite Plugin to resolve these issues.
• Empty Text Nodes: SolidJS generates empty text nodes which older versions of Prysm may strip out, causing errors. To resolve this, you must use Prysm v2.2.0 or greater. You can read more about this here.
• Routing: The official SolidJS router is currently not compatible with Prysm. If you require routing in your project, please use the routing solutions provided by GamefaceUI.