@lightningjs/blits 0.6.9 → 0.6.10

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,

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(e) {
+        if (!Router.back()) this.parent.focus(e)
+      },
+    },
+  })

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/precompiler/precompiler.js

@@ -0,0 +1,64 @@
+/*
+ * 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 parser from '../templateparser/parser.js'
+import generator from '../codegenerator/generator.js'
+import path from 'path'
+
+export default (source, filePath) => {
+  if (
+    source.indexOf('Blits.Component(') > -1 ||
+    source.indexOf('Blits.Application(') > -1 ||
+    /=>\s*Component\(['"][A-Za-z]+['"],/s.test(source) // blits component
+  ) {
+    // get the start of the template key in de component configuration object
+    const templateKeyRegex = /template:\s*([`"'])*/g
+    const templateStartResult = templateKeyRegex.exec(source)
+
+    if (templateStartResult) {
+      const typeOfQuotesUsed = templateStartResult[1]
+      const templateStartIndex = templateStartResult.index
+
+      // get the template contents from the configuration object
+      const templateContentsRegex = new RegExp(`${typeOfQuotesUsed}([\\s\\S]*?)${typeOfQuotesUsed}`)
+      const templateContentResult = templateContentsRegex.exec(source.slice(templateStartIndex))
+      const templateEndIndex =
+        templateStartIndex + templateContentResult.index + templateContentResult[0].length
+
+      // Parse the template
+      let resourceName = 'Blits.Application'
+      if (source.indexOf('Blits.Component(') > -1) {
+        resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
+      }
+      const componentPath = path.relative(process.cwd(), filePath)
+      const parsed = parser(templateContentResult[1], resourceName, null, componentPath)
+
+      // Generate the code
+      const code = generator.call({ components: {} }, parsed)
+
+      // Insert the code in the component using the 'code' key, replacing the template key
+      const replacement = `/* eslint-disable no-unused-vars */ \ncode: { render: ${code.render.toString()}, effects: [${code.effects.map(
+        (fn) => fn.toString()
+      )}], context: {}}`
+      const newSource =
+        source.substring(0, templateStartIndex) + replacement + source.substring(templateEndIndex)
+
+      return newSource
+    }
+  }
+  return source
+}

package/src/lib/setup/base.js

@@ -23,6 +23,7 @@ import Circle from '../../components/Circle.js'
 import RouterView from '../../components/RouterView.js'
 import Sprite from '../../components/Sprite.js'
 import Text from '../../components/Text.js'
+import FPScounter from '../../components/FPScounter.js'
 import eventListeners from '../eventListeners.js'
 import { default as log, Log } from '../log.js'
 import symbols from '../symbols.js'
@@ -135,6 +136,7 @@ export default (component) => {
         RouterView: RouterView(),
         Sprite: Sprite(),
         Text: Text(),
+        FPScounter: FPScounter(),
       },
       writable: false,
       enumerable: false,

package/vite/index.js

@@ -1,3 +1,20 @@
+/*
+ * 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 preCompiler from './preCompiler.js'
 import { importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'