@nordcraft/ssr 1.0.96 → 2.0.0

package/dist/rendering/components.test.js

@@ -0,0 +1,903 @@
+import { functionFormula, valueFormula, } from '@nordcraft/core/dist/formula/formulaUtils';
+import { describe, expect, test } from 'bun:test';
+import { renderPageBody } from './components';
+import { getPageFormulaContext } from './formulaContext';
+describe('renderPageBody', () => {
+    test('should render a simple page', async () => {
+        const component = {
+            name: 'SimpleComponent',
+            contexts: {},
+            route: {
+                path: [
+                    {
+                        name: 'home',
+                        type: 'static',
+                    },
+                ],
+                query: {},
+            },
+            events: [],
+            nodes: {
+                root: {
+                    tag: 'div',
+                    type: 'element',
+                    attrs: {
+                        'data-test-attr': {
+                            type: 'value',
+                            value: 'test',
+                        },
+                    },
+                    style: { color: 'red' },
+                    events: {},
+                    classes: {},
+                    children: [],
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: component,
+            formulaContext: {
+                data: {
+                    Attributes: {},
+                },
+                component,
+                env: {},
+                package: undefined,
+                toddle: {},
+            },
+            env: {},
+            files: { components: { SimpleComponent: component } },
+            includedComponents: [component],
+            projectId: 'test-project',
+            req: {},
+        });
+        expect(html).toBe('<div data-test-attr="test" data-id="0" data-node-id="root" class="cTNpFk"></div>');
+    });
+    test('should render a static value provided by a context provider component', async () => {
+        const providerComponent = {
+            name: 'ProviderComponent',
+            formulas: {
+                contextValue: {
+                    name: 'contextValue',
+                    exposeInContext: true,
+                    formula: {
+                        type: 'value',
+                        value: 'provided-value',
+                    },
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'component',
+                    name: 'ConsumerComponent',
+                    attrs: {},
+                    children: [],
+                    events: {},
+                    style: {},
+                },
+            },
+        };
+        const consumerComponent = {
+            name: 'ConsumerComponent',
+            contexts: {
+                ProviderComponent: {
+                    formulas: ['contextValue'],
+                    workflows: [],
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'text',
+                    value: {
+                        type: 'path',
+                        path: ['Contexts', 'ProviderComponent', 'contextValue'],
+                    },
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: providerComponent,
+            formulaContext: {
+                data: {
+                    Attributes: {},
+                },
+                component: providerComponent,
+                env: {},
+                package: undefined,
+                toddle: {},
+            },
+            env: {},
+            files: {
+                components: {
+                    ProviderComponent: providerComponent,
+                    ConsumerComponent: consumerComponent,
+                },
+            },
+            includedComponents: [providerComponent, consumerComponent],
+            projectId: 'test-project',
+            req: {},
+        });
+        expect(html).toBe('<span data-node-type="text" data-node-id="root">provided-value</span>');
+    });
+    // Bug: https://discord.com/channels/972416966683926538/1458386701612351612/1458386701612351612
+    test('should render correct style overrides when component is used through packages', async () => {
+        const buttonComponent = {
+            name: 'ButtonComponent',
+            nodes: {
+                root: {
+                    type: 'element',
+                    tag: 'button',
+                    attrs: {},
+                    style: {
+                        backgroundColor: 'blue',
+                    },
+                    events: {},
+                    classes: {},
+                    children: [],
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const buttonWrapperComponent = {
+            name: 'ButtonWrapperComponent',
+            nodes: {
+                root: {
+                    type: 'component',
+                    name: 'ButtonComponent',
+                    attrs: {},
+                    children: [],
+                    events: {},
+                    style: {
+                        backgroundColor: 'red',
+                    },
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const pageComponent = {
+            name: 'PageComponent',
+            nodes: {
+                root: {
+                    type: 'component',
+                    name: 'ButtonWrapperComponent',
+                    attrs: {},
+                    children: [],
+                    events: {},
+                    style: {},
+                    package: 'test-package',
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: pageComponent,
+            formulaContext: {
+                data: {
+                    Attributes: {},
+                },
+                component: pageComponent,
+                env: {},
+                package: undefined,
+                toddle: {},
+            },
+            env: {},
+            files: {
+                components: {
+                    PageComponent: pageComponent,
+                },
+                packages: {
+                    'test-package': {
+                        components: {
+                            ButtonWrapperComponent: buttonWrapperComponent,
+                            ButtonComponent: buttonComponent,
+                        },
+                    },
+                },
+            },
+            includedComponents: [
+                pageComponent,
+                buttonWrapperComponent,
+                buttonComponent,
+            ],
+            projectId: 'test-project',
+            req: {},
+        });
+        // Own styling
+        expect(html).toContain('PageComponent:root');
+        // Package component styling override
+        expect(html).toContain('test-package/ButtonWrapperComponent:root');
+    });
+    // Bug: https://discord.com/channels/972416966683926538/1471073500520386760
+    test('should evaluate project formulas correctly inside package components', async () => {
+        const packageWrapperComponent = {
+            name: 'PackageWrapperComponent',
+            nodes: {
+                root: {
+                    type: 'element',
+                    tag: 'span',
+                    attrs: {},
+                    children: ['childText'],
+                    events: {},
+                },
+                childText: {
+                    type: 'slot',
+                    children: [],
+                },
+            },
+        };
+        const pageComponent = {
+            name: 'PageComponent',
+            route: {
+                path: [],
+                query: {},
+            },
+            nodes: {
+                root: {
+                    type: 'element',
+                    tag: 'div',
+                    attrs: {},
+                    children: ['firstChild', 'secondChild'],
+                    events: {},
+                    style: {},
+                },
+                firstChild: {
+                    type: 'text',
+                    value: functionFormula('test-formula'),
+                },
+                secondChild: {
+                    type: 'component',
+                    name: 'PackageWrapperComponent',
+                    package: 'test-package',
+                    attrs: {},
+                    children: ['nestedChild'],
+                    events: {},
+                },
+                nestedChild: {
+                    type: 'text',
+                    value: functionFormula('test-formula'),
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const files = {
+            components: {
+                PageComponent: pageComponent,
+            },
+            formulas: {
+                'test-formula': {
+                    name: 'test-formula',
+                    formula: valueFormula('output-from-test-formula'),
+                    version: 2,
+                    arguments: [],
+                },
+            },
+            packages: {
+                'test-package': {
+                    manifest: {
+                        name: 'test-package',
+                        commit: '123',
+                    },
+                    components: {
+                        PackageWrapperComponent: packageWrapperComponent,
+                    },
+                },
+            },
+        };
+        const formulaContext = getPageFormulaContext({
+            component: pageComponent,
+            branchName: 'main',
+            req: new Request('http://localhost'),
+            logErrors: true,
+            files,
+        });
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: pageComponent,
+            formulaContext,
+            env: formulaContext.env,
+            files,
+            includedComponents: [pageComponent, packageWrapperComponent],
+            projectId: 'test-project',
+            req: {},
+        });
+        // Expect the first child text node to render the formula value
+        expect(html).toInclude('<span data-node-type="text" data-node-id="firstChild">output-from-test-formula</span>');
+        // Expect the nested child text node inside the package component to also render the formula value,
+        // proving that the formula is evaluated correctly even when used inside a package component
+        expect(html).toInclude('<span data-id="0.1" data-node-id="root" class="cYXIdv PageComponent:secondChild"><span data-node-type="text" data-node-id="nestedChild">output-from-test-formula</span></span>');
+    });
+    // Bug: https://discord.com/channels/972416966683926538/1458387768504746068/1458387768504746068
+    // TODO: Fix rendering so that context is properly passed through slots. Rendering should go through inner components before slotted content.
+    test('should render context value when consumer is through multiple slots of a wrapped provider', async () => {
+        // Four components required for test setup:
+        // PageComponent - uses WrappedProviderComponent with a slotted ConsumerComponent
+        // WrappedProviderComponent - uses ProviderComponent and passes slot to it
+        // ProviderComponent - provides context value to its children through a slot
+        // ConsumerComponent - consumes context value and renders it
+        const pageComponent = {
+            name: 'PageComponent',
+            nodes: {
+                root: {
+                    type: 'component',
+                    name: 'WrappedProviderComponent',
+                    attrs: {},
+                    children: ['consumerSlot'],
+                    events: {},
+                    style: {},
+                },
+                consumerSlot: {
+                    type: 'component',
+                    name: 'ConsumerComponent',
+                    attrs: {},
+                    children: [],
+                    events: {},
+                    style: {},
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const wrappedProviderComponent = {
+            name: 'WrappedProviderComponent',
+            nodes: {
+                root: {
+                    type: 'component',
+                    name: 'ProviderComponent',
+                    attrs: {},
+                    children: ['slot'],
+                    events: {},
+                    style: {},
+                },
+                slot: {
+                    type: 'slot',
+                    children: [],
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const providerComponent = {
+            name: 'ProviderComponent',
+            formulas: {
+                contextValue: {
+                    name: 'contextValue',
+                    exposeInContext: true,
+                    formula: {
+                        type: 'value',
+                        value: 'provided-value',
+                    },
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'slot',
+                    children: [],
+                },
+            },
+        };
+        const consumerComponent = {
+            name: 'ConsumerComponent',
+            contexts: {
+                ProviderComponent: {
+                    formulas: ['contextValue'],
+                    workflows: [],
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'text',
+                    value: {
+                        type: 'path',
+                        path: ['Contexts', 'ProviderComponent', 'contextValue'],
+                    },
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: pageComponent,
+            formulaContext: {
+                data: {
+                    Attributes: {},
+                },
+                component: pageComponent,
+                env: {},
+                package: undefined,
+                toddle: {},
+            },
+            env: {},
+            files: {
+                components: {
+                    PageComponent: pageComponent,
+                    WrappedProviderComponent: wrappedProviderComponent,
+                    ProviderComponent: providerComponent,
+                    ConsumerComponent: consumerComponent,
+                },
+            },
+            includedComponents: [
+                pageComponent,
+                wrappedProviderComponent,
+                providerComponent,
+                consumerComponent,
+            ],
+            projectId: 'test-project',
+            req: {},
+        });
+        expect(html).toBe(`<span data-node-type="text" data-node-id="root">provided-value</span>`);
+    });
+    test('should render a component where a variable initial value references Page.Theme', async () => {
+        const component = {
+            name: 'ThemeVariableComponent',
+            route: {
+                path: [{ name: 'home', type: 'static' }],
+                query: {},
+                info: {
+                    theme: {
+                        formula: {
+                            type: 'value',
+                            value: 'dark',
+                        },
+                    },
+                },
+            },
+            variables: {
+                themeVar: {
+                    initialValue: {
+                        type: 'path',
+                        path: ['Page', 'Theme'],
+                    },
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'text',
+                    value: {
+                        type: 'path',
+                        path: ['Variables', 'themeVar'],
+                    },
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            events: [],
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: component,
+            formulaContext: getPageFormulaContext({
+                component: component,
+                branchName: 'main',
+                req: new Request('http://localhost'),
+                logErrors: true,
+                files: {
+                    components: { ThemeVariableComponent: component },
+                },
+            }),
+            env: {},
+            files: { components: { ThemeVariableComponent: component } },
+            includedComponents: [component],
+            projectId: 'test-project',
+            req: {},
+        });
+        expect(html).toBe('<span data-node-type="text" data-node-id="root">dark</span>');
+    });
+    test('should render a component where Page.Theme references a variables initial value', async () => {
+        const component = {
+            name: 'ThemeVariableComponent',
+            route: {
+                path: [{ name: 'home', type: 'static' }],
+                query: {},
+                info: {
+                    theme: {
+                        formula: {
+                            type: 'path',
+                            path: ['Variables', 'themeVar'],
+                        },
+                    },
+                },
+            },
+            variables: {
+                themeVar: {
+                    initialValue: {
+                        type: 'value',
+                        value: 'hotdog',
+                    },
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'text',
+                    value: {
+                        type: 'path',
+                        path: ['Page', 'Theme'],
+                    },
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            events: [],
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: component,
+            formulaContext: getPageFormulaContext({
+                component: component,
+                branchName: 'main',
+                req: new Request('http://localhost'),
+                logErrors: true,
+                files: {
+                    components: { ThemeVariableComponent: component },
+                },
+            }),
+            env: {},
+            files: { components: { ThemeVariableComponent: component } },
+            includedComponents: [component],
+            projectId: 'test-project',
+            req: {},
+        });
+        expect(html).toBe('<span data-node-type="text" data-node-id="root">hotdog</span>');
+    });
+    test('should render a child component where a variable initial value references Page.Theme from the parent', async () => {
+        const childComponent = {
+            name: 'ChildComponent',
+            variables: {
+                childThemeVar: {
+                    initialValue: {
+                        type: 'path',
+                        path: ['Page', 'Theme'],
+                    },
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'text',
+                    value: {
+                        type: 'path',
+                        path: ['Variables', 'childThemeVar'],
+                    },
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            events: [],
+        };
+        const parentComponent = {
+            name: 'ParentComponent',
+            route: {
+                path: [{ name: 'home', type: 'static' }],
+                query: {},
+            },
+            nodes: {
+                root: {
+                    type: 'component',
+                    name: 'ChildComponent',
+                    attrs: {},
+                    children: [],
+                    events: {},
+                    style: {},
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: parentComponent,
+            formulaContext: {
+                data: {
+                    Attributes: {},
+                    Page: {
+                        Theme: 'light',
+                    },
+                },
+                component: parentComponent,
+                env: {},
+                package: undefined,
+                toddle: {},
+            },
+            env: {},
+            files: {
+                components: {
+                    ParentComponent: parentComponent,
+                    ChildComponent: childComponent,
+                },
+            },
+            includedComponents: [parentComponent, childComponent],
+            projectId: 'test-project',
+            req: {},
+        });
+        expect(html).toBe('<span data-node-type="text" data-node-id="root">light</span>');
+    });
+    test('Component C should see the context value from Component A when Component B forwards its attribute using slots', async () => {
+        // Component A: Provider
+        // Accepts 'value' as attribute and provides it in context
+        const componentA = {
+            name: 'ComponentA',
+            attributes: {
+                value: {
+                    name: 'value',
+                    testValue: 'test',
+                },
+            },
+            formulas: {
+                exposedValue: {
+                    name: 'exposedValue',
+                    exposeInContext: true,
+                    formula: {
+                        type: 'path',
+                        path: ['Attributes', 'value'],
+                    },
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'element',
+                    tag: 'div',
+                    attrs: {},
+                    children: ['slot_node'],
+                    events: {},
+                    style: {},
+                },
+                slot_node: {
+                    type: 'slot',
+                    name: 'default',
+                    children: [],
+                },
+            },
+            contexts: {},
+            apis: {},
+            variables: {},
+            events: [],
+        };
+        // Component B: Intermediary
+        // Accepts 'val' as attribute and forwards it to Component A's 'value' attribute
+        const componentB = {
+            name: 'ComponentB',
+            attributes: {
+                val: {
+                    name: 'val',
+                    testValue: 'test',
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'element',
+                    tag: 'div',
+                    attrs: {},
+                    children: ['provider_node'],
+                    events: {},
+                    style: {},
+                },
+                provider_node: {
+                    type: 'component',
+                    name: 'ComponentA',
+                    attrs: {
+                        value: {
+                            type: 'path',
+                            path: ['Attributes', 'val'],
+                        },
+                    },
+                    children: ['slot_forwarder'],
+                    events: {},
+                    style: {},
+                },
+                slot_forwarder: {
+                    type: 'slot',
+                    name: 'default',
+                    children: [],
+                },
+            },
+            contexts: {},
+            formulas: {},
+            apis: {},
+            variables: {},
+            events: [],
+        };
+        // Component C: Consumer
+        // Consumes Component A's context 'exposedValue'
+        const componentC = {
+            name: 'ComponentC',
+            contexts: {
+                ComponentA: {
+                    formulas: ['exposedValue'],
+                    workflows: [],
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'text',
+                    value: {
+                        type: 'path',
+                        path: ['Contexts', 'ComponentA', 'exposedValue'],
+                    },
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        // Root component that renders B with a specific value and C in its slot
+        const rootComponent = {
+            name: 'RootComponent',
+            route: {
+                path: [],
+                query: {},
+                info: {
+                    theme: {
+                        formula: { type: 'value', value: 'light' },
+                    },
+                },
+            },
+            nodes: {
+                root: {
+                    type: 'component',
+                    name: 'ComponentB',
+                    attrs: {
+                        val: {
+                            type: 'value',
+                            value: 'expected-value',
+                        },
+                    },
+                    children: ['consumer_node'],
+                    events: {},
+                    style: {},
+                },
+                consumer_node: {
+                    type: 'component',
+                    name: 'ComponentC',
+                    attrs: {},
+                    children: [],
+                    events: {},
+                    style: {},
+                    slot: 'default',
+                },
+            },
+            contexts: {},
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+        };
+        const files = {
+            components: {
+                RootComponent: rootComponent,
+                ComponentB: componentB,
+                ComponentA: componentA,
+                ComponentC: componentC,
+            },
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: rootComponent,
+            formulaContext: getPageFormulaContext({
+                component: rootComponent,
+                branchName: 'main',
+                req: new Request('http://localhost'),
+                logErrors: true,
+                files,
+            }),
+            env: {},
+            files,
+            includedComponents: [rootComponent, componentB, componentA, componentC],
+            projectId: 'test-project',
+            req: {},
+        });
+        // Component C should render 'expected-value'
+        expect(html).toContain('expected-value');
+    });
+    test('should render ID formula with the expected order', async () => {
+        const component = {
+            name: 'IdTestComponent',
+            nodes: {
+                root: {
+                    type: 'element',
+                    tag: 'div',
+                    attrs: {
+                        'data-custom-id': {
+                            type: 'function',
+                            name: '@toddle/concatenate',
+                            arguments: [
+                                {
+                                    name: '0',
+                                    formula: { type: 'value', value: 'custom' },
+                                    type: { type: 'Array \\| String \\| Object' },
+                                },
+                                {
+                                    name: '0',
+                                    formula: {
+                                        type: 'function',
+                                        name: '@toddle/Id',
+                                        arguments: [],
+                                        display_name: 'Id',
+                                    },
+                                    type: { type: 'Array \\| String \\| Object' },
+                                },
+                            ],
+                        },
+                    },
+                    children: [],
+                    events: {},
+                    style: {},
+                },
+            },
+            formulas: {},
+            apis: {},
+            attributes: {},
+            variables: {},
+            events: [],
+            route: {
+                path: [],
+                query: {},
+            },
+        };
+        const { html } = await renderPageBody({
+            evaluateComponentApis: () => ({}),
+            component: component,
+            formulaContext: getPageFormulaContext({
+                component: component,
+                branchName: 'main',
+                req: new Request('http://localhost'),
+                logErrors: true,
+                files: {
+                    components: { IdTestComponent: component },
+                },
+            }),
+            env: {},
+            files: { components: { IdTestComponent: component } },
+            includedComponents: [component],
+            projectId: 'test-project',
+            req: {},
+        });
+        // Expect the ID formula to render with the correct order (0 in this case since it's the first formula rendered)
+        expect(html).toBe(`<div data-custom-id="custom_id_0_" data-id="0" data-node-id="root" class="ftaNwg"></div>`);
+    });
+});
+//# sourceMappingURL=components.test.js.map