feat: make search params disordered #5

yisibell · Dec 20, 2023 · ccb5b8a · ccb5b8a
1 parent f7fd7cc
commit ccb5b8a
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 34 deletions.
diff --git a/example/package.json b/example/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "pinia": "^2.1.6",
     "toolkitcss": "^1.1.1",
+    "vite-plugin-svg4vue": "^3.0.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
@@ -38,8 +39,7 @@
     "prismjs": "^1.29.0",
     "sass": "^1.68.0",
     "typescript": "^5.2.2",
-    "vite": "^5.0.0",
-    "vite-plugin-svg4vue": "^3.0.0",
+    "vite": "^5.0.10",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.8.22"
   },

diff --git a/lib/index.cjs.js b/lib/index.cjs.js
@@ -55,6 +55,10 @@ function compileSvgToRaw(source) {
     return code;
 }
 
+const COMPONENT_COMPILE_TYPE = 'component';
+const RAW_COMPILE_TYPE = 'raw';
+const URL_COMPILE_TYPE = 'url';
+const SKIP_SVGO_FLAG = 'skipsvgo';
 var DEFAULT_OPTIONS;
 (function (DEFAULT_OPTIONS) {
     DEFAULT_OPTIONS["defaultExport"] = "url";
@@ -74,12 +78,21 @@ const resolveSearchParams = (url, assetsDirName) => {
     const svgRegexString = `${safeAssetsDirName}.*\\.svg(\\?.*)?$`;
     const svgRegex = new RegExp(svgRegexString);
     const matchedId = url.match(svgRegex);
-    const querystring = Array.isArray(matchedId)
+    const querystring = Array.isArray(matchedId) && matchedId[1]
         ? matchedId[1].replace('?', '')
         : '';
     const searchParamsKeys = Object.keys(qs.parse(querystring));
-    const skipsvgo = searchParamsKeys.includes('skipsvgo');
-    const type = !skipsvgo || searchParamsKeys.length >= 2 ? searchParamsKeys[0] : undefined;
+    const skipsvgo = searchParamsKeys.includes(SKIP_SVGO_FLAG);
+    let type = undefined;
+    if (searchParamsKeys.includes(COMPONENT_COMPILE_TYPE)) {
+        type = COMPONENT_COMPILE_TYPE;
+    }
+    else if (searchParamsKeys.includes(RAW_COMPILE_TYPE)) {
+        type = RAW_COMPILE_TYPE;
+    }
+    else if (searchParamsKeys.includes(URL_COMPILE_TYPE)) {
+        type = URL_COMPILE_TYPE;
+    }
     return {
         type,
         skipsvgo,
@@ -112,8 +125,8 @@ const svg4VuePlugin = (options = {}) => {
         async transform(source, id) {
             const { idWithoutQuery, type, matchedId, skipsvgo } = resolveSearchParams(id, assetsDirName);
             if (matchedId) {
-                if ((defaultExport === 'raw' && typeof type === 'undefined') ||
-                    type === 'raw') {
+                if ((defaultExport === RAW_COMPILE_TYPE && typeof type === 'undefined') ||
+                    type === RAW_COMPILE_TYPE) {
                     if (disabledSvgo || skipsvgo)
                         return source;
                     let cachedSvgRawResult = svgRawCache.get(id);
@@ -127,12 +140,13 @@ const svg4VuePlugin = (options = {}) => {
                     }
                     return cachedSvgRawResult;
                 }
-                if ((defaultExport === 'url' && typeof type === 'undefined') ||
-                    type === 'url') {
+                if ((defaultExport === URL_COMPILE_TYPE && typeof type === 'undefined') ||
+                    type === URL_COMPILE_TYPE) {
                     return source;
                 }
-                if ((defaultExport === 'component' && typeof type === 'undefined') ||
-                    type === 'component') {
+                if ((defaultExport === COMPONENT_COMPILE_TYPE &&
+                    typeof type === 'undefined') ||
+                    type === COMPONENT_COMPILE_TYPE) {
                     let cachedSvgComponentResult = svgComponentCache.get(id);
                     if (!cachedSvgComponentResult) {
                         const code = fs.readFileSync(idWithoutQuery, 'utf8');

diff --git a/lib/index.esm.js b/lib/index.esm.js
@@ -33,6 +33,10 @@ function compileSvgToRaw(source) {
     return code;
 }
 
+const COMPONENT_COMPILE_TYPE = 'component';
+const RAW_COMPILE_TYPE = 'raw';
+const URL_COMPILE_TYPE = 'url';
+const SKIP_SVGO_FLAG = 'skipsvgo';
 var DEFAULT_OPTIONS;
 (function (DEFAULT_OPTIONS) {
     DEFAULT_OPTIONS["defaultExport"] = "url";
@@ -52,12 +56,21 @@ const resolveSearchParams = (url, assetsDirName) => {
     const svgRegexString = `${safeAssetsDirName}.*\\.svg(\\?.*)?$`;
     const svgRegex = new RegExp(svgRegexString);
     const matchedId = url.match(svgRegex);
-    const querystring = Array.isArray(matchedId)
+    const querystring = Array.isArray(matchedId) && matchedId[1]
         ? matchedId[1].replace('?', '')
         : '';
     const searchParamsKeys = Object.keys(qs.parse(querystring));
-    const skipsvgo = searchParamsKeys.includes('skipsvgo');
-    const type = !skipsvgo || searchParamsKeys.length >= 2 ? searchParamsKeys[0] : undefined;
+    const skipsvgo = searchParamsKeys.includes(SKIP_SVGO_FLAG);
+    let type = undefined;
+    if (searchParamsKeys.includes(COMPONENT_COMPILE_TYPE)) {
+        type = COMPONENT_COMPILE_TYPE;
+    }
+    else if (searchParamsKeys.includes(RAW_COMPILE_TYPE)) {
+        type = RAW_COMPILE_TYPE;
+    }
+    else if (searchParamsKeys.includes(URL_COMPILE_TYPE)) {
+        type = URL_COMPILE_TYPE;
+    }
     return {
         type,
         skipsvgo,
@@ -90,8 +103,8 @@ const svg4VuePlugin = (options = {}) => {
         async transform(source, id) {
             const { idWithoutQuery, type, matchedId, skipsvgo } = resolveSearchParams(id, assetsDirName);
             if (matchedId) {
-                if ((defaultExport === 'raw' && typeof type === 'undefined') ||
-                    type === 'raw') {
+                if ((defaultExport === RAW_COMPILE_TYPE && typeof type === 'undefined') ||
+                    type === RAW_COMPILE_TYPE) {
                     if (disabledSvgo || skipsvgo)
                         return source;
                     let cachedSvgRawResult = svgRawCache.get(id);
@@ -105,12 +118,13 @@ const svg4VuePlugin = (options = {}) => {
                     }
                     return cachedSvgRawResult;
                 }
-                if ((defaultExport === 'url' && typeof type === 'undefined') ||
-                    type === 'url') {
+                if ((defaultExport === URL_COMPILE_TYPE && typeof type === 'undefined') ||
+                    type === URL_COMPILE_TYPE) {
                     return source;
                 }
-                if ((defaultExport === 'component' && typeof type === 'undefined') ||
-                    type === 'component') {
+                if ((defaultExport === COMPONENT_COMPILE_TYPE &&
+                    typeof type === 'undefined') ||
+                    type === COMPONENT_COMPILE_TYPE) {
                     let cachedSvgComponentResult = svgComponentCache.get(id);
                     if (!cachedSvgComponentResult) {
                         const code = readFileSync(idWithoutQuery, 'utf8');

diff --git a/src/defaults.ts b/src/defaults.ts
@@ -1,3 +1,17 @@
+export const COMPONENT_COMPILE_TYPE = 'component'
+
+export const RAW_COMPILE_TYPE = 'raw'
+
+export const URL_COMPILE_TYPE = 'url'
+
+export const SKIP_SVGO_FLAG = 'skipsvgo'
+
+export const AVAILABLE_COMPILE_TYPES = [
+  COMPONENT_COMPILE_TYPE,
+  RAW_COMPILE_TYPE,
+  URL_COMPILE_TYPE,
+]
+
 export enum DEFAULT_OPTIONS {
   defaultExport = 'url',
   assetsDirName = 'icons',

diff --git a/src/getSearchParams.ts b/src/getSearchParams.ts
@@ -1,6 +1,12 @@
 import qs from 'node:querystring'
 import * as ufo from 'ufo'
-import { DEFAULT_OPTIONS } from './defaults'
+import {
+  DEFAULT_OPTIONS,
+  COMPONENT_COMPILE_TYPE,
+  RAW_COMPILE_TYPE,
+  URL_COMPILE_TYPE,
+  SKIP_SVGO_FLAG,
+} from './defaults'
 
 const resolveSearchParams = (url: string, assetsDirName: string | boolean) => {
   const idWithoutQuery = url.replace(/\.svg\?.*/, '.svg')
@@ -21,16 +27,24 @@ const resolveSearchParams = (url: string, assetsDirName: string | boolean) => {
   const svgRegex = new RegExp(svgRegexString)
 
   const matchedId = url.match(svgRegex)
-  const querystring = Array.isArray(matchedId)
-    ? matchedId[1].replace('?', '')
-    : ''
+  const querystring =
+    Array.isArray(matchedId) && matchedId[1]
+      ? matchedId[1].replace('?', '')
+      : ''
 
   const searchParamsKeys = Object.keys(qs.parse(querystring))
 
-  const skipsvgo = searchParamsKeys.includes('skipsvgo')
+  const skipsvgo = searchParamsKeys.includes(SKIP_SVGO_FLAG)
+
+  let type = undefined
 
-  const type =
-    !skipsvgo || searchParamsKeys.length >= 2 ? searchParamsKeys[0] : undefined
+  if (searchParamsKeys.includes(COMPONENT_COMPILE_TYPE)) {
+    type = COMPONENT_COMPILE_TYPE
+  } else if (searchParamsKeys.includes(RAW_COMPILE_TYPE)) {
+    type = RAW_COMPILE_TYPE
+  } else if (searchParamsKeys.includes(URL_COMPILE_TYPE)) {
+    type = URL_COMPILE_TYPE
+  }
 
   return {
     type,

diff --git a/src/index.ts b/src/index.ts
@@ -6,7 +6,12 @@ import { createSvgoConfig } from 'svgo-extra'
 import compileSvgToRaw from './compileSvgToRaw'
 import { resolveSearchParams } from './getSearchParams'
 import type { Config as SvgoConfig } from 'svgo'
-import { DEFAULT_OPTIONS } from './defaults'
+import {
+  DEFAULT_OPTIONS,
+  COMPONENT_COMPILE_TYPE,
+  RAW_COMPILE_TYPE,
+  URL_COMPILE_TYPE,
+} from './defaults'
 
 const svg4VuePlugin: Svg4VuePlugin = (options = {}) => {
   const {
@@ -49,8 +54,8 @@ const svg4VuePlugin: Svg4VuePlugin = (options = {}) => {
       if (matchedId) {
         // handle to raw
         if (
-          (defaultExport === 'raw' && typeof type === 'undefined') ||
-          type === 'raw'
+          (defaultExport === RAW_COMPILE_TYPE && typeof type === 'undefined') ||
+          type === RAW_COMPILE_TYPE
         ) {
           if (disabledSvgo || skipsvgo) return source
 
@@ -73,16 +78,17 @@ const svg4VuePlugin: Svg4VuePlugin = (options = {}) => {
 
         // handle to url
         if (
-          (defaultExport === 'url' && typeof type === 'undefined') ||
-          type === 'url'
+          (defaultExport === URL_COMPILE_TYPE && typeof type === 'undefined') ||
+          type === URL_COMPILE_TYPE
         ) {
           return source
         }
 
         // handle to component
         if (
-          (defaultExport === 'component' && typeof type === 'undefined') ||
-          type === 'component'
+          (defaultExport === COMPONENT_COMPILE_TYPE &&
+            typeof type === 'undefined') ||
+          type === COMPONENT_COMPILE_TYPE
         ) {
           let cachedSvgComponentResult = svgComponentCache.get(id)