@lightningjs/blits 0.3.15 → 0.4.0

package/src/lib/codegenerator/generator.test_.js

@@ -107,7 +107,7 @@ test('Generate render and effect code for a template with a single simple elemen
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -149,7 +149,7 @@ test('Generate code for a template with a simple element and a simple nested ele
   function anonymous(parent,component,context) {
     const elms = []
 
-    elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+    elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
     const elementConfig1 = {}
 
     elementConfig1['type'] = "Component"
@@ -158,7 +158,7 @@ test('Generate code for a template with a simple element and a simple nested ele
 
     parent = elms[1]
 
-    elms[2] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+    elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
     const elementConfig2 = {}
 
     elementConfig2['type'] = "Element"
@@ -198,7 +198,7 @@ test('Generate code for a template with a single element with attributes', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -246,7 +246,7 @@ test('Generate code for a template with attributes and a nested element with att
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -257,7 +257,7 @@ test('Generate code for a template with attributes and a nested element with att
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -313,7 +313,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -324,7 +324,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -336,7 +336,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Element"
@@ -403,7 +403,7 @@ test('Generate code for a template with attributes and deep nested elements with
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -414,7 +414,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -426,7 +426,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Element"
@@ -438,7 +438,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[3]
 
-      elms[4] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[4] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig4 = {}
 
       elementConfig4['type'] = "Element"
@@ -448,7 +448,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[3]
 
-      elms[5] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[5] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig5 = {}
 
       elementConfig5['type'] = "Element"
@@ -492,7 +492,7 @@ test('Generate code for a template with simple dynamic attributes', (assert) =>
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -559,7 +559,7 @@ test('Generate code for a template with an attribute with a dash', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -604,7 +604,7 @@ test('Generate code for a template with dynamic attributes with code to be evalu
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -690,7 +690,7 @@ test('Generate code for a template with custom components', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -746,7 +746,7 @@ test('Generate code for a template with an unregistered custom component', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -757,7 +757,7 @@ test('Generate code for a template with an unregistered custom component', (asse
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Poster2"
@@ -813,7 +813,7 @@ test('Generate code for a template with custom components with arguments', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -876,7 +876,7 @@ test('Generate code for a template with custom components with reactive props',
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -895,13 +895,13 @@ test('Generate code for a template with custom components with reactive props',
 
   const expectedEffect1 = `
   function anonymous(component,elms,context) {
-    elms[2].___props.img = component.image
+    elms[2][Symbol.for('props')].img = component.image
   }
   `
 
   const expectedEffect2 = `
   function anonymous(component,elms,context) {
-    elms[3].___props.img = component.image
+    elms[3][Symbol.for('props')].img = component.image
   }
   `
 
@@ -946,7 +946,7 @@ test('Generate code for a template with a transition attributes', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"

package/src/lib/hooks.js

@@ -15,15 +15,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import symbols from './symbols.js'
+
 const cbs = {}
 
 export const emit = (hook, name, scope) => {
   cbs[name] && cbs[name][hook] && cbs[name][hook].apply(scope)
 }
 
+export const privateEmit = (hook, name, scope) => {
+  const symHook = symbols[hook]
+  cbs[name] && cbs[name][symHook] && cbs[name][symHook].apply(scope)
+}
+
 export const registerHooks = (hooks = {}, name) => {
   cbs[name] = {}
-  Object.keys(hooks).forEach((hook) => {
+  // Combines enumerable keys and symbol properties of the 'hooks' object
+  const hookKeys = [...Object.keys(hooks), ...Object.getOwnPropertySymbols(hooks)]
+  hookKeys.forEach((hook) => {
     if (typeof hooks[hook] === 'function') cbs[name][hook] = hooks[hook]
   })
 }

package/src/lib/reactivity/effect.js

@@ -34,7 +34,7 @@ export const track = (target, key) => {
   }
 }
 
-export const trigger = (target, key) => {
+export const trigger = (target, key, force = false) => {
   const effectsMap = objectMap.get(target)
   if (!effectsMap) {
     return
@@ -42,7 +42,7 @@ export const trigger = (target, key) => {
   const effects = effectsMap.get(key)
   if (effects) {
     effects.forEach((effect) => {
-      effect()
+      effect(force)
     })
   }
 }

package/src/lib/setup/base.js

@@ -17,7 +17,7 @@
 
 import { renderer } from '../../launch.js'
 import Focus from '../../focus.js'
-import { to } from '../../router.js'
+import { to, currentRoute, navigating } from '../../router/router.js'
 import Image from '../../components/Image.js'
 import Circle from '../../components/Circle.js'
 import RouterView from '../../components/RouterView.js'
@@ -25,6 +25,9 @@ import Sprite from '../../components/Sprite.js'
 import Text from '../../components/Text.js'
 import eventListeners from '../eventListeners.js'
 import { default as log, Log } from '../log.js'
+import symbols from '../symbols.js'
+
+import { trigger } from '../reactivity/effect.js'
 
 const shaders = {
   radius: 'radius',
@@ -59,14 +62,14 @@ export default (component) => {
     destroy: {
       value: function () {
         this.lifecycle.state = 'destroy'
-        for (let i = 0; i < this.___timeouts.length; i++) {
-          clearTimeout(this.___timeouts[i])
+        for (let i = 0; i < this[symbols.timeouts].length; i++) {
+          clearTimeout(this[symbols.timeouts][i])
         }
-        for (let i = 0; i < this.___intervals.length; i++) {
-          clearInterval(this.___intervals[i])
+        for (let i = 0; i < this[symbols.intervals].length; i++) {
+          clearInterval(this[symbols.intervals][i])
         }
         eventListeners.removeListeners(this)
-        deleteChildren(this.___children)
+        deleteChildren(this[symbols.children])
         Log.debug(`Destroyed component ${this.componentId}`)
       },
       writable: false,
@@ -76,7 +79,7 @@ export default (component) => {
     select: {
       value: function (ref) {
         let selected = null
-        this.___children.forEach((child) => {
+        this[symbols.children].forEach((child) => {
           if (Array.isArray(child)) {
             child.forEach((c) => {
               if (c['ref'] === ref) selected = c
@@ -114,12 +117,21 @@ export default (component) => {
     $router: {
       value: {
         to,
+        get currentRoute() {
+          return currentRoute
+        },
+        get routes() {
+          return component.prototype[symbols.routes]
+        },
+        get navigating() {
+          return navigating
+        },
       },
       writable: false,
       enumerable: true,
       configurable: false,
     },
-    ___components: {
+    [symbols.components]: {
       value: {
         Image: Image(),
         Circle: Circle(),
@@ -131,7 +143,7 @@ export default (component) => {
       enumerable: false,
       configurable: false,
     },
-    ___timeouts: {
+    [symbols.timeouts]: {
       value: [],
       writable: false,
       enumerable: false,
@@ -141,20 +153,20 @@ export default (component) => {
       value: function (fn, ms, ...params) {
         const timeoutId = setTimeout(
           () => {
-            this.____timeouts = this.___timeouts.filter((id) => id !== timeoutId)
+            this[symbols._timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
             fn.apply(null, params)
           },
           ms,
           params
         )
-        this.___timeouts.push(timeoutId)
+        this[symbols.timeouts].push(timeoutId)
         return timeoutId
       },
       writable: false,
       enumerable: true,
       configurable: false,
     },
-    ___intervals: {
+    [symbols.intervals]: {
       value: [],
       writable: false,
       enumerable: false,
@@ -164,13 +176,13 @@ export default (component) => {
       value: function (fn, ms, ...params) {
         const intervalId = setInterval(
           () => {
-            this.____intervals = this.___intervals.filter((id) => id !== intervalId)
+            this[symbols._intervals] = this[symbols.intervals].filter((id) => id !== intervalId)
             fn.apply(null, params)
           },
           ms,
           params
         )
-        this.___intervals.push(intervalId)
+        this[symbols.intervals].push(intervalId)
         return intervalId
       },
       writable: false,
@@ -193,7 +205,7 @@ export default (component) => {
       enumerable: true,
       configurable: false,
     },
-    ___renderer: {
+    [symbols.renderer]: {
       value: renderer,
       writable: false,
       enumerable: false,
@@ -205,6 +217,15 @@ export default (component) => {
       enumerable: false,
       configurable: false,
     },
+    $trigger: {
+      value: function (key) {
+        // trigger with force set to true
+        trigger(this[symbols.originalState], key, true)
+      },
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
   })
 }
 

package/src/lib/setup/computed.js

@@ -17,22 +17,27 @@
 
 import { Log } from '../log.js'
 
+import symbols from '../symbols.js'
+
 export default (component, computeds) => {
-  component.___computedKeys = []
+  component[symbols.computedKeys] = []
 
   for (let computed in computeds) {
     // test for reserved keys?
-    if (component.___stateKeys && component.___stateKeys.indexOf(computed) > -1) {
+    if (component[symbols.stateKeys] && component[symbols.stateKeys].indexOf(computed) > -1) {
       Log.error(`${computed} already exists as a prop`)
-    } else if (component.___propKeys && component.___propKeys.indexOf(computed) > -1) {
+    } else if (component[symbols.propKeys] && component[symbols.propKeys].indexOf(computed) > -1) {
       Log.error(`${computed} already exists as a prop`)
-    } else if (component.___methodKeys && component.___methodKeys.indexOf(computed) > -1) {
+    } else if (
+      component[symbols.methodKeys] &&
+      component[symbols.methodKeys].indexOf(computed) > -1
+    ) {
       Log.error(`${computed} already exists as a method`)
     } else {
       if (typeof computeds[computed] !== 'function') {
         Log.warn(`${computed} is not a function`)
       }
-      component.___computedKeys.push(computed)
+      component[symbols.computedKeys].push(computed)
       Object.defineProperty(component.prototype, computed, {
         get() {
           return computeds[computed].apply(this)

package/src/lib/setup/input.js

@@ -17,12 +17,14 @@
 
 import { Log } from '../log.js'
 
+import symbols from '../symbols.js'
+
 export default (component, input) => {
-  component.prototype.___inputEvents = []
+  component.prototype[symbols.inputEvents] = []
   Object.keys(input).forEach((key) => {
     if (typeof input[key] !== 'function') {
       Log.warn(`${input[key]} is not a function`)
     }
-    component.prototype.___inputEvents[key] = input[key]
+    component.prototype[symbols.inputEvents][key] = input[key]
   })
 }

package/src/lib/setup/methods.js

@@ -17,18 +17,20 @@
 
 import { Log } from '../log.js'
 
+import symbols from '../symbols.js'
+
 export default (component, methods) => {
-  component.___methodsKeys = []
+  component[symbols.methodKeys] = []
 
   for (let method in methods) {
     // test for reserved keys?
-    if (component.___propKeys && component.___propKeys.indexOf(method) > -1) {
+    if (component[symbols.propKeys] && component[symbols.propKeys].indexOf(method) > -1) {
       Log.error(`${method} already exists as a prop`)
     } else {
       if (typeof methods[method] !== 'function') {
         Log.warn(`${method} is not a function`)
       }
-      component.___methodsKeys.push(method)
+      component[symbols.methodKeys].push(method)
       component.prototype[method] = methods[method]
     }
   }

package/src/lib/setup/props.js

@@ -17,6 +17,8 @@
 
 import { Log } from '../log.js'
 
+import symbols from '../symbols.js'
+
 const baseProp = {
   cast: (v) => v,
   required: false,
@@ -26,15 +28,15 @@ export default (component, props = []) => {
   if (props.indexOf('ref') === -1) {
     props.push('ref')
   }
-  component.___propKeys = []
+  component[symbols.propKeys] = []
   props.forEach((prop) => {
     prop = { ...baseProp, ...(typeof prop === 'object' ? prop : { key: prop }) }
-    component.___propKeys.push(prop.key)
+    component[symbols.propKeys].push(prop.key)
     Object.defineProperty(component.prototype, prop.key, {
       get() {
         const value = prop.cast(
-          this.___props && prop.key in this.___props
-            ? this.___props[prop.key]
+          this[symbols.props] && prop.key in this[symbols.props]
+            ? this[symbols.props][prop.key]
             : prop.default || undefined
         )
 
@@ -46,7 +48,7 @@ export default (component, props = []) => {
       },
       set(v) {
         Log.warn(`Warning! Avoid mutating props directly (${prop.key})`)
-        this.___props[prop.key] = v
+        this[symbols.props][prop.key] = v
       },
     })
   })

package/src/lib/setup/props.test.js

@@ -19,6 +19,8 @@ import test from 'tape'
 import propsFn from './props.js'
 import { initLog } from '../log.js'
 
+import symbols from '../symbols.js'
+
 initLog()
 
 test('Type props function', (assert) => {
@@ -29,16 +31,12 @@ test('Type props function', (assert) => {
   assert.end()
 })
 
-test('Create a ___propkeys on component', (assert) => {
+test('Has correct symbols', (assert) => {
   const component = new Function()
-
-  /* eslint-disable */
-  assert.false(component.hasOwnProperty('___propKeys'), 'Component should not have a ___propKeys key')
-
-  propsFn(component)
-
+  const props = ['index', 'img', 'url']
+  propsFn(component, props)
   /* eslint-disable */
-  assert.true(component.hasOwnProperty('___propKeys'), 'Component should have a ___propKeys key')
+  assert.true(component[symbols.propKeys], 'Component should have a propKey symbol')
   assert.end()
 })
 
@@ -47,8 +45,8 @@ test('Pass props as an array', (assert) => {
   const props = ['index', 'img', 'url']
   propsFn(component, props)
 
-  assert.equal(props.length, component.___propKeys.length, 'All passed props should be stored on ___propKeys')
-  assert.equal(props.length, props.map(prop => component.___propKeys.indexOf(prop) > -1).filter(prop => prop === true).length, 'All passed props should be stored on ___propKeys')
+  assert.equal(props.length, component[symbols.propKeys].length, 'All passed props should be stored on propKeys')
+  assert.equal(props.length, props.map(prop => component[symbols.propKeys].indexOf(prop) > -1).filter(prop => prop === true).length, 'All passed props should be stored on propKeys')
 
   props.forEach((prop) => {
     assert.true(typeof Object.getOwnPropertyDescriptor(component.prototype, prop).get === 'function', `A getter should have been created for property ${prop}`)
@@ -62,14 +60,14 @@ test('Get value of props', (assert) => {
   const component = new Function()
 
   const componentInstance = new component
-  componentInstance.___props = {
+  componentInstance[symbols.props] = {
     index: 1,
     img: 'lorem-ipsum.jpg',
     url: 'http://localhost'
   }
 
   const componentInstance2 = new component
-  componentInstance2.___props = {
+  componentInstance2[symbols.props] = {
     index: 2,
     img: 'bla.jpg',
     url: 'http://127.0.0.1'
@@ -79,8 +77,8 @@ test('Get value of props', (assert) => {
   propsFn(component, props)
 
   props.forEach((prop) => {
-    assert.equal(componentInstance[prop], componentInstance.___props[prop], `The correct value of ${prop} should be returned via the getter`)
-    assert.equal(componentInstance2[prop], componentInstance2.___props[prop], `The correct value of ${prop} should be returned via the getter`)
+    assert.equal(componentInstance[prop], componentInstance[symbols.props][prop], `The correct value of ${prop} should be returned via the getter`)
+    assert.equal(componentInstance2[prop], componentInstance2[symbols.props][prop], `The correct value of ${prop} should be returned via the getter`)
   })
 
   assert.equal(componentInstance['bla'], undefined, `Undefined should be returned if a prop doesn't exist`)
@@ -93,8 +91,8 @@ test('Passing props as an object', (assert) => {
   const props = [{key: 'index'}, {key: 'img'}, {key: 'url'}]
   propsFn(component, props)
 
-  assert.equal(props.length, component.___propKeys.length, 'All passed props should be stored on ___propKeys')
-  assert.equal(props.length, props.map(prop => component.___propKeys.indexOf(typeof prop === 'object' ? prop.key : prop) > -1).filter(prop => prop === true).length, 'All passed props should be stored on ___propKeys')
+  assert.equal(props.length, component[symbols.propKeys].length, 'All passed props should be stored on propKeys')
+  assert.equal(props.length, props.map(prop => component[symbols.propKeys].indexOf(typeof prop === 'object' ? prop.key : prop) > -1).filter(prop => prop === true).length, 'All passed props should be stored on propKeys')
 
   props.forEach((prop) => {
     assert.true(typeof Object.getOwnPropertyDescriptor(component.prototype, typeof prop === 'object' ? prop.key : prop).get === 'function', `A getter should have been created for property ${prop}`)
@@ -109,8 +107,8 @@ test('Passing props as an object mixed with single keys', (assert) => {
   const props = [{key: 'index'}, 'img', {key: 'url'}]
   propsFn(component, props)
 
-  assert.equal(props.length, component.___propKeys.length, 'All passed props should be stored on ___propKeys')
-  assert.equal(props.length, props.map(prop => component.___propKeys.indexOf(typeof prop === 'object' ? prop.key : prop) > -1).filter(prop => prop === true).length, 'All passed props should be stored on ___propKeys')
+  assert.equal(props.length, component[symbols.propKeys].length, 'All passed props should be stored on propKeys')
+  assert.equal(props.length, props.map(prop => component[symbols.propKeys].indexOf(typeof prop === 'object' ? prop.key : prop) > -1).filter(prop => prop === true).length, 'All passed props should be stored on propKeys')
 
   props.forEach((prop) => {
     assert.true(typeof Object.getOwnPropertyDescriptor(component.prototype, typeof prop === 'object' ? prop.key : prop).get === 'function', `A getter should have been created for property ${prop}`)
@@ -123,7 +121,7 @@ test('Casting props to a type', (assert) => {
   const component = new Function()
 
   const componentInstance = new component
-  componentInstance.___props = {
+  componentInstance[symbols.props] = {
     number: '1',
     string: 100,
     boolean: true,

package/src/lib/setup/routes.js

@@ -15,10 +15,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import symbols from '../symbols.js'
+
 export default (component, routes) => {
-  component.prototype.___routes = []
+  component.prototype[symbols.routes] = []
   Object.keys(routes).forEach((key) => {
     // todo: validate routes[key] for expected format etc.
-    component.prototype.___routes[key] = routes[key]
+    component.prototype[symbols.routes][key] = routes[key]
   })
 }