This document outlines the changes needed to migrate from the old plugin bridge system to the new Cloud Apps Core system.
First, install the required package:
yarn add @jtl-software/cloud-apps-core
After completing the migration, remove the old package:
yarn remove @jtl-software/platform-plugins-core
The migration involves three main pattern changes:
- Package and Import: Switch from
platform-plugins-core
tocloud-apps-core
- Initialization: Update the AppBridge initialization to happen in before the App renders.
- Method Calls: Add
.method
namespace to all bridge method calls - Event Handling: Add
.event
namespace to all event subscriptions
Before:
import { createPluginBridge, PluginBridge } from '@jtl-software/platform-plugins-core';
After:
import { AppBridge, createAppBridge } from '@jtl-software/cloud-apps-core';
The main change in initialization is moving the AppBridge creation outside of your React component to happen before the app renders. This ensures the bridge is available immediately when your app starts.
Before:
function YourAppComponent() {
// Store the AppBridge instance in component state
const [appBridge, setAppBridge] = useState<AppBridge | undefined>(undefined);
useEffect((): void => {
console.log('[HelloWorldApp] createAppBridge...');
createAppBridge().then(bridge => {
console.log('[HelloWorldApp] bridge created!');
// Store the bridge instance in state for use throughout your component
setAppBridge(bridge);
});
}, []);
// Rest of your component...
}
After:
import { createAppBridge } from '@jtl-software/cloud-apps-core';
createAppBridge().then(appBridge => {
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App appBridge={appBridge} />
</StrictMode>,
);
});
All bridge method calls now require the .method
namespace to maintain better organization and prevent naming conflicts.
Before:
appBridge.callMethod('methodName', { param: 'value' });
After:
appBridge.method.call('methodName', { param: 'value' });
Before:
appBridge.subscribe('eventName', (data: EventDataType) => {
// Handle event data
});
After:
appBridge.event.subscribe('eventName', (data: EventDataType) => {
// Handle event data
});
- Install the new package:
yarn add @jtl-software/cloud-apps-core
- Update import statements to use
AppBridge
andcreateAppBridge
- Replace
bridge.callMethod()
calls withbridge.method.call()
- Update event subscriptions to use
appBridge.event.subscribe()
- Test all functionality after migration
- Update any TypeScript types if needed
- Remove the old package:
yarn remove @jtl-software/platform-plugins-core