feat: add support for setting style, update default style

demo/demo.css

@@ -8,6 +8,6 @@
 }
 
 canvas {
-  width: 800px;
-  height: 600px;
+  /* width: 800px;
+  height: 600px; */
 }

docs/src/content/docs/apis/launch.md

@@ -80,6 +80,28 @@ const nostalgist = await Nostalgist.launch({
     })
     ```
 
+  + #### `style`
+
+    **type:** `Object`
+
+    If the canvas element is created automatically, the style will be
+
+    ```js
+    {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'black',
+      zIndex: '1',
+    }
+    ```
+
+    otherwise it will be `undefined`.
+
+    The CSS rule name should be "camelCase" instead of "kebab-case". For example, `{ backgroundColor: 'black' }` is valid, but `{ background-color: '' }` is not.
+
   + #### `size`
 
     **type:** `'auto' | { width: number, height: number }` **default:** `'auto'`

src/emulator.ts

@@ -5,7 +5,7 @@ import { coreFullNameMap } from './constants'
 import { createEmscriptenFS, getEmscriptenModuleOverrides } from './emscripten'
 import type { EmulatorOptions } from './types/emulator-options'
 import type { RetroArchCommand } from './types/retroarch-command'
-import { blobToBuffer } from './utils'
+import { blobToBuffer, updateStyle } from './utils'
 
 const encoder = new TextEncoder()
 
@@ -56,16 +56,23 @@ export class Emulator {
     this.setupRaConfigFile()
     this.setupRaCoreConfigFile()
 
-    if (this.options.waitForInteraction) {
-      this.options.waitForInteraction({
+    const { element, style, waitForInteraction } = this.options
+    updateStyle(element, style)
+    if (!element.isConnected) {
+      document.body.append(element)
+    }
+    const size = this.getElementSize()
+
+    if (waitForInteraction) {
+      waitForInteraction({
         done: () => {
           this.runMain()
         },
       })
     } else {
       this.runMain()
     }
-    const { size } = this.options
+
     if (typeof size === 'object') {
       this.resize(size)
     }
@@ -143,6 +150,11 @@ export class Emulator {
     Module.setCanvasSize(width, height)
   }
 
+  private getElementSize() {
+    const { element, size } = this.options
+    return !size || size === 'auto' ? { width: element.offsetWidth, height: element.offsetHeight } : size
+  }
+
   private async setupFileSystem() {
     const { Module, FS, PATH, ERRNO_CODES } = this.getEmscripten()
 

src/nostalgist.ts

@@ -331,21 +331,20 @@ export class Nostalgist {
   }
 
   private async loadEmulatorOptions() {
-    const { waitForInteraction } = this.options
+    const { size = 'auto', waitForInteraction } = this.options
     const element = this.getElementOption()
-    const size = this.getSizeOption(element)
+    const style = this.getStyleOption()
     const retroarch = this.getRetroarchOption()
     const retroarchCore = this.getRetroarchCoreOption()
     const [core, rom, bios] = await Promise.all([this.getCoreOption(), this.getRomOption(), this.getBiosOption()])
-    const emulatorOptions = { element, size, core, rom, bios, retroarch, retroarchCore, waitForInteraction }
+    const emulatorOptions = { element, style, size, core, rom, bios, retroarch, retroarchCore, waitForInteraction }
     this.emulatorOptions = emulatorOptions
   }
 
   private getElementOption() {
     if (typeof document !== 'object') {
       throw new TypeError('document must be an object')
     }
-
     let { element } = this.options
     if (typeof element === 'string' && element) {
       const canvas = document.body.querySelector(element)
@@ -362,19 +361,34 @@ export class Nostalgist {
     }
 
     if (element instanceof HTMLCanvasElement) {
-      if (!element.isConnected) {
-        document.body.append(element)
-      }
       element.id = 'canvas'
       return element
     }
 
     throw new TypeError('invalid element')
   }
 
-  private getSizeOption(element: HTMLCanvasElement) {
-    const { size } = this.options
-    return !size || size === 'auto' ? { width: element.offsetWidth, height: element.offsetHeight } : size
+  private getStyleOption() {
+    const { element, style } = this.options
+    const defaultStyle: Partial<CSSStyleDeclaration> = {
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'black',
+      zIndex: '1',
+    }
+    if (!element) {
+      return {
+        ...defaultStyle,
+        ...style,
+      }
+    }
+    if (style) {
+      return style
+    }
+    return {}
   }
 
   private async getCoreOption() {

src/types/emulator-options.ts

@@ -2,7 +2,16 @@ import type { RetroArchConfig } from './retroarch-config'
 
 export interface EmulatorOptions {
   element: HTMLCanvasElement
+
+  style: Partial<CSSStyleDeclaration>
+
+  /**
+   *
+   * The size of the canvas element.
+   * If it's `'auto'`, the canvas element will keep its original size, or it's width and height will be updated as specified.
+   */
   size?: 'auto' | { width: number; height: number }
+
   core: {
     /** the name of core */
     name: string

src/types/nostalgist-options.ts

@@ -28,7 +28,33 @@ export interface NostalgistOptions {
    */
   element: string | HTMLCanvasElement
 
-  size?: 'auto' | { width: number; height: number }
+  /**
+   * The style of the canvas element.
+   *
+   * The CSS rule name should be "camelCase" instead of "kebab-case". For example, `{ backgroundColor: 'black' }` is valid, but `{ background-color: '' }` is not.
+   *
+   * If the canvas element is created automatically, the style will be
+   * ```js
+   * {
+   *   position: 'fixed',
+   *   top: '0',
+   *   left: '0',
+   *   width: '100%',
+   *   height: '100%',
+   *   backgroundColor: 'black',
+   *   zIndex: '1',
+   * }
+   * ```
+   * otherwise it will be `undefined`.
+   */
+  style?: Partial<CSSStyleDeclaration>
+
+  /**
+   *
+   * The size of the canvas element.
+   * If it's `'auto'`, the canvas element will keep its original size, or it's width and height will be updated as specified.
+   */
+  size: 'auto' | { width: number; height: number }
 
   core: string | NostalgistCoreDict
 

tests/integration/nostalgist.spec.ts

@@ -177,4 +177,15 @@ describe('nostalgist', () => {
     expect(emulatorOptions.bios[1].fileName).toEqual('FinalBurn Neo (hiscore).zip')
     expect(emulatorOptions.bios[1].fileContent.constructor.name).toBe('Blob')
   })
+
+  test.only('Nostalgist.launch with custom style and size', async () => {
+    const nostalgist = await Nostalgist.launch({
+      size: { width: 100, height: 100 },
+      core: 'fceumm',
+      rom: 'flappybird.nes',
+    })
+
+    const options = nostalgist.getOptions()
+    expect(options.size).toEqual({ width: 100, height: 100 })
+  })
 })