@lightningjs/blits 0.3.13 → 0.3.15

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## v0.3.15
+
+_23 oct 2023_
+
+- Added support for slots
+- Added support for defining custom keymapping
+- Improved error handling of the template parser
+
+## v0.3.14
+
+_19 oct 2023_
+
+- Fixed error when `<Text />`-component doesn't have any content
+- Removed generic escape key handler that closed the App
+- Introduced `quit()`-method on the root Application component
+- Updated to v0.4.0 of the renderer
+
 ## v0.3.13
 
 _18 oct 2023_
@@ -7,7 +24,8 @@ _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
+- Fixed error when using `this`-reference in component state
+- Added basic support for inline text (i.e. `<Text>My text with a {{$dynamic}} value</Text>`)
 
 ## v0.3.12
 

package/boilerplate/package.json

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

package/package.json

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

package/src/application.js

@@ -16,12 +16,11 @@
  */
 
 import Component from './component.js'
-
 import Focus from './focus.js'
+import Settings from './settings.js'
 
 const Application = (config) => {
-  // make configurable?
-  const mapping = {
+  const defaultKeyMap = {
     ArrowLeft: 'left',
     ArrowRight: 'right',
     ArrowUp: 'up',
@@ -29,24 +28,38 @@ const Application = (config) => {
     Enter: 'enter',
     ' ': 'space',
     Backspace: 'back',
+    Escape: 'escape',
+    37: 'left',
+    39: 'right',
+    38: 'up',
+    40: 'down',
+    13: 'enter',
+    32: 'space',
+    8: 'back',
+    27: 'escape',
   }
 
-  const handler = (e) => {
-    const key = mapping[e.key] || e.key
-    Focus.input(key, e)
-  }
-
-  document.addEventListener('keydown', handler)
-
   config.hooks = config.hooks || {}
-  config.hooks.___init = function () {
-    Focus.set(this)
-  }
+
+  let handler
 
   config.hooks.___destroy = function () {
     document.removeEventListener('keydown', handler)
   }
 
+  config.hooks.___init = function () {
+    const keyMap = { ...defaultKeyMap, ...Settings.get('keymap', {}) }
+
+    handler = (e) => {
+      const key = keyMap[e.key] || keyMap[e.keyCode] || e.key || e.keyCode
+      Focus.input(key, e)
+    }
+
+    document.addEventListener('keydown', handler)
+
+    Focus.set(this)
+  }
+
   const App = Component('App', config)
 
   return App

package/src/component.js

@@ -120,6 +120,12 @@ const Component = (name = required('name'), config = required('config')) => {
     this.parent = parentComponent
 
     Object.defineProperties(this, {
+      type: {
+        value: name,
+        writable: false,
+        enumerable: true,
+        configurable: false,
+      },
       componentId: {
         value: createHumanReadableId(name),
         writable: false,
@@ -158,6 +164,13 @@ const Component = (name = required('name'), config = required('config')) => {
       configurable: false,
     })
 
+    Object.defineProperty(this, '___slots', {
+      value: this.___children.filter((child) => child.___isSlot),
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    })
+
     code.effects.forEach((eff) => {
       effect(() => {
         eff.apply(stage, [this, this.___children, code.context])

package/src/element.js

@@ -133,7 +133,7 @@ const transformations = {
     props.rotation = props.rotation * (Math.PI / 180)
   },
   text(props) {
-    props.text = props.text.toString()
+    props.text = props.text !== undefined ? props.text.toString() : ''
   },
   textureColor(props) {
     if (!('color' in props)) {
@@ -174,6 +174,10 @@ const Element = {
     }
     this.initData = data
 
+    if (props.___isSlot) {
+      this.___isSlot = true
+    }
+
     transformations.remap(props)
     Object.keys(props).forEach((prop) => {
       if (transformations[prop]) {

package/src/launch.d.ts

@@ -86,7 +86,11 @@ export interface Settings {
   /**
    * Fonts to be used in the Application
    */
-  fonts?: Font[]
+  fonts?: Font[],
+  /**
+   * Custom keymapping
+   */
+  keymap?: object
 }
 
 /**

package/src/launch.js

@@ -18,7 +18,7 @@
 import { MainRenderDriver, RendererMain, ThreadXRenderDriver } from '@lightningjs/renderer'
 // import RendererWorker from '@lightningjs/renderer/workers/renderer?worker'
 import Settings from './settings.js'
-import { initLog } from './lib/log.js'
+import { initLog, Log } from './lib/log.js'
 
 // import coreExtensionModule from './fontLoader.js?importChunkUrl'
 
@@ -46,18 +46,15 @@ export default (App, target, settings) => {
     driver
   )
 
-  let app
-
-  const handler = (e) => {
-    if (e.key === 'Escape') {
-      document.removeEventListener('keydown', handler)
+  const initApp = () => {
+    let app = App()
+    app.quit = () => {
+      Log.info('Closing App')
       app.destroy()
       app = null
       renderer = null
     }
   }
 
-  document.addEventListener('keydown', handler)
-
-  renderer.init().then(() => (app = App()))
+  renderer.init().then(() => initApp())
 }

package/src/lib/codegenerator/generator.js

@@ -65,7 +65,18 @@ const generateElementCode = function (
   delete templateObject['children']
 
   Object.keys(templateObject).forEach((key) => {
-    if (key === 'type') return
+    if (key === 'type') {
+      if (templateObject[key] === 'Slot') {
+        renderCode.push(`elementConfig${counter}['___isSlot'] = true`)
+      }
+      return
+    }
+
+    if (key === 'slot') {
+      renderCode.push(`
+        elementConfig${counter}['parent'] = component.___slots.filter(slot => slot.ref === '${templateObject.slot}').shift() || component.___slots[0] || parent
+      `)
+    }
 
     if (isReactiveKey(key)) {
       this.effectsCode.push(
@@ -116,6 +127,8 @@ const generateComponentCode = function (
     options.key = interpolate(templateObject.key, options.component)
   }
 
+  const children = templateObject.children
+  delete templateObject.children
   generateElementCode.call(this, templateObject, parent, { ...options, ...{ holder: true } })
 
   parent = options.key ? `elms[${counter}][${options.key}]` : `elms[${counter}]`
@@ -159,8 +172,17 @@ const generateComponentCode = function (
   renderCode.push(`
     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)
+      if (${elm}.___slots[0]) {
+        parent = ${elm}.___slots[0]
+        component = ${elm}
+      } else {
+        parent = ${elm}.___children[0]
+      }
     }
   `)
+
+  counter++
+  generateElementCode.call(this, { children }, false, { ...options })
 }
 
 const generateForLoopCode = function (templateObject, parent) {
@@ -210,14 +232,14 @@ const generateForLoopCode = function (templateObject, parent) {
     `)
   }
 
-  if (templateObject.type !== 'Element') {
-    generateComponentCode.call(ctx, templateObject, false, {
+  if (templateObject.type === 'Element' || templateObject.type === 'Slot') {
+    generateElementCode.call(ctx, templateObject, parent, {
       key: 'scope.key',
       component: 'scope.',
       forceEffect: false,
     })
   } else {
-    generateElementCode.call(ctx, templateObject, parent, {
+    generateComponentCode.call(ctx, templateObject, false, {
       key: 'scope.key',
       component: 'scope.',
       forceEffect: false,
@@ -248,10 +270,10 @@ const generateCode = function (templateObject, parent = false) {
       if (Object.keys(childTemplateObject).indexOf(':for') > -1) {
         generateForLoopCode.call(this, childTemplateObject, parent)
       } else {
-        if (childTemplateObject.type !== 'Element') {
-          generateComponentCode.call(this, childTemplateObject, parent)
-        } else {
+        if (childTemplateObject.type === 'Element' || childTemplateObject.type === 'Slot') {
           generateElementCode.call(this, childTemplateObject, parent)
+        } else {
+          generateComponentCode.call(this, childTemplateObject, parent)
         }
       }
     })

package/src/lib/templateparser/parser.js

@@ -16,8 +16,8 @@
  */
 
 class TemplateParseError extends Error {
-  constructor(name, context) {
-    super('TemplateParseError')
+  constructor(message, name, context) {
+    super(`TemplateParseError ${message}`)
     this.name = name
     this.context = context
   }
@@ -44,7 +44,13 @@ export default (template = '') => {
     try {
       return format(tags)
     } catch (error) {
-      console.error('Error:', error.message)
+      if (error instanceof TemplateParseError) {
+        console.error(`${error.message} | ${error.name}`)
+      } else {
+        console.error(error)
+      }
+      // return errors gracefully
+      return null
     }
   }