feat(html): support env replacement

[bluwy]

Description

Support %ENV_NAME% syntax in HTML files. Close #3105

Additional context

1. I made it a pre-hook for transformIndexHtml as otherwise normal-hook transforms like vite-plugin-html may get a parse error.
2. It also supports %MODE%, %PROD%, etc, which are a little short, but maybe that's fine.
3. It doesn't support %SSR% as I don't think it makes sense in HTML files.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[Tal500]

Isn't this a breaking change?

[bluwy]

It would break if someone happens to use %something% and has an env named "something". If not %something% would be left as-is. I think it's quite unlikely that this would happen and break things, we also used to merge features like this in the past.

[patak-dev]

It would break if someone happens to use %something% and has an env named "something". If not %something% would be left as-is.

What do you think if we also parse the remaining %VITE_...% placeholders and emit a warning about this env being missed? I think it will be a common mistake and we could still be safe if we only check for the env prefixed ones.

[Tal500]

Additionally, SvelteKit uses %% in a different manner, but it might not matter since they have their own HTML template parsing and HTML generation.

[bluwy]

What do you think if we also parse the remaining %VITE_...% placeholders and emit a warning about this env being missed? I think it will be a common mistake and we could still be safe if we only check for the env prefixed ones.

Yeah I think this is good to have too. I'll add a quick warning for this, and maybe we could improved later if needed.

[PunkFleet]

Is this feature available in 4.1.4?

[bluwy]

It's not merged yet, so no.

[sapphi-red]

One nit pick but LGTM 👍

[lucassonsinlima]

hi! I know this PR was just merged like 2 days ago, but since it's in main branch, we should expect some release for this? ty!

[patak-dev]

@lucassonsinlima it is already released as vite@4.2.0-beta.1. Next week 4.2 stable will go out if there aren't regressions and the current issues in ecosystem-ci are resolved

[lucassonsinlima]

@lucassonsinlima it is already released as vite@4.2.0-beta.1. Next week 4.2 stable will go out if there aren't regressions and the current issues in ecosystem-ci are resolved

thank you!!

[aardvarkk]

@bluwy @patak-dev Is there anything incorrect about trying to use it in the following way:

    <link rel="icon" href="%VITE_FAVICON_URL%" />

It works well in the development environment, but when I try to run build I get the following:

error during build:
URIError: URI malformed

For this to work, should this transform be performed as a preHook rather than a normalHook?

[patak-dev]

Thanks for the report @aardvarkk, #12404 should fix your issue.

[Eduruiz]

That's so cool! updated vite to use it here.
there is some way to check an env variable (an if statement) to dynamically ad some script on it?

[gsi-chao]

Thank you, guys. 🎉

[fritzfelix]

@bluwy Does this enable conditionals too, i.e. the logical equivalent of the following ejs syntax:

<% if (process.env.REACT_APP_ENV !== 'production') { %>
  <meta name="robots" content="noindex,nofollow" />
<% } %>

[XiSenao]

@fritzfelix I feel that vite may not natively support it, perhaps you can use a similar plugin to pre-parse the ejs module.

import ejs from 'ejs';

{
  enforce: 'pre',
  name: 'ejs-inject',
  transformIndexHtml: {
    order: 'pre',
    handler(html) {
      const template = ejs.compile(html);
      process.env.REACT_APP_ENV = 'production';
      return template(process.env);
    }
  }
}

[bluwy]

Yeah, conditionals are not planned for Vite and is documented at https://vitejs.dev/guide/env-and-mode.html#html-env-replacement. We don't want to add a potential proprietary templating style to the HTML by default.

[nuthinking]

I ended up using ViteEjsPlugin, I couldn't figure out how to use this feature 🤷‍♂️