@lightningjs/blits 0.3.14 → 0.4.0

package/src/lib/setup/state.js

@@ -17,25 +17,27 @@
 
 import { Log } from '../log.js'
 
+import symbols from '../symbols.js'
+
 export default (component, state) => {
-  component.___stateKeys = []
+  component[symbols.stateKeys] = []
 
   state = state.apply(component.prototype)
   Object.keys(state).forEach((key) => {
-    if (component.___propKeys && component.___propKeys.indexOf(key) > -1) {
+    if (component[symbols.propKeys] && component[symbols.propKeys].indexOf(key) > -1) {
       Log.error(`State ${key} already exists as a prop`)
     }
-    if (component.___methodKeys && component.___methodKeys.indexOf(key) > -1) {
+    if (component[symbols.methodKeys] && component[symbols.methodKeys].indexOf(key) > -1) {
       Log.error(`State ${key} already exists as a method`)
     }
-    component.___stateKeys.push(key)
+    component[symbols.stateKeys].push(key)
     try {
       Object.defineProperty(component.prototype, key, {
         get() {
-          return this.___state && key in this.___state && this.___state[key]
+          return this[symbols.state] && key in this[symbols.state] && this[symbols.state][key]
         },
         set(v) {
-          if (this.___state) this.___state[key] = v
+          if (this[symbols.state]) this[symbols.state][key] = v
         },
       })
     } catch (e) {

package/src/lib/setup/watch.js

@@ -15,18 +15,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import symbols from '../symbols.js'
+
 export default (component, watchers) => {
-  component.prototype.___watchKeys = []
-  component.prototype.___watchers = {}
+  component.prototype[symbols.watchKeys] = []
+  component.prototype[symbols.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[symbols.watchKeys].push(watch)
 
-    component.prototype.___watchers[watch] = function (v, old) {
+    component.prototype[symbols.watchers][watch] = function (v, old) {
       watchers[watch].call(this, v, old)
     }
   }

package/src/lib/symbols.js

@@ -0,0 +1,41 @@
+export default {
+  currentView: Symbol('currentView'),
+  computedKeys: Symbol('computedKeys'),
+  destroy: Symbol('destroy'),
+  index: Symbol('index'),
+  init: Symbol('init'),
+  inputEvents: Symbol('inputEvents'),
+  intervals: Symbol('intervals'),
+  _intervals: Symbol('_intervals'),
+  level: Symbol('level'),
+  methodKeys: Symbol('methodKeys'),
+  originalState: Symbol('originalState'),
+  propKeys: Symbol('propKeys'),
+  ready: Symbol('ready'),
+  renderer: Symbol('renderer'),
+  routes: Symbol('routes'),
+  settings: Symbol('settings'),
+  state: Symbol('state'),
+  stateKeys: Symbol('stateKeys'),
+  textnode: Symbol('textnode'),
+  timeouts: Symbol('timeouts'),
+  _timeouts: Symbol('_timeouts'),
+  type: Symbol('type'),
+  watchers: Symbol('watchers'),
+  watchKeys: Symbol('watchKeys'),
+
+  /* Utilizing the global Symbol registry for the following purposes */
+
+  // Symbol 'children' utilized within generated code
+  children: Symbol.for('children'),
+  // Symbol 'components' utilized within generated code
+  components: Symbol.for('components'),
+  // Symbol 'id' utilized within generated code
+  id: Symbol.for('id'),
+  // Symbol 'isSlot' utilized within generated code
+  isSlot: Symbol.for('isSlot'),
+  // Symbol 'props' utilized within generated code
+  props: Symbol.for('props'),
+  // Symbol 'slots' utilized within generated code
+  slots: Symbol.for('slots'),
+}

package/src/lib/templateparser/parser.js

@@ -15,9 +15,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import symbols from '../symbols.js'
+
 class TemplateParseError extends Error {
-  constructor(name, context) {
-    super('TemplateParseError')
+  constructor(message, name, context) {
+    super(`TemplateParseError ${message}`)
     this.name = name
     this.context = context
   }
@@ -44,7 +46,13 @@ export default (template = '') => {
     try {
       return format(tags)
     } catch (error) {
-      console.error('Error:', error.message)
+      if (error instanceof TemplateParseError) {
+        console.error(`${error.message} | ${error.name}`)
+      } else {
+        console.error(error)
+      }
+      // return errors gracefully
+      return null
     }
   }
 
@@ -76,7 +84,7 @@ export default (template = '') => {
   const parseEmptyTagStart = () => {
     const match = moveCursorOnMatch(emptyTagStartRegex)
     if (match) {
-      tags.push({ type: null, __type: 'opening', __level: currentLevel })
+      tags.push({ type: null, [symbols.type]: 'opening', [symbols.level]: currentLevel })
       currentLevel++
       parseLoop(parseEmptyTagStart)
     } else {
@@ -88,7 +96,7 @@ export default (template = '') => {
     const match = moveCursorOnMatch(emptyTagEndRegex)
     if (match) {
       currentLevel--
-      tags.push({ type: null, __type: 'closing', __level: currentLevel })
+      tags.push({ type: null, [symbols.type]: 'closing', [symbols.level]: currentLevel })
       parseLoop(parseEmptyTagStart)
     } else {
       parseLoop(parseTag)
@@ -100,9 +108,9 @@ export default (template = '') => {
     if (match) {
       if (match[0].startsWith('</')) {
         currentLevel--
-        currentTag = { type: match[1], __type: 'closing', __level: currentLevel }
+        currentTag = { type: match[1], [symbols.type]: 'closing', [symbols.level]: currentLevel }
       } else {
-        currentTag = { type: match[1], __type: 'opening', __level: currentLevel }
+        currentTag = { type: match[1], [symbols.type]: 'opening', [symbols.level]: currentLevel }
         currentLevel++
       }
       parseLoop(parseTagEnd)
@@ -115,13 +123,13 @@ export default (template = '') => {
     const match = moveCursorOnMatch(tagEndRegex)
     if (match) {
       if (match[1] === '/>') {
-        currentTag.__type = 'self-closing'
+        currentTag[symbols.type] = 'self-closing'
         currentLevel-- // because it was parsed as opening tag before
       }
 
       // parsing content in between tags
       // rule: < char cannot be used in between tags even in escaped form
-      if (currentTag.__type === 'opening') {
+      if (currentTag[symbols.type] === 'opening') {
         const tagContent = template.slice(cursor, template.indexOf('<', cursor))
         if (tagContent) {
           currentTag.content = tagContent
@@ -172,12 +180,12 @@ export default (template = '') => {
     let output = { children: [] }
 
     for (const item of data) {
-      const { type, __type, __level } = item
+      const { type, [symbols.type]: __type, [symbols.level]: __level } = item
 
       // Check for unclosed tags
-      while (stack.length && stack[stack.length - 1].__level >= __level) {
+      while (stack.length && stack[stack.length - 1][symbols.level] >= __level) {
         const popped = stack.pop()
-        if (popped.__type === 'opening') {
+        if (popped[symbols.type] === 'opening') {
           throw new TemplateParseError('MismatchedClosingTag', `tag: ${popped.type || 'null'}`)
         }
       }
@@ -200,8 +208,8 @@ export default (template = '') => {
 
       // Create a new item, copying properties but deleting __type and __level
       const newItem = { ...item }
-      delete newItem.__type
-      delete newItem.__level
+      delete newItem[symbols.type]
+      delete newItem[symbols.level]
 
       if (__type === 'opening') {
         newItem.children = []

package/src/router/router.js

@@ -0,0 +1,166 @@
+/*
+ * 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 { default as fadeInFadeOutTransition } from './transitions/fadeInOut.js'
+
+import symbols from '../lib/symbols.js'
+import { Log } from '../lib/log.js'
+import Element from '../element.js'
+import Focus from '../focus.js'
+
+export let currentRoute
+export let navigating = false
+
+const cacheMap = new WeakMap()
+
+export const getHash = () => {
+  return (document.location.hash || '/').replace(/^#/, '')
+}
+
+export const matchHash = (path, routes = []) => {
+  const route = routes
+    .filter((r) => {
+      return r.path === path
+    })
+    .pop()
+  if (route) currentRoute = route
+  return route
+}
+
+export const navigate = async function () {
+  navigating = true
+  if (this.parent[symbols.routes]) {
+    const previousRoute = currentRoute
+    const hash = getHash()
+    const route = matchHash(hash, this.parent[symbols.routes])
+
+    if (route) {
+      // apply default transition if none specified
+      if (!('transition' in route)) {
+        route.transition = fadeInFadeOutTransition
+      }
+      // a transition can be a function returning a dynamic transition object
+      // based on current and previous route
+      if (typeof route.transition === 'function') {
+        route.transition = route.transition(previousRoute, route)
+      }
+
+      let holder
+      let { view, focus } = cacheMap.get(route) || {}
+
+      if (!view) {
+        // create a holder element for the new view
+        holder = Element({ parent: this[symbols.children][0] })
+        holder.populate({})
+        holder.set('w', '100%')
+        holder.set('h', '100%')
+        view = route.component(this[symbols.props], holder, this)
+      } else {
+        holder = view.wrapper
+      }
+
+      this[symbols.children].push(view)
+
+      // apply before settings to holder element
+      if (route.transition.before) {
+        if (Array.isArray(route.transition.before)) {
+          for (let i = 0; i < route.transition.before.length; i++) {
+            holder.set(route.transition.before[i].prop, route.transition.before[i].value)
+          }
+        } else {
+          holder.set(route.transition.before.prop, route.transition.before.value)
+        }
+      }
+
+      let shouldAnimate = false
+
+      // apply out out transition on previous view
+      if (previousRoute) {
+        // only animate when there is a previous route
+        shouldAnimate = true
+        const oldView = this[symbols.children].splice(1, 1).pop()
+        if (oldView) {
+          removeView(previousRoute, oldView, route.transition.out)
+        }
+      }
+
+      // apply in transition
+      if (route.transition.in) {
+        if (Array.isArray(route.transition.in)) {
+          for (let i = 0; i < route.transition.in.length; i++) {
+            i === route.transition.length - 1
+              ? await setOrAnimate(holder, route.transition.in[i], shouldAnimate)
+              : setOrAnimate(holder, route.transition.in[i], shouldAnimate)
+          }
+        } else {
+          await setOrAnimate(holder, route.transition.in, shouldAnimate)
+        }
+      }
+
+      // focus the new view
+      focus ? Focus.set(focus) : view.focus()
+    } else {
+      Log.error(`Route ${hash} not found`)
+    }
+  }
+  navigating = false
+}
+
+const removeView = async (route, view, transition) => {
+  // apply out transition
+  if (transition) {
+    if (Array.isArray(transition)) {
+      for (let i = 0; i < transition.length; i++) {
+        i === transition.length - 1
+          ? await setOrAnimate(view.wrapper, transition[i])
+          : setOrAnimate(view.wrapper, transition[i])
+      }
+    } else {
+      await setOrAnimate(view.wrapper, transition)
+    }
+  }
+
+  // cache the page when it's as 'keepAlive' instead of destroying
+  if (route.options && route.options.keepAlive === true) {
+    cacheMap.set(route, { view: view, focus: Focus.get() })
+  } else {
+    // remove and cleanup
+    for (let i = 0; i < view[symbols.children].length - 1; i++) {
+      if (view[symbols.children][i] && view[symbols.children][i].destroy) {
+        view[symbols.children][i].destroy()
+        view[symbols.children][i] = null
+      }
+    }
+    view.destroy()
+    view = null
+  }
+}
+
+const setOrAnimate = (node, transition, shouldAnimate = true) => {
+  return shouldAnimate
+    ? node.animate(transition.prop, transition)
+    : node.set(transition.prop, transition.value)
+}
+
+export const to = (location) => {
+  window.location.hash = `#${location}`
+}
+
+export default {
+  navigate,
+  to,
+}

package/src/router/transitions/fadeIn.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
+ */
+
+export default {
+  before: {
+    prop: 'alpha',
+    value: 0,
+  },
+  in: {
+    prop: 'alpha',
+    value: 1,
+  },
+}

package/src/router/transitions/fadeInOut.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 {
+  before: {
+    prop: 'alpha',
+    value: 0,
+  },
+  in: {
+    prop: 'alpha',
+    value: 1,
+    duration: 200,
+  },
+  out: {
+    prop: 'alpha',
+    value: 0,
+    duration: 100,
+  },
+}

package/src/router/transitions/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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 as fadeIn } from './fadeIn.js'
+export { default as fadeInOut } from './fadeInOut.js'
+export { default as slideIn } from './slideIn.js'
+export { default as slideInOut } from './slideInOut.js'

package/src/router/transitions/slideIn.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
+ */
+
+export default {
+  before: {
+    prop: 'x',
+    value: '-100%',
+  },
+  in: {
+    prop: 'x',
+    value: 0,
+    duration: 200,
+  },
+}

package/src/router/transitions/slideInOut.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 {
+  before: {
+    prop: 'x',
+    value: '-100%',
+  },
+  in: {
+    prop: 'x',
+    value: 0,
+    duration: 200,
+  },
+  out: {
+    prop: 'x',
+    value: '100%',
+    duration: 200,
+  },
+}

package/src/router.js

@@ -17,6 +17,8 @@
 
 import { Log } from './lib/log.js'
 
+import symbols from './lib/symbols.js'
+
 export const getHash = () => {
   return (document.location.hash || '/').replace(/^#/, '')
 }
@@ -31,26 +33,29 @@ export const matchHash = (path, routes = []) => {
 }
 
 export const navigate = function () {
-  if (this.parent.___routes) {
+  if (this.parent[symbols.routes]) {
     const hash = getHash()
-    const route = matchHash(hash, this.parent.___routes)
+    const route = matchHash(hash, this.parent[symbols.routes])
     if (route) {
-      if (this.__currentView) {
-        for (let i = 0; i < this.__currentView.___children.length - 1; i++) {
-          if (this.__currentView.___children[i] && this.__currentView.___children[i].destroy) {
-            this.__currentView.___children[i].destroy()
-            this.__currentView.___children[i] = null
+      if (this[symbols.currentView]) {
+        for (let i = 0; i < this[symbols.currentView][symbols.children].length - 1; i++) {
+          if (
+            this[symbols.currentView][symbols.children][i] &&
+            this[symbols.currentView][symbols.children][i].destroy
+          ) {
+            this[symbols.currentView][symbols.children][i].destroy()
+            this[symbols.currentView][symbols.children][i] = null
           }
         }
-        this.__currentView.destroy()
-        this.__currentView = null
+        this[symbols.currentView].destroy()
+        this[symbols.currentView] = null
       }
-      this.___children[1] = this.__currentView = route.component(
-        this.___props,
-        this.___children[0],
+      this[symbols.children][1] = this[symbols.currentView] = route.component(
+        this[symbols.props],
+        this[symbols.children][0],
         this
       )
-      this.__currentView.focus()
+      this[symbols.currentView].focus()
     } else {
       Log.error(`Route ${hash} not found`)
     }

package/src/settings.js

@@ -15,10 +15,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import symbols from './lib/symbols.js'
+
 const settings = {
-  ___settings: {},
+  [symbols.settings]: {},
   get(key, defaultValue = null) {
-    return (key in this.___settings && this.___settings[key]) || defaultValue
+    if (key in this[symbols.settings]) {
+      return this[symbols.settings][key]
+    } else {
+      return defaultValue
+    }
   },
   set(key, value) {
     if (typeof key === 'object') {
@@ -26,7 +32,7 @@ const settings = {
         this.set(k, key[k])
       })
     } else {
-      this.___settings[key] = value
+      this[symbols.settings][key] = value
     }
   },
 }