@lightningjs/blits 0.3.12 → 0.3.13

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v0.3.13
+
+_18 oct 2023_
+
+- Added support for `borderTop`, `borderBottom`, `borderLeft`, `borderRight` and `grayScale` effects
+- Fixed `@loaded` and `@error` events on `<Text/>` componenent only firing once (and not for each change)
+- Fixed loading of web canvas2d fonts
+- Firex error when using `this`-reference in component state
+
 ## v0.3.12
 
 _17 oct 2023_

package/boilerplate/package.json

@@ -31,6 +31,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^0.3.12"
+    "@lightningjs/blits": "^0.3.13"
   }
 }

package/docs/README.md

@@ -1,8 +1,8 @@
 # Blits - Lightning 3 App Development Framework
 
-With Blits (formaly know as Bolt), the App Development Framework for Lightning 3, it becomes a breeze to build great Lightning 3 applications.
+With Blits (formerly know as Bolt), the App Development Framework for Lightning 3, it becomes a breeze to build great Lightning 3 applications.
 
-Blits is built on top of the Lightning 3 Rendererer and aims to provide a **great developer experience**, making it fun and easy to build your apps!
+Blits is built on top of the Lightning 3 Renderer and aims to provide a **great developer experience**, making it fun and easy to build your apps!
 
 Built from the ground up by the LightningJS team, we're offering a **Complete App framework**, full of features to speed up development, while keeping it **lightweight** with a focus on **performance**.
 

package/docs/element_attributes.md

@@ -13,8 +13,8 @@ In order to position and set the dimensions of an Element, the following attribu
   - `x` - the x position of the Element in pixels, relative to it's parent - allows negative values and decimals
   - `y` - the y position of the Element in pixels, relative to it's parent - allows negative values and decimals
   - `z` - the z index of the element (optionally `zIndex` can be used as an alias)
-  - `w` - the width of the element in pixels (optionaly `width` can be used as an alias)
-  - `h` - the height of the element in pixels (optionaly `height` can be used as an alias)
+  - `w` - the width of the element in pixels (optionally `width` can be used as an alias)
+  - `h` - the height of the element in pixels (optionally `height` can be used as an alias)
 
 All positioning and dimension related attributes, when not specified, default to `0`.
 
@@ -111,7 +111,7 @@ Similar to rotation, scale is also applied recursively to children down the tree
 
 ### Mounting point
 
-For advanced positioning the `mount` attribute can come in handy. By default when you set the `x` and `y` position of an Element, the _top-left_ corner will be set to that position. But in some cases you may want to align the position starting at a different corner, or even any arbitray point in between.
+For advanced positioning the `mount` attribute can come in handy. By default when you set the `x` and `y` position of an Element, the _top-left_ corner will be set to that position. But in some cases you may want to align the position starting at a different corner, or even any arbitrary point in between.
 
 The `mount` attribute accepts an _object literal_ that allows you to precisely control the mount position on the _x-axis_ and the mount position on the _y-axis_. The default value is `{x: 0, y: 0}`, which refers to the _top-left_ corner.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {
@@ -41,6 +41,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
+    "@lightningjs/renderer": "^0.3.6",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
   }
 }

package/src/components/Text.js

@@ -22,7 +22,7 @@ export default () =>
     template: `
       <Element
         __textnode="true"
-        :text="$text"
+        :text="$content"
         fontFamily="$font"
         :fontSize="$size"
         :color="$color"
@@ -61,9 +61,6 @@ export default () =>
       '@error',
     ],
     computed: {
-      text() {
-        return this.slotcontent || this.content || ''
-      },
       _contain() {
         return this.contain || (this.w && this.h ? 'both' : this.w ? 'width' : 'none')
       },

package/src/element.js

@@ -189,14 +189,14 @@ const Element = {
 
     if (props['@loaded']) {
       const event = props.__textnode ? 'textLoaded' : 'txLoaded'
-      this.node.once(event, (el, { width: w, height: h }) => {
+      this.node.on(event, (el, { width: w, height: h }) => {
         props['@loaded']({ w, h }, this)
       })
     }
 
     if (props['@error']) {
       const event = props.__textnode ? 'textFailed' : 'txFailed'
-      this.node.once(event, (el, error) => {
+      this.node.on(event, (el, error) => {
         props['@error'](error, this)
       })
     }

package/src/fontLoader.js

@@ -10,7 +10,7 @@ export default class FontLoader extends CoreExtension {
           new SdfTrFontFace(font.family, {}, font.type, stage, font.png, font.json)
         )
       } else if (font.type === 'web') {
-        new WebTrFontFace(font.family, {}, font.file)
+        stage.fontManager.addFontFace(new WebTrFontFace(font.family, {}, font.file))
       }
     })
   }

package/src/lib/codegenerator/generator.js

@@ -286,7 +286,16 @@ const interpolate = (val, component = 'component.') => {
 const cast = (val = '', key = false, component = 'component.') => {
   let castedValue
 
-  if (key !== 'color' && !isNaN(parseFloat(val))) {
+  // inline content
+  if (key === 'content') {
+    if (val.startsWith('$')) {
+      castedValue = `${component}${val.replace('$', '')}`
+    } else {
+      castedValue = `'${parseInlineContent(val, component)}'`
+    }
+  }
+  // numeric
+  else if (key !== 'color' && !isNaN(parseFloat(val))) {
     castedValue = parseFloat(val)
     if (val.endsWith('%')) {
       const map = {
@@ -329,3 +338,15 @@ const cast = (val = '', key = false, component = 'component.') => {
 }
 
 const isReactiveKey = (str) => str.startsWith(':')
+
+const parseInlineContent = (val, component) => {
+  const dynamicParts = /\{\{\s*(\$\S+)\s*\}\}/g
+  const matches = [...val.matchAll(dynamicParts)]
+
+  if (matches.length) {
+    for (let [match, arg] of matches) {
+      val = val.replace(match, `${arg.replace('$', `'+${component}`)}+'`)
+    }
+  }
+  return val
+}

package/src/lib/setup/base.js

@@ -31,6 +31,10 @@ const shaders = {
   rounded: 'radius',
   border: 'border',
   borderTop: 'borderTop',
+  borderBottom: 'borderBottom',
+  borderLeft: 'borderLeft',
+  borderRight: 'borderRight',
+  grayScale: 'grayscale',
   glitch: 'glitch',
 }
 

package/src/lib/setup/state.js

@@ -20,7 +20,7 @@ import { Log } from '../log.js'
 export default (component, state) => {
   component.___stateKeys = []
 
-  state = state.apply(component)
+  state = state.apply(component.prototype)
   Object.keys(state).forEach((key) => {
     if (component.___propKeys && component.___propKeys.indexOf(key) > -1) {
       Log.error(`State ${key} already exists as a prop`)