fix(core): support resource path with search string (ex. comp.vue?v=a87e5cc1)

customizable through getPathname option that defaults to just strip search string.
pathResolve() get "options" as second argument
closes #182

Author: Franck Freiburger

docs/examples.md

@@ -948,7 +948,7 @@ In the following example we use a trick to preserve reactivity through the `Vue.
       }
 
       // get the actual path of the file
-      const path = pathResolve({ refPath, relPath: resourceRelPath });
+      const path = pathResolve({ refPath, relPath: resourceRelPath }, options);
 
       // the resource id must be unique in its path context
       const id = loaders.join('') + path;
@@ -1197,7 +1197,7 @@ This example use Vue2 because **vue-calendar-picker** is written for Vue2.
         vue: Vue,
         'date-fns/locale/en/index.js': {}, // handle require('date-fns/locale/' + this.locale.toLowerCase() + '/index.js');
       },
-      pathResolve({ refPath, relPath }) {
+      pathResolve({ refPath, relPath }, options) {
 
         if ( relPath === 'date-fns' )
           return 'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js';

src/index.ts

@@ -41,14 +41,30 @@ function throwNotDefined(details : string) : never {
 }
 
 
+/**
+ * Default getPathname implementation
+ * remove search string
+ */
+const defaultGetPathname = (path : string) => {
+
+	// alternative: new URL(path, 'file://').pathname
+	const searchPos = path.indexOf('?');
+	if ( searchPos !== -1 )
+		return path.slice(0, searchPos);
+	return path;
+}
+
+
 /**
  * Default resolve implementation
  * resolve() should handle 3 situations :
  *  - resolve a relative path ( eg. import './details.vue' )
  *  - resolve an absolute path ( eg. import '/components/card.vue' )
  *  - resolve a module name ( eg. import { format } from 'date-fns' )
  */
-const defaultPathResolve : PathResolve = ({ refPath, relPath } : PathContext) => {
+const defaultPathResolve : PathResolve = ({ refPath, relPath } : PathContext, options : Options) => {
+
+	const { getPathname } = options;
 
 	// initial resolution: refPath is not defined
 	if ( refPath === undefined )
@@ -64,7 +80,7 @@ const defaultPathResolve : PathResolve = ({ refPath, relPath } : PathContext) =>
 	//  normalize('./test') -> 'test'
 	//  normalize('/test') -> '/test'
 
-	return Path.normalize(Path.join(Path.dirname(refPath.toString()), relPathStr));
+	return Path.normalize(Path.join(Path.dirname(getPathname(refPath.toString())), relPathStr));
 }
 
 /**
@@ -73,8 +89,8 @@ const defaultPathResolve : PathResolve = ({ refPath, relPath } : PathContext) =>
  */
 function defaultGetResource(pathCx : PathContext, options : Options) : Resource {
 
-	const { pathResolve, getFile, log } = options;
-	const path = pathResolve(pathCx);
+	const { pathResolve, getPathname, getFile, log } = options;
+	const path = pathResolve(pathCx, options);
 	const pathStr = path.toString();
 	return {
 		id: pathStr,
@@ -86,7 +102,7 @@ function defaultGetResource(pathCx : PathContext, options : Options) : Resource
 			if ( typeof res === 'string' || res instanceof ArrayBuffer ) {
 
 				return {
-					type: Path.extname(pathStr),
+					type: Path.extname(getPathname(pathStr)),
 					getContentData: async (asBinary) => {
 
 						if ( res instanceof ArrayBuffer !== asBinary )
@@ -103,7 +119,7 @@ function defaultGetResource(pathCx : PathContext, options : Options) : Resource
 			}			
 
 			return {
-				type: res.type !== undefined ? res.type : Path.extname(pathStr),
+				type: res.type !== undefined ? res.type : Path.extname(getPathname(pathStr)),
 				getContentData: res.getContentData,
 			}
 		}
@@ -161,6 +177,7 @@ export async function loadModule(path : AbstractPath, options : Options = throwN
 		pathResolve = defaultPathResolve,
 		getResource = defaultGetResource,
 		createCJSModule = defaultCreateCJSModule,
+		getPathname = defaultGetPathname,
 	} = options;
 
 	// moduleCache should be defined with Object.create(null). require('constructor') etc... should not be a default module
@@ -176,6 +193,8 @@ export async function loadModule(path : AbstractPath, options : Options = throwN
 		getResource,
 		//@ts-ignore: is specified more than once, so this usage will be overwritten.ts(2783)
 		createCJSModule,
+		//@ts-ignore: is specified more than once, so this usage will be overwritten.ts(2783)
+		getPathname,
 		...options,
 	};
 

src/tools.ts

@@ -349,7 +349,7 @@ export function defaultCreateCJSModule(refPath : AbstractPath, source : string,
 	// see https://github.com/nodejs/node/blob/a46b21f556a83e43965897088778ddc7d46019ae/lib/internal/modules/cjs/loader.js#L195-L198
 	// see https://github.com/nodejs/node/blob/a46b21f556a83e43965897088778ddc7d46019ae/lib/internal/modules/cjs/loader.js#L1102
 	const moduleFunction = Function('exports', 'require', 'module', '__filename', '__dirname', '__vsfcl_import__', source);
-	moduleFunction.call(module.exports, module.exports, require, module, refPath, pathResolve({ refPath, relPath: '.' }), importFunction);
+	moduleFunction.call(module.exports, module.exports, require, module, refPath, pathResolve({ refPath, relPath: '.' }, options), importFunction);
 
 	return module;
 }

src/types.ts

@@ -47,7 +47,7 @@ export type PathContext = {
 
 
 /** relative to absolute module path resolution */
-export type PathResolve = (pathCx : PathContext) => AbstractPath;
+export type PathResolve = (pathCx : PathContext, options : Options) => AbstractPath;
 
 
 /**
@@ -387,6 +387,13 @@ export type Options = {
  */
  	pathResolve : PathResolve,
 
+/**
+ * by default, remove the search string
+ * in situation where you need to keep the path intact, use `getPathname: path => path`
+ * @param path  a path that may contains extra components like search params or hash (eg. ./mydir/mycomponent.vue?v=123)
+ * @returns the pathname component of the path withouy any orher component (eg. ./mydir/mycomponent.vue)
+ */	
+	getPathname : (path : string) => string,
 
 /**
  * Abstact resource handling

tests/basic.test.js

@@ -1270,5 +1270,35 @@ const { defaultFilesFactory, createPage } = require('./testsTools.js');
 				await expect(page.$eval('#app', el => el.textContent.trim())).resolves.toBe('main_comp comp_1');
 			});
 		}
+
+
+		test('should properly handle search string in path', async () => {
+
+			const { page, output } = await createPage({
+				files: {
+					...files,
+					'/components/comp1.vue': `
+						<template>1</template>
+					`,
+					'/components/comp2.vue': `
+						<template>2</template>
+					`,
+					'/main.vue': `
+						<script setup>
+						import comp1 from './components/comp1.vue?a=1.txt'
+						import comp2 from './components/comp2.vue?a=/2'
+						</script>
+						<template><comp1/><comp2/></template>
+					`,
+				}
+			});
+
+			await expect(page.$eval('#app', el => el.textContent.trim())).resolves.toBe('12');
+		});
+
+
+
+
+
 	});
 })