Skip to content

PR: Harden Legacy Module Resolution for Complex IDs & Improve Dev Diagnostics #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DJJones66 merged 1 commit into from
Aug 27, 2025
Merged

PR: Harden Legacy Module Resolution for Complex IDs & Improve Dev Diagnostics #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 64 additions & 19 deletions frontend/src/features/unified-dynamic-page-renderer/adapters/LegacyModuleAdapter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,25 +304,44 @@ export const LegacyModuleAdapter: React.FC<LegacyModuleAdapterProps> = React.mem

if (!targetModule) {
// Enhanced module ID extraction for complex generated IDs
// Format: PluginName_actualModuleId_timestamp
// Format: ServiceExample_Theme_userId_ServiceExample_Theme_actualModuleId_timestamp
const parts = moduleId.split('_');
if (parts.length >= 2) {
const extractedModuleId = parts[1]; // Get the actual module ID
if (parts.length >= 6) {
const extractedModuleId = parts[5]; // Get the actual module ID (ThemeDisplay/ThemeController)
targetModule = remotePlugin.loadedModules.find(m => m.id === extractedModuleId);

if (process.env.NODE_ENV === 'development') {
console.log(`[LegacyModuleAdapter] Trying extracted module ID: "${extractedModuleId}" from complex ID: "${moduleId}"`);
console.log(`[LegacyModuleAdapter] Module ID parts:`, parts);
if (targetModule) {
console.log(`[LegacyModuleAdapter] Successfully found module with extracted ID:`, {
console.log(`[LegacyModuleAdapter] ✅ Successfully found module with extracted ID:`, {
id: targetModule.id,
name: targetModule.name,
displayName: targetModule.displayName,
hasComponent: !!targetModule.component
});
}
}
}
}

if (!targetModule) {
// Enhanced fallback for complex IDs: try combined plugin_module format
const parts = moduleId.split('_');
if (parts.length >= 4) {
const combinedModuleId = `${parts[1]}_${parts[2]}`; // ServiceExample_Theme_ThemeDisplay
targetModule = remotePlugin.loadedModules.find(m =>
m.id === combinedModuleId ||
(m.id && m.id.endsWith(parts[2])) ||
m.name === parts[2]
);

if (process.env.NODE_ENV === 'development') {
console.log(`[LegacyModuleAdapter] Trying combined module ID: "${combinedModuleId}" and module name: "${parts[2]}"`);
}
}
}

if (!targetModule) {
// Try simple pattern removal (original logic)
const baseModuleId = moduleId.replace(/-\d+$/, '');
Expand All @@ -334,17 +353,19 @@ export const LegacyModuleAdapter: React.FC<LegacyModuleAdapterProps> = React.mem
}

if (!targetModule) {
// For complex generated IDs like "BrainDriveChat_1830586da8834501bea1ef1d39c3cbe8_BrainDriveChat_BrainDriveChat_1754404718788"
// Try to extract the plugin name (first part before underscore)
const pluginNameFromId = moduleId.split('_')[0];
targetModule = remotePlugin.loadedModules.find(m =>
m.id === pluginNameFromId ||
m.name === pluginNameFromId ||
(m.id && m.id.includes(pluginNameFromId))
);

if (process.env.NODE_ENV === 'development') {
console.log(`[LegacyModuleAdapter] Trying plugin name extraction: "${pluginNameFromId}" from moduleId: "${moduleId}"`);
// Final module name fallback: try exact match with the extracted module name
const parts = moduleId.split('_');
if (parts.length >= 3) {
const moduleNameOnly = parts[2];
targetModule = remotePlugin.loadedModules.find(m =>
m.name === moduleNameOnly ||
m.displayName === moduleNameOnly ||
(m.id && m.id.toLowerCase().includes(moduleNameOnly.toLowerCase()))
);

if (process.env.NODE_ENV === 'development') {
console.log(`[LegacyModuleAdapter] Trying module name fallback: "${moduleNameOnly}"`);
}
}
}

Expand Down Expand Up @@ -383,12 +404,36 @@ export const LegacyModuleAdapter: React.FC<LegacyModuleAdapterProps> = React.mem
}

if (process.env.NODE_ENV === 'development') {
console.log(`[LegacyModuleAdapter] Target module found:`, targetModule);
if (targetModule) {
const parts = moduleId ? moduleId.split('_') : [];
console.log(`[LegacyModuleAdapter] ✅ Module resolution successful:`, {
originalModuleId: moduleId,
extractedParts: parts,
extractedModuleId: parts.length >= 6 ? parts[5] : 'N/A',
resolvedModule: {
id: targetModule.id,
name: targetModule.name,
displayName: targetModule.displayName,
componentType: typeof targetModule.component,
hasComponent: !!targetModule.component
}
});
} else {
console.warn(`[LegacyModuleAdapter] ❌ Module resolution failed:`, {
originalModuleId: moduleId,
pluginId: pluginId,
moduleName: moduleName,
extractedParts: moduleId ? moduleId.split('_') : [],
availableModules: remotePlugin?.loadedModules?.map(m => ({
id: m.id,
name: m.name,
displayName: m.displayName
})) || []
});
}
}

if (!targetModule) {
if (process.env.NODE_ENV === 'development') {
console.log(`[LegacyModuleAdapter] No target module found for ${pluginId}/${moduleId || moduleName}`);
}
return null;
}

Expand Down
13 changes: 7 additions & 6 deletions frontend/src/features/unified-dynamic-page-renderer/components/LayoutEngine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,7 +580,7 @@ export const LayoutEngine: React.FC<LayoutEngineProps> = React.memo(({
// Pattern: BrainDriveBasicAIChat_59898811a4b34d9097615ed6698d25f6_1754507768265
// We want: 59898811a4b34d9097615ed6698d25f6
const parts = item.moduleId.split('_');
const extractedModuleId = parts.length >= 2 ? parts[1] : item.moduleId;
const extractedModuleId = parts.length >= 6 ? parts[5] : item.moduleId;

// Create stable breakpoint object
const breakpointConfig = {
Expand Down Expand Up @@ -651,12 +651,13 @@ export const LayoutEngine: React.FC<LayoutEngineProps> = React.memo(({
pluginId={item.pluginId}
moduleId={module._legacy?.moduleId || (() => {
// Extract simple module ID from complex ID
// Pattern: BrainDriveBasicAIChat_59898811a4b34d9097615ed6698d25f6_1754507768265
// We want: 59898811a4b34d9097615ed6698d25f6
// Pattern: ServiceExample_Theme_userId_ServiceExample_Theme_actualModuleId_timestamp
// Example: ServiceExample_Theme_c34bfc30de004813ad5b5d3a4ab9df34_ServiceExample_Theme_ThemeDisplay_1756311722722
// We want: ThemeDisplay (or ThemeController)
const parts = item.moduleId.split('_');
if (parts.length >= 2) {
// The module ID is typically the second part (after plugin name)
return parts[1];
if (parts.length >= 6) {
// The actual module ID is the sixth part (after ServiceExample_Theme_userId_ServiceExample_Theme)
return parts[5];
}
return item.moduleId; // fallback to original if pattern doesn't match
})()}
Expand Down