@lightningjs/blits 0.9.6 → 0.9.7

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/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/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 } }