@quasar/vite-plugin/src/query.js

Vite plugin for Quasar Framework

/**
 * @typedef {{
 *  extensionsList: string[];
 *  filenameRegex: RegExp;
 * }} ExtMatcher
 *
 * @typedef {{
 *  template: (extMatcher: ExtMatcher) => boolean;
 *  script: (extMatcher: ExtMatcher) => boolean;
 *  style: (extMatcher: ExtMatcher) => boolean;
 * }} ViteQueryIs
 */

/**
 * @see https://github.com/vitejs/vite/blob/364aae13f0826169e8b1c5db41ac6b5bb2756958/packages/plugin-vue/src/utils/query.ts - source of inspiration
 * @example
 * '/absolute/path/src/App.vue' // Can contain combined template&script -> template: true, script: true, style: false
 * '/absolute/path/src/App.vue?vue&type=script&lang.js' // Only contains script -> template: false, script: true, style: false
 * '/absolute/path/src/App.vue?vue&type=style&lang.sass' // Only contains style -> template: false, script: false, style: true
 * '/absolute/path/src/script.js' // Only contains script -> template: false, script: true, style: false
 * '/absolute/path/src/index.scss' // Only contains style -> template: false, script: false, style: true
 *
 * @param {string} id
 * @returns {{ filename: string; query: { [key: string]: string; }; is: ViteQueryIs }}
 */
export function parseViteRequest(id) {
  const [filename, rawQuery] = id.split('?', 2)
  const query = Object.fromEntries(new URLSearchParams(rawQuery))

  if (query.raw !== void 0) {
    return {
      // if it's a ?raw request, then don't touch it at all
      template: () => false,
      script: () => false,
      style: () => false
    }
  }

  return query.vue !== void 0 // is vue query?
    ? {
        template: () =>
          query.type === void 0 ||
          query.type === 'template' ||
          // On prod, TS code turns into a separate 'script' request.
          // See: https://github.com/vitejs/vite/pull/7909
          (query.type === 'script' &&
            (query['lang.ts'] !== void 0 || query['lang.tsx'] !== void 0)),

        script: matcher =>
          (query.type === void 0 || query.type === 'script') &&
          matcher.extensionsList.some(ext => query[`lang.${ext}`] !== void 0),

        style: matcher =>
          query.type === 'style' &&
          matcher.extensionsList.some(ext => query[`lang.${ext}`] !== void 0)
      }
    : {
        template: matcher => matcher.filenameRegex.test(filename),
        script: matcher => matcher.filenameRegex.test(filename),
        style: matcher => matcher.filenameRegex.test(filename)
      }
}

export function createExtMatcher(extensionsList) {
  return {
    extensionsList,
    filenameRegex: new RegExp(`\\.(${extensionsList.join('|')})$`)
  }
}