@lightningjs/blits 0.9.5 → 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/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/router/router.js

@@ -46,6 +46,9 @@ const normalizePath = (path) => {
       .toLowerCase()
   )
 }
+const isObject = (v) => typeof v === 'object' && v !== null
+
+const isString = (v) => typeof v === 'string'
 
 export const matchHash = (path, routes = []) => {
   // remove trailing slashes
@@ -57,6 +60,7 @@ export const matchHash = (path, routes = []) => {
     const route = routes[i]
     route.path = normalizePath(route.path)
     if (route.path === path) {
+      route.params = {}
       matchingRoute = route
     } else if (route.path.indexOf(':') > -1) {
       // match dynamic route parts
@@ -96,6 +100,9 @@ export const matchHash = (path, routes = []) => {
 
   if (matchingRoute) {
     matchingRoute.options = { ...matchingRoute.options, ...overrideOptions }
+    if (!matchingRoute.data) {
+      matchingRoute.data = {}
+    }
     currentRoute = matchingRoute
   }
 
@@ -107,9 +114,20 @@ export const navigate = async function () {
   if (this.parent[symbols.routes]) {
     const previousRoute = currentRoute
     const hash = getHash()
-    const route = matchHash(hash, this.parent[symbols.routes])
-
+    let route = matchHash(hash, this.parent[symbols.routes])
+    let beforeHookOutput
     if (route) {
+      if (route.hooks) {
+        if (route.hooks.before) {
+          beforeHookOutput = await route.hooks.before(route, previousRoute)
+          if (isString(beforeHookOutput)) {
+            currentRoute = previousRoute
+            to(beforeHookOutput)
+            return
+          }
+        }
+      }
+      route = isObject(beforeHookOutput) ? beforeHookOutput : route
       // add the previous route (technically still the current route at this point)
       // into the history stack, unless navigating back or inHistory flag of route is false
       if (navigatingBack === false && previousRoute && previousRoute.options.inHistory === true) {
@@ -134,8 +152,8 @@ export const navigate = async function () {
         holder.populate({})
         holder.set('w', '100%')
         holder.set('h', '100%')
-        // merge props with potential route params to be injected into the component instance
-        const props = { ...this[symbols.props], ...route.params, ...navigationData }
+        // merge props with potential route params, navigation data and route data to be injected into the component instance
+        const props = { ...this[symbols.props], ...route.params, ...navigationData, ...route.data }
 
         view = await route.component({ props }, holder, this)
         if (view[Symbol.toStringTag] === 'Module') {