@lightningjs/blits 0.9.9 → 1.0.0

package/src/engines/L3/element.test.js

@@ -0,0 +1,170 @@
+/*
+ * 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 test from 'tape'
+import element from './element.js'
+import { renderer } from './launch.js'
+import { EventEmitter } from 'node:events'
+import { initLog } from '../../lib/log.js'
+import symbols from '../../lib/symbols.js'
+
+initLog()
+
+test('Type', (assert) => {
+  assert.ok(element instanceof Function, 'Element should be a factory function')
+  assert.end()
+})
+
+test('Destroy', (assert) => {
+  const el = element({}, {})
+  el.node = { destroy: () => {} }
+  const capture = assert.capture(el.node, 'destroy')
+
+  el.destroy()
+
+  const calls = capture()
+  assert.ok(calls.length > 0, 'Node destroy should be invoked')
+  assert.end()
+})
+
+test('NodeId', (assert) => {
+  const el = element({}, {})
+  el.node = { id: 123 }
+
+  const result = el.nodeId
+
+  assert.equal(result, 123, 'NodeId should be correct')
+  assert.end()
+})
+
+test('Ref', (assert) => {
+  const el = element({}, {})
+  el.props = { ref: 123 }
+
+  const result = el.ref
+
+  assert.equal(result, 123, 'Ref should be correct')
+  assert.end()
+})
+
+test('Parent', (assert) => {
+  const el = element({}, {})
+  el.node = { parent: 'foo' }
+
+  const result = el.parent
+
+  assert.equal(result, 'foo', 'Parent should be correct')
+  assert.end()
+})
+
+test('Children', (assert) => {
+  const el = element({}, {})
+  el.node = 'foo'
+  el.component[symbols.getChildren] = () => [
+    { id: 0, parent: 'bar' },
+    { id: 1, parent: 'foo' },
+    { id: 2, parent: undefined },
+    { id: 3, parent: 0 },
+    { id: 4, parent: 'foo' },
+  ]
+
+  const result = el.children
+
+  assert.equal(result.length, 2, 'Children amount should be correct')
+  assert.deepEqual(
+    result.map((c) => c.id),
+    [1, 4],
+    'Children should be correct'
+  )
+  assert.end()
+})
+
+test('Element - Set `w` property', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('w', 100)
+
+  assert.equal(el.node['width'], 100, 'Node width parameter should be set')
+  assert.equal(el.props.props['width'], 100, 'Props width parameter should be set')
+  assert.equal(el.props.raw.get('w'), 100, "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `mount` property', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+  const value = { x: 10, y: 20 }
+
+  el.set('mount', value)
+
+  assert.equal(el.node['mountX'], 10, 'Node mountX parameter should be set')
+  assert.equal(el.node['mountY'], 20, 'Node mountY parameter should be set')
+  assert.equal(el.props.props['mountX'], 10, 'Props mountX parameter should be set')
+  assert.equal(el.props.props['mountY'], 20, 'Props mountY parameter should be set')
+  assert.equal(el.props.raw.get('mount'), value, "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `color` property', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('color', 'azure')
+
+  assert.equal(el.node['color'], '0xf0ffffff', 'Node color parameter should be set')
+  assert.equal(el.props.props['color'], '0xf0ffffff', 'Props color parameter should be set')
+  assert.equal(el.props.raw.get('color'), 'azure', "Props' raw map entry should be added")
+  assert.end()
+})
+
+test('Element - Set `src` property', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+  const value = 'file://foo.html'
+
+  el.set('src', value)
+
+  assert.equal(el.node['src'], value, 'Node src parameter should be set')
+  assert.equal(el.props.props['src'], value, 'Props src parameter should be set')
+  assert.equal(el.props.raw.get('src'), value, "Props' raw map entry should be added")
+  assert.equal(el.props.props['color'], 0xffffffff, 'Props default color parameter should be set')
+  assert.end()
+})
+
+test('Element - Set `texture` property', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('texture', 'foo')
+
+  assert.equal(el.node['texture'], 'foo', 'Node texture parameter should be set')
+  assert.equal(el.props.props['texture'], 'foo', 'Props texture parameter should be set')
+  assert.equal(el.props.raw.get('texture'), 'foo', "Props' raw map entry should be added")
+  assert.equal(el.props.props['color'], 0xffffffff, 'Props default color parameter should be set')
+  assert.end()
+})
+
+function createElement() {
+  const el = element({}, {})
+  el.populate({
+    parent: {
+      node: new EventEmitter(),
+    },
+  })
+  return el
+}

package/src/engines/L3/fontLoader.js

@@ -1,10 +1,9 @@
-import { WebTrFontFace, SdfTrFontFace } from '@lightningjs/renderer/core'
-
-import Settings from '../../settings'
-import { renderer } from './launch'
+import { SdfTrFontFace, WebTrFontFace } from '@lightningjs/renderer'
+import Settings from '../../settings.js'
+import { renderer } from './launch.js'
 
 export default () => {
-  const stage = renderer.driver.stage
+  const stage = renderer.stage
   Settings.get('fonts', []).forEach((font) => {
     if (font.type === 'sdf' || font.type === 'msdf') {
       // automatically map png key to file name
@@ -16,10 +15,24 @@ export default () => {
         font.json = font.file.replace(/\.[^.]+$/, `.${font.type}.json`)
       }
       stage.fontManager.addFontFace(
-        new SdfTrFontFace(font.family, {}, font.type, stage, font.png, font.json)
+        new SdfTrFontFace(font.type, {
+          fontFamily: font.family,
+          descriptors: {},
+          atlasUrl: font.png,
+          atlasDataUrl: font.json,
+          stage,
+          metrics: font.metrics,
+        })
       )
     } else if (font.type === 'web') {
-      stage.fontManager.addFontFace(new WebTrFontFace(font.family, {}, font.file))
+      stage.fontManager.addFontFace(
+        new WebTrFontFace({
+          fontFamily: font.family,
+          fontUrl: font.file,
+          descriptors: {},
+          metrics: font.metrics,
+        })
+      )
     }
   })
 }

package/src/engines/L3/index.js

@@ -1,5 +1,5 @@
-import Element from './element'
-import Launch from './launch'
+import Element from './element.js'
+import Launch from './launch.js'
 
 export default {
   Element,

package/src/engines/L3/launch.js

@@ -15,23 +15,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MainCoreDriver, RendererMain } from '@lightningjs/renderer'
-// import RendererWorker from '@lightningjs/renderer/workers/renderer?worker'
+import { RendererMain } from '@lightningjs/renderer'
 import { Log } from '../../lib/log.js'
 import { screenResolutions } from '../../lib/utils.js'
 import colors from '../../lib/colors/colors.js'
 import fontLoader from './fontLoader.js'
+import shaderLoader from './shaderLoader.js'
 
-export let renderer
+export let renderer = {}
 
 export default (App, target, settings = {}) => {
-  const driver = new MainCoreDriver()
-  // settings.multithreaded === true
-  //   ? new ThreadXRenderDriver({
-  //       RendererWorker,
-  //     })
-  //   : new MainRenderDriver()
-
   if ('fontLoader' in settings) {
     Log.warn(
       `
@@ -64,8 +57,7 @@ You can remove the option from your \`src/index.js\`-file. And you can safely re
         'gpuMemoryLimit' in settings ? settings.gpuMemoryLimit * 1024 * 1024 : 200 * 1024 * 1024,
       renderMode: 'renderMode' in settings ? settings.renderMode : 'webgl',
     },
-    target,
-    driver
+    target
   )
 
   const initApp = () => {
@@ -78,7 +70,9 @@ You can remove the option from your \`src/index.js\`-file. And you can safely re
     }
   }
 
-  renderer.init().then(fontLoader).then(initApp)
+  shaderLoader()
+  fontLoader()
+  initApp()
 
   return renderer
 }

package/src/engines/L3/shaderLoader.js

@@ -0,0 +1,12 @@
+import Settings from '../../settings.js'
+import { renderer } from './launch.js'
+
+export default () => {
+  const stage = renderer.stage
+  Settings.get('shaders', []).forEach((shader) => {
+    stage.shManager.registerShaderType(shader.name, shader.type)
+  })
+  Settings.get('effects', []).forEach((effect) => {
+    stage.shManager.registerShaderType(effect.name, effect.type)
+  })
+}

package/src/engines/index.js

@@ -1 +1 @@
-export { default as L3 } from './L3'
+export { default as L3 } from './L3/index.js'

package/src/launch.d.ts

@@ -16,7 +16,7 @@
  */
 
 import ApplicationInstance from './application'
-import {type Stage} from '@lightningjs/renderer'
+import {type Stage, type ShaderEffect as RendererShaderEffect, type WebGlCoreShader} from '@lightningjs/renderer'
 interface WebFont {
   /**
   * Name of the font family
@@ -61,6 +61,15 @@ type SdfFont = {
   type: 'msdf' | 'sdf',
 } & (SdfFontWithFile | SdfFontWithPngJson)
 
+type Shader = {
+  name: string,
+  type: WebGlCoreShader
+}
+
+type ShaderEffect = {
+  name: string,
+  type: RendererShaderEffect
+}
 
 type ScreenResolutions = 'hd' | '720p' | 720 | 'fhd' | 'fullhd' | '1080p' | 1080 | '4k' | '2160p' | 2160
 
@@ -101,13 +110,21 @@ export interface Settings {
    * Fonts to be used in the Application
    */
   fonts?: Font[],
+  /**
+   * Effects to be used by DynamicShader
+   */
+  effects?: ShaderEffect[],
+  /**
+   * Shaders to be used in the application
+   */
+  shaders?: Shader[],
   /**
    * Default font family to use in the Application when no font attribute is specified
    * on a Text-component
    *
    * The default font must be registered in the `fonts` array in the settings.
    *
-   * Defaults to `lato` font family
+   * Defaults to `sans-serif` font family, which is the default of the Lightning Renderer
    */
   defaultFont?: string,
   /**