@lightningjs/blits 0.3.0

package/src/lib/setup/props.js

@@ -0,0 +1,53 @@
+/*
+ * 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'
+
+const baseProp = {
+  cast: (v) => v,
+  required: false,
+}
+
+export default (component, props = []) => {
+  if (props.indexOf('id') === -1) {
+    props.push('id')
+  }
+  component.___propKeys = []
+  props.forEach((prop) => {
+    prop = { ...baseProp, ...(typeof prop === 'object' ? prop : { key: prop }) }
+    component.___propKeys.push(prop.key)
+    Object.defineProperty(component.prototype, prop.key, {
+      get() {
+        const value = prop.cast(
+          this.___props && prop.key in this.___props
+            ? this.___props[prop.key]
+            : prop.default || undefined
+        )
+
+        if (prop.required && value === undefined) {
+          Log.warn(`${prop.key} is required`)
+        }
+
+        return value
+      },
+      set(v) {
+        Log.warn(`Warning! Avoid mutating props directly (${prop.key})`)
+        this.___props[prop.key] = v
+      },
+    })
+  })
+}

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

@@ -0,0 +1,205 @@
+/*
+ * 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'
+
+test('Type props function', (assert) => {
+  const expected = 'function'
+  const actual = typeof propsFn
+
+  assert.equal(actual, expected, 'props should be a function')
+  assert.end()
+})
+
+test('Create a ___propkeys on component', (assert) => {
+  const component = new Function()
+
+  /* eslint-disable */
+  assert.false(component.hasOwnProperty('___propKeys'), 'Component should not have a ___propKeys key')
+
+  propsFn(component)
+
+  /* eslint-disable */
+  assert.true(component.hasOwnProperty('___propKeys'), 'Component should have a ___propKeys key')
+  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.___propKeys.length, 'All passed props should be stored on ___propKeys')
+  assert.equal(props.length, props.map(prop => component.___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.prototype, 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 = new component
+  componentInstance.___props = {
+    index: 1,
+    img: 'lorem-ipsum.jpg',
+    url: 'http://localhost'
+  }
+
+  const componentInstance2 = new component
+  componentInstance2.___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.___props[prop], `The correct value of ${prop} should be returned via the getter`)
+    assert.equal(componentInstance2[prop], componentInstance2.___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.___propKeys.length, 'All passed props should be stored on ___propKeys')
+  assert.equal(props.length, props.map(prop => component.___propKeys.indexOf(prop.key) > -1).filter(prop => prop === true).length, 'All passed props should be stored on ___propKeys')
+
+  props.forEach((prop) => {
+    assert.true(typeof Object.getOwnPropertyDescriptor(component.prototype, prop.key).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.___propKeys.length, 'All passed props should be stored on ___propKeys')
+  assert.equal(props.length, props.map(prop => component.___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.prototype, 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 = new component
+  componentInstance.___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.true(typeof componentInstance.number === 'number', 'Should cast prop value to a Number')
+  assert.true(typeof componentInstance.string === 'string', 'Should cast prop value to a String')
+  assert.true(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 = new 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 = new 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) => {
+  const component = new Function()
+
+  const componentInstance = new component
+
+  const props = [{
+    key: 'missing',
+    required: true
+  }]
+  propsFn(component, props)
+
+  assert.equal(componentInstance.missing, undefined, 'Should return undefined prop value when undefined')
+  // todo: should log a warning about prop being required
+
+  assert.end()
+})
+
+// todo add test when setting a prop (should work, but should log a warning about avoiding mutating a prop)

package/src/lib/setup/routes.js

@@ -0,0 +1,24 @@
+/*
+ * 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 (component, routes) => {
+  component.prototype.___routes = []
+  Object.keys(routes).forEach((key) => {
+    // todo: validate routes[key] for expected format etc.
+    component.prototype.___routes[key] = routes[key]
+  })
+}

package/src/lib/setup/state.js

@@ -0,0 +1,45 @@
+/*
+ * 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, state) => {
+  component.___stateKeys = []
+
+  state = state.apply(component)
+  Object.keys(state).forEach((key) => {
+    if (component.___propKeys && component.___propKeys.indexOf(key) > -1) {
+      Log.error(`State ${key} already exists as a prop`)
+    }
+    if (component.___methodKeys && component.___methodKeys.indexOf(key) > -1) {
+      Log.error(`State ${key} already exists as a method`)
+    }
+    component.___stateKeys.push(key)
+    try {
+      Object.defineProperty(component.prototype, key, {
+        get() {
+          return this.___state && key in this.___state && this.___state[key]
+        },
+        set(v) {
+          if (this.___state) this.___state[key] = v
+        },
+      })
+    } catch (e) {
+      Log.error(e)
+    }
+  })
+}

package/src/lib/setup/watch.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
+ */
+
+export default (component, watchers) => {
+  component.prototype.___watchKeys = []
+  component.prototype.___watchers = {}
+
+  for (let watch in watchers) {
+    if (typeof watchers[watch] !== 'function') {
+      console.warn(`${watch} is not a function`)
+    }
+
+    component.prototype.___watchKeys.push(watch)
+
+    component.prototype.___watchers[watch] = function (v, old) {
+      watchers[watch].call(this, v, old)
+    }
+  }
+}

package/src/lib/templateparser/parser.js

@@ -0,0 +1,103 @@
+/*
+ * 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 (template = '') => {
+  let cursor = 0
+  let cleaned = false
+
+  const clean = (template) => {
+    // remove all unnecessary new lines and comments
+    return template
+      .replace(/<!--.*?-->/gms, '') // remove comments
+      .replace(/\r?\n\s*\r\n/gm, ' ') // remove empty lines
+      .replace(/\r?\n\s*(\S)/gm, ' $1') // remove line endings & spacing
+      .replace(/\r?\n/g, '') // remove all line endings
+  }
+
+  const parse = () => {
+    if (!cleaned) {
+      template = clean(template)
+      cleaned = true
+    }
+
+    const output = { children: [] }
+    let attributeStarted = false
+    while (template[cursor]) {
+      if (template[cursor] === '"') {
+        attributeStarted = !attributeStarted
+      }
+      if (template.charCodeAt(cursor) === '<'.charCodeAt(0) && !attributeStarted) {
+        if (template.charCodeAt(cursor + 1) === '/'.charCodeAt(0)) {
+          return output
+        }
+        parseNode(output)
+      }
+      cursor++
+    }
+
+    return output
+  }
+
+  const parseNode = (output) => {
+    const endTagMatch = template.slice(cursor).match(/(?:[^">]*|"[^"]*")*>/)
+    const endPosition = endTagMatch && endTagMatch[0] && endTagMatch[0].length + cursor - 1
+    const tag = parseTag(template.substring(cursor + 1, endPosition))
+    const node = { ...{ type: tag.type }, ...tag.attributes }
+    // self closing tag
+    if (template.charCodeAt(endPosition - 1) === '/'.charCodeAt(0)) {
+      output.children.push(node)
+    } else {
+      cursor = endPosition
+      const nested = parse()
+      if (nested.children.length) {
+        node.children = [...nested.children]
+      }
+      // else {
+      //   const content = template.substring(endPosition + 1, cursor).trim()
+      //   if (content) node.slotcontent = content
+      // }
+      output.children.push(node)
+    }
+  }
+
+  const parseTag = (tag) => {
+    let match
+    const result = {
+      type: (match = tag.match(/^([A-Za-z0-9]+)(?![A-Za-z0-9=])/)) && match[0], // || 'Element' maybe default to 'Element'
+    }
+
+    const attributes = tag.match(/[:*\w.-]+="[^"]*"/g) || []
+    if (attributes.length) {
+      result['attributes'] = attributes.reduce((obj, attr) => {
+        const match = /(.+)=["'](.+)["']/.exec(attr)
+        if (match) {
+          if (match[1].indexOf('.') > -1) {
+            const parts = match[1].split('.')
+            obj[parts[0]] = `{${parts[1]}: ${match[2]}}`
+          } else {
+            obj[match[1]] = match[2]
+          }
+        }
+        return obj
+      }, {})
+    }
+
+    return result
+  }
+
+  return parse()
+}