From 696198de4420606f67aefaa65a597b75f8248c6e Mon Sep 17 00:00:00 2001 From: sandeep-vedam Date: Wed, 30 Oct 2024 18:46:25 +0530 Subject: [PATCH 1/5] Fixed code generator test failures --- src/lib/codegenerator/generator.test.js | 1193 +++++++++++------------ 1 file changed, 588 insertions(+), 605 deletions(-) diff --git a/src/lib/codegenerator/generator.test.js b/src/lib/codegenerator/generator.test.js index 3cb48b81..8d2c5127 100644 --- a/src/lib/codegenerator/generator.test.js +++ b/src/lib/codegenerator/generator.test.js @@ -714,7 +714,6 @@ test('Generate code for a template with attribute (object)', (assert) => { ` const actual = generator.call(scope, templateObject) - console.log(actual.render.toString()) assert.equal( normalize(actual.render.toString()), normalize(expectedRender), @@ -884,82 +883,95 @@ test('Generate code for a template with custom components', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw) { - const elms = [] - let componentType - const rootComponent = component - const elementConfig0 = {} + const elms = [] + let componentType + const rootComponent = component + const elementConfig0 = {} - elms[0] = this.element({ parent: parent || 'root' }, component) - elms[0].populate(elementConfig0) + elms[0] = this.element({ parent: parent || 'root' }, component) + elms[0].populate(elementConfig0) - const cmp1 = (context.components && context.components['Poster']) || components['Poster'] - parent = elms[0] - const elementConfig1 = {} + const cmp1 = (context.components && context.components['Poster']) || components['Poster'] + parent = elms[0] + const elementConfig1 = {} - elms[1] = this.element({ parent: parent || 'root' }, component) - if(typeof cmp1 !== 'undefined') { - for(let key in cmp1.config.props) { - delete elementConfig1[cmp1.config.props[key]] + elms[1] = this.element({ parent: parent || 'root' }, component) + const skip1 = [] + + if (typeof cmp1 !== 'undefined') { + for (let key in cmp1.config.props) { + delete elementConfig1[cmp1.config.props[key]] + skip1.push(cmp1.config.props[key]) } - } - elms[1].populate(elementConfig1) - parent = elms[1] - const props2 = {} - componentType = props2['is'] || 'Poster' - let component2 - - if (typeof componentType === 'string') { - component2 = context.components && context.components[componentType] || components[componentType] - if (!component2) { - throw new Error('Component "Poster" not found') - } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component2 = componentType - } - - elms[2] = component2.call(null, { props: props2 }, elms[1], component) - if(elms[2][Symbol.for('slots')][0]) { + } + + elms[1].populate(elementConfig1) + parent = elms[1] + + const props2 = {} + componentType = props2['is'] || 'Poster' + let component2 + + if (typeof componentType === 'string') { + component2 = context.components && context.components[componentType] || components[componentType] + if (!component2) { + throw new Error('Component "Poster" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component2 = componentType + } + + elms[2] = component2.call(null, { props: props2 }, elms[1], component) + + if (elms[2][Symbol.for('slots')][0]) { parent = elms[2][Symbol.for('slots')][0] component = elms[2] - } else { + } else { parent = elms[2][Symbol.for('children')][0] - } + } - const cmp3 = (context.components && context.components['Poster']) || components['Poster'] - parent = elms[0] - const elementConfig3 = {} + const cmp3 = (context.components && context.components['Poster']) || components['Poster'] + parent = elms[0] + const elementConfig3 = {} - elms[3] = this.element({ parent: parent || 'root' }, component) - if(typeof cmp3 !== 'undefined') { - for(let key in cmp3.config.props) { - delete elementConfig3[cmp3.config.props[key]] + elms[3] = this.element({ parent: parent || 'root' }, component) + const skip3 = [] + + if (typeof cmp3 !== 'undefined') { + for (let key in cmp3.config.props) { + delete elementConfig3[cmp3.config.props[key]] + skip3.push(cmp3.config.props[key]) } - } - elms[3].populate(elementConfig3) - parent = elms[3] - const props4 = {} - componentType = props4['is'] || 'Poster' - let component4 - if (typeof componentType === 'string') { - component4 = context.components && context.components[componentType] || components[componentType] - if (!component4) { - throw new Error('Component "Poster" not found') - } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component4 = componentType + } + + elms[3].populate(elementConfig3) + parent = elms[3] + + const props4 = {} + componentType = props4['is'] || 'Poster' + let component4 + + if (typeof componentType === 'string') { + component4 = context.components && context.components[componentType] || components[componentType] + if (!component4) { + throw new Error('Component "Poster" not found') } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component4 = componentType + } - elms[4] = component4.call(null, { props: props4 }, elms[3], component) + elms[4] = component4.call(null, { props: props4 }, elms[3], component) - if(elms[4][Symbol.for('slots')][0]) { + if (elms[4][Symbol.for('slots')][0]) { parent = elms[4][Symbol.for('slots')][0] component = elms[4] - } else { + } else { parent = elms[4][Symbol.for('children')][0] - } + } + + return elms +} - return elms - } ` const actual = generator.call(scope, templateObject) @@ -1002,85 +1014,75 @@ test('Generate code for a template with an unregistered custom component', (asse const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw) { - const elms = [] - let componentType - const rootComponent = component - const elementConfig0 = {} - - elms[0] = this.element({ parent: parent || 'root' }, component) - elms[0].populate(elementConfig0) - - const cmp1 = (context.components && context.components['Poster']) || components['Poster'] - parent = elms[0] - const elementConfig1 = {} - - elms[1] = this.element({ parent: parent || 'root' }, component) - if(typeof cmp1 !== 'undefined') { - for(let key in cmp1.config.props) { - delete elementConfig1[cmp1.config.props[key]] + const elms = [] + let componentType + const rootComponent = component + const elementConfig0 = {} + elms[0] = this.element({ parent: parent || 'root' }, component) + elms[0].populate(elementConfig0) + const cmp1 = (context.components && context.components['Poster']) || components['Poster'] + parent = elms[0] + const elementConfig1 = {} + elms[1] = this.element({ parent: parent || 'root' }, component) + const skip1 = [] + if (typeof cmp1 !== 'undefined') { + for (let key in cmp1.config.props) { + delete elementConfig1[cmp1.config.props[key]] + skip1.push(cmp1.config.props[key]) } - } - elms[1].populate(elementConfig1) - parent = elms[1] - - const props2 = {} - componentType = props2['is'] || 'Poster' - let component2 - - if(typeof componentType === 'string') { - component2 = context.components && context.components[componentType] || components[componentType] - if(!component2) { - throw new Error('Component "Poster" not found') - } - } else if(typeof componentType === 'function' && componentType.name === 'factory') { - component2 = componentType - } - - elms[2] = component2.call(null, { props: props2 }, elms[1], component) - - if(elms[2][Symbol.for('slots')][0]) { + } + elms[1].populate(elementConfig1) + parent = elms[1] + const props2 = {} + componentType = props2['is'] || 'Poster' + let component2 + if (typeof componentType === 'string') { + component2 = context.components && context.components[componentType] || components[componentType] + if (!component2) { + throw new Error('Component "Poster" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component2 = componentType + } + elms[2] = component2.call(null, { props: props2 }, elms[1], component) + if (elms[2][Symbol.for('slots')][0]) { parent = elms[2][Symbol.for('slots')][0] component = elms[2] - } else { + } else { parent = elms[2][Symbol.for('children')][0] - } - - const cmp3 = (context.components && context.components['Poster2']) || components['Poster2'] - parent = elms[0] - const elementConfig3 = {} - - elms[3] = this.element({ parent: parent || 'root' }, component) - if(typeof cmp3 !== 'undefined') { - for(let key in cmp3.config.props) { - delete elementConfig3[cmp3.config.props[key]] + } + const cmp3 = (context.components && context.components['Poster2']) || components['Poster2'] + parent = elms[0] + const elementConfig3 = {} + elms[3] = this.element({ parent: parent || 'root' }, component) + const skip3 = [] + if (typeof cmp3 !== 'undefined') { + for (let key in cmp3.config.props) { + delete elementConfig3[cmp3.config.props[key]] + skip3.push(cmp3.config.props[key]) } - } - elms[3].populate(elementConfig3) - parent = elms[3] - - const props4 = {} - componentType = props4['is'] || 'Poster2' - let component4 - - if(typeof componentType === 'string') { - component4 = context.components && context.components[componentType] || components[componentType] - if(!component4) { - throw new Error('Component "Poster2" not found') - } - } else if(typeof componentType === 'function' && componentType.name === 'factory') { - component4 = componentType - } - - elms[4] = component4.call(null, { props: props4 }, elms[3], component) - - if(elms[4][Symbol.for('slots')][0]) { + } + elms[3].populate(elementConfig3) + parent = elms[3] + const props4 = {} + componentType = props4['is'] || 'Poster2' + let component4 + if (typeof componentType === 'string') { + component4 = context.components && context.components[componentType] || components[componentType] + if (!component4) { + throw new Error('Component "Poster2" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component4 = componentType + } + elms[4] = component4.call(null, { props: props4 }, elms[3], component) + if (elms[4][Symbol.for('slots')][0]) { parent = elms[4][Symbol.for('slots')][0] component = elms[4] - } else { + } else { parent = elms[4][Symbol.for('children')][0] - } - - return elms + } + return elms } ` @@ -1127,88 +1129,81 @@ test('Generate code for a template with custom components with arguments', (asse const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw) { - const elms = [] - let componentType - const rootComponent = component - const elementConfig0 = {} - - elms[0] = this.element({ parent: parent || 'root' }, component) - elms[0].populate(elementConfig0) - - const cmp1 = (context.components && context.components['Poster']) || components['Poster'] - parent = elms[0] - const elementConfig1 = {} - - elms[1] = this.element({ parent: parent || 'root' }, component) - elementConfig1['x'] = 10 - if(typeof cmp1 !== 'undefined') { - for(let key in cmp1.config.props) { - delete elementConfig1[cmp1.config.props[key]] + const elms = [] + let componentType + const rootComponent = component + const elementConfig0 = {} + elms[0] = this.element({ parent: parent || 'root' }, component) + elms[0].populate(elementConfig0) + const cmp1 = (context.components && context.components['Poster']) || components['Poster'] + parent = elms[0] + const elementConfig1 = {} + elms[1] = this.element({ parent: parent || 'root' }, component) + elementConfig1['x'] = 10 + const skip1 = [] + if (typeof cmp1 !== 'undefined') { + for (let key in cmp1.config.props) { + delete elementConfig1[cmp1.config.props[key]] + skip1.push(cmp1.config.props[key]) } - } - elms[1].populate(elementConfig1) - parent = elms[1] - - const props2 = {} - props2['x'] = 10 - componentType = props2['is'] || 'Poster' - let component2 - if (typeof componentType === 'string') { - component2 = context.components && context.components[componentType] || components[componentType] - if (!component2) { - throw new Error('Component "Poster" not found') - } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component2 = componentType - } - elms[2] = component2.call(null, { props: props2 }, elms[1], component) - if(elms[2][Symbol.for('slots')][0]) { + } + elms[1].populate(elementConfig1) + parent = elms[1] + const props2 = {} + props2['x'] = 10 + componentType = props2['is'] || 'Poster' + let component2 + if (typeof componentType === 'string') { + component2 = context.components && context.components[componentType] || components[componentType] + if (!component2) { + throw new Error('Component "Poster" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component2 = componentType + } + elms[2] = component2.call(null, { props: props2 }, elms[1], component) + if (elms[2][Symbol.for('slots')][0]) { parent = elms[2][Symbol.for('slots')][0] component = elms[2] - } else { + } else { parent = elms[2][Symbol.for('children')][0] - } - - const cmp3 = (context.components && context.components['Poster']) || components['Poster'] - parent = elms[0] - const elementConfig3 = {} - - elms[3] = this.element({ parent: parent || 'root' }, component) - elementConfig3['x'] = 100 - elementConfig3['img'] = component.img - if(typeof cmp3 !== 'undefined') { - for(let key in cmp3.config.props) { - delete elementConfig3[cmp3.config.props[key]] + } + const cmp3 = (context.components && context.components['Poster']) || components['Poster'] + parent = elms[0] + const elementConfig3 = {} + elms[3] = this.element({ parent: parent || 'root' }, component) + elementConfig3['x'] = 100 + elementConfig3['img'] = component.img + const skip3 = [] + if (typeof cmp3 !== 'undefined') { + for (let key in cmp3.config.props) { + delete elementConfig3[cmp3.config.props[key]] + skip3.push(cmp3.config.props[key]) } - } - elms[3].populate(elementConfig3) - parent = elms[3] - - const props4 = {} - props4['x'] = 100 - props4['img'] = component.img - componentType = props4['is'] || 'Poster' - let component4 - - if (typeof componentType === 'string') { - component4=context.components && context.components[componentType] || components[componentType] - if (!component4) { - throw new Error('Component "Poster" not found') - } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component4 = componentType - } - - elms[4] = component4.call(null, { props: props4 }, elms[3], component) - - if(elms[4][Symbol.for('slots')][0]) { + } + elms[3].populate(elementConfig3) + parent = elms[3] + const props4 = {} + props4['x'] = 100 + props4['img'] = component.img + componentType = props4['is'] || 'Poster' + let component4 + if (typeof componentType === 'string') { + component4 = context.components && context.components[componentType] || components[componentType] + if (!component4) { + throw new Error('Component "Poster" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component4 = componentType + } + elms[4] = component4.call(null, { props: props4 }, elms[3], component) + if (elms[4][Symbol.for('slots')][0]) { parent = elms[4][Symbol.for('slots')][0] component = elms[4] - } else { + } else { parent = elms[4][Symbol.for('children')][0] - } - - return elms + } + return elms } ` @@ -1256,98 +1251,90 @@ test('Generate code for a template with custom components with reactive props', const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw) { - const elms = [] - let componentType - const rootComponent = component - const elementConfig0 = {} - - elms[0] = this.element({ parent: parent || 'root' }, component) - elms[0].populate(elementConfig0) - - const cmp1 = (context.components && context.components['Poster']) || components['Poster'] - parent = elms[0] - const elementConfig1 = {} - - elms[1] = this.element({ parent: parent || 'root' }, component) - elementConfig1['x'] = 10 - elementConfig1['img'] = component.image - if(typeof cmp1 !== 'undefined') { - for(let key in cmp1.config.props) { - delete elementConfig1[cmp1.config.props[key]] + const elms = [] + let componentType + const rootComponent = component + const elementConfig0 = {} + elms[0] = this.element({ parent: parent || 'root' }, component) + elms[0].populate(elementConfig0) + const cmp1 = (context.components && context.components['Poster']) || components['Poster'] + parent = elms[0] + const elementConfig1 = {} + elms[1] = this.element({ parent: parent || 'root' }, component) + elementConfig1['x'] = 10 + elementConfig1['img'] = component.image + const skip1 = [] + if (typeof cmp1 !== 'undefined') { + for (let key in cmp1.config.props) { + delete elementConfig1[cmp1.config.props[key]] + skip1.push(cmp1.config.props[key]) } - } - elms[1].populate(elementConfig1) - parent = elms[1] - - const props2 = {} - props2['x'] = 10 - props2['img'] = component.image - componentType = props2['is'] || 'Poster' - let component2 - - if (typeof componentType === 'string') { - component2 = context.components && context.components[componentType] || components[componentType] - if (!component2) { - throw new Error('Component "Poster" not found') - } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component2 = componentType - } - - elms[2] = component2.call(null, { props: props2 }, elms[1], component) - - if(elms[2][Symbol.for('slots')][0]) { + } + elms[1].populate(elementConfig1) + parent = elms[1] + const props2 = {} + props2['x'] = 10 + props2['img'] = component.image + componentType = props2['is'] || 'Poster' + let component2 + if (typeof componentType === 'string') { + component2 = context.components && context.components[componentType] || components[componentType] + if (!component2) { + throw new Error('Component "Poster" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component2 = componentType + } + elms[2] = component2.call(null, { props: props2 }, elms[1], component) + if (elms[2][Symbol.for('slots')][0]) { parent = elms[2][Symbol.for('slots')][0] component = elms[2] - } else { + } else { parent = elms[2][Symbol.for('children')][0] - } - - const cmp3 = (context.components && context.components['Poster']) || components['Poster'] - parent = elms[0] - const elementConfig3 = {} - - elms[3] = this.element({ parent: parent || 'root' }, component) - elementConfig3['x'] = 100 - elementConfig3['img'] = component.image - if(typeof cmp3 !== 'undefined') { - for(let key in cmp3.config.props) { - delete elementConfig3[cmp3.config.props[key]] + } + const cmp3 = (context.components && context.components['Poster']) || components['Poster'] + parent = elms[0] + const elementConfig3 = {} + elms[3] = this.element({ parent: parent || 'root' }, component) + elementConfig3['x'] = 100 + elementConfig3['img'] = component.image + const skip3 = [] + if (typeof cmp3 !== 'undefined') { + for (let key in cmp3.config.props) { + delete elementConfig3[cmp3.config.props[key]] + skip3.push(cmp3.config.props[key]) } - } - elms[3].populate(elementConfig3) - parent = elms[3] - - const props4 = {} - props4['x'] = 100 - props4['img'] = component.image - componentType = props4['is'] || 'Poster' - let component4 - - if (typeof componentType === 'string') { - component4 = context.components && context.components[componentType] || components[componentType] - if (!component4) { - throw new Error('Component "Poster" not found') - } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component4 = componentType - } - - elms[4] = component4.call(null, { props: props4 }, elms[3], component) - if(elms[4][Symbol.for('slots')][0]) { + } + elms[3].populate(elementConfig3) + parent = elms[3] + const props4 = {} + props4['x'] = 100 + props4['img'] = component.image + componentType = props4['is'] || 'Poster' + let component4 + if (typeof componentType === 'string') { + component4 = context.components && context.components[componentType] || components[componentType] + if (!component4) { + throw new Error('Component "Poster" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component4 = componentType + } + elms[4] = component4.call(null, { props: props4 }, elms[3], component) + if (elms[4][Symbol.for('slots')][0]) { parent = elms[4][Symbol.for('slots')][0] component = elms[4] - } else { + } else { parent = elms[4][Symbol.for('children')][0] - } - - return elms + } + return elms } ` const expectedEffect1 = ` - function anonymous(component,elms,context,components,rootComponent,effect) { - elms[1].set('img', component.image) + function anonymous(component, elms, context, components, rootComponent, effect) { + if (typeof skip1 === 'undefined' || skip1.indexOf('img') === -1) + elms[1].set('img', component.image) } ` @@ -1358,9 +1345,10 @@ test('Generate code for a template with custom components with reactive props', ` const expectedEffect3 = ` - function anonymous(component,elms,context,components,rootComponent,effect) { - elms[3].set('img', component.image) - } + function anonymous(component, elms, context, components, rootComponent, effect) { + if (typeof skip3 === 'undefined' || skip3.indexOf('img') === -1) + elms[3].set('img', component.image) + } ` const expectedEffect4 = ` @@ -1413,9 +1401,9 @@ test('Generate code for a template with a transition attributes', (assert) => { const templateObject = { children: [ { + ':x': '{transition: $myX}', + ':y': '{transition: {value: $myY, duration: 600}}', [Symbol.for('componentType')]: 'Element', - x: '{transition: $myX}', - y: '{transition: {v: $myY, d: 600, p: 100}}', }, ], } @@ -1428,14 +1416,12 @@ test('Generate code for a template with a transition attributes', (assert) => { const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) - elementConfig0['x'] = "{transition:$myX}" - elementConfig0['y'] = "{transition:{v:$myY,d:600,p:100}}" + elementConfig0['x'] = {transition:component.myX} + elementConfig0['y'] = {transition:{value:component.myY,duration:600}} elms[0].populate(elementConfig0) - return elms } ` - const actual = generator.call(scope, templateObject) assert.equal( @@ -1444,8 +1430,8 @@ test('Generate code for a template with a transition attributes', (assert) => { 'Generator should return a render function with the correct code' ) assert.ok( - Array.isArray(actual.effects) && actual.effects.length === 0, - 'Generator should return an empty effects array' + Array.isArray(actual.effects) && actual.effects.length !== 0, + 'Generator should not return an empty effects array' ) assert.end() }) @@ -1482,64 +1468,58 @@ test('Generate code for a template with slot content', (assert) => { const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw) { - const elms = [] - let componentType - const rootComponent = component - const elementConfig0 = {} - - elms[0] = this.element({ parent: parent || 'root' }, component) - elms[0].populate(elementConfig0) - - const cmp1 = (context.components && context.components['Page']) || components['Page'] - parent = elms[0] - const elementConfig1 = {} - - elms[1] = this.element({ parent: parent || 'root' }, component) - elementConfig1['w'] = 1920 - elementConfig1['h'] = 1080 - if(typeof cmp1 !== 'undefined') { - for(let key in cmp1.config.props) { - delete elementConfig1[cmp1.config.props[key]] + const elms = [] + let componentType + const rootComponent = component + const elementConfig0 = {} + elms[0] = this.element({ parent: parent || 'root' }, component) + elms[0].populate(elementConfig0) + const cmp1 = (context.components && context.components['Page']) || components['Page'] + parent = elms[0] + const elementConfig1 = {} + elms[1] = this.element({ parent: parent || 'root' }, component) + elementConfig1['w'] = 1920 + elementConfig1['h'] = 1080 + const skip1 = [] + if (typeof cmp1 !== 'undefined') { + for (let key in cmp1.config.props) { + delete elementConfig1[cmp1.config.props[key]] + skip1.push(cmp1.config.props[key]) } - } - elms[1].populate(elementConfig1) - parent = elms[1] - - const props2 = {} - props2['w'] = 1920 - props2['h'] = 1080 - componentType = props2['is'] || 'Page' - let component2 - - if (typeof componentType === 'string') { - component2 = context.components && context.components[componentType] || components[componentType] - if (!component2) { - throw new Error('Component "Page" not found') - } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component2 = componentType - } - elms[2] = component2.call(null, { props: props2 }, elms[1], component) - if(elms[2][Symbol.for('slots')][0]) { + } + elms[1].populate(elementConfig1) + parent = elms[1] + const props2 = {} + props2['w'] = 1920 + props2['h'] = 1080 + componentType = props2['is'] || 'Page' + let component2 + if (typeof componentType === 'string') { + component2 = context.components && context.components[componentType] || components[componentType] + if (!component2) { + throw new Error('Component "Page" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component2 = componentType + } + elms[2] = component2.call(null, { props: props2 }, elms[1], component) + if (elms[2][Symbol.for('slots')][0]) { parent = elms[2][Symbol.for('slots')][0] component = elms[2] - } else { + } else { parent = elms[2][Symbol.for('children')][0] - } - - const elementConfig3 = {} - elms[3] = this.element({ parent: parent || 'root' }, component) - elms[3].populate(elementConfig3) - parent = elms[3] - - const elementConfig4 = {} - elms[4] = this.element({ parent: parent || 'root' }, component) - elementConfig4['x'] = 100 - elementConfig4['y'] = component.y - elementConfig4['rotation'] = component.rotate - elms[4].populate(elementConfig4) - - return elms + } + const elementConfig3 = {} + elms[3] = this.element({ parent: parent || 'root' }, component) + elms[3].populate(elementConfig3) + parent = elms[3] + const elementConfig4 = {} + elms[4] = this.element({ parent: parent || 'root' }, component) + elementConfig4['x'] = 100 + elementConfig4['y'] = component.y + elementConfig4['rotation'] = component.rotate + elms[4].populate(elementConfig4) + return elms } ` @@ -1603,67 +1583,59 @@ test('Generate code for a template with slot content, using a named slot', (asse const expectedRender = ` function anonymous(parent, component, context, components, effect, getRaw) { - const elms = [] - let componentType - const rootComponent = component - const elementConfig0 = {} - - elms[0] = this.element({ parent: parent || 'root' }, component) - elms[0].populate(elementConfig0) - - const cmp1 = (context.components && context.components['Page']) || components['Page'] - parent = elms[0] - const elementConfig1 = {} - - elms[1] = this.element({ parent: parent || 'root' }, component) - elementConfig1['w'] = 1920 - elementConfig1['h'] = 1080 - if(typeof cmp1 !== 'undefined') { - for(let key in cmp1.config.props) { - delete elementConfig1[cmp1.config.props[key]] + const elms = [] + let componentType + const rootComponent = component + const elementConfig0 = {} + elms[0] = this.element({ parent: parent || 'root' }, component) + elms[0].populate(elementConfig0) + const cmp1 = (context.components && context.components['Page']) || components['Page'] + parent = elms[0] + const elementConfig1 = {} + elms[1] = this.element({ parent: parent || 'root' }, component) + elementConfig1['w'] = 1920 + elementConfig1['h'] = 1080 + const skip1 = [] + if (typeof cmp1 !== 'undefined') { + for (let key in cmp1.config.props) { + delete elementConfig1[cmp1.config.props[key]] + skip1.push(cmp1.config.props[key]) } - } - - elms[1].populate(elementConfig1) - parent = elms[1] - - const props2 = {} - props2['w'] = 1920 - props2['h'] = 1080 - componentType = props2['is'] || 'Page' - let component2 - - if (typeof componentType === 'string') { - component2 = context.components && context.components[componentType] || components[componentType] - if (!component2) { - throw new Error('Component "Page" not found') - } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component2 = componentType - } - - elms[2] = component2.call(null, { props: props2 }, elms[1], component) - if(elms[2][Symbol.for('slots')][0]) { + } + elms[1].populate(elementConfig1) + parent = elms[1] + const props2 = {} + props2['w'] = 1920 + props2['h'] = 1080 + componentType = props2['is'] || 'Page' + let component2 + if (typeof componentType === 'string') { + component2 = context.components && context.components[componentType] || components[componentType] + if (!component2) { + throw new Error('Component "Page" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component2 = componentType + } + elms[2] = component2.call(null, { props: props2 }, elms[1], component) + if (elms[2][Symbol.for('slots')][0]) { parent = elms[2][Symbol.for('slots')][0] component = elms[2] - } else { + } else { parent = elms[2][Symbol.for('children')][0] - } - - const elementConfig3 = {} - elms[3] = this.element({ parent: parent || 'root' }, component) - elms[3].populate(elementConfig3) - parent = elms[3] - - const elementConfig4 = {} - elms[4] = this.element({ parent: parent || 'root' }, component) - elementConfig4['x'] = 100 - elementConfig4['y'] = component.y - elementConfig4['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === 'mySlot').shift() || component[Symbol.for('slots')][0] || parent - elementConfig4['slot'] = "mySlot" - elms[4].populate(elementConfig4) - - return elms + } + const elementConfig3 = {} + elms[3] = this.element({ parent: parent || 'root' }, component) + elms[3].populate(elementConfig3) + parent = elms[3] + const elementConfig4 = {} + elms[4] = this.element({ parent: parent || 'root' }, component) + elementConfig4['x'] = 100 + elementConfig4['y'] = component.y + elementConfig4['parent'] = component[Symbol.for('slots')].filter(slot => slot.ref === 'mySlot').shift() || parent + elementConfig4['slot'] = "mySlot" + elms[4].populate(elementConfig4) + return elms } ` @@ -1986,44 +1958,46 @@ test('Generate code for a template with a simple for-loop on an Element', (asser parent = elms[0] const created1 = [] const forloop1 = (collection = [], elms, created) => { - const rawCollection = getRaw(collection) - const keys = new Set(rawCollection.map((item) => '' + undefined)) - let i = created.length - while (i--) { - const key = created[i] - if (!keys.has(key)) { - elms[1][key] && elms[1][key].destroy() - delete elms[1][key] - } - } - created.length = 0 - const length = collection.length - for (let __index = 0; __index < length; __index++) { - const scope = Object.create(component) - parent = elms[0] - scope['index'] = __index - scope['item'] = rawCollection[__index] - scope['key'] = __index - created.push(scope.key) - parent = elms[0] - if (elms[1] === undefined) { - elms[1] = {} + const rawCollection = getRaw(collection) + const keys = new Set() + let l = rawCollection.length + while (l--) { + const item = rawCollection[l] + const index = l + keys.add('' + l) } - const elementConfig1 = {} - if (!elms[1][scope.key]) { - elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) - } - if (!elms[1][scope.key].nodeId) { - elms[1][scope.key].populate(elementConfig1) + let i = created.length + while (i--) { + if (keys.has(created[i]) === false) { + const key = created[i] + elms[1][key] && elms[1][key].destroy() + delete elms[1][key] + } } - scope['item'] = collection[__index] - if (elms[1][0] && elms[1][0].forComponent && elms[1][0].forComponent.___layout) { - elms[1][0].forComponent.___layout() + created.length = 0 + const length = rawCollection.length + for (let __index = 0; __index < length; __index++) { + const scope = Object.create(component) + parent = elms[0] + scope['index'] = __index + scope['item'] = rawCollection[__index] + scope['key'] = '' + __index + created.push(scope.key) + parent = elms[0] + if (elms[1] === undefined) { + elms[1] = {} + } + const elementConfig1 = {} + if (elms[1][scope.key] === undefined) { + elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) + } + if (elms[1][scope.key].nodeId === undefined) { + elms[1][scope.key].populate(elementConfig1) + } } - } } effect(() => { - forloop1(component.items, elms, created1) + forloop1(component.items, elms, created1) }, 'items') return elms } @@ -2071,44 +2045,46 @@ test('Generate code for a template with a simple for-loop on an Element with a c parent = elms[0] const created1 = [] const forloop1 = (collection = [], elms, created) => { - const rawCollection = getRaw(collection) - const keys = new Set(rawCollection.map((item) => '' + undefined)) - let i = created.length - while (i--) { - const key = created[i] - if (!keys.has(key)) { - elms[1][key] && elms[1][key].destroy() - delete elms[1][key] - } - } - created.length = 0 - const length = collection.length - for (let __index = 0; __index < length; __index++) { - const scope = Object.create(component) - parent = elms[0] - scope['customIndex'] = __index - scope['item'] = rawCollection[__index] - scope['key'] = __index - created.push(scope.key) - parent = elms[0] - if (elms[1] === undefined) { - elms[1] = {} - } - const elementConfig1 = {} - if (!elms[1][scope.key]) { - elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) + const rawCollection = getRaw(collection) + const keys = new Set() + let l = rawCollection.length + while (l--) { + const item = rawCollection[l] + const customIndex = l + keys.add('' + l) } - if (!elms[1][scope.key].nodeId) { - elms[1][scope.key].populate(elementConfig1) + let i = created.length + while (i--) { + if (keys.has(created[i]) === false) { + const key = created[i] + elms[1][key] && elms[1][key].destroy() + delete elms[1][key] + } } - scope['item'] = collection[__index] - if (elms[1][0] && elms[1][0].forComponent && elms[1][0].forComponent.___layout) { - elms[1][0].forComponent.___layout() + created.length = 0 + const length = rawCollection.length + for (let __index = 0; __index < length; __index++) { + const scope = Object.create(component) + parent = elms[0] + scope['customIndex'] = __index + scope['item'] = rawCollection[__index] + scope['key'] = '' + __index + created.push(scope.key) + parent = elms[0] + if (elms[1] === undefined) { + elms[1] = {} + } + const elementConfig1 = {} + if (elms[1][scope.key] === undefined) { + elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) + } + if (elms[1][scope.key].nodeId === undefined) { + elms[1][scope.key].populate(elementConfig1) + } } - } } effect(() => { - forloop1(component.items, elms, created1) + forloop1(component.items, elms, created1) }, 'items') return elms } @@ -2157,44 +2133,46 @@ test('Generate code for a template with a simple for-loop on an Element with a k parent = elms[0] const created1 = [] const forloop1 = (collection = [], elms, created) => { - const rawCollection = getRaw(collection) - const keys = new Set(rawCollection.map((item) => '' + item.id)) - let i = created.length - while (i--) { - const key = created[i] - if (!keys.has(key)) { - elms[1][key] && elms[1][key].destroy() - delete elms[1][key] - } - } - created.length = 0 - const length = collection.length - for (let __index = 0; __index < length; __index++) { - const scope = Object.create(component) - parent = elms[0] - scope['index'] = __index - scope['item'] = rawCollection[__index] - scope['key'] = scope.item.id - created.push(scope.key) - parent = elms[0] - if (elms[1] === undefined) { - elms[1] = {} + const rawCollection = getRaw(collection) + const keys = new Set() + let l = rawCollection.length + while (l--) { + const item = rawCollection[l] + const index = l + keys.add('' + item.id) } - const elementConfig1 = {} - if (!elms[1][scope.key]) { - elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) - } - if (!elms[1][scope.key].nodeId) { - elms[1][scope.key].populate(elementConfig1) + let i = created.length + while (i--) { + if (keys.has(created[i]) === false) { + const key = created[i] + elms[1][key] && elms[1][key].destroy() + delete elms[1][key] + } } - scope['item'] = collection[__index] - if (elms[1][0] && elms[1][0].forComponent && elms[1][0].forComponent.___layout) { - elms[1][0].forComponent.___layout() + created.length = 0 + const length = rawCollection.length + for (let __index = 0; __index < length; __index++) { + const scope = Object.create(component) + parent = elms[0] + scope['index'] = __index + scope['item'] = rawCollection[__index] + scope['key'] = '' + scope.item.id + created.push(scope.key) + parent = elms[0] + if (elms[1] === undefined) { + elms[1] = {} + } + const elementConfig1 = {} + if (elms[1][scope.key] === undefined) { + elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) + } + if (elms[1][scope.key].nodeId === undefined) { + elms[1][scope.key].populate(elementConfig1) + } } - } } effect(() => { - forloop1(component.items, elms, created1) + forloop1(component.items, elms, created1) }, 'items') return elms } @@ -2243,76 +2221,79 @@ test('Generate code for a template with a simple for-loop on a Component with a parent = elms[0] const created1 = [] const forloop1 = (collection = [], elms, created) => { - const rawCollection = getRaw(collection) - const keys = new Set(rawCollection.map((item) => '' + item.id)) - let i = created.length - while (i--) { - const key = created[i] - if (!keys.has(key)) { - elms[1][key] && elms[1][key].destroy() - delete elms[1][key] - elms[2][key] && elms[2][key].destroy() - delete elms[2][key] - } - } - created.length = 0 - const length = collection.length - for (let __index = 0; __index < length; __index++) { - const scope = Object.create(component) - parent = elms[0] - scope['myIndex'] = __index - scope['item'] = rawCollection[__index] - scope['key'] = item.id - created.push(scope.key) - const cmp1 = (context.components && context.components['ListItem']) || components['ListItem'] - if (elms[1] === undefined) { - elms[1] = {} - } - const elementConfig1 = {} - if (!elms[1][scope.key]) { - elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) - } - if (typeof cmp1 !== 'undefined') { - for (let key in cmp1.config.props) { - delete elementConfig1[cmp1.config.props[key]] - } + const rawCollection = getRaw(collection) + const keys = new Set() + let l = rawCollection.length + while (l--) { + const item = rawCollection[l] + const myIndex = l + keys.add('' + item.id) } - if (!elms[1][scope.key].nodeId) { - elms[1][scope.key].populate(elementConfig1) - } - if (elms[2] === undefined) { - elms[2] = {} - } - parent = elms[1][scope.key] - const props2 = {} - if (!elms[2][scope.key]) { - componentType = props2['is'] || 'ListItem' - let component2 - if (typeof componentType === 'string') { - component2 = - context.components && context.components[componentType] || components[componentType] - if (!component2) { - throw new Error('Component "ListItem" not found') + let i = created.length + while (i--) { + if (keys.has(created[i]) === false) { + const key = created[i] + elms[1][key] && elms[1][key].destroy() + delete elms[1][key] + elms[2][key] && elms[2][key].destroy() + delete elms[2][key] } - } else if (typeof componentType === 'function' && componentType.name === 'factory') { - component2 = componentType - } - elms[2][scope.key] = component2.call(null, { props: props2 }, elms[1][scope.key], component) - if (elms[2][scope.key][Symbol.for('slots')][0]) { - parent = elms[2][scope.key][Symbol.for('slots')][0] - component = elms[2][scope.key] - } else { - parent = elms[2][scope.key][Symbol.for('children')][0] - } } - scope['item'] = collection[__index] - if (elms[1][0] && elms[1][0].forComponent && elms[1][0].forComponent.___layout) { - elms[1][0].forComponent.___layout() + created.length = 0 + const length = rawCollection.length + for (let __index = 0; __index < length; __index++) { + const scope = Object.create(component) + parent = elms[0] + scope['myIndex'] = __index + scope['item'] = rawCollection[__index] + scope['key'] = '' + item.id + created.push(scope.key) + const cmp1 = (context.components && context.components['ListItem']) || components['ListItem'] + if (elms[1] === undefined) { + elms[1] = {} + } + const elementConfig1 = {} + if (elms[1][scope.key] === undefined) { + elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) + } + const skip1 = [] + if (typeof cmp1 !== 'undefined') { + for (let key in cmp1.config.props) { + delete elementConfig1[cmp1.config.props[key]] + skip1.push(cmp1.config.props[key]) + } + } + if (elms[1][scope.key].nodeId === undefined) { + elms[1][scope.key].populate(elementConfig1) + } + if (elms[2] === undefined) { + elms[2] = {} + } + parent = elms[1][scope.key] + const props2 = {} + if (elms[2][scope.key] === undefined) { + componentType = props2['is'] || 'ListItem' + let component2 + if (typeof componentType === 'string') { + component2 = context.components && context.components[componentType] || components[componentType] + if (!component2) { + throw new Error('Component "ListItem" not found') + } + } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component2 = componentType + } + elms[2][scope.key] = component2.call(null, { props: props2 }, elms[1][scope.key], component) + if (elms[2][scope.key][Symbol.for('slots')][0]) { + parent = elms[2][scope.key][Symbol.for('slots')][0] + component = elms[2][scope.key] + } else { + parent = elms[2][scope.key][Symbol.for('children')][0] + } + } } - } } effect(() => { - forloop1(component.items, elms, created1) + forloop1(component.items, elms, created1) }, 'items') return elms } @@ -2362,46 +2343,48 @@ test('Generate code for a template with a simple for-loop on an Element with an parent = elms[0] const created1 = [] const forloop1 = (collection = [], elms, created) => { - const rawCollection = getRaw(collection) - const keys = new Set(rawCollection.map((item) => '' + item.id)) - let i = created.length - while (i--) { - const key = created[i] - if (!keys.has(key)) { - elms[1][key] && elms[1][key].destroy() - delete elms[1][key] - } - } - created.length = 0 - const length = collection.length - for (let __index = 0; __index < length; __index++) { - const scope = Object.create(component) - parent = elms[0] - scope['index'] = __index - scope['item'] = rawCollection[__index] - scope['key'] = item.id - scope['__ref'] = 'myref' + __index - created.push(scope.key) - parent = elms[0] - if (elms[1] === undefined) { - elms[1] = {} - } - const elementConfig1 = {} - if (!elms[1][scope.key]) { - elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) + const rawCollection = getRaw(collection) + const keys = new Set() + let l = rawCollection.length + while (l--) { + const item = rawCollection[l] + const index = l + keys.add('' + item.id) } - elementConfig1['ref'] = scope.__ref - if (!elms[1][scope.key].nodeId) { - elms[1][scope.key].populate(elementConfig1) + let i = created.length + while (i--) { + if (keys.has(created[i]) === false) { + const key = created[i] + elms[1][key] && elms[1][key].destroy() + delete elms[1][key] + } } - scope['item'] = collection[__index] - if (elms[1][0] && elms[1][0].forComponent && elms[1][0].forComponent.___layout) { - elms[1][0].forComponent.___layout() + created.length = 0 + const length = rawCollection.length + for (let __index = 0; __index < length; __index++) { + const scope = Object.create(component) + parent = elms[0] + scope['index'] = __index + scope['item'] = rawCollection[__index] + scope['key'] = '' + item.id + scope['__ref'] = 'myref' + __index + created.push(scope.key) + parent = elms[0] + if (elms[1] === undefined) { + elms[1] = {} + } + const elementConfig1 = {} + if (elms[1][scope.key] === undefined) { + elms[1][scope.key] = this.element({ parent: parent || 'root' }, component) + } + elementConfig1['ref'] = scope.__ref + if (elms[1][scope.key].nodeId === undefined) { + elms[1][scope.key].populate(elementConfig1) + } } - } } effect(() => { - forloop1(component.items, elms, created1) + forloop1(component.items, elms, created1) }, 'items') return elms } From 3dfff65ab46c65cc5e941c28242dac87497e28e3 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Wed, 30 Oct 2024 22:16:24 +0100 Subject: [PATCH 2/5] Updated code generator tests with latest changes. --- src/lib/codegenerator/generator.test.js | 117 ++++++++++++++++-------- 1 file changed, 79 insertions(+), 38 deletions(-) diff --git a/src/lib/codegenerator/generator.test.js b/src/lib/codegenerator/generator.test.js index 8d2c5127..9c973ad5 100644 --- a/src/lib/codegenerator/generator.test.js +++ b/src/lib/codegenerator/generator.test.js @@ -84,6 +84,7 @@ test('Generate render and effect code for an empty template', (assert) => { const elms = [] let componentType const rootComponent = component + let propData return elms } ` @@ -116,6 +117,7 @@ test('Generate render and effect code for a template with a single simple elemen const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -156,6 +158,7 @@ test('Generate code for a template with a simple element and a simple nested ele const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -197,6 +200,7 @@ test('Generate code for a template with a single element with attributes', (asse const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -237,6 +241,7 @@ test('Generate code for a template with a single element with attributes with a const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elementConfig0['one'] = true @@ -283,6 +288,7 @@ test('Generate code for a template with attributes and a nested element with att const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -347,6 +353,7 @@ test('Generate code for a template with attributes and 2 nested elements with at const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -432,6 +439,7 @@ test('Generate code for a template with attributes and deep nested elements with const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -512,6 +520,7 @@ test('Generate code for a template with simple dynamic attributes', (assert) => const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -580,6 +589,7 @@ test('Generate code for a template with an attribute with a dash', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -624,6 +634,7 @@ test('Generate code for a template with dynamic attributes with code to be evalu const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -701,6 +712,7 @@ test('Generate code for a template with attribute (object)', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({parent: parent || 'root'}, component) @@ -744,6 +756,7 @@ test('Generate code for a template with dynamic attribute (object)', (assert) => const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({parent: parent || 'root'}, component) @@ -788,6 +801,7 @@ test('Generate code for a template with attribute (object) with mixed dynamic & const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({parent: parent || 'root'}, component) @@ -832,6 +846,7 @@ test('Generate code for a template with @-listeners', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -886,6 +901,7 @@ test('Generate code for a template with custom components', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -1017,6 +1033,7 @@ test('Generate code for a template with an unregistered custom component', (asse const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -1132,6 +1149,7 @@ test('Generate code for a template with custom components with arguments', (asse const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -1250,82 +1268,91 @@ test('Generate code for a template with custom components with reactive props', } const expectedRender = ` - function anonymous(parent, component, context, components, effect, getRaw) { + function anonymous(parent,component,context,components,effect,getRaw) { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} - elms[0] = this.element({ parent: parent || 'root' }, component) + elms[0] = this.element({parent: parent || 'root'}, component) elms[0].populate(elementConfig0) const cmp1 = (context.components && context.components['Poster']) || components['Poster'] parent = elms[0] const elementConfig1 = {} - elms[1] = this.element({ parent: parent || 'root' }, component) + elms[1] = this.element({parent: parent || 'root'}, component) elementConfig1['x'] = 10 elementConfig1['img'] = component.image const skip1 = [] - if (typeof cmp1 !== 'undefined') { - for (let key in cmp1.config.props) { - delete elementConfig1[cmp1.config.props[key]] - skip1.push(cmp1.config.props[key]) - } + if(typeof cmp1 !== 'undefined') { + for(let key in cmp1.config.props) { + delete elementConfig1[cmp1.config.props[key]] + skip1.push(cmp1.config.props[key]) + } } elms[1].populate(elementConfig1) parent = elms[1] const props2 = {} props2['x'] = 10 - props2['img'] = component.image + propData = component.image + if (Array.isArray(propData) === true) { + propData = getRaw(propData).slice(0) + } + props2['img'] = propData componentType = props2['is'] || 'Poster' let component2 - if (typeof componentType === 'string') { - component2 = context.components && context.components[componentType] || components[componentType] - if (!component2) { - throw new Error('Component "Poster" not found') - } - } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { - component2 = componentType + if(typeof componentType === 'string') { + component2 = context.components && context.components[componentType] || components[componentType] + if(!component2) { + throw new Error('Component "Poster" not found') + } + } else if(typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component2 = componentType } - elms[2] = component2.call(null, { props: props2 }, elms[1], component) + elms[2] = component2.call(null, {props: props2}, elms[1], component) if (elms[2][Symbol.for('slots')][0]) { - parent = elms[2][Symbol.for('slots')][0] - component = elms[2] + parent = elms[2][Symbol.for('slots')][0] + component = elms[2] } else { - parent = elms[2][Symbol.for('children')][0] + parent = elms[2][Symbol.for('children')][0] } const cmp3 = (context.components && context.components['Poster']) || components['Poster'] parent = elms[0] const elementConfig3 = {} - elms[3] = this.element({ parent: parent || 'root' }, component) + elms[3] = this.element({parent: parent || 'root'}, component) elementConfig3['x'] = 100 elementConfig3['img'] = component.image const skip3 = [] - if (typeof cmp3 !== 'undefined') { - for (let key in cmp3.config.props) { - delete elementConfig3[cmp3.config.props[key]] - skip3.push(cmp3.config.props[key]) - } + if(typeof cmp3 !== 'undefined') { + for(let key in cmp3.config.props) { + delete elementConfig3[cmp3.config.props[key]] + skip3.push(cmp3.config.props[key]) + } } elms[3].populate(elementConfig3) parent = elms[3] const props4 = {} props4['x'] = 100 - props4['img'] = component.image + propData = component.image + if (Array.isArray(propData) === true) { + propData = getRaw(propData).slice(0) + } + props4['img'] = propData componentType = props4['is'] || 'Poster' let component4 - if (typeof componentType === 'string') { - component4 = context.components && context.components[componentType] || components[componentType] - if (!component4) { - throw new Error('Component "Poster" not found') - } - } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { - component4 = componentType + if(typeof componentType === 'string') { + component4 = context.components && context.components[componentType] || components[componentType] + if(!component4) { + throw new Error('Component "Poster" not found') + } + } else if(typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) { + component4 = componentType } - elms[4] = component4.call(null, { props: props4 }, elms[3], component) + elms[4] = component4.call(null, {props: props4}, elms[3], component) if (elms[4][Symbol.for('slots')][0]) { - parent = elms[4][Symbol.for('slots')][0] - component = elms[4] + parent = elms[4][Symbol.for('slots')][0] + component = elms[4] } else { - parent = elms[4][Symbol.for('children')][0] + parent = elms[4][Symbol.for('children')][0] } return elms } @@ -1413,6 +1440,7 @@ test('Generate code for a template with a transition attributes', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -1471,6 +1499,7 @@ test('Generate code for a template with slot content', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -1586,6 +1615,7 @@ test('Generate code for a template with slot content, using a named slot', (asse const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -1683,6 +1713,7 @@ test('Generate code for a template with a slot', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -1743,6 +1774,7 @@ test('Generate code for a template with inline Text', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -1793,6 +1825,7 @@ test('Generate code for a template with inline dynamic Text', (assert) => { const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -1843,6 +1876,7 @@ test('Generate code for a template with inline dynamic Text embedded in static t const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -1898,6 +1932,7 @@ test('Generate code for a template with a single element with attributes with pe const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) @@ -1952,6 +1987,7 @@ test('Generate code for a template with a simple for-loop on an Element', (asser const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -2039,6 +2075,7 @@ test('Generate code for a template with a simple for-loop on an Element with a c const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -2127,6 +2164,7 @@ test('Generate code for a template with a simple for-loop on an Element with a k const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -2215,6 +2253,7 @@ test('Generate code for a template with a simple for-loop on a Component with a const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -2337,6 +2376,7 @@ test('Generate code for a template with a simple for-loop on an Element with an const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) elms[0].populate(elementConfig0) @@ -2421,6 +2461,7 @@ test('Generate code for a template with double $$ (i.e. referencing a Blits plug const elms = [] let componentType const rootComponent = component + let propData const elementConfig0 = {} elms[0] = this.element({ parent: parent || 'root' }, component) From 1d4d10fefac7ed1756aa1e97af667a95e0c7ec1e Mon Sep 17 00:00:00 2001 From: vonvick Date: Thu, 31 Oct 2024 12:47:02 +0000 Subject: [PATCH 3/5] fix: export interfaces and change return type for beforeHooks function --- index.d.ts | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/index.d.ts b/index.d.ts index d43e3242..2fbe2933 100644 --- a/index.d.ts +++ b/index.d.ts @@ -19,7 +19,7 @@ import {type ShaderEffect as RendererShaderEffect, type WebGlCoreShader} from '@ declare module '@lightningjs/blits' { - interface Hooks { + export interface Hooks { /** * Fires when the Component is being instantiated * At this moment child elements will not be available yet @@ -77,7 +77,7 @@ declare module '@lightningjs/blits' { exit?: () => void; } - interface Input { + export interface Input { [key: string]: (event: KeyboardEvent) => void | undefined, /** * Catch all input function @@ -88,7 +88,7 @@ declare module '@lightningjs/blits' { any?: (event: KeyboardEvent) => void } - interface Log { + export interface Log { /** * Log an info message */ @@ -109,16 +109,16 @@ declare module '@lightningjs/blits' { - interface RouteData { + export interface RouteData { [key: string]: any } // todo: specify valid route options - interface RouteOptions { + export interface RouteOptions { [key: string]: any } - interface Router { + export interface Router { /** * Navigate to a different location * @@ -148,7 +148,7 @@ declare module '@lightningjs/blits' { } - type ComponentBase = { + export type ComponentBase = { /** * Listen to events emitted by other components */ @@ -246,7 +246,7 @@ declare module '@lightningjs/blits' { /** * Prop object */ - type PropObject = { + export type PropObject = { /** * Name of the prop */ @@ -274,7 +274,7 @@ declare module '@lightningjs/blits' { }; // Props Array - type Props = (string | PropObject)[]; + export type Props = (string | PropObject)[]; // Extract the prop names from the props array type ExtractPropNames

= { @@ -282,11 +282,11 @@ declare module '@lightningjs/blits' { }; // Update the PropsDefinition to handle props as strings or objects - type PropsDefinition

= ExtractPropNames

; + export type PropsDefinition

= ExtractPropNames

; - type ComponentContext

= ThisType & S & M & C & ComponentBase> + export type ComponentContext

= ThisType & S & M & C & ComponentBase> - interface ComponentConfig

{ + export interface ComponentConfig

{ components?: { [key: string]: ComponentFactory, }, @@ -365,7 +365,7 @@ declare module '@lightningjs/blits' { watch?: W & ComponentContext } - interface ApplicationConfig

extends ComponentConfig { + export interface ApplicationConfig

extends ComponentConfig { /** * Routes definition * @@ -383,7 +383,7 @@ declare module '@lightningjs/blits' { } - interface Transition { + export interface Transition { /** * Name of the prop to transition (i.e. 'x', 'y', 'alpha', 'color') */ @@ -406,7 +406,7 @@ declare module '@lightningjs/blits' { delay?: number } - interface Before { + export interface Before { /** * Name of the prop to set before the transition starts */ @@ -417,7 +417,7 @@ declare module '@lightningjs/blits' { value: any, } - interface RouteTransition { + export interface RouteTransition { /** * Setting or Array of Settings before new view enters into the router view */ @@ -432,9 +432,9 @@ declare module '@lightningjs/blits' { out: Transition | Transition[], } - type RouteTransitionFunction = (previousRoute: Route, currentRoute: Route) => RequireAtLeastOne + export type RouteTransitionFunction = (previousRoute: Route, currentRoute: Route) => RequireAtLeastOne - interface RouteAnnounce { + export interface RouteAnnounce { /** * Message to be announced */ @@ -447,15 +447,15 @@ declare module '@lightningjs/blits' { politeness?: 'off' | 'polite' | 'assertive' } - type RequireAtLeastOne = { + export type RequireAtLeastOne = { [K in keyof T]-?: Required> & Partial>> }[keyof T] - interface RouteHooks { - before?: (to: Route, from: Route) => string | Route; + export interface RouteHooks { + before?: (to: Route, from: Route) => string | Route | Promise; } - type Route = { + export type Route = { /** * URI path for the route */ @@ -575,7 +575,7 @@ declare module '@lightningjs/blits' { * Launcher function that sets up the Lightning renderer and instantiates * the Blits App */ - interface Settings { + export interface Settings { /** * Width of the Application */ From acb9832b49f3da191d04855bbe4f1ca531118fa4 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 31 Oct 2024 15:12:58 +0100 Subject: [PATCH 4/5] Bumped version to 1.8.3 and updated changelog. --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 015453c9..49326a23 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## v1.8.3 + +_31 oct 2024_ + +- Exported TS interfaces and improved return type of before route hook + + ## v1.8.2 _30 oct 2024_ diff --git a/package-lock.json b/package-lock.json index 1cb1310b..fdd3968a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@lightningjs/blits", - "version": "1.8.2", + "version": "1.8.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@lightningjs/blits", - "version": "1.8.2", + "version": "1.8.3", "license": "Apache-2.0", "dependencies": { "@lightningjs/msdf-generator": "^1.1.0", diff --git a/package.json b/package.json index c66b041f..7593d48b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lightningjs/blits", - "version": "1.8.2", + "version": "1.8.3", "description": "Blits: The Lightning 3 App Development Framework", "bin": "bin/index.js", "exports": { From 741a73e862084d3cb86ab1e8cd601451c08cb8b3 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 31 Oct 2024 15:15:14 +0100 Subject: [PATCH 5/5] Updated changelog for 1.8.3. --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 49326a23..a0676142 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,13 +5,14 @@ _31 oct 2024_ - Exported TS interfaces and improved return type of before route hook +- Fixed test cases for codegenerator ## v1.8.2 _30 oct 2024_ -- Fixed edgecase issue with array based props not triggering reactivity +- Fixed edge case issue with array based props not triggering reactivity ## v1.8.1