@lightningjs/blits 0.9.6 → 0.9.8

package/docs/getting_started/file_structure.md

@@ -8,23 +8,23 @@ Let's review the basic file structure, and take a closer look at the important o
 
 ### package.json
 
-In the root of your newly created app you will obviously find a `package.json` with all the necessary (dev) dependencies.
+In the root of your newly created app, you will obviously find a `package.json` with all the necessary (dev) dependencies.
 
 In order to build a Blits based Lightning 3 app, all you need is `@lightningjs/blits` as a dependency. Blits will take care of hooking up the Lightning 3 renderer for you behind the scenes.
 
-Feel free to install and import any custom library that your App may need. But always be mindful of the size and impact an external dependency may have - especially when developing for low powered devices (as if often the case with Lightning apps).
+Feel free to install and import any custom library that your App may need. But always be mindful of the size and impact an external dependency may have - especially when developing for low powered devices (as is often the case with Lightning apps).
 
 ### index.html
 
-You will also find an `index.html` in the root of your project. This is where the browser will be pointed to in order to launch your Blits App.
+You will also find an `index.html` at the root of your project. This is where the browser will be pointed to, in order to launch your Blits App.
 
-If you inspect the source you will see some minimal html. The essential parts of the html are the `<div>` where the canvas will be injected into, and the `<script>`-tag that points to the `index.js` of the App.
+If you inspect the source you will see some minimal HTML. The essential parts of the HTML are the `<div>` where the canvas will be injected into, and the `<script>`-tag that points to the `index.js` of the App.
 
 ### public
 
-There is also a `public` folder in your project. This folder is used for storing the public assets, such as App images and fonts.
+There is also a `public` folder in your project. This folder is used for storing public assets, such as App images and fonts.
 
-During development your assets are loaded directly from this folder. And if you run a production build, the entire `public` folder is copied over to the distributable version.
+During development, your assets are loaded directly from this folder. And if you run a production build, the entire `public` folder is copied over to the distributable version.
 
 ### src
 
@@ -37,7 +37,7 @@ The `src`-folder is where all your custom App code lives.
 The `Blits.Launch()`-method accepts 3 parameters:
 
 1) `app` - the root application component
-2) `target` - the html target to append the canvas to. This can either by an `id` of an html element in `index.html`, or you can pass a reference the html element itself
+2) `target` - the HTML target to append the canvas to. This can either be an `id` of an HTML element in `index.html`, or you can pass a reference to HTML element itself
 3) `settings` - an `object` with settings
 
 #### App.js
@@ -46,16 +46,15 @@ The `Blits.Launch()`-method accepts 3 parameters:
 
 ### components and pages folder
 
-The rest of you App can be built out using components. You are free to organize your components as you wish, but we recommend
-to use a separate file for each component, and place them in the `src/components`-folder.
+The rest of your App can be built out using components. You are free to organize your components as you wish, but we recommend using a separate file for each component and placing them in the `src/components`-folder.
 
 The convention is to start the component file name with a capital letter, matching the name of the component (e.g. `src/components/Loader.js` or `src/components/MenuItem.js`).
 
 Feel free to further organize and possibly nest your Component files to your own preferences.
 
-Pages in your App are technically just Blits components as well. But to keep thing clear, we often place them in a separate `pages`-folder alongside the `components`-folder (e.g. `src/pages/Home.js` and `src/pages/Details.js`)
+Pages in your App are technically just Blits components as well. But to keep things clear, we often place them in a separate `pages`-folder alongside the `components`-folder (e.g. `src/pages/Home.js` and `src/pages/Details.js`)
 
 #### Custom code
 
-If your App needs libraries for specific (business) logic that can be shared accross components (such as API calls) you can place them anywhere in your `src` folder. For example in a folder named `src/lib` or `src/api`.
+If your App needs libraries for specific (business) logic that can be shared across components (such as API calls) you can place them anywhere in your `src` folder. For example in a folder named `src/lib` or `src/api`.
 

package/docs/getting_started/intro.md

@@ -10,11 +10,11 @@ The Blits framework uses a **readable** XML-style template syntax and comes with
 
 ## Why Blits?
 
-You may be wondering where the name Blits comes from?
+You may be wondering where the name Blits comes from.
 
 Firstly, it's short, memorable and just has a nice ring to it.
 
-"Blits" is a Dutch word (a significant portion of the Lightning Open Source teams is based in the Netherlands). It means _flashy_ and it's often used to for things that are _great_ or _cool_.
+"Blits" is a Dutch word (a significant portion of the Lightning Open Source teams is based in the Netherlands). It means _flashy_ and it's often used for things that are _great_ or _cool_.
 
-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 🙂
+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 🙂
 

package/docs/plugins/text-to-speech-announcer.md

@@ -2,7 +2,7 @@
 
 ## Text-to-Speech / Announcer
 
-Blits comes with a built-in Text-to-Speech / Announcer functionality, to easily make your App more accessible. This is something that's often overlooked when developing an App, but having speech assistance integrated into your App is a huge deal for those users that are visually impaired.
+Blits comes with a built-in Text-to-Speech / Announcer functionality, to easily make your App more accessible. This is something that's often overlooked when developing an App, but having speech assistance integrated into your App is a huge deal for those users who are visually impaired.
 
 ### Integrated with the router
 
@@ -24,7 +24,7 @@ const routes = [
 
 ## Custom announcement messages
 
-Furthermore it's possible to speak out custom messages anywhere in your App logic, for example when a component receives focus, as a reaction to user input, or to announce error messages when an remote API call
+Furthermore, it's possible to speak out custom messages anywhere in your App logic, for example when a component receives focus, as a reaction to user input, or to announce error messages when a remote API call
 fails.
 
 Each component in Blits has a `this.$announcer.speak()` available, which accepts `string` of a message to be announced.

package/docs/sidebar.json

@@ -93,6 +93,10 @@
       {
         "text": "Directives",
         "link": "/built-in/directives"
+      },
+      {
+        "text": "For loop",
+        "link": "/built-in/for-loop"
       }
     ]
   },

package/docs/transitions_animations/transitions.md

@@ -35,7 +35,7 @@ Blits offers an easy and intuitive way to apply transitions. All you need to do
 ```js
 export default Blits('Gold', {
   template: `
-    <Element color="gold" w="100" h="100" :x.transiton="$x" :y.transition=:"$y" />
+    <Element color="gold" w="100" h="100" :x.transition="$x" :y.transition=:"$y" />
   `,
   state() {
     return {
@@ -51,7 +51,7 @@ export default Blits('Gold', {
   },
 ```
 
-If we try out the modified example above, you'll notice how difference adding a simple transition makes.
+If we try out the modified example above, you'll notice how much difference adding a simple transition makes.
 
 When the `.transition`-modifier is added to a reactive attribute, a default `ease-in` transition with a duration of `300ms` is applied
 
@@ -61,19 +61,19 @@ While the default transition will look pretty good out of the box and is great f
 
 Blits gives you full control over your transitions, with a simple to use format, right inside your template.
 
-Instead of referencing your component's state variable directly, you can also supply an inlien `object literal` in the attribute with a `.transition`-modifier. This will allow you to pass a number of options to change the way the transition will work.
+Instead of referencing your component's state variable directly, you can also supply an inline `object literal`` in the attribute with a `.transition`-modifier. This will allow you to pass a number of options to change the way the transition will work.
 
 The transition object must have a `value` key, which references the state variable (or prop or computed property) that triggers the transition.
 
-Further more you can specify:
+Furthermore, you can specify:
 
 - `duration` - the duration of the transition in `ms`
 - `delay` - the time in `ms` after which the transition should initiate
-- `easing` - the easing function of the transition. Can be one of the defaults easing options listed below, or a custom `cubic-bezier` definitions (i.e. `cubic-bezier(0,1.35,.99,-0.07)`).
+- `easing` - the easing function of the transition. Can be one of the default easing options listed below, or a custom `cubic-bezier` definition (i.e. `cubic-bezier(0,1.35,.99,-0.07)`).
 
 ```xml
 <Element color="gold" w="100" h="100"
-  :x.transiton="{value: $x, duration: 300, easing: 'ease-in-back', delay: 400}"
+  :x.transition="{value: $x, duration: 300, easing: 'ease-in-back', delay: 400}"
   :y.transition=:"{value: $x, duration: 300, easing: 'cubic-bezier(1,-0.64,0.39,1.44)'}">
 </Element>
 ```
@@ -82,7 +82,7 @@ Besides a reference to the `value`, you can also use dynamic values for the othe
 
 ```xml
 <Element color="gold" w="100" h="100"
-  :x.transiton="{value: $x, duration: $dynamicDuration, delay: $dynamicDelay}">
+  :x.transition="{value: $x, duration: $dynamicDuration, delay: $dynamicDelay}">
 </Element>
 ```
 
@@ -108,15 +108,15 @@ Besides a reference to the `value`, you can also use dynamic values for the othe
 
 Sometimes you may want to perform an action when a transition ends or when it starts.
 
-You can easily hook into these transiti)on events by adding a `start` and `end` key to the transition object. Both value should be a function (or a reference to a `method` on your component).
+You can easily hook into these transition events by adding a `start` and `end` key to the transition object. Both values should be a function (or a reference to a `method` on your component).
 
-The `start` function will be called when the transition actually starts (after a possible specified delay) and the `end` function is called as soon as the transitions is finished.
+The `start` function will be called when the transition actually starts (after a possible specified delay) and the `end` function is called as soon as the transition is finished.
 
 ```js
 export default Blits('Gold', {
   template: `
     <Element color="gold" w="100" h="100"
-      :x.transiton="{value: $x, start: $transitionBegin, end: $transitionEnd}"
+      :x.transition="{value: $x, start: $transitionBegin, end: $transitionEnd}"
     />
   `,
   ///

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -45,7 +45,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.8.2",
+    "@lightningjs/renderer": "^0.8.3",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",

package/src/component.js

@@ -68,7 +68,7 @@ const Component = (name = required('name'), config = required('config')) => {
     if (config.methods) setupMethods(component, config.methods)
 
     // setup state
-    if (config.state) setupState(component, config.state)
+    setupState(component, config.state)
 
     // setup computed
     if (config.computed) setupComputed(component, config.computed)

package/src/components/Circle.js

@@ -19,35 +19,38 @@ import Component from '../component.js'
 
 export default () =>
   Component('Circle', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context
-) {
-const elms = []
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context) {
+        const elms = []
 
-    if(!elms[0]) {
-      elms[0] = this.element({parent: parent || 'root'}, component)
-    }
-    const elementConfig0 = {}
-  
+        if (!elms[0]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
 
-    if(!elms[0].nodeId) {
-      elms[0].populate(elementConfig0)
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context
-) {
-elms[0].set('color', component.color)
-},function anonymous(component,elms,context
-) {
-elms[0].set('w', component.size)
-},function anonymous(component,elms,context
-) {
-elms[0].set('h', component.size)
-},function anonymous(component,elms,context
-) {
-elms[0].set('effects', [component.shader('radius', {radius: component.radius})])
-}], context: {}},
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
+
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context) {
+          elms[0].set('color', component.color)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('w', component.size)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('h', component.size)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('effects', [component.shader('radius', { radius: component.radius })])
+        },
+      ],
+      context: {},
+    },
     props: [{ key: 'size', default: 40 }, 'color'],
     computed: {
       radius() {

package/src/components/Circle.orig.js

@@ -19,35 +19,9 @@ import Component from '../component.js'
 
 export default () =>
   Component('Circle', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context
-) {
-const elms = []
-
-    if(!elms[0]) {
-      elms[0] = this.element({parent: parent || 'root'}, component)
-    }
-    const elementConfig0 = {}
-  
-
-    if(!elms[0].nodeId) {
-      elms[0].populate(elementConfig0)
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context
-) {
-elms[0].set('color', component.color)
-},function anonymous(component,elms,context
-) {
-elms[0].set('w', component.size)
-},function anonymous(component,elms,context
-) {
-elms[0].set('h', component.size)
-},function anonymous(component,elms,context
-) {
-elms[0].set('effects', [component.shader('radius', {radius: component.radius})])
-}], context: {}},
+    template: `
+      <Element :color="$color" :w="$size" :h="$size" :effects="[$shader('radius', {radius: $radius})]"></Element>
+    `,
     props: [{ key: 'size', default: 40 }, 'color'],
     computed: {
       radius() {