@lightningjs/blits 0.5.7 → 0.5.9

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+# v0.5.8
+
+_21 dec 2023_
+
+- Changed transition-end callback to receive real prop value from node
+- Implemented symbol for `wrapper` on Component (freeing up the name wrapper to be used in Component state)
+- Added functionality to prevent a route ending up in the history stack (route option: `inHistory: false`)
+- Improved router backtracking logic
+- Added functionality to override route options during navigation
+- Upgraded to latest version of the renderer (0.6.1) which contains a fix for animations not finishing correctly
+
+# v0.5.8
+
+_15 dec 2023_
+
+- Internal refactor of the `Element`
+
 # v0.5.7
 
 _13 dec 2023_

package/boilerplate/package.json

@@ -31,6 +31,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^0.5.7"
+    "@lightningjs/blits": "^0.5.9"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {
@@ -42,7 +42,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.6.0",
+    "@lightningjs/renderer": "^0.6.1",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
   }
 }

package/src/component.js

@@ -121,7 +121,7 @@ const Component = (name = required('name'), config = required('config')) => {
     }
 
     this.parent = parentComponent
-    this.wrapper = parentEl
+    this[symbols.wrapper] = parentEl
 
     Object.defineProperties(this, {
       type: {

package/src/element.js

@@ -33,172 +33,212 @@ const parseToObject = (str) => {
   return JSON.parse(str.replace(/'/g, '"').replace(/([\w-_]+)\s*:/g, '"$1":'))
 }
 
-const transformations = {
-  unpackTransition(obj) {
-    if (typeof obj === 'object' && obj.constructor.name === 'Object') {
-      if ('value' in obj) {
-        return obj.value
-      } else if ('transition' in obj) {
-        return this.unpackTransition(obj.transition)
-      } else {
-        return obj
-      }
-    } else {
-      return obj
+const parsePercentage = function (v, base) {
+  if (typeof v === 'string' && v.endsWith('%')) {
+    return this.element.node._parent[base] * (parseFloat(v) / 100)
+  }
+  return v
+}
+
+const unpackTransition = (obj) => {
+  if (typeof obj === 'object' && obj.constructor === Object) {
+    if ('value' in obj) {
+      return obj.value
+    } else if ('transition' in obj) {
+      return unpackTransition(obj.transition)
     }
+  }
+  return obj
+}
+
+const Props = {
+  set parent(v) {
+    this._props.parent = v === 'root' ? renderer.root : v.node
+    this._set.add('parent')
   },
-  remap(props) {
-    'w' in props && (props.width = props.w)
-    delete props.w
-    'h' in props && (props.height = props.h)
-    delete props.h
-    'z' in props && (props.zIndex = props.z)
-    delete props.z
-    'wordWrap' in props && (props.width = props.wordWrap)
-    delete props.wordWrap
-  },
-  parent(props) {
-    if (props.parent === 'root') {
-      props.parent = renderer.root
-    } else {
-      props.parent = props.parent.node
-    }
+  set rotation(v) {
+    this._props.rotation = v * (Math.PI / 180)
+    this._set.add('rotation')
+  },
+  set w(v) {
+    this._props.width = parsePercentage.call(this, v, 'width')
+    this._set.add('width')
+  },
+  set width(v) {
+    this._props.width = parsePercentage.call(this, v, 'width')
+    this._set.add('width')
   },
-  color(props) {
-    if (
-      typeof props.color === 'object' ||
-      (isObjectString(props.color) && (props.color = parseToObject(props.color)))
-    ) {
+  set h(v) {
+    this._props.height = parsePercentage.call(this, v, 'height')
+    this._set.add('height')
+  },
+  set height(v) {
+    this._props.height = parsePercentage.call(this, v, 'height')
+    this._set.add('height')
+  },
+  set x(v) {
+    this._props.x = parsePercentage.call(this, v, 'width')
+    this._set.add('x')
+  },
+  set y(v) {
+    this._props.y = parsePercentage.call(this, v, 'height')
+    this._set.add('y')
+  },
+  set z(v) {
+    this._props.zIndex = v
+    this._set.add('zIndex')
+  },
+  set zIndex(v) {
+    this._props.zIndex = v
+    this._set.add('zIndex')
+  },
+  set color(v) {
+    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
       const map = {
         top: 'colorTop',
         bottom: 'colorBottom',
         left: 'colorLeft',
         right: 'colorRight',
       }
-      Object.entries(props.color).forEach((color) => {
-        props[map[color[0]]] = colors.normalize(color[1])
+      this._props.color = 0
+      Object.entries(v).forEach((color) => {
+        this._props[map[color[0]]] = colors.normalize(color[1])
+        this._set.add(map[color[0]])
       })
-      delete props.color
     } else {
-      props.color = colors.normalize(props.color)
+      this._props.color = colors.normalize(v)
     }
+    this._set.add('color')
   },
-  percentage(props, prop) {
-    const map = {
-      w: 'width',
-      width: 'width',
-      x: 'width',
-      h: 'height',
-      height: 'height',
-      y: 'height',
-    }
-
-    const base = map[prop]
-    if (base) {
-      props[prop] = this.node._parent[base] * (parseFloat(props[prop]) / 100)
+  set src(v) {
+    this._props.src = v
+    if (!this._set.has('color')) {
+      this._props.color = 0xffffffff
     }
+    this._set.add('src')
   },
-  mount(props) {
-    if (
-      typeof props.mount === 'object' ||
-      (isObjectString(props.mount) && (props.mount = parseToObject(props.mount)))
-    ) {
-      const map = {
-        x: 'mountX',
-        y: 'mountY',
+  set texture(v) {
+    this._props.texture = v
+    this._set.add('texture')
+  },
+  set mount(v) {
+    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
+      if (v.x) {
+        this._props.mountX = v.x
+        this._set.add('mountX')
       }
-      Object.entries(props.mount).forEach((mount) => {
-        props[map[mount[0]]] = mount[1]
-      })
-      delete props.mount
+      if (v.y) {
+        this._props.mountY = v.y
+        this._set.add('mountY')
+      }
+    } else {
+      this._props.mountX = this._props.mountY = v
+      this._set.add('mountX')
+      this._set.add('mountY')
     }
   },
-  pivot(props) {
-    if (
-      typeof props.pivot === 'object' ||
-      (isObjectString(props.pivot) && (props.pivot = parseToObject(props.pivot)))
-    ) {
-      const map = {
-        x: 'pivotX',
-        y: 'pivotY',
+  set pivot(v) {
+    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
+      if (v.x) {
+        this._set.add('pivotX')
+        this._props.pivotX = v.x
       }
-      Object.entries(props.pivot).forEach((pivot) => {
-        props[map[pivot[0]]] = pivot[1]
-      })
-      delete props.pivot
+      if (v.y) {
+        this._set.add('pivotY')
+        this._props.pivotY = v.y
+      }
+    } else {
+      this._props.pivotX = this._props.pivotY = v
+      this._set.add('pivotX')
+      this._set.add('pivotY')
     }
   },
-  show(props) {
-    props.alpha = props.show ? 1 : 0
-    delete props.show
+  set scale(v) {
+    if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
+      if (v.x) this._props.scaleX = v.x
+      if (v.y) this._props.scaleY = v.y
+    } else {
+      this._props.scale = v
+    }
+    this._set.add('scale')
   },
-  rotation(props) {
-    props.rotation = props.rotation * (Math.PI / 180)
+  set show(v) {
+    this.alpha = v ? 1 : 0
   },
-  text(props) {
-    props.text = props.text !== undefined ? props.text.toString() : ''
+  set alpha(v) {
+    this._props.alpha = v
+    this._set.add('alpha')
   },
-  textureColor(props) {
-    if (!('color' in props)) {
-      props.color = 'src' in props || 'texture' in props ? '0xffffffff' : '0x00000000'
-    }
+  set text(v) {
+    this._props.text = v !== undefined ? v.toString() : ''
   },
-  effects(props) {
-    props.shader = renderer.createShader('DynamicShader', {
-      effects: props.effects.map((eff) => {
+  set effects(v) {
+    this._props.shader = renderer.createShader('DynamicShader', {
+      effects: v.map((eff) => {
         if (eff.props && eff.props.color) {
           eff.props.color = colors.normalize(eff.props.color)
         }
         return eff
       }),
     })
-
-    delete props.effects
+    this._set.add('effects')
   },
-  src(props, setProperties) {
-    if (setProperties.indexOf('color') === -1) {
-      props.color = 0xffffffff
-    }
+  set fontFamily(v) {
+    this._props.fontFamily = v
   },
-  texture(props, setProperties) {
-    this.src(props, setProperties)
+  set fontSize(v) {
+    this._props.fontSize = v
   },
-  maxLines(props, setProperties, element) {
-    if (props.maxLines) {
-      props.height = props.maxLines * element.node.fontSize
-    }
-    delete props.maxLines
+  set wordWrap(v) {
+    this._props.width = v
+  },
+  set contain(v) {
+    this._props.contain = v
+  },
+  set maxLines(v) {
+    this.height = v * this.element.node.fontSize
+  },
+  set letterSpacing(v) {
+    this._props.letterSpacing = v
+  },
+  set textAlign(v) {
+    this._props.textAlign = v
   },
 }
 
 const Element = {
-  defaults: {
-    rotation: 0,
-  },
+  defaults: {},
   populate(data) {
     const props = {
       ...this.defaults,
       ...this.config,
       ...data,
     }
+
     this.initData = data
 
     if (props[symbols.isSlot]) {
       this[symbols.isSlot] = true
     }
 
-    transformations.remap(props)
-    Object.keys(props).forEach((prop) => {
-      if (transformations[prop]) {
-        props[prop] = transformations.unpackTransition(props[prop])
-        transformations[prop](props, this.setProperties)
+    this.props.element = this
+
+    for (const [prop, value] of Object.entries(props)) {
+      const descriptor = Object.getOwnPropertyDescriptor(Props, prop)
+      if (descriptor && descriptor.set) {
+        this.props[prop] = unpackTransition(value)
       }
-      this.setProperties.push(prop)
-    })
+    }
 
-    transformations.textureColor(props, this.setProperties)
+    // correct for default white nodes
+    if (!this.props._set.has('color')) {
+      this.props._props.color =
+        this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
+    }
 
-    this.node = props.__textnode ? renderer.createTextNode(props) : renderer.createNode(props)
+    this.node = props.__textnode
+      ? renderer.createTextNode(this.props._props)
+      : renderer.createNode(this.props._props)
 
     if (props['@loaded']) {
       this.node.on('loaded', (el, { type, dimensions }) => {
@@ -213,43 +253,24 @@ const Element = {
     }
   },
   set(prop, value) {
-    if (isTransition(value) && this.setProperties.indexOf(prop) > -1) {
-      this.animate(prop, value.transition)
-    } else {
-      const props = {}
-      if (prop !== 'texture') {
-        props[prop] = transformations.unpackTransition(value)
-      } else {
-        props[prop] = value
-      }
+    const propsSet = new Set(this.props._set)
 
-      transformations.remap(props)
-      if (transformations[prop]) {
-        transformations[prop](props, this.setProperties, this)
-      }
+    this.props._props = {}
+    this.props[prop] = unpackTransition(value)
 
-      Object.keys(props).forEach((prop) => {
-        if (typeof props[prop] === 'string' && props[prop].endsWith('%')) {
-          transformations.percentage.call(this, props, prop)
-        }
-        this.node[prop] = props[prop]
-      })
+    for (const [p, v] of Object.entries(this.props._props)) {
+      if (isTransition(value) && propsSet.has(p)) {
+        return this.animate(p, v, value.transition)
+      } else {
+        this.node[p] = v
+      }
     }
-    this.setProperties.indexOf(prop) === -1 && this.setProperties.push(prop)
   },
-  delete() {
-    Log.debug('Deleting  Node', this.nodeId, this.node)
-    this.node.parent = null
-  },
-  get nodeId() {
-    return this.node && this.node.id
-  },
-  get ref() {
-    return this.initData.ref || null
-  },
-  animate(prop, value) {
+  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
     if (this.scheduledTransitions[prop]) {
-      clearTimeout(this.scheduledTransitions[prop].timeout)
+      // clearTimeout(this.scheduledTransitions[prop].timeout)
       if (this.scheduledTransitions[prop].f.state === 'running') {
         this.scheduledTransitions[prop].f.pause()
         // fastforward to final value
@@ -258,55 +279,73 @@ const Element = {
     }
 
     const props = {}
-    props[prop] = transformations.unpackTransition(value)
-
-    transformations.remap(props)
+    props[prop] = value
 
-    if (transformations[prop]) {
-      transformations[prop](props)
-    }
+    // construct animate function
+    const f = this.node.animate(props, {
+      duration:
+        typeof transition === 'object'
+          ? 'duration' in transition
+            ? transition.duration
+            : 300
+          : 300,
+      easing:
+        typeof transition === 'object'
+          ? 'function' in transition
+            ? transition.function
+            : 'ease'
+          : 'ease',
+    })
 
-    // works for now
-    prop = Object.keys(props).pop()
+    // schedule transition
+    return new Promise((resolve) => {
+      this.scheduledTransitions[prop] = {
+        v: props[prop],
+        f,
+        timeout: setTimeout(() => {
+          // fire transition start callback if specified
+          transition.start &&
+            typeof transition.start === 'function' &&
+            transition.start.call(this.component, this, prop, props[prop])
 
-    if (typeof props[prop] === 'string' && props[prop].endsWith('%')) {
-      transformations.percentage.call(this, props, prop)
-    }
-
-    if (this.node[prop] !== props[prop]) {
-      const f = this.node.animate(props, {
-        duration: typeof value === 'object' ? ('duration' in value ? value.duration : 300) : 300,
-        easing:
-          typeof value === 'object' ? ('function' in value ? value.function : 'ease') : 'ease',
-      })
-      return new Promise((resolve) => {
-        this.scheduledTransitions[prop] = {
-          v: props[prop],
-          f,
-          timeout: setTimeout(() => {
-            value.start &&
-              typeof value.start === 'function' &&
-              value.start.call(this.component, this, prop, props[prop])
+          // start the animation
+          try {
             f.start()
               .waitUntilStopped()
               .then(() => delete this.scheduledTransitions[prop])
               .then(() => {
-                value.end &&
-                  typeof value.end === 'function' &&
-                  value.end.call(this.component, this, prop, props[prop])
+                // fire transition end callback if specified
+                transition.end &&
+                  typeof transition.end === 'function' &&
+                  transition.end.call(this.component, this, prop, this.node[prop])
               })
               .then(resolve)
-          }, value.delay || 0),
-        }
-      })
-    }
+          } catch (e) {
+            Log.error(e)
+          }
+        }, transition.delay || 0),
+      }
+    })
+  },
+  delete() {
+    Log.debug('Deleting  Node', this.nodeId)
+    Object.values(this.scheduledTransitions).forEach((scheduledTransition) => {
+      clearTimeout(scheduledTransition.timeout)
+    })
+    this.node.parent = null
+  },
+  get nodeId() {
+    return this.node && this.node.id
+  },
+  get ref() {
+    return this.initData.ref || null
   },
 }
 
 export default (config, component) =>
   Object.assign(Object.create(Element), {
+    props: Object.assign(Object.create(Props), { _props: {}, _set: new Set() }),
     node: null,
-    setProperties: [],
     scheduledTransitions: {},
     initData: {},
     config,

package/src/lib/setup/routes.js

@@ -21,6 +21,17 @@ export default (component, routes) => {
   component.prototype[symbols.routes] = []
   Object.keys(routes).forEach((key) => {
     // todo: validate routes[key] for expected format etc.
-    component.prototype[symbols.routes][key] = routes[key]
+    component.prototype[symbols.routes][key] = {
+      ...routes[key],
+      ...{
+        // merge default route options with route specific options
+        options: {
+          ...{
+            inHistory: true,
+          },
+          ...routes[key].options,
+        },
+      },
+    }
   })
 }

package/src/lib/symbols.js

@@ -23,6 +23,7 @@ export default {
   type: Symbol('type'),
   watchers: Symbol('watchers'),
   watchKeys: Symbol('watchKeys'),
+  wrapper: Symbol('wrapper'),
 
   /* Utilizing the global Symbol registry for the following purposes */
 

package/src/router/router.js

@@ -27,6 +27,8 @@ export let navigating = false
 
 const cacheMap = new WeakMap()
 const history = []
+let overrideOptions = {}
+let navigatingBack = false
 
 export const getHash = () => {
   return (document.location.hash || '/').replace(/^#/, '')
@@ -38,7 +40,10 @@ export const matchHash = (path, routes = []) => {
       return r.path === path
     })
     .pop()
-  if (route) currentRoute = route
+  if (route) {
+    route.options = { ...route.options, ...overrideOptions }
+    currentRoute = route
+  }
   return route
 }
 
@@ -50,7 +55,11 @@ export const navigate = async function () {
     const route = matchHash(hash, this.parent[symbols.routes])
 
     if (route) {
-      if (history[history.length - 1] !== hash) history.push(hash)
+      // add the previous route (tecnhically 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) {
+        history.push(previousRoute)
+      }
       // apply default transition if none specified
       if (!('transition' in route)) {
         route.transition = fadeInFadeOutTransition
@@ -82,7 +91,7 @@ export const navigate = async function () {
           view = view(this[symbols.props], holder, this)
         }
       } else {
-        holder = view.wrapper
+        holder = view[symbols.wrapper]
       }
 
       this[symbols.children].push(view)
@@ -130,6 +139,9 @@ export const navigate = async function () {
       Log.error(`Route ${hash} not found`)
     }
   }
+
+  // reset navigating indicators
+  navigatingBack = false
   navigating = false
 }
 
@@ -139,11 +151,11 @@ const removeView = async (route, view, transition) => {
     if (Array.isArray(transition)) {
       for (let i = 0; i < transition.length; i++) {
         i === transition.length - 1
-          ? await setOrAnimate(view.wrapper, transition[i])
-          : setOrAnimate(view.wrapper, transition[i])
+          ? await setOrAnimate(view[symbols.wrapper], transition[i])
+          : setOrAnimate(view[symbols.wrapper], transition[i])
       }
     } else {
-      await setOrAnimate(view.wrapper, transition)
+      await setOrAnimate(view[symbols.wrapper], transition)
     }
   }
 
@@ -165,18 +177,21 @@ const removeView = async (route, view, transition) => {
 
 const setOrAnimate = (node, transition, shouldAnimate = true) => {
   return shouldAnimate
-    ? node.animate(transition.prop, transition)
+    ? node.animate(transition.prop, transition.value, transition)
     : node.set(transition.prop, transition.value)
 }
 
-export const to = (location) => {
+export const to = (location, options = {}) => {
+  overrideOptions = options
   window.location.hash = `#${location}`
 }
 
 export const back = () => {
-  if (history.length > 1) {
-    to(history[history.length - 2])
-    history.splice(-2, 2)
+  const route = history.pop()
+  if (route) {
+    // set indicator that we are navigating back (to prevent adding page to history stack)
+    navigatingBack = true
+    to(route.path)
     return true
   } else {
     return false