@lightningjs/blits 0.3.2 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.3.2",
+  "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

@@ -297,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/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)

package/foo.js

@@ -1,22 +0,0 @@
-const items1 = [{ foo: 'bar' }, { foo: 'baz' }]
-
-const items2 = {
-  1: { foo: 'bar' },
-  2: { foo: 'baz' },
-}
-
-const loop = (items) => {
-  if (!Array.isArray(items)) {
-    items = Object.keys(items).map((k) => {
-      return items[k]
-    })
-  }
-
-  for (let i = 0; i < items.length; i++) {
-    console.log(items[i].foo)
-  }
-}
-
-loop(items1)
-
-loop(items2)