Giters

elegantapp / pwa-asset-generator

Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images, favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

handling of vue cli index.html template logic

jaunt opened this issue · comments

commented

Describe the bug
I use vue cli which uses webpack to create the final index.html from a tempate. I have conditions set depending on dev, staging, production etc. When pwa-asset-generator runs, it doesn't handle the conditions properly.

To Reproduce
Input (I've cut out all the actual stuff to just show the overall logic blocks)

<!DOCTYPE html>
<html lang="en">
  <head>
  
    <% if (VUE_APP_DEPLOY_SITE === 'production') { %>

    <% } else if (VUE_APP_DEPLOY_SITE === 'staging') { %>

    <% } else if (VUE_APP_DEPLOY_SITE === 'dev') { %>

    <% } else if (VUE_APP_DEPLOY_SITE === 'localdev') { %>

    <% } %>
   
  </head>
  <body>
    <% if (VUE_APP_DEPLOY_SITE === 'production') { %>

    <% } else if (VUE_APP_DEPLOY_SITE === 'staging') { %>

    <% } else if (VUE_APP_DEPLOY_SITE === 'dev') { %>

    <% } else if (VUE_APP_DEPLOY_SITE === 'localdev') { %>

    <% } %>

  </body>
</html>

Output: (You can see that the head has been closed too early now.)

<!DOCTYPE html><html lang="en"><head>

... ALL THE ASSETS IT GENERATED CORRECTLY ...

</head><body>&lt;% if (VUE_APP_DEPLOY_SITE === 'production') { %&gt;

    &lt;% } else if (VUE_APP_DEPLOY_SITE === 'dev') { %&gt;

    &lt;% } else if (VUE_APP_DEPLOY_SITE === 'localdev') { %&gt;

    &lt;% } %&gt;
    
    &lt;% if (VUE_APP_DEPLOY_SITE === 'production') { %&gt;

    &lt;% } else if (VUE_APP_DEPLOY_SITE === 'staging') { %&gt;

    &lt;% } else if (VUE_APP_DEPLOY_SITE === 'dev') { %&gt;

    &lt;% } else if (VUE_APP_DEPLOY_SITE === 'localdev') { %&gt;

    &lt;% } %&gt;

</body></html>

Expected behavior

Would be nice if it could ignore all that tempting logic, but if that's out of scope, maybe a flag that makes in only insert the assets without doing anything else?

System (please complete the following information):

  • OS: linux
  • node version: 14.5.3
  • npm version: 7.11.2
  • cli version: 4.1.1
commented

Hi @jaunt, thanks for reporting this issue. PAG currently only supports raw HTML modification.

If you'd like to get the output only and paste it yourself, you can always remove the -i option and CLI will print the result to the console.

I will have a look for building a webpack plugin to integrate with PAG later on. Thanks!