Skip to content

Proposal to add transformEntryToHtml hook in plugins #8000

@saurabhdaware

Description

@saurabhdaware

Clear and concise description of the problem

Think of this directory structure-

|- nested /
|--|- about.ejs
|- index.ejs
|- main.js 
|- vite.config.js

Currently, seems like there is no clear way to do the <-- template --> to HTML conversion during SSG. transformIndexHtml only runs for files with .html extension and transform can only output JavaScript and not HTML.

In the above example, I am guessing the implementation would look something like this-

- Turn EJS to temporary HTML files
- Set those newly created HTML files in the `input` option while calling vite.build 
- Delete the temporary HTML files (Since they are not going to have all the styles and scripts included)

This is exactly how I am doing things in the SSG that I am working on-

https://github.com/abelljs/abell/blob/387cf15dc81471a4f1e722fc9ad28541c64de2f5/packages/abell/src/cli/generate.ts#L53-L73

  • I turn .abell -> temporary .html files (they don't have prod scripts and styles in them)
  • I run Vite's build by passing these new HTML files as input so that they will take care of injecting scripts and styles and generate dist
  • Then I delete the temporary HTML files

This seems to be missing for all template engines.

For example-

Suggested solution

A new hook called transformEntryToHtml.

Example-

// plugin code
export function ViteEjsPlugin(): Plugin {
  return {
    name: "vite-plugin-ejs",
    // Similar to `transformIndexHtml` except it runs for any entry file irrespective of the extension
    transformEntryToHtml(ejsCode: string): string {
      const html = ejs.render(ejsCode)
      return html   
    }
  };
}
// Plugin consumer's vite.config.ts
// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: ['./index.ejs', './nested/about.ejs']
    }
  }
})

This will simplify the SSG flow a lot and will allow plugins like vite-plugin-ejs to have .ejs extension.

It will allow SSGs like Abell to build the output without generating temporary HTML files during the build.

Alternative

Alternative would be some way to call transformIndexHtml hook for files that are not HTML (don't have .html extension).

Additional context

Validations

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions