@lightningjs/blits 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+# v0.9.0
+
+_18 mar 2024_
+
+- Added symbol for `id` on component
+- Fixed issue in for loop when `:key` is a number (and not a string)
+- Added built-in `hasFocus` state variable, available on every Component
+- Refactored font loading, removed the need for temporary `src/fontLoader.js` file
+- Replaced using component name with unique identifier for registering and emitting hooks
+
+# v0.8.1
+
+_9 mar 2024_
+
+- Added pre-processing of hardcoded colors used in the template
+- Upgraded Lightning renderer to v0.7.5
+- Removed explicit destroy of child nodes, as the renderer now takes care of this
+- Re-added support for clipping
+
 # v0.8.0
 
 _1 mar 2024_

package/boilerplate/js/default/src/index.js

@@ -1,7 +1,4 @@
 import Blits from '@lightningjs/blits'
-// @ts-ignore
-import fontLoader from './fontloader.js?importChunkUrl'
-
 import App from './App.js'
 
 Blits.Launch(App, 'app', {
@@ -9,19 +6,16 @@ Blits.Launch(App, 'app', {
   h: 1080,
   multithreaded: false,
   debugLevel: 1,
-  fontLoader: fontLoader,
   fonts: [
     {
       family: 'lato',
       type: 'msdf',
-      png: 'fonts/Lato-Regular.msdf.png',
-      json: 'fonts/Lato-Regular.msdf.json',
+      file: 'fonts/Lato-Regular.ttf',
     },
     {
       family: 'raleway',
       type: 'msdf',
-      png: 'fonts/Raleway-ExtraBold.msdf.png',
-      json: 'fonts/Raleway-ExtraBold.msdf.json',
+      file: 'fonts/Raleway-ExtraBold.ttf',
     },
     {
       family: 'opensans',

package/docs/README.md

@@ -18,24 +18,3 @@ Firstly, it's short, memorable and just has a nice ring to it.
 
 Finally it's a nerdy reference to the computer term "Bit Blits" commonly used in graphics processing, for rapidly moving a block of data into memory - quite similar to what Lightning is doing 🙂
 
-## Table of contents
-
-- [Getting started](getting_started.md)
-- [Components](components.md)
-- [Template syntax](template_syntax.md)
-- [Component state](component_state.md)
-- [Hooking into lifecycle events](lifecycle_events.md)
-- [Props](props.md)
-- [Handling user input](user_input.md)
-- [Computed properties](computed_properties.md)
-- [Watching for changes](watchers.md)
-- [Styling and positioning Elements](element_attributes.md)
-- [Displaying images](displaying_images.md)
-
-<!---
-- More complex logic in methods
-- Transitions
-- Implementing Custom components
-- Handling Text
-- Routing
--->

package/docs/_sidebar.md

@@ -1,13 +1,25 @@
-- [Getting started](getting_started.md)
-- [Components](components.md)
-- [Template syntax](template_syntax.md)
-- [Component state](component_state.md)
-- [Hooking into lifecycle events](lifecycle_events.md)
-- [Props](props.md)
-- [Handling user input](user_input.md)
-- [Computed properties](computed_properties.md)
-- [Watching for changes](watchers.md)
-- [Styling and positioning Elements](element_attributes.md)
-- [Displaying images](displaying_images.md)
-- [Text-to-Speech / Announcer](text-to-speech-announcer.md)
-
+- Getting started
+  - [Intro](/getting_started/intro.md)
+  - [Getting started](/getting_started/getting_started.md)
+  - [File structure](/getting_started/file_structure.md)
+- Essentials
+  - [Application root](/essentials/application_root.md)
+  - [Component basics](/essentials/components.md)
+  - [Template syntax](/essentials/template_syntax.md)
+  - [Supported element attributes](/essentials/element_attributes.md)
+  - [Displaying images](/essentials/displaying_images.md)
+  - [Displaying text](/essentials/displaying_text.md)
+- Components
+  - [State](/components/component_state.md)
+  - [Props](/components/props.md)
+  - [Computed properties](/components/computed_properties.md)
+  - [Watchers](/components/watchers.md)
+  - [Hooking into lifecycle events](/components/lifecycle_events.md)
+  - [Handling User input](/components/user_input.md)
+  - [Methods](/components/methods.md)
+- Transitions and Animations
+  - [Transitions](/transitions_animations/transitions.md)
+- Built-in components
+  - [Directives](/built-in/directives.md)
+- Plugins
+  - [Text-to-Speech / Announcer](/plugins/text-to-speech-announcer.md)

package/docs/built-in/directives.md

@@ -0,0 +1,44 @@
+# Blits - Lightning 3 App Development Framework
+
+## Directives
+
+Blits comes with a few built-in attributes that tap into specific behaviour provided by the framework - also kn ows as _directives_. Most of them can be used in the template on both Elements and Components.
+
+### Show-directive
+
+The `show`-attribute allows you to conditionally show and hide Components and Elements.
+
+When passed a _truthy_ value, such as `true` or `1`, the element will be made visible. And when passed a _falsy_ value (`false` or `0`) it will not be visible.
+
+```xml
+<Element>
+  <Element w="100" h="100" color="purple" :show="$active"></Element>
+  <Element w="100" h="100" y="200" color="purple" show="false"></Element>
+</Element>
+```
+
+### Is-directive
+
+The `is` directive allows you to dynamically instantiate a Component based on a `state` variable or a passed `prop`.
+
+It is very useful in combination with API driven Apps, where the type of Component to use, depends on what data is returned (i.e. a `Poster` or a `HeroImage`).
+
+The `is`-component should always be used together with the built-in `Component`-tag.
+
+```js
+export default Blits('DynamicComponents', {
+  template: `
+    <Element>
+      <Component is="$firstComponent" />
+      <Component is="$secondComponent" x="500" />
+    </Element>
+  `,
+  props: ['firstComponent', 'secondComponent'],
+})
+```
+
+At the moment it's not possible to use the `is`-attribute as a _reactive_ attribute and have a component change type after instantiation.
+
+<!-- ### If-directive
+
+Todo -->

package/docs/{component_state.md → components/component_state.md}

@@ -2,23 +2,55 @@
 
 ## Component State
 
-In Blits, a component can be as simple as a template with fixed, hardcoded values. However, for dynamic behavior and logic, you'll often want to extend your components with an _internal state_.
+In Blits, a component can be as simple as a template with fixed, hardcoded values. However, for dynamic behavior and logic, you'll often want to give your components an _internal state_.
 
 Some key concepts to keep in mind regarding Component state:
 
-- Each component _instance_ maintains its own distinct internal state.
 - The component state is defined within the `state` key of the Component configuration object.
 - The `state` is expected to be a `function` (a regular function, not an ES6 arrow function), that returns an object representing the component's state.
+- While defined on the configuration object, each component `instance` maintains its own distinct internal state.
 - The structure of the `state` object is flexible, allowing you to define state values according to your component's requirements. These values can range from `strings`, `booleans`, `arrays`, to even nested `objects`.
-- While flexibility in structuring your state is advantageous, be cautious about excessive nesting, as it could have a negative effect on performance.
+- While you have full flexibility in structuring your state, be cautious about _excessive nesting_, as it could have a negative effect on performance.
+
+
+Example of defining a component state:
+
+```js
+export default Blits.Component('MyComponent', {
+  // ...
+  state() {
+    return {
+      active: false,
+      items: [],
+      style: {
+        positions: {
+          x: 100,
+        },
+        dimensions: {
+          h: 100,
+        },
+      },
+      color: 'tomato'
+    }
+  }
+})
+```
 
 ### Accessing State in Templates
 
-As explained in the [template section](./template_syntax.md), you can refer to state variables in an Element's arguments by prefixing the state variable name with a _dollar sign_ (e.g., `$alpha`). For nested objects, you can use_dot notation_ (e.g., `$style.dimensions.w`).
+As explained in the [template section](../essentials/template_syntax.md), you can refer to state variables in a template by prefixing the state variable name with a _dollar sign_ (e.g., `$alpha`). Think of the `$`-sign as a reference to the `this`-scope of the component.
+
+For nested objects, you can use _dot notation_ (e.g., `$style.dimensions.w`).
 
 ### Accessing State in Component Code
 
-In your component's code, you can reference state variables within the `this` scope. For instance, a state variable named `color` can be accessed and modified by referencing `this.color`. It's important to note that unlike in the template, you should _not_ use the dollar sign when accessing state variables within the component's code.
+In your component's code, you can reference state variables directly within the `this`-scope. For instance, a state variable named `color` can be accessed (and modified) by referencing `this.color`.
+
+It's important to note that unlike in the template, you should _not_ use the dollar sign when accessing state variables within the component's code.
+
+Also remember that there is no need to explicitely reference the `state`-key. Blits automatically maps all state variables directly on the `this`-scope, for easy access.
+
+The example below gives a full example of defining and using a component's state:
 
 ```js
 export default Blits.Component('MyComponent', {

package/docs/components/computed_properties.md

@@ -0,0 +1,48 @@
+# Blits - Lightning 3 App Development Framework
+
+## Computed properties
+
+So far we've learned how to utilize a Component's [internal state](./component_state.md) and [props](./props.md) passed by a parent into a child component.
+
+We've also seen how we can perform simple operations like `Math.max()` or `str.toUpperCase()` directly within an argument of a template on the Component's internal state or passed props .
+
+However as these operations become more complex it's more clear and more maintainable to abstract these operations into what we call _computed properties_.
+
+Computed properties are a powerful tool for enhancing the readability of your component code. By abstracting complex or frequently used calculations from your template into computed properties, you can make your code more concise and easier to understand.
+
+
+### Defining computed properties
+
+Within the `computed`-key of the Component configuration object, you can specify an object of `functions`. Each function name you define (`offset()` for example) becomes accessible as a _computed property_.
+
+A computed property function should always _return_ a value.
+
+In your template, you can reference these computed properties exactly the same as you would with _state_ variable and _props_, by prefixing them with a dollar sign (e.g., `$offset`).
+
+In the rest of your app's code, you can access these computed properties (but not modify them!) using `this.offset`. Note that similar to Component state and props, you do not need to prefix with `computed` to access the computed property.
+
+
+```js
+export default Blits.Component('MyComponent', {
+  // ...
+  computed: {
+    offset() {
+      return this.index * 100
+    },
+    bgColor() {
+      return this.focused === true ? 'aqua' : '#ccc'
+    }
+  }
+})
+```
+
+### Reactivity
+
+Within a computed property, you can reference one or more state variables or props and _return_ a value based on calculations or logical operations.
+
+Whenever the value of any of the referenced variables changes, the computed property will automatically recalculate.
+
+If a computed property is referenced reactively in the template (i.e., the argument is prefixed with colons `:`), it will also trigger an automatic rerender of that portion of the template.
+
+Computed properties should **not** have any _side effects_ (i.e. should not change the value of any state variable). Side effects can potentially lead your app into an endless loop if not handled carefully. If you want to execute certain logic upon state changes, you can consider to use a [watcher](./watchers.md) for this.
+

package/docs/{lifecycle_events.md → components/lifecycle_events.md}

@@ -4,11 +4,13 @@
 
 Blits components follow a defined flow of lifecycle events. You can integrate specific logic into these events by specifying them in the `hooks` key of the Component configuration object.
 
-For each available lifecycle event, you can define a function with the same name as the event itself. This function will execute each time the event is triggered for your component's instance. It's essential to use a regular function instead of an arrow function if you intend to access the `this` scope of your component instance.
+For each available lifecycle event, you can define a function with the same name as the event itself. This function will then execute each time the lifecycle event is triggered for your component's instance. It's essential to use a regular function instead of an arrow function if you intend to access the `this` scope of your component instance.
 
 ### Lifecycle Events
 
-- **init()**: This event fires when the component is instantiated, just before it sends its render instructions to the Lightning renderer. At this point, the elements of your template won't be available yet.
+The following lifecycle events are available in Blits components.
+
+- **init()**: This event fires when the component is being instantiated, just before it sends its render instructions to the Lightning renderer. At this point, the elements of your template won't be available yet.
 
 - **ready()**: The `ready` event fires when the component instance is fully initialized and rendered, indicating that it's ready for interaction.
 

package/docs/components/methods.md

@@ -0,0 +1,47 @@
+# Blits - Lightning 3 App Development Framework
+
+## Methods
+
+Within a Blits component you have quite some freedom where to put specific logic.
+
+Template related logic can be either be placed directly in a _reactive / interpolated_ attribute or you can move it out to a _computed property_ if the logic is more complex.
+
+Business logic for your App can be placed directly in a _watcher_, a _lifecycle hook_ or an _input handling_ function.
+
+If you notice that you're duplicating logic in these different places, or if you just like to keep all your business logic nicely grouped together, you can move these business logic functions under the `methods` key of the _Component configuration object_.
+
+You can reference your Component's methods in the template by using a `$`-sign (for example in the `@loaded`-attribute when your element has a `src` attribute).
+
+In the javascript code of a Component you can reference methods directly on the `this`-scope (i.e. `this.getData()`). Similar as with `internal` state and `props`, there is no need to prefix with `methods`, for easy access.
+
+```js
+export default Blits('Carousel', {
+  template: `
+    <Element>
+      <!-- .... -->
+    </Element>
+  `,
+  state() {
+    return {
+      items: [],
+      page: 0
+    }
+  },
+  hooks: {
+    ready() {
+      this.fetchData()
+    }
+  },
+  input: {
+    down() {
+      this.page++
+      this.fetchData()
+    }
+  },
+  methods: {
+    async fetchData() {
+      this.items = await API.get(['movies', 'tvshows', 'documentaries'], this.page)
+    },
+  }
+})
+```

package/docs/components/props.md

@@ -0,0 +1,58 @@
+# Blits - Lightning 3 App Development Framework
+
+## Props
+
+Components in Blits have their own [internal state](./component_state.md) and logic, and as such a Component is self-contained. However, as each component is part of a larger App scope, they may need to display different behaviors or appearances based on the rest of the app.
+
+To achieve this, components can receive `props` from their parent component.
+
+### Defining and passing props
+
+In the Component configuration object, you can specify exactly which props a component accepts. These props are passed to the component via attributes in the parent component's template. Any attributes that are not explicitly defined as a prop will be ignored.
+
+The `props` key in the Component configuration object should be an `Array`, where each item corresponds to a prop that the component can accept.
+
+The simplest way to define props is to just list their names within the `props` array:
+
+```js
+{
+  props: ['x', 'color', 'index', 'alpha']
+}
+```
+
+Once specified, you can refer to these props inside the template of your component using the `$` sign, similar to how you would reference variables defined within the component's [internal state](./component_state.md) (i.e. `<Element color="$color" />`).
+
+You can als access a prop inside a component's code using `this.color` (without a dollar sign!). And similar to component `state` variables,
+there is no need to specifically reference the `props`-key. Blits automatically maps all props directly on the `this`-scope, for easy access.
+
+Since props are used to pass information from a parent to a child, it's important not to attempt to _modify_ props inside your child component. If changes based on the prop from the parent are needed, you should probably use the prop in a so called [computed property](./computed_properties.md).
+
+### Advanced usage
+
+For more advanced usage, you can define props using an array with an `object` for each prop, instead of just a string with the accepted name. Within each prop object, you can:
+
+- Specify a _default value_ for the prop if it's omitted.
+- _Validate_ the value of the prop based on certain criteria.
+- Mark the prop as _required_.
+- Apply a `cast` function to modify the value passed as a prop.
+
+As you can see in the following example, you can mix and match the simple string notation with the advanced object notation within the same `props` array.
+
+
+```js
+export default Blits.Component('MyComponent', {
+  // ...
+  props: [
+    'color',
+    {
+      key: 'alpha',
+      default: 0.5,
+      required: true,
+      validate(v) {
+        return v <= 1 && v >= 0;
+      },
+      cast: Number
+    }
+  ]
+})
+```

package/docs/{user_input.md → components/user_input.md}

@@ -2,69 +2,74 @@
 
 ## Handling User Input
 
-When building an App you probably want users to interact with it as well, for example to enable them to navigate through your App. In other words, you will want to handle _user input_. In the context of a Blits / Lightning App this often will be key input via a remote control.
+In order to allow users to interact with your app, you will want to capture and handle _user input_. If you are developing a TV based app this will
+often be key input via a remote control.
 
-Blits offers an intuitive and straightforward interface to handle key input in components.
+Blits offers an intuitive and straightforward interface to handle key input in Components.
 
 ### Focus
 
-Before diving into the specifics of key handling, it is important to understand the concept of _focus_. In a Blits app, there is always one Component that has the focus. By default this will be the root App component.
+Before diving into the specifics of key handling, it is important to understand the basic concept of _focus_.
 
-The component that currently has focus, is the one that is responsible for handling the user input at that moment. For example, when a user clicks the _right_ or _left_ button while a _Poster Component_ has focus, it is that instance of the Poster Component that will initially _receive_ the key press event.
+In a Blits app, there is always _one_ Component that has the focus. By default this will be the root Application component.
+
+The component that has focus, is the one that is responsible for handling the user input at that moment.
+
+For example, when a user clicks the _right_ or _left_ button while a _Poster Component_ has focus, it is that instance of the Poster Component that will _receive_ the first key press event.
 
 ### Configuring Input Handling
 
 Within the Component configuration object, the `input` key is used to define how the component should react to specific key presses when it has focus. The `input` key should be an `object literal` of `functions` for each input event that the component wants to handle.
 
-Each function corresponds to a _key name_, such as `up`, `down`, `enter`, `space`, `back`, `1`, `2`, `a` etc. Each function defined in the `input` object, receives the full `InputEvent` object as its first argument.
+Each function corresponds to a _key press name_, such as `up`, `down`, `enter`, `space`, `back`, `1`, `2`, `a` etc and each function defined in the `input` object, receives the full `InputEvent` object as its first argument.
 
-```javascript
+```js
 export default Blits.Component('MyComponent', {
   // ...
   input: {
-    up() {
+    up(e) {
       // Logic to execute when users press up
     },
-    down() {
+    down(e) {
       // Logic to execute when users press down
     },
-    enter() {
+    enter(e) {
       // Logic to execute when users press enter
     },
   }
 }
 ```
 
-### Event Handling Chain
-
-If the currently focused component does not handle a key press, Blits will traverse up the component hierarchy, checking for any _parent_ component that does have a function defined for that key press in the `input`-key. This input event handling chain continues until it reaches the root App component.
+### Catch-All Handling
 
-When a component handles a key press by having a corresponding function specified, the event handling chain stops by default. However, if you want the input event to propagate up the hierarchy, you can set focus to the parent element and pass the `InputEvent` object on in that function call.
+To allow a focused component to respond to any key and act as a _catch-all_, you can add an `any()` function to the input object. As it receives the `InputEvent` object as the first argument, you can abstract the key press in there and handle (or ignore) it as you wish.
 
 ```javascript
 {
   input: {
-    enter() {
-      // Give focus to the parent
-      this.parent.focus();
-    },
-    back(e) {
-      // Give focus to the parent and let the user input event bubble
-      this.parent.focus(e);
+    any(e) {
+      // Logic to execute for any key press
     },
   }
 }
 ```
 
-### Catch-All Handling
+### Event Handling Chain
 
-To allow a focused component to respond to any key and act as a _catch-all_, you can add an `any()` function to the input object.
+If the currently focused component does not handle a key press, Blits will traverse up the component hierarchy, checking for any _parent_ component that does have a function defined for that key press in the `input`-key. This input event handling chain continues until it reaches the root Application component.
+
+When a component handles a key press by having a corresponding function specified, said component receives focus, and the event handling chain stops by default. However, if you want the input event to propagate up the hierarchy further, you can move the focus to the parent element and pass the `InputEvent` object on in that function call.
 
 ```javascript
 {
   input: {
-    any() {
-      // Logic to execute for any key press
+    enter() {
+      // Give focus to the parent
+      this.parent.focus();
+    },
+    back(e) {
+      // Give focus to the parent and let the user input event bubble
+      this.parent.focus(e);
     },
   }
 }
@@ -78,9 +83,9 @@ But it's possible that the keycodes and mapping of your target device are slight
 
 In Blits you can easily configure the key mapping to match your needs. In the `src/index.js` file where we instaniate the App via the `Blits.Launch` function, we can add an extra key, called `keys`, to the _settings object_.
 
-The `'key` item should be an object literal with _key value pairs_. As the `key`, you should provide the `key` or `keyCode` of the `KeyboardEvent` and the `value` should be the name of the event as used in the `input` object of the Component configuration object.
+The `keys` item should be an object literal, where you map a `key` or `keyCode` (from the `KeyboardEvent`) to an event name that you can use in your Components.
 
-> You can use a site like [keyjs.dev](https://keyjs.dev/) to find the key and keyCode
+> You can use a site like [keyjs.dev](https://keyjs.dev/) to find the appropriate key and keyCode for your device
 
 ```js
 // src/index.js

package/docs/components/utilities.md

@@ -0,0 +1,4 @@
+# Blits - Lightning 3 App Development Framework
+
+## Utilities
+

package/docs/components/watchers.md

@@ -0,0 +1,36 @@
+# Blits - Lightning 3 App Development Framework
+
+## Watchers
+
+In some cases, you may want to execute specific actions whenever the value of a state variable, a prop, or a computed property changes. These actions could involve dispatching an event or updating another state variable.
+
+You might be tempted to handle this functionality inside a computed property, but this is not recommended. Computed properties should not have side effects, to prevent the risk of falling into and endless loop.
+
+Instead, Blits allows you to specify **watchers** to trigger functionality when certain variables change.
+
+### Using Watchers
+
+Within the `watch` key of the _Component configuration object_, you can define an object of _watcher functions_.
+
+The name of each function should correspond with the name of the state variable, the prop, or the computed property that you want to observe. Whenever the value of the observed target changes, the respective watcher function will be invoked.
+
+The watcher function receives two arguments: the _new value_ and the _old value_ of the observed property. This allows you to perform specific actions based on the changes.
+
+```javascript
+{
+  state() {
+    return {
+      alpha: 0.2
+    }
+  },
+  watch: {
+    alpha(value, oldValue) {
+      if(value > oldValue) {
+        // Execute some logic when the 'alpha' value increases
+      }
+    },
+  }
+}
+```
+
+In this example, whenever the value of state variable `alpha` changes, the `alpha` watcher function will be invoked. The function checks if the new value is greater than the old value and executes custom logic accordingly.

package/docs/essentials/application_root.md

@@ -0,0 +1,21 @@
+# Blits - Lightning 3 App Development Framework
+
+## Application root
+
+Every Blits App starts with a base Application component.
+
+Ultimately this Application is a component like any regular Blits component. But it is augmented with some extra functionality. `Blits.Application` is responsible for setting up the listeners for keyhandling for example.
+
+You can only have 1 Application component per App. By default this file is named `App.js` and it is placed in the root of the `src`-folder.
+
+`src/App.js` will look something like this:
+
+```js
+import Blits from '@lightningjs/blits'
+
+export default Blits.Application({
+  template: `
+    <Element></Element>
+   `,
+})
+```

package/docs/{components.md → essentials/components.md}

@@ -1,20 +1,30 @@
 # Blits - Lightning 3 App Development Framework
 
-## Building Your First Component
+## 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 the interoperability of 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. This function accepts two arguments:
+A new component is created using the `Blits.Component()` function that is exported from the `@lightningjs/blits` package. This function accepts two arguments:
 
-1. The first argument is the name of the component, which is mainly used for debugging purposes. It's essential to choose a unique and descriptive name for your component, such as `Homepage`, `Loader` or `SidebarMenuItem`.
+- 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`.
 
-2. The second argument is a _configuration object_, represented as an `object literal`. This configuration object can contain a predefined set of key-value pairs, including for example:
+- 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 defines how your Component looks and behaves.
+
+Some of the common used Component configuration options include:
 
    - `template`: to define the template for the component.
    - `state`: to specify the component instance's internal state.
@@ -23,6 +33,8 @@ A new component is created using the `Blits.Component()` function. This function
    - `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('Loader', {