@lightningjs/blits 0.3.0

package/src/lib/colors/colors.js

@@ -0,0 +1,70 @@
+/*
+ * 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 htmlColors from './htmlColors.js'
+import { Log } from '../log.js'
+
+export default {
+  normalize(color = '') {
+    color = color.toString()
+
+    if (color.startsWith('0x')) {
+      return color
+    }
+
+    const rgbaRegex = /rgba?\((.+)\)/gi
+    const hslaRegex = /hsla?\((.+)\)/gi
+
+    // RGB(A) color format
+    if (rgbaRegex.test(color)) {
+      const match = new RegExp(rgbaRegex).exec(color)
+      if (match[1]) {
+        color = match[1]
+          .split(',')
+          .map((c, i) => {
+            if (i == 3) {
+              c = Math.min(Math.max(Math.round(c * 255), 0), 255)
+            }
+            return parseInt(c).toString(16).padStart(2, '0')
+          })
+          .join('')
+        return color.padEnd(8, 'f').padStart(10, '0x')
+      }
+    }
+    // HSL(A) color format
+    else if (hslaRegex.test(color)) {
+      Log.warn('HSL(A) color format is not supported yet')
+      return 0xffffffff
+    }
+    // HTMl name color format
+    else if (color in htmlColors) {
+      return htmlColors[color]
+    }
+    // hex rgba format
+    else if (color.startsWith('#')) {
+      color = color.substring(1)
+    }
+    if (color.length === 3) {
+      color = color
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    }
+
+    return color.padEnd(8, 'f').padStart(10, '0x')
+  },
+}

package/src/lib/colors/colors.test.js

@@ -0,0 +1,190 @@
+/*
+ * 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 colors from './colors.js'
+
+test('Object', (assert) => {
+  const expected = 'object'
+  const actual = typeof colors
+
+  assert.equal(actual, expected, 'Colors should be an object')
+  assert.end()
+})
+
+test('6 character hex', (assert) => {
+  const input = ['#ffffff', '#000000', '#c0ffee', '#7dd3fc', '#0c4a6e']
+  const expected = ['0xffffffff', '0xff000000', '0xffeeffc0', '0xfffcd37d', '0xff6e4a0c']
+
+  const actual = input.map(colors.normalize)
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'A 6 character hex code should return the correct color in abgr format'
+  )
+  assert.end()
+})
+
+test('3 character hex', (assert) => {
+  const input = ['#fff', '#000', '#c8c']
+  const expected = ['0xffffffff', '0xff000000', '0xffcc88cc']
+
+  const actual = input.map(colors.normalize)
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'A 3 character hex code should return the correct color in abgr format'
+  )
+  assert.end()
+})
+
+test('8 character hex (rgba)', (assert) => {
+  const input = ['#ffffffff', '#000000ff', '#c0ffee80', '#7dd3fc10', '#0c4a6eff']
+  const expected = ['0xffffffff', '0xff000000', '0x80eeffc0', '0x10fcd37d', '0xff6e4a0c']
+
+  const actual = input.map(colors.normalize)
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'A 8 character hex (rgba) code should return the correct color in abgr format'
+  )
+  assert.end()
+})
+
+test('RGB colors', (assert) => {
+  const input = [
+    'rgb(255,255,255)',
+    'rgb(0,0,0)',
+    'rgb(192, 255, 238)',
+    'rgb(125, 211, 252)',
+    'rgb(12, 74, 110)',
+  ]
+  const expected = ['0xffffffff', '0xff000000', '0xffeeffc0', '0xfffcd37d', '0xff6e4a0c']
+
+  const actual = input.map(colors.normalize)
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'RGB codes prefixed with # should return the correct color in abgr format'
+  )
+  assert.end()
+})
+
+test('RGBA colors', (assert) => {
+  const input = [
+    'rgb(255,255,255,1)',
+    'rgb(0,0,0,1)',
+    'rgb(192, 255, 238, 0.5)',
+    'rgb(125, 211, 252, 0.1)',
+    'rgb(12, 74, 110, 0)',
+    'rgb(12, 74, 110, -0.5)', // negative alpha should become 0
+    'rgb(12, 74, 110, 1.2)', // highher than 1 alpha should become 1
+  ]
+  const expected = [
+    '0xffffffff',
+    '0xff000000',
+    '0x80eeffc0',
+    '0x1afcd37d',
+    '0x006e4a0c',
+    '0x006e4a0c',
+    '0xff6e4a0c',
+  ]
+
+  const actual = input.map(colors.normalize)
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'RGB codes prefixed with # should return the correct color in abgr format'
+  )
+  assert.end()
+})
+
+test('RGBA colors', (assert) => {
+  const input = [
+    'rgb(255,255,255,1)',
+    'rgb(0,0,0,1)',
+    'rgb(192, 255, 238, 0.5)',
+    'rgb(125, 211, 252, 0.1)',
+    'rgb(12, 74, 110, 0)',
+    'rgb(12, 74, 110, -0.5)', // negative alpha should become 0
+    'rgb(12, 74, 110, 1.2)', // highher than 1 alpha should become 1
+  ]
+  const expected = [
+    '0xffffffff',
+    '0xff000000',
+    '0x80eeffc0',
+    '0x1afcd37d',
+    '0x006e4a0c',
+    '0x006e4a0c',
+    '0xff6e4a0c',
+  ]
+
+  const actual = input.map(colors.normalize)
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'RGB codes prefixed with # should return the correct color in abgr format'
+  )
+  assert.end()
+})
+
+test('HTML colors', (assert) => {
+  const input = ['blanchedalmond', 'aqua', 'tomato', 'saddlebrown', 'red']
+
+  const expected = [
+    parseInt('0xffcdebff', 16),
+    parseInt('0xffffff00', 16),
+    parseInt('0xff4763ff', 16),
+    parseInt('0xff13458b', 16),
+    parseInt('0xff0000ff', 16),
+  ]
+
+  const actual = input.map(colors.normalize)
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'RGB codes prefixed with # should return the correct color in abgr format'
+  )
+  assert.end()
+})
+
+// test('hsl', (assert) => {
+//   const input = [
+//     'hsl(0,0,100)',
+//     'hsl(0,0, 0)',
+//     'hsl(164,100,88)',
+//     'hsl(199,95,74)',
+//     'hsl(202,80,24)',
+//   ]
+//   const expected = ['0xffffffff', '0xff000000', '0xffeeffc0', '0xfffcd37d', '0xff6e4a0c']
+
+//   const actual = input.map(colors.normalize)
+
+//   assert.deepEqual(actual, expected, 'A hsl code should return the correct color in abgr format')
+//   assert.end()
+// })
+
+// hls()
+// hlsa()
+// html color (red, blue, pink)

package/src/lib/colors/htmlColors.js

@@ -0,0 +1,168 @@
+/*
+ * 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
+ */
+
+export default {
+  aliceblue: 0xf0f8ffff,
+  antiquewhite: 0xfaebd7ff,
+  aqua: 0xffffff00,
+  aquamarine: 0x7fffd4ff,
+  azure: 0xf0ffffff,
+  beige: 0xf5f5dcff,
+  bisque: 0xffe4c4ff,
+  black: 0x000000ff,
+  blanchedalmond: 0xffebcdff,
+  blue: 0x0000ffff,
+  blueviolet: 0x8a2be2ff,
+  brown: 0xa52a2aff,
+  burlywood: 0xdeb887ff,
+  cadetblue: 0x5f9ea0ff,
+  chartreuse: 0x7fff00ff,
+  chocolate: 0xd2691eff,
+  coral: 0xff7f50ff,
+  cornflowerblue: 0x6495edff,
+  cornsilk: 0xfff8dcff,
+  crimson: 0xdc143cff,
+  cyan: 0x00ffffff,
+  darkblue: 0x00008bff,
+  darkcyan: 0x008b8bff,
+  darkgoldenrod: 0xb8860bff,
+  darkgray: 0xa9a9a9ff,
+  darkgreen: 0x006400ff,
+  darkgrey: 0xa9a9a9ff,
+  darkkhaki: 0xbdb76bff,
+  darkmagenta: 0x8b008bff,
+  darkolivegreen: 0x556b2fff,
+  darkorange: 0xff8c00ff,
+  darkorchid: 0x9932ccff,
+  darkred: 0x8b0000ff,
+  darksalmon: 0xe9967aff,
+  darkseagreen: 0x8fbc8fff,
+  darkslateblue: 0x483d8bff,
+  darkslategray: 0x2f4f4fff,
+  darkslategrey: 0x2f4f4fff,
+  darkturquoise: 0x00ced1ff,
+  darkviolet: 0x9400d3ff,
+  deeppink: 0xff1493ff,
+  deepskyblue: 0x00bfffff,
+  dimgray: 0x696969ff,
+  dimgrey: 0x696969ff,
+  dodgerblue: 0x1e90ffff,
+  firebrick: 0xb22222ff,
+  floralwhite: 0xfffaf0ff,
+  forestgreen: 0x228b22ff,
+  fuchsia: 0xff00ffff,
+  gainsboro: 0xdcdcdcff,
+  ghostwhite: 0xf8f8ffff,
+  gold: 0xffd700ff,
+  goldenrod: 0xdaa520ff,
+  gray: 0x808080ff,
+  green: 0x008000ff,
+  greenyellow: 0xadff2fff,
+  grey: 0x808080ff,
+  honeydew: 0xf0fff0ff,
+  hotpink: 0xff69b4ff,
+  indianred: 0xcd5c5cff,
+  indigo: 0x4b0082ff,
+  ivory: 0xfffff0ff,
+  khaki: 0xf0e68cff,
+  lavender: 0xe6e6faff,
+  lavenderblush: 0xfff0f5ff,
+  lawngreen: 0x7cfc00ff,
+  lemonchiffon: 0xfffacdff,
+  lightblue: 0xadd8e6ff,
+  lightcoral: 0xf08080ff,
+  lightcyan: 0xe0ffffff,
+  lightgoldenrodyellow: 0xfafad2ff,
+  lightgray: 0xd3d3d3ff,
+  lightgreen: 0x90ee90ff,
+  lightgrey: 0xd3d3d3ff,
+  lightpink: 0xffb6c1ff,
+  lightsalmon: 0xffa07aff,
+  lightseagreen: 0x20b2aaff,
+  lightskyblue: 0x87cefaff,
+  lightslategray: 0x778899ff,
+  lightslategrey: 0x778899ff,
+  lightsteelblue: 0xb0c4deff,
+  lightyellow: 0xffffe0ff,
+  lime: 0x00ff00ff,
+  limegreen: 0x32cd32ff,
+  linen: 0xfaf0e6ff,
+  magenta: 0xff00ffff,
+  maroon: 0x800000ff,
+  mediumaquamarine: 0x66cdaaff,
+  mediumblue: 0x0000cdff,
+  mediumorchid: 0xba55d3ff,
+  mediumpurple: 0x9370dbff,
+  mediumseagreen: 0x3cb371ff,
+  mediumslateblue: 0x7b68eeff,
+  mediumspringgreen: 0x00fa9aff,
+  mediumturquoise: 0x48d1ccff,
+  mediumvioletred: 0xc71585ff,
+  midnightblue: 0x191970ff,
+  mintcream: 0xf5fffaff,
+  mistyrose: 0xffe4e1ff,
+  moccasin: 0xffe4b5ff,
+  navajowhite: 0xffdeadff,
+  navy: 0x000080ff,
+  oldlace: 0xfdf5e6ff,
+  olive: 0x808000ff,
+  olivedrab: 0x6b8e23ff,
+  orange: 0xffa500ff,
+  orangered: 0xff4500ff,
+  orchid: 0xda70d6ff,
+  palegoldenrod: 0xeee8aaff,
+  palegreen: 0x98fb98ff,
+  paleturquoise: 0xafeeeeff,
+  palevioletred: 0xdb7093ff,
+  papayawhip: 0xffefd5ff,
+  peachpuff: 0xffdab9ff,
+  peru: 0xcd853fff,
+  pink: 0xffc0cbff,
+  plum: 0xdda0ddff,
+  powderblue: 0xb0e0e6ff,
+  purple: 0x800080ff,
+  rebeccapurple: 0x663399ff,
+  red: 0xff0000ff,
+  rosybrown: 0xbc8f8fff,
+  royalblue: 0x4169e1ff,
+  saddlebrown: 0x8b4513ff,
+  salmon: 0xfa8072ff,
+  sandybrown: 0xf4a460ff,
+  seagreen: 0x2e8b57ff,
+  seashell: 0xfff5eeff,
+  sienna: 0xa0522dff,
+  silver: 0xc0c0c0ff,
+  skyblue: 0x87ceebff,
+  slateblue: 0x6a5acdff,
+  slategray: 0x708090ff,
+  slategrey: 0x708090ff,
+  snow: 0xfffafaff,
+  springgreen: 0x00ff7fff,
+  steelblue: 0x4682b4ff,
+  tan: 0xd2b48cff,
+  teal: 0x008080ff,
+  thistle: 0xd8bfd8ff,
+  tomato: 0xff6347ff,
+  transparent: 0x00000000,
+  turquoise: 0x40e0d0ff,
+  violet: 0xee82eeff,
+  wheat: 0xf5deb3ff,
+  white: 0xffffffff,
+  whitesmoke: 0xf5f5f5ff,
+  yellow: 0xffff00ff,
+  yellowgreen: 0x9acd32ff,
+}

package/src/lib/componentId.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
+ */
+
+const counters = {}
+let counter = 0
+
+export const createHumanReadableId = (name) => {
+  return `BlitsComponent::${name}_${(counters[name] = (counters[name] || 0) + 1)}`
+}
+
+export const createInternalId = () => {
+  return ++counter
+}

package/src/lib/componentId.test.js

@@ -0,0 +1,83 @@
+/*
+ * 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 { createHumanReadableId, createInternalId } from './componentId.js'
+
+test('Type createHumandReadableId', (assert) => {
+  const expected = 'function'
+  const actual = typeof createHumanReadableId
+
+  assert.equal(actual, expected, 'createHumanReadableId should be a function')
+  assert.end()
+})
+
+test('Returns a readable id, based on a counter and component name', (assert) => {
+  const expected = 'BlitsComponent::Spinner_1'
+  const actual = createHumanReadableId('Spinner')
+
+  assert.equal(actual, expected, 'createHumanReadableId should return correct ID')
+  assert.end()
+})
+
+test('Returns a readable id with incremented count', (assert) => {
+  const expected = 'BlitsComponent::Spinner_2'
+  const actual = createHumanReadableId('Spinner')
+
+  assert.equal(actual, expected, 'createHumanReadableId should return correct ID')
+  assert.end()
+})
+
+test('Has a seperate count per component name', (assert) => {
+  const expected = 'BlitsComponent::Card_1'
+  const actual = createHumanReadableId('Card')
+
+  assert.equal(actual, expected, 'createHumanReadableId should return correct ID')
+  assert.end()
+})
+
+test('Type createInternalId', (assert) => {
+  const expected = 'function'
+  const actual = typeof createInternalId
+
+  assert.equal(actual, expected, 'createInternalId should be a function')
+  assert.end()
+})
+
+test('Returns an internal id, disregarding the component name', (assert) => {
+  const expected = 1
+  const actual = createInternalId('Spinner')
+
+  assert.equal(actual, expected, 'createInternalId should return correct ID')
+  assert.end()
+})
+
+test('Returns an id with incremented counter', (assert) => {
+  const expected = 2
+  const actual = createInternalId('Spinner')
+
+  assert.equal(actual, expected, 'createInternalId should return correct ID')
+  assert.end()
+})
+
+test('Uses the same counter for all components', (assert) => {
+  const expected = 3
+  const actual = createInternalId('Card')
+
+  assert.equal(actual, expected, 'createInternalId should return correct ID')
+  assert.end()
+})

package/src/lib/eventListeners.js

@@ -0,0 +1,55 @@
+/*
+ * 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
+ */
+
+const eventsMap = new Map()
+
+export default {
+  registerListener(component, event, cb) {
+    let componentsMap = eventsMap.get(event)
+    if (!componentsMap) {
+      componentsMap = new Map()
+      eventsMap.set(event, componentsMap)
+    }
+
+    let components = componentsMap.get(component)
+    if (!components) {
+      components = new Set()
+      componentsMap.set(component, components)
+    }
+
+    components.add(cb)
+  },
+  executeListeners(event, params) {
+    const componentsMap = eventsMap.get(event)
+    if (componentsMap) {
+      componentsMap.forEach((component) => {
+        component.forEach((cb) => {
+          cb(params)
+        })
+      })
+    }
+  },
+  removeListeners(component) {
+    eventsMap.forEach((componentMap) => {
+      const cmp = componentMap.get(component)
+      if (cmp) {
+        cmp.clear()
+        componentMap.delete(cmp)
+      }
+    })
+  },
+}

package/src/lib/hooks.js

@@ -0,0 +1,29 @@
+/*
+ * 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
+ */
+
+const cbs = {}
+
+export const emit = (hook, name, scope) => {
+  cbs[name] && cbs[name][hook] && cbs[name][hook].apply(scope)
+}
+
+export const registerHooks = (hooks = {}, name) => {
+  cbs[name] = {}
+  Object.keys(hooks).forEach((hook) => {
+    if (typeof hooks[hook] === 'function') cbs[name][hook] = hooks[hook]
+  })
+}