@salesforce/storefront-next-dev 1.0.1 → 1.1.0-alpha.0

package/dist/index.js

@@ -1,8 +1,9 @@
-import path from "node:path";
+import path, { resolve } from "node:path";
 import fs from "fs-extra";
 import chalk from "chalk";
-import path$1, { dirname, join, relative, resolve } from "path";
-import { fileURLToPath, pathToFileURL } from "url";
+import { createRequire } from "module";
+import path$1, { dirname, join, relative, resolve as resolve$1 } from "path";
+import { fileURLToPath } from "url";
 import { parse } from "@babel/parser";
 import { booleanLiteral, identifier, importDeclaration, importSpecifier, isArrayPattern, isClassDeclaration, isExportSpecifier, isFunctionDeclaration, isIdentifier, isJSXAttribute, isJSXElement, isJSXFragment, isJSXIdentifier, isMemberExpression, isObjectPattern, isObjectProperty, isRestElement, isStringLiteral, isVariableDeclaration, jsxAttribute, jsxClosingElement, jsxClosingFragment, jsxElement, jsxExpressionContainer, jsxFragment, jsxIdentifier, jsxOpeningElement, jsxOpeningFragment, jsxText, stringLiteral } from "@babel/types";
 import { generate } from "@babel/generator";
@@ -10,7 +11,7 @@ import traverseModule from "@babel/traverse";
 import { existsSync, readFileSync, writeFileSync } from "fs";
 import { glob } from "glob";
 import { Node, Project, ts } from "ts-morph";
-import fs$1 from "node:fs";
+import fs$1, { existsSync as existsSync$1, readFileSync as readFileSync$1 } from "node:fs";
 import { deadCodeElimination, findReferencedIdentifiers } from "babel-dead-code-elimination";
 import httpProxy from "http-proxy";
 import { brotliDecompressSync, gunzipSync, inflateSync } from "zlib";
@@ -605,6 +606,45 @@ function buildTargetRegistry(rootDir, options = {}) {
 		actionHookRegistry
 	};
 }
+const TARGET_ID_PATTERN = /<UITarget[\s][^>]*targetId=["']([^"']+)["']/g;
+const EXCLUDED_DIRS = new Set(["ui-target-dev-mode", "ui-target-smoke-test"]);
+/**
+* Recursively collect all UITarget IDs declared in template source files.
+* Excludes extension directories so only "real" UITarget placements are counted.
+*/
+function collectUITargetIds(sourceDir) {
+	const result = /* @__PURE__ */ new Set();
+	function walk(dir) {
+		const entries = fs.readdirSync(dir, { withFileTypes: true });
+		for (const entry of entries) {
+			const fullPath = path$1.join(dir, entry.name);
+			if (entry.isDirectory()) {
+				if (entry.name === "extensions" || EXCLUDED_DIRS.has(entry.name)) continue;
+				walk(fullPath);
+			} else if (entry.isFile() && /\.(tsx?|jsx?)$/.test(entry.name) && !/\.test\.(tsx?|jsx?)$/.test(entry.name)) {
+				const content = fs.readFileSync(fullPath, "utf-8");
+				TARGET_ID_PATTERN.lastIndex = 0;
+				let match;
+				while ((match = TARGET_ID_PATTERN.exec(content)) !== null) result.add(match[1]);
+			}
+		}
+	}
+	walk(sourceDir);
+	return result;
+}
+/**
+* Validate that all targetIds in the component registry correspond to
+* UITarget declarations in the template source. Returns orphaned entries.
+*/
+function validateTargetRegistry(componentRegistry, declaredTargetIds) {
+	const orphaned = [];
+	for (const targetId in componentRegistry) if (!declaredTargetIds.has(targetId)) for (const entry of componentRegistry[targetId]) orphaned.push({
+		targetId,
+		extension: entry.namespace,
+		componentPath: entry.path
+	});
+	return orphaned;
+}
 
 //#endregion
 //#region src/plugins/transformTargets.ts
@@ -622,6 +662,12 @@ function transformTargetPlaceholderPlugin() {
 		},
 		buildStart() {
 			({componentRegistry, contextProviders} = buildTargetRegistry(sourceDir, { isProduction }));
+			const declaredTargetIds = collectUITargetIds(sourceDir);
+			const orphaned = validateTargetRegistry(componentRegistry, declaredTargetIds);
+			if (orphaned.length > 0) {
+				const lines = orphaned.map((o) => `  • "${o.targetId}" (extension: ${o.extension}, component: ${o.componentPath})`);
+				throw new Error(`[storefront-next] ${orphaned.length} extension component(s) target UITarget IDs that do not exist in the template:\n${lines.join("\n")}\n\nEither add a <UITarget targetId="..."> to the template or remove/disable the component in target-config.json.`);
+			}
 		},
 		transform(code, id) {
 			if (process.env.VITE_UI_TARGET_DEV_MODE === "true") return null;
@@ -833,7 +879,7 @@ async function scanComponents(project, projectRoot, componentPath, registryPath)
 	});
 	logger.debug(`🔍 Scanning ${componentFiles.length} files in ${componentPath}...`);
 	const components = [];
-	const registryDir = dirname(resolve(projectRoot, registryPath));
+	const registryDir = dirname(resolve$1(projectRoot, registryPath));
 	for (const filePath of componentFiles) try {
 		const content = readFileSync(filePath, "utf-8");
 		const sourceFile = project.createSourceFile(filePath, content, { overwrite: true });
@@ -876,11 +922,10 @@ async function scanComponents(project, projectRoot, componentPath, registryPath)
 function generateRegistryCode(components, registryIdentifier = "registry") {
 	const sorted = [...components].sort((a, b) => a.id.localeCompare(b.id) || a.relativePath.localeCompare(b.relativePath));
 	if (sorted.length === 0) return `
-/* eslint-disable */
 /**
  * Initialize the static component registry.
  * This function is auto-generated by the staticRegistry Vite plugin.
- * 
+ *
  * DO NOT EDIT THIS FUNCTION MANUALLY - it will be overwritten on next build.
  */
 export function initializeRegistry(targetRegistry = ${registryIdentifier}): void {
@@ -897,13 +942,12 @@ export function initializeRegistry(targetRegistry = ${registryIdentifier}): void
 		} else return `    targetRegistry.registerImporter('${id}', () => import('${relativePath}'));`;
 	}).join("\n");
 	return `
-/* eslint-disable */
 /**
  * Initialize the static component registry.
  * This function is auto-generated by the staticRegistry Vite plugin.
- * 
+ *
  * DO NOT EDIT THIS FUNCTION MANUALLY - it will be overwritten on next build.
- * 
+ *
  * Components registered: ${sorted.map((c) => c.id).join(", ")}
  */
 export function initializeRegistry(targetRegistry = ${registryIdentifier}): void {
@@ -912,9 +956,42 @@ ${registrations}
 `;
 }
 /**
+* Formats registry file content with the project's own Prettier so the written file
+* matches what the project's formatter would produce.
+*
+* Without this, a standalone `prettier --write` (pre-commit hook, format-on-save) rewrites
+* the generated file on every commit: the generator emits one `registerImporter` call per
+* line and cannot anticipate an arbitrary `printWidth`, so Prettier re-wraps long lines and
+* the regenerate -> format -> regenerate loop never settles.
+*
+* Prettier is resolved from the registry file's own location — i.e. the consuming project's
+* `node_modules`, not the SDK bundle (which keeps `node_modules` external). It is the project's
+* Prettier version and config whose output must be matched. Returns the content unchanged when
+* Prettier is absent or fails, so registry generation never breaks a build over formatting.
+*/
+let warnedNoPrettier = false;
+async function formatWithProjectPrettier(content, registryFilePath) {
+	try {
+		const prettier = createRequire(registryFilePath)("prettier");
+		const config = await prettier.resolveConfig(registryFilePath, { editorconfig: true });
+		return await prettier.format(content, {
+			...config,
+			filepath: registryFilePath
+		});
+	} catch (error) {
+		if (error.code === "MODULE_NOT_FOUND") {
+			if (!warnedNoPrettier) {
+				logger.warn("⚠️  Prettier not found in the project; static registry will be written unformatted.");
+				warnedNoPrettier = true;
+			}
+		} else logger.warn(`⚠️  Skipping Prettier formatting for registry file: ${error.message}`);
+		return content;
+	}
+}
+/**
 * Updates the registry.ts file with the generated code
 */
-function updateRegistryFile(registryFilePath, generatedCode) {
+async function updateRegistryFile(registryFilePath, generatedCode) {
 	let existingContent;
 	if (!existsSync(registryFilePath)) {
 		logger.debug("📝 Creating new registry file...");
@@ -939,7 +1016,7 @@ export const registry = new ComponentRegistry();
 	const startIndex = existingContent.indexOf(startMarker);
 	const endIndex = existingContent.indexOf(endMarker);
 	if (startIndex === -1 || endIndex === -1) throw new Error(`Registry file ${registryFilePath} is missing static registry markers. Please add "${startMarker}" and "${endMarker}" markers to define the generated content area.`);
-	const updatedContent = `${existingContent.slice(0, startIndex + 24)}\n${generatedCode}\n${existingContent.slice(endIndex)}`;
+	const updatedContent = await formatWithProjectPrettier(`${existingContent.slice(0, startIndex + 24)}\n${generatedCode}\n${existingContent.slice(endIndex)}`, registryFilePath);
 	if (updatedContent === existingContent) {
 		logger.debug(`⏭️  Registry unchanged, skipping write: ${registryFilePath}`);
 		return false;
@@ -990,8 +1067,8 @@ const staticRegistryPlugin = (config = {}) => {
 		} }), projectRoot, componentPath, registryPath);
 		logger.debug(`📦 Found ${components.length} components with @Component decorators`);
 		const generatedCode = generateRegistryCode(components, registryIdentifier);
-		const registryFilePath = resolve(projectRoot, registryPath);
-		const changed = updateRegistryFile(registryFilePath, generatedCode);
+		const registryFilePath = resolve$1(projectRoot, registryPath);
+		const changed = await updateRegistryFile(registryFilePath, generatedCode);
 		logger.debug("✅ Static registry generation complete!");
 		return {
 			registryFilePath,
@@ -1033,15 +1110,68 @@ const staticRegistryPlugin = (config = {}) => {
 	};
 };
 
+//#endregion
+//#region src/server/ts-import.ts
+/**
+* Parse TypeScript paths from tsconfig.json and convert to jiti alias format.
+*
+* @param tsconfigPath - Path to tsconfig.json
+* @param projectDirectory - Project root directory for resolving relative paths
+* @returns Record of alias mappings for jiti
+*
+* @example
+* // tsconfig.json: { "compilerOptions": { "paths": { "@/*": ["./src/*"] } } }
+* // Returns: { "@/": "/absolute/path/to/src/" }
+*/
+function parseTsconfigPaths(tsconfigPath, projectDirectory) {
+	const alias = {};
+	if (!existsSync$1(tsconfigPath)) return alias;
+	try {
+		const tsconfigContent = readFileSync$1(tsconfigPath, "utf-8");
+		const tsconfig = JSON.parse(tsconfigContent);
+		const paths = tsconfig.compilerOptions?.paths;
+		const baseUrl = tsconfig.compilerOptions?.baseUrl || ".";
+		if (paths) {
+			for (const [key, values] of Object.entries(paths)) if (values && values.length > 0) {
+				const aliasKey = key.replace(/\/\*$/, "/");
+				alias[aliasKey] = resolve(projectDirectory, baseUrl, values[0].replace(/\/\*$/, "/").replace(/^\.\//, ""));
+			}
+		}
+	} catch {}
+	const sortedAlias = {};
+	Object.keys(alias).sort((a, b) => b.length - a.length).forEach((key) => {
+		sortedAlias[key] = alias[key];
+	});
+	return sortedAlias;
+}
+/**
+* Import a TypeScript file using jiti with proper path alias resolution.
+* This is a cross-platform alternative to tsx that works on Windows.
+*
+* @param filePath - Absolute path to the TypeScript file to import
+* @param options - Import options including project directory
+* @returns The imported module
+*/
+async function importTypescript(filePath, options) {
+	const { projectDirectory, tsconfigPath = resolve(projectDirectory, "tsconfig.json") } = options;
+	const { createJiti } = await import("jiti");
+	const alias = parseTsconfigPaths(tsconfigPath, projectDirectory);
+	return createJiti(import.meta.url, {
+		fsCache: false,
+		interopDefault: true,
+		alias
+	}).import(filePath);
+}
+
 //#endregion
 //#region src/plugins/configLoader.ts
 /**
 * Load the engagement config from config.server.ts
 */
 async function loadEngagementConfig(projectRoot, configPath) {
-	const absoluteConfigPath = resolve(projectRoot, configPath);
+	const absoluteConfigPath = resolve$1(projectRoot, configPath);
 	try {
-		const config = (await import(pathToFileURL(absoluteConfigPath).href)).default;
+		const config = (await importTypescript(absoluteConfigPath, { projectDirectory: projectRoot })).default;
 		logger.debug(`📄 Loaded config from ${configPath}`);
 		const engagement = config?.app?.engagement;
 		if (!engagement) {
@@ -1066,7 +1196,7 @@ async function scanForInstrumentedEvents(projectRoot, scanPaths) {
 	const sendViewPagePattern = /sendViewPageEvent\s*\(/g;
 	const createEventPattern = /createEvent\s*\(\s*['"]([^'"]+)['"]/g;
 	for (const scanPath of scanPaths) {
-		const files = await glob(join(resolve(projectRoot, scanPath), "**/*.{ts,tsx}"), { ignore: [
+		const files = await glob(join(resolve$1(projectRoot, scanPath), "**/*.{ts,tsx}"), { ignore: [
 			"**/*.test.ts",
 			"**/*.test.tsx",
 			"**/*.spec.ts",
@@ -1218,17 +1348,17 @@ const buildMiddlewareRegistryPlugin = () => {
 		configResolved(config) {
 			resolvedConfig = config;
 			const rr = config.__reactRouterPluginContext?.reactRouterConfig ?? {};
-			buildDirectory = rr.buildDirectory ?? resolve(config.root, "build");
+			buildDirectory = rr.buildDirectory ?? resolve$1(config.root, "build");
 			appDirectory = rr.appDirectory ?? "src";
 		},
 		buildApp: {
 			order: "post",
 			handler: async () => {
 				const projectRoot = resolvedConfig.root;
-				const middlewareRegistryPath = resolve(projectRoot, appDirectory, SERVER_OUT_SUBDIR, MIDDLEWARE_REGISTRY_SOURCE_FILE);
+				const middlewareRegistryPath = resolve$1(projectRoot, appDirectory, SERVER_OUT_SUBDIR, MIDDLEWARE_REGISTRY_SOURCE_FILE);
 				if (!existsSync(middlewareRegistryPath)) return;
 				const { build } = await import("tsdown");
-				const serverOutDir = resolve(projectRoot, buildDirectory, SERVER_OUT_SUBDIR);
+				const serverOutDir = resolve$1(projectRoot, buildDirectory, SERVER_OUT_SUBDIR);
 				await build({
 					cwd: projectRoot,
 					entry: { [MIDDLEWARE_REGISTRY_SOURCE_FILE.replace(/\.ts$/, "")]: middlewareRegistryPath },