feat(sdk,client): add edgeframe sdk api
arcad/edge/pipeline/head This commit looks good
Details
arcad/edge/pipeline/head This commit looks good
Details
This commit is contained in:
parent
68e35bf5a6
commit
240b07af66
2
Makefile
2
Makefile
|
@ -55,7 +55,7 @@ pkg/sdk/client/dist/client.js: tools/esbuild/bin/esbuild node_modules
|
||||||
--global-name=Edge \
|
--global-name=Edge \
|
||||||
--define:global=window \
|
--define:global=window \
|
||||||
--platform=browser \
|
--platform=browser \
|
||||||
--footer:js="Edge=Edge.default;" \
|
--footer:js="EdgeFrame=Edge.crossFrameMessenger;Edge=Edge.client" \
|
||||||
--outfile=pkg/sdk/client/dist/client.js
|
--outfile=pkg/sdk/client/dist/client.js
|
||||||
|
|
||||||
node_modules:
|
node_modules:
|
||||||
|
|
|
@ -1,68 +1,14 @@
|
||||||
# API Client
|
# API Client
|
||||||
|
|
||||||
## Méthodes
|
## Usage
|
||||||
|
|
||||||
### `Edge.connect(): Promise`
|
Afin de pouvoir utiliser le SDK "client", vous devez inclure dans la page HTML de votre application la balise `<script>` suivante:
|
||||||
|
|
||||||
> `TODO`
|
```html
|
||||||
|
<script src="/edge/sdk/client.js"></script>
|
||||||
### `Edge.disconnect(): void`
|
|
||||||
|
|
||||||
> `TODO`
|
|
||||||
|
|
||||||
|
|
||||||
### `Edge.send(message: Object): void`
|
|
||||||
|
|
||||||
> `TODO`
|
|
||||||
|
|
||||||
|
|
||||||
### `Edge.rpc(method: string, params: Object): Promise`
|
|
||||||
|
|
||||||
> `TODO`
|
|
||||||
#### Exemple
|
|
||||||
|
|
||||||
**Côté serveur**
|
|
||||||
|
|
||||||
```js
|
|
||||||
function onInit() {
|
|
||||||
rpc.register(echo);
|
|
||||||
}
|
|
||||||
|
|
||||||
function echo(ctx, params) {
|
|
||||||
return params;
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
**Côté client**
|
Vous pourrez ensuite accéder aux variables globales suivantes:
|
||||||
|
|
||||||
```js
|
- [`Edge`](./edge.md) - Client principal d'échange avec le serveur
|
||||||
Edge.connect().then(() => {
|
- [`EdgeFrame`](./edge-frame.md)
|
||||||
Edge.rpc("echo", { hello: "world!" })
|
|
||||||
.then(result => console.log(result))
|
|
||||||
.catch(err => console.error(err));
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### `Edge.upload(blob: Blob, metadata: Object): Promise`
|
|
||||||
|
|
||||||
> `TODO`
|
|
||||||
|
|
||||||
### `Edge.blobUrl(bucketName: string, blobId: string): string`
|
|
||||||
|
|
||||||
> `TODO`
|
|
||||||
|
|
||||||
### `Edge.externalUrl(url: string): string`
|
|
||||||
|
|
||||||
Retourne une URL "locale" permettant d'accéder à une ressource externe, en fonction de règles propres à l'application. Voir module [`fetch`](../server-api/fetch.md).
|
|
||||||
|
|
||||||
## Événements
|
|
||||||
|
|
||||||
### `"message"`
|
|
||||||
|
|
||||||
> `TODO`
|
|
||||||
|
|
||||||
#### Exemple
|
|
||||||
|
|
||||||
```js
|
|
||||||
Edge.addEventListener("message", evt => console.log(evt.detail));
|
|
||||||
```
|
|
|
@ -0,0 +1,30 @@
|
||||||
|
# `EdgeFrame`
|
||||||
|
|
||||||
|
## Méthodes
|
||||||
|
|
||||||
|
### `EdgeFrame.addEventListener(name: string, listener: (event) => void)`
|
||||||
|
|
||||||
|
> `TODO`
|
||||||
|
|
||||||
|
## Événements
|
||||||
|
|
||||||
|
### `"title_changed"`
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface TitleChangedEvent {
|
||||||
|
detail: {
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### `"size_changed"`
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface SizeChangedEvent {
|
||||||
|
detail: {
|
||||||
|
width: number
|
||||||
|
height: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
|
@ -0,0 +1,68 @@
|
||||||
|
# `Edge`
|
||||||
|
|
||||||
|
## Méthodes
|
||||||
|
|
||||||
|
### `Edge.connect(): Promise`
|
||||||
|
|
||||||
|
> `TODO`
|
||||||
|
|
||||||
|
### `Edge.disconnect(): void`
|
||||||
|
|
||||||
|
> `TODO`
|
||||||
|
|
||||||
|
|
||||||
|
### `Edge.send(message: Object): void`
|
||||||
|
|
||||||
|
> `TODO`
|
||||||
|
|
||||||
|
|
||||||
|
### `Edge.rpc(method: string, params: Object): Promise`
|
||||||
|
|
||||||
|
> `TODO`
|
||||||
|
#### Exemple
|
||||||
|
|
||||||
|
**Côté serveur**
|
||||||
|
|
||||||
|
```js
|
||||||
|
function onInit() {
|
||||||
|
rpc.register(echo);
|
||||||
|
}
|
||||||
|
|
||||||
|
function echo(ctx, params) {
|
||||||
|
return params;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Côté client**
|
||||||
|
|
||||||
|
```js
|
||||||
|
Edge.connect().then(() => {
|
||||||
|
Edge.rpc("echo", { hello: "world!" })
|
||||||
|
.then(result => console.log(result))
|
||||||
|
.catch(err => console.error(err));
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### `Edge.upload(blob: Blob, metadata: Object): Promise`
|
||||||
|
|
||||||
|
> `TODO`
|
||||||
|
|
||||||
|
### `Edge.blobUrl(bucketName: string, blobId: string): string`
|
||||||
|
|
||||||
|
> `TODO`
|
||||||
|
|
||||||
|
### `Edge.externalUrl(url: string): string`
|
||||||
|
|
||||||
|
Retourne une URL "locale" permettant d'accéder à une ressource externe, en fonction de règles propres à l'application. Voir module [`fetch`](../server-api/fetch.md).
|
||||||
|
|
||||||
|
## Événements
|
||||||
|
|
||||||
|
### `"message"`
|
||||||
|
|
||||||
|
> `TODO`
|
||||||
|
|
||||||
|
#### Exemple
|
||||||
|
|
||||||
|
```js
|
||||||
|
Edge.addEventListener("message", evt => console.log(evt.detail));
|
||||||
|
```
|
|
@ -1,4 +1,5 @@
|
||||||
Edge.debug = true;
|
Edge.debug = true;
|
||||||
|
EdgeFrame.debug = true;
|
||||||
|
|
||||||
describe('Edge', function() {
|
describe('Edge', function() {
|
||||||
|
|
||||||
|
|
|
@ -3785,7 +3785,8 @@ var Edge = (() => {
|
||||||
// pkg/sdk/client/src/index.ts
|
// pkg/sdk/client/src/index.ts
|
||||||
var src_exports = {};
|
var src_exports = {};
|
||||||
__export(src_exports, {
|
__export(src_exports, {
|
||||||
default: () => src_default
|
client: () => client,
|
||||||
|
crossFrameMessenger: () => crossFrameMessenger
|
||||||
});
|
});
|
||||||
|
|
||||||
// pkg/sdk/client/src/event-target.ts
|
// pkg/sdk/client/src/event-target.ts
|
||||||
|
@ -4089,9 +4090,73 @@ var Edge = (() => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// pkg/sdk/client/src/crossframe-messenger.ts
|
||||||
|
var CrossFrameMessenger = class extends EventTarget {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.debug = false;
|
||||||
|
this._initResizeObserver();
|
||||||
|
this._initTitleMutationObserver();
|
||||||
|
this._handleWindowMessage = this._handleWindowMessage.bind(this);
|
||||||
|
window.addEventListener("message", this._handleWindowMessage);
|
||||||
|
}
|
||||||
|
post(message, target = window.parent) {
|
||||||
|
if (!target)
|
||||||
|
return;
|
||||||
|
this._log("sending crossframe message", message);
|
||||||
|
target.postMessage(message);
|
||||||
|
}
|
||||||
|
_log(...args) {
|
||||||
|
if (!this.debug)
|
||||||
|
return;
|
||||||
|
console.log(...args);
|
||||||
|
}
|
||||||
|
_handleWindowMessage(evt) {
|
||||||
|
const message = evt.data;
|
||||||
|
const event = new CustomEvent(message.type, {
|
||||||
|
cancelable: true,
|
||||||
|
detail: message.data
|
||||||
|
});
|
||||||
|
this.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
_initTitleMutationObserver() {
|
||||||
|
const titleObserver = new MutationObserver((mutations) => {
|
||||||
|
const title2 = mutations[0].target.textContent;
|
||||||
|
this.post({ type: "title_changed" /* TITLE_CHANGED */, data: { title: title2 } });
|
||||||
|
});
|
||||||
|
const title = document.querySelector("title");
|
||||||
|
if (!title)
|
||||||
|
return;
|
||||||
|
this.post({ type: "title_changed" /* TITLE_CHANGED */, data: { title: title.textContent } });
|
||||||
|
titleObserver.observe(title, { subtree: true, characterData: true, childList: true });
|
||||||
|
}
|
||||||
|
_initResizeObserver() {
|
||||||
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
|
const body = document.body, html = document.documentElement;
|
||||||
|
const height = Math.max(
|
||||||
|
body.scrollHeight,
|
||||||
|
body.offsetHeight,
|
||||||
|
html.clientHeight,
|
||||||
|
html.scrollHeight,
|
||||||
|
html.offsetHeight
|
||||||
|
);
|
||||||
|
const width = Math.max(
|
||||||
|
body.scrollWidth,
|
||||||
|
body.offsetWidth,
|
||||||
|
html.clientWidth,
|
||||||
|
html.scrollWidth,
|
||||||
|
html.offsetWidth
|
||||||
|
);
|
||||||
|
this.post({ type: "size_changed" /* SIZE_CHANGED */, data: { height, width } });
|
||||||
|
});
|
||||||
|
resizeObserver.observe(document.body);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// pkg/sdk/client/src/index.ts
|
// pkg/sdk/client/src/index.ts
|
||||||
var src_default = new Client();
|
var client = new Client();
|
||||||
|
var crossFrameMessenger = new CrossFrameMessenger();
|
||||||
return __toCommonJS(src_exports);
|
return __toCommonJS(src_exports);
|
||||||
})();
|
})();
|
||||||
Edge=Edge.default;
|
EdgeFrame=Edge.crossFrameMessenger;Edge=Edge.client
|
||||||
//# sourceMappingURL=client.js.map
|
//# sourceMappingURL=client.js.map
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -19,15 +19,16 @@ export class Client extends EventTarget {
|
||||||
constructor(autoReconnect = true) {
|
constructor(autoReconnect = true) {
|
||||||
super();
|
super();
|
||||||
this._conn = null;
|
this._conn = null;
|
||||||
|
|
||||||
this._onConnectionClose = this._onConnectionClose.bind(this);
|
this._onConnectionClose = this._onConnectionClose.bind(this);
|
||||||
this._onConnectionMessage = this._onConnectionMessage.bind(this);
|
this._onConnectionMessage = this._onConnectionMessage.bind(this);
|
||||||
this._handleRPCResponse = this._handleRPCResponse.bind(this);
|
this._handleRPCResponse = this._handleRPCResponse.bind(this);
|
||||||
|
|
||||||
this._rpcID = 0;
|
this._rpcID = 0;
|
||||||
this._pendingRPC = {};
|
this._pendingRPC = {};
|
||||||
this._queue = [];
|
this._queue = [];
|
||||||
this._reconnectionDelay = 250;
|
this._reconnectionDelay = 250;
|
||||||
this._autoReconnect = autoReconnect;
|
this._autoReconnect = autoReconnect;
|
||||||
|
|
||||||
this.debug = false;
|
this.debug = false;
|
||||||
|
|
||||||
this.connect = this.connect.bind(this);
|
this.connect = this.connect.bind(this);
|
||||||
|
|
|
@ -0,0 +1,80 @@
|
||||||
|
import { EventTarget } from "./event-target";
|
||||||
|
|
||||||
|
enum CrossFrameMessageType {
|
||||||
|
SIZE_CHANGED = "size_changed",
|
||||||
|
TITLE_CHANGED = "title_changed"
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CrossFrameMessage {
|
||||||
|
type: CrossFrameMessageType
|
||||||
|
data: { [key: string]: any }
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CrossFrameMessenger extends EventTarget {
|
||||||
|
debug: boolean;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.debug = false;
|
||||||
|
|
||||||
|
this._initResizeObserver();
|
||||||
|
this._initTitleMutationObserver();
|
||||||
|
|
||||||
|
this._handleWindowMessage = this._handleWindowMessage.bind(this);
|
||||||
|
|
||||||
|
window.addEventListener('message', this._handleWindowMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
post(message: CrossFrameMessage, target: Window = window.parent) {
|
||||||
|
if (!target) return;
|
||||||
|
this._log("sending crossframe message", message);
|
||||||
|
target.postMessage(message)
|
||||||
|
}
|
||||||
|
|
||||||
|
_log(...args) {
|
||||||
|
if (!this.debug) return;
|
||||||
|
console.log(...args);
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleWindowMessage(evt: MessageEvent) {
|
||||||
|
const message = evt.data;
|
||||||
|
const event = new CustomEvent(message.type, {
|
||||||
|
cancelable: true,
|
||||||
|
detail: message.data
|
||||||
|
});
|
||||||
|
|
||||||
|
this.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
_initTitleMutationObserver() {
|
||||||
|
const titleObserver = new MutationObserver((mutations) => {
|
||||||
|
const title = mutations[0].target.textContent;
|
||||||
|
this.post({ type: CrossFrameMessageType.TITLE_CHANGED, data: { title }});
|
||||||
|
});
|
||||||
|
|
||||||
|
const title = document.querySelector('title');
|
||||||
|
|
||||||
|
if (!title) return;
|
||||||
|
|
||||||
|
this.post({ type: CrossFrameMessageType.TITLE_CHANGED, data: { title: title.textContent }});
|
||||||
|
|
||||||
|
titleObserver.observe(title, { subtree: true, characterData: true, childList: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
_initResizeObserver() {
|
||||||
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
|
const body = document.body,
|
||||||
|
html = document.documentElement;
|
||||||
|
|
||||||
|
const height = Math.max( body.scrollHeight, body.offsetHeight,
|
||||||
|
html.clientHeight, html.scrollHeight, html.offsetHeight );
|
||||||
|
|
||||||
|
const width = Math.max( body.scrollWidth, body.offsetWidth,
|
||||||
|
html.clientWidth, html.scrollWidth, html.offsetWidth );
|
||||||
|
|
||||||
|
this.post({ type: CrossFrameMessageType.SIZE_CHANGED, data: { height, width }});
|
||||||
|
});
|
||||||
|
|
||||||
|
resizeObserver.observe(document.body);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,3 +1,5 @@
|
||||||
import { Client } from './client.js';
|
import { Client } from './client.js';
|
||||||
|
import { CrossFrameMessenger } from './crossframe-messenger.js';
|
||||||
|
|
||||||
export default new Client();
|
export const client = new Client();
|
||||||
|
export const crossFrameMessenger = new CrossFrameMessenger();
|
Loading…
Reference in New Issue