alexlafroscia / vite-plugin-handlebars Goto Github PK

Thank you for your awesome work on this plug-in.

After upgrading to Vite 5, the following warnings appear after startup:

plugin 'handlebars' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'handlebars' uses deprecated 'transform' option. Use 'handler' option instead.

As far as I can tell, Vite makes a hard assumption that the file it starts to resolve linked files from is an HTML file. There is code I've seen internally that validates that the extension is .html.

It would be nice if we could use .hbs for these files, if we're going to have Handlebars syntax in them, just for the purposes of syntax highlighting and the like.

I'm not sure what allowing non-html files at the "top level" would look like, but it would be really nice to support!

The workflow ci.yml is referencing action actions/checkout using references v1. However this reference is missing the commit a6747255bd19d7a757dbdda8c654a9f84db19839 which may contain fix to the some vulnerability.
The vulnerability fix that is missing by actions version could be related to:
(1) CVE fix
(2) upgrade of vulnerable dependency
(3) fix to secret leak and others.
Please consider to update the reference to the action.

I would really like to be able to support relative links in partials that are resolved relative to the partial itself rather than the file that the partial is injected into. This would make it nicer to keep, for example, CSS and JS files related to that partial in a directory with the partial itself.

Ideally, this would happen by Vite exposing the required logic to resolve these links in such a way that they can be run on the .hbs partial files. I looked into this a bit, and that doesn't seem possible (at this time, at least).

We could parse and re-write the links within this plugin, but it would be really nice to re-use the logic from Vite here instead...

I looked into running transformIndexHtml on each partial, which did not work initially but is probably the best way to go. I'm not sure if there would be pitfalls here due to the plugin potentially running the hbs transform on the partials before they are actually injected, though. There's investigation to do here!

Another option would be to provide a helper that solves this. It would do something similar to the currently-provided (and intended-to-be-removed) resolve-from-root helper, but something like resolve-relative, that handles re-writing the path. This is probably easier than trying to run transformIndexHtml on each partial before injecting them.

I have a setup with this configuration:

import { resolve } from "path";
import handlebars from "vite-plugin-handlebars";

const pageData = {
  "/src/pages/index.html": {
    title: "Homepage"
  },
  "/src/pages/subpage/index.html": {
    title: "Subpage"
  }
};

const handlebarsOptions = {
  context(pagePath) {
    console.log("pagePath =", pagePath);
    return pageData[pagePath];
  },
  partialDirectory: resolve(__dirname, "src/pages/partials")
};

export default {
  plugins: [handlebars(handlebarsOptions)]
};

A codesandbox is here:
https://codesandbox.io/s/vite-with-handlebars-61te7

As the terminal shows, the console.log does not pick up the current configuration.

What am I doing wrong?

When I hit save the therminal shows [vite] page reload partiasl/fine.html but the browser never reloads.

I did a investigation I found out that there is a check if the file changed must trigger a full-reload, and that check is broken. At least at windows.

The check:

The values (set and filename) being checked:

For some reason, the slashes are the being misplaced.

I have noticed that the problem appear immediately after the partial filename has been added to the set

My vite config is the following:

export default defineConfig({
  root: "src",
  assetsInclude: ["/src/partials/*"],
  plugins: [
    handlebarsPlugin({
      partialDirectory: resolve(__dirname, "src/partials"),
    }),
  ],
});

Suggestion:
Remove the check partialsSet.has(file), looks like its no necessary

OS: Windows 11
Node v20.9.0 & v20.11.1

It works fine on Mac OS, however the output for {{resolve-from-root ''relative/path/to/file.ext""}} is totally wrong on Windows. It will be return "C:\relative\path\to\file.ext"

I basically have the same issue raised in this stack overflow, but the one response does not solve my issue -> https://stackoverflow.com/questions/74877312/vite-plugin-handlebars-not-working-with-multipage-set-up

I can only get partials to work in the index.html file at my project's root, which seems to make this plugin not very useful as only one single file in my project can receive partials. How can we use this plugin in order to use partials in both the index.html file at the root of the project and files in the public directory?

Here is my vite.config:

import { defineConfig } from 'vite'
import handlebars from 'vite-plugin-handlebars';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [handlebars({
    partialDirectory: resolve(__dirname, 'public/partials')
  })],
})

Here is my project structure:

├── package.json
├── vite.config.js
├── index.html
└── public
    ├── about
        ├── about.html
    ├── contact
        ├── contact.html
    └── partials
        ├── header.hbs
        └── footer.hbs

Basically, {{> header }} works as expected on the index.html page, but shows up as raw text on the about.html page and the contact.html pages. Am I missing something obvious in my config?I built my project using the Vanilla JS scaffold right from the Vite docs.

• Ensure partial directory can not exist
• Ensure partial directory can exist but be empty

Thanks for the Plugin,
there is one feature I'm missing. Could you add support for a list of partial directories?
Thanks

I'm not sure exactly how this would work, but it would be really nice to (somehow) inform Vite of the fact that the Handlebars partials are part of the "dependency graph" of the page being viewed in the browser.

Currently, it seems like the changes are processed immediately, but the browser doesn't actually refresh in real-time.

I'm not actually sure why the dev server picks up the changes to a partial without re-starting. Maybe Vite is monitoring the entire local directory? Or is just re-running the bundling step on every browser refresh? Not sure right now.

• Automatically trigger browser refresh when a partial changes

Unfortunately it doesn't work with 1.2.0 and 1.3.0. Maybe I missed smth, this is my config from the readme:

import { resolve } from 'path';
import handlebars from 'vite-plugin-handlebars';

export default {
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, 'partials'),
    }),
  ],
};

`{{>head/head}}``this is in my startpage.html.

When I do a yarn build I got this error:

[vite:build-html] The partial head could not be found
file: C:/Projekte/Others/smth/pages/startpage/startpage.html
error during build:
Error: The partial head/head could not be found

Originally posted by @Chris2011 in #30 (comment)

reloadOnPartialChange: true, added to vite.config.js but it makes no difference.

Any solutions ?

It would be great if there were an option to return a precompiled template instead of raw html.

This would allow handlebar files to be imported and the resulting precompiled templates reused with different contexts.

import template from './template.hbs`

const htmlJoe = template({ name: 'Joe' })
const htmlJane = template({ name: 'Jane' })

There are some warnings after updating to Vite v5

If there is a <script> or css load inside of a partial, it seems like changes in that file won't trigger a reload.

The workflow ci.yml is referencing action actions/checkout using references v1. However this reference is missing the commit a6747255bd19d7a757dbdda8c654a9f84db19839 which may contain fix to the some vulnerability.
The vulnerability fix that is missing by actions version could be related to:
(1) CVE fix
(2) upgrade of vulnerable dependency
(3) fix to secret leak and others.
Please consider to update the reference to the action.

This can only be done once the repo is at least a month old

Expected: suppose we have a file public/test/index.html, the file should be copied to dist/test/index.html.
Current Beavior: it's copied to dist/public/test/index.html.
Config:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import handlebars from 'vite-plugin-handlebars';

export default defineConfig({
  plugins: [
    handlebars({partialDirectory: resolve(__dirname, 'partials')})
  ],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        standards: resolve(__dirname, 'public/test/index.html')
      }
    }
  }
})