Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

handlebars partials support is not convenient. #9

Open
larryhe opened this issue Jan 18, 2016 · 4 comments
Open

handlebars partials support is not convenient. #9

larryhe opened this issue Jan 18, 2016 · 4 comments

Comments

@larryhe
Copy link

larryhe commented Jan 18, 2016

Hi @davis , this is a great SystemJs plugin. Really love it. but its handlebar partials support is not really convenient. because for each partials, you have to manually register it beforehand. So how can I make it automatically register partials while parsing handlebars template? I know require-handlebars-plugin does this type of things. (https://github.com/SlexAxton/require-handlebars-plugin/blob/master/hbs.js). Thanks for the great job.

@davis
Copy link
Owner

davis commented Jan 25, 2016

Hey Larry, could you provide an example of what you mean? Thanks!

@larryhe
Copy link
Author

larryhe commented Jan 26, 2016

Hi @davis , I mean this plugin should be able to parse handlebar template and automatically register partials. for example. I have below handlebar template. the plugin should extract /path/to/myPartial out and automatically register it. requirejs-handlebar-plugin works that way. It's the same thing for helper. Not sure If i am making sense. Thanks.

{{> /path/to/myPartial }}

@BennettJames
Copy link
Collaborator

This is something I recently dealt with in a custom handlebars plugin. Here's a basic overview of how it works:

  • Steals the function findPartials from here to traverse the DOM of a template to get a list of partials.
  • Overrides the fetch method on the handlebars plugin to add dependencies to the template. Looks a bit like this:
export function fetch(load, fetcher) {
  return fetcher(load)
    .then(templateSrc => {
      let partials = findPartials(Handlebars.parse(templateSrc));
      // adds partials to dependencies
      return templateSrc;
    });
}
  • Sends the partials to a separate partial plugin. This requires registering the partial plugin, and amending the attached partials to dependencies to have the right plugin attached. So if you say register the plugin as hbsTmpl, then you'd expand the above // adds partials to dependencies to:
load.metadata.deps = partials.map(p => `${partial}!hbsTmpl`);
  • The main plugin then needs to list the dependencies in the output code. System.js will automatically call the partial plugin on each listed dependency. Each partial will in turn have to do its own discovery & attachment of dependencies to deal with nested partials.
  • The partial plugin looks more-or-less the same as the main plugin, but has different handling of the generated code. The template is specifically registered as a partial rather than exporting it, like so:
let depRequires = load.metadata.deps.map(d => `require("${d}");`;
load.source = `
${depRequires.join('\n')}
require('${handlebarsRuntimePath}').registerPartial(${load.name}, Handlebars.template(${precompiled});
`;

It's rough, but I could fold it up into a PR if there's interest. There's a few points that are definitely sub-par that will need some work before it's really "merge ready", though.

@davis
Copy link
Owner

davis commented Jan 28, 2016

@BennettJames would definitely be open to PRs!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants