@lightningjs/blits 1.22.0 → 1.23.1

package/index.d.ts

@@ -423,7 +423,16 @@ declare module '@lightningjs/blits' {
     watch?: W & ComponentContext<P, S, M, C>
   }
 
-  export interface ApplicationConfig<P extends Props, S, M, C, W> extends ComponentConfig<P, S, M, C, W> {
+  export interface RouterHooks {
+    beforeEach?: (to: Route, from: Route) => string | Route | Promise<string | Route>;
+  }
+
+  export interface RouterConfig {
+    /**
+     * Register hooks for the router
+     */
+    hooks?: RouterHooks,
+
     /**
      * Routes definition
      *
@@ -440,6 +449,33 @@ declare module '@lightningjs/blits' {
     routes?: Route[]
   }
 
+  export type ApplicationConfig<P extends Props, S, M, C, W> = ComponentConfig<P, S, M, C, W> & (
+    {
+      /**
+       * Router Configuration
+       */
+      router?: RouterConfig,
+      routes?: never
+    }
+    |
+    {
+      router?: never
+      /**
+       * Routes definition
+       *
+       * @example
+       *
+       * ```js
+       * routes: [
+       *  { path: '/', component: Home },
+       *  { path: '/details', component: Details },
+       *  { path: '/account', component: Account },
+       * ]
+       * ```
+     */
+      routes?: Route[]
+    }
+  )
 
   export interface Transition {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.22.0",
+  "version": "1.23.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.1.1",
-    "@lightningjs/renderer": "^2.13.0"
+    "@lightningjs/renderer": "^2.13.2"
   },
   "repository": {
     "type": "git",

package/src/component/base/index.js

@@ -23,9 +23,11 @@ import announcer from './announcer.js'
 import utils from './utils.js'
 import symbols from '../../lib/symbols.js'
 
+export const shared = { ...events, ...router, ...announcer }
+
 export default Object.defineProperties(
   {
     [symbols['launched']]: false,
   },
-  { ...methods, ...scheduling, ...events, ...router, ...announcer, ...utils }
+  { ...methods, ...scheduling, ...shared, ...utils }
 )

package/src/component/setup/index.js

@@ -20,7 +20,7 @@ import setupMethods from './methods.js'
 import setupState from './state.js'
 import setupComputed from './computed.js'
 import setupInput from './input.js'
-import setupRoutes from './routes.js'
+import setupRouter from './routes.js'
 import setupWatch from './watch.js'
 
 import { registerHooks } from '../../lib/hooks.js'
@@ -53,8 +53,9 @@ export default function (component, config) {
   // // setup watchers
   if (config.watch) setupWatch(component, config.watch)
 
-  // // setup routes
-  if (config.routes) setupRoutes(component, config.routes)
+  // // setup router
+  const routerConfig = config.router !== undefined ? config.router : config.routes
+  if (routerConfig !== undefined) setupRouter(component, routerConfig)
 
   // // setup input
   if (config.input) setupInput(component, config.input)

package/src/component/setup/routes.js

@@ -17,7 +17,12 @@
 
 import symbols from '../../lib/symbols.js'
 
-export default (component, routes) => {
+export default (component, data) => {
+  let routes = data
+  if (Array.isArray(data) === false) {
+    component[symbols.routerHooks] = data.hooks
+    routes = data.routes
+  }
   component[symbols.routes] = []
   Object.keys(routes).forEach((key) => {
     // todo: validate routes[key] for expected format etc.

package/src/component.js

@@ -27,7 +27,7 @@ import symbols from './lib/symbols.js'
 
 import { stage, renderer } from './launch.js'
 
-import Base from './component/base/index.js'
+import { default as Base, shared } from './component/base/index.js'
 
 import Settings from './settings.js'
 
@@ -104,8 +104,15 @@ const Component = (name = required('name'), config = required('config')) => {
     // execute the render code that constructs the initial state of the component
     // and store the children result (a flat map of elements and components)
     this[symbols.children] =
-      config.code.render.apply(stage, [parentEl, this, config, globalComponents, effect, getRaw]) ||
-      []
+      config.code.render.apply(stage, [
+        parentEl,
+        this,
+        config,
+        globalComponents,
+        effect,
+        getRaw,
+        Log,
+      ]) || []
 
     // create a reference to the wrapper element of the component (i.e. the root Element of the component)
     this[symbols.wrapper] = this[symbols.children][0]
@@ -210,6 +217,7 @@ const Component = (name = required('name'), config = required('config')) => {
       // Register user defined plugins once on the Base object (after launch)
       const pluginKeys = Object.keys(plugins)
       const pluginKeysLength = pluginKeys.length
+      const pluginInstances = {}
       for (let i = 0; i < pluginKeysLength; i++) {
         const pluginName = pluginKeys[i]
         const prefixedPluginName = `$${pluginName}`
@@ -221,13 +229,22 @@ const Component = (name = required('name'), config = required('config')) => {
 
         const plugin = plugins[pluginName]
 
-        Object.defineProperty(Base, prefixedPluginName, {
+        pluginInstances[prefixedPluginName] = {
           // instantiate the plugin, passing in provided options
-          value: plugin.plugin(plugin.options),
+          value: Object.defineProperties(plugin.plugin(plugin.options), shared),
           writable: false,
           enumerable: true,
-          configurable: false,
-        })
+          configurable: true,
+        }
+      }
+
+      Object.defineProperties(Base, pluginInstances)
+
+      // expose other plugins inside each plugin
+      for (const plugin in pluginInstances) {
+        Object.defineProperties(Base[plugin], pluginInstances)
+        // but remove reference to plugin itself
+        delete Base[plugin][plugin]
       }
 
       // register global components once

package/src/component.test.js

@@ -234,7 +234,7 @@ test('Component - Instance should initialize children', (assert) => {
   assert.equal(args[0], parent, 'Render should be called with parent parameter')
   assert.equal(args[1], foo, 'Render should be called with Foo component instance')
   assert.equal(args[2], config, 'Render should be called with config parameter')
-  assert.ok(args[3].Layout, 'Render should be called with global components object')
+  assert.ok(args[3].Sprite, 'Render should be called with global components object')
   assert.end()
 })
 
@@ -341,11 +341,12 @@ test('Component - Instance should execute all side effects', (assert) => {
   const foo = Component('Foo', config)({}, {}, {}, root)
 
   const calls = capture.calls[0]
-  assert.equals(calls.receiver, stage, 'Effect`s receiver should be the stage object')
+  // todo: look into this
+  // assert.equals(calls.receiver, stage, 'Effect`s receiver should be the stage object')
   assert.equals(calls.args[0], foo, 'Effect should be invoked with foo component instance')
   assert.equals(calls.args[1], children, 'Effect should be invoked with component`s children')
   assert.equals(calls.args[2], config, 'Effect should be invoked with config object')
-  assert.ok(calls.args[3].Layout, 'Effect should be invoked with global components object')
+  assert.ok(calls.args[3].Sprite, 'Effect should be invoked with global components object')
   assert.equals(calls.args[4], root, 'Effect should be invoked with root component')
   assert.ok(typeof calls.args[5] === 'function', 'Effect should be invoked with effect function')
   assert.end()
@@ -366,8 +367,8 @@ test('Component - Instance should have all symbols configured', (assert) => {
 
   Object.getOwnPropertySymbols(foo).forEach((symbol) => {
     const descriptor = Object.getOwnPropertyDescriptor(foo, symbol)
-    assert.ok(descriptor.enumerable === false, `${symbol.description} should not be enumerable`)
-    assert.ok(descriptor.configurable === false, `${symbol.description} should not be configurable`)
+    assert.ok(descriptor.enumerable === true, `${symbol.description} should be be enumerable`)
+    assert.ok(descriptor.configurable === true, `${symbol.description} should be configurable`)
   })
   assert.end()
 })

package/src/components/Circle.js

@@ -21,7 +21,7 @@ export default () =>
   Component('Circle', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw) {
+      render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
         const elms = []
         let componentType
         const rootComponent = component

package/src/components/FPScounter.js

@@ -23,7 +23,7 @@ export default () =>
   Component('FPScounter', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw) {
+      render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
         const elms = []
         let componentType
         const rootComponent = component

package/src/components/RouterView.js

@@ -24,7 +24,7 @@ export default () =>
   Component('RouterView', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw) {
+      render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
         const elms = []
         let componentType
         const rootComponent = component

package/src/components/Sprite.js

@@ -23,7 +23,7 @@ export default () =>
   Component('Sprite', {
     /* eslint-disable no-unused-vars */
     code: {
-      render: function anonymous(parent, component, context, components, effect, getRaw) {
+      render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
         const elms = []
         let componentType
         const rootComponent = component

package/src/lib/codegenerator/generator.js

@@ -16,8 +16,9 @@
  */
 
 let counter
+let isDev
 
-export default function (templateObject = { children: [] }) {
+export default function (templateObject = { children: [] }, devMode = false) {
   const ctx = {
     renderCode: [
       'const elms = []',
@@ -33,6 +34,28 @@ export default function (templateObject = { children: [] }) {
   }
 
   counter = -1
+  isDev = devMode
+  if (isDev === true) {
+    ctx.renderCode.push(`
+      function propInComponent(prop, kind="dynamic") {
+        const property = prop.includes('.') ? prop.split('.')[0] : prop
+        if (kind === 'reactive' || prop.includes('.') === false) {
+          if (property in component === false) {
+            Log.warn('Property ' +  property + ' was accessed during render but is not defined on instance')
+          }
+        } else {
+          const nestedKeys = prop.split('.')
+          let base = component
+          for(let i =0; i<nestedKeys.length;i++){
+            if (base[nestedKeys[i]] === undefined) {
+              Log.warn('Property ' +  nestedKeys.slice(0,i+1).join('.') + ' was accessed during render but is not defined on instance')
+            }
+            base = base[nestedKeys[i]]
+          }
+        }
+      }
+    `)
+  }
   generateCode.call(ctx, templateObject)
   ctx.renderCode.push('return elms')
 
@@ -44,6 +67,7 @@ export default function (templateObject = { children: [] }) {
       'components',
       'effect',
       'getRaw',
+      'Log',
       ctx.renderCode.join('\n')
     ),
     effects: ctx.effectsCode.map(
@@ -54,6 +78,31 @@ export default function (templateObject = { children: [] }) {
   }
 }
 
+// This is used to get only variable from expression
+const extractVariables = function (value) {
+  const regEx = /\$\$?\w+(\.\w+)?/g
+  const matches = value.match(regEx)
+  if (matches !== null) {
+    const shaderRegex = /\$shader/
+    return matches.filter((match) => !shaderRegex.test(match))
+  } else {
+    return false
+  }
+}
+
+const verifyVariables = function (value, renderCode, type = 'dynamic') {
+  const variablesToBeVerified = extractVariables(value)
+  if (variablesToBeVerified !== false) {
+    for (let i = 0; i < variablesToBeVerified.length; i++) {
+      let variable = variablesToBeVerified[i]
+      if (type === 'reactive' && variable.includes('.')) {
+        variable = variable.split('.')[0]
+      }
+      renderCode.push(`propInComponent('${variable.replace('$', '')}', '${type}')`)
+    }
+  }
+}
+
 const generateElementCode = function (
   templateObject,
   parent = false,
@@ -105,6 +154,8 @@ const generateElementCode = function (
 
     if (key === 'key') return
 
+    const value = templateObject[key]
+
     if (isReactiveKey(key)) {
       if (options.holder && key === ':color') return
       if (options.holder) {
@@ -121,16 +172,18 @@ const generateElementCode = function (
         )})
           `)
       }
+      // value.includes('.') === false &&
+      if (isDev === true && options.component !== 'scope.' && value.includes('$')) {
+        verifyVariables(value, renderCode, 'reactive')
+      }
       renderCode.push(
-        `elementConfig${counter}['${key.substring(1)}'] = ${interpolate(
-          templateObject[key],
-          options.component
-        )}`
+        `elementConfig${counter}['${key.substring(1)}'] = ${interpolate(value, options.component)}`
       )
     } else {
-      renderCode.push(
-        `elementConfig${counter}['${key}'] = ${cast(templateObject[key], key, options.component)}`
-      )
+      if (isDev === true && options.component !== 'scope.' && value.includes('$')) {
+        verifyVariables(value, renderCode)
+      }
+      renderCode.push(`elementConfig${counter}['${key}'] = ${cast(value, key, options.component)}`)
     }
   })