@lightningjs/blits 1.30.2 → 1.31.0

package/docs/_sidebar.md

@@ -1,37 +0,0 @@
-- 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)
-  - [Utility methods](/components/utility_methods.md)
-- Transitions and Animations
-  - [Transitions](/transitions_animations/transitions.md)
-- Built-in components
-  - [Directives](/built-in/directives.md)
-  - [For loop](/built-in/for-loop.md)
-  - [Layout](/built-in/layout.md)
-- Router
-  - [Basics](/router/basics.md)
-  - [Hooks](/router/hooks.md)
-  - [Transitions](/router/transitions.md)
-- Plugins
-  - [Text-to-Speech / Announcer](/plugins/text-to-speech-announcer.md)
-  - [Language](/plugins/language.md)
-  - [Theme](/plugins/theme.md)
-  - [Global App State](/plugins/global_app_state.md)
-- Performance
-  - [Lazy loading]('/performance/lazy-loading.md')

package/docs/built-in/directives.md

@@ -1,50 +0,0 @@
-# Directives
-
-Blits comes with a few built-in attributes that tap into specific behaviour provided by the framework - also known 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 _falsey_ 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.Component('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.
-
-## Ref-attribute
-
-The declarative coding style that is promoted in Blits components, should generally remove the need to directly interact with individual Elements or Components in your template. However, in some cases you may need to reference them directly. For example, in order to delegate the focus.
-
-For this use case, you can specify a `ref`-attribute on Elements (or Components). And by using the helper function `this.select()`,  which is available on every Blits component, you can gain access to the child Element or Component inside your business logic.
-
-The `select()`-function accepts the `ref`-value that you are looking for as a single argument, and returns the Element or Component if found.
-
-<!-- ### If-directive
-
-Todo -->

package/docs/built-in/for-loop.md

@@ -1,204 +0,0 @@
-# For loop
-
-The for loop is technically also a [directive](../directives.md), but such an important one that it deserves its own section.
-
-The for loop directive can be used when you want to repeat multiple instances of an Element or a Component, without having to specify them hardcoded one by one in your template.
-
-The for loop takes an `Array` of data, loops over it and for each Array-item an Element or Component is created. The `Array` can be a fixed one, but it can also dynamically be filled or modified and have it's changes reflect in the rendered result.
-
-> Important: the for loop is a powerful and often used directive. Within Blits it's optimized to be as performant as possible. But if used incorrectly, it can be the cause of slow performance. So please read carefully through this entire section.
-
-
-## Basic syntax
-
-The for-loop directive should be added as an attribute on the Element or Component that you want to repeat for each item in your Array. In the template syntax a `for ... in` construct is used. This ultimately transpiles down to a classic, optimized for loop.
-
-```js
-export default Blits.Component('ForLoop', {
-  template: `
-    <Element>
-      <Element :for="item in $items" w="100" h="100" color="lime" />
-    </Element>
-  `,
-  state() {
-    return {
-      items: ['Item 1', 'Item 2', 'Item 3']
-    }
-  },
-})
-```
-
-The example above will generate 3 _lime green_ elements, based on the array of `items` in the Component state. They will appear on top of each other though, since they have no `x` and `y` positioning (which default to 0).
-
-
-## Using the index
-
-In order to fix the example above and make all 3 elements visible, we can use the `index` of the Array to position each item correctly.
-
-All we need to do is declare the `index` in the `for`-directive and subsequently use it in the `x`-attribute, with a simple calculation.
-
-You may choose any name for the `index` variable (like `i` or `forIndex`). This may be useful when you already have the `index`-key specified as a `state` or `prop` variable on your component, causing a conflict.
-
-```js
-export default Blits.Component('ForLoop', {
-  template: `
-    <Element>
-      <Element :for="(item, index) in $items" w="100" h="100" color="lime" :x="$index * 150" />
-    </Element>
-  `,
-  state() {
-    return {
-      items: ['Item 1', 'Item 2', 'Item 3']
-    }
-  },
-})
-```
-
-You will now see that each Element is positioned next to each other, with a 50px space in between.
-
-
-## Using variables inside a for loop
-
-When iterating over an Array in the for loop, you can reference the current Array item under the name specified in the for-in construct, prefixed with a `$`-sign. Besides this scoped Array item context, you _also_ have access to any `prop`, `state` or `computed` variable as you loop over an Array.
-
-Consider the example below, that loops over an array of _Objects_, and _also_ references the `alpha` state variable.
-
-```js
-export default Blits.Component('ForLoop', {
-  template: `
-    <Element>
-      <Element
-        :for="(item, index) in $items"
-        w="100"
-        h="100"
-        :color="$item.color"
-        :x="$index * 150"
-        alpha="$alpha"
-      />
-    </Element>
-  `,
-  state() {
-    return {
-      alpha: 0.5,
-      items: [{
-        id: 1,
-        color: 'green'
-      }, {
-        id: 2,
-        color: 'blue'
-      }, {
-        id: 3,
-        color: 'yellow'
-      }]
-    }
-  },
-})
-```
-
-This will generate 3 squares aligned next to each other, each with a different color and they will use the _alpha_ specific in the Component state.
-
-## The importance of using the key attribute
-
-The examples above have demonstrated the basic usage of the for-loop. But they are all missing one _very important_ ingredient to make sure that for-loops that are subject to change, continue to perform well. Meet the `key`-attribute.
-
-For performance reasons, it is essential to be able track the _identity_ of an Element or Component, whenever changes are made to the Array in the for loop.
-
-Think of _identity_ as the field that makes an item in the Array unique, such as an `id` or a `hash`. It's basically the thing that allows you to distinguish between the poster of _The Matrix_ and the poster of _Frozen 2_, for example.
-
-Providing this information, allows the for-loop to decide whether it should _update_ an existing Component or Element instance. Or whether we're dealing with a new Array item, and a new instance should be _created_.
-
-Correctly using the `key`-attribute enables Blits to _reuse_ existing instances whenever possible - which obviously is good for performance.
-
-It's important that the `key`-attribute is _unique_ for each Array item. Also beware that we can't rely on the `index` parameter provided in for loop, because that only identifies the position in the Array, and not the actual item itself.
-
-
-```js
-export default Blits.Component('ForLoop', {
-  template: `
-    <Element>
-      <Element
-        :for="(item, index) in $items"
-        w="100"
-        h="100"
-        :color="$item.color"
-        :x="$index * 150"
-        alpha="$alpha"
-        key="$item.id"
-      />
-      <!-- ^^ id is the unique field that identifies each array item -->
-    </Element>
-  `,
-  state() {
-    return {
-      alpha: 0.5,
-      items: [{
-        id: 1,
-        color: 'green'
-      }, {
-        id: 2,
-        color: 'blue'
-      }, {
-        id: 3,
-        color: 'yellow'
-      }]
-    }
-  },
-  hooks: {
-    ready() {
-      let count = 3
-      this.$setInterval(() => {
-        this.items.push({id: count++, color: randomColor()})
-      }, 2000)
-    }
-  }
-})
-```
-
-In the example above we have added the `key`-attribute in the template. Now whenever we push a new item to the `items`-array, the for-loop will reuse the Elements previously created and only instantiate a new Element for the newly added item.
-
-If we would omit the `key`-attribute, then whenever we push a new item to the Array, the for-loop would dispose all the old Elements and create new instances for _each_ item in the array.
-
-## Referencing elements in the for loop
-
-When you specify a `for`-attribute on an Element or a Component, it will effectively create multiple Elements / Components depending
-on the length of the Array.
-
-Generally it's not recommended to access and interact directly with Elements in a template, and that also goes for items in a For loop. But in some cases you may need to, for example to delegate focus to a specific item in the For loop.
-
-The `ref`-attribute can be used in combination with the `for`-attribute as well.
-
-Setting the _ref_ in a for loop context, can be done by either passing a string (i.e. `myitem`) and as Elements get generated in the for loop, the `index` value will be appended to it (i.e. `myitem0`, `myitem1`, etc.). Alternatively you can make the attribute interpolated and define the value for each item yourself (i.e. `:ref="'item' + $item.id"`).
-
-## Using the range attribute
-
-Sometimes you may only need to render a portion of an array rather than all the items.
-
-To do this you can use the `range` variable to specify a subset of items to render. You should specify a `from` and `to` value (`from` is inclusive, and `to` is exclusive) inside the `range` variable (i.e. `range="{from: 0, to: 2}"`).  You can also make the variable reactive, and use moving pointers to dynamically render your items.
-
-This works differently to using the `show` directive on the items, as the items will be destroyed once they are outside the range, and created again when they fall back in it.
-
-```js
-export default Blits.Component('ForLoop', {
-  template: `
-    <Element>
-      <Element :for="(item, index) in $items" :range="{from: $selected - 1, to: $selected + 2}" w="100" h="100" color="lime" :x="$index * 150" />
-    </Element>
-  `,
-  state() {
-    return {
-      selected: 0,
-      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7']
-    }
-  },
-  input: {
-    left() {
-      this.selected = Math.max(0, this.selected - 1)
-    },
-    right() {
-      this.selected = Math.min(this.items.length, this.selected + 1)
-    }
-  }
-})
-```
-
-In the example above, there are 7 items in the array, but we only render the items immediately before and after the selected item at any time.

package/docs/built-in/layout.md

@@ -1,168 +0,0 @@
-# Layout
-
-A big portion of building a pixel-perfect App is all about correctly positioning Elements and Components on the screen. In Lightning and Blits, _absolute_ positions are used. This fits the whole concept of building a TV app where the viewport dimensions are known and fixed. Absolute positioning (versus spacing Elements relative to each other) is also more performant.
-
-Imagine a complex design with several nested layers. Relying solely on _relative_ positioning and elements automatically floating as space is available may lead to heavy and recursive calculations. Then throw some dynamically changing dimensions and animations in the mix as well, and your App may be starting to noticeably drop frames due to expensive re-calculations.
-
-That being said, there are often cases where it becomes very cumbersome to calculate all the positions manually. Especially when dimensions are not known in advance and elements may load asynchronously.
-
-If you come from a CSS background, you may be tempted to say: "_this is why we have Flexbox!_". And while Flexbox is great and versatile in CSS and running on a powerful device, a full flexbox implementation does come at a cost and the risk of slowing down your App, when applied extensively or incorrectly.
-
-In order to address the core problem of "_how do I easily position a bunch of Elements and Components without writing a lot of code with `@loaded` event handlers_", Blits offers the built-in `<Layout>` component - a basic and performant solution that automatically puts your Elements in the right place.
-
-## How to use
-
-Since the Layout component is a built-in component, there is no need to register it separately. You can use the `<Layout>` tag anywhere in your templates, just as you would use `<Element>` and `<Text>`.
-
-The Layout component is a wrapper component that encloses a number of children. All direct children wrapped in a `<Layout>` tag are automatically positioned in order, one next to the other.
-
-Whenever dimensions of a child change, the positioning of the next children is automatically recalculated and reapplied.
-
-```xml
-<Layout>
-  <Element w="40" h="40" color="red" />
-  <Element w="80" h="40" color="blue" />
-  <Text>Hello world</Text>
-  <Element w="40" h="40" color="green" />
-</Layout>
-```
-
-### Horizontal and vertical layout
-
-By default, the Layout component lays out its contents _horizontally_. The Layout component accepts a `direction` attribute that allows you to control the direction.
-
-In order to align vertically, use `<Layout direction="vertical"></Layout>`. And use `<Layout direction="horizontal"></Layout>` to explicitly apply the default horizontal layout.
-
-### Spacing between children
-
-By default, the Layout-component places each Element directly besides (or below) the previous one. By adding the `gap`-attribute, you can control how much space will be added between each Element or Component. The `gap`-attribute accepts a number in pixels.
-
-### Aligning items
-
-The layout component positions its children based on the provided direction (`horizontal` or `vertical`). With the `align-items`-attribute, you can specify how to align the children on the opposite axis:
-
-- `start` (the default value) - aligns the children at the _top_ for horizontal layouts and on the _left_ for vertical layouts
-- `center` - align the children in the center
-- `end` - aligns the children in the _bottom_ for horizontal layouts, and on the _right_ for vertical layouts
-
-### Dynamic dimensions
-
-For the Layout component to work properly, all direct children need to have dimensions (i.e., `w` and `h` attributes). The exception here being Text elements.
-
-Due to the asynchronous nature of rendering text, the final text dimensions are not known beforehand. The width and height of Text elements are automatically set when the text has been loaded. This fires a `@loaded` event that you can tap into as described [here](../essentials/displaying_text#text-dimensions).
-
-The Layout component also uses this event to execute its calculation and properly position the text and other elements around it.
-
-When the children of the Layout-component have _reactive_ dimensions (i.e., `<Element :w="$mywidth" :h="$myheight" />`), the Layout component ensures that all child elements are properly repositioned whenever a dimension changes.
-
-### Components inside a Layout
-
-It is also possible to place Components inside of a Layout, but there is a small _gotcha_ there. By default a Component does not have any dimensions - it has a width and height of `0`, regardless of the contents of the Component. Normally, when using absolute positioning, this isn't a problem. But in the context of a Layout, each child needs to have dimensions.
-
-If the Component has fixed dimensions, you can just add a `w` and a `h` attribute to the Component tag (i.e. `<MyButton w="100" h="40" />`). This is the most performant way to supply dimensions to a Component and should be used whenever possible.
-
-If the Component has dynamic dimensions that are not known upfront, you can dynamically update the dimensions from inside the Component by calling the `this.$size()`-method. This method accepts an object as its argument with a `w` property for setting the _width_ and a `h` property for setting the _height_.
-
-```js
-export default Blits.Component('MyButton', {
-  template: ``,
-  props: ['type'],
-  hooks: {
-    ready() {
-      if(this.type === 'large') {
-        this.$size({
-          w: 200,
-          h: 80
-        })
-      } else {
-        this.$size({
-          w: 100,
-          h: 40
-        })
-      }
-
-    }
-  }
-})
-```
-At this moment, Blits does not support automatically growing a Component's dimensions based on its contents due to the performance impact of this functionality.
-
-### Nesting Layouts
-
-It's also possible to nest layouts. Simply place a new `<Layout>`-tag, with it's own children in between the children of another Layout-component. The Layout component itself will grow automatically with the dimensions of its children. In other words, it's not required to specify a width (`w`) or height (`h`) on the `<Layout>` tag itself.
-
-And of course you can nest _vertical_ Layouts inside a _horizontal_ one - and vice versa.
-
-### Padding
-
-By default a `<Layout />`-tag will be resized to the exact dimensions as the content it is containing. The `padding`-attribute can be used to add spacing between the content and the edges of the Layout Component.
-
-The `padding`-attribute accepts a `number` or an `object`. When passed a number, that padding will be applied equally to all sides. With an object value, the padding can be controlled for each side individually.
-
-Valid keys in the _padding-object_ are: `top`, `bottom`, `left`, `right`, `x` and `y`. The `x` and `y` keys can be used to define the same values for `top` and `bottom`, and `left` and `right` in one go. When a value is not specified for a side, it will default to `0`.
-
-```xml
-<Layout color="silver" padding="10" >
-  <Element w="40" h="40" color="red" />
-  <Element w="80" h="40" color="blue" />
-  <Element w="40" h="40" color="green" />
-</Layout>
-```
-
-```xml
-<Layout color="silver" padding="{x: 20, top: 30, bottom: 10}">
-  <Element w="40" h="40" color="red" />
-  <Element w="80" h="40" color="blue" />
-  <Element w="40" h="40" color="green" />
-</Layout>
-```
-
-### Transitioning layouts
-
-The `<Layout>`-component can also take into account when dimensions of children change with a transition applied to it (i.e. `<Element :w.transition="$myWidth">`). The component will recalculate the position of its children as the transition progresses, making sure that elements are always perfectly positioned relative to one another.
-
-### Updated event
-
-The `<Layout>`-tag automatically updates its dimensions based on the dimensions of its children. After each update in the children, an `updated`-event is emitted on the `<Layout>`-tag. It will receive the current dimensions of the layout.
-
-You can tap into this event by adding an `@updated`-attribute to the `<Layout />`-tag and refer to a method in your Component logic.
-
-
-```js
-export default Blits.Component('LayoutUpdate', {
-  template: `
-    <Element>
-      <Layout @updated="$layoutUpdate">
-        <Element :w="$width" h="40" color="red" />
-        <Element :w="$width" h="40" color="blue" />
-        <Element :w="$width" h="40" color="green" />
-      </Layout>
-    </Element>
-  `,
-  methods: {
-    layoutUpdate(dimensions, el) {
-      console.log(`Layout (${el.nodeId}) dimensions updated! Width: ${dimensions.w}, Height: ${dimensions.h}`)
-    }
-  }
-})
-```
-
-> Please be aware that the `@updated` event can fire multiple times. The size of the Layout-tag is recalculated for each change in children. Also note that the `@updated` event does not guarantee a change in dimensions. It is possible that it fires for a children update, but remains the same size.
-
-## Performance
-
-The Layout component is a very useful utility that will make it a lot easier to put together complex layouts. It will reduce the code required, it means less hardcoding of values and removes the need to manually wire up `@loaded` events when working with dynamic / asynchronous elements.
-
-We have done our best to make the Component as performant as possible by deliberately keeping it simple and straightforward. However, it is important to understand that the Layout component does come at a cost. Depending on the use case these costs may be negligible, but there are cases where the Layout component might prove to be a bottleneck.
-
-The performance costs may always be there to some degree. Whether it's the Layout component that does the complex calculations, or you do it in your custom code. So, please feel encouraged to use the `<Layout>` tag!
-
-Some pointers to keep in mind, though:
-
-- Every change in the dimensions of a child, triggers the Layout component to recalculate and reposition. If your child elements change frequently, the Layout component may have a performance impact.
-
-- The Layout component support transitions, but beware that when transitioning child dimensions a recalculation happens every frame tick. If you see frame-drops in your App, you may want to see if the `<Layout>`-tag has an impact on this.
-
-- Be mindful to not apply unnecessary deep nesting of Layout tags. Each change in a deep child, will trigger recalculations up the tree of Layout tags.
-
-- When using the `<Layout>`-tag with a for-loop, it may be more performant to use the `$index` of the for-loop and manually position the elements yourself (i.e. `<Element :for="(item, index) in $items" :$x="$item * 200" w="150" h="150" />`). Especially if the dimensions are known beforehand and possibly are the same for each child.

package/docs/components/component_state.md

@@ -1,90 +0,0 @@
-# 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 give your components an _internal state_.
-
-Some key concepts to keep in mind regarding Component 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 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](../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 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 explicitly 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', {
-  template: `
-    <Element :show="$active">
-      <Element :x="$style.x" w="100" :h="$style.dimensions.h">
-        <Element w="20" :h="$style.dimensions.h / 2" :color="$color" />
-      </Element>
-    </Element>
-  `,
-  state() {
-    return {
-      active: false,
-      items: [],
-      style: {
-        positions: {
-          x: 100,
-        },
-        dimensions: {
-          h: 100,
-        },
-      },
-      color: 'tomato'
-    }
-  }
-  hooks: {
-    ready() {
-      this.active = true
-      this.$setInterval(() => {
-        this.style.positions.x += 10
-      })
-    }
-  },
-  input: {
-    right() {
-      this.color = '#c0ffee'
-    }
-  }
-})
-```

package/docs/components/computed_properties.md

@@ -1,45 +0,0 @@
-# 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_ variables 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/components/lifecycle_events.md

@@ -1,42 +0,0 @@
-# Hooking into Lifecycle Events
-
-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 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
-
-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.
-
-- **focus()**: This event triggers whenever the component instance receives focus. It's important to note that this event can fire multiple times during the component's lifecycle, depending on user interactions.
-
-- **unfocus()**: The `unfocus` event fires whenever the component instance loses focus. Similar to the `focus` event, it can occur multiple times during the component's lifecycle.
-
-- **destroy()**: The `destroy` event fires when the component is being destroyed and removed. This event provides an opportunity to perform any custom cleanup operations before the component is removed.
-
-```js
-export default Blits.Component('MyComponent', {
-  // ...
-  hooks: {
-    init() {
-      // Logic to execute on init event
-    },
-    ready() {
-      // Logic to execute on ready event
-    },
-    focus() {
-      // Logic to execute on focus event
-    },
-    unfocus() {
-      // Logic to execute on unfocus event
-    },
-    destroy() {
-      // Logic to execute on destroy event
-    },
-  },
-})
-```