webdiscus/html-bundler-webpack-plugin

Access @root in json

5ulo opened this issue · 7 comments

5ulo commented

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

  • OS: macOS
  • version of Node.js: v18.16.0
  • version of Webpack: 5.89.0
  • version of the Plugin: 3.0.3

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

Hello @5ulo,

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

webdiscus commented

@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

@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

@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

@5ulo

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

5ulo commented

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

  • 🎉1
webdiscus commented

@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',
        ],
    },
}),
  • data is reference to loaderOptions.data
  • preprocessor is reference to loaderOptions.preprocessor
  • preprocessorOptions is reference to loaderOptions.preprocessorOptions

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

  • ❤️1