@lightningjs/blits 0.3.1 → 0.3.3

package/boilerplate/src/index.js

@@ -6,6 +6,12 @@ const settings = {
   w: 1920,
   h: 1080,
   multithreaded: false,
+  debugLevel: 1,
+  fonts: [
+    {family: 'lato', type: 'msdf', png: '/fonts/Lato-Regular.msdf.png', json: '/fonts/Lato-Regular.msdf.json'},
+    {family: 'raleway', type: 'msdf', png: '/fonts/Raleway-ExtraBold.msdf.png', json: '/fonts/Raleway-ExtraBold.msdf.json'},
+    {family: 'opensans', type: 'web', file: '/fonts/OpenSans-Medium.ttf'}
+  ],
 }
 
 Blits.Launch(App, 'app', settings)

package/docs/README.md

@@ -1,12 +1,20 @@
 # Blits - Lightning 3 App Development Framework
 
-With Blits, the App Development Framework for Lightning 3, it becomes a breeze to build great Lightning 3 applications.
+With Blits (formaly 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!
 
 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**.
 
-The Blits framework uses **readable** XML-style template syntax and comes with built-in reactivity.
+The Blits framework uses a **readable** XML-style template syntax and comes with built-in reactivity.
+
+## Why Blits?
+
+You may be wondering where the name Blits comes from?
+
+Firstly, it short, memorable and has a nice ring to it. The name is derived from the word "Blitz", which means Lightning in German. Additionally, "Blits" is a Dutch term (a significant portion of the Lightning Open Source teams is based in the Netherlands) used to showcase something great or simply refer to things that are 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 🙂
 
 ## Table of contents
 
@@ -19,12 +27,12 @@ The Blits framework uses **readable** XML-style template syntax and comes with b
 - [Handling user input](user_input.md)
 - [Computed properties](computed_properties.md)
 - [Watching for changes](watchers.md)
+- [Styling and positioning Elements](element_attributes.md)
 <!---
 - More complex logic in methods
-- Overview of default Element properties
 - Transitions
 - Implementing Custom components
 - Handling Text
-- Handling **Images**
+- Handling Images
 - Routing
 -->

package/docs/_sidebar.md

@@ -7,3 +7,5 @@
 - [Handling user input](user_input.md)
 - [Computed properties](computed_properties.md)
 - [Watching for changes](watchers.md)
+- [Styling and positioning Elements](element_attributes.md)
+

package/docs/element_attributes.md

@@ -0,0 +1,126 @@
+# Blits - Lightning 3 App Development Framework
+
+## Styling and positioning Elements
+
+The core building block of a Blits template is the Element tag. The Element tag corresponds directly to a node in the Lightning 3 Renderer. You can style and position Elements via _attributes_, much like you would do in HTML.
+
+Blits Elements have a specific set of attributes that can be set, loosely modeled after the properties of a Lightning 3 renderer node. In certain cases Blits provides more developer friendly names or accepts a wider range of values, and transparently takes care of the translation into L3 renderer instructions.
+
+### Positioning and Dimensions
+
+In order to position and set the dimensions of an Element, the following attributes can be used.
+
+  - `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)
+
+All positioning and dimension related attributes, when not specified, default to `0`.
+
+```xml
+<Element x="100" y="100" w="800" h="400">
+  <Element x="40" y="80" w="300" h="300" z="10" />
+  <Element x="60" y="120" w="200" h="200" z="0" />
+</Element>
+```
+
+### Colors
+
+By default Elements have a transparent background color. The `color` attribute can be used to give an Element a color.
+
+For those familiar with Lightning 2: colors have gotten a lot easier with Blits! Under the hood the Lightning 3 renderer still uses the somewhat unfamiliar, but efficient `0xffc0ffee` syntax. In Blits you can specify colors as you are used to in HTML and CSS.
+
+Blits accepts the following color formats and makes sure that they are mapped in a way the Lightning 3 renderer can understand.
+
+- hexadecimal (i.e. `#ff4433`)
+- hexadecimal with an alpha channel (i.e `#55553380`)
+- hexadecimal shorthands (i.e. `#333`)
+- rgb (i.e. `rgb(180, 30, 50)`)
+- rgba (i.e `rgba(40, 30, 180, 0.5)`)
+- html color names (i.e. `red`, `blue`, `skyblue`, `tomato`)
+
+HSL and HSLA formats are planned to be added in the future.
+
+```xml
+<Element w="200" h="200" color="#ff4433" />
+<Element w="200" h="200" color="#55553380" />
+<Element w="200" h="200" color="#333" />
+<Element w="200" h="200" color="rgb(180, 30, 50)" />
+<Element w="200" h="200" color="rgba(40, 30, 180, 0.5)" />
+<Element w="200" h="200" color="black" />
+<Element w="200" h="200" color="red" />
+<Element w="200" h="200" color="skyblue" />
+```
+
+#### Basic linear gradients
+
+The color attribute can also be used to specify basic linear gradients.
+
+A linear gradient can be defined by specifying an _object literal_ as the `color` attribute instead of a single color. The object can consist of a mix of `top`, `bottom`, `left`, `right` keys, with the color to use for that side as a value. If a specific side isn't specified, it defaults to `transparent`. Again you can use "normal" notation for the colors (like hexadecimal or rgba) and you are free to mix and match formats.
+
+```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="{bottom: 'black'}" />
+```
+
+### Alpha and visibility
+
+The opacity of an Element, can be controlled by setting the `alpha` attribute. This attribute accepts a value between `0` (fully transparent) and `1` (completely visible).
+
+The value of alpha is also being applied recursively to the children of the Element that has its alpha set. If you just want the background color of an Element to be semi-transparent, you should set the alpha channel in the color instead of applying the alpha attribute.
+
+```xml
+  <Element w="200" h="200" color="blue" alpha="0.8">
+    <Element w="100" h="100" color="red" alpha="0.3" />
+  </Element>
+```
+
+### Rotation and scaling
+
+If you want to rotate an Element, you can use the `rotation` attribute. The rotation attribute in Blits accepts values in degrees. The rotation of an Element is also automatically applied to any children down the tree.
+
+```xml
+<Element w="200" h="200" color="blue" rotation="90">
+  <Element w="100" h="100" color="red" rotation="240" />
+</Element>
+```
+
+For scaling an Element the `scale` attribute is used. This attribute can be any numeric value starting at `0`. The default value is `1`, which means no scaling. Any value below `1` will scale down the element and values greater than `1` will scale the element up.
+
+Similar to rotation, scale is also applied recursively to children down the tree of the Element that has it's `scale` attribute set.
+
+```xml
+<Element w="200" h="200" color="blue" scale="0.5" />
+<Element w="200" h="200" color="#000" scale="2.3" />
+```
+
+### 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.
+
+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.
+
+In order to align the position starting at the _bottom-right_ corner, we would set `mount` to `{x: 1, y: 1}` and `{x: 0.5, y: 0.5}` would align the position at the _center_ of the Element.
+
+If you omit either the `x` or the `y` key from the _object literal_, it's value will default to `0`.
+
+```xml
+<Element w="200" h="200" x="20" y="100" color="#333" mount="{x: 0.5, y: 0.8}" />
+<Element w="200" h="200" x="800" y="400" color="#333" mount="{y: 1}" />
+```
+
+### Pivot point
+
+The pivot point of an Element comes into play when it's rotated or scaled. The pivot point defaults to the center of the Element, which means that when setting `rotation` it rotates around the middle. And when the Element is scaled it scales from the center out.
+
+But sometimes you may want rotate around the left corner, or scale from the right side out. This can be controlled by adding the `pivot` attribute to the Element and, similar to the `mount` attribute, specify an _object literal_ with a `x` and a `y` key.
+
+Both `y` and `x` values should be anything between `0` and `1`, where `{x: 0, y: 0}` sets the pivot point to the _top-left_ corner and `{x: 1, y: 1}` refers to the _bottom-right_ corner. The default pivot value is `{x: 0.5, y: 0.5}` (i.e. the center) and if you omit `x` or `y` in your pivot object, it will default to `0.5`.
+
+```xml
+<Element w="200" h="200" x="20" y="100" pivot="{x: 0.5, y: 0.8}" rotation="69" />
+<Element w="200" h="200" x="800" y="400" pivot="{y: 1}" scale="3" />
+```

package/package.json

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

package/src/components/Text.js

@@ -30,14 +30,17 @@ export default () =>
         :weight="$weight"
         letterSpacing="$letterspacing"
         stretch="$stretch"
+        contain="$_contain"
         :w="$w"
         :textAlign="$align"
+        @loaded="$@loaded"
+        @error="$@error"
       />`,
     props: [
       'content',
       {
         key: 'font',
-        default: 'TedNext',
+        default: 'lato',
       },
       {
         key: 'size',
@@ -51,11 +54,16 @@ export default () =>
       'stretch',
       'align',
       'w',
+      'contain',
+      '@loaded',
+      '@error',
     ],
     computed: {
       text() {
         return this.slotcontent || this.content || ''
       },
+      _contain() {
+        return this.contain || (this.align ? 'width' : null)
+      },
     },
-    hooks: {},
   })

package/src/element.js

@@ -149,7 +149,7 @@ const Element = {
     rotation: 0,
   },
   populate(data) {
-    let props = {
+    const props = {
       ...this.defaults,
       ...this.config,
       ...data,
@@ -162,13 +162,26 @@ const Element = {
         props[prop] = transformations.unpackTransition(props[prop])
         transformations[prop](props, this.setProperties)
       }
-
       this.setProperties.push(prop)
     })
 
     transformations.textureColor(props, this.setProperties)
 
     this.node = props.__textnode ? renderer.createTextNode(props) : renderer.createNode(props)
+
+    if (props['@loaded']) {
+      const event = props.__textnode ? 'textLoaded' : 'txLoaded'
+      this.node.once(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) => {
+        props['@error'](error, this)
+      })
+    }
   },
   set(prop, value) {
     if (isTransition(value) && this.setProperties.indexOf(prop) > -1) {

package/src/fontLoader.js

@@ -0,0 +1,17 @@
+import { CoreExtension, WebTrFontFace, SdfTrFontFace } from '@lightningjs/renderer/core'
+
+import Settings from './settings'
+
+export default class FontLoader extends CoreExtension {
+  async run(stage) {
+    Settings.get('fonts', []).forEach((font) => {
+      if (font.type === 'sdf' || font.type === 'msdf') {
+        stage.fontManager.addFontFace(
+          new SdfTrFontFace(font.family, {}, font.type, stage, font.png, font.json)
+        )
+      } else if (font.type === 'web') {
+        new WebTrFontFace(font.family, {}, font.file)
+      }
+    })
+  }
+}

package/src/launch.js

@@ -20,6 +20,8 @@ import { MainRenderDriver, RendererMain, ThreadXRenderDriver } from '@lightningj
 import Settings from './settings.js'
 import { initLog } from './lib/log.js'
 
+import coreExtensionModule from './fontLoader.js?importChunkUrl'
+
 export let renderer
 
 export default (App, target, settings) => {
@@ -36,9 +38,9 @@ export default (App, target, settings) => {
 
   renderer = new RendererMain(
     {
-      width: settings.width || 1920,
-      height: settings.height || 1080,
-      coreExtensionModule: settings.coreExtensionModule,
+      appWidth: settings.w || 1920,
+      appHeight: settings.h || 1080,
+      coreExtensionModule: coreExtensionModule,
     },
     target,
     driver

package/src/lib/codegenerator/generator.js

@@ -38,23 +38,26 @@ export default function (templateObject = { children: [] }) {
 const generateElementCode = function (
   templateObject,
   parent = false,
-  options = { index: false, component: 'component.', forceEffect: false }
+  options = { key: false, component: 'component.', forceEffect: false }
 ) {
   const renderCode = options.forceEffect ? this.effectsCode : this.renderCode
   if (parent) {
     renderCode.push(`parent = ${parent}`)
   }
 
-  const elm = options.index ? `elms[${counter}][${options.index}]` : `elms[${counter}]`
+  if ('key' in templateObject) options.key = interpolate(templateObject.key, options.component)
+  const elm = options.key ? `elms[${counter}][${options.key}]` : `elms[${counter}]`
 
-  if (options.index) {
+  if (options.key) {
     renderCode.push(`
-      elms[${counter}] = elms[${counter}] || []
+      elms[${counter}] = elms[${counter}] || {}
     `)
   }
 
   renderCode.push(`
-    ${elm} = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+    if(!${elm}) {
+      ${elm} = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+    }
     const elementConfig${counter} = {}
   `)
 
@@ -85,7 +88,11 @@ const generateElementCode = function (
     `)
   }
 
-  renderCode.push(`${elm}.populate(elementConfig${counter})`)
+  renderCode.push(`
+    if(!${elm}.nodeId) {
+      ${elm}.populate(elementConfig${counter})
+    }
+  `)
 
   if (children) {
     generateCode.call(this, { children }, `elms[${counter}]`)
@@ -95,7 +102,7 @@ const generateElementCode = function (
 const generateComponentCode = function (
   templateObject,
   parent = false,
-  options = { index: false, component: 'component.', forceEffect: false, holder: false }
+  options = { key: false, component: 'component.', forceEffect: false, holder: false }
 ) {
   const renderCode = options.forceEffect ? this.effectsCode : this.renderCode
 
@@ -105,17 +112,21 @@ const generateComponentCode = function (
       component.___components['${templateObject.type}']
   `)
 
+  if ('key' in templateObject) {
+    options.key = interpolate(templateObject.key, options.component)
+  }
+
   generateElementCode.call(this, templateObject, parent, { ...options, ...{ holder: true } })
 
-  parent = options.index ? `elms[${counter}][${options.index}]` : `elms[${counter}]`
+  parent = options.key ? `elms[${counter}][${options.key}]` : `elms[${counter}]`
 
   counter++
 
-  const elm = options.index ? `elms[${counter}][${options.index}]` : `elms[${counter}]`
+  const elm = options.key ? `elms[${counter}][${options.key}]` : `elms[${counter}]`
 
-  if (options.index) {
+  if (options.key) {
     renderCode.push(`
-      elms[${counter}] = elms[${counter}] || []
+      elms[${counter}] = elms[${counter}] || {}
     `)
   }
 
@@ -146,7 +157,9 @@ const generateComponentCode = function (
   })
 
   renderCode.push(`
-    ${elm} = (context.components && context.components['${templateObject.type}'] || component.___components['${templateObject.type}'] || (() => { console.log('component ${templateObject.type} not found')})).call(null, {props: props${counter}}, ${parent}, component)
+    if(!${elm}) {
+      ${elm} = (context.components && context.components['${templateObject.type}'] || component.___components['${templateObject.type}'] || (() => { console.log('component ${templateObject.type} not found')})).call(null, {props: props${counter}}, ${parent}, component)
+    }
   `)
 }
 
@@ -177,23 +190,35 @@ const generateForLoopCode = function (templateObject, parent) {
   }
   ctx.renderCode.push(`
     const collection = ${cast(result[2], ':for')}
+    const keys = []
     for(let __index = 0; __index < collection.length; __index++) {
       parent = ${parent}
-      const scope = {
+      const scope = Object.assign(component, {
+        key: Math.random(),
         ${index}: __index,
         ${item}: collection[__index]
-      }
-  `)
+      })
+    `)
+
+  if ('key' in templateObject) {
+    ctx.renderCode.push(`
+      keys.push(${interpolate(templateObject.key, 'scope.')})
+    `)
+  } else {
+    ctx.renderCode.push(`
+      keys.push(scope.key.toString())
+    `)
+  }
 
   if (templateObject.type !== 'Element') {
     generateComponentCode.call(ctx, templateObject, false, {
-      index: `scope.${index}`,
+      key: 'scope.key',
       component: 'scope.',
       forceEffect: false,
     })
   } else {
     generateElementCode.call(ctx, templateObject, parent, {
-      index: `scope.${index}`,
+      key: 'scope.key',
       component: 'scope.',
       forceEffect: false,
     })
@@ -201,6 +226,17 @@ const generateForLoopCode = function (templateObject, parent) {
   ctx.renderCode = ctx.renderCode.concat(ctx.effectsCode)
   ctx.renderCode.push('}')
 
+  ctx.renderCode.push(`
+    if(elms[${counter}]) {
+      Object.keys(elms[${counter}]).forEach(key => {
+        if(keys.indexOf(key) === -1) {
+          elms[${counter}][key].delete && elms[${counter}][key].delete()
+          elms[${counter}][key].destroy && elms[${counter}][key].destroy()
+          delete elms[${counter}][key]
+        }
+      })
+    }
+  `)
   this.effectsCode.push(ctx.renderCode.join('\n'))
 }
 
@@ -261,6 +297,11 @@ const cast = (val = '', key = false, component = 'component.') => {
   else if (val.toLowerCase() === 'false') {
     castedValue = false
   }
+  // @-listener
+  else if (key.startsWith('@') && val) {
+    const c = component.slice(0, -1)
+    castedValue = `${c}['${val.replace('$', '')}'] && ${c}['${val.replace('$', '')}'].bind(${c})`
+  }
   // dynamic value
   else if (val.startsWith('$')) {
     castedValue = `${component}${val.replace('$', '')}`

package/src/lib/setup/base.js

@@ -70,15 +70,19 @@ export default (component) => {
       configurable: false,
     },
     select: {
-      value: function (id) {
+      value: function (ref) {
         let selected = null
         this.___children.forEach((child) => {
           if (Array.isArray(child)) {
             child.forEach((c) => {
-              if (c['id'] === id) selected = c
+              if (c['ref'] === ref) selected = c
+            })
+          } else if (Object.getPrototypeOf(child) === Object.prototype) {
+            Object.keys(child).forEach((k) => {
+              if (child[k]['ref'] === ref) selected = child[k]
             })
           } else {
-            if (child['id'] === id) selected = child
+            if (child['ref'] === ref) selected = child
           }
         })
 

package/src/lib/setup/props.js

@@ -23,8 +23,8 @@ const baseProp = {
 }
 
 export default (component, props = []) => {
-  if (props.indexOf('id') === -1) {
-    props.push('id')
+  if (props.indexOf('ref') === -1) {
+    props.push('ref')
   }
   component.___propKeys = []
   props.forEach((prop) => {

package/src/lib/templateparser/parser.js

@@ -80,7 +80,7 @@ export default (template = '') => {
       type: (match = tag.match(/^([A-Za-z0-9]+)(?![A-Za-z0-9=])/)) && match[0], // || 'Element' maybe default to 'Element'
     }
 
-    const attributes = tag.match(/[:*\w.-]+="[^"]*"/g) || []
+    const attributes = tag.match(/[:*@\w.-]+="[^"]*"/g) || []
     if (attributes.length) {
       result['attributes'] = attributes.reduce((obj, attr) => {
         const match = /(.+)=["'](.+)["']/.exec(attr)