@lightningjs/blits 0.9.4 → 0.9.6

package/src/components/Image.js

@@ -19,29 +19,26 @@ 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].nodeId) {
-          elms[0].populate(elementConfig0)
-        }
+    if(!elms[0]) {
+      elms[0] = this.element({parent: parent || 'root'}, component)
+    }
+    const elementConfig0 = {}
+  
 
-        return elms
-      },
-      effects: [
-        function anonymous(component, elms, context) {
-          elms[0].set('imageSource', component.imageSource)
-        },
-      ],
-      context: {},
-    },
+    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

@@ -19,8 +19,26 @@ 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/RouterView.js

@@ -22,28 +22,25 @@ 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 = {}
+    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)
 
-        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: {},
-    },
+    if(!elms[0].nodeId) {
+      elms[0].populate(elementConfig0)
+    }
+  
+return elms
+}, effects: [], context: {}},
     state() {
       return {
         activeView: null,

package/src/components/RouterView.orig.js

@@ -22,9 +22,25 @@ 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/Sprite.js

@@ -21,35 +21,31 @@ 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].nodeId) {
-          elms[0].populate(elementConfig0)
-        }
+    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)
 
-        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: {},
-    },
+    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: {}},
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {

package/src/components/Sprite.orig.js

@@ -21,9 +21,31 @@ import symbols from '../lib/symbols.js'
 
 export default () =>
   Component('Sprite', {
-    template: `
-      <Element w="100%" h="100%" :texture="$texture" :color="$color" />
-    `,
+    /* 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: {}},
     props: ['image', 'map', 'frame', 'color'],
     state() {
       return {

package/src/components/Text.js

@@ -20,65 +20,61 @@ 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 = {}
+    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)
 
-        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: {},
-    },
+    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,27 +20,61 @@ 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"
-        :h="$maxheight"
-        :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('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/engines/L3/element.js

@@ -311,11 +311,10 @@ const Element = {
   },
   animate(prop, value, transition) {
     if (this.node[prop] === value) return Promise.resolve()
-    // check if a transition is already schedule or running on the same prop
+    // check if a transition is already scheduled or running on the same prop
     if (this.scheduledTransitions[prop]) {
-      // clearTimeout(this.scheduledTransitions[prop].timeout)
       if (this.scheduledTransitions[prop].f.state === 'running') {
-        this.scheduledTransitions[prop].f.pause()
+        this.scheduledTransitions[prop].f.stop()
         // fastforward to final value
         this.node[prop] = this.scheduledTransitions[prop].v
       }
@@ -348,33 +347,33 @@ const Element = {
       const startValue = this.node[prop]
       this.scheduledTransitions[prop] = {
         v: props[prop],
-        f: () => {
-          try {
-            f.start()
-              .waitUntilStarted()
-              .then((animation) => {
-                // fire transition start callback if specified
-                transition.start &&
-                  typeof transition.start === 'function' &&
-                  transition.start.call(this.component, this, prop, startValue)
-                // continue the chain
-                animation
-                  .waitUntilStopped()
-                  .then(() => delete this.scheduledTransitions[prop])
-                  .then(() => {
-                    // fire transition end callback if specified
-                    transition.end &&
-                      typeof transition.end === 'function' &&
-                      transition.end.call(this.component, this, prop, this.node[prop])
-                  })
-                  .then(resolve)
+        cancel: false,
+        f,
+      }
+
+      try {
+        f.start()
+          .waitUntilStarted()
+          .then((animation) => {
+            // fire transition start callback if specified
+            transition.start &&
+              typeof transition.start === 'function' &&
+              transition.start.call(this.component, this, prop, startValue)
+            // continue the chain
+            animation
+              .waitUntilStopped()
+              .then(() => delete this.scheduledTransitions[prop])
+              .then(() => {
+                // fire transition end callback if specified
+                transition.end &&
+                  typeof transition.end === 'function' &&
+                  transition.end.call(this.component, this, prop, this.node[prop])
               })
-          } catch (e) {
-            Log.error(e)
-          }
-        },
+              .then(resolve)
+          })
+      } catch (e) {
+        Log.error(e)
       }
-      this.scheduledTransitions[prop].f()
     })
   },
   destroy() {

package/src/lib/codegenerator/generator.js

@@ -218,7 +218,7 @@ const generateForLoopCode = function (templateObject, parent) {
     ctx.renderCode.push(`parent = ${parent}`)
   }
 
-  const forCounter = counter
+  const forStartCounter = counter
 
   // reference all reactive attributes (except those referencing the iterator item),
   // to ensure that reactivity is registered, even when the initial array is empty
@@ -282,12 +282,15 @@ const generateForLoopCode = function (templateObject, parent) {
   ctx.renderCode = ctx.renderCode.concat(ctx.effectsCode)
   ctx.renderCode.push('}')
 
+  const forEndCounter = counter
   ctx.renderCode.push(`
-   if(elms[${forCounter}]) {
-      Object.keys(elms[${forCounter}]).forEach(key => {
+   if(elms[${forStartCounter}]) {
+      Object.keys(elms[${forStartCounter}]).forEach(key => {
         if(keys.indexOf(key) === -1) {
-          elms[${forCounter}][key].destroy && elms[${forCounter}][key].destroy()
-          delete elms[1][key]
+          for(let i=${forStartCounter}; i <= ${forEndCounter}; i++){
+            elms[i][key].destroy && elms[i][key].destroy()
+            delete elms[i][key]
+          }
         }
       })
     }

package/src/lib/lifecycle.js

@@ -19,7 +19,17 @@ import { Log } from './log.js'
 import { emit, privateEmit } from './hooks.js'
 import symbols from './symbols.js'
 
-const states = ['init', 'ready', 'focus', 'unfocus', 'destroy']
+const states = [
+  'init', // fired upon component instantiation
+  'ready', // fired when component instantiated, reactivity setup done and template spawned
+  'focus', // fired when receiving focus (can occur multiple times)
+  'unfocus', // fired when losing focus (can occur multiple times)
+  'destroy', // fired when component is destroyed and removed
+  'attach', // fired when entering the viewport margin and attached to the render tree
+  'detach', // fired when leaving the viewport margin and detached from the render tree
+  'enter', // fired when entering the visible viewport
+  'exit', // fired when leaving the visible viewport
+]
 
 export default {
   previous: null,

package/src/lib/symbols.js

@@ -3,6 +3,7 @@ export default {
   cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),
   destroy: Symbol('destroy'),
+  holder: Symbol('holder'),
   id: Symbol('id'),
   identifier: Symbol('identifier'),
   index: Symbol('index'),