@lightningjs/blits 0.6.9 → 0.6.11

package/src/components/FPScounter.orig.js

@@ -0,0 +1,122 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Component from '../component.js'
+import { renderer } from '../launch.js'
+import fps_sprite from '../../public/assets/fps_sprite.base64.js'
+
+console.log(fps_sprite)
+
+export default () =>
+  Component('FPScounter', {
+    template: `
+      <Element>
+        <Element y="15" x="20">
+          <Element>
+            <Sprite image="$image" w="43" h="25" map="$sprite" frame="fps" />
+            <Element x="58" y="2">
+              <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$fps[0]" />
+              <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$fps[1]" />
+              <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$fps[2]" />
+            </Element>
+          </Element>
+
+          <Element x="150">
+            <Sprite image="$image" y="2" w="48" h="25" map="$sprite" frame="avg" />
+            <Element x="63" y="2">
+              <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$avgFps[0]" />
+              <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$avgFps[1]" />
+              <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$avgFps[2]" />
+            </Element>
+          </Element>
+
+          <Element x="0" y="40" >
+            <Sprite image="$image" x="-2" w="47" h="25" map="$sprite" frame="min" />
+            <Element x="58" y="2">
+              <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$minFps[0]" />
+              <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$minFps[1]" />
+              <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$minFps[2]" />
+            </Element>
+          </Element>
+
+          <Element x="150" y="40">
+            <Sprite image="$image" w="53" h="25" map="$sprite" frame="max" />
+            <Element x="63" y="2">
+              <Sprite image="$image" x="0" h="20" w="20" map="$sprite" :frame="$maxFps[0]" />
+              <Sprite image="$image" x="18" h="20" w="20" map="$sprite" :frame="$maxFps[1]" />
+              <Sprite image="$image" x="36" h="20" w="20" map="$sprite" :frame="$maxFps[2]" />
+            </Element>
+          </Element>
+        </Element>
+      </Element>
+    `,
+    state() {
+      return {
+        image: fps_sprite,
+        sprite: {
+          defaults: {
+            y: 1,
+            w: 20,
+            h: 20,
+          },
+          frames: {
+            '-': { x: -1000 },
+            0: { x: 1 },
+            1: { x: 23 },
+            2: { x: 45 },
+            3: { x: 67 },
+            4: { x: 89 },
+            5: { x: 111 },
+            6: { x: 133 },
+            7: { x: 155 },
+            8: { x: 177 },
+            9: { x: 199 },
+            avg: { x: 221, w: 48, h: 25 },
+            fps: { x: 271, w: 43, h: 25 },
+            max: { x: 316, w: 53, h: 25 },
+            min: { x: 371, w: 47, h: 25 },
+          },
+        },
+        fps: '---',
+        avgFps: '---',
+        minFps: '---',
+        maxFps: '---',
+      }
+    },
+    hooks: {
+      ready() {
+        let minFps = 10000
+        let maxFps = 0
+        let avgFps = 0
+        let totalFps = 0
+        let fpsUpdateCounter = 0
+
+        renderer.on('fpsUpdate', (rM, { fps }) => {
+          minFps = Math.min(fps, minFps)
+          maxFps = Math.max(fps, maxFps)
+          totalFps += fps
+          fpsUpdateCounter++
+          avgFps = Math.round(totalFps / fpsUpdateCounter)
+
+          this.fps = fps.toString().padStart(3, '0')
+          this.avgFps = avgFps.toString().padStart(3, '0')
+          this.minFps = minFps.toString().padStart(3, '0')
+          this.maxFps = maxFps.toString().padStart(3, '0')
+        })
+      },
+    },
+  })

package/src/components/Image.js

@@ -19,8 +19,29 @@ import Component from '../component.js'
 
 export default () =>
   Component('Image', {
-    template: `
-      <Element :imageSource="$imageSource" />`,
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context) {
+        const elms = []
+
+        if (!elms[0]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
+
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
+
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context) {
+          elms[0].set('imageSource', component.imageSource)
+        },
+      ],
+      context: {},
+    },
     props: ['src'],
     computed: {
       imageSource() {

package/src/components/Image.orig.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Component from '../component.js'
+
+export default () =>
+  Component('Image', {
+    template: `
+      <Element :imageSource="$imageSource" />`,
+    props: ['src'],
+    computed: {
+      imageSource() {
+        if (/^(?:https?:)?\/\//i.test(this.src)) {
+          return this.src
+        }
+        return `${window.location.protocol}//${window.location.host}/${this.src}`
+      },
+    },
+  })

package/src/components/RouterView.js

@@ -22,9 +22,28 @@ let handler
 
 export default () =>
   Component('RouterView', {
-    template: `
-      <Element w="100%" height="100%"></Element>
-    `,
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context) {
+        const elms = []
+
+        if (!elms[0]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
+
+        elementConfig0['w'] = parent.node.width * (100 / 100)
+        elementConfig0['height'] = parent.node.height * (100 / 100)
+
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
+
+        return elms
+      },
+      effects: [],
+      context: {},
+    },
     state() {
       return {
         activeView: null,
@@ -44,8 +63,8 @@ export default () =>
       },
     },
     input: {
-      back(e) {
-        if (!Router.back()) this.parent.focus(e)
+      back() {
+        Router.back()
       },
     },
   })

package/src/components/RouterView.orig.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Component from '../component.js'
+import Router from '../router/router.js'
+
+let handler
+
+export default () =>
+  Component('RouterView', {
+    template: `
+      <Element w="100%" height="100%"></Element>
+    `,
+    state() {
+      return {
+        activeView: null,
+      }
+    },
+    hooks: {
+      ready() {
+        handler = () => Router.navigate.apply(this)
+        Router.navigate.apply(this)
+        window.addEventListener('hashchange', handler)
+      },
+      destroy() {
+        window.removeEventListener('hashchange', handler, false)
+      },
+      focus() {
+        this.activeView && this.activeView.focus()
+      },
+    },
+    input: {
+      back() {
+        Router.back()
+      },
+    },
+  })

package/src/components/Sprite.js

@@ -21,9 +21,32 @@ import symbols from '../lib/symbols.js'
 
 export default () =>
   Component('Sprite', {
-    template: `
-      <Element w="$w" h="$h" :texture="$texture" />
-    `,
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context) {
+        const elms = []
+
+        if (!elms[0]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
+
+        elementConfig0['w'] = component.w
+        elementConfig0['h'] = component.h
+
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
+
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context) {
+          elms[0].set('texture', component.texture)
+        },
+      ],
+      context: {},
+    },
     props: ['image', 'map', 'frame', 'w', 'h'],
     state() {
       return {

package/src/components/Sprite.orig.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Component from '../component.js'
+
+import symbols from '../lib/symbols.js'
+
+export default () =>
+  Component('Sprite', {
+    template: `
+      <Element w="$w" h="$h" :texture="$texture" />
+    `,
+    props: ['image', 'map', 'frame', 'w', 'h'],
+    state() {
+      return {
+        spriteTexture: false,
+      }
+    },
+    computed: {
+      texture() {
+        const options =
+          'frames' in this.map
+            ? Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
+            : this.map[this.frame]
+
+        if (this.spriteTexture && options) {
+          return this[symbols.renderer].createTexture('SubTexture', {
+            texture: this.spriteTexture,
+            x: options.x,
+            y: options.y,
+            width: options.w,
+            height: options.h,
+          })
+        }
+      },
+    },
+    hooks: {
+      ready() {
+        this.spriteTexture = this[symbols.renderer].createTexture('ImageTexture', {
+          src: this.image,
+        })
+      },
+    },
+  })

package/src/components/Text.js

@@ -20,26 +20,62 @@ import Settings from '../settings.js'
 
 export default () =>
   Component('Text', {
-    template: `
-      <Element
-        __textnode="true"
-        :text="$content"
-        fontFamily="$font"
-        :fontSize="$size"
-        :color="$color"
-        :style="$style"
-        :weight="$weight"
-        letterSpacing="$letterspacing"
-        lineHeight="$_lineheight"
-        stretch="$stretch"
-        contain="$_contain"
-        :wordWrap="$wordwrap"
-        :maxLines="$maxlines"
-        :textAlign="$align"
-        :overflowSuffix="$textoverflow"
-        @loaded="$@loaded"
-        @error="$@error"
-      />`,
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context) {
+        const elms = []
+
+        if (!elms[0]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
+
+        elementConfig0['__textnode'] = true
+        elementConfig0['fontFamily'] = component.font
+        elementConfig0['letterSpacing'] = component.letterspacing
+        elementConfig0['lineHeight'] = component._lineheight
+        elementConfig0['stretch'] = component.stretch
+        elementConfig0['contain'] = component._contain
+        elementConfig0['@loaded'] = component['@loaded'] && component['@loaded'].bind(component)
+        elementConfig0['@error'] = component['@error'] && component['@error'].bind(component)
+
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
+
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context) {
+          elms[0].set('text', component.content)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('fontSize', component.size)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('color', component.color)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('style', component.style)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('weight', component.weight)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('wordWrap', component.wordwrap)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('maxLines', component.maxlines)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('textAlign', component.align)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('overflowSuffix', component.textoverflow)
+        },
+      ],
+      context: {},
+    },
     props: [
       'content',
       {

package/src/components/Text.orig.js

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Component from '../component.js'
+import Settings from '../settings.js'
+
+export default () =>
+  Component('Text', {
+    template: `
+      <Element
+        __textnode="true"
+        :text="$content"
+        fontFamily="$font"
+        :fontSize="$size"
+        :color="$color"
+        :style="$style"
+        :weight="$weight"
+        letterSpacing="$letterspacing"
+        lineHeight="$_lineheight"
+        stretch="$stretch"
+        contain="$_contain"
+        :wordWrap="$wordwrap"
+        :maxLines="$maxlines"
+        :textAlign="$align"
+        :overflowSuffix="$textoverflow"
+        @loaded="$@loaded"
+        @error="$@error"
+      />`,
+    props: [
+      'content',
+      {
+        key: 'font',
+        default: Settings.get('defaultFont', 'lato'),
+      },
+      {
+        key: 'size',
+        cast: Number,
+        default: 32,
+      },
+      'style',
+      'color',
+      'weight',
+      'letterspacing',
+      'stretch',
+      'align',
+      'wordwrap',
+      'maxlines',
+      'lineheight',
+      'contain',
+      '@loaded',
+      '@error',
+      'textoverflow',
+    ],
+    computed: {
+      _contain() {
+        return (
+          this.contain ||
+          (this.wordwrap && this.maxlines ? 'both' : this.wordwrap ? 'width' : 'none')
+        )
+      },
+      _lineheight() {
+        return this.lineheight !== undefined ? this.lineheight : this.size
+      },
+    },
+  })

package/src/launch.d.ts

@@ -144,7 +144,16 @@ export interface Settings {
   *
   * Defaults to 1 if not specified
   */
-  pixelRatio?: number,
+  pixelRatio?: number
+  /**
+   * Interval in milliseconds to receive FPS updates
+   *
+   * @remarks
+   * If set to `0`, FPS updates will be disabled.
+   *
+   * @defaultValue `1000` (disabled)
+   */
+  fpsInterval?: number
   /**
   * Maximum number of web workers to spin up simultaneously for offloading functionality such
   * as image loading to separate threads (when supported by the browser)

package/src/launch.js

@@ -41,6 +41,7 @@ export default (App, target, settings) => {
       appWidth: settings.w || 1920,
       appHeight: settings.h || 1080,
       coreExtensionModule: settings.fontLoader,
+      fpsUpdateInterval: settings.fpsInterval || 1000,
       deviceLogicalPixelRatio:
         settings.pixelRatio ||
         screenResolutions[settings.screenResolution] ||

package/src/lib/codegenerator/generator.js

@@ -64,14 +64,11 @@ const generateElementCode = function (
   const children = templateObject['children']
   delete templateObject['children']
 
-  Object.keys(templateObject).forEach((key) => {
-    if (key === 'type') {
-      if (templateObject[key] === 'Slot') {
-        renderCode.push(`elementConfig${counter}[Symbol.for('isSlot')] = true`)
-      }
-      return
-    }
+  if (templateObject[Symbol.for('componentType')] === 'Slot') {
+    renderCode.push(`elementConfig${counter}[Symbol.for('isSlot')] = true`)
+  }
 
+  Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
         elementConfig${counter}['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || component[Symbol.for('slots')][0] || parent
@@ -119,8 +116,10 @@ const generateComponentCode = function (
 
   renderCode.push(`
     const cmp${counter} =
-      (context.components && context.components['${templateObject.type}']) ||
-      component[Symbol.for('components')]['${templateObject.type}']
+      (context.components && context.components['${
+        templateObject[Symbol.for('componentType')]
+      }']) ||
+      component[Symbol.for('components')]['${templateObject[Symbol.for('componentType')]}']
   `)
 
   if ('key' in templateObject) {
@@ -149,7 +148,6 @@ const generateComponentCode = function (
 
   renderCode.push(`const props${counter} = {}`)
   Object.keys(templateObject).forEach((key) => {
-    if (key === 'type') return
     if (isReactiveKey(key)) {
       this.effectsCode.push(`
         ${elm}[Symbol.for('props')]['${key.substring(1)}'] = ${interpolate(
@@ -171,7 +169,13 @@ const generateComponentCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = (context.components && context.components['${templateObject.type}'] || component[Symbol.for('components')]['${templateObject.type}'] || (() => { console.error('component ${templateObject.type} not found')})).call(null, {props: props${counter}}, ${parent}, component)
+      ${elm} = (context.components && context.components['${
+    templateObject[Symbol.for('componentType')]
+  }'] || component[Symbol.for('components')]['${
+    templateObject[Symbol.for('componentType')]
+  }'] || (() => { console.error('component ${
+    templateObject[Symbol.for('componentType')]
+  } not found')})).call(null, {props: props${counter}}, ${parent}, component)
       if (${elm}[Symbol.for('slots')][0]) {
         parent = ${elm}[Symbol.for('slots')][0]
         component = ${elm}
@@ -245,7 +249,10 @@ const generateForLoopCode = function (templateObject, parent) {
     `)
   }
 
-  if (templateObject.type === 'Element' || templateObject.type === 'Slot') {
+  if (
+    templateObject[Symbol.for('componentType')] === 'Element' ||
+    templateObject[Symbol.for('componentType')] === 'Slot'
+  ) {
     generateElementCode.call(ctx, templateObject, parent, {
       key: 'scope.key',
       component: 'scope.',
@@ -283,7 +290,10 @@ const generateCode = function (templateObject, parent = false, options = {}) {
       if (Object.keys(childTemplateObject).indexOf(':for') > -1) {
         generateForLoopCode.call(this, childTemplateObject, parent)
       } else {
-        if (childTemplateObject.type === 'Element' || childTemplateObject.type === 'Slot') {
+        if (
+          childTemplateObject[Symbol.for('componentType')] === 'Element' ||
+          childTemplateObject[Symbol.for('componentType')] === 'Slot'
+        ) {
           generateElementCode.call(this, childTemplateObject, parent, options)
         } else {
           generateComponentCode.call(this, childTemplateObject, parent, options)