search

webdiscus / html-bundler-webpack-plugin

Renders Eta, EJS, Handlebars, Nunjucks, Pug, Twig templates "out of the box". Uses HTML template as entry point. Resolves source files of scripts, styles, images in HTML. Supports for Vue.
ISC License
119 stars 12 forks source link

Access @root in json #54

Closed 5ulo closed 7 months ago

5ulo commented 7 months ago

Current behaviour

In Handlebars when I am inside iteration loop I am not able to access @root of the json data. For example inside loop of foo if I want access {{bar}} I should do it with {{@root.bar}} or less comfortable and traversing upwards {{../bar}}. Traversing is usable but loop inside loop ... will look like {{../../bar}} and also this is not usable if I want to use the bar inside partial inside loop..

Expected behaviour

Calling @root.bar should output the value of bar in root of the data.json

Reproduction Example

Basic data.json:

{
    "foo": [
        "a", "b", "c"
    ],
    "bar": [
        "alfa", "beta"
    ]
}

Simple loop

{{#each foo}}
    {{this}}
    {{#each @root.bar}}
        {{this}}
    {{/each}}
{{/each}}

nor

{{#each foo}}
    {{this}}
    {{@root.bar}} {{!-- outputs nothing --}}
{{/each}}

Environment

Additional context

This behaviour was on this plugin v2.* too. @data variables at handlebars documentation: https://handlebarsjs.com/api-reference/data-variables.html

webdiscus commented 7 months ago

Hello @5ulo,

thanks for the issue report. I'll try to fix it in a few days.

webdiscus commented 7 months ago

@5ulo

I can't reproduce the issue. See the test case. All @data variables are accessible inside the loop.

Please create a small repo with reproducible issue.

5ulo commented 7 months ago

@webdiscus so I found @root cant be accessed if you extend page with layout page. Just to clarify the situation: dir pages - for example index, home, contact... simply said its everything between <body></body> dir partials/layout - contains page layouts (<html> with #block) dir partials/parts - contains regular partials So the process in my case is to assign some data (title, body class...) inside index.hbs then fill the partial and extend to layout. I made a git as you requested

webdiscus commented 7 months ago

@5ulo thanks for the clarification. Yes, now I can reproduce it. Obviously this is a bug in the block/partial helper. I will fix it.

webdiscus commented 7 months ago

@5ulo

the issue is fixed in the version 3.1.3. Thank you!

5ulo commented 7 months ago

checked.. is working perfectly.. done .. thank You! Closing :)

webdiscus commented 7 months ago

@5ulo

you can simplify the config using the references preprocessor and preprocessorOptions in plugin options w/o loaderOptions: {...}:

new HtmlBundlerPlugin({
    entry: './src/pages',
    data: './src/data.json',
    preprocessor: 'handlebars',
    preprocessorOptions: {
        root: './src/pages',
        views: [
            './src/partials',
        ],
        partials: [
            './src/partials',
        ],
        helpers: [
            './src/helpers',
        ],
    },
}),

The loaderOptions is the reference to modules.rule[HTMLBundlerLoader].options. The plugin adds own HTMLBundlerLoader into Webpack modules automatically.