@wasm4/web-devtools

Description

A collection of custom elements that provides information about wasm4 web runtime.

Usage

import { wasm4DevtoolsTagName } from '@wasm4/web-devtools';

const elem = document.createElement(wasm4DevtoolsTagName);
document.body.appendChild(elem);

Themeing

All exported components can be customized using the following css variables:

:root {
  --wasm4-devtools-bg-primary: pink; /* color */
  --wasm4-devtools-bg-secondary: cornflowerblue; /* color */
  --wasm4-devtools-text-primary: black; /* color */
  --wasm4-devtools-text-secondary: gray; /* color */
  --wasm4-devtools-text-text-size: 18px; /* dimension */
  --wasm4-devtools-window-z-index: 15; /* unitless number */
}

Developing

Install dependencies

npm --prefix devtools/web-devtools i

This package relies on lit library to manage custom elements: docs are available here.

Test locally

Starts local server

npm --prefix devtools/web-devtools run dev

Build package & web runtime

npm --prefix devtools/web-devtools/ run build && npm --prefix runtimes/web/ run build

Build package

npm --prefix devtools/web-devtools run build

Run formatter

npm --prefix devtools/web-devtools run prettify

License

MIT