		# 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
		@@ -4,0 +13,0 @@

docs/element_attributes.md

		@@ -16,4 +16,4 @@ # Blits - Lightning 3 App Development Framework
		- `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)

		@@ -115,3 +115,3 @@ All positioning and dimension related attributes, when not specified, default to `0`.

		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.

		@@ -118,0 +118,0 @@ 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.

docs/README.md

		# 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!

		@@ -7,0 +7,0 @@ 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.json

		{
		"name": "@lightningjs/blits",
		"version": "0.3.12",
		"version": "0.3.13",
		"description": "Blits: The Lightning 3 App Development Framework",
		@@ -44,4 +44,5 @@ "bin": "bin/index.cjs",
		"dependencies": {
		"@lightningjs/renderer": "^0.3.6",
		"@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
		}
		}

src/components/Text.js

		@@ -25,3 +25,3 @@ /*
		__textnode="true"
		:text="$text"
		:text="$content"
		fontFamily="$font"
		@@ -65,5 +65,2 @@ :fontSize="$size"
		computed: {
		text() {
		return this.slotcontent \|\| this.content \|\| ''
		},
		_contain() {
		@@ -70,0 +67,0 @@ return this.contain \|\| (this.w && this.h ? 'both' : this.w ? 'width' : 'none')

src/element.js

		@@ -192,3 +192,3 @@ /*
		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)
		@@ -200,3 +200,3 @@ })
		const event = props.__textnode ? 'textFailed' : 'txFailed'
		this.node.once(event, (el, error) => {
		this.node.on(event, (el, error) => {
		props['@error'](error, this)
		@@ -203,0 +203,0 @@ })

src/fontLoader.js

		@@ -13,3 +13,3 @@ import { CoreExtension, WebTrFontFace, SdfTrFontFace } from '@lightningjs/renderer/core'
		} else if (font.type === 'web') {
		new WebTrFontFace(font.family, {}, font.file)
		stage.fontManager.addFontFace(new WebTrFontFace(font.family, {}, font.file))
		}
		@@ -16,0 +16,0 @@ })

src/lib/codegenerator/generator.js

		@@ -289,3 +289,12 @@ /*

		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)
		@@ -333,1 +342,13 @@ if (val.endsWith('%')) {
		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
		}

src/lib/setup/base.js

src/lib/setup/state.js

		@@ -23,3 +23,3 @@ /*

		state = state.apply(component)
		state = state.apply(component.prototype)
		Object.keys(state).forEach((key) => {
		@@ -26,0 +26,0 @@ if (component.___propKeys && component.___propKeys.indexOf(key) > -1) {

@lightningjs/blits - npm Package Compare versions

New alerts