https://github.com/jpb06/sdk-test
https://github.com/jpb06/sdk-test
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jpb06/sdk-test
- Owner: jpb06
- License: mit
- Created: 2024-07-17T13:05:13.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-19T14:01:22.000Z (about 2 years ago)
- Last Synced: 2025-01-12T09:28:19.052Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://sdk-test.vercel.app
- Size: 379 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sdk-test
This is a POC for the integration of a web app into a heavy client. The heavy client part can be found [here](https://github.com/jpb06/sdk-test-java-app).
# Next app
Our next app will expose several pages. Each page can be seen as an independent feature block (called widget) that can be loaded in an oustide context (like a heavy client app, for example).
# Communication
To communicate with the outside context, [fseglard](https://github.com/fseglard) has written a sdk based on [post message api](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
## Sdk API
### `init`
The `init` function replaces an element in the DOM with an iframe that will target one of our next app widget pages.
```tsx
const widget = new window.WidgetSdk({
baseUrl: 'http://localhost:3000',
frameHeight: 600,
frameWidth: 900,
theme: 'neutral',
token: 'my-token',
type: 'user',
});
widget.init('my-widget');
```
### `emit`
The `emit` function sends an event:
```typescript
const framebus = useFramebusContext();
const handleClick = () => {
framebus.emit('user.actions.doStuff', {
payload: {
id: 126
name: 'Yolo bro',
},
});
};
```
### `on`
The `on` function creates a listener for an event type:
```typescript
const framebus = useFramebusContext();
useEffect(() => {
framebus.on('user.get', ({ id }) => {
console.info(`user.get event fired with id ${id}`);
// ...
});
}, [framebus]);
```