@lightningjs/blits 0.9.7 → 0.9.9

package/src/component/base/utils.js

@@ -0,0 +1,29 @@
+/*
+ * 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 symbols from '../../lib/symbols'
+
+import { renderer } from '../../launch.js'
+
+export default {
+  [symbols.renderer]: {
+    value: () => renderer,
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+}

package/src/{lib → component}/setup/computed.js

@@ -15,9 +15,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Log } from '../log.js'
+import { Log } from '../../lib/log.js'
 
-import symbols from '../symbols.js'
+import symbols from '../../lib/symbols.js'
 
 export default (component, computeds) => {
   component[symbols.computedKeys] = []
@@ -38,7 +38,7 @@ export default (component, computeds) => {
         Log.warn(`${computed} is not a function`)
       }
       component[symbols.computedKeys].push(computed)
-      Object.defineProperty(component.prototype, computed, {
+      Object.defineProperty(component, computed, {
         get() {
           return computeds[computed].apply(this)
         },

package/src/component/setup/index.js

@@ -0,0 +1,61 @@
+/*
+ * 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 setupProps from './props.js'
+import setupMethods from './methods.js'
+import setupState from './state.js'
+import setupComputed from './computed.js'
+import setupInput from './input.js'
+import setupRoutes from './routes.js'
+import setupWatch from './watch.js'
+
+import { registerHooks } from '../../lib/hooks.js'
+
+import symbols from '../../lib/symbols.js'
+
+let counter = 0
+
+export default function (component, config) {
+  component[symbols.identifier] = ++counter
+
+  // setup hooks
+  registerHooks(config.hooks, component[symbols.identifier])
+
+  // setup props
+  // if (config.props) // because of the default props like id - might change this
+  setupProps(component, config.props)
+
+  // // setup methods
+  if (config.methods) setupMethods(component, config.methods)
+
+  // // setup state
+  setupState(component, config.state)
+
+  // // setup computed
+  if (config.computed) setupComputed(component, config.computed)
+
+  // // setup watchers
+  if (config.watch) setupWatch(component, config.watch)
+
+  // // setup routes
+  if (config.routes) setupRoutes(component, config.routes)
+
+  // // setup input
+  if (config.input) setupInput(component, config.input)
+
+  return component
+}

package/src/{lib → component}/setup/input.js

@@ -15,16 +15,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Log } from '../log.js'
+import { Log } from '../../lib/log.js'
 
-import symbols from '../symbols.js'
+import symbols from '../../lib/symbols.js'
 
 export default (component, input) => {
-  component.prototype[symbols.inputEvents] = []
+  component[symbols.inputEvents] = []
   Object.keys(input).forEach((key) => {
     if (typeof input[key] !== 'function') {
       Log.warn(`${input[key]} is not a function`)
     }
-    component.prototype[symbols.inputEvents][key] = input[key]
+    component[symbols.inputEvents][key] = input[key]
   })
 }

package/src/{lib → component}/setup/methods.js

@@ -15,9 +15,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Log } from '../log.js'
+import { Log } from '../../lib/log.js'
 
-import symbols from '../symbols.js'
+import symbols from '../../lib/symbols.js'
 
 export default (component, methods) => {
   component[symbols.methodKeys] = []
@@ -31,7 +31,7 @@ export default (component, methods) => {
         Log.warn(`${method} is not a function`)
       }
       component[symbols.methodKeys].push(method)
-      component.prototype[method] = methods[method]
+      component[method] = methods[method]
     }
   }
 }

package/src/{lib → component}/setup/props.js

@@ -15,9 +15,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Log } from '../log.js'
+import { Log } from '../../lib/log.js'
 
-import symbols from '../symbols.js'
+import symbols from '../../lib/symbols.js'
 
 const baseProp = {
   cast: (v) => v,
@@ -32,7 +32,7 @@ export default (component, props = []) => {
   props.forEach((prop) => {
     prop = { ...baseProp, ...(typeof prop === 'object' ? prop : { key: prop }) }
     component[symbols.propKeys].push(prop.key)
-    Object.defineProperty(component.prototype, prop.key, {
+    Object.defineProperty(component, prop.key, {
       get() {
         const value = prop.cast(
           this[symbols.props] && prop.key in this[symbols.props]

package/src/{lib → component}/setup/routes.js

@@ -15,13 +15,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import symbols from '../symbols.js'
+import symbols from '../../lib/symbols.js'
 
 export default (component, routes) => {
-  component.prototype[symbols.routes] = []
+  component[symbols.routes] = []
   Object.keys(routes).forEach((key) => {
     // todo: validate routes[key] for expected format etc.
-    component.prototype[symbols.routes][key] = {
+    component[symbols.routes][key] = {
       ...routes[key],
       ...{
         // merge default route options with route specific options

package/src/{lib → component}/setup/state.js

@@ -15,15 +15,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Log } from '../log.js'
+import { Log } from '../../lib/log.js'
 
-import symbols from '../symbols.js'
+import symbols from '../../lib/symbols.js'
 
 export default (component, state = () => {}) => {
-  component[symbols.stateKeys] = []
+  Object.defineProperty(component, symbols.stateKeys, {
+    value: [],
+    enumerable: false,
+    configurable: false,
+    writable: false,
+  })
+
+  const stateKeys = Object.keys(state.apply(component) || {}).concat(['hasFocus'])
 
-  state = { ...state.apply(component.prototype), ...{ hasFocus: false } }
-  Object.keys(state).forEach((key) => {
+  stateKeys.forEach((key) => {
     if (component[symbols.propKeys] && component[symbols.propKeys].indexOf(key) > -1) {
       Log.error(`State ${key} already exists as a prop`)
     }
@@ -32,13 +38,14 @@ export default (component, state = () => {}) => {
     }
     component[symbols.stateKeys].push(key)
     try {
-      Object.defineProperty(component.prototype, key, {
+      Object.defineProperty(component, key, {
         get() {
           return this[symbols.state] && key in this[symbols.state] && this[symbols.state][key]
         },
         set(v) {
           if (this[symbols.state]) this[symbols.state][key] = v
         },
+        // enumerable: true,
       })
     } catch (e) {
       Log.error(e)

package/src/{lib → component}/setup/watch.js

@@ -15,20 +15,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import symbols from '../symbols.js'
+import symbols from '../../lib/symbols.js'
 
 export default (component, watchers) => {
-  component.prototype[symbols.watchKeys] = []
-  component.prototype[symbols.watchers] = {}
+  component[symbols.watchKeys] = []
+  component[symbols.watchers] = {}
 
   for (let watch in watchers) {
     if (typeof watchers[watch] !== 'function') {
       console.warn(`${watch} is not a function`)
     }
 
-    component.prototype[symbols.watchKeys].push(watch)
+    component[symbols.watchKeys].push(watch)
 
-    component.prototype[symbols.watchers][watch] = function (v, old) {
+    component[symbols.watchers][watch] = function (v, old) {
       watchers[watch].call(this, v, old)
     }
   }

package/src/component.d.ts

@@ -22,6 +22,47 @@ declare namespace Component {
    */
   type Name = string
 
+
+  interface Announcer {
+    /**
+     * Announce a message to screen readers by specifying the politeness level
+    */
+    speak: (message: string, politeness?: 'polite' | 'assertive') => void
+
+    /**
+     * Announce a message to screen readers with a polite politeness level
+    */
+    polite: (message: string) => void
+
+    /**
+     * Announce a message to screen readers with an assertive politeness level
+    */
+    assertive: (message: string) => void
+
+    /**
+     * Stop all announcements
+    */
+    stop: () => void
+  }
+
+  interface Log {
+    /**
+    * Log an info message
+    */
+    info(...args): typeof console.info
+    /**
+    * Log an error message
+    */
+    error(...args): typeof console.error
+    /**
+    * Log a warning
+    */
+    warn(...args): typeof console.warn
+    /**
+    * Log a debug message
+    */
+    debug(...args): typeof console.debug
+  }
   interface AdvancedProp {
     /**
      * Name of the prop
@@ -48,115 +89,175 @@ declare namespace Component {
      */
     cast?: () => any
   }
+  type PropsArray<T extends string> = T[]
+  type AdvancedProps = AdvancedProp[]
 
-  type Props = string | AdvancedProp
+  // type ExtractPropNames<T extends Prop[]> = T extends (infer U)[]
+  // ? U extends string
+  //   ? U
+  //   : U extends AdvancedProp
+  //   ? U['key']
+  //   : never
+  // : never;
 
   type NotFunction<T> = T extends Function ? never : T;
 
   /**
    * Internal state of a Component instance
    */
-  interface StateObject {
+  interface State {
     [key: string]: any
   }
 
-  interface Computed {
-    [key: string]: (this: ComponentInstance) => any
+  interface Computed<S, M, P> {
+    [key: string]: (this: ComponentInstance & S & M & P) => any
   }
 
-  interface Watch {
-    [key: string]: (this: ComponentInstance, value: any, oldValue: any) => void
+  interface Watch<S, M, P> {
+    [key: string]: (this: ComponentInstance & S & M & P, value: any, oldValue: any) => void
   }
 
   interface Methods {
-    [key: string]: (this: ComponentInstance) => any
+    [key: string]: (this: ComponentInstance & State & Methods, ...args: any) => any;
   }
 
-  interface Input {
-    [key: string]: (this: ComponentInstance, event: KeyboardEvent) => void,
+  // interface MethodsExtended<S, M, P> extends Methods {
+  //   [key: string]: (this: ComponentInstance & S & M & P) => any;
+  // }
+
+  interface Input<S, M, P> {
+    [key: string]: ((this: ComponentInstance & S & M & P, event: KeyboardEvent) => void) | undefined,
+
     /**
      * Catch all input function
      *
      * Will be invoked when there is no dedicated function for a certain key
-     */
-    'any'?: (this: ComponentInstance, event: KeyboardEvent) => void,
+    */
+    any?: (this: ComponentInstance & S & M & P, event: KeyboardEvent) => void,
   }
 
   interface Log {
     /**
     * Log an info message
     */
-    info: typeof console.info
+    info(...args): typeof console.info
     /**
     * Log an error message
     */
-    error: typeof console.error
+    error(...args): typeof console.error
     /**
     * Log a warning
     */
-    warn: typeof console.warn
+    warn(...args): typeof console.warn
     /**
     * Log a debug message
     */
-    debug: typeof console.debug
+    debug(...args): typeof console.debug
   }
 
-  interface Hooks {
+  interface Hooks<S, M, P> {
     /**
     * Fires when the Component is being instantiated.
     * At this moment child elements will not be available yet
     */
-    init?: (this: ComponentInstance) => void
+    init?: (this: ComponentInstance & S & M & P, ...args: any) => void
     /**
     * Fires when the Component is fully initialized and ready for interaction.
     */
-    ready?: (this: ComponentInstance) => void
+    ready?: (this: ComponentInstance & S & M & P, ...args: any) => void
     /**
     * Triggers when the Component receives focus.
     *
     * This event can fire multiple times during the component's lifecycle
     */
-    focus?: (this: ComponentInstance) => void
+    focus?: (this: ComponentInstance & S & M & P, ...args: any) => void
     /**
     * Triggers when the Component loses focus.
     *
     * This event can fire multiple times during the component's lifecycle
     */
-    unfocus?: (this: ComponentInstance) => void
+    unfocus?: (this: ComponentInstance & S & M & P, ...args: any) => void
     /**
     * Fires when the Component is being destroyed and removed.
     */
-    destroy?: (this: ComponentInstance) => void,
+    destroy?: (this: ComponentInstance & S & M & P, ...args: any) => void,
     /**
     * Fires upon each frame start  (allowing you to tap directly into the renderloop)
     *
     * Note: This hook will fire continuously, multiple times per second!
     */
-    frameTick?: (this: ComponentInstance) => void,
+    frameTick?: (this: ComponentInstance & S & M & P, ...args: any) => void,
     /**
     * Fires when the component enters the viewport _margin_ and is attached to the render tree
     *
     * This event can fire multiple times during the component's lifecycle
     */
-    attach?: (this: ComponentInstance) => void,
+    attach?: (this: ComponentInstance & S & M & P, ...args: any) => void,
     /**
     * Fires when the component leaves the viewport _margin_ and is detached from the render tree
     *
     * This event can fire multiple times during the component's lifecycle
     */
-    detach?: (this: ComponentInstance) => void,
+    detach?: (this: ComponentInstance & S & M & P, ...args: any) => void,
     /**
     * Fires when the component enters the visible viewport
     *
     * This event can fire multiple times during the component's lifecycle
     */
-    enter?: (this: ComponentInstance) => void,
+    enter?: (this: ComponentInstance & S & M & P, ...args: any) => void,
     /**
     * Fires when the component leaves the visible viewport
     *
     * This event can fire multiple times during the component's lifecycle
     */
-    exit?: (this: ComponentInstance) => void,
+    exit?: (this: ComponentInstance & S & M & P, ...args: any) => void,
+  }
+
+  /**
+   * Route object
+  */
+  interface Route {
+    path: string,
+    params: Record<string, string>,
+    options?: {
+      inHistory?: boolean,
+      keepAlive?: boolean,
+      [key: string]: any,
+    },
+    data?: Record<string, any>,
+    component?: (args: { props: any }, holder: any, context: any) => Promise<any>,
+    hooks?: {
+      before?: (route: Route, previousRoute: Route) => Promise<string | Route | void>,
+    }
+  }
+
+
+  interface Router {
+    /**
+     * Navigate to a different location
+    */
+    to(location: string, data?: Record<string, any>, options?: Record<string, any>): void;
+
+    /**
+     * Navigate to the previous location
+    */
+    back(): boolean;
+
+    /**
+     * Get the current route read-only
+    */
+    readonly currentRoute: Route;
+
+    /**
+     * Get the list of all routes
+     */
+    readonly routes: Route[];
+
+    /**
+     * Get navigating state
+     */
+    readonly navigating: boolean;
+
   }
 
   export interface ComponentInstance {
@@ -217,15 +318,29 @@ declare namespace Component {
     */
     select: (ref: string) => ComponentInstance | ElementInstance
 
-    // tmp
-    [key: string]: any
+    /**
+     * Announcer methods for screen reader support
+     */
+    $announcer: Announcer
+
+    /**
+     * Triggers a forced update on state variables.
+     */
+    $trigger: (key: string) => void
+    trigger: (key: string) => void
+
+    /**
+     * Router instance
+     */
+    $router: Router
+
   }
 
   export interface ElementInstance {
     focus?: () => void
   }
 
-  export interface ComponentConfig {
+  export interface ComponentConfig<Props extends string, S, M> {
     components?: any,
     /**
      * XML-based template string of the Component
@@ -261,7 +376,7 @@ declare namespace Component {
      * }
      * ```
      */
-    state?: (this: ComponentInstance) => StateObject,
+    state?: (this: { [K in Props]: any}) => S,
     /**
      * Allowed props to be passed into the Component by the parent
      *
@@ -279,27 +394,27 @@ declare namespace Component {
      * }]
      * ```
      */
-    props?: Props[],
+    props?: PropsArray<Props> | AdvancedProp[],
     /**
      * Computed properties
      */
-    computed?: Computed,
+    computed?: Computed<S, M, { [K in Props]: any}>,
     /**
      * Watchers for changes to state variables, props or computed properties
      */
-    watch?: Watch,
+    watch?: Watch<S, M, { [K in Props]: any}>,
     /**
      * Hooking into Lifecycle events
      */
-    hooks?: Hooks,
+    hooks?: Hooks<S, M, { [K in Props]: any}>,
     /**
      * Methods for abstracting more complex business logic into separate function
      */
-    methods?: Methods,
+    methods?: M //MethodsExtended<S, M, { [K in Props]: any}>,
     /**
      * Tapping into user input
      */
-    input?: Input
+    input?: Input<S, M, { [K in Props]: any}>
   }
 }
 
@@ -307,9 +422,13 @@ declare namespace Component {
  /**
  * Blits.Component()
  */
-declare function Component(
+declare function Component<
+    Props extends string,
+    S extends Component.State,
+    M extends Component.Methods
+  >(
   name: Component.Name,
-  config: Component.ComponentConfig,
+  config: Component.ComponentConfig<Props, S, M>
 ) : Component.ComponentInstance
 
 export default Component;