@lightningjs/blits 0.9.7 → 0.9.9

package/docs/getting_started/file_structure.md

@@ -8,23 +8,23 @@ Let's review the basic file structure, and take a closer look at the important o
 
 ### package.json
 
-In the root of your newly created app you will obviously find a `package.json` with all the necessary (dev) dependencies.
+In the root of your newly created app, you will obviously find a `package.json` with all the necessary (dev) dependencies.
 
 In order to build a Blits based Lightning 3 app, all you need is `@lightningjs/blits` as a dependency. Blits will take care of hooking up the Lightning 3 renderer for you behind the scenes.
 
-Feel free to install and import any custom library that your App may need. But always be mindful of the size and impact an external dependency may have - especially when developing for low powered devices (as if often the case with Lightning apps).
+Feel free to install and import any custom library that your App may need. But always be mindful of the size and impact an external dependency may have - especially when developing for low powered devices (as is often the case with Lightning apps).
 
 ### index.html
 
-You will also find an `index.html` in the root of your project. This is where the browser will be pointed to in order to launch your Blits App.
+You will also find an `index.html` at the root of your project. This is where the browser will be pointed to, in order to launch your Blits App.
 
-If you inspect the source you will see some minimal html. The essential parts of the html are the `<div>` where the canvas will be injected into, and the `<script>`-tag that points to the `index.js` of the App.
+If you inspect the source you will see some minimal HTML. The essential parts of the HTML are the `<div>` where the canvas will be injected into, and the `<script>`-tag that points to the `index.js` of the App.
 
 ### public
 
-There is also a `public` folder in your project. This folder is used for storing the public assets, such as App images and fonts.
+There is also a `public` folder in your project. This folder is used for storing public assets, such as App images and fonts.
 
-During development your assets are loaded directly from this folder. And if you run a production build, the entire `public` folder is copied over to the distributable version.
+During development, your assets are loaded directly from this folder. And if you run a production build, the entire `public` folder is copied over to the distributable version.
 
 ### src
 
@@ -37,7 +37,7 @@ The `src`-folder is where all your custom App code lives.
 The `Blits.Launch()`-method accepts 3 parameters:
 
 1) `app` - the root application component
-2) `target` - the html target to append the canvas to. This can either by an `id` of an html element in `index.html`, or you can pass a reference the html element itself
+2) `target` - the HTML target to append the canvas to. This can either be an `id` of an HTML element in `index.html`, or you can pass a reference to HTML element itself
 3) `settings` - an `object` with settings
 
 #### App.js
@@ -46,16 +46,15 @@ The `Blits.Launch()`-method accepts 3 parameters:
 
 ### components and pages folder
 
-The rest of you App can be built out using components. You are free to organize your components as you wish, but we recommend
-to use a separate file for each component, and place them in the `src/components`-folder.
+The rest of your App can be built out using components. You are free to organize your components as you wish, but we recommend using a separate file for each component and placing them in the `src/components`-folder.
 
 The convention is to start the component file name with a capital letter, matching the name of the component (e.g. `src/components/Loader.js` or `src/components/MenuItem.js`).
 
 Feel free to further organize and possibly nest your Component files to your own preferences.
 
-Pages in your App are technically just Blits components as well. But to keep thing clear, we often place them in a separate `pages`-folder alongside the `components`-folder (e.g. `src/pages/Home.js` and `src/pages/Details.js`)
+Pages in your App are technically just Blits components as well. But to keep things clear, we often place them in a separate `pages`-folder alongside the `components`-folder (e.g. `src/pages/Home.js` and `src/pages/Details.js`)
 
 #### Custom code
 
-If your App needs libraries for specific (business) logic that can be shared accross components (such as API calls) you can place them anywhere in your `src` folder. For example in a folder named `src/lib` or `src/api`.
+If your App needs libraries for specific (business) logic that can be shared across components (such as API calls) you can place them anywhere in your `src` folder. For example in a folder named `src/lib` or `src/api`.
 

package/docs/getting_started/intro.md

@@ -10,11 +10,11 @@ The Blits framework uses a **readable** XML-style template syntax and comes with
 
 ## Why Blits?
 
-You may be wondering where the name Blits comes from?
+You may be wondering where the name Blits comes from.
 
 Firstly, it's short, memorable and just has a nice ring to it.
 
-"Blits" is a Dutch word (a significant portion of the Lightning Open Source teams is based in the Netherlands). It means _flashy_ and it's often used to for things that are _great_ or _cool_.
+"Blits" is a Dutch word (a significant portion of the Lightning Open Source teams is based in the Netherlands). It means _flashy_ and it's often used for things that are _great_ or _cool_.
 
-Finally it's a nerdy reference to the computer term "Bit Blits" commonly used in graphics processing, for rapidly moving a block of data into memory - quite similar to what Lightning is doing 🙂
+Finally, it's a nerdy reference to the computer term "Bit Blits" commonly used in graphics processing, for rapidly moving a block of data into memory - quite similar to what Lightning is doing 🙂
 

package/docs/plugins/text-to-speech-announcer.md

@@ -2,7 +2,7 @@
 
 ## Text-to-Speech / Announcer
 
-Blits comes with a built-in Text-to-Speech / Announcer functionality, to easily make your App more accessible. This is something that's often overlooked when developing an App, but having speech assistance integrated into your App is a huge deal for those users that are visually impaired.
+Blits comes with a built-in Text-to-Speech / Announcer functionality, to easily make your App more accessible. This is something that's often overlooked when developing an App, but having speech assistance integrated into your App is a huge deal for those users who are visually impaired.
 
 ### Integrated with the router
 
@@ -24,7 +24,7 @@ const routes = [
 
 ## Custom announcement messages
 
-Furthermore it's possible to speak out custom messages anywhere in your App logic, for example when a component receives focus, as a reaction to user input, or to announce error messages when an remote API call
+Furthermore, it's possible to speak out custom messages anywhere in your App logic, for example when a component receives focus, as a reaction to user input, or to announce error messages when a remote API call
 fails.
 
 Each component in Blits has a `this.$announcer.speak()` available, which accepts `string` of a message to be announced.

package/docs/sidebar.json

@@ -93,6 +93,10 @@
       {
         "text": "Directives",
         "link": "/built-in/directives"
+      },
+      {
+        "text": "For loop",
+        "link": "/built-in/for-loop"
       }
     ]
   },

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.transiton="$x" :y.transition=:"$y" />
+    <Element color="gold" w="100" h="100" :x.transition="$x" :y.transition="$y" />
   `,
   state() {
     return {
@@ -51,7 +51,7 @@ export default Blits('Gold', {
   },
 ```
 
-If we try out the modified example above, you'll notice how difference adding a simple transition makes.
+If we try out the modified example above, you'll notice how much difference adding a simple transition makes.
 
 When the `.transition`-modifier is added to a reactive attribute, a default `ease-in` transition with a duration of `300ms` is applied
 
@@ -61,20 +61,20 @@ While the default transition will look pretty good out of the box and is great f
 
 Blits gives you full control over your transitions, with a simple to use format, right inside your template.
 
-Instead of referencing your component's state variable directly, you can also supply an inlien `object literal` in the attribute with a `.transition`-modifier. This will allow you to pass a number of options to change the way the transition will work.
+Instead of referencing your component's state variable directly, you can also supply an inline `object literal`` in the attribute with a `.transition`-modifier. This will allow you to pass a number of options to change the way the transition will work.
 
 The transition object must have a `value` key, which references the state variable (or prop or computed property) that triggers the transition.
 
-Further more you can specify:
+Furthermore, you can specify:
 
 - `duration` - the duration of the transition in `ms`
 - `delay` - the time in `ms` after which the transition should initiate
-- `easing` - the easing function of the transition. Can be one of the defaults easing options listed below, or a custom `cubic-bezier` definitions (i.e. `cubic-bezier(0,1.35,.99,-0.07)`).
+- `easing` - the easing function of the transition. Can be one of the default easing options listed below, or a custom `cubic-bezier` definition (i.e. `cubic-bezier(0,1.35,.99,-0.07)`).
 
 ```xml
 <Element color="gold" w="100" h="100"
-  :x.transiton="{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)'}">
+  :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)'}">
 </Element>
 ```
 
@@ -82,7 +82,7 @@ Besides a reference to the `value`, you can also use dynamic values for the othe
 
 ```xml
 <Element color="gold" w="100" h="100"
-  :x.transiton="{value: $x, duration: $dynamicDuration, delay: $dynamicDelay}">
+  :x.transition="{value: $x, duration: $dynamicDuration, delay: $dynamicDelay}">
 </Element>
 ```
 
@@ -108,15 +108,15 @@ Besides a reference to the `value`, you can also use dynamic values for the othe
 
 Sometimes you may want to perform an action when a transition ends or when it starts.
 
-You can easily hook into these transiti)on events by adding a `start` and `end` key to the transition object. Both value should be a function (or a reference to a `method` on your component).
+You can easily hook into these transition events by adding a `start` and `end` key to the transition object. Both values should be a function (or a reference to a `method` on your component).
 
-The `start` function will be called when the transition actually starts (after a possible specified delay) and the `end` function is called as soon as the transitions is finished.
+The `start` function will be called when the transition actually starts (after a possible specified delay) and the `end` function is called as soon as the transition is finished.
 
 ```js
 export default Blits('Gold', {
   template: `
     <Element color="gold" w="100" h="100"
-      :x.transiton="{value: $x, start: $transitionBegin, end: $transitionEnd}"
+      :x.transition="{value: $x, start: $transitionBegin, end: $transitionEnd}"
     />
   `,
   ///

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -45,7 +45,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.8.2",
+    "@lightningjs/renderer": "^0.8.4",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.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,
+  },
+}