@lightningjs/blits 0.3.0

package/src/component.js

@@ -0,0 +1,192 @@
+/*
+ * 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 parser from './lib/templateparser/parser.js'
+import codegenerator from './lib/codegenerator/generator.js'
+
+import element from './element.js'
+
+import { createHumanReadableId, createInternalId } from './lib/componentId.js'
+import { registerHooks, emit } from './lib/hooks.js'
+
+import { reactive } from './lib/reactivity/reactive.js'
+import setupBase from './lib/setup/base.js'
+import setupProps from './lib/setup/props.js'
+import setupMethods from './lib/setup/methods.js'
+import setupState from './lib/setup/state.js'
+import setupComputed from './lib/setup/computed.js'
+import setupInput from './lib/setup/input.js'
+import setupRoutes from './lib/setup/routes.js'
+import setupWatch from './lib/setup/watch.js'
+import { effect } from './lib/reactivity/effect.js'
+import { Log } from './lib/log.js'
+
+const stage = {
+  element,
+}
+
+const required = (name) => {
+  throw new Error(`Parameter ${name} is required`)
+}
+
+const Component = (name = required('name'), config = required('config')) => {
+  let code = null
+
+  const setupComponent = (lifecycle) => {
+    // code generation
+    if (!code) {
+      Log.debug(`Generating code for ${name} component`)
+      code = codegenerator.call(config, parser(config.template))
+    }
+
+    setupBase(component)
+
+    // setup hooks
+    registerHooks(config.hooks, name)
+    lifecycle.state = 'beforeSetup'
+
+    // setup props
+    // if (config.props) // because of the default props like id - might change this
+    setupProps(component, config.props)
+
+    // setup methods
+    if (config.methods) setupMethods(component, config.methods)
+
+    // setup state
+    if (config.state) setupState(component, config.state)
+
+    // setup computed
+    if (config.computed) setupComputed(component, config.computed)
+
+    // setup watchers
+    if (config.watch) setupWatch(component, config.watch)
+
+    // setup routes
+    if (config.routes) setupRoutes(component, config.routes)
+
+    // setup input
+    if (config.input) setupInput(component, config.input)
+
+    component.setup = true
+    lifecycle.state = 'setup'
+  }
+
+  const createLifecycle = (scope) => {
+    const states = ['init', 'beforeSetup', 'setup', 'ready', 'focus', 'unfocus', 'destroy']
+
+    return {
+      previous: null,
+      current: null,
+      get state() {
+        return this.current
+      },
+      set state(v) {
+        if (states.indexOf(v) > -1 && v !== this.current) {
+          Log.debug(
+            `Setting lifecycle state from ${this.previous} to ${v} for ${scope.componentId}`
+          )
+          this.previous = this.current
+          // emit 'private' hook
+          emit(`___${v}`, name, scope)
+          // emit 'public' hook
+          emit(v, name, scope)
+          this.current = v
+        }
+      },
+    }
+  }
+
+  const component = function (opts, parentEl, parentComponent) {
+    this.lifecycle = createLifecycle(this)
+
+    if (!component.setup) {
+      setupComponent(this.lifecycle)
+    }
+
+    this.parent = parentComponent
+
+    Object.defineProperties(this, {
+      componentId: {
+        value: createHumanReadableId(name),
+        writable: false,
+        enumerable: true,
+        configurable: false,
+      },
+      ___id: {
+        value: createInternalId(),
+        writable: false,
+        enumerable: false,
+        configurable: false,
+      },
+      ___props: {
+        value: reactive(opts.props || {}),
+        writable: false,
+        enumerable: false,
+        configurable: false,
+      },
+    })
+
+    Object.defineProperty(this, '___state', {
+      value: reactive(
+        (config.state && typeof config.state === 'function' && config.state.apply(this)) || {}
+      ),
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    })
+
+    this.lifecycle.state = 'init'
+
+    Object.defineProperty(this, '___children', {
+      value: code.render.apply(stage, [parentEl, this, code.context]),
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    })
+
+    code.effects.forEach((eff) => {
+      effect(() => {
+        eff.apply(stage, [this, this.___children, code.context])
+      })
+    })
+
+    if (this.___watchers) {
+      Object.keys(this.___watchers).forEach((watchKey) => {
+        let old = this[watchKey]
+        effect(() => {
+          if (old !== this[watchKey]) {
+            this.___watchers[watchKey].apply(this, [this[watchKey], old])
+            old = this[watchKey]
+          }
+        })
+      })
+    }
+
+    // next tick
+    setTimeout(() => (this.lifecycle.state = 'ready'))
+  }
+
+  const factory = (options = {}, parentEl, parentComponent) => {
+    return new component(options, parentEl, parentComponent)
+  }
+
+  factory.config = config
+
+  return factory
+}
+
+export default Component

package/src/component.test.js

@@ -0,0 +1,51 @@
+/*
+ * 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'
+
+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()
+  }, 'Thorw an error when no name argument has been passed')
+
+  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()
+})

package/src/components/Circle.js

@@ -0,0 +1,31 @@
+/*
+ * 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
+      },
+    },
+  })

package/src/components/Image.js

@@ -0,0 +1,33 @@
+/*
+ * 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('Image', {
+    template: `
+      <Element :imageSource="$imageSource" />`,
+    props: ['src'],
+    computed: {
+      imageSource() {
+        if (/^(?:https?:)?\/\//i.test(this.src)) {
+          return this.src
+        }
+        return `${window.location.protocol}//${window.location.host}/${this.src}`
+      },
+    },
+  })

package/src/components/RouterView.js

@@ -0,0 +1,38 @@
+/*
+ * 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'
+import Router from '../router.js'
+
+let handler
+
+export default () =>
+  Component('RouterView', {
+    template: `
+      <Element></Element>
+    `,
+    hooks: {
+      ready() {
+        handler = () => Router.navigate.apply(this)
+        Router.navigate.apply(this)
+        window.addEventListener('hashchange', handler)
+      },
+      destroy() {
+        window.removeEventListener('hashchange', handler, false)
+      },
+    },
+  })

package/src/components/Sprite.js

@@ -0,0 +1,56 @@
+/*
+ * 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('Sprite', {
+    template: `
+      <Element w="$w" h="$h" :texture="$texture" />
+    `,
+    props: ['image', 'map', 'frame', 'w', 'h'],
+    state() {
+      return {
+        spriteTexture: false,
+      }
+    },
+    computed: {
+      texture() {
+        const options =
+          'frames' in this.map
+            ? { ...(this.map.defaults || {}), ...this.map.frames[this.frame] }
+            : this.map[this.frame]
+
+        if (this.spriteTexture && options) {
+          return this.___renderer.makeTexture('SubTexture', {
+            texture: this.spriteTexture,
+            x: options.x,
+            y: options.y,
+            width: options.w,
+            height: options.h,
+          })
+        }
+      },
+    },
+    hooks: {
+      ready() {
+        this.spriteTexture = this.___renderer.makeTexture('ImageTexture', {
+          src: `${window.location.protocol}//${window.location.host}/${this.image}`,
+        })
+      },
+    },
+  })

package/src/components/Text.js

@@ -0,0 +1,61 @@
+/*
+ * 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('Text', {
+    template: `
+      <Element
+        __textnode="true"
+        :text="$text"
+        fontFamily="$font"
+        :fontSize="$size"
+        :color="$color"
+        :style="$style"
+        :weight="$weight"
+        letterSpacing="$letterspacing"
+        stretch="$stretch"
+        :w="$w"
+        :textAlign="$align"
+      />`,
+    props: [
+      'content',
+      {
+        key: 'font',
+        default: 'TedNext',
+      },
+      {
+        key: 'size',
+        cast: Number,
+        default: 32,
+      },
+      'style',
+      'color',
+      'weight',
+      'letterspacing',
+      'stretch',
+      'align',
+      'w',
+    ],
+    computed: {
+      text() {
+        return this.slotcontent || this.content || ''
+      },
+    },
+    hooks: {},
+  })

package/src/element.js

@@ -0,0 +1,236 @@
+/*
+ * 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 { renderer } from './launch.js'
+import colors from './lib/colors/colors.js'
+
+import { Log } from './lib/log.js'
+
+const isTransition = (value) => {
+  return typeof value === 'object' && 'transition' in value
+}
+
+const isObjectString = (str) => {
+  return typeof str === 'string' && str.startsWith('{') && str.endsWith('}')
+}
+
+const parseToObject = (str) => {
+  return JSON.parse(str.replace(/'/g, '"').replace(/([\w-_]+)\s*:/g, '"$1":'))
+}
+
+const transformations = {
+  unpackTransition(obj) {
+    if (typeof obj === 'object' && obj.constructor.name === 'Object') {
+      if ('value' in obj) {
+        return obj.value
+      } else if ('transition' in obj) {
+        return this.unpackTransition(obj.transition)
+      } else {
+        return obj
+      }
+    } else {
+      return obj
+    }
+  },
+  remap(props) {
+    'w' in props && (props.width = props.w)
+    delete props.w
+    'h' in props && (props.height = props.h)
+    delete props.h
+    'z' in props && (props.zIndex = props.z)
+    delete props.z
+  },
+  parentId(props) {
+    props.parent = props.parentId === 'root' ? renderer.root : renderer.getNodeById(props.parentId)
+    delete props.parentId
+  },
+  color(props) {
+    if (
+      typeof props.color === 'object' ||
+      (isObjectString(props.color) && (props.color = parseToObject(props.color)))
+    ) {
+      const map = {
+        top: 'colorTop',
+        bottom: 'colorBottom',
+        left: 'colorLeft',
+        right: 'colorRight',
+      }
+      Object.entries(props.color).forEach((color) => {
+        props[map[color[0]]] = colors.normalize(color[1])
+      })
+      delete props.mount
+    } else {
+      props.color = colors.normalize(props.color)
+    }
+  },
+  mount(props) {
+    if (
+      typeof props.mount === 'object' ||
+      (isObjectString(props.mount) && (props.mount = parseToObject(props.mount)))
+    ) {
+      const map = {
+        x: 'mountX',
+        y: 'mountY',
+      }
+      Object.entries(props.mount).forEach((mount) => {
+        props[map[mount[0]]] = mount[1]
+      })
+      delete props.mount
+    }
+  },
+  pivot(props) {
+    if (
+      typeof props.pivot === 'object' ||
+      (isObjectString(props.pivot) && (props.pivot = parseToObject(props.pivot)))
+    ) {
+      const map = {
+        x: 'pivotX',
+        y: 'pivotY',
+      }
+      Object.entries(props.pivot).forEach((pivot) => {
+        props[map[pivot[0]]] = pivot[1]
+      })
+      delete props.pivot
+    }
+  },
+  show(props) {
+    props.alpha = props.show ? 1 : 0
+    delete props.show
+  },
+  rotation(props) {
+    props.rotation = props.rotation * (Math.PI / 180)
+  },
+  text(props) {
+    props.text = props.text.toString()
+  },
+  textureColor(props) {
+    if (!('color' in props)) {
+      props.color = 'src' in props || 'texture' in props ? '0xffffffff' : '0x00000000'
+    }
+  },
+  effects(props) {
+    props.shader = renderer.makeShader('DynamicShader', {
+      effects: props.effects.map((eff) => {
+        if (eff.props && eff.props.color) {
+          eff.props.color = colors.normalize(eff.props.color)
+        }
+        return eff
+      }),
+    })
+
+    delete props.effects
+  },
+  src(props, setProperties) {
+    if (setProperties.indexOf('color') === -1) {
+      props.color = 0xffffffff
+    }
+  },
+  texture(props, setProperties) {
+    this.src(props, setProperties)
+  },
+}
+
+const Element = {
+  defaults: {
+    rotation: 0,
+  },
+  populate(data) {
+    let props = {
+      ...this.defaults,
+      ...this.config,
+      ...data,
+    }
+    this.initData = data
+
+    transformations.remap(props)
+    Object.keys(props).forEach((prop) => {
+      if (transformations[prop]) {
+        props[prop] = transformations.unpackTransition(props[prop])
+        transformations[prop](props, this.setProperties)
+      }
+
+      this.setProperties.push(prop)
+    })
+
+    transformations.textureColor(props, this.setProperties)
+
+    this.node = props.__textnode ? renderer.createTextNode(props) : renderer.createNode(props)
+  },
+  set(prop, value) {
+    if (isTransition(value) && this.setProperties.indexOf(prop) > -1) {
+      this.animate(prop, value.transition)
+    } else {
+      const props = {}
+      if (prop !== 'texture') {
+        props[prop] = transformations.unpackTransition(value)
+      } else {
+        props[prop] = value
+      }
+
+      transformations.remap(props)
+      if (transformations[prop]) {
+        transformations[prop](props, this.setProperties)
+      }
+
+      Object.keys(props).forEach((prop) => {
+        this.node[prop] = props[prop]
+      })
+    }
+    this.setProperties.indexOf(prop) === -1 && this.setProperties.push(prop)
+  },
+  delete() {
+    Log.debug('Deleting  Node', this.nodeId, this.node)
+    this.node.parent = null
+  },
+  get nodeId() {
+    return this.node && this.node.id
+  },
+  get id() {
+    return this.initData.id || null
+  },
+  animate(prop, value) {
+    const props = {}
+    props[prop] = transformations.unpackTransition(value)
+
+    transformations.remap(props)
+
+    if (transformations[prop]) {
+      transformations[prop](props)
+    }
+
+    // works for now
+    prop = Object.keys(props).pop()
+
+    if (this.node[prop] !== props[prop]) {
+      const f = this.node.animate(props, {
+        duration: typeof value === 'object' ? ('duration' in value ? value.duration : 300) : 300,
+        easing:
+          typeof value === 'object' ? ('function' in value ? value.function : 'ease') : 'ease',
+      })
+
+      value.delay ? setTimeout(() => f.start(), value.delay) : f.start()
+    }
+  },
+}
+
+export default (config) =>
+  Object.assign(Object.create(Element), {
+    node: null,
+    setProperties: [],
+    initData: {},
+    config,
+  })