@lightningjs/blits 1.30.1 → 1.31.0

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

@@ -1,238 +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 test from 'tape'
-import propsFn from './props.js'
-import { initLog } from '../../lib/log.js'
-import Settings from '../../settings.js'
-import symbols from '../../lib/symbols.js'
-
-test('Type props function', (assert) => {
-  const expected = 'function'
-  const actual = typeof propsFn
-
-  assert.equal(actual, expected, 'props should be a function')
-  assert.end()
-})
-
-test('Has correct symbols', (assert) => {
-  const component = new Function()
-  const props = ['index', 'img', 'url']
-  propsFn(component, props)
-  /* eslint-disable */
-  assert.true(component[symbols.propKeys], 'Component should have a propKey symbol')
-  assert.end()
-})
-
-test('Pass props as an array', (assert) => {
-  const component = new Function()
-  const props = ['index', 'img', 'url']
-  propsFn(component, props)
-
-  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, prop).get === 'function', `A getter should have been created for property ${prop}`)
-  })
-
-  assert.end()
-})
-
-
-test('Get value of props', (assert) => {
-  const component = new Function()
-
-  const componentInstance = Object.create(component)
-  componentInstance[symbols.props] = {
-    index: 1,
-    img: 'lorem-ipsum.jpg',
-    url: 'http://localhost'
-  }
-
-  const componentInstance2 = Object.create(component)
-  componentInstance2[symbols.props] = {
-    index: 2,
-    img: 'bla.jpg',
-    url: 'http://127.0.0.1'
-  }
-
-  const props = ['index', 'img', 'url']
-  propsFn(component, props)
-
-  props.forEach((prop) => {
-    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`)
-  assert.end()
-})
-
-test('Passing props as an object', (assert) => {
-
-  const component = new Function()
-  const props = [{key: 'index'}, {key: 'img'}, {key: 'url'}]
-  propsFn(component, props)
-
-  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, typeof prop === 'object' ? prop.key : prop).get === 'function', `A getter should have been created for property ${prop}`)
-  })
-
-  assert.end()
-})
-
-test('Passing props as an object mixed with single keys', (assert) => {
-
-  const component = new Function()
-  const props = [{key: 'index'}, 'img', {key: 'url'}]
-  propsFn(component, props)
-
-  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, typeof prop === 'object' ? prop.key : prop).get === 'function', `A getter should have been created for property ${prop}`)
-  })
-
-  assert.end()
-})
-
-test('Casting props to a type', (assert) => {
-  const component = new Function()
-
-  const componentInstance = Object.create(component)
-  componentInstance[symbols.props] = {
-    number: '1',
-    string: 100,
-    boolean: true,
-    image: 'my_image.jpg'
-  }
-
-  const props = [{
-    key: 'number',
-    cast: Number
-  }, {
-    key: 'string',
-    cast: String
-  }, {
-    key: 'boolean',
-    cast: Boolean
-  },{
-    key: 'image',
-    cast(v) {
-      return `http://localhost/${v}`
-    }
-  }]
-  propsFn(component, props)
-
-  assert.equal(typeof componentInstance.number, 'number', 'Should cast prop value to a Number')
-  assert.equal(typeof componentInstance.string, 'string', 'Should cast prop value to a String')
-  assert.equal(typeof componentInstance.boolean, 'boolean', 'Should cast prop value to a Boolean')
-  assert.equal(componentInstance.image, 'http://localhost/my_image.jpg','Should cast according to a custom function')
-
-  assert.end()
-})
-
-test('Setting default value for undefined props', (assert) => {
-  const component = new Function()
-
-  const componentInstance = Object.create(component)
-
-  const props = [{
-    key: 'missing',
-    default: 'I am missing'
-  }]
-  propsFn(component, props)
-
-  assert.equal(componentInstance.missing, 'I am missing','Should return default prop value when undefined')
-
-  assert.end()
-})
-
-test('Required props with default', (assert) => {
-  const component = new Function()
-
-  const componentInstance = Object.create(component)
-
-  const props = [{
-    key: 'missing',
-    default: 'I am missing',
-    required: true
-  }]
-  propsFn(component, props)
-
-  assert.equal(componentInstance.missing, 'I am missing', 'Should return default prop value when undefined')
-
-  assert.end()
-})
-
-test('Required props without default', (assert) => {
-  initLogTest(assert)
-  const capture = assert.capture(console, 'warn')
-  const component = new Function()
-
-  const componentInstance = Object.create(component)
-
-  const props = [{
-    key: 'missing',
-    required: true
-  }]
-  propsFn(component, props)
-
-  assert.equal(componentInstance.missing, undefined, 'Should return undefined prop value when undefined')
-  const logs = capture()
-  assert.equal(logs.length, 1)
-  assert.equal(logs[0].args.pop(), 'missing is required', 'Should log warning message')
-
-  assert.end()
-})
-
-test('Setting prop value directly', (assert) => {
-  initLogTest(assert)
-  const capture = assert.capture(console, 'warn')
-  const component = new Function()
-  const componentInstance = Object.create(component)
-  componentInstance[symbols.props] = {
-    property: 'foo'
-  }
-  const props = [{
-    key: 'property',
-  }]
-
-  propsFn(component, props)
-  componentInstance.property = 'bar'
-
-  assert.equal(componentInstance[symbols.props].property, 'bar', 'Should be possible to mutate the property')
-  let logs = capture()
-  assert.equal(logs.length, 1)
-  assert.equal(logs[0].args.pop(), `Warning! Avoid mutating props directly (prop "${props[0].key}" in component "${componentInstance.componentId}")`, 'Should log warning message')
-
-  assert.end()
-})
-
-function initLogTest(assert) {
-  assert.capture(Settings, 'get', (key) => {
-    if (key === 'debugLevel') {
-      return 1
-    }
-  })
-  initLog()
-}

package/src/component.test.js

@@ -1,388 +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 test from 'tape'
-import Component from './component.js'
-import { initLog } from './lib/log.js'
-import symbols from './lib/symbols.js'
-import util from 'node:util'
-import { renderer, stage } from './launch.js'
-
-initLog()
-
-test('Type', (assert) => {
-  const expected = 'function'
-  const actual = typeof Component
-
-  assert.equal(actual, expected, 'Component should be a function')
-  assert.end()
-})
-
-test('Component - Factory function', (assert) => {
-  const expected = 'function'
-  const actual = typeof Component('my component', {})
-
-  assert.equal(actual, expected, 'Component should be a factory function (i.e. return a function)')
-  assert.end()
-})
-
-test('Component - Factory requires a name to be passed', (assert) => {
-  assert.throws(() => {
-    Component()
-  }, 'Throw an error when no name argument has been passed')
-
-  assert.end()
-})
-
-test('Component - Factory requires a config to be passed', (assert) => {
-  assert.throws(() => {
-    Component('Foo')
-  }, 'Throw an error when no config argument has been passed')
-
-  assert.end()
-})
-
-test('Component - Instance should create internal id', (assert) => {
-  const button = Component('Button', {})()
-  const heading = Component('Heading', {})()
-
-  assert.equal(button[symbols.id], 1, 'Button instance object should have correct internal id')
-  assert.equal(heading[symbols.id], 2, 'Heading instance object should have correct internal id')
-  assert.end()
-})
-
-test('Component - Instance should create component Id', (assert) => {
-  const foo = Component('Foo', {})
-  const bar = Component('Bar', {})
-  const fooInstance0 = foo()
-  const fooInstance1 = foo()
-  const barInstance0 = bar()
-
-  assert.equal(
-    fooInstance0.componentId,
-    'BlitsComponent::Foo_1',
-    'First Foo instance should have correct id'
-  )
-  assert.equal(
-    fooInstance1.componentId,
-    'BlitsComponent::Foo_2',
-    'Second Foo instance should have correct id'
-  )
-  assert.equal(
-    barInstance0.componentId,
-    'BlitsComponent::Bar_1',
-    'First Bar instance should have correct id'
-  )
-  assert.end()
-})
-
-test('Component - Instance should initiate lifecycle object', (assert) => {
-  const foo = Component('Foo', {})()
-
-  assert.ok(foo.lifecycle, 'Lifecycle object should be initialized')
-  assert.equal(
-    foo.lifecycle.component,
-    foo,
-    'Lifecycle object should have a reference to foo instance'
-  )
-  assert.equal(
-    foo.lifecycle.previous,
-    null,
-    'Lifecycle object should have previous state not initialized'
-  )
-  assert.equal(foo.lifecycle.current, 'init', 'Lifecycle object should have initial current state')
-  assert.end()
-})
-
-test('Component - Instance should set a parent reference', (assert) => {
-  const parentElement = {}
-  const parentComponent = {}
-
-  const foo = Component('Foo', {})({}, parentElement, parentComponent)
-
-  assert.equal(
-    foo.parent,
-    parentComponent,
-    'Foo instance object should have parent component object reference'
-  )
-  assert.equal(
-    foo[symbols.holder],
-    parentElement,
-    'Foo instance object should have parent element object reference'
-  )
-  assert.end()
-})
-
-test('Component - Instance should set a root reference', (assert) => {
-  const root = {}
-
-  const foo = Component('Foo', {})({}, {}, {}, root)
-
-  assert.equal(
-    foo.rootParent,
-    root,
-    'Foo instance object should have root component object reference'
-  )
-  assert.end()
-})
-
-test('Component - Instance should initialize reactive props', (assert) => {
-  const foo = Component(
-    'Foo',
-    {}
-  )({
-    props: { foo: 'bar' },
-  })
-
-  const props = foo[symbols.props]
-
-  assert.ok(props, 'Foo instance should have props defined')
-  assert.ok(util.types.isProxy(props), 'Foo instance props should be proxy')
-  assert.equal(props.foo, 'bar')
-  assert.end()
-})
-
-test('Component - Instance should initialize timeouts array', (assert) => {
-  const foo = Component('Foo', {})()
-
-  const timeouts = foo[symbols.timeouts]
-
-  assert.ok(Array.isArray(timeouts), 'Foo instance timeouts should be an array')
-  assert.end()
-})
-
-test('Component - Instance should initialize intervals array', (assert) => {
-  const foo = Component('Foo', {})()
-
-  const intervals = foo[symbols.intervals]
-
-  assert.ok(Array.isArray(intervals), 'Foo instance intervals should be an array')
-  assert.end()
-})
-
-test('Component - Instance should initialize originalState', (assert) => {
-  const config = {
-    state() {
-      return {
-        foo: 'bar',
-      }
-    },
-  }
-  const foo = Component('Foo', config)()
-
-  const state = foo[symbols.originalState]
-
-  assert.equal(state.foo, 'bar', 'Foo instance should store originalState properties')
-  assert.equal(state.hasFocus, false, 'Foo instance should store originalState hasFocus property')
-  assert.end()
-})
-
-test('Component - Instance should initialize reactive state', (assert) => {
-  const config = {
-    state() {
-      return {
-        foo: 'bar',
-      }
-    },
-  }
-  const foo = Component('Foo', config)()
-
-  const state = foo[symbols.state]
-
-  assert.ok(state, 'Foo instance should have state defined')
-  assert.ok(util.types.isProxy(state), 'Foo instance state should be proxy')
-  assert.equal(state.foo, 'bar')
-  assert.end()
-})
-
-test('Component - Instance should initialize children', (assert) => {
-  const parent = {}
-  const expected = []
-  const config = {
-    code: {
-      render: () => {},
-      effects: [],
-    },
-    state() {
-      return {
-        foo: 'bar',
-      }
-    },
-  }
-  const capture = assert.capture(config.code, 'render', () => expected)
-  const foo = Component('Foo', config)({}, parent)
-
-  const children = foo[symbols.children]
-
-  assert.ok(Array.isArray(children), 'Foo instance children should be an array')
-  assert.equal(children, expected, 'Children should be an expected array')
-  const args = capture()[0].args
-  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].Sprite, 'Render should be called with global components object')
-  assert.end()
-})
-
-test('Component - Instance should initialize wrapper', (assert) => {
-  const expected = {}
-  const config = {
-    code: {
-      render: () => [expected],
-      effects: [],
-    },
-  }
-  const foo = Component('Foo', config)()
-
-  const wrapper = foo[symbols.wrapper]
-
-  assert.equal(wrapper, expected, 'Wrapper should be a first element of the children')
-  assert.end()
-})
-
-test('Component - Instance should initialize slots', (assert) => {
-  const expected = {
-    [symbols.isSlot]: true,
-  }
-  const config = {
-    code: {
-      render: () => [{}, {}, expected, {}],
-      effects: [],
-    },
-  }
-  const foo = Component('Foo', config)()
-
-  const slots = foo[symbols.slots]
-
-  assert.ok(Array.isArray(slots), 'Slots should be an array')
-  assert.equal(slots[0], expected, 'Slot should be a expected element of the children')
-  assert.end()
-})
-
-test('Component - Instance should initialize hook events', (assert) => {
-  const wrapper = {
-    node: {
-      on() {},
-    },
-  }
-  const rendererCapture = assert.capture(renderer, 'on')
-  const nodeCapture = assert.capture(wrapper.node, 'on')
-  const config = {
-    code: {
-      render: () => [wrapper],
-      effects: [],
-    },
-    hooks: {
-      frameTick() {},
-      idle() {},
-      attach() {},
-      detach() {},
-      enter() {},
-      exit() {},
-    },
-  }
-  Component('Foo', config)()
-
-  const rendererCalls = rendererCapture()
-  assert.equal(
-    rendererCalls[0].args[0],
-    'frameTick',
-    '`frameTick` event should be registered in Renderer'
-  )
-  assert.equal(rendererCalls[1].args[0], 'idle', '`idle` event should be registered in Renderer')
-  const nodeCalls = nodeCapture()
-  assert.equal(
-    nodeCalls[0].args[0],
-    'inBounds',
-    '`inBounds` event should be registered in the wrapper'
-  )
-  assert.equal(
-    nodeCalls[1].args[0],
-    'outOfBounds',
-    '`outOfBounds` event should be registered in the wrapper'
-  )
-  assert.equal(
-    nodeCalls[2].args[0],
-    'inViewport',
-    '`inViewport` event should be registered in the wrapper'
-  )
-  assert.equal(
-    nodeCalls[3].args[0],
-    'outOfBounds',
-    '`outOfBounds` event should be registered in the wrapper'
-  )
-  assert.end()
-})
-
-test('Component - Instance should execute all side effects', (assert) => {
-  const root = {}
-  const capture = assert.captureFn(() => {})
-  const children = []
-  const config = {
-    code: {
-      render: () => children,
-      effects: [capture],
-    },
-  }
-  const foo = Component('Foo', config)({}, {}, {}, root)
-
-  const calls = capture.calls[0]
-  // 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].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()
-})
-
-test('Component - Instance should have all symbols configured', (assert) => {
-  const config = {
-    state() {
-      return {
-        foo: 'bar',
-      }
-    },
-    watch: {
-      foo(value, oldValue) {},
-    },
-  }
-  const foo = Component('Foo', config)()
-
-  Object.getOwnPropertySymbols(foo).forEach((symbol) => {
-    const descriptor = Object.getOwnPropertyDescriptor(foo, symbol)
-    assert.ok(descriptor.enumerable === true, `${symbol.description} should be be enumerable`)
-    assert.ok(descriptor.configurable === true, `${symbol.description} should be configurable`)
-  })
-  assert.end()
-})
-
-test('Component - Instance should have ready state after the next process tick', (assert) => {
-  assert.plan(1)
-
-  const foo = Component('Foo', {})()
-
-  setTimeout(() => {
-    assert.equal(
-      foo.lifecycle.state,
-      'ready',
-      'Foo component lifecycle should be eventually in a ready state'
-    )
-  })
-})

package/src/components/Circle.orig.js

@@ -1,31 +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 Component from '../component.js'
-
-export default () =>
-  Component('Circle', {
-    template: `
-      <Element :color="$color" :w="$size" :h="$size" :effects="[$shader('radius', {radius: $radius})]"></Element>
-    `,
-    props: [{ key: 'size', default: 40 }, 'color'],
-    computed: {
-      radius() {
-        return this.size / 2
-      },
-    },
-  })