@lightningjs/blits 0.9.6 → 0.9.7

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v0.9.7
+
+_15 apr 2024_
+
+- Added support for direct assignment of an Array element and triggering reactivity
+- Added support for .env in boilerplate
+- Fixed issue with Blits component being wrapped in a Proxy when assigned to a state variable
+- Fixed built-in `hasFocus`-state to also work for components that don't have state in their config object
+
 ## v0.9.6
 
 _4 apr 2024_
@@ -29,7 +38,7 @@ _25 mar 2024_
 
 - Added support for mount / pivot on Text elements and Sprites.
 
-# v0.9.2
+## v0.9.2
 
 _21 mar 2024_
 

package/boilerplate/common/eslint/.eslintrc.cjs

@@ -32,7 +32,7 @@ module.exports = {
   },
   parserOptions: {
     parser: 'babel-eslint',
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module',
   },
 }

package/boilerplate/common/git/gitignore

@@ -1,5 +1,8 @@
 .DS_Store
+.env
+.env.*
+!.env.example
+
 node_modules
 build
 dist
-env

package/boilerplate/js/default/.env.example

@@ -0,0 +1,4 @@
+# all environment variables need to prefixed with VITE_*
+# to read, use import.meta.env.VITE_FOO
+
+# VITE_FOO=bar

package/boilerplate/js/default/src/pages/Home.js

@@ -2,7 +2,7 @@ import Blits from '@lightningjs/blits'
 
 import Loader from '../components/Loader.js'
 
-export default Blits.Component('Loading', {
+export default Blits.Component('Home', {
   components: {
     Loader,
   },

package/boilerplate/js/default/vite.config.js

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 import { defineConfig } from 'vite'
 import blitsVitePlugins from '@lightningjs/blits/vite'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/src/component.js

@@ -68,7 +68,7 @@ const Component = (name = required('name'), config = required('config')) => {
     if (config.methods) setupMethods(component, config.methods)
 
     // setup state
-    if (config.state) setupState(component, config.state)
+    setupState(component, config.state)
 
     // setup computed
     if (config.computed) setupComputed(component, config.computed)

package/src/components/Circle.js

@@ -19,35 +19,38 @@ import Component from '../component.js'
 
 export default () =>
   Component('Circle', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context
-) {
-const elms = []
+    /* eslint-disable no-unused-vars */
+    code: {
+      render: function anonymous(parent, component, context) {
+        const elms = []
 
-    if(!elms[0]) {
-      elms[0] = this.element({parent: parent || 'root'}, component)
-    }
-    const elementConfig0 = {}
-  
+        if (!elms[0]) {
+          elms[0] = this.element({ parent: parent || 'root' }, component)
+        }
+        const elementConfig0 = {}
 
-    if(!elms[0].nodeId) {
-      elms[0].populate(elementConfig0)
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context
-) {
-elms[0].set('color', component.color)
-},function anonymous(component,elms,context
-) {
-elms[0].set('w', component.size)
-},function anonymous(component,elms,context
-) {
-elms[0].set('h', component.size)
-},function anonymous(component,elms,context
-) {
-elms[0].set('effects', [component.shader('radius', {radius: component.radius})])
-}], context: {}},
+        if (!elms[0].nodeId) {
+          elms[0].populate(elementConfig0)
+        }
+
+        return elms
+      },
+      effects: [
+        function anonymous(component, elms, context) {
+          elms[0].set('color', component.color)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('w', component.size)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('h', component.size)
+        },
+        function anonymous(component, elms, context) {
+          elms[0].set('effects', [component.shader('radius', { radius: component.radius })])
+        },
+      ],
+      context: {},
+    },
     props: [{ key: 'size', default: 40 }, 'color'],
     computed: {
       radius() {

package/src/components/Circle.orig.js

@@ -19,35 +19,9 @@ import Component from '../component.js'
 
 export default () =>
   Component('Circle', {
-    /* eslint-disable no-unused-vars */ 
-code: { render: function anonymous(parent,component,context
-) {
-const elms = []
-
-    if(!elms[0]) {
-      elms[0] = this.element({parent: parent || 'root'}, component)
-    }
-    const elementConfig0 = {}
-  
-
-    if(!elms[0].nodeId) {
-      elms[0].populate(elementConfig0)
-    }
-  
-return elms
-}, effects: [function anonymous(component,elms,context
-) {
-elms[0].set('color', component.color)
-},function anonymous(component,elms,context
-) {
-elms[0].set('w', component.size)
-},function anonymous(component,elms,context
-) {
-elms[0].set('h', component.size)
-},function anonymous(component,elms,context
-) {
-elms[0].set('effects', [component.shader('radius', {radius: component.radius})])
-}], context: {}},
+    template: `
+      <Element :color="$color" :w="$size" :h="$size" :effects="[$shader('radius', {radius: $radius})]"></Element>
+    `,
     props: [{ key: 'size', default: 40 }, 'color'],
     computed: {
       radius() {