About Handlebars partials in SQLPage

[YunusMechery]

For below scenario, I am getting error like Helper each_row not found. As per SQLPage documentation, each_row helper is available. Any guidence on what is missing? Is it because shell-empty component?

/sqlpage/templates/nested_element.handlebars

<{{#if tagName}}{{tagName}}{{else}}div{{/if}} 
    {{~#if id}} id="{{id}}"{{/if~}}
    {{~#if name}} name="{{name}}"{{/if~}} 
    {{~#if class}} class="{{class}}"{{/if~}}

    {{~#if hx_get}} hx-get="{{hx_get}}"{{/if~}}
    {{~#if hx_post}} hx-post="{{hx_post}}"{{/if~}}
    {{~#if hx_target}} hx-target="{{hx_target}}"{{/if~}}
    {{~#if hx_swap}} hx-swap="{{hx_swap}}"{{/if~}}
    {{~#if hx_trigger}} hx-trigger="{{hx_trigger}}"{{/if~}}
    {{~#if hx_indicator}} hx-indicator="{{hx_indicator}}"{{/if~}}
    {{~#if hx_confirm}} hx-confirm="{{hx_confirm}}"{{/if~}}
>
    {{!-- 1. Render immediate text content --}}
    {{#if contents}}
        {{{contents}}}
    {{/if}}

    {{!-- 2. Render nested components --}}
    {{#if sub_components}}
        {{#each_row}} 
                {{> nested_element this}}
        {{/each_row}}
    {{/if}}
    
    {{!-- 3. HTMX Indicator --}}
    <span class={{~#if hx_indicator}}"{{hx_indicator}}"{{else}}"htmx-indicator spinner"{{/if~}}></span>

</{{#if tagName}}{{tagName}}{{else}}div{{/if}}>

index.sql

select 'shell-empty' as component
, 'htmx.js' as javascript
;

SELECT 
    'nested_element' as component,
    'div' as tagName,
    -- 'card-outer' as class,
    'Parent' as contents,
    jsonb_build_array(
        jsonb_build_object(
            'nested_element','component'
            ,'tagName', 'div'
            , 'contents', 'Child Level 1',
                'sub_components', jsonb_build_array(
                                    jsonb_build_object(
                                'nested_element','component'
                                ,'tagName', 'div'
                                ,'contents', 'Child Level 2'
                                    )
                                )
        )
    ) as sub_components;

getting error like below

Error in query number 1
We are sorry, but an error occurred while generating this page. You should contact the site's administrator.

Error rendering "SQLPage component before each block" line 22, col 9: Helper not found each_row
Backtrace
Helper not found each_row
Note: You can hide error messages like this one from your users by setting the 'environment' configuration option to 'production'.

[lovasoa]

each_row needs to be at the top level of the template, not inside an if.

And the rows it renders need to be passed as row-level parameters. See https://sql-page.com/documentation

And referencing other components (or the same component) inside handlebars partials is not supported.

The html structure of your application needs to be declared explicitly and statically in your handlebar components, not in your sql.

[YunusMechery]

This issue is solved using "inline partials" in Handlebars. Now SQLPage can be like HTML unlimted nesting. One compnent can embed another component. Below one is a htmx powered universal component!

{{#*inline "nested_element"}}
<{{~#if tagName}}{{tagName}}{{else}}div{{/if~}} 
    {{~#if id}} id="{{id}}"{{/if~}}
    {{~#if name}} name="{{name}}"{{/if~}} 
    {{~#if class}} class="{{class}}"{{/if~}}

    {{~#if hx_get}} hx-get="{{hx_get}}"{{/if~}}
    {{~#if hx_post}} hx-post="{{hx_post}}"{{/if~}}
    {{~#if hx_target}} hx-target="{{hx_target}}"{{/if~}}
    {{~#if hx_swap}} hx-swap="{{hx_swap}}"{{/if~}}
    {{~#if hx_trigger}} hx-trigger="{{hx_trigger}}"{{/if~}}
    {{~#if hx_indicator}} hx-indicator="{{hx_indicator}}"{{/if~}}
    {{~#if hx_confirm}} hx-confirm="{{hx_confirm}}"{{/if~}}
>   {{!-- 1. Render immediate text content --}}
    {{~#if contents}} {{{contents}}} {{/if}}
    {{!-- 2. Render nested components --}}
    {{~#if sub_components}}
        {{~#each sub_components as |sub_component|}} 
                {{> nested_element sub_component}}
        {{/each~}}
    {{/if~}}        
    {{!-- 3. HTMX Indicator --}}
    <span class={{~#if hx_indicator}}"{{hx_indicator}}"{{else}}"htmx-indicator spinner"{{/if~}}></span>
</{{~#if tagName}}{{tagName}}{{else}}div{{/if}}>
{{/inline}}

{{> nested_element this}}

select 'shell' as component
, 'htmx.js' as javascript
;

SELECT 
    'nested_element' as component,
    'div' as tagName,
    1 as id,
    'Parent' as contents,
    jsonb_build_array(
        jsonb_build_object(
            'component','nested_element'
            ,'tagName', 'div'
            , 'id', 2
            , 'contents', 'Child Level 1',
                'sub_components', jsonb_build_array(
                                    jsonb_build_object(
                                'component','nested_element'
                                ,'tagName', 'div'
                                , 'id', 3
                                ,'contents', 'Child Level 2'
                                    )
                                )
        )
    ) as sub_components;

<html>
<body>
<!--StartFragment-->
<div id="1">    Parent
<div id="2">    Child Level 1
<div id="3">    Child Level 2
<span class="htmx-indicator spinner"></span>
</div>
<span class="htmx-indicator spinner"></span>
</div>
<span class="htmx-indicator spinner"></span>
</div>

<!--EndFragment-->
</body>
</html>

[lovasoa]

This is cool