@lightningjs/blits 1.30.2 → 1.31.0

package/docs/essentials/components.md

@@ -1,68 +0,0 @@
-# Components
-
-Like any modern front-end framework, Blits is built around the concept of Components. Components allow you to split the UI of your App into
-reusable pieces of code and logic.
-
-As you get started building your App, you're free to put all your elements and logic right in the root Application component.
-This is great for quickly playing around with Blits and Lightning.
-
-But soon you'll find that it's beneficial to start organizing the different parts of your App into separate components. Blits Components can be nested into a tree of components.
-
-Components in Blits follow a clearly defined structure, which helps keep your code clean and guides you to quickly build your components.
-
-This universal structure is also valuable for creating drop-in components that can be easily shared across projects.
-
-## Creating a new Component
-
-Let's see how to create a new component and explore the basic anatomy of a component.
-
-A new component is created using the `Blits.Component()` function that is exported from the `@lightningjs/blits` package. This function accepts two arguments:
-
-- The first argument is the _name_ of the component. This name will be used in debug log messages, so make sure to choose a unique and descriptive name for your component, such as `Homepage`, `Loader`, or `SidebarMenuItem`.
-
-- The second argument is a _Component configuration object_, represented as an `object literal`. This Component configuration object can contain a predefined set of key-value pairs, that define how your Component looks and behaves.
-
-Some of the commonly used Component configuration options include:
-
-   - `template`: to define the template for the component.
-   - `state`: to specify the component instance's internal state.
-   - `props`: to define the props that can be passed into the component.
-   - `hooks`: allowing you to hook into different lifecycle events of the component.
-   - `input`: used to tap into user input.
-   - `methods`: used to define more complex functionality of the component
-
-A basic Blits component will then look something like this:
-
-```js
-// src/components/Loader.js
-export default Blits.Component('Loader', {
-  template: `
-    <Element x="880" y="500" :show="$active">
-      <Element x="$offset" w="40" h="40" color="#94a3b8" :alpha="$alpha" />
-    </Element>
-  `,
-  props: ['type', 'size'],
-  state() {
-    return {
-      active: false,
-      alpha: 0.4,
-      offset: 100
-    }
-  },
-  hooks: {
-    ready() {
-      this.$setTimeout(() => {
-        this.active = true
-      }, 300)
-    }
-  },
-  input: {
-    enter() {
-      this.alpha = 1
-    }
-  }
-})
-```
-
-In the next sections, we will go into the details of each of the component configuration options.
-

package/docs/essentials/displaying_images.md

@@ -1,67 +0,0 @@
-# Displaying Images
-
-Now that we've covered the basics of creating Elements, as well as styling and positioning them, it's time to move away from these boring rectangles and explore how you can incorporate _images_ into your App.
-
-In Blits, it is very easy to display an image. Simply add the `src` attribute to an Element, specifying the image's location.
-
-For local images, make sure to place them in the `public` folder of your App (e.g., `public/assets/background.jpg` or `public/images/logo.png`) and refer to them with a _relative_ path (but omitting the `public` folder as root).
-
-Remote images are also supported and can be linked directly (e.g., `http://mycdn.com/artists/jimi_hendrix/woodstock.jpg`).
-
-```xml
-<Element src="images/logo.png" w="100" h="80" />
-<Element src="http://mycdn.com/artists/jimi_hendrix/woodstock.jpg" w="1920" h="1080" />
-```
-
-## Sizing and Scaling
-
-Make sure to give your Element a width (`w` ) and a height (`h`) attribute. Images will _not_ be rendered if they don't have both attributes present. The Lightning renderer will scale the image to fit these exact dimensions.
-
-For the best performance, it's important to keep your source images as small as possible. If you're displaying an image at `200px x 200px`, make sure the image is exactly that size or _smaller_. The latter option may lead to some quality loss, but can positively impact the overall performance of your App.
-
-## Colorization
-
-You also have the option to _colorize_ an image on the fly. Just add a `color` attribute to the Element with a `src` attribute. You can use a single color, or apply a gradient.
-
-By default, all Elements with a `src` attribute get a solid white background, with the result that the actual colors of the image will be shown.
-
-```xml
-<Element
-  w="200"
-  h="300"
-  :src="$src"
-  color="{top: '#fff', bottom: '#000'}"
-/>
-```
-
-## Asynchronous Loading
-
-All images are loaded asynchronously (and can possibly fail to load), even those local to your App. Blits allows you to easily hook into the `loaded` and `error` events of image Elements.
-
-You can use this, for example, to only make something visible once an image is fully loaded. Or to display a fallback image when a remote image can't be retrieved.
-
-```xml
-<Element src="http://mycdn.com/lightning.jpg" @loaded="$revealPage" @error="$showFallback" />
-```
-
-> Note how events are prefixed with a `@` sign.
-
-Considering the template above you would do something like the following in the `methods` key of your Component configuration object:
-
-```js
-{
-  //...
-  methods: {
-    revealPage(dimensions) {
-      this.$log.info('Image dimensions', dimensions.w, dimensions.h)
-      this.show = true
-    },
-    showFallback(error) {
-      this.$log.error('Image failed to load', error)
-      this.showBackupImage()
-    }
-  }
-}
-```
-
-The `loaded` event receives image dimensions as its argument and the `error` event receives an error message explaining the failure.

package/docs/essentials/displaying_text.md

@@ -1,135 +0,0 @@
-# Displaying Text
-
-Besides displaying images, it is also very common to have _texts_ in an App.
-
-Blits comes with a built-in `<Text>`-tag for displaying and styling texts in a simple and intuitive way.
-
-```xml
-<Text
-  content="Hello world"
-  font="ComicSans"
-  size="$fontSize"
-  :color="$changingColor"
-/>
-
-```
-You can use the Text-tag anywhere in your template, without the need to explicitly import and register it in your Component.
-
-## Available attributes on the Text tag
-
-The Text-tag accepts the following attributes:
-
-- `content` - the text to be displayed. Can be a hardcoded text, a dynamic value, or a reactive value
-- `font` - the font family, defaults to `sans-serif`, or the default font specified in the launch settings
-- `size`  - the font size, defaults to `32`
-- `color` - the color to display for the text, defaults to `white` and can be any of the supported Blits color formats (HTML, hexadecimal or rgb(a))
-- `letterspacing` - letterspacing in pixels, defaults to `0`
-- `align` - the alignment of the text, can be `left`, `right`, or `center`, defaults to `left`. Centering text and aligning text to the right requires the `maxwidth` attribute to be set as well.
-- `maxwidth` - the max length of a line of text in pixels, words surpassing this length will be broken and wrapped onto the next line. This attribute is required when aligning center or right. Previously this attribute was `wordwrap`, which has now been deprecated in favour of `maxwidth`.
-- `maxlines` - maximum number of lines that will be displayed
-- `maxheight` - maximum height of a text block, lines that don't fit within this height will not be displayed
-- `lineheight` - the spacing between lines in pixels
-- `contain` - the strategy for containing text within the bounds, can be `none` (default), `width`, or `both`. In most cases, the value of this attribute will automatically be set by Blits, based on the other specified attributes
-- `textoverflow` - the suffix to be added when text is cropped due to bounds limits, defaults to `...` (see more details [here](#text-overflow))
-
-## Text dimensions
-
-When you want to center your Text element, or properly position other Elements around your text, it is useful to know the exact dimensions of your text.
-
-Similar to the Image element (i.e. an Element with a `src`), Text elements also accept the `@loaded` attribute. This event is called, as soon as the text is rendered, and passes in the dimensions of the generated text texture.
-
-The example below shows how to use the `@loaded`-attribute to position an Element as an underline, under a piece of text.
-
-```js
-export default Blits.Component('MyComponent', {
-  template: `
-    <Element>
-      <Text :content="$myText" @loaded="$textLoaded" />
-      <!-- gray underline -->
-      <Element :w="$w" h="2" y="$y" color="#333" />
-    </Element>
-  `,
-  props: ['myText'],
-  state() {
-    return {
-      w: 0,
-      y: 0,
-    }
-  },
-  methods: {
-    textLoaded(dimensions) {
-      console.log(`The text has a width of ${dimensions.w} and a height of ${dimensions.h}`)
-      // set the underline width to the exact width of the text
-      this.w = dimensions.w
-      // position the underline 8px below the text
-      this.y = dimensions.h + 8
-    }
-  }
-```
-
-## Text overflow
-
-The text renderer offers the ability to display a _text overflow suffix_ when the text exceeds the bounds of the Text component.
-
-This functionality is automatically enabled, but requires that both a _horizontal_ boundary (using `maxwidth`) and a _vertical_ boundary (using `maxlines` or `maxheight`) are specified on the Text component.
-
-The `textoverflow`-attribute itself is not required, unless you want to use another suffix than the standard `...`. If you want _no suffix_ (and just a hard cutoff), the`textoverflow`-attribute should be set to `false` or an _empty string_.
-
-## SDF and Canvas2d
-
-Compared to Lightning 2, texts have improved a lot in Lightning 3, thanks to the SDF (Signed Distance Field) Text renderer.
-
-With the SDF text renderer, texts appear a lot _sharper_ on screen. The SDF technique also allows for better scaling of texts, without them becoming blurry - a well-known painpoint in Lightning 2 Apps.
-
- In general, it's recommended to use the SDF text renderer, but Lightning 3 still has a Canvas2d text renderer as a backup, and you can use both text renderers within the same App.
-
-## Using custom fonts
-
-The `font`-attribute on the `<Text>`-tag is used to define which font family should be used for a certain piece of text.
-
-When you create a new Blits app using the available [getting started boilerplate](../getting_started/getting_started.md) you'll be able to use the `lato` (Lato regular) and `raleway` (Raleway ExtraBold) fonts out of the box.
-
-But of course, you can also use any custom font that you want, to give your App the unique look and feel that fits with the design.
-
-Adding a custom font to a Blits App is quite straightforward. First, you'll need to place a `.ttf`, `.woff` or `.otf` version of your font in the `public` folder (i.e. `public/fonts/comic-sans.ttf`).
-
-Then you'll need to register the custom font in the Launch settings of your app (in `src/index.js`). The `fonts`-key in the settings is an `Array` that specifies all available fonts in your App.
-
-Just add a new font object with the necessary details:
-
-```js
-  fonts: [
-    // ...
-    {
-      family: 'ComicSans', // the font name used in your App
-      type: 'msdf', // type of text renderer to use (msdf or web)
-      file: 'fonts/Comic-Sans.ttf', // location of the ttf file
-    },
-    // ..
-  ],
-  ```
-
-From this moment on you'll be able to use the font `ComicSans` anywhere in your App:
-
-```xml
-<Text font="ComicSans" content="I'm Comic Sans font!" />
-```
-
-### Custom characters
-
-For MSDF font, a font atlas is created. By default this atlas includes all printable main ASCII characters. If you know beforehand that you won't need certain characters, it would be more optimal to generate only those characters that are actually needed.
-
-Similarly, if you need characters outside of the default set, like accents or other special characters, then these will need to be included in the generated font atlas.
-
-In order to control which characters are generated for a specific font, you can add a _font config file_ per font inside the `assets/fonts` folder. Its name should match the name of the font file, like so: `myfont.config.json`.
-
-The config file should look something like this:
-
-```json
-{
-  "charset": "0123456789éåaü"
-}
-```
-With the configuration above, only numbers and the specified letters with accents will be generated (i.e. the default character set is overwritten).
-
-> Please note that only special characters and accents that are part of the original font can be added to the generated font atlas. Other characters will show up as a `?`.

package/docs/essentials/element_attributes.md

@@ -1,195 +0,0 @@
-# Supported Element attributes
-
-The core building block of a Blits template is the `<Element>`-tag. The Element tag corresponds directly to a node in the Lightning 3 Renderer. You can style and position Elements via _attributes_, much like you would do in plain HTML.
-
-Blits Elements have a specific set of attributes that can be used. The available attributes are loosely modeled after the properties of a Lightning 3 renderer node. In certain cases, Blits provides more developer friendly names or accepts a wider range of values, and transparently takes care of the translation into L3 renderer instructions.
-
-## Positioning and Dimensions
-
-In order to position and set the dimensions of an Element, the following attributes can be used.
-
-  - `x` - the x position of the Element in pixels, relative to its parent - allows negative values and decimals
-  - `y` - the y position of the Element in pixels, relative to its parent - allows negative values and decimals
-  - `z` - the z index of the element (optionally `zIndex` can be used as an alias)
-  - `w` - the width of the element in pixels (optionally `width` can be used as an alias)
-  - `h` - the height of the element in pixels (optionally `height` can be used as an alias)
-
-All positioning and dimension related attributes, when not specified, will default to `0`.
-
-```xml
-<Element x="100" y="100" w="800" h="400">
-  <Element x="40" y="80" w="300" h="300" z="10" />
-  <Element x="60" y="120" w="200" h="200" z="0" />
-</Element>
-```
-
-### Using percentages
-
-Besides using values in pixels (i.e. `w="100" h="300"`), you can also specify _percentages_ for the positioning and dimensions attributes.
-
-```xml
-<Element w="400" h="100" x="800" y="900" color="#0284c7">
-  <Element w="42%" h="30%" y="5%" x="1%" color="#075985" />
-</Element>
-```
-
-The percentage value specified for `w` and `x` will be calculated as the percentage of the _width_ (`w`) of the parent element.
-And the percentage specified for `h` and `y` will use the _height_ (`h`) of the parent element as the base of the percentage calculation.
-
-### Predefined placement options
-
-In addition to the absolute positions that Blits and Lightning use, there are a few predefined placement options available. By adding the `placement`-attribute to an Element we can easily align it to the _center_, _left_, _right_, _top_, _bottom_, or even a combination like `{y: 'middle', x: 'left'}`, without having to calculate the positions yourself.
-
-
-On the `x`-axis the following _placement_ options can be used: `left` (default), `center` and `right`. On the `y`-axis the _placement_ attribute accepts `top` (default), `middle` and `bottom`.
-
-The _placement_ attribute also accepts an object with an `x` and a `y` key, to specify a placement for both axes.
-
-The placement of an Element is calculated based on the dimensions of its direct parent. This means that the containing Element _must_ have its own dimensions (i.e. a `w` and a `h` attribute).
-
-```xml
-<Element w="300" h="300">
-  <!-- x placement -->
-  <Element w="40" h="40" placement="left" color="#818cf8" />
-  <Element w="40" h="40" placement="center" color="#2563eb" />
-  <Element w="40" h="40" placement="right" color="#1e40af" />
-
-  <!-- y placement -->
-  <Element w="40" h="40" x="54" placement="top" color="#f472b6" />
-  <Element w="40" h="40" x="54" placement="middle" color="#db2777" />
-  <Element w="40" h="40" x="54" placement="bottom" color="#be185d" />
-
-  <!-- x/y placement -->
-  <Element w="40" h="40" placement="{x: 'center', y: 'bottom'}" color="#a3e635" />
-  <Element w="40" h="40" placement="{x: 'right', y: 'middle'}" color="#65a30d" />
-  <Element w="40" h="40" placement="{x: 'center', y: 'middle'}" color="#4d7c0f" />
-</Element>
-```
-
-> note: the `x` or `y` attributes on the Element are ignored for those axes defined in the `placement`-attribute
-
-## Colors
-
-By default, Elements have a transparent background color. The `color` attribute can be used to give an Element a color.
-
-If you are familiar with Lightning 2: colors have gotten a lot easier with Blits. Under the hood, the Lightning 3 renderer still uses the somewhat unfamiliar (but efficient) `0xffc0ffee` syntax. In Blits, you can specify colors as you are used to in HTML and CSS.
-
-Blits accepts the following color formats and makes sure that they are converted in a way the Lightning 3 renderer can understand.
-
-- hexadecimal (i.e. `#ff4433`)
-- hexadecimal with an alpha channel (i.e `#55553380`)
-- hexadecimal shorthands (i.e. `#333`)
-- rgb (i.e. `rgb(180, 30, 50)`)
-- rgba (i.e `rgba(40, 30, 180, 0.5)`)
-- html color names (i.e. `red`, `blue`, `skyblue`, `tomato`)
-
-_HSL and HSLA formats are planned to be added in the future._
-
-```xml
-<Element w="200" h="200" color="#ff4433" />
-<Element w="200" h="200" color="#55553380" />
-<Element w="200" h="200" color="#333" />
-<Element w="200" h="200" color="rgb(180, 30, 50)" />
-<Element w="200" h="200" color="rgba(40, 30, 180, 0.5)" />
-<Element w="200" h="200" color="black" />
-<Element w="200" h="200" color="red" />
-<Element w="200" h="200" color="skyblue" />
-```
-
-### Basic linear gradients
-
-The color attribute can also be used to specify basic linear gradients.
-
-A linear gradient can be defined by specifying an _object literal_ as the `color` attribute instead of a single color. The object can consist of a mix of `top`, `bottom`, `left`, `right` keys, with the color to use for that side as a value. If a specific side isn't specified, it defaults to `transparent`.
-
-Again, you can use "normal" notation for the colors (like hexadecimal or rgba) and you are free to mix and match formats.
-
-```xml
-<Element w="200" h="200" color="{top: 'red', bottom: 'blue'}" />
-<Element w="200" h="200" color="{left: 'rgba(255,255,255,.5)', right: '#000'}" />
-<Element w="200" h="200" color="{left: '#aaa333', top: 'aqua', 'bottom: rgb(255,100,20)'}" />
-<Element w="200" h="200" color="{bottom: 'black'}" />
-```
-
-## Alpha and visibility
-
-The opacity of an Element can be controlled by setting the `alpha` attribute. This attribute accepts a value between `0` (fully transparent) and `1` (completely visible).
-
-The value of alpha is also applied recursively to the children of the Element that has its alpha set. If you just want the background color of an Element to be semi-transparent, you should set the alpha channel in the `color` instead of applying the `alpha` attribute.
-
-```xml
-  <Element w="200" h="200" color="blue" alpha="0.8">
-    <Element w="100" h="100" color="red" alpha="0.3" />
-  </Element>
-```
-
-## Rotation and scaling
-
-If you want to rotate an Element, you can use the `rotation` attribute. The rotation attribute in Blits accepts values in _degrees_.
-
-The rotation of an Element is also automatically applied to any children down the tree.
-
-```xml
-<Element w="200" h="200" color="blue" rotation="90">
-  <Element w="100" h="100" color="red" rotation="240" />
-</Element>
-```
-
-For scaling an Element the `scale` attribute is used.
-
-This attribute either accepts a single numeric value for scaling evenly across width and height. Or an _object literal_, if you want to apply a different scaling for the `x` and the `y` axis.
-
-The value should be higher than `0` and the default value is `1`, which means no scaling.
-
-Any value below `1` will scale _down_ the element and values greater than `1` will scale the element _up_.
-
-Similar to rotation, scale is also applied recursively to children down the tree of the Element that has its `scale` attribute set.
-
-```xml
-<Element w="200" h="200" color="blue" scale="0.5" />
-<Element w="200" h="200" color="#000" scale="2.3" />
-<Element w="200" h="200" color="#000" scale="{x: 1, y: 3.14}" />
-```
-
-## Mounting point
-
-For advanced positioning, the `mount` attribute can come in handy. By default when you set the `x` and `y` position of an Element, the _top-left_ corner will be set to that position. But in some cases, you may want to align the position starting at a different corner, or even any arbitrary point in between.
-
-The `mount` attribute accepts an _object literal_ that allows you to precisely control the mount position on the _x-axis_ and the mount position on the _y-axis_. The default value is `{x: 0, y: 0}`, which refers to the _top-left_ corner.
-
-In order to align the position starting at the _bottom-right_ corner, we would set `mount` to `{x: 1, y: 1}` and `{x: 0.5, y: 0.5}` would align the position at the _center_ of the Element.
-
-If you omit either the `x` or the `y` key from the _object literal_, its value will default to `0`.
-
-In the case where the `x` and `y` values are the same (i.e. centering with `{x: 0.5, y: 0.5}`), you can also just supply a single value (`mount="0.5"`) instead of the object literal notation.
-
-```xml
-<Element w="200" h="200" x="20" y="100" color="#333" mount="{x: 0.5, y: 0.8}" />
-<Element w="200" h="200" x="800" y="400" color="#333" mount="{y: 1}" />
-<Element w="200" h="200" x="800" y="700" color="#333" mount="0.5" />
-```
-
-## Pivot point
-
-The pivot point of an Element comes into play when it's rotated or scaled. The pivot point defaults to the _center_ of the Element, which means that when setting `rotation` it rotates around the middle. And when the Element is scaled it scales from the center out.
-
-But sometimes you may want to rotate around the left corner, or scale from the right side out. This can be controlled by adding the `pivot` attribute to the Element and, similar to the `mount` attribute, specify an _object literal_ with an `x` and a `y` key.
-
-Both `y` and `x` values should be anything between `0` and `1`, where `{x: 0, y: 0}` sets the pivot point to the _top-left_ corner and `{x: 1, y: 1}` refers to the _bottom-right_ corner. The default pivot value is `{x: 0.5, y: 0.5}` (i.e. the center) and if you omit `x` or `y` in your pivot object, it will default to `0.5`.
-
-In the case where the `x` and `y` values are the same, you can also just supply a single value (`pivot="0.9"`) instead of the object literal notation.
-
-
-```xml
-<Element w="200" h="200" x="20" y="100" pivot="{x: 0.5, y: 0.8}" rotation="69" />
-<Element w="200" h="200" x="800" y="400" pivot="{y: 1}" scale="3" />
-<Element w="200" h="200" x="800" y="700" pivot="0.9" rotation="42" />
-```
-
-## Clipping / overflow
-
-By default contents inside an Element (i.e. child Elements) will overflow the boundaries of the parent, even when you give the parent Element fixed dimensions.
-
-In order to contain / cut off the content inside an Element's `w` and `h`, you can add the `clipping="true"`-attribute. Setting `clipping` to `false` restores the default behaviour of content overflowing.
-
-Alternatively you can also use the `overflow`-attribute (and pass it `true` or `false`), which works similar to clipping just mapped inversly (i.e. `overflow="false"` ensures content that surpasses the parent dimensions is clipped-off).

package/docs/essentials/settings.md

@@ -1,117 +0,0 @@
-# Application Settings
-
-Blits provides a flexible and performant way to configure your application at launch using the settings object passed to `Blits.Launch`. These settings allow you to fine-tune rendering, performance, input, fonts, and more.
-
-Below is a comprehensive overview of the available settings you can provide to a Blits Application:
-
-## Basic Settings
-
-| Setting         | Type                | Description |
-|----------------|---------------------|-------------|
-| `w`            | `number`            | Width of the application (canvas) |
-| `h`            | `number`            | Height of the application (canvas) |
-| `debugLevel`   | `number \| string[]`| Debug level for console log messages |
-| `multithreaded`| `boolean`           | Enable multithreaded rendering |
-
-## Fonts & Text
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `fonts`        | `Font[]`  | Array of font objects to register |
-| `defaultFont`  | `string`  | Default font family to use |
-
-Example font object:
-```js
-{
-  family: 'lato',
-  type: 'msdf', // or 'web'
-  file: 'fonts/Lato-Regular.ttf',
-}
-```
-
-## Rendering & Performance
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `renderQuality` | `'low' \| 'medium' \| 'high' \| 'retina' \| number` | Controls render quality (1 = 100%) |
-| `screenResolution` | `'hd' \| 'fhd' \| '4k' \| number` | Sets device screen resolution |
-| `pixelRatio`    | `number`  | Custom pixel ratio (overrides screenResolution) |
-| `canvasColor`   | `string`  | Background color of the canvas |
-| `fpsInterval`   | `number`  | Interval (ms) for FPS updates (0 disables) |
-| `webWorkersLimit` | `number`| Max number of web workers for image handling |
-| `gpuMemory`     | `object`  | GPU memory management (see below) |
-| `gpuMemoryLimit`| `number`  | (Deprecated) Use `gpuMemory` instead |
-| `textureProcessingTimeLimit` | `number` | Max ms per frame for texture processing |
-| `viewportMargin`| `number \| [number,number,number,number]` | Extra margin for preloading elements |
-| `advanced`      | `object`  | Advanced renderer settings (use with care) |
-
-### GPU Memory Example
-```js
-{
-  max: 200, // MB
-  target: 0.8, // 80% of max
-  cleanupInterval: 5000, // ms
-  baseline: 25, // MB
-  strict: false
-}
-```
-
-## Input & Focus
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `keymap`       | `object`  | Custom key mapping for input events |
-| `holdTimeout`  | `number`  | Time (ms) to consider a key press as hold |
-
-## Renderer
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `renderMode`   | `'webgl' \| 'canvas'` | Renderer mode (default: 'webgl') |
-| `canvas`       | `HTMLCanvasElement` | Custom canvas to render to |
-
-## Effects & Shaders
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `effects`      | `ShaderEffect[]` | Effects for DynamicShader |
-| `shaders`      | `Shader[]` | Custom shaders |
-
-## Inspector & Debugging
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `inspector`    | `boolean` | Enable the inspector tool |
-
-## Accessibility
-
-| Setting         | Type      | Description |
-|----------------|-----------|-------------|
-| `announcer`    | `boolean` | Enable/disable text-to-speech announcer |
-
-## Example Usage
-
-```js
-Blits.Launch(App, 'app', {
-  w: 1920,
-  h: 1080,
-  debugLevel: 1,
-  renderQuality: 'high',
-  fonts: [
-    { family: 'lato', type: 'msdf', file: 'fonts/Lato-Regular.ttf' },
-  ],
-  keymap: {
-    ArrowLeft: 'left',
-    ArrowRight: 'right',
-  },
-  gpuMemory: {
-    max: 200,
-    target: 0.8,
-    cleanupInterval: 5000,
-    baseline: 25,
-    strict: false,
-  },
-  inspector: false,
-  announcer: true,
-})
-```

package/docs/essentials/template_syntax.md

@@ -1,83 +0,0 @@
-# Template syntax
-
-Blits uses an easy-to-read _XML-style_ template syntax. The syntax is inspired by frameworks like VueJS, so if you are familiar with Vue, you will probably recognize certain concepts.
-
-The `template` key in the _Component configuration object_ is used to specify a string with this XML-like template structure. Templates can often span multiple lines. In those cases, it's advisable to use `template literals` (enclosed by backticks).
-
-Similar to HTML, you can use arguments and nested tags. Self-closing tags and HTML-style comments are also supported in Blits templates.
-
-The default tag that can be used in templates is the `<Element>` tag. The Element tag corresponds to a node in the Lightning 3 renderer.
-
-For each element, there is a set of predefined render properties, such as `x`, `y`, `w`, `color` that define how the element looks and where it is positioned. Detailed information on all the attributes supported by the `<Element>` tag can be found [here](./element_attributes.md).
-
-Now let's consider the following template example:
-
-```xml
-<Element x="20" y="20">
-  <Element w="100" h="100" x="360" color="#0891b2" />
-  <Element w="$width" h="$height" color="$color" />
-  <Element :w="$changingWidth" :h="Math.floor($height / 5)" :color="$highlight" />
-</Element>
-```
-
-## Hardcoded arguments
-
-In the template above, you'll observe certain arguments with hardcoded values (i.e. `w="100"` and `color="#0891b2"`).
-You can use hardcoded arguments to configure the parts of your template that you know will never change.
-
-## Dynamic arguments
-
-Additionally, some arguments contain a value prefixed with a dollar sign (`$`). These are so called _dynamic_ arguments.
-
-The `$`-sign used in a template refers to a (state) variable on the Component. And when the template renders, it automatically populates
-these arguments with dynamic values based on the initial state of your Component.
-
-It's important to realize that dynamic arguments are only set _once_. Changing a value used in a dynamic argument, won't be reflected
-on screen. For that you will need to use _reactive_ arguments.
-
-## Reactive arguments
-
-If you look at the template example above you'll notice that certain arguments are prefixed with a colon sign (`:`). Prefixing an argument
-with a colon makes it not only dynamic but also _reactive_.
-
-Reactive arguments are set with the initial state value when your component first renders, exactly as a dynamic argument does.
-
-The difference is that a _re-render_ of (a portion of) the template will be triggered whenever the referenced value in your Component's internal state changes.
-
-This concept of _reactive data binding_ eliminates the need for manual template patching and allows for a declarative way of programming.
-
-Reactive arguments also support _interpolation_. This enables the use of simple JavaScript instructions, such as ternary conditions or basic String and Math manipulations, right inside your template arguments.
-
-For more complex logic, it's recommended to abstract this into a [Component method](../components/methods.md) or a [Computed property](../components/computed_properties.md).
-
-# Abstracting template portions to custom components
-
-As your template grows in complexity, you may want to organize your codebase with custom components, abstracting a complex template into smaller, reusable pieces.
-
-When you've abstracted a portion of a template into a separate component, a _Menu_ component for example, you'll first need to `import` the file that contains the Menu component.
-
-Next, you have to _register_ the imported custom component. The `components`-key in the _configuration object_ is used for this.
-
-The `components` key is an _object literal_, where the value is the reference to the custom Blits component and the key will correspond with the _tag_ that can be used in the template to insert the component.
-
-Once this is done, the tag (`<Menu>` for example) is available for use in your component's template. You can use the component tag as many times as you want. For each tag, a new Component instance will be created.
-
-The example below shows how to use a custom `Menu` and `Button` (aliased to `MyButton`) component inside a template.
-
-```js
-import Menu from './components/menu.js'
-import Button from './components/button.js'
-
-export default Blits.Component('MyComponent', {
-  components: {
-    Menu, // makes <Menu /> available for use in the template
-    MyButton: Button, // makes Button available as <MyButton /> in the template
-  },
-  template: `
-    <Element>
-      <Menu />
-      <MyButton />
-    </Element>
-  `
-})
-```