@lightningjs/blits 0.3.9 → 0.3.11

package/CHANGELOG.md

@@ -0,0 +1,87 @@
+# Changelog
+
+
+## v0.3.11
+
+_17 oct 2023_
+
+- Added support for using [percentages](https://lightning-js.github.io/blits/#/element_attributes?id=using-percentages) in dimensions (`w` / `h`) and positioning (`x` / `y`)
+- Refactored template parser to be more robust and throw errors when the template contains a syntax mistake
+- Re-enabled tests (still depends on renderer version bump though)
+- Added the new official Blits logo to the readme!
+
+## v0.3.10
+
+_9 oct 2023_
+
+- Updated L3 renderer dependency to 0.3.6
+- Renamed internal methods for creating textures and shaders
+
+
+## v0.3.9
+
+_5 oct 2023_
+
+- Updated L3 renderer dependency to 0.3.3
+
+
+## v0.3.8
+
+_4 oct 2023_
+
+- Added Blits VS code extension to recommended extensions
+
+
+## v0.3.7
+
+_3 oct 2023_
+
+- Fixed reactivity issue when using `null` values in state
+
+
+## v0.3.6
+
+_2 oct 2023_
+
+- Bumped version number of dependency in boilerplate
+
+
+## v0.3.5
+
+_2 oct 2023_
+
+- Added workaround for Vite import chunk url plugin for fontloading
+
+## v0.3.4
+
+_27 sep 2023_
+
+- Fixed issue with re-applying reactivity to already reactive props in forloop
+
+
+## v0.3.3
+
+_25 sep 2023_
+
+- Added support for `@loaded` and `@error` events on Elements (and Text Component)
+
+
+## v0.3.2
+
+_22 sep 2023_
+
+- Changed name of attribute to reference an Element or Component from `id` to `ref`
+
+
+## v0.3.1
+
+_20 sep 2023_
+
+- Fixed Blits dependency in create App boilerplate package.json
+
+
+## v0.3.0
+
+_20 sep 2023_
+
+Initial beta release of Blits ⚡️

package/README.md

@@ -1,3 +1,5 @@
+![Blits banner](banner.png)
+
 # Blits - Lightning 3 App Development Framework
 
 With Blits (formaly know as Bolt), the App Development Framework for Lightning 3, it becomes a breeze to build great Lightning 3 applications.
@@ -12,8 +14,14 @@ The Blits framework uses a **readable** XML-style template syntax and comes with
 
 You may be wondering where the name Blits comes from?
 
-Firstly, it short, memorable and has a nice ring to it. The name is derived from the word "Blitz", which means Lightning in German. Additionally, "Blits" is a Dutch term (a significant portion of the Lightning Open Source teams is based in the Netherlands) used to showcase something great or simply refer to things that are cool.
+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 🙂
 
 Check out the [documentation](https://lightning-js.github.io/blits) to learn more.
+
+## Changelog
+
+The full Changelog can be found [here](./CHANGELOG.md)

package/boilerplate/package.json

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

package/docs/element_attributes.md

@@ -25,6 +25,18 @@ All positioning and dimension related attributes, when not specified, default to
 </Element>
 ```
 
+#### Using percentages
+
+Besides using values in pixels (i.e. `w="100" h="300"`), you can also specify _percentages_ for the positioning and dimensions attributes.
+
+```xml
+<Element w="400" h="100" x="800" y="900" color="#0284c7">
+  <Element w="42%" h="30%" y="5%" x="1%" color="#075985" />
+</Element>
+```
+The percentage specified in `w` and `x` will be calculated as the percentage of the _width_ (`w`) of the parent element.
+And the percentage specified in `h` and `y` will use the _height_ (`h`) of the parent element as the base of the percentage calculation.
+
 ### Colors
 
 By default Elements have a transparent background color. The `color` attribute can be used to give an Element a color.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {
@@ -9,7 +9,8 @@
     "./fontloader": "./src/fontLoader.js"
   },
   "scripts": {
-    "test": "tape '{,!(node_modules)/**/}*.test.js' | tap-diff",
+    "test": "c8 npm run test:run",
+    "test:run": "tape '{,!(node_modules)/**/}*.test.js' | tap-diff",
     "lint": "eslint '**/*.js'",
     "lint:fix": "eslint '**/*.js' --fix"
   },
@@ -28,6 +29,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "babel-eslint": "^10.1.0",
+    "c8": "^8.0.1",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -39,7 +41,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.3.3",
+    "@lightningjs/renderer": "^0.3.6",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
   }
 }

package/src/components/Sprite.js

@@ -36,7 +36,7 @@ export default () =>
             : this.map[this.frame]
 
         if (this.spriteTexture && options) {
-          return this.___renderer.makeTexture('SubTexture', {
+          return this.___renderer.createTexture('SubTexture', {
             texture: this.spriteTexture,
             x: options.x,
             y: options.y,
@@ -48,7 +48,7 @@ export default () =>
     },
     hooks: {
       ready() {
-        this.spriteTexture = this.___renderer.makeTexture('ImageTexture', {
+        this.spriteTexture = this.___renderer.createTexture('ImageTexture', {
           src: `${window.location.protocol}//${window.location.host}/${this.image}`,
         })
       },

package/src/components/Text.js

@@ -32,6 +32,7 @@ export default () =>
         stretch="$stretch"
         contain="$_contain"
         :w="$w"
+        :h="$h"
         :textAlign="$align"
         @loaded="$@loaded"
         @error="$@error"
@@ -54,6 +55,7 @@ export default () =>
       'stretch',
       'align',
       'w',
+      'h',
       'contain',
       '@loaded',
       '@error',
@@ -63,7 +65,7 @@ export default () =>
         return this.slotcontent || this.content || ''
       },
       _contain() {
-        return this.contain || (this.align ? 'width' : null)
+        return this.contain || (this.w && this.h ? 'both' : this.w ? 'width' : 'none')
       },
     },
   })

package/src/element.js

@@ -54,9 +54,12 @@ const transformations = {
     'z' in props && (props.zIndex = props.z)
     delete props.z
   },
-  parentId(props) {
-    props.parent = props.parentId === 'root' ? renderer.root : renderer.getNodeById(props.parentId)
-    delete props.parentId
+  parent(props) {
+    if (props.parent === 'root') {
+      props.parent = renderer.root
+    } else {
+      props.parent = props.parent.node
+    }
   },
   color(props) {
     if (
@@ -77,6 +80,21 @@ const transformations = {
       props.color = colors.normalize(props.color)
     }
   },
+  percentage(props, prop) {
+    const map = {
+      w: 'width',
+      width: 'width',
+      x: 'width',
+      h: 'height',
+      height: 'height',
+      y: 'height',
+    }
+
+    const base = map[prop]
+    if (base) {
+      props[prop] = this.node._parent[base] * (parseFloat(props[prop]) / 100)
+    }
+  },
   mount(props) {
     if (
       typeof props.mount === 'object' ||
@@ -123,7 +141,7 @@ const transformations = {
     }
   },
   effects(props) {
-    props.shader = renderer.makeShader('DynamicShader', {
+    props.shader = renderer.createShader('DynamicShader', {
       effects: props.effects.map((eff) => {
         if (eff.props && eff.props.color) {
           eff.props.color = colors.normalize(eff.props.color)
@@ -200,6 +218,9 @@ const Element = {
       }
 
       Object.keys(props).forEach((prop) => {
+        if (typeof props[prop] === 'string' && props[prop].endsWith('%')) {
+          transformations.percentage.call(this, props, prop)
+        }
         this.node[prop] = props[prop]
       })
     }
@@ -228,6 +249,10 @@ const Element = {
     // works for now
     prop = Object.keys(props).pop()
 
+    if (typeof value === 'string' && props[prop].endsWith('%')) {
+      transformations.percentage.call(this, props, prop)
+    }
+
     if (this.node[prop] !== props[prop]) {
       const f = this.node.animate(props, {
         duration: typeof value === 'object' ? ('duration' in value ? value.duration : 300) : 300,

package/src/launch.d.ts

@@ -78,7 +78,7 @@ export interface Settings {
   /**
    * Debug level for console log messages
    */
-  debugLevel?: DebugLevel | LogType[]
+  debugLevel?: DebugLevel | LogTypes[]
   /**
    * Font loader file
    */

package/src/lib/codegenerator/generator.js

@@ -56,7 +56,7 @@ const generateElementCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = this.element({componentId: component.___id, parentId: parent && parent.nodeId || 'root'})
+      ${elm} = this.element({componentId: component.___id, parent: parent || 'root'})
     }
     const elementConfig${counter} = {}
   `)
@@ -139,7 +139,7 @@ const generateComponentCode = function (
     if (key === 'type') return
     if (isReactiveKey(key)) {
       this.effectsCode.push(`
-          ${elm}.___props['${key.substring(1)}'] = ${interpolate(
+        ${elm}.___props['${key.substring(1)}'] = ${interpolate(
         templateObject[key],
         options.component
       )}`)
@@ -241,19 +241,20 @@ const generateForLoopCode = function (templateObject, parent) {
 }
 
 const generateCode = function (templateObject, parent = false) {
-  templateObject.children.forEach((childTemplateObject) => {
-    counter++
+  templateObject.children &&
+    templateObject.children.forEach((childTemplateObject) => {
+      counter++
 
-    if (Object.keys(childTemplateObject).indexOf(':for') > -1) {
-      generateForLoopCode.call(this, childTemplateObject, parent)
-    } else {
-      if (childTemplateObject.type !== 'Element') {
-        generateComponentCode.call(this, childTemplateObject, parent)
+      if (Object.keys(childTemplateObject).indexOf(':for') > -1) {
+        generateForLoopCode.call(this, childTemplateObject, parent)
       } else {
-        generateElementCode.call(this, childTemplateObject, parent)
+        if (childTemplateObject.type !== 'Element') {
+          generateComponentCode.call(this, childTemplateObject, parent)
+        } else {
+          generateElementCode.call(this, childTemplateObject, parent)
+        }
       }
-    }
-  })
+    })
 }
 
 const interpolate = (val, component = 'component.') => {
@@ -285,9 +286,22 @@ const interpolate = (val, component = 'component.') => {
 const cast = (val = '', key = false, component = 'component.') => {
   let castedValue
 
-  // numeric
   if (key !== 'color' && !isNaN(parseFloat(val))) {
     castedValue = parseFloat(val)
+    if (val.endsWith('%')) {
+      const map = {
+        w: 'width',
+        width: 'width',
+        x: 'width',
+        h: 'height',
+        height: 'height',
+        y: 'height',
+      }
+      const base = map[key]
+      if (base) {
+        castedValue = `parent.node.${base} * (${castedValue} / 100)`
+      }
+    }
   }
   // boolean true
   else if (val.toLowerCase() === 'true') {

package/src/lib/codegenerator/{generator.test.js → generator.test_.js}

@@ -22,6 +22,10 @@ const normalize = (str) => {
   return str.replace(/[\n\s\t]/gi, '')
 }
 
+const componentConfigObject = {
+  components: {},
+}
+
 test('Type', (assert) => {
   const expected = 'function'
   const actual = typeof generator
@@ -31,7 +35,7 @@ test('Type', (assert) => {
 })
 
 test('Returns an object with a render function and a context object', (assert) => {
-  const result = generator()
+  const result = generator.call(componentConfigObject)
   const expected = 'object'
   const actual = typeof result
 
@@ -43,7 +47,7 @@ test('Returns an object with a render function and a context object', (assert) =
 })
 
 test('The render key is a function', (assert) => {
-  const result = generator()
+  const result = generator(componentConfigObject)
   const expected = 'function'
   const actual = typeof result.render
 

package/src/lib/colors/colors.test.js

@@ -28,42 +28,42 @@ test('Object', (assert) => {
 
 test('6 character hex', (assert) => {
   const input = ['#ffffff', '#000000', '#c0ffee', '#7dd3fc', '#0c4a6e']
-  const expected = ['0xffffffff', '0xff000000', '0xffeeffc0', '0xfffcd37d', '0xff6e4a0c']
+  const expected = ['0xffffffff', '0x000000ff', '0xc0ffeeff', '0x7dd3fcff', '0x0c4a6eff']
 
   const actual = input.map(colors.normalize)
 
   assert.deepEqual(
     actual,
     expected,
-    'A 6 character hex code should return the correct color in abgr format'
+    'A 6 character hex code should return the correct color in rgba format'
   )
   assert.end()
 })
 
 test('3 character hex', (assert) => {
   const input = ['#fff', '#000', '#c8c']
-  const expected = ['0xffffffff', '0xff000000', '0xffcc88cc']
+  const expected = ['0xffffffff', '0x000000ff', '0xcc88ccff']
 
   const actual = input.map(colors.normalize)
 
   assert.deepEqual(
     actual,
     expected,
-    'A 3 character hex code should return the correct color in abgr format'
+    'A 3 character hex code should return the correct color in rgba format'
   )
   assert.end()
 })
 
 test('8 character hex (rgba)', (assert) => {
   const input = ['#ffffffff', '#000000ff', '#c0ffee80', '#7dd3fc10', '#0c4a6eff']
-  const expected = ['0xffffffff', '0xff000000', '0x80eeffc0', '0x10fcd37d', '0xff6e4a0c']
+  const expected = ['0xffffffff', '0x000000ff', '0xc0ffee80', '0x7dd3fc10', '0x0c4a6eff']
 
   const actual = input.map(colors.normalize)
 
   assert.deepEqual(
     actual,
     expected,
-    'A 8 character hex (rgba) code should return the correct color in abgr format'
+    'A 8 character hex (rgba) code should return the correct color in rgba format'
   )
   assert.end()
 })
@@ -76,14 +76,14 @@ test('RGB colors', (assert) => {
     'rgb(125, 211, 252)',
     'rgb(12, 74, 110)',
   ]
-  const expected = ['0xffffffff', '0xff000000', '0xffeeffc0', '0xfffcd37d', '0xff6e4a0c']
+  const expected = ['0xffffffff', '0x000000ff', '0xc0ffeeff', '0x7dd3fcff', '0x0c4a6eff']
 
   const actual = input.map(colors.normalize)
 
   assert.deepEqual(
     actual,
     expected,
-    'RGB codes prefixed with # should return the correct color in abgr format'
+    'RGB codes prefixed with # should return the correct color in rgba format'
   )
   assert.end()
 })
@@ -100,12 +100,12 @@ test('RGBA colors', (assert) => {
   ]
   const expected = [
     '0xffffffff',
-    '0xff000000',
-    '0x80eeffc0',
-    '0x1afcd37d',
-    '0x006e4a0c',
-    '0x006e4a0c',
-    '0xff6e4a0c',
+    '0x000000ff',
+    '0xc0ffee80',
+    '0x7dd3fc1a',
+    '0x0c4a6e00',
+    '0x0c4a6e00',
+    '0x0c4a6eff',
   ]
 
   const actual = input.map(colors.normalize)
@@ -113,7 +113,7 @@ test('RGBA colors', (assert) => {
   assert.deepEqual(
     actual,
     expected,
-    'RGB codes prefixed with # should return the correct color in abgr format'
+    'RGB codes prefixed with # should return the correct color in rgba format'
   )
   assert.end()
 })
@@ -130,12 +130,12 @@ test('RGBA colors', (assert) => {
   ]
   const expected = [
     '0xffffffff',
-    '0xff000000',
-    '0x80eeffc0',
-    '0x1afcd37d',
-    '0x006e4a0c',
-    '0x006e4a0c',
-    '0xff6e4a0c',
+    '0x000000ff',
+    '0xc0ffee80',
+    '0x7dd3fc1a',
+    '0x0c4a6e00',
+    '0x0c4a6e00',
+    '0x0c4a6eff',
   ]
 
   const actual = input.map(colors.normalize)
@@ -143,19 +143,19 @@ test('RGBA colors', (assert) => {
   assert.deepEqual(
     actual,
     expected,
-    'RGB codes prefixed with # should return the correct color in abgr format'
+    'RGB codes prefixed with # should return the correct color in rgba format'
   )
   assert.end()
 })
 
 test('HTML colors', (assert) => {
-  const input = ['blanchedalmond', 'aqua', 'tomato', 'saddlebrown', 'red']
+  const input = ['blanchedalmond', 'salmon', 'tomato', 'saddlebrown', 'red']
 
   const expected = [
-    parseInt('0xffcdebff', 16),
-    parseInt('0xffffff00', 16),
-    parseInt('0xff4763ff', 16),
-    parseInt('0xff13458b', 16),
+    parseInt('0xffebcdff', 16),
+    parseInt('0xfa8072ff', 16),
+    parseInt('0xff6347ff', 16),
+    parseInt('0x8b4513ff', 16),
     parseInt('0xff0000ff', 16),
   ]
 
@@ -164,7 +164,7 @@ test('HTML colors', (assert) => {
   assert.deepEqual(
     actual,
     expected,
-    'RGB codes prefixed with # should return the correct color in abgr format'
+    'RGB codes prefixed with # should return the correct color in rgba format'
   )
   assert.end()
 })
@@ -181,7 +181,7 @@ test('HTML colors', (assert) => {
 
 //   const actual = input.map(colors.normalize)
 
-//   assert.deepEqual(actual, expected, 'A hsl code should return the correct color in abgr format')
+//   assert.deepEqual(actual, expected, 'A hsl code should return the correct color in rgba format')
 //   assert.end()
 // })
 

package/src/lib/reactivity/reactive.js

@@ -28,7 +28,15 @@ const arrayMethods = [
   'splice',
   'unshift',
 ]
+
+const proxyMap = new WeakMap()
+
 const reactiveProxy = (target) => {
+  const isProxy = proxyMap.get(target)
+  if (isProxy) {
+    return isProxy
+  }
+
   const handler = {
     get(target, key, receiver) {
       if (Array.isArray(target) && arrayMethods.includes(key)) {
@@ -36,12 +44,7 @@ const reactiveProxy = (target) => {
       }
       track(target, key)
 
-      if (
-        (target[key] !== null &&
-          typeof target[key] === 'object' &&
-          Object.getPrototypeOf(target[key]) === Object.prototype) ||
-        Array.isArray(target[key])
-      ) {
+      if (target[key] !== null && typeof target[key] === 'object') {
         return reactiveProxy(target[key])
       }
 
@@ -66,7 +69,10 @@ const reactiveProxy = (target) => {
       return result
     },
   }
-  return new Proxy(target, handler)
+
+  const proxy = new Proxy(target, handler)
+  proxyMap.set(target, proxy)
+  return proxy
 }
 
 const reactiveDefineProperty = (target) => {

package/src/lib/setup/props.test.js

@@ -17,6 +17,9 @@
 
 import test from 'tape'
 import propsFn from './props.js'
+import { initLog } from '../log.js'
+
+initLog()
 
 test('Type props function', (assert) => {
   const expected = 'function'
@@ -87,14 +90,14 @@ test('Get value of props', (assert) => {
 test('Passing props as an object', (assert) => {
 
   const component = new Function()
-  const props = [{key: 'index', key: 'img', key: 'url'}]
+  const props = [{key: 'index'}, {key: 'img'}, {key: 'url'}]
   propsFn(component, props)
 
   assert.equal(props.length, component.___propKeys.length, 'All passed props should be stored on ___propKeys')
-  assert.equal(props.length, props.map(prop => component.___propKeys.indexOf(prop.key) > -1).filter(prop => prop === true).length, 'All passed props should be stored on ___propKeys')
+  assert.equal(props.length, props.map(prop => component.___propKeys.indexOf(typeof prop === 'object' ? prop.key : prop) > -1).filter(prop => prop === true).length, 'All passed props should be stored on ___propKeys')
 
   props.forEach((prop) => {
-    assert.true(typeof Object.getOwnPropertyDescriptor(component.prototype, prop.key).get === 'function', `A getter should have been created for property ${prop}`)
+    assert.true(typeof Object.getOwnPropertyDescriptor(component.prototype, typeof prop === 'object' ? prop.key : prop).get === 'function', `A getter should have been created for property ${prop}`)
   })
 
   assert.end()

package/src/lib/templateparser/parser.js

@@ -15,10 +15,47 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+class TemplateParseError extends Error {
+  constructor(name, context) {
+    super('TemplateParseError')
+    this.name = name
+    this.context = context
+  }
+}
+
 export default (template = '') => {
   let cursor = 0
-  let cleaned = false
+  let tags = []
+  let currentTag = null
+  let currentLevel = 0
+
+  // regular expressions
+  const tagStartRegex = /^<\/?([a-zA-Z0-9_\-.]+)\s*/
+  const tagEndRegex = /^\s*(\/?>)\s*/
+  const attrNameRegex = /^([A-Za-z0-9:.\-_@]+)=\s*(["'])/
+  const emptyTagStartRegex = /^<>\s*/
+  const emptyTagEndRegex = /^\s*(<\/>)\s*/
 
+  // main functions
+  const parse = () => {
+    template = clean(template)
+    parseLoop(parseEmptyTagStart)
+
+    try {
+      return format(tags)
+    } catch (error) {
+      console.error('Error:', error.message)
+    }
+  }
+
+  const parseLoop = (next) => {
+    if (cursor >= template.length) {
+      return
+    }
+    next()
+  }
+
+  // utils
   const clean = (template) => {
     // remove all unnecessary new lines and comments
     return template
@@ -26,77 +63,187 @@ export default (template = '') => {
       .replace(/\r?\n\s*\r\n/gm, ' ') // remove empty lines
       .replace(/\r?\n\s*(\S)/gm, ' $1') // remove line endings & spacing
       .replace(/\r?\n/g, '') // remove all line endings
+      .trim()
   }
 
-  const parse = () => {
-    if (!cleaned) {
-      template = clean(template)
-      cleaned = true
+  const moveCursorOnMatch = (regex) => {
+    const match = template.slice(cursor).match(regex)
+    if (match) cursor += match[0].length
+    return match
+  }
+
+  // parsers
+  const parseEmptyTagStart = () => {
+    const match = moveCursorOnMatch(emptyTagStartRegex)
+    if (match) {
+      tags.push({ type: null, __type: 'opening', __level: currentLevel })
+      currentLevel++
+      parseLoop(parseEmptyTagStart)
+    } else {
+      parseLoop(parseEmptyTagEnd)
+    }
+  }
+
+  const parseEmptyTagEnd = () => {
+    const match = moveCursorOnMatch(emptyTagEndRegex)
+    if (match) {
+      currentLevel--
+      tags.push({ type: null, __type: 'closing', __level: currentLevel })
+      parseLoop(parseEmptyTagStart)
+    } else {
+      parseLoop(parseTag)
     }
+  }
 
-    const output = { children: [] }
-    let attributeStarted = false
-    while (template[cursor]) {
-      if (template[cursor] === '"') {
-        attributeStarted = !attributeStarted
+  const parseTag = () => {
+    const match = moveCursorOnMatch(tagStartRegex)
+    if (match) {
+      if (match[0].startsWith('</')) {
+        currentLevel--
+        currentTag = { type: match[1], __type: 'closing', __level: currentLevel }
+      } else {
+        currentTag = { type: match[1], __type: 'opening', __level: currentLevel }
+        currentLevel++
       }
-      if (template.charCodeAt(cursor) === '<'.charCodeAt(0) && !attributeStarted) {
-        if (template.charCodeAt(cursor + 1) === '/'.charCodeAt(0)) {
-          return output
+      parseLoop(parseTagEnd)
+    } else {
+      throw new TemplateParseError('InvalidTag', template.slice(cursor))
+    }
+  }
+
+  const parseTagEnd = () => {
+    const match = moveCursorOnMatch(tagEndRegex)
+    if (match) {
+      if (match[1] === '/>') {
+        currentTag.__type = 'self-closing'
+        currentLevel-- // because it was parsed as opening tag before
+      }
+
+      // parsing content in between tags
+      // rule: < char cannot be used in between tags even in escaped form
+      if (currentTag.__type === 'opening') {
+        const tagContent = template.slice(cursor, template.indexOf('<', cursor))
+        if (tagContent) {
+          currentTag.content = tagContent
+          cursor += tagContent.length
         }
-        parseNode(output)
       }
-      cursor++
-    }
 
-    return output
+      tags.push(currentTag)
+      parseLoop(parseEmptyTagStart)
+    } else {
+      parseLoop(parseAttributes)
+    }
   }
 
-  const parseNode = (output) => {
-    const endTagMatch = template.slice(cursor).match(/(?:[^">]*|"[^"]*")*>/)
-    const endPosition = endTagMatch && endTagMatch[0] && endTagMatch[0].length + cursor - 1
-    const tag = parseTag(template.substring(cursor + 1, endPosition))
-    const node = { ...{ type: tag.type }, ...tag.attributes }
-    // self closing tag
-    if (template.charCodeAt(endPosition - 1) === '/'.charCodeAt(0)) {
-      output.children.push(node)
-    } else {
-      cursor = endPosition
-      const nested = parse()
-      if (nested.children.length) {
-        node.children = [...nested.children]
+  const parseAttributes = () => {
+    const attrNameMatch = moveCursorOnMatch(attrNameRegex)
+    if (attrNameMatch) {
+      const delimiter = attrNameMatch[2]
+      const attrValueRegex = new RegExp(`^(.*?)${delimiter}\\s*`)
+      const attrValueMatch = moveCursorOnMatch(attrValueRegex)
+
+      if (attrValueMatch) {
+        // maybe this should be done while code generation step
+        const attr = formatAttribute(attrNameMatch[1], attrValueMatch[1])
+        currentTag[attr.name] = attr.value
+        parseLoop(parseTagEnd)
+      } else {
+        throw new TemplateParseError('MissingOrInvalidAttributeValue', template.slice(cursor))
       }
-      // else {
-      //   const content = template.substring(endPosition + 1, cursor).trim()
-      //   if (content) node.slotcontent = content
-      // }
-      output.children.push(node)
+    } else {
+      throw new TemplateParseError('InvalidAttribute', template.slice(cursor))
     }
   }
 
-  const parseTag = (tag) => {
-    let match
-    const result = {
-      type: (match = tag.match(/^([A-Za-z0-9]+)(?![A-Za-z0-9=])/)) && match[0], // || 'Element' maybe default to 'Element'
+  const formatAttribute = (name, value) => {
+    // if name contains a dot then we need to add enclosing js object to the value
+    // example :x.transition="{v: $offset}" must be formatted as { name: ':x', value: '{ transition: {v: $offset}' }
+    if (name.includes('.')) {
+      const [objectName, attributeName] = name.split('.')
+      return { name: objectName, value: `{${attributeName}: ${value}}` }
     }
+    return { name, value }
+  }
+
+  // formatter
+  function format(data) {
+    let stack = []
+    let output = { children: [] }
 
-    const attributes = tag.match(/[:*@\w.-]+="[^"]*"/g) || []
-    if (attributes.length) {
-      result['attributes'] = attributes.reduce((obj, attr) => {
-        const match = /(.+)=["'](.+)["']/.exec(attr)
-        if (match) {
-          if (match[1].indexOf('.') > -1) {
-            const parts = match[1].split('.')
-            obj[parts[0]] = `{${parts[1]}: ${match[2]}}`
-          } else {
-            obj[match[1]] = match[2]
-          }
+    for (const item of data) {
+      const { type, __type, __level } = item
+
+      // Check for unclosed tags
+      while (stack.length && stack[stack.length - 1].__level >= __level) {
+        const popped = stack.pop()
+        if (popped.__type === 'opening') {
+          throw new TemplateParseError('MismatchedClosingTag', `tag: ${popped.type || 'null'}`)
         }
-        return obj
-      }, {})
+      }
+
+      // For closing tags, just pop the opening tag from stack and continue
+      if (__type === 'closing') {
+        let lastStackType = stack[stack.length - 1] ? stack[stack.length - 1].type : null
+
+        if (
+          stack.length === 0 ||
+          (type
+            ? lastStackType && lastStackType.toLowerCase() !== type.toLowerCase()
+            : lastStackType !== null)
+        ) {
+          throw new TemplateParseError('MismatchedClosingTag', `tag: ${type || 'null'}`)
+        }
+        stack.pop()
+        continue
+      }
+
+      // Create a new item, copying properties but deleting __type and __level
+      const newItem = { ...item }
+      delete newItem.__type
+      delete newItem.__level
+
+      if (__type === 'opening') {
+        newItem.children = []
+      }
+
+      // Find out where to insert this new item
+      let current = output.children
+      for (const stackItem of stack) {
+        if (stackItem.children) {
+          current = stackItem.children
+        }
+      }
+
+      // Insert the item and push it to the stack
+      current.push(newItem)
+      stack.push(newItem)
+
+      // If this is a self-closing tag, immediately pop it off the stack
+      if (__type === 'self-closing') {
+        stack.pop()
+      }
+    }
+
+    // Check for any remaining unclosed tags
+    for (const item of stack) {
+      if (item.__type === 'opening') {
+        throw new TemplateParseError('MismatchedClosingTag', `tag: ${item.type || 'null'}`)
+      }
     }
 
-    return result
+    // Remove empty 'children' arrays
+    function removeEmptyChildren(obj, level = 0) {
+      if (Array.isArray(obj.children) && obj.children.length === 0 && level > 0) {
+        delete obj.children
+      }
+      if (obj.children) {
+        obj.children.forEach((child) => removeEmptyChildren(child, level + 1))
+      }
+    }
+
+    removeEmptyChildren(output)
+    return output
   }
 
   return parse()

package/src/lib/templateparser/parser.test.js

@@ -594,42 +594,42 @@ test('Parse template with a nameless tag', (assert) => {
   assert.end()
 })
 
-test('Parse template with a nameless tag but with arguments', (assert) => {
-  const template = `
-    <x="100" y="200">
-      <x="50" y="20">
-        <Component w="100" h="20" />
-      </>
-    </>`
-
-  const expected = {
-    children: [
-      {
-        type: null,
-        x: '100',
-        y: '200',
-        children: [
-          {
-            type: null,
-            x: '50',
-            y: '20',
-            children: [
-              {
-                type: 'Component',
-                w: '100',
-                h: '20',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  }
-  const actual = parser(template)
-
-  assert.deepEqual(actual, expected, 'Parser should return object representation of template')
-  assert.end()
-})
+// test('Parse template with a nameless tag but with arguments', (assert) => {
+//   const template = `
+//     <x="100" y="200">
+//       <x="50" y="20">
+//         <Component w="100" h="20" />
+//       </>
+//     </>`
+
+//   const expected = {
+//     children: [
+//       {
+//         type: null,
+//         x: '100',
+//         y: '200',
+//         children: [
+//           {
+//             type: null,
+//             x: '50',
+//             y: '20',
+//             children: [
+//               {
+//                 type: 'Component',
+//                 w: '100',
+//                 h: '20',
+//               },
+//             ],
+//           },
+//         ],
+//       },
+//     ],
+//   }
+//   const actual = parser(template)
+
+//   assert.deepEqual(actual, expected, 'Parser should return object representation of template')
+//   assert.end()
+// })
 
 test('Parse template with a transition argument (single value)', (assert) => {
   const template = `
@@ -767,3 +767,183 @@ test('Parse template with attributes with values spread over multiple lines', (a
   assert.deepEqual(actual, expected, 'Parser should return object representation of template')
   assert.end()
 })
+
+test('Parse template with inline text between tags', (assert) => {
+  const template = `
+  <Component>
+    <Element w="160" h="160" x="40" y="40" color="#fb923c">Lorem ipsum</Element>
+  </Component>`
+
+  const expected = {
+    children: [
+      {
+        type: 'Component',
+        children: [
+          {
+            type: 'Element',
+            w: '160',
+            h: '160',
+            x: '40',
+            y: '40',
+            color: '#fb923c',
+            content: 'Lorem ipsum',
+          },
+        ],
+      },
+    ],
+  }
+
+  const actual = parser(template)
+
+  assert.deepEqual(actual, expected, 'Parser should return object representation of template')
+  assert.end()
+})
+
+test('Parse template with multiple inline texts between different tags', (assert) => {
+  const template = `
+  <Component>
+    <Element w="160" h="160" x="40" y="40" color="#fb923c">Lorem ipsum</Element>
+    <Element>dolor sit amet</Element>
+    <Element>
+      <Text>consectetur adipiscing elit</Text>
+      <Element>
+        <Text>sed do eiusmod tempor</Text>
+      </Element>
+    </Element>
+
+  </Component>`
+
+  const expected = {
+    children: [
+      {
+        type: 'Component',
+        children: [
+          {
+            type: 'Element',
+            w: '160',
+            h: '160',
+            x: '40',
+            y: '40',
+            color: '#fb923c',
+            content: 'Lorem ipsum',
+          },
+          {
+            type: 'Element',
+            content: 'dolor sit amet',
+          },
+          {
+            type: 'Element',
+            children: [
+              {
+                type: 'Text',
+                content: 'consectetur adipiscing elit',
+              },
+              {
+                type: 'Element',
+                children: [
+                  {
+                    type: 'Text',
+                    content: 'sed do eiusmod tempor',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  }
+
+  const actual = parser(template)
+
+  assert.deepEqual(actual, expected, 'Parser should return object representation of template')
+  assert.end()
+})
+
+test('Parse template with attribute name starts with @ character', (assert) => {
+  const template = `
+  <Component>
+    <Element w="160" h="160" x="40" y="40" color="#fb923c" @loaded="@loaded" />
+  </Component>`
+
+  const expected = {
+    children: [
+      {
+        type: 'Component',
+        children: [
+          {
+            type: 'Element',
+            w: '160',
+            h: '160',
+            x: '40',
+            y: '40',
+            color: '#fb923c',
+            '@loaded': '@loaded',
+          },
+        ],
+      },
+    ],
+  }
+
+  const actual = parser(template)
+
+  assert.deepEqual(actual, expected, 'Parser should return object representation of template')
+  assert.end()
+})
+
+test('Parse template with attribute values with delimited either single or double quotes', (assert) => {
+  const template = `
+  <Component>
+    <Element
+      w='160' h="160" x='40' y='40' color="#fb923c"
+      :effects='[$shader(
+        "radius",
+        {radius: 44}
+      )]'
+    />
+    <Element
+      w='120' h="120"
+      x='100' y="100"
+      :effects="[
+        $shader(
+          'radius',
+          {
+            radius: 45
+          }
+        )
+      ]"
+    />
+  </Component>`
+
+  const expected = {
+    children: [
+      {
+        type: 'Component',
+        children: [
+          {
+            type: 'Element',
+            w: '160',
+            h: '160',
+            x: '40',
+            y: '40',
+            color: '#fb923c',
+            ':effects': '[$shader( "radius", {radius: 44} )]',
+          },
+          {
+            type: 'Element',
+            w: '120',
+            h: '120',
+            x: '100',
+            y: '100',
+            ':effects': "[ $shader( 'radius', { radius: 45 } ) ]",
+          },
+        ],
+      },
+    ],
+  }
+
+  const actual = parser(template)
+
+  assert.deepEqual(actual, expected, 'Parser should return object representation of template')
+  assert.end()
+})