Feature/vite

README.md

@@ -1,8 +1,6 @@
-# base-href-runtime-webpack-plugin
+# base-href-runtime-vite-plugin
 
-[![npm version](https://badge.fury.io/js/base-href-runtime-webpack-plugin.svg)](https://badge.fury.io/js/base-href-runtime-webpack-plugin)
-
-Extension for [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) to programmatically insert or update [`<base href="...">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag **in runtime** depending on *window.location.pathname*.
+Plugin for Vite to programmatically insert or update [`<base href="...">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag **in runtime** depending on _window.location.pathname_.
 
 It inserts inline `<script>` in your `index.html` output which generates (rewrites) `<base href="...">`
 
@@ -13,6 +11,7 @@ When your application is proxied with many different domains and prefixes you mi
 ### Example
 
 Your application is hosted on `example.com` and you have 2 known entrypoints (proxies) for this application:
+
 ```
 app.test.com/ui/app -> example.com
 app2.io/ui/test/entrypoint -> example.com
@@ -21,113 +20,110 @@ app2.io/ui/test/entrypoint -> example.com
 So you want to open `app.test.com/ui/app` and resolve `index.js` request to `app.test.com/ui/app/index.js` (`-> example.com/index.js`)
 
 For this purpose you want to generate different `<base>` tag:
+
 ```html
 <!-- for app.test.com/ui/app/ (/ui/app/) -->
-<base href="/ui/app/">
-<script src="index.js" /> <!-- /ui/app/index.js -->
+<base href="/ui/app/" />
+<script src="index.js" />
+<!-- /ui/app/index.js -->
 
 <!-- for app2.io/ui/test/entrypoint (/ui/test/entrypoint/) -->
-<base href="/ui/test/entrypoint/">
-<script src="index.js" /> <!-- /ui/test/entrypoint/index.js -->
+<base href="/ui/test/entrypoint/" />
+<script src="index.js" />
+<!-- /ui/test/entrypoint/index.js -->
 ```
 
 Thus `<base>` tag for the same `index.html` has to be generated **in runtime**.
 
 # Installation
 
-For webpack v5 use latest (^1.1.0):  
-`npm i --save-dev base-href-runtime-webpack-plugin`
+`npm i --save-dev base-href-runtime-vite-plugin`
 
 # Usage
 
-Prepare `HtmlWebpackPlugin`, it should generate *relative* paths for assets.
-
-```diff
-new HtmlWebpackPlugin({
-  template: 'public/index.html',
-  filename: 'index.html',
-  // ...,
-- publicPath: '/',
-+ publicPath: 'auto', // assets paths must be relative
-+ base: '/' // same as fallbackBaseHref, see https://github.com/jantimon/html-webpack-plugin#base-tag
-}),
-```
-
-Init `base-href-runtime-webpack-plugin`:
+Init `base-href-runtime-vite-plugin`:
 
 ```js
-const BaseHrefRuntimeWebpackPlugin = require('base-href-runtime-webpack-plugin');
-
-plugins: [
-  // ...,
-  new BaseHrefRuntimeWebpackPlugin({
-    fallbackBaseHref: '/', // in case when we didn't match location.pathname 
-    publicPaths: [ // availabled prefixes. Order is important!
-      '/ui/app/', // <base href="/ui/app/">
-      '/ui/test/entrypoint/', // <base href="/ui/test/entrypoint/">
-      '/a/b/c/d/e/', // <base href="/a/b/c/d/e/">
-    ],
-  }),
-]
+// vite.config.js
+import { defineConfig } from "vite";
+import baseHrefRuntimeVitePlugin from "base-href-runtime-vite-plugin";
+
+export default defineConfig({
+  plugins: [
+    baseHrefRuntimeVitePlugin({
+      fallbackBaseHref: "/", // in case when we didn't match location.pathname
+      publicPaths: [
+        // availabled prefixes. Order is important!
+        "/ui/app/log/", // <base href="/ui/app/log">
+        "/ui/app/", // <base href="/ui/app/">
+        "/ui/test/entrypoint/", // <base href="/ui/test/entrypoint/">
+        "/a/b/c/d/e/", // <base href="/a/b/c/d/e/">
+      ],
+    }),
+  ],
+});
 ```
 
-It will inject `<script></script>` in your `index.html`. This script compares current `window.location.pathname` and provided `publicPaths`. Then it updates `<base href="...">` if we have a match. Otherwise it sets *fallbackBaseHref* value in your `<base href="...">`
+It will inject `<script></script>` in your `index.html`. This script compares current `window.location.pathname` and provided `publicPaths`. Then it updates `<base href="...">` if we have a match. Otherwise it sets _fallbackBaseHref_ value in your `<base href="...">`
 
 Plugin **leaves your template untouched** if `fallbackBaseHref` and `publicPaths` options are not provided.
 
-### Setup application router (optional) 
+### Setup application router (optional)
 
 You might want to use `publicPaths` to prepare your application router (`react-router`, `vue-router`, etc.)
 
 <details>
   <summary>Example with react-router</summary>
 
-  ```jsx
-  import * as React from 'react';
-  import * as ReactDOM from 'react-dom';
-  import { BrowserRouter as Router } from 'react-router-dom';
-  import { publicPaths, fallbackBaseHref } from './lib/constants/config'; // use same variable as publicPaths in you webpack.config.js
-
-  const App = ({ basename }) => {
-    <Router basename={basename}>
-      {/* ... your app content ... */}
-    </Router>
-  }
-
-  const getBasename = (pathname) => {
-    // @NOTE: You may straightaway return baseURI
-    // return document.baseURI;
-
-    const publicPath = publicPaths.find(publicPath => pathname.includes(publicPath.replace(/\/$/, '')));
-    return publicPath || fallbackBaseHref;
-  }
+```jsx
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { BrowserRouter as Router } from "react-router-dom";
+import { publicPaths, fallbackBaseHref } from "./lib/constants/config"; // use same variable as publicPaths in you vite.config.js
+
+const App = ({ basename }) => {
+  <Router basename={basename}>{/* ... your app content ... */}</Router>;
+};
+
+const getBasename = (pathname) => {
+  // @NOTE: You may straightaway return baseURI
+  // return document.baseURI;
+
+  const publicPath = publicPaths.find((publicPath) =>
+    pathname.includes(publicPath.replace(/\/$/, ""))
+  );
+  return publicPath || fallbackBaseHref;
+};
+
+ReactDOM.render(
+  <App basename={getBasename(window.location.pathname)} />,
+  document.getElementById("#app")
+);
+```
 
-  ReactDOM.render(<App basename={getBasename(window.location.pathname)} />, document.getElementById('#app'));
-  ```
 </details>
 
 # Caveats
 
 <details>
   <summary>Excessive requests (duplicated requests)</summary>
 
-  https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#preload_scanner
-
+https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#preload_scanner
 
-  > The preload scanner will parse through the content available and request high priority resources like CSS, JavaScript, and web fonts. <...> It will retrieve resources in the background so that by the time the main HTML parser reaches requested assets, they may possibly already be in flight, or have been downloaded.
+> The preload scanner will parse through the content available and request high priority resources like CSS, JavaScript, and web fonts. <...> It will retrieve resources in the background so that by the time the main HTML parser reaches requested assets, they may possibly already be in flight, or have been downloaded.
 
+It means that a browser requests all page's resources before you execute any `<script>`. So if your `<base href="...">` tag is being changed by the `<script>` then your browser will **repeat these requests again**.
 
-  It means that a browser requests all page's resources before you execute any `<script>`. So if your `<base href="...">` tag is being changed by the `<script>` then your browser will **repeat these requests again**.
+Example:
 
-  Example:
-  ```html
+```html
 <html>
   <head>
-    <base href="/unknown/">
+    <base href="/unknown/" />
     <script type="text/javascript">
-      console.log('Initial document.baseURI:', document.baseURI);
-      document.querySelector('base').href = '/'
-      console.log('New document.baseURI:', document.baseURI);
+      console.log("Initial document.baseURI:", document.baseURI);
+      document.querySelector("base").href = "/";
+      console.log("New document.baseURI:", document.baseURI);
     </script>
     <script src="js/index.js"></script>
 
@@ -136,9 +132,9 @@ You might want to use `publicPaths` to prepare your application router (`react-r
     <!-- So <script src="..." /> and <script src="..."></script> have different behaviour (WTF?!) -->
   </head>
 </html>
-  ```
-  
-  Chrome's Network tab result (`js/index.js` request duplicated):
+```
+
+Chrome's Network tab result (`js/index.js` request duplicated):
 
   <img width="676" alt="chrome_LmDvH3YJzy" src="https://user-images.githubusercontent.com/19373212/152134966-5cd1699b-4951-4a41-bb3a-2a733b1ac754.png">
 </details>
@@ -151,9 +147,9 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base#browser_compatibi
 
 # References
 
-https://www.npmjs.com/package/base-href-webpack-plugin
+https://www.npmjs.com/package/base-href-vite-plugin
 
-https://github.com/jantimon/html-webpack-plugin#base-tag
+https://github.com/jantimon/html-vite-plugin#base-tag
 
 # Contribution
 

index.d.ts

@@ -1,12 +1,8 @@
-import { Compiler, WebpackPluginInstance } from 'webpack';
+declare const  BaseHrefRuntimeVitePlugin  = (options: BaseVitePluginOptions) => any;
 
-declare interface BaseHrefRuntimeWebpackPluginOptions {
-  fallbackBaseHref?: string;
-  publicPaths?: string[];
+interface BaseVitePluginOptions {
+    fallbackBaseHref?: string;
+    publicPaths?: string[];
 }
 
-declare class BaseHrefRuntimeWebpackPlugin implements WebpackPluginInstance {
-  constructor(options: BaseHrefRuntimeWebpackPluginOptions);
-
-  apply: (compiler: Compiler) => void;
-}
+export default BaseHrefRuntimeVitePlugin

index.js

@@ -1,63 +1,56 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const template = require('lodash.template');
-const fs = require('fs');
-const { validate } = require('schema-utils');
-const schema = require('./schema.json');
+function baseHrefRuntimeVitePlugin(options) {
+  const fallbackBaseHref = options?.fallbackBaseHref || "";
+  const publicPaths = options?.publicPaths || [];
 
-const scriptTemplate = fs.readFileSync(__dirname + '/script.ejs', 'utf8');
-
-module.exports = class BaseHrefRuntimeWebpackPlugin {
-  constructor(options) {
-    validate(schema, options, {
-      name: 'BaseHrefRuntimeWebpackPlugin',
-      baseDataPath: 'options',
-    });
-    this.options = options;
+  if (publicPaths.length === 0 && !fallbackBaseHref) {
+    return;
   }
 
-  apply(compiler) {
-    const publicPaths = (this.options.publicPaths || []).filter(Boolean);
-    const fallbackBaseHref = this.options.fallbackBaseHref;
-
-    if (publicPaths.length === 0 && !fallbackBaseHref) {
-      return;
-    }
-
-    const logger = compiler.getInfrastructureLogger('BaseHrefRuntimeWebpackPlugin');
-    const scriptTemplateFunction = template(scriptTemplate);
-
-    compiler.hooks.compilation.tap('BaseHrefRuntimeWebpackPlugin', (compilation) => {
-      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync('BaseHrefRuntimeWebpackPlugin', (data, callback) => {
-        if (!data.plugin.options.base) {
-          logger.warn('You didn\'t specify "base" field in html-webpack-plugin');
-        }
-
-        const baseTagIndex = data.headTags.findIndex(tag => tag.tagName === 'base');
-        const targetIndex = baseTagIndex === -1 ? 0 : (baseTagIndex + 1);
-
-        const scriptInnerHTML = scriptTemplateFunction({
-          publicPaths: publicPaths,
-          fallbackBaseHref: fallbackBaseHref,
-        });
-
-        data.headTags = [
-          ...data.headTags.slice(0, targetIndex),
-          // @NOTE: Insert our script
-          {
-            tagName: 'script',
-            voidTag: false,
-            meta: { plugin: 'base-href-runtime-webpack-plugin' },
-            attributes: {
-              type: 'text/javascript',
-              'data-name': 'base-href-runtime-webpack-plugin',
-            },
-            innerHTML: scriptInnerHTML,
+  const scriptTemplateFunction = `(function () {
+        var publicPaths = [${publicPaths.map(
+          (path) => "'" + path + "'"
+        )}] || [];
+        var fallbackBaseHref = '${fallbackBaseHref}' ? '${fallbackBaseHref}' : 'undefined';
+
+        document.getElementsByTagName("base")[0].href  = publicPaths.find(
+            (path) => window.location.pathname.includes(path.replace(/\\/$/,""))
+        ) || fallbackBaseHref || document.baseURI})();`;
+
+  return {
+    name: "base-href-runtime-vite-plugin",
+
+    transformIndexHtml(html) {
+      const resTags = [
+        {
+          tag: "script",
+          voidTag: false,
+          injectTo: "head-prepend",
+          meta: { plugin: "base-href-runtime-webpack-plugin" },
+          attrs: {
+            type: "text/javascript",
+            "data-name": "base-href-runtime-webpack-plugin",
           },
-          ...data.headTags.slice(targetIndex)
-        ];
-
-        callback(null, data);
-      });
-    });
-  }
+          children: scriptTemplateFunction,
+        },
+      ];
+
+      if (!html.includes("<base")) {
+        resTags.unshift({
+          tag: "base",
+          voidTag: false,
+          injectTo: "head-prepend",
+          attrs: {
+            href: fallbackBaseHref,
+          },
+        });
+      }
+
+      return {
+        html: html.replace(/<base [^>]*/, `<base href='${fallbackBaseHref}'`),
+        tags: resTags,
+      };
+    },
+  };
 }
+
+module.exports = baseHrefRuntimeVitePlugin;

package.json

@@ -1,33 +1,23 @@
 {
-  "name": "base-href-runtime-webpack-plugin",
+  "name": "base-href-runtime-vite-plugin",
   "version": "1.1.0",
   "main": "index.js",
   "types": "index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/crutch12/base-href-runtime-webpack-plugin.git"
+    "url": "https://github.com/web-bee-ru/base-href-runtime-vite-plugin"
   },
   "keywords": [
     "base",
     "href",
-    "webpack",
+    "vite",
     "plugin"
   ],
   "scripts": {
-    "test": "cd ./test && webpack"
+    "test": "cd ./test && vite"
   },
   "license": "MIT",
-  "peerDependencies": {
-    "html-webpack-plugin": ">=4.0.0",
-    "webpack": ">=4.0.0"
-  },
   "devDependencies": {
-    "html-webpack-plugin": "5.5",
-    "webpack": "^5.23.0",
-    "webpack-cli": "^4.9.2"
-  },
-  "dependencies": {
-    "lodash.template": "^4.5.0",
-    "schema-utils": "^4.0.0"
+    "vite": "^4.3.2"
   }
 }