@lightningjs/blits 1.30.0 → 1.30.2

package/src/lib/lifecycle.js

@@ -1,85 +1,85 @@
-/*
- * Copyright 2024 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'
-import { emit, privateEmit } from './hooks.js'
-import symbols from './symbols.js'
-
-/**
- * List of valid lifecycle states for a component.
- * @type {Array<string>}
- */
-const states = [
-  'init', // fired upon component instantiation
-  'ready', // fired when component instantiated, reactivity setup done and template spawned
-  'focus', // fired when receiving focus (can occur multiple times)
-  'unfocus', // fired when losing focus (can occur multiple times)
-  'destroy', // fired when component is destroyed and removed
-  'attach', // fired when entering the viewport margin and attached to the render tree
-  'detach', // fired when leaving the viewport margin and detached from the render tree
-  'enter', // fired when entering the visible viewport
-  'exit', // fired when leaving the visible viewport
-]
-
-/**
- * Lifecycle state manager for components.
- *
- * @typedef {Object} Lifecycle
- * @property {string|null} previous - The previous lifecycle state.
- * @property {string|null} current - The current lifecycle state.
- * @property {Object} [component] - The component instance this lifecycle belongs to.
- * @property {string|null} state - The current lifecycle state (getter/setter).
- */
-
-/**
- * Lifecycle state management object for components.
- * Handles state transitions and emits corresponding hooks.
- *
- * @type {Lifecycle}
- * @this {Lifecycle & {component: Object}}
- * The 'component' property is expected to be set by the component instance at runtime.
- */
-export default {
-  previous: null,
-  current: null,
-  /**
-   * Gets the current lifecycle state.
-   * @this {Lifecycle & {component: Object}}
-   * @returns {string|null}
-   */
-  get state() {
-    return this.current
-  },
-  /**
-   * Sets the lifecycle state and emits hooks if the state is valid and changed.
-   * @this {Lifecycle & {component: Object}}
-   * @param {string} v - The new lifecycle state.
-   */
-  set state(v) {
-    if (states.indexOf(v) > -1 && (v !== this.current || v === 'focus')) {
-      Log.debug(
-        `Setting lifecycle state from ${this.current} to ${v} for ${this.component.componentId}`
-      )
-      this.previous = this.current
-      this.current = v
-      // emit 'private' hook
-      privateEmit(v, this.component[symbols.identifier], this.component)
-      // emit 'public' hook
-      emit(v, this.component[symbols.identifier], this.component)
-    }
-  },
-}
+/*
+ * Copyright 2024 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'
+import { emit, privateEmit } from './hooks.js'
+import symbols from './symbols.js'
+
+/**
+ * List of valid lifecycle states for a component.
+ * @type {Array<string>}
+ */
+const states = [
+  'init', // fired upon component instantiation
+  'ready', // fired when component instantiated, reactivity setup done and template spawned
+  'focus', // fired when receiving focus (can occur multiple times)
+  'unfocus', // fired when losing focus (can occur multiple times)
+  'destroy', // fired when component is destroyed and removed
+  'attach', // fired when entering the viewport margin and attached to the render tree
+  'detach', // fired when leaving the viewport margin and detached from the render tree
+  'enter', // fired when entering the visible viewport
+  'exit', // fired when leaving the visible viewport
+]
+
+/**
+ * Lifecycle state manager for components.
+ *
+ * @typedef {Object} Lifecycle
+ * @property {string|null} previous - The previous lifecycle state.
+ * @property {string|null} current - The current lifecycle state.
+ * @property {Object} [component] - The component instance this lifecycle belongs to.
+ * @property {string|null} state - The current lifecycle state (getter/setter).
+ */
+
+/**
+ * Lifecycle state management object for components.
+ * Handles state transitions and emits corresponding hooks.
+ *
+ * @type {Lifecycle}
+ * @this {Lifecycle & {component: Object}}
+ * The 'component' property is expected to be set by the component instance at runtime.
+ */
+export default {
+  previous: null,
+  current: null,
+  /**
+   * Gets the current lifecycle state.
+   * @this {Lifecycle & {component: Object}}
+   * @returns {string|null}
+   */
+  get state() {
+    return this.current
+  },
+  /**
+   * Sets the lifecycle state and emits hooks if the state is valid and changed.
+   * @this {Lifecycle & {component: Object}}
+   * @param {string} v - The new lifecycle state.
+   */
+  set state(v) {
+    if (states.indexOf(v) > -1 && (v !== this.current || v === 'focus')) {
+      Log.debug(
+        `Setting lifecycle state from ${this.current} to ${v} for ${this.component.componentId}`
+      )
+      this.previous = this.current
+      this.current = v
+      // emit 'private' hook
+      privateEmit(v, this.component[symbols.identifier], this.component)
+      // emit 'public' hook
+      emit(v, this.component[symbols.identifier], this.component)
+    }
+  },
+}

package/src/lib/log.js

@@ -1,117 +1,117 @@
-/*
- * 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 = () => {}
-
-/**
- * Returns the current time as a locale time string (hh:mm:ss).
- * @returns {string} The current time string.
- */
-const time = () =>
-  new Date().toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
-
-/**
- * Returns a logger object for the given context, with info, warn, debug, and error methods.
- * Logging methods are no-ops if the debug level does not match.
- *
- * @param {string} context - The context label for log messages.
- * @returns {Object} Logger object with info, warn, debug, and error methods.
- */
-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')
-}
+/*
+ * 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 = () => {}
+
+/**
+ * Returns the current time as a locale time string (hh:mm:ss).
+ * @returns {string} The current time string.
+ */
+const time = () =>
+  new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+
+/**
+ * Returns a logger object for the given context, with info, warn, debug, and error methods.
+ * Logging methods are no-ops if the debug level does not match.
+ *
+ * @param {string} context - The context label for log messages.
+ * @returns {Object} Logger object with info, warn, debug, and error methods.
+ */
+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/precompiler/precompiler.js

@@ -1,73 +1,73 @@
-/*
- * 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 '../templateparser/parser.js'
-import generator from '../codegenerator/generator.js'
-
-export default (source, filePath, mode) => {
-  if (
-    source.indexOf('Blits.Component(') > -1 ||
-    source.indexOf('Blits.Application(') > -1 ||
-    /=>\s*Component\(['"][A-Za-z]+['"],/s.test(source) || // blits component
-    /\{.*?template\s*:\s*(['"`])((?:\\?.)*?)\1.*?\}/s.test(source) // object with template key
-  ) {
-    const templates = source.matchAll(/(?<!\/\/\s*)template\s*:\s*(['"`])((?:\\?.)*?)\1/gs)
-    let newSource = source
-    /*
-      if there are multiple templates in the file, we need to keep
-      track of the offset caused by the previous replacements
-    */
-    let offset = 0
-
-    for (const template of templates) {
-      if (template[2]) {
-        const templateContent = template[2]
-
-        // Only process if it looks like a Blits template
-        if (templateContent.match(/^\s*(<!--[\s\S]*?-->|<[A-Za-z][^>]*>)/s)) {
-          const templateStartIndex = template.index + offset
-          const templateEndIndex = templateStartIndex + template[0].length
-
-          // Parse the template
-          let resourceName = 'Blits.Application'
-          if (source.indexOf('Blits.Component(') > -1) {
-            resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
-          }
-
-          const parsed = parser(templateContent, resourceName, null, filePath)
-
-          // Generate the code
-          const code = generator.call({ components: {} }, parsed, mode === 'development')
-
-          // Insert the code in the component using the 'code' key, replacing the template key
-          const replacement = `/* eslint-disable no-unused-vars */ \ncode: { render: ${code.render.toString()}, effects: [${code.effects.map(
-            (fn) => fn.toString()
-          )}], context: {}}`
-
-          offset += replacement.length - template[0].length
-
-          newSource =
-            newSource.substring(0, templateStartIndex) +
-            replacement +
-            newSource.substring(templateEndIndex)
-        }
-      }
-    }
-    return newSource
-  }
-  return source
-}
+/*
+ * 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 '../templateparser/parser.js'
+import generator from '../codegenerator/generator.js'
+
+export default (source, filePath, mode) => {
+  if (
+    source.indexOf('Blits.Component(') > -1 ||
+    source.indexOf('Blits.Application(') > -1 ||
+    /=>\s*Component\(['"][A-Za-z]+['"],/s.test(source) || // blits component
+    /\{.*?template\s*:\s*(['"`])((?:\\?.)*?)\1.*?\}/s.test(source) // object with template key
+  ) {
+    const templates = source.matchAll(/(?<!\/\/\s*)template\s*:\s*(['"`])((?:\\?.)*?)\1/gs)
+    let newSource = source
+    /*
+      if there are multiple templates in the file, we need to keep
+      track of the offset caused by the previous replacements
+    */
+    let offset = 0
+
+    for (const template of templates) {
+      if (template[2]) {
+        const templateContent = template[2]
+
+        // Only process if it looks like a Blits template
+        if (templateContent.match(/^\s*(<!--[\s\S]*?-->|<[A-Za-z][^>]*>)/s)) {
+          const templateStartIndex = template.index + offset
+          const templateEndIndex = templateStartIndex + template[0].length
+
+          // Parse the template
+          let resourceName = 'Blits.Application'
+          if (source.indexOf('Blits.Component(') > -1) {
+            resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
+          }
+
+          const parsed = parser(templateContent, resourceName, null, filePath)
+
+          // Generate the code
+          const code = generator.call({ components: {} }, parsed, mode === 'development')
+
+          // Insert the code in the component using the 'code' key, replacing the template key
+          const replacement = `/* eslint-disable no-unused-vars */ \ncode: { render: ${code.render.toString()}, effects: [${code.effects.map(
+            (fn) => fn.toString()
+          )}], context: {}}`
+
+          offset += replacement.length - template[0].length
+
+          newSource =
+            newSource.substring(0, templateStartIndex) +
+            replacement +
+            newSource.substring(templateEndIndex)
+        }
+      }
+    }
+    return newSource
+  }
+  return source
+}