@lightningjs/blits 1.30.1 → 1.30.2

package/docs/components/lifecycle_events.md

@@ -1,42 +1,42 @@
-# 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
-    },
-  },
-})
-```
+# 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
+    },
+  },
+})
+```

package/docs/components/methods.md

@@ -1,45 +1,45 @@
-# Methods
-
-Within a Blits component, you have quite some freedom where to put specific logic.
-
-Template related logic can be either 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 to `internal` state and `props`, there is no need to prefix with `methods`, for easy access.
-
-```js
-export default Blits.Component('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)
-    },
-  }
-})
-```
+# Methods
+
+Within a Blits component, you have quite some freedom where to put specific logic.
+
+Template related logic can be either 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 to `internal` state and `props`, there is no need to prefix with `methods`, for easy access.
+
+```js
+export default Blits.Component('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

@@ -1,56 +1,56 @@
-# 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 also 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
-    }
-  ]
-})
-```
+# 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 also 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
+    }
+  ]
+})
+```