@lightningjs/blits 0.5.6 → 0.5.8

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# v0.5.8
+
+_15 dec 2023_
+
+- Internal refactor of the `Element`
+
+# v0.5.7
+
+_13 dec 2023_
+
+- Added history and backhandling to the router
+- Linked effects directly to the available shaders exposed by the L3 renderer (starting 0.6.0)
+- Added setting `reactivityMode` to control whether `Proxy` (default) or `defineProperty` is used to trigger reactive side effects
+
 # v0.5.6
 
 _11 dec 2023_

package/boilerplate/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {

package/src/component.js

@@ -35,6 +35,7 @@ import setupWatch from './lib/setup/watch.js'
 import { effect } from './lib/reactivity/effect.js'
 import { Log } from './lib/log.js'
 
+import Settings from './settings.js'
 import symbols from './lib/symbols.js'
 
 const stage = {
@@ -142,7 +143,7 @@ const Component = (name = required('name'), config = required('config')) => {
         configurable: false,
       },
       [symbols.props]: {
-        value: reactive(opts.props || {}),
+        value: reactive(opts.props || {}, Settings.get('reactivityMode')),
         writable: false,
         enumerable: false,
         configurable: false,
@@ -157,7 +158,7 @@ const Component = (name = required('name'), config = required('config')) => {
     })
 
     Object.defineProperty(this, symbols.state, {
-      value: reactive(this[symbols.originalState]),
+      value: reactive(this[symbols.originalState], Settings.get('reactivityMode')),
       writable: false,
       enumerable: false,
       configurable: false,

package/src/components/RouterView.js

@@ -43,4 +43,9 @@ export default () =>
         this.activeView && this.activeView.focus()
       },
     },
+    input: {
+      back(e) {
+        if (!Router.back()) this.parent.focus(e)
+      },
+    },
   })

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, props[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/launch.d.ts

@@ -55,6 +55,7 @@ type Font = WebFont | SdfFont
 
 export type DebugLevel = 0 | 1 | 2
 export type LogTypes = 'info' | 'warn' | 'error' | 'debug'
+export type ReactivityModes = 'Proxy' | 'defineProperty'
 
 /**
  * Settings
@@ -90,7 +91,11 @@ export interface Settings {
   /**
    * Custom keymapping
    */
-  keymap?: object
+  keymap?: object,
+  /**
+   * Mode of reactivity (`Proxy` or `defineProperty`)
+   */
+  reactivityMode?: ReactivityModes
 }
 
 /**

package/src/lib/reactivity/reactive.js

@@ -27,8 +27,12 @@ const arrayMethods = [
   'shift',
   'splice',
   'unshift',
+  'sort',
+  'reverse',
 ]
 
+const arrayPatchMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
+
 const proxyMap = new WeakMap()
 
 const reactiveProxy = (target) => {
@@ -79,17 +83,22 @@ const reactiveDefineProperty = (target) => {
   Object.keys(target).forEach((key) => {
     let internalValue = target[key]
 
-    if (
-      target[key] !== null &&
-      typeof target[key] === 'object' &&
-      Object.getPrototypeOf(target[key]) === Object.prototype
-    ) {
-      return reactiveDefineProperty(target[key])
+    if (target[key] !== null && typeof target[key] === 'object') {
+      if (Object.getPrototypeOf(target[key]) === Object.prototype) {
+        return reactiveDefineProperty(target[key])
+      } else if (Array.isArray(target[key])) {
+        for (let i = 0; i < arrayPatchMethods.length - 1; i++) {
+          target[key][arrayPatchMethods[i]] = function (v) {
+            Array.prototype[arrayPatchMethods[i]].call(this, v)
+            trigger(target, key)
+          }
+        }
+      }
     }
 
     Object.defineProperty(target, key, {
-      enumerable: true, // ?
-      configurable: true, // ?
+      enumerable: true,
+      configurable: true,
       get() {
         track(target, key)
         return internalValue
@@ -107,9 +116,8 @@ const reactiveDefineProperty = (target) => {
   return target
 }
 
-// maybe an options object?
-export const reactive = (target, type = 'proxy') => {
-  return type === 'proxy' ? reactiveProxy(target) : reactiveDefineProperty(target)
+export const reactive = (target, mode = 'Proxy') => {
+  return mode === 'defineProperty' ? reactiveDefineProperty(target) : reactiveProxy(target)
 }
 
 export const memo = (raw) => {

package/src/lib/setup/base.js

@@ -17,7 +17,7 @@
 
 import { renderer } from '../../launch.js'
 import Focus from '../../focus.js'
-import { to, currentRoute, navigating } from '../../router/router.js'
+import { to, currentRoute, navigating, back } from '../../router/router.js'
 import Image from '../../components/Image.js'
 import Circle from '../../components/Circle.js'
 import RouterView from '../../components/RouterView.js'
@@ -29,16 +29,8 @@ import symbols from '../symbols.js'
 
 import { trigger } from '../reactivity/effect.js'
 
-const shaders = {
-  radius: 'radius',
+const shaderAlias = {
   rounded: 'radius',
-  border: 'border',
-  borderTop: 'borderTop',
-  borderBottom: 'borderBottom',
-  borderLeft: 'borderLeft',
-  borderRight: 'borderRight',
-  grayScale: 'grayscale',
-  glitch: 'glitch',
 }
 
 export default (component) => {
@@ -101,9 +93,12 @@ export default (component) => {
     },
     shader: {
       value: function (type, args) {
-        if (type in shaders) {
+        const target = shaderAlias[type] || type
+        const shaders = renderer.driver.stage.shManager.getRegisteredEffects()
+
+        if (target in shaders) {
           return {
-            type: shaders[type],
+            type: target,
             props: args,
           }
         } else {
@@ -117,6 +112,7 @@ export default (component) => {
     $router: {
       value: {
         to,
+        back,
         get currentRoute() {
           return currentRoute
         },

package/src/router/router.js

@@ -26,6 +26,7 @@ export let currentRoute
 export let navigating = false
 
 const cacheMap = new WeakMap()
+const history = []
 
 export const getHash = () => {
   return (document.location.hash || '/').replace(/^#/, '')
@@ -49,6 +50,7 @@ export const navigate = async function () {
     const route = matchHash(hash, this.parent[symbols.routes])
 
     if (route) {
+      if (history[history.length - 1] !== hash) history.push(hash)
       // apply default transition if none specified
       if (!('transition' in route)) {
         route.transition = fadeInFadeOutTransition
@@ -163,7 +165,7 @@ 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)
 }
 
@@ -171,7 +173,18 @@ export const to = (location) => {
   window.location.hash = `#${location}`
 }
 
+export const back = () => {
+  if (history.length > 1) {
+    to(history[history.length - 2])
+    history.splice(-2, 2)
+    return true
+  } else {
+    return false
+  }
+}
+
 export default {
   navigate,
   to,
+  back,
 }

package/src/router.js

@@ -1,72 +0,0 @@
-/*
- * Copyright 2023 Comcast Cable Communications Management, LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { Log } from './lib/log.js'
-
-import symbols from './lib/symbols.js'
-
-export const getHash = () => {
-  return (document.location.hash || '/').replace(/^#/, '')
-}
-
-export const matchHash = (path, routes = []) => {
-  const route = routes
-    .filter((r) => {
-      return r.path === path
-    })
-    .pop()
-  return route
-}
-
-export const navigate = function () {
-  if (this.parent[symbols.routes]) {
-    const hash = getHash()
-    const route = matchHash(hash, this.parent[symbols.routes])
-    if (route) {
-      if (this[symbols.currentView]) {
-        for (let i = 0; i < this[symbols.currentView][symbols.children].length - 1; i++) {
-          if (
-            this[symbols.currentView][symbols.children][i] &&
-            this[symbols.currentView][symbols.children][i].destroy
-          ) {
-            this[symbols.currentView][symbols.children][i].destroy()
-            this[symbols.currentView][symbols.children][i] = null
-          }
-        }
-        this[symbols.currentView].destroy()
-        this[symbols.currentView] = null
-      }
-      this[symbols.children][1] = this[symbols.currentView] = route.component(
-        this[symbols.props],
-        this[symbols.children][0],
-        this
-      )
-      this[symbols.currentView].focus()
-    } else {
-      Log.error(`Route ${hash} not found`)
-    }
-  }
-}
-
-export const to = (location) => {
-  window.location.hash = `#${location}`
-}
-
-export default {
-  navigate,
-  to,
-}