@lynxwall/cucumber-tsflow 7.5.0 → 7.6.0

package/lib/transpilers/esm/tsnode-loader.mjs

@@ -3,9 +3,13 @@ import { createRequire } from 'node:module';
 import { resolveSpecifier } from './loader-utils.mjs';
 import { loadConfig } from 'tsconfig-paths';
 import path from 'path';
+import { createLogger } from '../../utils/tsflow-logger.mjs';
 
+const logger = createLogger('tsnode-loader');
 const require = createRequire(import.meta.url);
 
+logger.checkpoint('Initializing tsnode-loader');
+
 // Load tsconfig to get paths
 const configLoaderResult = loadConfig(process.cwd());
 let paths = {};
@@ -14,31 +18,54 @@ let baseUrl = './';
 if (configLoaderResult.resultType === 'success') {
 	paths = configLoaderResult.paths || {};
 	baseUrl = configLoaderResult.baseUrl || './';
+	logger.checkpoint('tsconfig loaded', {
+		baseUrl,
+		pathCount: Object.keys(paths).length,
+		cwd: process.cwd()
+	});
+} else {
+	logger.warn('tsconfig load failed', {
+		resultType: configLoaderResult.resultType,
+		cwd: process.cwd()
+	});
 }
 
 // Create ts-node service with our configuration
+logger.checkpoint('Loading ts-node-maintained');
 const tsNode = require('ts-node-maintained');
 
+const experimentalDecorators = process.env.CUCUMBER_EXPERIMENTAL_DECORATORS === 'true';
+
+logger.checkpoint('Creating ts-node service', {
+	experimentalDecorators,
+	baseUrl,
+	pathCount: Object.keys(paths).length
+});
+
 const service = tsNode.create({
 	esm: true,
 	experimentalSpecifierResolution: 'node',
 	files: true,
 	transpileOnly: true,
 	compilerOptions: {
-		experimentalDecorators: process.env.CUCUMBER_EXPERIMENTAL_DECORATORS === 'true',
+		experimentalDecorators,
 		module: 'ESNext',
 		target: 'ES2022',
-		// Add path mapping to ts-node's compiler options
 		baseUrl: baseUrl,
 		paths: paths
 	}
 });
 
+logger.checkpoint('ts-node service created');
+
 // Create ESM hooks from the service
 const esmHooks = tsNode.createEsmHooks(service);
+logger.checkpoint('ESM hooks created');
 
 export async function resolve(specifier, context, nextResolve) {
-	// Try common resolution logic (includes path mapping + extension resolution)
+	logger.checkpoint('resolve', { specifier, parentURL: context.parentURL });
+
+	// Try common resolution logic
 	const resolved = await resolveSpecifier(specifier, context, {
 		checkExtensions: true,
 		handleTsFiles: true,
@@ -47,59 +74,78 @@ export async function resolve(specifier, context, nextResolve) {
 	});
 
 	if (resolved) {
+		logger.checkpoint('resolve success', { specifier, url: resolved.url });
 		return resolved;
 	}
 
 	// Fall back to ts-node's resolver
+	logger.checkpoint('resolve delegating to ts-node', { specifier });
 	return esmHooks.resolve(specifier, context, nextResolve);
 }
 
 export const load = async (url, context, nextLoad) => {
+	logger.checkpoint('load', { url });
+
 	// Only intercept TypeScript files for path rewriting
 	if (url.endsWith('.ts') || url.endsWith('.tsx')) {
-		// First, let ts-node load the file
-		const result = await esmHooks.load(url, context, nextLoad);
-
-		// If we have path mappings, check if we need to rewrite the source
-		if (configLoaderResult.resultType === 'success' && configLoaderResult.paths) {
-			let code = result.source.toString();
-			let modified = false;
-
-			for (const [pattern, replacements] of Object.entries(configLoaderResult.paths)) {
-				// Convert TS path pattern to regex: @fixtures/* -> @fixtures/
-				const searchPattern = pattern.replace('/*', '/');
-				const searchRegex = new RegExp(`(from\\s+['"])${searchPattern}([^'"]+)(['"])`, 'g');
-
-				if (searchRegex.test(code)) {
-					// Get the replacement path (use first one if multiple)
-					const replacementPath = replacements[0].replace('/*', '');
-
-					code = code.replace(searchRegex, (match, prefix, importPath, suffix) => {
-						// Create the full path
-						const fullPath = path.join(configLoaderResult.absoluteBaseUrl, replacementPath, importPath);
-						// Convert to file:// URL for ESM
-						const fileUrl = pathToFileURL(fullPath).href;
-						return `${prefix}${fileUrl}${suffix}`;
-					});
+		logger.checkpoint('load handling TypeScript', { url });
+
+		try {
+			// First, let ts-node load the file
+			const result = await esmHooks.load(url, context, nextLoad);
 
-					modified = true;
+			// If we have path mappings, check if we need to rewrite the source
+			if (configLoaderResult.resultType === 'success' && configLoaderResult.paths) {
+				let code = result.source.toString();
+				let modified = false;
+				let replacementCount = 0;
+
+				for (const [pattern, replacements] of Object.entries(configLoaderResult.paths)) {
+					const searchPattern = pattern.replace('/*', '/');
+					const searchRegex = new RegExp(`(from\\s+['"])${searchPattern}([^'"]+)(['"])`, 'g');
+
+					if (searchRegex.test(code)) {
+						const replacementPath = replacements[0].replace('/*', '');
+
+						code = code.replace(searchRegex, (match, prefix, importPath, suffix) => {
+							const fullPath = path.join(configLoaderResult.absoluteBaseUrl, replacementPath, importPath);
+							const fileUrl = pathToFileURL(fullPath).href;
+
+							replacementCount++;
+							logger.checkpoint('Path rewritten', {
+								from: `${searchPattern}${importPath}`,
+								to: fileUrl
+							});
+
+							return `${prefix}${fileUrl}${suffix}`;
+						});
+
+						modified = true;
+					}
 				}
-			}
 
-			if (modified) {
-				// Return the modified result
-				return {
-					...result,
-					source: code
-				};
+				if (modified) {
+					logger.checkpoint('load complete with path rewrites', {
+						url,
+						replacementCount
+					});
+					return {
+						...result,
+						source: code
+					};
+				}
 			}
-		}
 
-		// Return the unmodified result from ts-node
-		return result;
+			logger.checkpoint('load complete', { url });
+			return result;
+		} catch (error) {
+			logger.error('load failed', error, { url });
+			throw error;
+		}
 	}
 
 	// For non-TypeScript files, let ts-node handle it
+	logger.checkpoint('load delegating to ts-node', { url });
 	return esmHooks.load(url, context, nextLoad);
 };
 

package/lib/transpilers/esm/tsnode-service.mjs

@@ -1,40 +1,84 @@
 import { createRequire } from 'module';
+import { createLogger } from '../../utils/tsflow-logger.mjs';
+
+const logger = createLogger('tsnode-service');
+
+logger.checkpoint('Loading ts-node-maintained');
 
 const require = createRequire(import.meta.url);
-const tsNode = require('ts-node-maintained');
+
+let tsNode;
+try {
+	tsNode = require('ts-node-maintained');
+	logger.checkpoint('ts-node-maintained loaded successfully');
+} catch (error) {
+	logger.error('Failed to load ts-node-maintained', error);
+	throw new Error(`Failed to load ts-node-maintained: ${error.message}`, { cause: error });
+}
 
 // Cache for different ts-node configurations
 const serviceCache = new Map();
 
 export function createTsNodeService(options = {}) {
+	logger.checkpoint('createTsNodeService called', { options });
+
 	const cacheKey = JSON.stringify(options);
 
 	if (serviceCache.has(cacheKey)) {
+		logger.checkpoint('Returning cached ts-node service', { cacheKey });
 		return serviceCache.get(cacheKey);
 	}
 
 	// Ensure ts-node respects tsconfig.json files
 	process.env.TS_NODE_FILES = process.env.TS_NODE_FILES || 'true';
 
+	const experimentalDecorators = process.env.CUCUMBER_EXPERIMENTAL_DECORATORS === 'true';
+
 	const defaultOptions = {
 		esm: true,
 		experimentalSpecifierResolution: 'node',
 		files: true,
 		transpileOnly: true,
 		compilerOptions: {
-			experimentalDecorators: process.env.CUCUMBER_EXPERIMENTAL_DECORATORS === 'true',
+			experimentalDecorators,
 			module: 'ESNext',
 			target: 'ES2022'
 		}
 	};
 
-	const service = tsNode.create({ ...defaultOptions, ...options });
-	serviceCache.set(cacheKey, service);
+	const mergedOptions = { ...defaultOptions, ...options };
+	logger.checkpoint('Creating ts-node service', {
+		experimentalDecorators,
+		transpiler: mergedOptions.transpiler,
+		esm: mergedOptions.esm
+	});
 
+	let service;
+	try {
+		service = tsNode.create(mergedOptions);
+		logger.checkpoint('ts-node service created successfully');
+	} catch (error) {
+		logger.error('Failed to create ts-node service', error, { options: mergedOptions });
+		throw new Error(`Failed to create ts-node service: ${error.message}`, { cause: error });
+	}
+
+	serviceCache.set(cacheKey, service);
 	return service;
 }
 
 export function createEsmHooks(transpiler) {
-	const service = createTsNodeService({ transpiler });
-	return tsNode.createEsmHooks(service);
+	logger.checkpoint('createEsmHooks called', { transpiler });
+
+	try {
+		const service = createTsNodeService({ transpiler });
+		logger.checkpoint('Creating ESM hooks from service');
+
+		const hooks = tsNode.createEsmHooks(service);
+		logger.checkpoint('ESM hooks created successfully');
+
+		return hooks;
+	} catch (error) {
+		logger.error('Failed to create ESM hooks', error, { transpiler });
+		throw new Error(`Failed to create ESM hooks: ${error.message}`, { cause: error });
+	}
 }

package/lib/transpilers/esm/vue-jsdom-setup.mjs

@@ -2,18 +2,47 @@
 /* eslint-disable no-undef */
 
 import { createRequire } from 'module';
+import { createLogger } from '../../utils/tsflow-logger.mjs';
+
+const logger = createLogger('jsdom-setup');
+
+logger.checkpoint('Initializing JSDOM environment');
+
 const require = createRequire(import.meta.url);
 
-require('jsdom-global')();
+try {
+	logger.checkpoint('Loading jsdom-global');
+	require('jsdom-global')();
+	logger.checkpoint('jsdom-global loaded and executed');
+} catch (error) {
+	logger.error('Failed to initialize jsdom-global', error);
+	throw new Error(`Failed to initialize JSDOM: ${error.message}`, { cause: error });
+}
 
 // After jsdom-global, window and document should be global
-// Add Vue-specific constructors to global scope
 if (typeof window !== 'undefined') {
-	// Use globalThis for cleaner code
-	globalThis.SVGElement = window.SVGElement;
-	globalThis.Element = window.Element;
-	globalThis.HTMLElement = window.HTMLElement;
-	globalThis.HTMLDivElement = window.HTMLDivElement;
+	logger.checkpoint('Window is available, setting up Vue-specific globals');
+
+	try {
+		globalThis.SVGElement = window.SVGElement;
+		globalThis.Element = window.Element;
+		globalThis.HTMLElement = window.HTMLElement;
+		globalThis.HTMLDivElement = window.HTMLDivElement;
+
+		logger.checkpoint('Vue-specific globals set', {
+			hasSVGElement: !!globalThis.SVGElement,
+			hasElement: !!globalThis.Element,
+			hasHTMLElement: !!globalThis.HTMLElement,
+			hasHTMLDivElement: !!globalThis.HTMLDivElement
+		});
+	} catch (error) {
+		logger.error('Failed to set Vue-specific globals', error);
+		throw new Error(`Failed to set Vue globals: ${error.message}`, { cause: error });
+	}
+} else {
+	logger.warn('Window is not available after jsdom-global initialization');
 }
 
+logger.checkpoint('JSDOM environment setup complete');
+
 export {}; // Make it a module

package/lib/transpilers/esm/vue-loader.mjs

@@ -1,110 +1,96 @@
 /**
  * ESM loader for Vue Single File Components (.vue files)
- *
- * This loader enables importing and testing Vue SFC components in Node.js ESM environments.
- * It provides feature parity with the CJS vue-loader but uses Node.js ESM loader hooks.
- *
- * Key features:
- * - Compiles Vue SFC components (template, script, and optionally styles)
- * - Handles TypeScript in Vue components via ts-node delegation
- * - Supports extensionless imports (e.g., import Component from './Component')
- * - Handles asset imports (images, fonts, etc.)
- * - Integrates with tsconfig path mappings
- * - Optional style processing controlled by global.enableVueStyle
- *
- * Differences from CJS version:
- * - Uses ESM loader hooks (resolve/load) instead of require.extensions
- * - Delegates TypeScript handling to ts-node/esm instead of inline transpilation
- * - Sets TS_NODE_FILES=true to ensure ts-node respects tsconfig.json includes
- *   (needed for type definition files like Vue shims)
- *
- * Usage:
- * 1. Or configure in cucumber.json:
- *    {
- *      "default": {
- *        "transpiler": ["tsvueesm"]
- *      }
- *    }
- *
- * 2. Register this loader when running tests:
- *    node --loader=@lynxwall/cucumber-tsflow/lib/transpilers/esm/vue-loader.mjs
- *
- * 3. To enable style processing:
- *    - Set global.enableVueStyle = true in your test setup
- *    - Or set environment variable: CUCUMBER_ENABLE_VUE_STYLE=true
- *
- * Note: Style preprocessing (SCSS, Less, etc.) requires the corresponding
- * preprocessor packages to be installed. Missing preprocessors will be skipped
- * with a warning rather than failing the compilation.
+ * [... keep existing docblock ...]
  */
 import { resolveSpecifier, loadVue, handleCommonFileTypes } from './loader-utils.mjs';
+import { createLogger } from '../../utils/tsflow-logger.mjs';
+
+const logger = createLogger('vue-loader');
 
 // Cache for the TypeScript loader
 let tsLoader;
 
 async function getTsLoader() {
-	if (!tsLoader) {
-		try {
-			// Ensure ts-node respects tsconfig.json files
-			// This is crucial for picking up:
-			// - Type definition files (d.ts)
-			// - Include/exclude patterns
-			// - Custom type roots (e.g., for Vue shims)
-			// Without this, ts-node might ignore the tsconfig.json includes			process.env.TS_NODE_FILES = process.env.TS_NODE_FILES || 'true';
-
-			// Import ts-node's ESM loader
-			const tsNodeEsm = await import('ts-node-maintained/esm');
-			tsLoader = tsNodeEsm;
-		} catch (error) {
-			console.error('>>> vue-loader: Failed to load ts-node ESM loader:', error);
-			throw error;
-		}
+	if (tsLoader) {
+		logger.checkpoint('getTsLoader (cached)');
+		return tsLoader;
+	}
+
+	logger.checkpoint('getTsLoader initializing');
+
+	try {
+		// Ensure ts-node respects tsconfig.json files
+		process.env.TS_NODE_FILES = process.env.TS_NODE_FILES || 'true';
+
+		logger.checkpoint('Importing ts-node-maintained/esm');
+		const tsNodeEsm = await import('ts-node-maintained/esm');
+		tsLoader = tsNodeEsm;
+
+		logger.checkpoint('ts-node ESM loader cached');
+		return tsLoader;
+	} catch (error) {
+		logger.error('Failed to load ts-node ESM loader', error);
+		throw new Error(`Failed to load ts-node ESM loader: ${error.message}`, { cause: error });
 	}
-	return tsLoader;
 }
 
 export async function load(url, context, nextLoad) {
+	logger.checkpoint('load', { url });
+
 	// Check common file types first
 	const commonResult = await handleCommonFileTypes(url, context, nextLoad);
-	if (commonResult) return commonResult;
+	if (commonResult) {
+		logger.checkpoint('load handled as common file type', { url });
+		return commonResult;
+	}
 
 	// Only process .vue files directly
 	if (url.endsWith('.vue')) {
+		logger.checkpoint('load handling Vue file', { url });
 		try {
-			return loadVue(url, context, nextLoad);
+			const result = await loadVue(url, context, nextLoad);
+			logger.checkpoint('Vue file loaded successfully', { url });
+			return result;
 		} catch (error) {
-			console.error(`>>> vue-loader: Failed to compile Vue SFC ${url}:`, error);
-			throw new Error(`Failed to compile Vue SFC ${url}: ${error.message}`);
+			logger.error('Failed to compile Vue SFC', error, { url });
+			throw new Error(`Failed to compile Vue SFC ${url}: ${error.message}`, { cause: error });
 		}
 	}
 
 	// For TypeScript files, delegate to ts-node
 	if (url.endsWith('.ts') || url.endsWith('.tsx')) {
+		logger.checkpoint('load delegating to ts-node', { url });
 		try {
 			const tsNode = await getTsLoader();
-			return tsNode.load(url, context, nextLoad);
+			const result = await tsNode.load(url, context, nextLoad);
+			logger.checkpoint('ts-node load success', { url });
+			return result;
 		} catch (error) {
-			console.error(`>>> vue-loader: ts-node failed for ${url}:`, error);
-			throw error;
+			logger.error('ts-node failed', error, { url });
+			throw new Error(`ts-node failed for ${url}: ${error.message}`, { cause: error });
 		}
 	}
 
 	// For everything else, use the default loader
-	// This includes: .js, .mjs, .json, node: URLs, etc.
+	logger.checkpoint('load delegating to nextLoad', { url });
 	return nextLoad(url, context);
 }
 
 export async function resolve(specifier, context, nextResolve) {
+	logger.checkpoint('resolve', { specifier, parentURL: context.parentURL });
+
 	// Try common resolution logic
 	const resolved = await resolveSpecifier(specifier, context, {
 		checkExtensions: true,
-		handleTsFiles: false, // Vue loader doesn't handle TS files directly
+		handleTsFiles: false,
 		nextResolve
 	});
 
 	if (resolved) {
+		logger.checkpoint('resolve success', { specifier, url: resolved.url });
 		return resolved;
 	}
 
+	logger.checkpoint('resolve delegating to nextResolve', { specifier });
 	return nextResolve(specifier, context);
 }