@lightningjs/blits 0.9.6 → 0.9.8

package/src/components/Image.js

@@ -19,26 +19,29 @@ import Component from '../component.js'
 
 export default () =>
   Component('Image', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context
-) {
-const elms = []
+    /* 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]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
+
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
 
-    if(!elms[0].nodeId) {
-      elms[0].populate(elementConfig0)
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context
-) {
-elms[0].set('imageSource', component.imageSource)
-}], context: {}},
+        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

@@ -19,26 +19,8 @@ import Component from '../component.js'
 
 export default () =>
   Component('Image', {
-    /* 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: {}},
+    template: `
+      <Element :imageSource="$imageSource" />`,
     props: ['src'],
     computed: {
       imageSource() {

package/src/components/RouterView.js

@@ -22,25 +22,28 @@ let handler
 
 export default () =>
   Component('RouterView', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context
-) {
-const elms = []
+    /* 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]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
 
-    if(!elms[0].nodeId) {
-      elms[0].populate(elementConfig0)
-    }
-  
-return elms
-}, effects: [], context: {}},
+        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

@@ -22,25 +22,9 @@ let handler
 
 export default () =>
   Component('RouterView', {
-    /* 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: {}},
+    template: `
+      <Element w="100%" height="100%"></Element>
+    `,
     state() {
       return {
         activeView: null,

package/src/components/Sprite.js

@@ -21,31 +21,35 @@ import symbols from '../lib/symbols.js'
 
 export default () =>
   Component('Sprite', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context
-) {
-const elms = []
+    /* 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['h'] = parent.node.height * (100 / 100)
+        if (!elms[0]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
+
+        elementConfig0['w'] = parent.node.width * (100 / 100)
+        elementConfig0['h'] = parent.node.height * (100 / 100)
+
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
 
-    if(!elms[0].nodeId) {
-      elms[0].populate(elementConfig0)
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context
-) {
-elms[0].set('texture', component.texture)
-},function anonymous(component,elms,context
-) {
-elms[0].set('color', component.color)
-}], context: {}},
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context) {
+          elms[0].set('texture', component.texture)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('color', component.color)
+        },
+      ],
+      context: {},
+    },
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {

package/src/components/Sprite.orig.js

@@ -21,31 +21,9 @@ import symbols from '../lib/symbols.js'
 
 export default () =>
   Component('Sprite', {
-    /* 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['h'] = parent.node.height * (100 / 100)
-
-    if(!elms[0].nodeId) {
-      elms[0].populate(elementConfig0)
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context
-) {
-elms[0].set('texture', component.texture)
-},function anonymous(component,elms,context
-) {
-elms[0].set('color', component.color)
-}], context: {}},
+    template: `
+      <Element w="100%" h="100%" :texture="$texture" :color="$color" />
+    `,
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {

package/src/components/Text.js

@@ -20,61 +20,65 @@ import Settings from '../settings.js'
 
 export default () =>
   Component('Text', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context
-) {
-const elms = []
+    /* 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]) {
+          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('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('h', component.maxheight)
-},function anonymous(component,elms,context
-) {
-elms[0].set('textAlign', component.align)
-},function anonymous(component,elms,context
-) {
-elms[0].set('overflowSuffix', component.textoverflow)
-}], context: {}},
+        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('h', component.maxheight)
+        },
+        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

@@ -20,61 +20,27 @@ import Settings from '../settings.js'
 
 export default () =>
   Component('Text', {
-    /* 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('h', component.maxheight)
-},function anonymous(component,elms,context
-) {
-elms[0].set('textAlign', component.align)
-},function anonymous(component,elms,context
-) {
-elms[0].set('overflowSuffix', component.textoverflow)
-}], context: {}},
+    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"
+        :h="$maxheight"
+        :textAlign="$align"
+        :overflowSuffix="$textoverflow"
+        @loaded="$@loaded"
+        @error="$@error"
+      />`,
     props: [
       'content',
       {

package/src/engines/L3/element.js

@@ -210,6 +210,9 @@ const Props = {
   set clipping(v) {
     this._props.clipping = v
   },
+  set overflow(v) {
+    this._props.clipping = !!!v
+  },
   set fontFamily(v) {
     this._props.fontFamily = v
   },

package/src/engines/L3/launch.js

@@ -62,6 +62,7 @@ You can remove the option from your \`src/index.js\`-file. And you can safely re
       // gpu memory limit, converted from mb to bytes - defaults to 200mb
       txMemByteThreshold:
         'gpuMemoryLimit' in settings ? settings.gpuMemoryLimit * 1024 * 1024 : 200 * 1024 * 1024,
+      renderMode: 'renderMode' in settings ? settings.renderMode : 'webgl',
     },
     target,
     driver

package/src/launch.d.ts

@@ -69,6 +69,7 @@ type Font = WebFont | SdfFont
 export type DebugLevel = 0 | 1 | 2
 export type LogTypes = 'info' | 'warn' | 'error' | 'debug'
 export type ReactivityModes = 'Proxy' | 'defineProperty'
+export type RenderModes = 'webgl' | 'canvas'
 
 interface ExtensionLoader {
   async (stage: Stage): void
@@ -216,7 +217,16 @@ export interface Settings {
    *
    * Defaults to `200` (mb)
    */
-  gpuMemoryLimit?: number
+  gpuMemoryLimit?: number,
+  /**
+   * Defines which mode the renderer should operate in: `webgl` or `canvas`
+   *
+   * SDF fonts are not supported in _canvas_ renderMode. Instead, _web_ fonts should
+   * be used. Also note that Canvas2d rendering doesnt support the use of shaders.
+   *
+   * Defaults to `webgl`
+   */
+  renderMode?: RenderModes
 }
 
 /**

package/src/lib/reactivity/effect.js

@@ -58,6 +58,7 @@ export const track = (target, key) => {
 }
 
 export const trigger = (target, key, force = false) => {
+  if (paused) return
   const effectsMap = objectMap.get(target)
   if (!effectsMap) {
     return

package/src/lib/reactivity/reactive.js

@@ -32,6 +32,11 @@ const getRaw = (value) => {
 }
 
 const reactiveProxy = (original, _parent = null, _key) => {
+  // don't create a proxy when a Blits component is assigned to a state variable
+  if (typeof original === 'object' && original[symbols.id]) {
+    return original
+  }
+
   // if original object is already a proxy, don't create a new one but return the existing one instead
   const existingProxy = getProxy(original)
   if (existingProxy) {
@@ -89,7 +94,11 @@ const reactiveProxy = (original, _parent = null, _key) => {
         result = Reflect.set(target, key, value, receiver)
       }
 
-      if (result && oldRawValue !== value) {
+      if (result && oldRawValue !== rawValue) {
+        // if we're assigning an array key directly trigger reactivity on the parent key as well
+        if (Array.isArray(target) && key in target) {
+          trigger(_parent, _key, true)
+        }
         trigger(target, key, true)
       }
       return result

package/src/lib/setup/base.js

@@ -272,11 +272,15 @@ export default (component, name) => {
 const deleteChildren = function (children) {
   for (let i = 0; i < children.length; i++) {
     if (!children[i]) return
-    if (Array.isArray(children[i])) {
-      deleteChildren(children[i])
-    } else if (children[i].destroy) {
+    // call destroy when method is available on child
+    if (children[i].destroy && typeof children[i].destroy === 'function') {
       children[i].destroy()
     }
+    // recursively call deleteChildren when it's an object of items (happens when using a forloop construct)
+    else if (Object.getPrototypeOf(children[i]) === Object.prototype) {
+      deleteChildren(Object.values(children[i]))
+    }
+
     children[i] = null
   }
 

package/src/lib/setup/state.js

@@ -19,7 +19,7 @@ import { Log } from '../log.js'
 
 import symbols from '../symbols.js'
 
-export default (component, state) => {
+export default (component, state = () => {}) => {
   component[symbols.stateKeys] = []
 
   state = { ...state.apply(component.prototype), ...{ hasFocus: false } }

package/src/router/router.js

@@ -253,13 +253,6 @@ const removeView = async (route, view, transition) => {
   if (route.options && route.options.keepAlive === true) {
     cacheMap.set(route, { view: view, focus: previousFocus })
   } else {
-    // remove and cleanup
-    for (let i = 0; i < view[symbols.children].length; i++) {
-      // if (view[symbols.children][i] && view[symbols.children][i].destroy) {
-      //   view[symbols.children][i].destroy()
-      view[symbols.children][i] = null
-      // }
-    }
     view.destroy()
     view = null
   }