@lightningjs/blits 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## v1.4.2
+
+_24 sept 2024_
+
+- Fixed timing issue with calculation of percentages
+- Improved check to see if object is a Blits component, so it's more robust in case of code minification
+
+## v1.4.1
+
+_18 sept 2024_
+
+- Fixed support for inspector, compatible with renderer 2.x changes
+
 ## v1.4.0
 
 _16 sept 2024_

package/docs/built-in/directives.md

@@ -24,7 +24,7 @@ It is very useful in combination with API driven Apps, where the type of Compone
 The `is`-component should always be used together with the built-in `Component`-tag.
 
 ```js
-export default Blits('DynamicComponents', {
+export default Blits.Component('DynamicComponents', {
   template: `
     <Element>
       <Component is="$firstComponent" />

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

@@ -14,7 +14,7 @@ The for loop take an `Array` of data, loops over it and for each Array-item an E
 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('ForLoop', {
+export default Blits.Component('ForLoop', {
   template: `
     <Element>
       <Element :for="item in $items" w="100" h="100" color="lime" />
@@ -40,7 +40,7 @@ All we need to do is declare the `index` in the `for`-directive and subsequently
 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('ForLoop', {
+export default Blits.Component('ForLoop', {
   template: `
     <Element>
       <Element :for="(item, index) in $items" w="100" h="100" color="lime" :x="$index * 150" />
@@ -64,7 +64,7 @@ When iterating over an Array in the for loop, you can reference the current Arra
 Consider the example below, that loops over an array of _Objects_, and _also_ references the `alpha` state variable.
 
 ```js
-export default Blits('ForLoop', {
+export default Blits.Component('ForLoop', {
   template: `
     <Element>
       <Element
@@ -113,7 +113,7 @@ It's important that the `key`-attribute is _unique_ for each Array item. Also be
 
 
 ```js
-export default Blits('ForLoop', {
+export default Blits.Component('ForLoop', {
   template: `
     <Element>
       <Element

package/docs/components/methods.md

@@ -13,7 +13,7 @@ You can reference your Component's methods in the template by using a `$`-sign (
 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('Carousel', {
+export default Blits.Component('Carousel', {
   template: `
     <Element>
       <!-- .... -->

package/docs/essentials/components.md

@@ -35,7 +35,7 @@ A basic Blits component will then look something like this:
 
 ```js
 // src/components/Loader.js
-export default Blits('Loader', {
+export default Blits.Component('Loader', {
   template: `
     <Element x="880" y="500" :show="$active">
       <Element x="$offset" w="40" h="40" color="#94a3b8" :alpha="$alpha" />

package/docs/essentials/element_attributes.md

@@ -75,7 +75,7 @@ Again, you can use "normal" notation for the colors (like hexadecimal or rgba) a
 ```xml
 <Element w="200" h="200" color="{top: 'red', bottom: 'blue'}" />
 <Element w="200" h="200" color="{left: 'rgba(255,255,255,.5)', right: '#000'}" />
-<Element w="200" h="200" color="{left: '#aaa333', top: 'aqua', bottom: rgb(255,100,20)'}" />
+<Element w="200" h="200" color="{left: '#aaa333', top: 'aqua', 'bottom: rgb(255,100,20)'}" />
 <Element w="200" h="200" color="{bottom: 'black'}" />
 ```
 

package/docs/transitions_animations/transitions.md

@@ -6,7 +6,7 @@ been rather static so far.
 We did learn how to _reactively_ changes values and trigger rerenders based on that. So if you try the example below, you'll see that indeed our golden element changes position. But it just jumps from one place to another:
 
 ```js
-export default Blits('Gold', {
+export default Blits.Component('Gold', {
   template: `
     <Element color="gold" w="100" h="100" :x="$x" :y="$y" />
   `,
@@ -31,7 +31,7 @@ Using _transitions_ we really make our App come alive.
 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.
 
 ```js
-export default Blits('Gold', {
+export default Blits.Component('Gold', {
   template: `
     <Element color="gold" w="100" h="100" :x.transition="$x" :y.transition="$y" />
   `,
@@ -111,7 +111,7 @@ You can easily hook into these transition events by adding a `start` and `end` k
 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', {
+export default Blits.Component('Gold', {
   template: `
     <Element color="gold" w="100" h="100"
       :x.transition="{value: $x, start: $transitionBegin, end: $transitionEnd}"

package/package.json

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

package/src/component.js

@@ -260,6 +260,9 @@ const Component = (name = required('name'), config = required('config')) => {
   // during the code generation step
   factory.config = config
 
+  // To determine whether dynamic component is actual Blits component or not
+  factory[symbols.isComponent] = true
+
   return factory
 }
 

package/src/components/FPScounter.js

@@ -86,7 +86,10 @@ export default () =>
           if (!component4) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component4 = componentType
         }
 
@@ -149,7 +152,10 @@ export default () =>
           if (!component7) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component7 = componentType
         }
 
@@ -203,7 +209,10 @@ export default () =>
           if (!component9) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component9 = componentType
         }
 
@@ -257,7 +266,10 @@ export default () =>
           if (!component11) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component11 = componentType
         }
 
@@ -319,7 +331,10 @@ export default () =>
           if (!component14) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component14 = componentType
         }
 
@@ -382,7 +397,10 @@ export default () =>
           if (!component17) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component17 = componentType
         }
 
@@ -436,7 +454,10 @@ export default () =>
           if (!component19) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component19 = componentType
         }
 
@@ -490,7 +511,10 @@ export default () =>
           if (!component21) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component21 = componentType
         }
 
@@ -553,7 +577,10 @@ export default () =>
           if (!component24) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component24 = componentType
         }
 
@@ -616,7 +643,10 @@ export default () =>
           if (!component27) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component27 = componentType
         }
 
@@ -670,7 +700,10 @@ export default () =>
           if (!component29) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component29 = componentType
         }
 
@@ -724,7 +757,10 @@ export default () =>
           if (!component31) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component31 = componentType
         }
 
@@ -785,7 +821,10 @@ export default () =>
           if (!component34) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component34 = componentType
         }
 
@@ -848,7 +887,10 @@ export default () =>
           if (!component37) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component37 = componentType
         }
 
@@ -902,7 +944,10 @@ export default () =>
           if (!component39) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component39 = componentType
         }
 
@@ -956,7 +1001,10 @@ export default () =>
           if (!component41) {
             throw new Error('Component "Sprite" not found')
           }
-        } else if (typeof componentType === 'function' && componentType.name === 'factory') {
+        } else if (
+          typeof componentType === 'function' &&
+          componentType[Symbol.for('isComponent')] === true
+        ) {
           component41 = componentType
         }
 

package/src/engines/L3/element.js

@@ -39,9 +39,9 @@ const parsePercentage = function (v, base) {
     return v
   } else if (v.indexOf('%') === v.length - 1) {
     return (
-      this.element.parent &&
-      this.element.parent[base] &&
-      this.element.parent[base] * (parseFloat(v) / 100)
+      (this.element.config.parent &&
+        (this.element.config.parent.node[base] || 0) * (parseFloat(v) / 100)) ||
+      0
     )
   }
   return v

package/src/engines/L3/launch.js

@@ -18,6 +18,7 @@
 import { RendererMain } from '@lightningjs/renderer'
 import { WebGlCoreRenderer, SdfTextRenderer } from '@lightningjs/renderer/webgl'
 import { CanvasCoreRenderer, CanvasTextRenderer } from '@lightningjs/renderer/canvas'
+import { Inspector } from '@lightningjs/renderer/inspector'
 
 import { Log } from '../../lib/log.js'
 import { SCREEN_RESOLUTIONS } from '../../constants.js'
@@ -50,7 +51,7 @@ export default (App, target, settings = {}) => {
           ? settings.webWorkersLimit
           : window.navigator.hardwareConcurrency || 2,
       clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
-      enableInspector: settings.inspector || false,
+      inspector: settings.inspector === true ? Inspector : undefined,
       boundsMargin: settings.viewportMargin || 0,
       // gpu memory limit, converted from mb to bytes - defaults to 200mb
       txMemByteThreshold:

package/src/lib/codegenerator/generator.js

@@ -234,7 +234,7 @@ const generateComponentCode = function (
       if(!component${counter}) {
         throw new Error('Component "${templateObject[Symbol.for('componentType')]}" not found')
       }
-    } else if(typeof componentType === 'function' && componentType.name === 'factory') {
+    } else if(typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) {
       component${counter} = componentType
     }
 

package/src/lib/symbols.js

@@ -44,4 +44,6 @@ export default {
   slots: Symbol.for('slots'),
   // Symbol 'componentType' utilized within generated code
   componentType: Symbol.for('componentType'),
+  // Symbol 'isComponent' utilized within generated code
+  isComponent: Symbol.for('isComponent'),
 }