@lightningjs/blits 1.2.0 → 1.3.0

package/docs/plugins/language.md

@@ -1,12 +1,10 @@
-# Blits - Lightning 3 App Development Framework
-
-## Language plugin
+# Language plugin
 
 Blits comes with a built-in Language plugin, that can be used to add internationalization (i18n) to your App.
 
 The Blits Language plugin is a simple and lightweight implementation, closely modeled after the tried and tested Language plugin in the Lightning-SDK (for Lightning 2). It is designed to provide a flexible and easy way of translating texts to multiple languages, in a performant way.
 
-### Registering the plugin
+## Registering the plugin
 
 While the Language plugin is provided in the core Blits package, it's an _optional_ plugin that needs to be registered before you're able to use it. As such the Language plugin is _tree-shakable_, i.e. for Apps that don't have a need for translation functionality, the Language plugin will not be part of the final App bundle.
 
@@ -43,7 +41,7 @@ The Language plugin accepts an optional configuration object with 2 keys:
 
 After registration of the Language plugin, it will be availabe in each Blits Component as `this.$language`.
 
-### Translations file
+## Translations file
 
 The most common way of defining a set of translations, is to use a dedicated JSON file, modeled after
 the following format:
@@ -80,7 +78,7 @@ When the JSON file is specified in the Plugin registration method, the language
 
 In case you want to load the file with translations manually, you can use the `this.$language.load()`-method anywhere in a Component and pass in the path to the JSON file as the first argument.
 
-### Defining translations manualy
+## Defining translations manualy
 
 As an alternative to a JSON file with translations, you can also define translations directly via an object, using the `translations()`-method.
 
@@ -106,7 +104,7 @@ Blits.Component('MyComponent', {
 })
 ```
 
-### Setting the language
+## Setting the language
 
 In order to set (or change) the current language, the `this.$language.set()`-method can be used, passing in the new language code (matching one of the languages defined in the translations).
 
@@ -121,11 +119,11 @@ Blits.Component('MyComponent', {
 })
 ```
 
-### Getting the current language
+## Getting the current language
 
 The current language can be retrieved via the `this.$language.get()` method. It will return the currently set language code.
 
-### Translating
+## Translating
 
 The most important functionality in the Language plugin is translating. The Language plugin exposes a `translate()` method that takes as string to translate as it's first argument. It will return the translated value in the currently set language. If either the language or the string to translate can't be found, it will return the inputed string.
 
@@ -153,7 +151,7 @@ to refer to the Component scope, as with any other state variable or computed pr
 The second `$`-sign is needed, since the Language plugin itself is prefixed with a dollar sign on the Component scope as well (i.e `this.$language`).
 
 
-#### Dynamic replacements
+### Dynamic replacements
 
 The `tranlate()`-method also supports dynamic replacements. This allows you to specify variables inside your translation string, and replace them with dynamic values passed into the `translate()`-method.
 

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

@@ -1,10 +1,8 @@
-# Blits - Lightning 3 App Development Framework
-
-## Text-to-Speech / Announcer
+# 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 who are visually impaired.
 
-### Integrated with the router
+## Integrated with the router
 
 The Announcer in Blits is directly integrated with the router functionality. This means that through simple configuration, a descriptive message can be announced, when navigating from page to page, without the need for adding extra custom code.
 

package/docs/transitions_animations/transitions.md

@@ -1,6 +1,4 @@
-# Blits - Lightning 3 App Development Framework
-
-## Transitions
+# Transitions
 
 So far we have explored how to create components and draw elements on the screen. But everything has
 been rather static so far.
@@ -28,7 +26,7 @@ export default Blits('Gold', {
 
 Using _transitions_ we really make our App come alive.
 
-### Applying a transition
+## Applying a transition
 
 Blits offers an easy and intuitive way to apply transitions. All you need to do is add the `.transition` modifier to a reactive attribute, and now whenever you change the value referenced in the attribute, it will automatically _smooth_ into the new value.
 
@@ -55,7 +53,7 @@ If we try out the modified example above, you'll notice how much difference addi
 
 When the `.transition`-modifier is added to a reactive attribute, a default `ease-in` transition with a duration of `300ms` is applied
 
-### Customizing transitions
+## Customizing transitions
 
 While the default transition will look pretty good out of the box and is great for quickly improving the look of your App, you may want to customize specific transitions.
 
@@ -86,7 +84,7 @@ Besides a reference to the `value`, you can also use dynamic values for the othe
 </Element>
 ```
 
-#### Available easing functions
+### Available easing functions
 
 - `ease-in`
 - `ease-out`
@@ -104,7 +102,7 @@ Besides a reference to the `value`, you can also use dynamic values for the othe
 - `ease-out-back`
 - `ease-in-out-back`
 
-### Listening to transition events
+## Listening to transition events
 
 Sometimes you may want to perform an action when a transition ends or when it starts.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/src/component/base/methods.js

@@ -95,9 +95,8 @@ export default {
   },
   shader: {
     value: function (type, args) {
-      const target = type
       return {
-        type: target,
+        type: type,
         props: args,
       }
       // const shaders = renderer.driver.stage.shManager.getRegisteredEffects()

package/src/component/setup/state.js

@@ -37,18 +37,14 @@ export default (component, state = () => {}) => {
       Log.error(`State ${key} already exists as a method`)
     }
     component[symbols.stateKeys].push(key)
-    try {
-      Object.defineProperty(component, key, {
-        get() {
-          return this[symbols.state] && key in this[symbols.state] && this[symbols.state][key]
-        },
-        set(v) {
-          if (this[symbols.state]) this[symbols.state][key] = v
-        },
-        // enumerable: true,
-      })
-    } catch (e) {
-      Log.error(e)
-    }
+    Object.defineProperty(component, key, {
+      get() {
+        return this[symbols.state][key]
+      },
+      set(v) {
+        this[symbols.state][key] = v
+      },
+      // enumerable: true,
+    })
   })
 }

package/src/component.js

@@ -160,16 +160,11 @@ const Component = (name = required('name'), config = required('config')) => {
 
     // setup (and execute) all the generated side effects based on the
     // reactive bindings define in the template
-    for (let i = 0; i < config.code.effects.length; i++) {
+    const effects = config.code.effects
+    for (let i = 0; i < effects.length; i++) {
+      // console.log(config.code.effects[i].toString())
       effect(() => {
-        config.code.effects[i].apply(stage, [
-          this,
-          this[symbols.children],
-          config,
-          globalComponents,
-          rootComponent,
-          effect,
-        ])
+        effects[i](this, this[symbols.children], config, globalComponents, rootComponent, effect)
       })
     }
 

package/src/components/FPScounter.js

@@ -60,9 +60,11 @@ export default () =>
         elementConfig3['map'] = component.sprite
         elementConfig3['frame'] = 'fps'
 
+        const skip3 = []
         if (typeof cmp3 !== 'undefined') {
           for (let key in cmp3.config.props) {
             delete elementConfig3[cmp3.config.props[key]]
+            skip3.push(cmp3.config.props[key])
           }
         }
 
@@ -120,9 +122,11 @@ export default () =>
         elementConfig6['map'] = component.sprite
         elementConfig6['frame'] = component.fps[0]
 
+        const skip6 = []
         if (typeof cmp6 !== 'undefined') {
           for (let key in cmp6.config.props) {
             delete elementConfig6[cmp6.config.props[key]]
+            skip6.push(cmp6.config.props[key])
           }
         }
 
@@ -172,9 +176,11 @@ export default () =>
         elementConfig8['map'] = component.sprite
         elementConfig8['frame'] = component.fps[1]
 
+        const skip8 = []
         if (typeof cmp8 !== 'undefined') {
           for (let key in cmp8.config.props) {
             delete elementConfig8[cmp8.config.props[key]]
+            skip8.push(cmp8.config.props[key])
           }
         }
 
@@ -224,9 +230,11 @@ export default () =>
         elementConfig10['map'] = component.sprite
         elementConfig10['frame'] = component.fps[2]
 
+        const skip10 = []
         if (typeof cmp10 !== 'undefined') {
           for (let key in cmp10.config.props) {
             delete elementConfig10[cmp10.config.props[key]]
+            skip10.push(cmp10.config.props[key])
           }
         }
 
@@ -284,9 +292,11 @@ export default () =>
         elementConfig13['map'] = component.sprite
         elementConfig13['frame'] = 'avg'
 
+        const skip13 = []
         if (typeof cmp13 !== 'undefined') {
           for (let key in cmp13.config.props) {
             delete elementConfig13[cmp13.config.props[key]]
+            skip13.push(cmp13.config.props[key])
           }
         }
 
@@ -345,9 +355,11 @@ export default () =>
         elementConfig16['map'] = component.sprite
         elementConfig16['frame'] = component.avgFps[0]
 
+        const skip16 = []
         if (typeof cmp16 !== 'undefined') {
           for (let key in cmp16.config.props) {
             delete elementConfig16[cmp16.config.props[key]]
+            skip16.push(cmp16.config.props[key])
           }
         }
 
@@ -397,9 +409,11 @@ export default () =>
         elementConfig18['map'] = component.sprite
         elementConfig18['frame'] = component.avgFps[1]
 
+        const skip18 = []
         if (typeof cmp18 !== 'undefined') {
           for (let key in cmp18.config.props) {
             delete elementConfig18[cmp18.config.props[key]]
+            skip18.push(cmp18.config.props[key])
           }
         }
 
@@ -449,9 +463,11 @@ export default () =>
         elementConfig20['map'] = component.sprite
         elementConfig20['frame'] = component.avgFps[2]
 
+        const skip20 = []
         if (typeof cmp20 !== 'undefined') {
           for (let key in cmp20.config.props) {
             delete elementConfig20[cmp20.config.props[key]]
+            skip20.push(cmp20.config.props[key])
           }
         }
 
@@ -510,9 +526,11 @@ export default () =>
         elementConfig23['map'] = component.sprite
         elementConfig23['frame'] = 'min'
 
+        const skip23 = []
         if (typeof cmp23 !== 'undefined') {
           for (let key in cmp23.config.props) {
             delete elementConfig23[cmp23.config.props[key]]
+            skip23.push(cmp23.config.props[key])
           }
         }
 
@@ -571,9 +589,11 @@ export default () =>
         elementConfig26['map'] = component.sprite
         elementConfig26['frame'] = component.minFps[0]
 
+        const skip26 = []
         if (typeof cmp26 !== 'undefined') {
           for (let key in cmp26.config.props) {
             delete elementConfig26[cmp26.config.props[key]]
+            skip26.push(cmp26.config.props[key])
           }
         }
 
@@ -623,9 +643,11 @@ export default () =>
         elementConfig28['map'] = component.sprite
         elementConfig28['frame'] = component.minFps[1]
 
+        const skip28 = []
         if (typeof cmp28 !== 'undefined') {
           for (let key in cmp28.config.props) {
             delete elementConfig28[cmp28.config.props[key]]
+            skip28.push(cmp28.config.props[key])
           }
         }
 
@@ -675,9 +697,11 @@ export default () =>
         elementConfig30['map'] = component.sprite
         elementConfig30['frame'] = component.minFps[2]
 
+        const skip30 = []
         if (typeof cmp30 !== 'undefined') {
           for (let key in cmp30.config.props) {
             delete elementConfig30[cmp30.config.props[key]]
+            skip30.push(cmp30.config.props[key])
           }
         }
 
@@ -735,9 +759,11 @@ export default () =>
         elementConfig33['map'] = component.sprite
         elementConfig33['frame'] = 'max'
 
+        const skip33 = []
         if (typeof cmp33 !== 'undefined') {
           for (let key in cmp33.config.props) {
             delete elementConfig33[cmp33.config.props[key]]
+            skip33.push(cmp33.config.props[key])
           }
         }
 
@@ -795,9 +821,11 @@ export default () =>
         elementConfig36['map'] = component.sprite
         elementConfig36['frame'] = component.maxFps[0]
 
+        const skip36 = []
         if (typeof cmp36 !== 'undefined') {
           for (let key in cmp36.config.props) {
             delete elementConfig36[cmp36.config.props[key]]
+            skip36.push(cmp36.config.props[key])
           }
         }
 
@@ -847,9 +875,11 @@ export default () =>
         elementConfig38['map'] = component.sprite
         elementConfig38['frame'] = component.maxFps[1]
 
+        const skip38 = []
         if (typeof cmp38 !== 'undefined') {
           for (let key in cmp38.config.props) {
             delete elementConfig38[cmp38.config.props[key]]
+            skip38.push(cmp38.config.props[key])
           }
         }
 
@@ -899,9 +929,11 @@ export default () =>
         elementConfig40['map'] = component.sprite
         elementConfig40['frame'] = component.maxFps[2]
 
+        const skip40 = []
         if (typeof cmp40 !== 'undefined') {
           for (let key in cmp40.config.props) {
             delete elementConfig40[cmp40.config.props[key]]
+            skip40.push(cmp40.config.props[key])
           }
         }
 
@@ -941,73 +973,85 @@ export default () =>
       },
       effects: [
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[6].set('frame', component.fps[0])
+          if (typeof skip6 === 'undefined' || skip6.indexOf('frame') === -1)
+            elms[6].set('frame', component.fps[0])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[7][Symbol.for('props')]['frame'] = component.fps[0]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[8].set('frame', component.fps[1])
+          if (typeof skip8 === 'undefined' || skip8.indexOf('frame') === -1)
+            elms[8].set('frame', component.fps[1])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[9][Symbol.for('props')]['frame'] = component.fps[1]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[10].set('frame', component.fps[2])
+          if (typeof skip10 === 'undefined' || skip10.indexOf('frame') === -1)
+            elms[10].set('frame', component.fps[2])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[11][Symbol.for('props')]['frame'] = component.fps[2]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[16].set('frame', component.avgFps[0])
+          if (typeof skip16 === 'undefined' || skip16.indexOf('frame') === -1)
+            elms[16].set('frame', component.avgFps[0])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[17][Symbol.for('props')]['frame'] = component.avgFps[0]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[18].set('frame', component.avgFps[1])
+          if (typeof skip18 === 'undefined' || skip18.indexOf('frame') === -1)
+            elms[18].set('frame', component.avgFps[1])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[19][Symbol.for('props')]['frame'] = component.avgFps[1]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[20].set('frame', component.avgFps[2])
+          if (typeof skip20 === 'undefined' || skip20.indexOf('frame') === -1)
+            elms[20].set('frame', component.avgFps[2])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[21][Symbol.for('props')]['frame'] = component.avgFps[2]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[26].set('frame', component.minFps[0])
+          if (typeof skip26 === 'undefined' || skip26.indexOf('frame') === -1)
+            elms[26].set('frame', component.minFps[0])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[27][Symbol.for('props')]['frame'] = component.minFps[0]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[28].set('frame', component.minFps[1])
+          if (typeof skip28 === 'undefined' || skip28.indexOf('frame') === -1)
+            elms[28].set('frame', component.minFps[1])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[29][Symbol.for('props')]['frame'] = component.minFps[1]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[30].set('frame', component.minFps[2])
+          if (typeof skip30 === 'undefined' || skip30.indexOf('frame') === -1)
+            elms[30].set('frame', component.minFps[2])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[31][Symbol.for('props')]['frame'] = component.minFps[2]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[36].set('frame', component.maxFps[0])
+          if (typeof skip36 === 'undefined' || skip36.indexOf('frame') === -1)
+            elms[36].set('frame', component.maxFps[0])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[37][Symbol.for('props')]['frame'] = component.maxFps[0]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[38].set('frame', component.maxFps[1])
+          if (typeof skip38 === 'undefined' || skip38.indexOf('frame') === -1)
+            elms[38].set('frame', component.maxFps[1])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[39][Symbol.for('props')]['frame'] = component.maxFps[1]
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
-          elms[40].set('frame', component.maxFps[2])
+          if (typeof skip40 === 'undefined' || skip40.indexOf('frame') === -1)
+            elms[40].set('frame', component.maxFps[2])
         },
         function anonymous(component, elms, context, components, rootComponent, effect) {
           elms[41][Symbol.for('props')]['frame'] = component.maxFps[2]