@lightningjs/blits 0.9.8 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## v0.10.0
+
+_17 june 2024_
+
+- Updated renderer to version v0.9.1
+- Updated font generation to use the new `@lightningjs/msdf-generator`-package with required font metrics
+- Added queue mechanism to font generation to prevent hanging process
+- Added functionality to pass a component into the Component `:is` attribute
+
+Please read refer to the [breaking changes](https://github.com/lightning-js/renderer/releases/tag/v0.9.0) in the
+renderer related to MSDF fonts. When you have custom msdf fonts in your `/public` folder you may need to regenerate
+them (or remove the files and let Blits take care of [generating for you from a `.ttf`](https://lightning-js.github.io/blits/#/essentials/displaying_text?id=using-custom-fonts))
+
+
+## v0.9.9
+
+_22 may 2024_
+
+- Added support for `rtt`-attribute (Render To Texture)
+- Refactored Component for efficiency and readability
+- Improved type definitions
+- Fixed error when no settings object is supplied to Launch method
+- Fixed issue with `parent` variable being set on the global window object
+- Improved code of firing transitions
+- Bumped renderer to version 0.8.4
+
 ## v0.9.8
 
 _25 apr 2024_

package/docs/transitions_animations/transitions.md

@@ -10,7 +10,7 @@ We did learn how to _reactively_ changes values and trigger rerenders based on t
 ```js
 export default Blits('Gold', {
   template: `
-    <Element color="gold" w="100" h="100" :x="$x" :y=:"$y" />
+    <Element color="gold" w="100" h="100" :x="$x" :y="$y" />
   `,
   state() {
     return {
@@ -35,7 +35,7 @@ Blits offers an easy and intuitive way to apply transitions. All you need to do
 ```js
 export default Blits('Gold', {
   template: `
-    <Element color="gold" w="100" h="100" :x.transition="$x" :y.transition=:"$y" />
+    <Element color="gold" w="100" h="100" :x.transition="$x" :y.transition="$y" />
   `,
   state() {
     return {
@@ -74,7 +74,7 @@ Furthermore, you can specify:
 ```xml
 <Element color="gold" w="100" h="100"
   :x.transition="{value: $x, duration: 300, easing: 'ease-in-back', delay: 400}"
-  :y.transition=:"{value: $x, duration: 300, easing: 'cubic-bezier(1,-0.64,0.39,1.44)'}">
+  :y.transition="{value: $x, duration: 300, easing: 'cubic-bezier(1,-0.64,0.39,1.44)'}">
 </Element>
 ```
 

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.8",
+  "version": "0.10.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
     ".": "./index.js",
     "./vite": "./vite/index.js",
-    "./fontloader": "./src/fontLoader.js",
     "./transitions": "./src/router/transitions/index.js"
   },
   "scripts": {
@@ -45,11 +44,11 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.8.3",
+    "@lightningjs/msdf-generator": "^1.0.1",
+    "@lightningjs/renderer": "0.9.1",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",
-    "msdf-bmfont-xml": "^2.7.0",
     "ora": "^7.0.1",
     "prompts": "^2.4.2",
     "replace-in-file": "^6.1.0",

package/src/application.d.ts

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {default as Component, ComponentInstance} from './component'
+import {default as Component} from './component'
 
 declare namespace Application {
 
@@ -84,10 +84,6 @@ declare namespace Application {
     politeness?: 'off' | 'polite' | 'assertive'
   }
 
-  function Application(
-    config: Application.ApplicationConfig
-  ) : Application.ApplicationInstance
-
   type RequireAtLeastOne<T> = {
     [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>
   }[keyof T]
@@ -104,7 +100,7 @@ declare namespace Application {
     /**
      * Component to load when activating the route
      */
-    component: typeof ComponentInstance,
+    component: Component,
     /**
      * Transition configuration for the route
      */
@@ -142,9 +138,9 @@ declare namespace Application {
     }
   }
 
-  export interface ApplicationInstance extends ComponentInstance {}
+  export interface ApplicationInstance extends Component.ComponentInstance {}
 
-  export interface ApplicationConfig extends Component.ComponentConfig {
+  export interface ApplicationConfig<Props extends string, S, M> extends Component.ComponentConfig<Props, S, M> {
     /**
      * Routes definition
      *
@@ -167,8 +163,12 @@ declare namespace Application {
  *
  * Root App component
  */
-declare function Application(
-  config: Application.ApplicationConfig
+declare function Application<
+  Props extends string,
+  S extends Component.State,
+  M extends Component.Methods
+  >(
+    config: Application.ApplicationConfig<Props, S, M>
 ) : Application.ApplicationInstance
 
 export default Application;

package/src/component/base/announcer.js

@@ -0,0 +1,27 @@
+/*
+ * 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 Announcer from '../../announcer/announcer.js'
+
+export default {
+  $announcer: {
+    value: Announcer,
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+}

package/src/component/base/events.js

@@ -0,0 +1,37 @@
+/*
+ * 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 eventListeners from '../../lib/eventListeners'
+
+export default {
+  $emit: {
+    value: function (event, params) {
+      eventListeners.executeListeners(event, params)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $listen: {
+    value: function (event, callback) {
+      eventListeners.registerListener(this, event, callback)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+}

package/src/component/base/index.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 methods from './methods.js'
+import scheduling from './timeouts_intervals.js'
+import events from './events.js'
+import log from './log.js'
+import router from './router.js'
+import announcer from './announcer.js'
+import utils from './utils.js'
+
+export default Object.defineProperties(
+  {},
+  { ...methods, ...scheduling, ...events, ...log, ...router, ...announcer, ...utils }
+)

package/src/component/base/log.js

@@ -0,0 +1,27 @@
+/*
+ * 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 '../../lib/log.js'
+
+export default {
+  $log: {
+    value: log('App'),
+    writable: false,
+    enumerable: false,
+    configurable: false,
+  },
+}

package/src/component/base/methods.js

@@ -0,0 +1,136 @@
+/*
+ * 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.js'
+import Focus from '../../focus.js'
+import eventListeners from '../../lib/eventListeners.js'
+import { trigger } from '../../lib/reactivity/effect.js'
+import { Log } from '../../lib/log.js'
+
+export default {
+  focus: {
+    value: function (e) {
+      this[symbols.state].hasFocus = true
+      Focus.set(this, e)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  unfocus: {
+    value: function () {
+      this[symbols.state].hasFocus = false
+      this.lifecycle.state = 'unfocus'
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  destroy: {
+    value: function () {
+      this.lifecycle.state = 'destroy'
+      this.$clearTimeouts()
+      this.$clearIntervals()
+      eventListeners.removeListeners(this)
+      deleteChildren(this[symbols.children])
+      Log.debug(`Destroyed component ${this.componentId}`)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  select: {
+    value: function (ref) {
+      let selected = null
+      this[symbols.children].forEach((child) => {
+        if (Array.isArray(child)) {
+          child.forEach((c) => {
+            if (c['ref'] === ref) selected = c
+          })
+        } else if (Object.getPrototypeOf(child) === Object.prototype) {
+          Object.keys(child).forEach((k) => {
+            if (child[k]['ref'] === ref) selected = child[k]
+          })
+        } else {
+          if (child['ref'] === ref) selected = child
+        }
+      })
+      return selected
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  trigger: {
+    value: function (key) {
+      // trigger with force set to true
+      trigger(this[symbols.originalState], key, true)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $trigger: {
+    value: function (key) {
+      Log.warn('this.$trigger is deprecated, use this.trigger instead')
+      return this.trigger(key)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  shader: {
+    value: function (type, args) {
+      const target = type
+      return {
+        type: target,
+        props: args,
+      }
+      // const shaders = renderer.driver.stage.shManager.getRegisteredEffects()
+
+      // if (target in shaders) {
+      //   return {
+      //     type: target,
+      //     props: args,
+      //   }
+      // } else {
+      //   Log.error(`Shader ${type} not found`)
+      // }
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+}
+
+const deleteChildren = function (children) {
+  for (let i = 0; i < children.length; i++) {
+    if (!children[i]) return
+    // call destroy when method is available on child
+    if (children[i].destroy && typeof children[i].destroy === 'function') {
+      children[i].destroy()
+    }
+    // recursively call deleteChildren when it's an object of items (happens when using a forloop construct)
+    else if (Object.getPrototypeOf(children[i]) === Object.prototype) {
+      deleteChildren(Object.values(children[i]))
+    }
+
+    children[i] = null
+  }
+
+  children.length = 0
+}

package/src/component/base/router.js

@@ -0,0 +1,40 @@
+/*
+ * 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.js'
+import { to, currentRoute, navigating, back } from '../../router/router.js'
+
+export default {
+  $router: {
+    value: {
+      to,
+      back,
+      get currentRoute() {
+        return currentRoute
+      },
+      get routes() {
+        return this[symbols.routes]
+      },
+      get navigating() {
+        return navigating
+      },
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+}

package/src/component/base/timeouts_intervals.js

@@ -0,0 +1,92 @@
+/*
+ * 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.js'
+
+export default {
+  $setTimeout: {
+    value: function (fn, ms, ...params) {
+      const timeoutId = setTimeout(
+        () => {
+          this[symbols.timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
+          fn.apply(null, params)
+        },
+        ms,
+        params
+      )
+      this[symbols.timeouts].push(timeoutId)
+      return timeoutId
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $clearTimeout: {
+    value: function (timeoutId) {
+      if (this[symbols.timeouts].indexOf(timeoutId) > -1) {
+        this[symbols.timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
+        clearTimeout(timeoutId)
+      }
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $clearTimeouts: {
+    value: function () {
+      for (let i = 0; i < this[symbols.timeouts].length; i++) {
+        clearTimeout(this[symbols.timeouts][i])
+      }
+      this[symbols.timeouts] = []
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $setInterval: {
+    value: function (fn, ms, ...params) {
+      const intervalId = setInterval(() => fn.apply(null, params), ms, params)
+      this[symbols.intervals].push(intervalId)
+      return intervalId
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $clearInterval: {
+    value: function (intervalId) {
+      if (this[symbols.intervals].indexOf(intervalId) > -1) {
+        this[symbols.intervals] = this[symbols.intervals].filter((id) => id !== intervalId)
+        clearInterval(intervalId)
+      }
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+  $clearIntervals: {
+    value: function () {
+      for (let i = 0; i < this[symbols.intervals].length; i++) {
+        clearInterval(this[symbols.intervals][i])
+      }
+      this[symbols.intervals] = []
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
+}

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]
   })
 }