@lightningjs/blits 0.3.0

package/src/lib/log.js

@@ -0,0 +1,106 @@
+/*
+ * 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 Settings from '../settings.js'
+
+const n = () => {}
+
+const time = () =>
+  new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+
+const logger = (context) => {
+  const level = Settings.get('debugLevel')
+  const log = {}
+
+  Object.defineProperty(log, 'info', {
+    get() {
+      return (
+        ((level >= 1 || (Array.isArray(level) && level.indexOf('info') > -1)) &&
+          console.info.bind(
+            window.console,
+            `%c ⚡️ ${context} %c ${time()}`,
+            'background-color: #0284c7; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
+            'color: ##94a3b8;'
+          )) ||
+        n
+      )
+    },
+  })
+
+  Object.defineProperty(log, 'warn', {
+    get() {
+      return (
+        ((level >= 1 || (Array.isArray(level) && level.indexOf('warn') > -1)) &&
+          console.warn.bind(
+            window.console,
+            `%c ⚡️ ${context} %c ${time()}`,
+            'background-color: #fbbf24; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
+            'color: ##94a3b8;'
+          )) ||
+        n
+      )
+    },
+  })
+
+  Object.defineProperty(log, 'error', {
+    get() {
+      return (
+        ((level >= 1 || (Array.isArray(level) && level.indexOf('error') > -1)) &&
+          console.error.bind(
+            window.console,
+            `%c ⚡️ ${context} %c ${time()}`,
+            'background-color: #dc2626; color: white; padding: 3px 6px 3px 1px; border-radius: 3px',
+            'color: ##94a3b8;'
+          )) ||
+        n
+      )
+    },
+  })
+
+  Object.defineProperty(log, 'debug', {
+    get() {
+      return (
+        ((level >= 2 || (Array.isArray(level) && level.indexOf('debug') > -1)) &&
+          console.debug.bind(
+            window.console,
+            `%c ⚡️ ${context} %c (${new Date().toLocaleTimeString([], {
+              hour: '2-digit',
+              minute: '2-digit',
+              second: '2-digit',
+            })})`,
+            'background-color: #e2e8f0; color: #334155; padding: 3px 6px 3px 1px; border-radius: 3px',
+            'color: ##94a3b8;'
+          )) ||
+        n
+      )
+    },
+  })
+
+  return log
+}
+
+export default logger
+
+export let Log
+// review this pattern
+export const initLog = () => {
+  Log = logger('Blits')
+}

package/src/lib/reactivity/effect.js

@@ -0,0 +1,54 @@
+/*
+ * 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
+ */
+
+let currentEffect = null
+const objectMap = new WeakMap()
+
+export const track = (target, key) => {
+  if (currentEffect) {
+    let effectsMap = objectMap.get(target)
+    if (!effectsMap) {
+      effectsMap = new Map()
+      objectMap.set(target, effectsMap)
+    }
+    let effects = effectsMap.get(key)
+    if (!effects) {
+      effects = new Set()
+      effectsMap.set(key, effects)
+    }
+    effects.add(currentEffect)
+  }
+}
+
+export const trigger = (target, key) => {
+  const effectsMap = objectMap.get(target)
+  if (!effectsMap) {
+    return
+  }
+  const effects = effectsMap.get(key)
+  if (effects) {
+    effects.forEach((effect) => {
+      effect()
+    })
+  }
+}
+
+export const effect = (effect) => {
+  currentEffect = effect
+  currentEffect()
+  currentEffect = null
+}

package/src/lib/reactivity/effect.test.js

@@ -0,0 +1,35 @@
+/*
+ * 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 { trigger, track } from './effect.js'
+
+test('Trigger - type', (assert) => {
+  const expected = 'function'
+  const actual = typeof trigger
+
+  assert.equal(actual, expected, 'Trigger should be a function')
+  assert.end()
+})
+
+test('Track type', (assert) => {
+  const expected = 'function'
+  const actual = typeof track
+
+  assert.equal(actual, expected, 'Track should be a function')
+  assert.end()
+})

package/src/lib/reactivity/reactive.js

@@ -0,0 +1,113 @@
+/*
+ * 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 { track, trigger } from './effect.js'
+
+const arrayMethods = [
+  'constructor',
+  'includes',
+  'indexOf',
+  'lastIndexOf',
+  'push',
+  'pop',
+  'shift',
+  'splice',
+  'unshift',
+]
+const reactiveProxy = (target) => {
+  const handler = {
+    get(target, key, receiver) {
+      if (Array.isArray(target) && arrayMethods.includes(key)) {
+        return Reflect.get(target, key, receiver)
+      }
+      track(target, key)
+
+      if (typeof target[key] === 'object') {
+        return reactiveProxy(target[key])
+      }
+
+      return Reflect.get(target, key, receiver)
+    },
+    set(target, key, value, receiver) {
+      const oldValue = target[key]
+
+      const result = Reflect.set(target, key, value, receiver)
+
+      if (typeof result === 'object') {
+        reactiveProxy(target[key])
+      }
+
+      if (key === 'length') {
+        trigger(target, key)
+      } else {
+        if (result && oldValue !== value) {
+          trigger(target, key)
+        }
+      }
+      return result
+    },
+  }
+  return new Proxy(target, handler)
+}
+
+const reactiveDefineProperty = (target) => {
+  Object.keys(target).forEach((key) => {
+    let internalValue = target[key]
+
+    // can be improved
+    if (typeof target[key] === 'object') {
+      return reactiveDefineProperty(target[key])
+    }
+
+    Object.defineProperty(target, key, {
+      enumerable: true, // ?
+      configurable: true, // ?
+      get() {
+        track(target, key)
+        return internalValue
+      },
+      set(newValue) {
+        let oldValue = internalValue
+        if (oldValue !== newValue) {
+          internalValue = newValue
+          trigger(target, key)
+        }
+      },
+    })
+  })
+
+  return target
+}
+
+// maybe an options object?
+export const reactive = (target, type = 'proxy') => {
+  return type === 'proxy' ? reactiveProxy(target) : reactiveDefineProperty(target)
+}
+
+export const memo = (raw) => {
+  const r = {
+    get value() {
+      track(r, 'value')
+      return raw
+    },
+    set value(v) {
+      raw = v
+      trigger(r, 'value')
+    },
+  }
+  return r
+}

package/src/lib/reactivity/reactive.test.js

@@ -0,0 +1,27 @@
+/*
+ * 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 { reactive } from './reactive.js'
+
+test('Type', (assert) => {
+  const expected = 'function'
+  const actual = typeof reactive
+
+  assert.equal(actual, expected, 'Reactive should be a function')
+  assert.end()
+})

package/src/lib/setup/base.js

@@ -0,0 +1,218 @@
+/*
+ * 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 Focus from '../../focus.js'
+import { to } from '../../router.js'
+import Image from '../../components/Image.js'
+import Circle from '../../components/Circle.js'
+import RouterView from '../../components/RouterView.js'
+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'
+
+const shaders = {
+  radius: 'radius',
+  rounded: 'radius',
+  border: 'border',
+  borderTop: 'borderTop',
+  glitch: 'glitch',
+}
+
+export default (component) => {
+  Object.defineProperties(component.prototype, {
+    focus: {
+      value: function (e) {
+        Focus.set(this, e)
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    unfocus: {
+      value: function () {
+        this.lifecycle.state = 'unfocus'
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    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.___intervals.length; i++) {
+          clearInterval(this.___intervals[i])
+        }
+        eventListeners.removeListeners(this)
+        deleteChildren(this.___children)
+        Log.debug(`Destroyed component ${this.componentId}`)
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    select: {
+      value: function (id) {
+        let selected = null
+        this.___children.forEach((child) => {
+          if (Array.isArray(child)) {
+            child.forEach((c) => {
+              if (c['id'] === id) selected = c
+            })
+          } else {
+            if (child['id'] === id) selected = child
+          }
+        })
+
+        return selected
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    shader: {
+      value: function (type, args) {
+        if (type in shaders) {
+          return {
+            type: shaders[type],
+            props: args,
+          }
+        } else {
+          Log.error(`Shader ${type} not found`)
+        }
+      },
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
+    $router: {
+      value: {
+        to,
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    ___components: {
+      value: {
+        Image: Image(),
+        Circle: Circle(),
+        RouterView: RouterView(),
+        Sprite: Sprite(),
+        Text: Text(),
+      },
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
+    ___timeouts: {
+      value: [],
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
+    $setTimeout: {
+      value: function (fn, ms, ...params) {
+        const timeoutId = setTimeout(
+          () => {
+            this.____timeouts = this.___timeouts.filter((id) => id !== timeoutId)
+            fn.apply(null, params)
+          },
+          ms,
+          params
+        )
+        this.___timeouts.push(timeoutId)
+        return timeoutId
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    ___intervals: {
+      value: [],
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
+    $setInterval: {
+      value: function (fn, ms, ...params) {
+        const intervalId = setInterval(
+          () => {
+            this.____intervals = this.___intervals.filter((id) => id !== intervalId)
+            fn.apply(null, params)
+          },
+          ms,
+          params
+        )
+        this.___intervals.push(intervalId)
+        return intervalId
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    $emit: {
+      value: function (event, params) {
+        eventListeners.executeListeners(event, params)
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    $listen: {
+      value: function (event, callback) {
+        eventListeners.registerListener(this, event, callback)
+      },
+      writable: false,
+      enumerable: true,
+      configurable: false,
+    },
+    ___renderer: {
+      value: renderer,
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
+    $log: {
+      value: log('App'),
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    },
+  })
+}
+
+const deleteChildren = function (children) {
+  for (let i = 0; i < children.length; i++) {
+    if (!children[i]) return
+    if (Array.isArray(children[i])) {
+      deleteChildren(children[i])
+    } else if (children[i].delete) {
+      children[i].delete()
+    } else if (children[i].destroy) {
+      children[i].destroy()
+      children[i] = null
+    }
+    children[i] = null
+  }
+
+  children = []
+}

package/src/lib/setup/computed.js

@@ -0,0 +1,43 @@
+/*
+ * 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 { Log } from '../log.js'
+
+export default (component, computeds) => {
+  component.___computedKeys = []
+
+  for (let computed in computeds) {
+    // test for reserved keys?
+    if (component.___stateKeys && component.___stateKeys.indexOf(computed) > -1) {
+      Log.error(`${computed} already exists as a prop`)
+    } else if (component.___propKeys && component.___propKeys.indexOf(computed) > -1) {
+      Log.error(`${computed} already exists as a prop`)
+    } else if (component.___methodKeys && component.___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)
+      Object.defineProperty(component.prototype, computed, {
+        get() {
+          return computeds[computed].apply(this)
+        },
+      })
+    }
+  }
+}

package/src/lib/setup/input.js

@@ -0,0 +1,28 @@
+/*
+ * 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 { Log } from '../log.js'
+
+export default (component, input) => {
+  component.prototype.___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]
+  })
+}

package/src/lib/setup/methods.js

@@ -0,0 +1,35 @@
+/*
+ * 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 { Log } from '../log.js'
+
+export default (component, methods) => {
+  component.___methodsKeys = []
+
+  for (let method in methods) {
+    // test for reserved keys?
+    if (component.___propKeys && component.___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.prototype[method] = methods[method]
+    }
+  }
+}