@lightningjs/blits 0.6.4 → 0.6.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+# v0.6.6
+
+_24 jan 2024_
+
+- Added temporary fix for renderer issue [#123](https://github.com/lightning-js/renderer/issues/123)
+- Fixed issue with setting mount, pivot and scale values to zero (0) in object literal with x and y key
+- Added automatic mapping of ref string to each item in a for-loop
+
+# v0.6.5
+
+_16 jan 2024_
+
+- Added `path` to boilerplate vite.config.js for deployments in a sub folder
+- Improved error handling in the template parser, with more contextual error messages
+
 # v0.6.4
 
 _15 jan 2024_

package/boilerplate/index.html

@@ -6,6 +6,6 @@
     </head>
     <body>
         <div id="app"></div>
-        <script type="module" src="/src/index.js"></script>
+        <script type="module" src="src/index.js"></script>
     </body>
 </html>

package/boilerplate/package.json

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

package/boilerplate/src/index.js

@@ -11,8 +11,22 @@ Blits.Launch(App, 'app', {
   debugLevel: 1,
   fontLoader: fontLoader,
   fonts: [
-    {family: 'lato', type: 'msdf', png: '/fonts/Lato-Regular.msdf.png', json: '/fonts/Lato-Regular.msdf.json'},
-    {family: 'raleway', type: 'msdf', png: '/fonts/Raleway-ExtraBold.msdf.png', json: '/fonts/Raleway-ExtraBold.msdf.json'},
-    {family: 'opensans', type: 'web', file: '/fonts/OpenSans-Medium.ttf'}
+    {
+      family: 'lato',
+      type: 'msdf',
+      png: 'fonts/Lato-Regular.msdf.png',
+      json: 'fonts/Lato-Regular.msdf.json',
+    },
+    {
+      family: 'raleway',
+      type: 'msdf',
+      png: 'fonts/Raleway-ExtraBold.msdf.png',
+      json: 'fonts/Raleway-ExtraBold.msdf.json',
+    },
+    {
+      family: 'opensans',
+      type: 'web',
+      file: 'fonts/OpenSans-Medium.ttf',
+    },
   ],
 })

package/boilerplate/vite.config.js

@@ -3,6 +3,7 @@ import blitsVitePlugins from '@lightningjs/blits/vite'
 
 export default defineConfig(({ command, mode, ssrBuild }) => {
   return {
+    base: '/', // Set to your base path if you are deploying to a subdirectory (example: /myApp/)
     plugins: [...blitsVitePlugins],
     resolve: {
       mainFields: ['browser', 'module', 'jsnext:main', 'jsnext'],

package/package.json

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

package/src/application.js

@@ -76,9 +76,7 @@ const Application = (config) => {
     setTimeout(() => Focus.set(this))
   }
 
-  const App = Component('App', config)
-
-  return App
+  return Component('App', config)
 }
 
 export default Application

package/src/component.js

@@ -47,11 +47,11 @@ const required = (name) => {
 }
 
 const Component = (name = required('name'), config = required('config')) => {
-  const setupComponent = (lifecycle) => {
+  const setupComponent = (lifecycle, parentComponent) => {
     // code generation
     if (!config.code) {
       Log.debug(`Generating code for ${name} component`)
-      config.code = codegenerator.call(config, parser(config.template))
+      config.code = codegenerator.call(config, parser(config.template, name, parentComponent))
     }
 
     setupBase(component)
@@ -115,7 +115,7 @@ const Component = (name = required('name'), config = required('config')) => {
     this.lifecycle = createLifecycle(this)
 
     if (!component.setup) {
-      setupComponent(this.lifecycle)
+      setupComponent(this.lifecycle, parentComponent)
     }
 
     this.parent = parentComponent

package/src/element.js

@@ -51,6 +51,8 @@ const unpackTransition = (obj) => {
   return obj
 }
 
+let firstNode = false
+
 const Props = {
   set parent(v) {
     this._props.parent = v === 'root' ? renderer.root : v.node
@@ -126,11 +128,11 @@ const Props = {
   },
   set mount(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) {
+      if ('x' in v) {
         this._props.mountX = v.x
         this._set.add('mountX')
       }
-      if (v.y) {
+      if ('y' in v) {
         this._props.mountY = v.y
         this._set.add('mountY')
       }
@@ -142,11 +144,11 @@ const Props = {
   },
   set pivot(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) {
+      if ('x' in v) {
         this._set.add('pivotX')
         this._props.pivotX = v.x
       }
-      if (v.y) {
+      if ('y' in v) {
         this._set.add('pivotY')
         this._props.pivotY = v.y
       }
@@ -158,8 +160,8 @@ const Props = {
   },
   set scale(v) {
     if (typeof v === 'object' || (isObjectString(v) && (v = parseToObject(v)))) {
-      if (v.x) this._props.scaleX = v.x
-      if (v.y) this._props.scaleY = v.y
+      if ('x' in v) this._props.scaleX = v.x
+      if ('y' in v) this._props.scaleY = v.y
     } else {
       this._props.scale = v
     }
@@ -239,6 +241,13 @@ const Element = {
         this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
     }
 
+    // temporary workaround for renderer issue https://github.com/lightning-js/renderer/issues/123
+    if (!firstNode) {
+      this.props._props.src =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII='
+      firstNode = true
+    }
+
     this.node = props.__textnode
       ? renderer.createTextNode(this.props._props)
       : renderer.createNode(this.props._props)
@@ -266,7 +275,6 @@ const Element = {
         return this.animate(p, v, value.transition)
       } else {
         this.node[p] = v
-        console.log('set it', this.node[p], v)
       }
     }
   },

package/src/lib/codegenerator/generator.js

@@ -56,7 +56,7 @@ const generateElementCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = this.element({componentId: component[Symbol.for('id')], parent: parent || 'root'}, component)
+      ${elm} = this.element({parent: parent || 'root'}, component)
     }
     const elementConfig${counter} = {}
   `)
@@ -221,9 +221,19 @@ const generateForLoopCode = function (templateObject, parent) {
       const scope = Object.assign(component, {
         key: Math.random(),
         ${index}: __index,
-        ${item}: collection[__index]
-      })
+        ${item}: collection[__index],
+    `)
+
+  if ('ref' in templateObject && templateObject.ref.indexOf('$') === -1) {
+    // automatically map the ref for each item in the loop based on the given ref key
+    ctx.renderCode.push(`
+      __ref: '${templateObject.ref}' + __index
     `)
+    templateObject.ref = '$__ref'
+  }
+  ctx.renderCode.push(`
+      })
+  `)
 
   if ('key' in templateObject) {
     ctx.renderCode.push(`

package/src/lib/codegenerator/generator.test_.js

@@ -107,7 +107,7 @@ test('Generate render and effect code for a template with a single simple elemen
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -149,7 +149,7 @@ test('Generate code for a template with a simple element and a simple nested ele
   function anonymous(parent,component,context) {
     const elms = []
 
-    elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+    elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
     const elementConfig1 = {}
 
     elementConfig1['type'] = "Component"
@@ -158,7 +158,7 @@ test('Generate code for a template with a simple element and a simple nested ele
 
     parent = elms[1]
 
-    elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+    elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
     const elementConfig2 = {}
 
     elementConfig2['type'] = "Element"
@@ -198,7 +198,7 @@ test('Generate code for a template with a single element with attributes', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -246,7 +246,7 @@ test('Generate code for a template with attributes and a nested element with att
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -257,7 +257,7 @@ test('Generate code for a template with attributes and a nested element with att
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -313,7 +313,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -324,7 +324,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -336,7 +336,7 @@ test('Generate code for a template with attributes and 2 nested elements with at
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Element"
@@ -403,7 +403,7 @@ test('Generate code for a template with attributes and deep nested elements with
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -414,7 +414,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[1]
 
-      elms[2] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[2] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig2 = {}
 
       elementConfig2['type'] = "Element"
@@ -426,7 +426,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Element"
@@ -438,7 +438,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[3]
 
-      elms[4] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[4] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig4 = {}
 
       elementConfig4['type'] = "Element"
@@ -448,7 +448,7 @@ test('Generate code for a template with attributes and deep nested elements with
 
       parent = elms[3]
 
-      elms[5] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[5] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig5 = {}
 
       elementConfig5['type'] = "Element"
@@ -492,7 +492,7 @@ test('Generate code for a template with simple dynamic attributes', (assert) =>
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -559,7 +559,7 @@ test('Generate code for a template with an attribute with a dash', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -604,7 +604,7 @@ test('Generate code for a template with dynamic attributes with code to be evalu
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -690,7 +690,7 @@ test('Generate code for a template with custom components', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -746,7 +746,7 @@ test('Generate code for a template with an unregistered custom component', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -757,7 +757,7 @@ test('Generate code for a template with an unregistered custom component', (asse
 
       parent = elms[1]
 
-      elms[3] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[3] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig3 = {}
 
       elementConfig3['type'] = "Poster2"
@@ -813,7 +813,7 @@ test('Generate code for a template with custom components with arguments', (asse
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -876,7 +876,7 @@ test('Generate code for a template with custom components with reactive props',
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"
@@ -946,7 +946,7 @@ test('Generate code for a template with a transition attributes', (assert) => {
   function anonymous(parent,component,context) {
       const elms = []
 
-      elms[1] = this.element({componentId: component[Symbol.for('id')], parentId: parent && parent.nodeId || 'root'})
+      elms[1] = this.element(parentId: parent && parent.nodeId || 'root'})
       const elementConfig1 = {}
 
       elementConfig1['type'] = "Component"

package/src/lib/symbols.js

@@ -1,5 +1,6 @@
 export default {
   currentView: Symbol('currentView'),
+  cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),
   destroy: Symbol('destroy'),
   index: Symbol('index'),
@@ -31,8 +32,6 @@ export default {
   children: Symbol.for('children'),
   // Symbol 'components' utilized within generated code
   components: Symbol.for('components'),
-  // Symbol 'id' utilized within generated code
-  id: Symbol.for('id'),
   // Symbol 'isSlot' utilized within generated code
   isSlot: Symbol.for('isSlot'),
   // Symbol 'props' utilized within generated code

package/src/lib/templateparser/parser.js

@@ -17,16 +17,9 @@
 
 import symbols from '../symbols.js'
 
-class TemplateParseError extends Error {
-  constructor(message, name, context) {
-    super(`TemplateParseError: ${message}`)
-    this.name = name
-    this.context = context
-  }
-}
-
-export default (template = '') => {
+export default (template = '', componentName, parentComponent, filePath = null) => {
   let cursor = 0
+  let prevCursor = 0
   let tags = []
   let currentTag = null
   let currentLevel = 0
@@ -45,13 +38,10 @@ export default (template = '') => {
       parseLoop(parseEmptyTagStart)
       return format(tags)
     } catch (error) {
-      if (error instanceof TemplateParseError) {
-        console.error(`${error.message} | ${error.name}`)
-      } else {
-        console.error(error)
+      if (error.name == 'TemplateParseError' || error.name == 'TemplateStructureError') {
+        error.message = `${error.message}\n${error.context}`
       }
-      // return errors gracefully
-      return null
+      throw error
     }
   }
 
@@ -63,9 +53,9 @@ export default (template = '') => {
   }
 
   // utils
-  const clean = (template) => {
+  const clean = (templateText) => {
     // remove all unnecessary new lines and comments
-    return template
+    return templateText
       .replace(/<!--.*?-->/gms, '') // remove comments
       .replace(/\r?\n\s*\r\n/gm, ' ') // remove empty lines
       .replace(/\r?\n\s*(\S)/gm, ' $1') // remove line endings & spacing
@@ -75,7 +65,10 @@ export default (template = '') => {
 
   const moveCursorOnMatch = (regex) => {
     const match = template.slice(cursor).match(regex)
-    if (match) cursor += match[0].length
+    if (match) {
+      prevCursor = cursor
+      cursor += match[0].length
+    }
     return match
   }
 
@@ -83,7 +76,12 @@ export default (template = '') => {
   const parseEmptyTagStart = () => {
     const match = moveCursorOnMatch(emptyTagStartRegex)
     if (match) {
-      tags.push({ type: null, [symbols.type]: 'opening', [symbols.level]: currentLevel })
+      tags.push({
+        type: null,
+        [symbols.type]: 'opening',
+        [symbols.level]: currentLevel,
+        [symbols.cursorTagStart]: prevCursor,
+      })
       currentLevel++
       parseLoop(parseEmptyTagStart)
     } else {
@@ -95,7 +93,11 @@ export default (template = '') => {
     const match = moveCursorOnMatch(emptyTagEndRegex)
     if (match) {
       currentLevel--
-      tags.push({ type: null, [symbols.type]: 'closing', [symbols.level]: currentLevel })
+      tags.push({
+        type: null,
+        [symbols.type]: 'closing',
+        [symbols.level]: currentLevel,
+      })
       parseLoop(parseEmptyTagStart)
     } else {
       parseLoop(parseTag)
@@ -105,16 +107,22 @@ export default (template = '') => {
   const parseTag = () => {
     const match = moveCursorOnMatch(tagStartRegex)
     if (match) {
+      currentTag = {
+        type: match[1],
+        [symbols.level]: currentLevel,
+        [symbols.cursorTagStart]: prevCursor,
+      }
       if (match[0].startsWith('</')) {
         currentLevel--
-        currentTag = { type: match[1], [symbols.type]: 'closing', [symbols.level]: currentLevel }
+        currentTag[symbols.type] = 'closing'
+        currentTag[symbols.level] = currentLevel
       } else {
-        currentTag = { type: match[1], [symbols.type]: 'opening', [symbols.level]: currentLevel }
+        currentTag[symbols.type] = 'opening'
         currentLevel++
       }
       parseLoop(parseTagEnd)
     } else {
-      throw new TemplateParseError('InvalidTag', template.slice(cursor))
+      throw TemplateParseError('InvalidTag')
     }
   }
 
@@ -123,8 +131,7 @@ export default (template = '') => {
     if (match) {
       if (match[1] === '/>') {
         if (currentTag[symbols.type] === 'closing') {
-          // 10 is arbitrary, just to show some context by moving the cursor back a bit
-          throw new TemplateParseError('InvalidClosingTag', template.slice(cursor - 10))
+          throw TemplateParseError('InvalidClosingTag')
         }
         currentTag[symbols.type] = 'self-closing'
         currentLevel-- // because it was parsed as opening tag before
@@ -147,9 +154,14 @@ export default (template = '') => {
     }
   }
 
+  //fixme: closing tags cannot have attributes
   const parseAttributes = () => {
     const attrNameMatch = moveCursorOnMatch(attrNameRegex)
     if (attrNameMatch) {
+      if (currentTag[symbols.type] === 'closing') {
+        throw TemplateParseError('AttributesInClosingTag')
+      }
+
       const delimiter = attrNameMatch[2]
       const attrValueRegex = new RegExp(`^(.*?)${delimiter}\\s*`)
       const attrValueMatch = moveCursorOnMatch(attrValueRegex)
@@ -160,10 +172,10 @@ export default (template = '') => {
         currentTag[attr.name] = attr.value
         parseLoop(parseTagEnd)
       } else {
-        throw new TemplateParseError('MissingOrInvalidAttributeValue', template.slice(cursor))
+        throw TemplateParseError('MissingOrInvalidAttributeValue')
       }
     } else {
-      throw new TemplateParseError('InvalidAttribute', template.slice(cursor))
+      throw TemplateParseError('InvalidAttribute')
     }
   }
 
@@ -177,10 +189,8 @@ export default (template = '') => {
     return { name, value }
   }
 
-  // formating and validation
-
   /*
-  validation rules:
+  Formatting & validation rules:
     #1: Every opening tag must have a corresponding closing tag at the same level. If a closing tag is encountered without
         a preceding opening tag at the same level, or if an opening tag is not followed by a corresponding closing tag at
         the same level, an error should be thrown.
@@ -200,7 +210,7 @@ export default (template = '') => {
       // Rule #1
       if (element[symbols.level] === 0 && element[symbols.type] !== 'closing') {
         if (rootElementDefined) {
-          throw new TemplateParseError('MultipleTopLevelTags', formatErrorContext(element))
+          throw TemplateStructureError('MultipleTopLevelTags', element)
         }
         rootElementDefined = true
       }
@@ -210,6 +220,7 @@ export default (template = '') => {
         stack.push({
           [symbols.level]: element[symbols.level],
           [symbols.type]: element[symbols.type],
+          [symbols.cursorTagStart]: element[symbols.cursorTagStart],
           type: element.type,
           parent: currentParent, // helps getting the previous parent when closing tag is encountered
         })
@@ -223,7 +234,7 @@ export default (template = '') => {
         }
 
         if (isStackEmpty || isLevelMismatch || isTagMismatch) {
-          throw new TemplateParseError('MismatchedClosingTag', formatErrorContext(element))
+          throw TemplateStructureError('MismatchedClosingTag', element)
         }
 
         // when we remove the closing element from the stack, we should set
@@ -235,6 +246,7 @@ export default (template = '') => {
       const newItem = { ...element }
       delete newItem[symbols.type]
       delete newItem[symbols.level]
+      delete newItem[symbols.cursorTagStart]
 
       // if it is an opening tag, add children[] to it and update current parent
       if (element[symbols.type] === 'opening') {
@@ -251,21 +263,78 @@ export default (template = '') => {
 
     // Check if all tags are closed (so stack should be empty)[Rule #1]
     if (stack.length > 0) {
-      const unclosedTags = stack
-        .map((item) => {
-          return formatErrorContext(item)
-        })
-        .join(', ')
-      throw new TemplateParseError('UnclosedTags', unclosedTags)
+      throw TemplateStructureError('UnclosedTags', stack)
+    }
+
+    return output
+  }
+
+  // error reporting
+  const contextPaddingBefore = 10 // number of characters to show before the error location
+  const contextPaddingAfter = 50 // number of characters to show after the error location
+
+  const TemplateParseError = (message, context) => {
+    const location = getErrorLocation()
+    message = `${message} in ${location}`
+
+    const error = new Error(message)
+    error.name = 'TemplateParseError'
+
+    // generate context if the error is related to parsing
+    if (!context) {
+      const start = Math.max(0, prevCursor - contextPaddingBefore)
+      const end = Math.min(template.length, cursor + contextPaddingAfter)
+      const contextText = template.slice(start, end)
+
+      // add ^ caret to show where the error is
+      const caretPosition = cursor - start
+      error.context = insertContextCaret(caretPosition, contextText)
+    } else {
+      error.context = context
     }
+    return error
+  }
 
-    function formatErrorContext(element) {
-      return `${element.type || 'empty-tag'}[${element[symbols.type]}] at level ${
-        element[symbols.level]
-      }`
+  const TemplateStructureError = (message, context) => {
+    const location = getErrorLocation()
+    message = `${message} in ${location}`
+
+    const error = new Error(message)
+    error.name = 'TemplateStructureError'
+
+    // check if context is an array
+    if (Array.isArray(context)) {
+      error.context = context.map((tag) => generateContext(tag)).join('\n')
+    } else {
+      error.context = generateContext(context)
     }
 
-    return output
+    function generateContext(element) {
+      const start = Math.max(0, element[symbols.cursorTagStart] - contextPaddingBefore)
+      const contextText = template.slice(start, start + contextPaddingAfter)
+      // add ^ caret to show where the error is
+      return insertContextCaret(contextPaddingBefore, contextText)
+    }
+    return error
+  }
+
+  const insertContextCaret = (position, contextText) => {
+    const caret = ' '.repeat(position) + '^'
+    return `\n${contextText}\n${caret}\n`
+  }
+
+  const getErrorLocation = () => {
+    if (parentComponent) {
+      let hierarchy = componentName || ''
+      let currentParent = parentComponent
+
+      while (currentParent) {
+        hierarchy = `${currentParent.type}/${hierarchy}`
+        currentParent = currentParent.parent
+      }
+      return hierarchy
+    }
+    return filePath ? filePath : 'Blits.Application'
   }
 
   return parse()

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

@@ -594,43 +594,6 @@ 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 transition argument (single value)', (assert) => {
   const template = `
     <Element x.transition="$offset" y="200">
@@ -974,8 +937,16 @@ test('Parse template with multiple top level elements and parsing should fail',
     />
   </Component>`
 
-  const actual = parser(template)
-  assert.equal(actual, null, 'Parser should throw an error')
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateStructureError:MultipleTopLevelTags')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateStructureError', 'Parser should throw TemplateStructureError')
+    assert.ok(
+      error.message.startsWith('MultipleTopLevelTags'),
+      'Parser should throw TemplateStructureError:MultipleTopLevelTags'
+    )
+  }
 
   assert.end()
 })
@@ -987,8 +958,16 @@ test('Parse template with unclosed tag and parsing should fail', (assert) => {
   </Component>
   `
 
-  const actual = parser(template)
-  assert.equal(actual, null, 'Parser should throw an error')
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateStructureError:MismatchedClosingTag')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateStructureError', 'Parser should throw TemplateStructureError')
+    assert.ok(
+      error.message.startsWith('MismatchedClosingTag'),
+      'Parser should throw TemplateStructureError:MismatchedClosingTag'
+    )
+  }
   assert.end()
 })
 
@@ -1004,8 +983,16 @@ test('Parse template with multiple unclosed tags and parsing should fail', (asse
   </Component>
   `
 
-  const actual = parser(template)
-  assert.equal(actual, null, 'Parser should throw an error')
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateStructureError:MismatchedClosingTag')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateStructureError', 'Parser should throw TemplateStructureError')
+    assert.ok(
+      error.message.startsWith('MismatchedClosingTag'),
+      'Parser should throw TemplateStructureError:MismatchedClosingTag'
+    )
+  }
   assert.end()
 })
 
@@ -1017,8 +1004,16 @@ test('Parse template with an invalid closing tag and parsing should fail', (asse
   </Component>
   `
 
-  const actual = parser(template)
-  assert.equal(actual, null, 'Parser should throw an error')
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateParseError:InvalidClosingTag')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateParseError', 'Parser should throw TemplateParseError')
+    assert.ok(
+      error.message.startsWith('InvalidClosingTag'),
+      'Parser should throw TemplateParseError:InvalidClosingTag'
+    )
+  }
 
   assert.end()
 })
@@ -1029,8 +1024,17 @@ test('Parse template with multiple self-closing tags at the top level and parsin
   <Element/>
   `
 
-  const actual = parser(template)
-  assert.equal(actual, null, 'Parser should throw an error')
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateStructureError:MultipleTopLevelTags')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateStructureError', 'Parser should throw TemplateStructureError')
+    assert.ok(
+      error.message.startsWith('MultipleTopLevelTags'),
+      'Parser should throw TemplateStructureError:MultipleTopLevelTags'
+    )
+  }
+
   assert.end()
 })
 
@@ -1042,7 +1046,38 @@ test('Parse template with a closing tag at the beginning and parsing should fail
   </Component>
   `
 
-  const actual = parser(template)
-  assert.equal(actual, null, 'Parser should throw an error')
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateStructureError:MismatchedClosingTag')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateStructureError', 'Parser should throw TemplateStructureError')
+    assert.ok(
+      error.message.startsWith('MismatchedClosingTag'),
+      'Parser should throw TemplateStructureError:MismatchedClosingTag'
+    )
+  }
+
+  assert.end()
+})
+
+test('Parse template with a closing tag that has attributes and parsing should fail', (assert) => {
+  const template = `
+  <Component>
+    <Text>Lorem ipsum dolor sit amet</Text>
+    <Element></Element x="200">
+  </Component>
+  `
+
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateParseError:AttributesInClosingTag')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateParseError', 'Parser should throw TemplateParseError')
+    assert.ok(
+      error.message.startsWith('AttributesInClosingTag'),
+      'Parser should throw TemplateParseError:AttributesInClosingTag'
+    )
+  }
+
   assert.end()
 })

package/vite/preCompiler.js

@@ -1,5 +1,6 @@
 import parser from '../src/lib/templateparser/parser.js'
 import generator from '../src/lib/codegenerator/generator.js'
+import path from 'path'
 
 export default function () {
   let config
@@ -8,7 +9,7 @@ export default function () {
     configResolved(resolvedConfig) {
       config = resolvedConfig
     },
-    transform(source) {
+    transform(source, filePath) {
       if (config.blits && config.blits.precompile === false) return source
       if (source.indexOf('Blits.Component(') > -1 || source.indexOf('Blits.Application(') > -1) {
         // get the start of the template key in de component configuration object
@@ -27,7 +28,12 @@ export default function () {
           templateStartIndex + templateContentResult.index + templateContentResult[0].length
 
         // Parse the template
-        const parsed = parser(templateContentResult[1])
+        let resourceName = 'Blits.Application'
+        if (source.indexOf('Blits.Component(') > -1) {
+          resourceName = source.match(/Blits\.Component\(['"](.*)['"]\s*,/)[1]
+        }
+        const componentPath = path.relative(process.cwd(), filePath)
+        const parsed = parser(templateContentResult[1], resourceName, null, componentPath)
 
         // Generate the code
         const code = generator.call({ components: {} }, parsed)