@lightningjs/blits 0.6.10 → 0.6.11

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# v0.6.11
+
+_7 feb 2024_
+
+- Enabled the use of `type` as a component prop or state variable
+- Removed setting focus to AppComponent on back key press in RouterView
+- Fixed broken app create flow caused by missing dev dependencies in npx command (temporary fix)
+
 # v0.6.10
 
 _2 feb 2024_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -36,22 +36,21 @@
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "esm": "^3.2.25",
-    "execa": "^8.0.1",
     "husky": "^7.0.4",
-    "kolorist": "^1.8.0",
     "lint-staged": "^12.3.3",
-    "ora": "^7.0.1",
     "prettier": "^2.5.1",
-    "prompts": "^2.4.2",
-    "replace-in-file": "^6.1.0",
     "tap-diff": "^0.1.1",
-    "tape": "^5.5.0",
-    "validate-npm-package-name": "^5.0.0"
+    "tape": "^5.5.0"
   },
   "dependencies": {
     "@lightningjs/renderer": "^0.7.1",
-    "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
+    "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
+    "execa": "^8.0.1",
+    "kolorist": "^1.8.0",
+    "ora": "^7.0.1",
+    "prompts": "^2.4.2",
+    "replace-in-file": "^6.1.0",
+    "validate-npm-package-name": "^5.0.0"
   },
   "repository": {
     "type": "git",

package/src/component.js

@@ -122,12 +122,6 @@ const Component = (name = required('name'), config = required('config')) => {
     this[symbols.wrapper] = parentEl
 
     Object.defineProperties(this, {
-      type: {
-        value: name,
-        writable: false,
-        enumerable: true,
-        configurable: false,
-      },
       componentId: {
         value: createHumanReadableId(name),
         writable: false,

package/src/components/RouterView.js

@@ -63,8 +63,8 @@ export default () =>
       },
     },
     input: {
-      back(e) {
-        if (!Router.back()) this.parent.focus(e)
+      back() {
+        Router.back()
       },
     },
   })

package/src/components/RouterView.orig.js

@@ -44,8 +44,8 @@ export default () =>
       },
     },
     input: {
-      back(e) {
-        if (!Router.back()) this.parent.focus(e)
+      back() {
+        Router.back()
       },
     },
   })

package/src/lib/codegenerator/generator.js

@@ -64,14 +64,11 @@ const generateElementCode = function (
   const children = templateObject['children']
   delete templateObject['children']
 
-  Object.keys(templateObject).forEach((key) => {
-    if (key === 'type') {
-      if (templateObject[key] === 'Slot') {
-        renderCode.push(`elementConfig${counter}[Symbol.for('isSlot')] = true`)
-      }
-      return
-    }
+  if (templateObject[Symbol.for('componentType')] === 'Slot') {
+    renderCode.push(`elementConfig${counter}[Symbol.for('isSlot')] = true`)
+  }
 
+  Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
         elementConfig${counter}['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || component[Symbol.for('slots')][0] || parent
@@ -119,8 +116,10 @@ const generateComponentCode = function (
 
   renderCode.push(`
     const cmp${counter} =
-      (context.components && context.components['${templateObject.type}']) ||
-      component[Symbol.for('components')]['${templateObject.type}']
+      (context.components && context.components['${
+        templateObject[Symbol.for('componentType')]
+      }']) ||
+      component[Symbol.for('components')]['${templateObject[Symbol.for('componentType')]}']
   `)
 
   if ('key' in templateObject) {
@@ -149,7 +148,6 @@ const generateComponentCode = function (
 
   renderCode.push(`const props${counter} = {}`)
   Object.keys(templateObject).forEach((key) => {
-    if (key === 'type') return
     if (isReactiveKey(key)) {
       this.effectsCode.push(`
         ${elm}[Symbol.for('props')]['${key.substring(1)}'] = ${interpolate(
@@ -171,7 +169,13 @@ const generateComponentCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = (context.components && context.components['${templateObject.type}'] || component[Symbol.for('components')]['${templateObject.type}'] || (() => { console.error('component ${templateObject.type} not found')})).call(null, {props: props${counter}}, ${parent}, component)
+      ${elm} = (context.components && context.components['${
+    templateObject[Symbol.for('componentType')]
+  }'] || component[Symbol.for('components')]['${
+    templateObject[Symbol.for('componentType')]
+  }'] || (() => { console.error('component ${
+    templateObject[Symbol.for('componentType')]
+  } not found')})).call(null, {props: props${counter}}, ${parent}, component)
       if (${elm}[Symbol.for('slots')][0]) {
         parent = ${elm}[Symbol.for('slots')][0]
         component = ${elm}
@@ -245,7 +249,10 @@ const generateForLoopCode = function (templateObject, parent) {
     `)
   }
 
-  if (templateObject.type === 'Element' || templateObject.type === 'Slot') {
+  if (
+    templateObject[Symbol.for('componentType')] === 'Element' ||
+    templateObject[Symbol.for('componentType')] === 'Slot'
+  ) {
     generateElementCode.call(ctx, templateObject, parent, {
       key: 'scope.key',
       component: 'scope.',
@@ -283,7 +290,10 @@ const generateCode = function (templateObject, parent = false, options = {}) {
       if (Object.keys(childTemplateObject).indexOf(':for') > -1) {
         generateForLoopCode.call(this, childTemplateObject, parent)
       } else {
-        if (childTemplateObject.type === 'Element' || childTemplateObject.type === 'Slot') {
+        if (
+          childTemplateObject[Symbol.for('componentType')] === 'Element' ||
+          childTemplateObject[Symbol.for('componentType')] === 'Slot'
+        ) {
           generateElementCode.call(this, childTemplateObject, parent, options)
         } else {
           generateComponentCode.call(this, childTemplateObject, parent, options)

package/src/lib/symbols.js

@@ -36,4 +36,6 @@ export default {
   props: Symbol.for('props'),
   // Symbol 'slots' utilized within generated code
   slots: Symbol.for('slots'),
+  // Symbol 'componentType' utilized within generated code
+  componentType: Symbol.for('componentType'),
 }

package/src/lib/templateparser/parser.js

@@ -77,7 +77,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
     const match = moveCursorOnMatch(emptyTagStartRegex)
     if (match) {
       tags.push({
-        type: null,
+        [Symbol.for('componentType')]: null,
         [symbols.type]: 'opening',
         [symbols.level]: currentLevel,
         [symbols.cursorTagStart]: prevCursor,
@@ -94,7 +94,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
     if (match) {
       currentLevel--
       tags.push({
-        type: null,
+        [Symbol.for('componentType')]: null,
         [symbols.type]: 'closing',
         [symbols.level]: currentLevel,
       })
@@ -108,7 +108,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
     const match = moveCursorOnMatch(tagStartRegex)
     if (match) {
       currentTag = {
-        type: match[1],
+        [Symbol.for('componentType')]: match[1],
         [symbols.level]: currentLevel,
         [symbols.cursorTagStart]: prevCursor,
       }
@@ -221,7 +221,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
           [symbols.level]: element[symbols.level],
           [symbols.type]: element[symbols.type],
           [symbols.cursorTagStart]: element[symbols.cursorTagStart],
-          type: element.type,
+          [Symbol.for('componentType')]: element[Symbol.for('componentType')],
           parent: currentParent, // helps getting the previous parent when closing tag is encountered
         })
       } else if (element[symbols.type] === 'closing') {
@@ -230,7 +230,9 @@ export default (template = '', componentName, parentComponent, filePath = null)
         let isTagMismatch = false
         if (!isStackEmpty) {
           isLevelMismatch = stack[stack.length - 1][symbols.level] !== element[symbols.level]
-          isTagMismatch = stack[stack.length - 1].type !== element.type
+          isTagMismatch =
+            stack[stack.length - 1][Symbol.for('componentType')] !==
+            element[Symbol.for('componentType')]
         }
 
         if (isStackEmpty || isLevelMismatch || isTagMismatch) {
@@ -329,7 +331,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
       let currentParent = parentComponent
 
       while (currentParent) {
-        hierarchy = `${currentParent.type}/${hierarchy}`
+        hierarchy = `${currentParent[Symbol.for('componentType')]}/${hierarchy}`
         currentParent = currentParent.parent
       }
       return hierarchy