@lightningjs/blits 0.8.0 → 0.8.1

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

@@ -17,6 +17,10 @@
 
 import test from 'tape'
 import parser from './parser.js'
+import symbols from '../symbols.js'
+const { componentType } = symbols
+import { initLog } from '../log.js'
+initLog()
 
 test('Type', (assert) => {
   const expected = 'function'
@@ -43,7 +47,7 @@ test('Parse simple single tag', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
       },
     ],
   }
@@ -59,10 +63,10 @@ test('Parse simple tag and simple nested tag', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
           },
         ],
       },
@@ -80,7 +84,7 @@ test('Parse simple single tag with static attributes', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '10',
         y: '20',
       },
@@ -98,12 +102,12 @@ test('Parse tag with attributes and nested tag with attributes', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '10',
         y: '20',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
           },
@@ -127,18 +131,18 @@ test('Parse tag with attributes and 2 nested tags with attributes', (assert) =>
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '10',
         y: '20',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
             x: '0',
           },
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
             x: '50',
@@ -166,28 +170,28 @@ test('Parse tag with attributes and deep nested tag with attributes', (assert) =
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '10',
         y: '20',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
             x: '0',
           },
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
             x: '50',
             children: [
               {
-                type: 'Button',
+                [componentType]: 'Button',
                 label: 'Hello',
               },
               {
-                type: 'Button',
+                [componentType]: 'Button',
                 label: 'World',
               },
             ],
@@ -208,7 +212,7 @@ test('Parse simple single tag with dynamic attributes', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '$x',
         y: '$y',
       },
@@ -226,7 +230,7 @@ test('Parse tag with attributes and reactive attributes', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '10',
         y: '20',
         ':w': 'foo',
@@ -247,7 +251,7 @@ test("Parse simple single tag where one of the attributes has a dash in it's nam
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         'my-Attribute': 'this',
         x: '10',
         y: '20',
@@ -266,10 +270,10 @@ test('Parse nested self closing tag', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         children: [
           {
-            type: 'Input',
+            [componentType]: 'Input',
           },
         ],
       },
@@ -287,16 +291,16 @@ test('Parse multiple nested self closing tags', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         children: [
           {
-            type: 'Input',
+            [componentType]: 'Input',
           },
           {
-            type: 'Input',
+            [componentType]: 'Input',
           },
           {
-            type: 'Input',
+            [componentType]: 'Input',
           },
         ],
       },
@@ -314,7 +318,7 @@ test('Parse attributes which values have spaces in it', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         attribute: 'I have spaces',
       },
     ],
@@ -338,7 +342,7 @@ test('Parse attributes with an expression in it', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         ':attribute1': '$foo * 2',
         ':attribute2': "$ok ? 'Yes' : 'No'",
         ':attribute3': "$text.split('').reverse().join('')",
@@ -366,18 +370,18 @@ test('Parse template with commented tag (and skip it)', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '10',
         y: '20',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
             x: '50',
             children: [
               {
-                type: 'Button',
+                [componentType]: 'Button',
                 label: 'Hello',
               },
             ],
@@ -405,12 +409,12 @@ test('Parse template with comment spanned across multiple tags (and skip it)', (
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '10',
         y: '20',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
             x: '50',
@@ -440,18 +444,18 @@ test('Parse template with enclosing comment (and skip it)', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         x: '10',
         y: '20',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
             x: '0',
           },
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '100',
             h: '300',
             x: '50',
@@ -475,10 +479,10 @@ test('Parse template with for loop', (assert) => {
   const expected = {
     children: [
       {
-        type: 'List',
+        [componentType]: 'List',
         children: [
           {
-            type: 'ListItem',
+            [componentType]: 'ListItem',
             ':for': 'item in $items',
           },
         ],
@@ -501,15 +505,15 @@ test('Parse template with a conditional (if-statement)', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         ':if': '$loggedIn === true',
         children: [
           {
-            type: 'Text',
+            [componentType]: 'Text',
             value: 'Welcome',
           },
           {
-            type: 'Avatar',
+            [componentType]: 'Avatar',
             ':user': '$user',
           },
         ],
@@ -533,20 +537,20 @@ test('Parse template with a visibility toggle (show-statement)', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Poster',
+        [componentType]: 'Poster',
         w: '200',
         h: '500',
         children: [
           {
-            type: 'Label',
+            [componentType]: 'Label',
             ':text': '$text',
           },
           {
-            type: 'Image',
+            [componentType]: 'Image',
             src: '$image',
           },
           {
-            type: 'Star',
+            [componentType]: 'Star',
             ':show': '$favorited === true',
           },
         ],
@@ -570,15 +574,15 @@ test('Parse template with a nameless tag', (assert) => {
   const expected = {
     children: [
       {
-        type: null,
+        [componentType]: null,
         children: [
           {
-            type: 'Component',
+            [componentType]: 'Component',
             x: '50',
             y: '20',
             children: [
               {
-                type: 'Component',
+                [componentType]: 'Component',
                 w: '100',
                 h: '20',
               },
@@ -602,7 +606,7 @@ test('Parse template with a transition argument (single value)', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Element',
+        [componentType]: 'Element',
         x: '{transition: $offset}',
         y: '200',
       },
@@ -622,7 +626,7 @@ test('Parse template with a transition argument (object)', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Element',
+        [componentType]: 'Element',
         ':x': '{transition: {v: $offset, d: 2000}}',
         y: '200',
       },
@@ -642,7 +646,7 @@ test('Parse template with a different modifier', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Element',
+        [componentType]: 'Element',
         x: '{modifier: ok}',
         y: '200',
       },
@@ -662,7 +666,7 @@ test('Parse template with a full transition object (without the transition modif
   const expected = {
     children: [
       {
-        type: 'Element',
+        [componentType]: 'Element',
         ':x': '{transition: {v: $offset, d: 2000, p: 100}}',
         y: '200',
       },
@@ -701,19 +705,19 @@ test('Parse template with attributes with values spread over multiple lines', (a
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '160',
             h: '160',
             x: '40',
             y: '40',
-            color: '#fb923c',
+            color: '0xfb923cff',
             ':effects': "[$shader( 'radius', {radius: 44} )]",
           },
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '120',
             h: '120',
             x: '100',
@@ -740,15 +744,15 @@ test('Parse template with inline text between tags', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '160',
             h: '160',
             x: '40',
             y: '40',
-            color: '#fb923c',
+            color: '0xfb923cff',
             content: 'Lorem ipsum',
           },
         ],
@@ -779,33 +783,33 @@ test('Parse template with multiple inline texts between different tags', (assert
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '160',
             h: '160',
             x: '40',
             y: '40',
-            color: '#fb923c',
+            color: '0xfb923cff',
             content: 'Lorem ipsum',
           },
           {
-            type: 'Element',
+            [componentType]: 'Element',
             content: 'dolor sit amet',
           },
           {
-            type: 'Element',
+            [componentType]: 'Element',
             children: [
               {
-                type: 'Text',
+                [componentType]: 'Text',
                 content: 'consectetur adipiscing elit',
               },
               {
-                type: 'Element',
+                [componentType]: 'Element',
                 children: [
                   {
-                    type: 'Text',
+                    [componentType]: 'Text',
                     content: 'sed do eiusmod tempor',
                   },
                 ],
@@ -832,15 +836,15 @@ test('Parse template with attribute name starts with @ character', (assert) => {
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '160',
             h: '160',
             x: '40',
             y: '40',
-            color: '#fb923c',
+            color: '0xfb923cff',
             '@loaded': '@loaded',
           },
         ],
@@ -881,19 +885,19 @@ test('Parse template with attribute values with delimited either single or doubl
   const expected = {
     children: [
       {
-        type: 'Component',
+        [componentType]: 'Component',
         children: [
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '160',
             h: '160',
             x: '40',
             y: '40',
-            color: '#fb923c',
+            color: '0xfb923cff',
             ':effects': '[$shader( "radius", {radius: 44} )]',
           },
           {
-            type: 'Element',
+            [componentType]: 'Element',
             w: '120',
             h: '120',
             x: '100',
@@ -996,6 +1000,24 @@ test('Parse template with multiple unclosed tags and parsing should fail', (asse
   assert.end()
 })
 
+test('Parse template with an unclosed tag and parsing should fail', (assert) => {
+  const template = `
+  <Component>
+  `
+
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateStructureError:UnclosedTags')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateStructureError', 'Parser should throw TemplateStructureError')
+    assert.ok(
+      error.message.startsWith('UnclosedTags'),
+      'Parser should throw TemplateStructureError:UnclosedTags'
+    )
+  }
+  assert.end()
+})
+
 test('Parse template with an invalid closing tag and parsing should fail', (assert) => {
   const template = `
   <Component>
@@ -1081,3 +1103,288 @@ test('Parse template with a closing tag that has attributes and parsing should f
 
   assert.end()
 })
+
+test('Parse template with an invalid tag and parsing should fail', (assert) => {
+  const template = `
+  <@Element x="200" />
+  `
+
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateParseError:InvalidTag')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateParseError', 'Parser should throw TemplateParseError')
+    assert.ok(
+      error.message.startsWith('InvalidTag'),
+      'Parser should throw TemplateParseError:InvalidTag'
+    )
+  }
+
+  assert.end()
+})
+
+test('Parse template with an invalid attribute value and parsing should fail', (assert) => {
+  const template = `
+  <Element x=" />
+  `
+
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateParseError:MissingOrInvalidAttributeValue')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateParseError', 'Parser should throw TemplateParseError')
+    assert.ok(
+      error.message.startsWith('MissingOrInvalidAttributeValue'),
+      'Parser should throw TemplateParseError:MissingOrInvalidAttributeValue'
+    )
+  }
+
+  assert.end()
+})
+
+test('Parse template with an invalid attribute name and parsing should fail', (assert) => {
+  const template = `
+  <Element invalid^attribute="hello" />
+  `
+
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateParseError:InvalidAttribute')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateParseError', 'Parser should throw TemplateParseError')
+    assert.ok(
+      error.message.startsWith('InvalidAttribute'),
+      'Parser should throw TemplateParseError:InvalidAttribute'
+    )
+  }
+
+  assert.end()
+})
+
+test('Parse template with an invalid attribute name by providing parent component and parsing should fail', (assert) => {
+  const template = `
+  <Element invalid^attribute="hello" />
+  `
+
+  try {
+    parser(template, 'Item', {
+      [componentType]: 'Section',
+      parent: {
+        [componentType]: 'List',
+        parent: {
+          [componentType]: 'Menu',
+          parent: {
+            [componentType]: 'Blits.App',
+          },
+        },
+      },
+    })
+    assert.fail('Parser should throw TemplateParseError:InvalidAttribute')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateParseError', 'Parser should throw TemplateParseError')
+    assert.ok(
+      error.message.startsWith('InvalidAttribute'),
+      'Parser should throw TemplateParseError:InvalidAttribute'
+    )
+    assert.ok(
+      error.message.includes('Blits.App/Menu/List/Section/Item'),
+      'Error message should contain the component hierarchy'
+    )
+  }
+
+  assert.end()
+})
+
+test('Parse template with an invalid attribute name by providing parent component without component name and parsing should fail', (assert) => {
+  const template = `
+  <Element invalid^attribute="hello" />
+  `
+
+  try {
+    parser(template, null, {
+      [componentType]: 'Section',
+      parent: {
+        [componentType]: 'List',
+        parent: {
+          [componentType]: 'Menu',
+          parent: {
+            [componentType]: 'Blits.App',
+          },
+        },
+      },
+    })
+    assert.fail('Parser should throw TemplateParseError:InvalidAttribute')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateParseError', 'Parser should throw TemplateParseError')
+    assert.ok(
+      error.message.startsWith('InvalidAttribute'),
+      'Parser should throw TemplateParseError:InvalidAttribute'
+    )
+    assert.ok(
+      error.message.includes('Blits.App/Menu/List/Section/'),
+      'Error message should contain the component hierarchy without the component name'
+    )
+  }
+
+  assert.end()
+})
+
+test('Parse template with an invalid attribute name by providing component file path and parsing should fail', (assert) => {
+  const template = `
+  <Element invalid^attribute="hello" />
+  `
+
+  try {
+    parser(template, 'Item', null, 'src/components/Menu/List/Section/Item.js')
+    assert.fail('Parser should throw TemplateParseError:InvalidAttribute')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateParseError', 'Parser should throw TemplateParseError')
+    assert.ok(
+      error.message.startsWith('InvalidAttribute'),
+      'Parser should throw TemplateParseError:InvalidAttribute'
+    )
+    assert.ok(
+      error.message.includes('src/components/Menu/List/Section/Item.js'),
+      'Error message should contain the component file path'
+    )
+  }
+
+  assert.end()
+})
+
+test('Parse template with color and effects attributes and parsing should convert color values', (assert) => {
+  const template = `
+      <Element :color="$backgroundColor">
+        <Element color="{top: '#44037a', bottom: '#240244'}" />
+        <Element color="#44037a" />
+        <Element color="{top: '#44037a'}" :effects="[$shader('radius', {radius: $radius})]" />
+        <Element :color="$colors.color2" :effects="[$shader('radius', {radius: $radius / 2})]" />
+        <Element color="transparent" :effects="[$shader('radius', {radius: 10}), $shader('border', {width: 20, color: '#60a5fa'})]" />
+        <Element color="#fba" />
+        <Element color="#23dd21" />
+        <Element color="#993322ff" />
+        <Element color="ddd" />
+        <Element color="ddffaa" />
+        <Element color="ddffaa00" />
+        <Element color="#E6E6E6" />
+        <Element data="49b383f" color="#ddfa" />
+        <Element color="rgba(255, 255, 255, 0.5)" />
+        <Element color="hsl(120, 100%, 50%)" />
+        <Element color="hsla(120, 100%, 50%, 0.5)" />
+        <Element color="rgb(135, 206, 235)" />
+        <Element color="rgba(135, 206, 235, -0.5)" />
+        <Element color="rgba(222, 125, 44, 1.3)" />
+        <Element color="0xccccccff" />
+        <Element notColor="#dbbeee" />
+    </Element>
+  `
+
+  const expected = {
+    children: [
+      {
+        ':color': '$backgroundColor',
+        [componentType]: 'Element',
+        children: [
+          {
+            color: "{top: '0x44037aff', bottom: '0x240244ff'}",
+            [componentType]: 'Element',
+          },
+          {
+            color: '0x44037aff',
+            [componentType]: 'Element',
+          },
+          {
+            color: "{top: '0x44037aff'}",
+            ':effects': "[$shader('radius', {radius: $radius})]",
+            [componentType]: 'Element',
+          },
+          {
+            ':color': '$colors.color2',
+            ':effects': "[$shader('radius', {radius: $radius / 2})]",
+            [componentType]: 'Element',
+          },
+          {
+            color: '0x00000000',
+            ':effects':
+              "[$shader('radius', {radius: 10}), $shader('border', {width: 20, color: '0x60a5faff'})]",
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xffbbaaff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0x23dd21ff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0x993322ff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xddddddff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xddffaaff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xddffaa00',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xe6e6e6ff',
+            [componentType]: 'Element',
+          },
+          {
+            data: '49b383f',
+            color: '#ddfa',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xffffff80',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xffffffff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xffffffff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0x87ceebff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0x87ceeb00',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xde7d2cff',
+            [componentType]: 'Element',
+          },
+          {
+            color: '0xccccccff',
+            [componentType]: 'Element',
+          },
+          {
+            notColor: '#dbbeee',
+            [componentType]: 'Element',
+          },
+        ],
+      },
+    ],
+  }
+
+  const actual = parser(template)
+
+  assert.deepEqual(
+    actual,
+    expected,
+    'Parser should return object representation of template with color values converted'
+  )
+  assert.end()
+})