obsolete-webpack-plugin icon indicating copy to clipboard operation
obsolete-webpack-plugin copied to clipboard

Feature: provide target browser to html template

Open Yegorich555 opened this issue 4 years ago • 0 comments

Right now we can redefine html-template that showed for unsupported browsers via ```template`` option which is a string. But this is not convenient.

Better if it will be not only string but function also that provides list of supported browsers... So we can create html-template and show to a user all supported browsers.

For example right now I use the following: webpack.config.js

const fs = require("fs");
const browserlist = fs.readFileSync("./.browserslistrc", "utf8");

const browserlistUri = browserlist
  .replace(/\r/g, "%2C")
  .replace(/\s/g, "+")
  .replace(/=/g, "%3D");

const ObsoleteTemplate = fs
  .readFileSync("./src/obsoleteBrowser.html", "utf8")
  .replace("{list}", browserlistUri);

...
    new ObsoleteWebpackPlugin({
        // it creates alert-script for not-supported browsers according to .browserlistrc
        name: "obsolete",
        promptOnNonTargetBrowser: true,
        template: ObsoleteTemplate
      }),
...

obsoleteBrowser.html

<div class="obsolete">
    <style>
     ...
    </style>
    <h4>Your browser is not supported (or older than required).</h4>
    <h5>
        It does not mean that site does not work but there are no guarantees that all will work fine.</br>
        All supported browsers you can find <a href="https://browserl.ist/?q={list}" target="_blank">here</a>
    </h5>
    <button id="obsoleteClose">&times;</button>
</div>

So you how you can see I implemented splitted html file and also js logic for reading .browserlistrc, *.html, parsing and preparing this to template. This is doesn't convenient a looks ugly. At the same time HtmlWebpackPlugin uses template as path-to-template option and I can use the global variables from the webpack inside such template.

My suggestion is:

  1. add templatePath option
  2. add some definition so you can get array of browsers into *.html
  3. update template option to string | function(listBrowsers) types

It will be fine if the configuring of this is more flexible.

Yegorich555 avatar Sep 19 '19 10:09 Yegorich555