@lightningjs/blits 0.6.7 → 0.6.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+# v0.6.9
+
+_31 jan 2024_
+
+- Fixed single quote escaping for all browsers (removing sometimes unsupported negative lookahead)
+- Fixed issue with focus when navigating back to a page that is kept in history
+
+# v0.6.8
+
+_29 jan 2024_
+
+- Reverted fix (initially) empty for-loops
+
 # v0.6.7
 
 _26 jan 2024_

package/boilerplate/package.json

@@ -31,6 +31,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^0.6.7"
+    "@lightningjs/blits": "^0.6.9"
   }
 }

package/docs/introduction.md

@@ -0,0 +1,19 @@
+# Blits - Lightning 3 App Development Framework
+
+With Blits, the App Development Framework for Lightning 3, it becomes a breeze to build great Lightning 3 applications.
+
+Blits is built on top of the Lightning 3 Renderer and aims to provide a **great developer experience**, making it fun and easy to build your apps!
+
+Built from the ground up by the LightningJS team, we're offering a **Complete App framework**, full of features to speed up development, while keeping it **lightweight** with a focus on **performance**.
+
+The Blits framework uses a **readable** XML-style template syntax and comes with built-in reactivity.
+
+## Why Blits?
+
+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_.
+
+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/sidebar.json

@@ -0,0 +1,64 @@
+[
+  {
+    "text": "Getting Started",
+    "items": [
+      {
+        "text": "Introduction",
+        "link": "/introduction"
+      },
+      {
+        "text": "Setup",
+        "link": "/getting_started"
+      }
+    ]
+  },
+  {
+    "text": "Basics",
+    "items": [
+      {
+        "text": "Components",
+        "link": "/components"
+      },
+      {
+        "text": "Template Syntax",
+        "link": "/template_syntax"
+      },
+      {
+        "text": "Component State",
+        "link": "/component_state"
+      },
+      {
+        "text": "Hooks",
+        "link": "/lifecycle_events"
+      },
+      {
+        "text": "Props",
+        "link": "/props"
+      },
+      {
+        "text": "User Input",
+        "link": "/user_input"
+      },
+      {
+        "text": "Computed Props",
+        "link": "/computed_properties"
+      },
+      {
+        "text": "Watchers",
+        "link": "/watchers"
+      },
+      {
+        "text": "Styling",
+        "link": "/element_attributes"
+      },
+      {
+        "text": "Images",
+        "link": "/displaying_images"
+      },
+      {
+        "text": "Text-to-Speech",
+        "link": "/text-to-speech-announcer"
+      }
+    ]
+  }
+]

package/docs/template_syntax.md

@@ -8,7 +8,7 @@ The _template_ key in the Componentn configuration object holds a string with an
 
 You can use different tags in your templates. And similar to HTML you can use arguments and nested tags. Self-closing tags and HTML-style comments are also supported.
 
-The default tag within a template is the `<Element>` tag, which corresponds to a node in the Lightning 3 renderer. For each element, you can define a set of predefined render properties, such as `x`, `y`, `w`, `color`, and more. Detailed information regarding the attributes supported by the <Element> tag can be found [here](./element_attributes.md).
+The default tag within a template is the `<Element>` tag, which corresponds to a node in the Lightning 3 renderer. For each element, you can define a set of predefined render properties, such as `x`, `y`, `w`, `color`, and more. Detailed information regarding the attributes supported by the `<Element>` tag can be found [here](./element_attributes.md).
 
 Consider the following template example:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {
@@ -44,5 +44,9 @@
   "dependencies": {
     "@lightningjs/renderer": "^0.7.0",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lightning-js/blits.git"
   }
 }

package/src/lib/codegenerator/generator.js

@@ -215,10 +215,6 @@ const generateForLoopCode = function (templateObject, parent) {
   ctx.renderCode.push(`
     const collection = ${cast(result[2], ':for')}
     const keys = []
-    // if array is empty push an empty object to properly set up reactivity
-    if(collection.length === 0) {
-      collection.push({})
-    }
     for(let __index = 0; __index < collection.length; __index++) {
       parent = ${parent}
       if(!component.key) keys.length = 0
@@ -330,8 +326,12 @@ const cast = (val = '', key = false, component = 'component.') => {
     if (val.startsWith('$')) {
       castedValue = `${component}${val.replace('$', '')}`
     } else {
-      // unescaped single quotes must be escaped
-      castedValue = `'${parseInlineContent(val.replace(/(?<!\\)'/g, "\\'"), component)}'`
+      // unescaped single quotes must be escaped while preserving escaped backslashes
+      const escapedVal = val
+        .replace(/\\\\/g, '__DOUBLE_BACKSLASH__')
+        .replace(/(^|[^\\])'/g, "$1\\'")
+        .replace(/__DOUBLE_BACKSLASH__/g, '\\\\')
+      castedValue = `'${parseInlineContent(escapedVal, component)}'`
     }
   }
   // numeric

package/src/router/router.js

@@ -30,6 +30,7 @@ const cacheMap = new WeakMap()
 const history = []
 let overrideOptions = {}
 let navigatingBack = false
+let previousFocus
 
 export const getHash = () => {
   return (document.location.hash || '/').replace(/^#/, '')
@@ -97,6 +98,12 @@ export const navigate = async function () {
 
       this[symbols.children].push(view)
 
+      // keep reference to the previous focus for storing in cache
+      previousFocus = Focus.get()
+
+      // set focus to the view that we're routing to
+      focus ? Focus.set(focus) : Focus.set(view)
+
       // apply before settings to holder element
       if (route.transition.before) {
         if (Array.isArray(route.transition.before)) {
@@ -143,8 +150,6 @@ export const navigate = async function () {
         Announcer.speak(route.announce.message, route.announce.politeness)
       }
 
-      // focus the new view
-      focus ? Focus.set(focus) : view.focus()
       this.activeView = this[symbols.children][this[symbols.children].length - 1]
     } else {
       Log.error(`Route ${hash} not found`)
@@ -172,7 +177,7 @@ const removeView = async (route, view, transition) => {
 
   // cache the page when it's as 'keepAlive' instead of destroying
   if (route.options && route.options.keepAlive === true) {
-    cacheMap.set(route, { view: view, focus: Focus.get() })
+    cacheMap.set(route, { view: view, focus: previousFocus })
   } else {
     // remove and cleanup
     for (let i = 0; i < view[symbols.children].length - 1; i++) {