@lightningjs/blits 0.5.5 → 0.5.7

package/.vscode/settings.json

@@ -4,6 +4,6 @@
       "javascript"
     ],
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     }
   }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# 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_
+
+- Upgraded to version 0.6.0 of the Lightning 3 renderer
+
 # v0.5.5
 
 _5 dec 2023_

package/boilerplate/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "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.5.0",
+    "@lightningjs/renderer": "^0.6.0",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
   }
 }

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/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/launch.js

@@ -15,7 +15,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MainRenderDriver, RendererMain, ThreadXRenderDriver } from '@lightningjs/renderer'
+import { MainCoreDriver, RendererMain } from '@lightningjs/renderer'
 // import RendererWorker from '@lightningjs/renderer/workers/renderer?worker'
 import Settings from './settings.js'
 import { initLog, Log } from './lib/log.js'
@@ -29,12 +29,12 @@ export default (App, target, settings) => {
 
   initLog()
 
-  const driver = new MainRenderDriver()
+  const driver = new MainCoreDriver()
   // settings.multithreaded === true
   //   ? new ThreadXRenderDriver({
   //       RendererWorker,
   //     })
-  //   : new MainRenderDriver()
+  //   : new MainCoreDriver()
 
   renderer = new RendererMain(
     {

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
@@ -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,
-}