@lightningjs/blits 1.30.2 → 1.31.0

package/docs/sidebar.json

@@ -1,171 +0,0 @@
-[
-  {
-    "text": "Getting Started",
-    "items": [
-      {
-        "text": "Intro",
-        "link": "/getting_started/intro"
-      },
-      {
-        "text": "Getting started",
-        "link": "/getting_started/getting_started"
-      },
-      {
-        "text": "File structure",
-        "link": "/getting_started/file_structure"
-      }
-    ]
-  },
-  {
-    "text": "Essentials",
-    "items": [
-      {
-        "text": "Application root",
-        "link": "/essentials/application_root"
-      },
-      {
-        "text": "Component basics",
-        "link": "/essentials/components"
-      },
-      {
-        "text": "Template syntax",
-        "link": "/essentials/template_syntax"
-      },
-      {
-        "text": "Supported element attributes",
-        "link": "/essentials/element_attributes"
-      },
-      {
-        "text": "Displaying images",
-        "link": "/essentials/displaying_images"
-      },
-      {
-        "text": "Displaying text",
-        "link": "/essentials/displaying_text"
-      },
-      {
-        "text": "Application settings",
-        "link": "/essentials/settings"
-      }
-    ]
-  },
-  {
-    "text": "Components",
-    "items": [
-      {
-        "text": "State",
-        "link": "/components/component_state"
-      },
-      {
-        "text": "Props",
-        "link": "/components/props"
-      },
-      {
-        "text": "Computed properties",
-        "link": "/components/computed_properties"
-      },
-      {
-        "text": "Watchers",
-        "link": "/components/watchers"
-      },
-      {
-        "text": "Hooking into lifecycle events",
-        "link": "/components/lifecycle_events"
-      },
-      {
-        "text": "Handling User input",
-        "link": "/components/user_input"
-      },
-      {
-        "text": "Methods",
-        "link": "/components/methods"
-      },
-      {
-        "text": "Utility methods",
-        "link": "/components/utility_methods"
-      }
-    ]
-  },
-  {
-    "text": "Transitions and Animations",
-    "items": [
-      {
-        "text": "Transitions",
-        "link": "/transitions_animations/transitions"
-      }
-    ]
-  },
-  {
-    "text": "Built-in components",
-    "items": [
-      {
-        "text": "Directives",
-        "link": "/built-in/directives"
-      },
-      {
-        "text": "For loop",
-        "link": "/built-in/for-loop"
-      },
-      {
-        "text": "Layout",
-        "link": "/built-in/layout.md"
-      }
-    ]
-  },
-  {
-    "text": "Performance",
-    "items": [
-      {
-        "text": "Lazy Loading",
-        "link": "/performance/lazy-loading"
-      }
-    ]
-  },
-  {
-    "text": "Router",
-    "items": [
-      {
-        "text": "Basics",
-        "link": "/router/basics"
-      },
-      {
-        "text": "Hooks",
-        "link": "/router/hooks"
-      },
-      {
-        "text": "Transitions",
-        "link": "/router/transitions"
-      }
-    ]
-  },
-  {
-    "text": "Plugins",
-    "items": [
-      {
-        "text": "Text-to-Speech / Announcer",
-        "link": "/plugins/text-to-speech-announcer"
-      },
-      {
-        "text": "Language",
-        "link": "/plugins/language"
-      },
-      {
-        "text": "Theme",
-        "link": "/plugins/theme"
-      },
-      {
-        "text": "Global App State",
-        "link": "/plugins/global_app_state"
-      }
-    ]
-  },
-  {
-    "text": "Performance",
-    "items": [
-      {
-        "text": "Lazy loading",
-        "link": "/performance/lazy-loading"
-      }
-    ]
-  }
-]

package/docs/transitions_animations/transitions.md

@@ -1,150 +0,0 @@
-# Transitions
-
-So far we have explored how to create components and draw elements on the screen. But everything has
-been rather static so far.
-
-We did learn how to _reactively_ change values and trigger rerenders based on that. So if you try the example below, you'll see that indeed our golden element changes position. But it just jumps from one place to another:
-
-```js
-export default Blits.Component('Gold', {
-  template: `
-    <Element color="gold" w="100" h="100" :x="$x" :y="$y" />
-  `,
-  state() {
-    return {
-      x: 0,
-      y: 0,
-    }
-  },
-  input: {
-    enter() {
-      this.x = this.x + 100
-      this.y = this.y + 50
-    }
-  },
-```
-
-Using _transitions_ we really make our App come alive.
-
-## Applying a transition
-
-Blits offers an easy and intuitive way to apply transitions. All you need to do is add the `.transition` modifier to a reactive attribute, and now whenever you change the value referenced in the attribute, it will automatically _smooth_ into the new value.
-
-```js
-export default Blits.Component('Gold', {
-  template: `
-    <Element color="gold" w="100" h="100" :x.transition="$x" :y.transition="$y" />
-  `,
-  state() {
-    return {
-      x: 0,
-      y: 0,
-    }
-  },
-  input: {
-    enter() {
-      this.x = this.x + 100
-      this.y = this.y + 50
-    }
-  },
-```
-
-If we try out the modified example above, you'll notice how much difference adding a simple transition makes.
-
-When the `.transition`-modifier is added to a reactive attribute, a default `ease-in` transition with a duration of `300ms` is applied
-
-## Customizing transitions
-
-While the default transition will look pretty good out of the box and is great for quickly improving the look of your App, you may want to customize specific transitions.
-
-Blits gives you full control over your transitions, with a simple to use format, right inside your template.
-
-Instead of referencing your component's state variable directly, you can also supply an inline `object literal`` in the attribute with a `.transition`-modifier. This will allow you to pass a number of options to change the way the transition will work.
-
-The transition object must have a `value` key, which references the state variable (or prop or computed property) that triggers the transition.
-
-Furthermore, you can specify:
-
-- `duration` - the duration of the transition in `ms`
-- `delay` - the time in `ms` after which the transition should initiate
-- `easing` - the easing function of the transition. Can be one of the default easing options listed below, or a custom `cubic-bezier` definition (i.e. `cubic-bezier(0,1.35,.99,-0.07)`).
-
-```xml
-<Element color="gold" w="100" h="100"
-  :x.transition="{value: $x, duration: 300, easing: 'ease-in-back', delay: 400}"
-  :y.transition="{value: $x, duration: 300, easing: 'cubic-bezier(1,-0.64,0.39,1.44)'}">
-</Element>
-```
-
-Besides a reference to the `value`, you can also use dynamic values for the other keys in the transition object. This way you'll be able to dynamically control the delay, duration or easing function.
-
-```xml
-<Element color="gold" w="100" h="100"
-  :x.transition="{value: $x, duration: $dynamicDuration, delay: $dynamicDelay}">
-</Element>
-```
-
-### Available easing functions
-
-- `ease-in`
-- `ease-out`
-- `ease-in-out`
-- `ease-in-sine`
-- `ease-out-sine`
-- `ease-in-out-sine`
-- `ease-in-cubic`
-- `ease-out-cubic`
-- `ease-in-out-cubic`
-- `ease-in-circ`
-- `ease-out-circ`
-- `ease-in-out-circ`
-- `ease-in-back`
-- `ease-out-back`
-- `ease-in-out-back`
-
-## Listening to transition events
-
-Sometimes you may want to perform an action when a transition _ends_ or when it _starts_.
-
-You can easily hook into these transition events by adding a `start` and `end` key to the transition object. Both values should be a function (or a reference to a `method` on your component).
-
-The `start` function will be called when the transition actually starts (after a possible specified delay) and the `end` function is called as soon as the transition is finished.
-
-```js
-export default Blits.Component('Gold', {
-  template: `
-    <Element color="gold" w="100" h="100"
-      :x.transition="{value: $x, start: $transitionBegin, end: $transitionEnd}"
-    />
-  `,
-  ///
-  methods: {
-    transitionBegin() {
-      //
-    },
-    transitionEnd() {
-      //
-    },
-  }
-```
-
-It is also possible to keep track of the entire progress of a transition. Every frametick during a transition (ideally once every 16ms), the renderer reports the progress of the transition. You can hook into this event by specifying a `progress` key on the transition configuration object, with a function to excute.
-
-This function is executed _every_ frametick, and receives the current progress and the previous progress as its arguments. The progress is indicated as a value between `0` and `1`, where 0 means start and 1 means finished.
-
-```js
-export default Blits.Component('Gold', {
-  template: `
-    <Element color="gold" w="100" h="100"
-      :x.transition="{value: $x, progress: $transitionProgress}"
-    />
-  `,
-  ///
-  methods: {
-    transitionProgress(progress, previousProgress) {
-      if(progress >= 0.5 && previousProgress < 0.5) {
-        // halfway through the transition
-      }
-    },
-  }
-```

package/jsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "allowJs": true,
-    "checkJs": true,
-    "moduleResolution": "node",
-    "baseUrl": "./"
-  },
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}

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()
-}