vite-plugin-layoutaid/dist/index.cjs

Vite plugin that adds visual layout aid for integrating web pages

'use strict';

const promises = require('node:fs/promises');
const defu = require('defu');
const node_path = require('node:path');
const node_url = require('node:url');

var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }

const defu__default = /*#__PURE__*/_interopDefaultCompat(defu);

function createPlugin(pluginName, clientPath, defaultConfig) {
  return function(pluginConfig = {}) {
    const {
      prod = false,
      inject = true
    } = pluginConfig;
    const hotVirtualModuleId = `virtual:${pluginName}`;
    const hotResolvedVirtualModuleId = `\0${hotVirtualModuleId}`;
    let isDev = false;
    function shouldInject() {
      return inject && (isDev || prod);
    }
    let config;
    let mainEntry;
    function findMainEntry(html) {
      const scriptMatch = html.match(/<script[^>]*type="module"[^>]*src="([^"]*)"[^>]*>/g);
      if (scriptMatch) {
        const mainScript = scriptMatch.find((script) => !script.includes("@vite/client"));
        mainEntry = mainScript?.match(/src="([^"]*)"/)?.[1];
      }
    }
    return {
      name: `vite-plugin-${pluginName}`,
      config(config2) {
        const configObject = defu__default(pluginConfig, defaultConfig);
        config2.define = {
          ...config2.define,
          __LAYOUTAID_CONFIG__: JSON.stringify(configObject)
        };
        return config2;
      },
      configResolved(resolvedConfig) {
        config = resolvedConfig;
        isDev = config.command === "serve";
        if (inject && config.build?.rollupOptions?.input) {
          mainEntry = typeof config.build.rollupOptions.input === "string" ? config.build.rollupOptions.input : Array.isArray(config.build.rollupOptions.input) ? config.build.rollupOptions.input[0] : Object.values(config.build.rollupOptions.input)[0];
        }
      },
      resolveId(id) {
        if (id === hotVirtualModuleId) {
          return hotResolvedVirtualModuleId;
        }
      },
      async load(id, context) {
        if (context?.ssr) {
          return null;
        }
        if (id === hotResolvedVirtualModuleId) {
          return await promises.readFile(clientPath, "utf-8");
        }
      },
      transformIndexHtml(html) {
        if (inject && !mainEntry) {
          findMainEntry(html);
        }
        return html;
      },
      async transform(code, id) {
        if (!shouldInject()) {
          return null;
        }
        const normalizedId = id.split("?")[0];
        if (normalizedId.endsWith(".html")) {
          findMainEntry(code);
        }
        const isEntry = mainEntry && normalizedId.endsWith(mainEntry);
        if (!isEntry) {
          return null;
        }
        return {
          code: `import '${hotVirtualModuleId}';
${code}`,
          map: null
        };
      }
    };
  };
}

function getPluginClientPath(indexFile) {
  return node_path.resolve(node_url.fileURLToPath(new URL(".", indexFile)), "client.mjs");
}

const index = createPlugin(
  "layoutaid",
  getPluginClientPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href))),
  {
    columns: {},
    // use module defaults
    outline: {}
    // use module defaults
  }
);

module.exports = index;