@lightningjs/blits 1.14.1 → 1.16.0

package/src/components/RouterView.js

@@ -29,13 +29,24 @@ export default () =>
         let componentType
         const rootComponent = component
         let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
         const elementConfig0 = {}
 
-        elms[0] = this.element({ parent: parent || 'root' }, component)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig0['w'] = parent.node.width * (100 / 100)
         elementConfig0['height'] = parent.node.height * (100 / 100)
         elms[0].populate(elementConfig0)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         return elms
       },
       effects: [],

package/src/components/Sprite.js

@@ -28,15 +28,26 @@ export default () =>
         let componentType
         const rootComponent = component
         let propData
+        let slotComponent
+        let inSlot = false
+        let slotChildCounter = 0
         const elementConfig0 = {}
 
-        elms[0] = this.element({ parent: parent || 'root' }, component)
+        elms[0] = this.element(
+          { parent: parent || 'root' },
+          inSlot === true ? slotComponent : component
+        )
 
         elementConfig0['w'] = parent.node.width * (100 / 100)
         elementConfig0['h'] = parent.node.height * (100 / 100)
         elementConfig0['texture'] = component.texture
         elementConfig0['color'] = component.color
         elms[0].populate(elementConfig0)
+
+        if (inSlot === true) {
+          slotChildCounter -= 1
+        }
+
         return elms
       },
       effects: [
@@ -52,7 +63,7 @@ export default () =>
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {
-        spriteTexture: false,
+        spriteTexture: null,
       }
     },
     computed: {
@@ -62,7 +73,7 @@ export default () =>
             ? Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
             : this.map[this.frame]
 
-        if (this.spriteTexture && options) {
+        if (this.spriteTexture !== null && options) {
           return this[symbols.renderer]().createTexture('SubTexture', {
             texture: this.spriteTexture,
             x: options.x,
@@ -74,7 +85,7 @@ export default () =>
       },
     },
     hooks: {
-      ready() {
+      init() {
         this.spriteTexture = this[symbols.renderer]().createTexture('ImageTexture', {
           src: this.image,
         })

package/src/components/Sprite.orig.js

@@ -27,7 +27,7 @@ export default () =>
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {
-        spriteTexture: false,
+        spriteTexture: null,
       }
     },
     computed: {
@@ -37,7 +37,7 @@ export default () =>
             ? Object.assign({}, this.map.defaults || {}, this.map.frames[this.frame])
             : this.map[this.frame]
 
-        if (this.spriteTexture && options) {
+        if (this.spriteTexture !== null && options) {
           return this[symbols.renderer]().createTexture('SubTexture', {
             texture: this.spriteTexture,
             x: options.x,
@@ -49,7 +49,7 @@ export default () =>
       },
     },
     hooks: {
-      ready() {
+      init() {
         this.spriteTexture = this[symbols.renderer]().createTexture('ImageTexture', {
           src: this.image,
         })

package/src/engines/L3/element.js

@@ -383,6 +383,37 @@ const propsTransformer = {
   set content(v) {
     this.props['text'] = '' + v
   },
+  set placement(v) {
+    let x, y
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      if ('x' in v === true) {
+        x = v.x
+      }
+      if ('y' in v === true) {
+        y = v.y
+      }
+    } else {
+      v === 'center' || v === 'right' ? (x = v) : (y = v)
+    }
+
+    // Set X position
+    if (x === 'center') {
+      this.x = '50%'
+      this.props['mountX'] = 0.5
+    } else if (x === 'right') {
+      this.x = '100%'
+      this.props['mountX'] = 1
+    }
+
+    // Set Y position
+    if (y === 'middle') {
+      this.y = '50%'
+      this.props['mountY'] = 0.5
+    } else if (y === 'bottom') {
+      this.y = '100%'
+      this.props['mountY'] = 1
+    }
+  },
 }
 
 const Element = {

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

@@ -362,30 +362,164 @@ test('Element - Set `fit` property should not set not required keys', (assert) =
   assert.end()
 })
 
-test('Element - Set `float` property with value `center`', (assert) => {
+test('Element - Set `placement` property with value `center`', (assert) => {
   assert.capture(renderer, 'createNode', () => new EventEmitter())
   const el = createElement()
 
-  el.set('float', 'center')
+  el.set('placement', 'center')
 
   assert.equal(el.node['mountX'], 0.5, 'Node mountX parameter should set to 0.5')
   assert.equal(el.props.props['mountX'], 0.5, 'Props mountX parameter should set to 0.5')
   assert.equal(el.node['x'], 960, 'Node x parameter should set to half of parent node width, 960')
   assert.equal(el.props.props['x'], 960, 'props x parameter should be set to 960')
+  assert.equal(
+    el.node['y'],
+    undefined,
+    'Node Y parameter should not be modified from default value'
+  )
 
   assert.end()
 })
 
-test('Element - Set `float` property with value `right`', (assert) => {
+test('Element - Set `placement` property with value `right`', (assert) => {
   assert.capture(renderer, 'createNode', () => new EventEmitter())
   const el = createElement()
 
-  el.set('float', 'right')
+  el.set('placement', 'right')
 
   assert.equal(el.node['mountX'], 1, 'Node mountX parameter should set to 1')
   assert.equal(el.props.props['mountX'], 1, 'Props mountX parameter should set to 1')
   assert.equal(el.node['x'], 1920, 'Node x parameter should set to parent node full width, 1920')
   assert.equal(el.props.props['x'], 1920, 'props x parameter should be set to 1920')
+  assert.equal(
+    el.node['y'],
+    undefined,
+    'Node Y parameter should not be modified from default value'
+  )
+
+  assert.end()
+})
+
+test('Element - Set `placement` property with value `middle`', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('placement', 'middle')
+
+  assert.equal(el.node['mountY'], 0.5, 'Node mountY parameter should set to 0.5')
+  assert.equal(el.props.props['mountY'], 0.5, 'Props mountY parameter should set to 0.5')
+  assert.equal(el.node['y'], 540, 'Node Y parameter should set to half of parent node height, 540')
+  assert.equal(el.props.props['y'], 540, 'props Y parameter should be set to 540')
+  assert.equal(
+    el.node['x'],
+    undefined,
+    'Node X parameter should not be modified from default value'
+  )
+
+  assert.end()
+})
+
+test('Element - Set `placement` property with value `bottom`', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('placement', 'bottom')
+
+  assert.equal(el.node['mountY'], 1, 'Node mountY parameter should set to 1')
+  assert.equal(el.props.props['mountY'], 1, 'Props mountY parameter should set to 1')
+  assert.equal(el.node['y'], 1080, 'Node Y parameter should set to parent node full height, 1080')
+  assert.equal(el.props.props['y'], 1080, 'props Y parameter should be set to 1080')
+  assert.equal(
+    el.node['x'],
+    undefined,
+    'Node X parameter should not be modified from default value'
+  )
+
+  assert.end()
+})
+
+test('Element - Set `placement` property with value `bottom` & x = 300', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('placement', 'bottom')
+
+  assert.equal(el.node['mountY'], 1, 'Node mountY parameter should set to 1')
+  assert.equal(el.props.props['mountY'], 1, 'Props mountY parameter should set to 1')
+  assert.equal(el.node['y'], 1080, 'Node Y parameter should set to parent node full height, 1080')
+  assert.equal(el.props.props['y'], 1080, 'props Y parameter should be set to 1080')
+
+  el.set('x', 300)
+
+  assert.equal(el.node['x'], 300, 'Node x parameter should set custom value 300')
+
+  assert.end()
+})
+
+test('Element - Set `placement` property with object value `{x:"center", y:"middle"}`', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('placement', "{x:'center', y:'middle'}")
+
+  assert.equal(el.node['mountX'], 0.5, 'Node mountX parameter should set to 0.5')
+  assert.equal(el.props.props['mountX'], 0.5, 'Props mountX parameter should set to 0.5')
+  assert.equal(el.node['x'], 960, 'Node x parameter should set to half of parent node width, 960')
+
+  assert.equal(el.node['mountY'], 0.5, 'Node mountY parameter should set to 0.5')
+  assert.equal(el.props.props['mountY'], 0.5, 'Props mountY parameter should set to 0.5')
+  assert.equal(el.node['y'], 540, 'Node Y parameter should set to half of parent node height, 540')
+
+  assert.end()
+})
+
+test('Element - Set `placement` property with object value `{x:"center", y:"bottom"}`', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('placement', "{x:'center', y:'bottom'}")
+
+  assert.equal(el.node['mountX'], 0.5, 'Node mountX parameter should set to 0.5')
+  assert.equal(el.props.props['mountX'], 0.5, 'Props mountX parameter should set to 0.5')
+  assert.equal(el.node['x'], 960, 'Node x parameter should set to half of parent node width, 960')
+
+  assert.equal(el.node['mountY'], 1, 'Node mountY parameter should set to 1')
+  assert.equal(el.props.props['mountY'], 1, 'Props mountY parameter should set to 1')
+  assert.equal(el.node['y'], 1080, 'Node Y parameter should set to parent node full height , 1080')
+
+  assert.end()
+})
+
+test('Element - Set `placement` property with object value `{x:"right", y:"middle"}`', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('placement', "{x:'right', y:'middle'}")
+
+  assert.equal(el.node['mountX'], 1, 'Node mountX parameter should set to 1')
+  assert.equal(el.props.props['mountX'], 1, 'Props mountX parameter should set to 1')
+  assert.equal(el.node['x'], 1920, 'Node x parameter should set to parent node full width, 1920')
+
+  assert.equal(el.node['mountY'], 0.5, 'Node mountY parameter should set to 0.5')
+  assert.equal(el.props.props['mountY'], 0.5, 'Props mountY parameter should set to 0.5')
+  assert.equal(el.node['y'], 540, 'Node Y parameter should set to half of parent node height, 540')
+
+  assert.end()
+})
+
+test('Element - Set `placement` property with object value `{x:"right", y:"bottom"}`', (assert) => {
+  assert.capture(renderer, 'createNode', () => new EventEmitter())
+  const el = createElement()
+
+  el.set('placement', "{x:'right', y:'bottom'}")
+
+  assert.equal(el.node['mountX'], 1, 'Node mountX parameter should set to 1')
+  assert.equal(el.props.props['mountX'], 1, 'Props mountX parameter should set to 1')
+  assert.equal(el.node['x'], 1920, 'Node x parameter should set to parent node full width, 1920')
+
+  assert.equal(el.node['mountY'], 1, 'Node mountY parameter should set to 1')
+  assert.equal(el.props.props['mountY'], 1, 'Props mountY parameter should set to 1')
+  assert.equal(el.node['y'], 1080, 'Node Y parameter should set to parent node height, 1080')
 
   assert.end()
 })

package/src/lib/codegenerator/generator.js

@@ -24,6 +24,9 @@ export default function (templateObject = { children: [] }) {
       'let componentType',
       'const rootComponent = component',
       'let propData',
+      'let slotComponent',
+      'let inSlot = false',
+      'let slotChildCounter = 0',
     ],
     effectsCode: [],
     context: { props: [], components: this.components },
@@ -79,7 +82,7 @@ const generateElementCode = function (
   }
 
   renderCode.push(`
-    ${elm} = this.element({parent: parent || 'root'}, component)
+    ${elm} = this.element({parent: parent || 'root'}, inSlot === true ? slotComponent : component)
   `)
 
   if (options.forloop) {
@@ -96,7 +99,7 @@ const generateElementCode = function (
   Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
-        elementConfig${counter}['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
+        elementConfig${counter}['parent'] = component[Symbol.for('slots')] !== undefined && Array.isArray(component[Symbol.for('slots')]) === true && component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
       `)
     }
 
@@ -149,6 +152,12 @@ const generateElementCode = function (
 
   renderCode.push(`${elm}.populate(elementConfig${counter})`)
 
+  renderCode.push(`
+    if(inSlot === true) {
+      slotChildCounter -= 1
+    }
+  `)
+
   if (options.forloop) {
     renderCode.push('}')
   }
@@ -247,7 +256,8 @@ const generateComponentCode = function (
 
     if (${elm}[Symbol.for('slots')][0]) {
       parent = ${elm}[Symbol.for('slots')][0]
-      component = ${elm}
+      slotComponent = ${elm}
+      inSlot = true
     } else {
       parent = ${elm}[Symbol.for('children')][0]
     }
@@ -258,15 +268,24 @@ const generateComponentCode = function (
   }
 
   if (children) {
+    if (!options.forloop) {
+      renderCode.push(`
+        if(inSlot === true) {
+          slotChildCounter = ${children.length}  + 1
+        }
+      `)
+    }
     counter++
     generateElementCode.call(this, { children }, false, { ...options })
   }
-  // if (!options.forloop) {
-  //   renderCode.push(`
-  //     // console.log('here', component, rootComponent)
-  //   component = rootComponent
-  // `)
-  // }
+
+  if (!options.forloop) {
+    renderCode.push(`
+      if (inSlot === true && slotChildCounter === 0) {
+        inSlot = false
+      }
+    `)
+  }
 }
 
 const generateForLoopCode = function (templateObject, parent) {
@@ -288,7 +307,7 @@ const generateForLoopCode = function (templateObject, parent) {
   const result = regex.exec(forLoop)
 
   // can be improved with a smarter regex
-  const [item, index = 'index'] = result[1]
+  const [item, index] = result[1]
     .replace('(', '')
     .replace(')', '')
     .split(/\s*,\s*/)
@@ -306,12 +325,15 @@ const generateForLoopCode = function (templateObject, parent) {
     ctx.renderCode.push(`parent = ${parent}`)
   }
 
-  const indexRegex = new RegExp(`\\$${index}(?!['\\w])`)
-  const indexResult = indexRegex.exec(key)
-  if (Array.isArray(indexResult)) {
-    ctx.renderCode.push(
-      `console.warn(" Using '${index}' in the key, like key=${key},  is not recommended")`
-    )
+  // If the index variable is not defined, the key attribute would not reference it.
+  if (index !== undefined) {
+    const indexRegex = new RegExp(`\\$${index}(?!['\\w])`)
+    const indexResult = indexRegex.exec(key)
+    if (Array.isArray(indexResult)) {
+      ctx.renderCode.push(
+        `console.warn(" Using '${index}' in the key, like key=${key},  is not recommended")`
+      )
+    }
   }
 
   const forStartCounter = counter
@@ -324,7 +346,14 @@ const generateForLoopCode = function (templateObject, parent) {
       let l = rawCollection.length
       while(l--) {
         const ${item} = rawCollection[l]
+  `)
+  // push reference of index variable
+  if (index !== undefined) {
+    ctx.renderCode.push(`
         const ${index} = l
+    `)
+  }
+  ctx.renderCode.push(`
         keys.add('' +  ${interpolate(key, '') || 'l'})
       }
   `)
@@ -341,8 +370,15 @@ const generateForLoopCode = function (templateObject, parent) {
       for(let __index = 0; __index < length; __index++) {
         const scope = Object.create(component)
         parent = ${parent}
-        scope['${index}'] = __index
         scope['${item}'] = rawCollection[__index]
+  `)
+  // If the index variable is declared, include it in the scope object
+  if (index !== '') {
+    ctx.renderCode.push(`
+        scope['${index}'] = __index
+    `)
+  }
+  ctx.renderCode.push(`
         scope['key'] = '' + ${forKey || '__index'}
   `)
   if ('ref' in templateObject && templateObject.ref.indexOf('$') === -1) {

package/src/lib/reactivity/reactive.js

@@ -15,7 +15,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ImageTexture, Texture } from '@lightningjs/renderer'
 import { track, trigger, pauseTracking, resumeTracking } from './effect.js'
 import symbols from '../symbols.js'
 import deepEqualArray from '../../helpers/deepEqualArray.js'
@@ -30,14 +29,15 @@ export const getRaw = (value) => {
 }
 
 const reactiveProxy = (original, _parent = null, _key, global) => {
-  // don't create a proxy when a Blits component or an Image Texture
-  // is assigned to a state variable
-  if (typeof original === 'object') {
-    if (original[symbols.id] !== undefined) return original
-    if (original.constructor.name === ImageTexture.name) return original
-    if (original.txManager !== undefined) return original
+  // only create a proxy for plain objects. Other classes, Blits components, renderer textures etc
+  // are returned unmodified and will not become reactive
+  if (
+    typeof original === 'object' &&
+    Array.isArray(original) === false &&
+    Object.getPrototypeOf(original) !== Object.prototype
+  ) {
+    return original
   }
-
   // if original object is already a proxy, don't create a new one but return the existing one instead
   const existingProxy = proxyMap.get(original)
   if (existingProxy !== undefined) {

package/vite/blitsFileConverter.js

@@ -16,23 +16,52 @@
  */
 
 import blitsfileconverter from '../src/lib/blitsfileconverter/blitsfileconverter.js'
+import path from 'node:path'
+import fs from 'node:fs'
+import { createRequire } from 'module'
 
 export default function blitsFileType() {
   return {
     name: 'vite-plugin-blits-file-type',
     enforce: 'pre',
-    transform(src, id) {
+
+    resolveId(source, importer) {
+      if (source.endsWith('.blits')) {
+        return importer ? path.resolve(path.dirname(importer), source) : path.resolve(source)
+      }
+      return null
+    },
+
+    load(id) {
       if (id.endsWith('.blits')) {
-        try {
-          const transformedCode = blitsfileconverter(src)
-          return {
-            code: transformedCode,
-            map: null, // no source map
+        const source = fs.readFileSync(id, 'utf-8')
+        let code = blitsfileconverter(source)
+
+        // Check for TypeScript and transpile to JS if needed
+        if (/<script\s+lang=["']ts["']/.test(source)) {
+          // Resolve the local typescript dependency
+          const userRequire = createRequire(process.cwd() + '/')
+          let ts
+          try {
+            ts = userRequire('typescript')
+          } catch (err) {
+            throw new Error(
+              `\n\nThe file "${id}" contains \`lang="ts"\`, indicating it uses TypeScript. \nTo enable TypeScript support, please install the 'typescript' package as a dev dependency by running:\n\n` +
+                '  npm install --save-dev typescript\n\n'
+            )
           }
-        } catch (error) {
-          this.error(error)
+          const transpiled = ts.transpileModule(code, {
+            compilerOptions: { target: ts.ScriptTarget.ESNext, module: ts.ModuleKind.ESNext },
+          })
+          code = transpiled.outputText
+        }
+
+        return {
+          code,
+          map: null,
         }
       }
+      return null
     },
   }
 }

package/vite/preCompiler.js

@@ -30,12 +30,13 @@ export default function () {
 
       const fileExtension = path.extname(filePath)
 
-      // we should only precompile .js and .ts files
-      if (fileExtension === '.js' || fileExtension === '.ts') {
+      // we should only precompile .blits, .js and .ts files
+      if (fileExtension === '.js' || fileExtension === '.ts' || fileExtension === '.blits') {
         return compiler(source, filePath)
       }
-      const relativePath = path.relative(process.cwd(), filePath)
-      return compiler(source, relativePath)
+
+      // vite expects null if there is no modification
+      return null
     },
   }
 }