doc(app,manifest): add metadata attribute in manifest schema

Makefile

@@ -55,7 +55,7 @@ pkg/sdk/client/dist/client.js: tools/esbuild/bin/esbuild node_modules
 		--global-name=Edge \
 		--define:global=window \
 		--platform=browser \
-		--footer:js="Edge=Edge.default;" \
+		--footer:js="EdgeFrame=Edge.crossFrameMessenger;Edge=Edge.client" \
 		--outfile=pkg/sdk/client/dist/client.js
 
 node_modules:

cmd/cli/command/app/common.go

@@ -0,0 +1,11 @@
+package app
+
+import (
+	"forge.cadoles.com/arcad/edge/pkg/app"
+	"forge.cadoles.com/arcad/edge/pkg/app/metadata"
+)
+
+var manifestMetadataValidators = []app.MetadataValidator{
+	metadata.WithMinimumRoleValidator("visitor", "user", "superuser", "admin", "superadmin"),
+	metadata.WithNamedPathsValidator(metadata.NamedPathAdmin, metadata.NamedPathIcon),
+}

cmd/cli/command/app/package.go

@@ -52,6 +52,10 @@ func PackageCommand() *cli.Command {
 				return errors.Wrap(err, "could not load app manifest")
 			}
 
+			if valid, err := manifest.Validate(manifestMetadataValidators...); !valid {
+				return errors.Wrap(err, "invalid app manifest")
+			}
+
 			if err := os.MkdirAll(outputDir, 0o755); err != nil {
 				return errors.Wrapf(err, "could not create directory ''%s'", outputDir)
 			}

cmd/cli/command/app/run.go

@@ -110,6 +110,10 @@ func RunCommand() *cli.Command {
 				return errors.Wrap(err, "could not load manifest from app bundle")
 			}
 
+			if valid, err := manifest.Validate(manifestMetadataValidators...); !valid {
+				return errors.Wrap(err, "invalid app manifest")
+			}
+
 			storageFile := injectAppID(ctx.String("storage-file"), manifest.ID)
 
 			if err := ensureDir(storageFile); err != nil {

doc/README.md

@@ -6,6 +6,7 @@ Une **Edge App** est une application capable de s'exécuter dans un environnemen
 
 ### Référence
 
+- [Fichier `manifest.yml`](./apps/manifest.md)
 - [API Client](./apps/client-api/README.md)
 - [API Serveur](./apps/server-api/README.md)
 

doc/apps/client-api/README.md

@@ -1,68 +1,14 @@
 # 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`
-
-### `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;
-}
+```html
+<script src="/edge/sdk/client.js"></script>
 ```
 
-**Côté client**
+Vous pourrez ensuite accéder aux variables globales suivantes:
 
-```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));
-```
+- [`Edge`](./edge.md) - Client principal d'échange avec le serveur 
+- [`EdgeFrame`](./edge-frame.md)

doc/apps/client-api/edge-frame.md

@@ -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
+    }
+}
+```

doc/apps/client-api/edge.md

@@ -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));
+```

doc/apps/manifest.md

@@ -0,0 +1,36 @@
+# Le fichier `manifest.yml`
+
+Le fichier `manifest.yml` à la racine du bundle de votre application contient des informations décrivant celles ci. Vous trouverez ci dessous un exemple commenté.
+
+```yaml
+# REQUIS - L'identifiant de votre application. Il doit être globalement unique. 
+# Un identifiant du type nom de domaine inversé est en général conseillé (ex: tld.mycompany.myapp)
+id: tld.mycompany.myapp
+
+# REQUIS - Le numéro de version de votre application
+# Celui ci devrait respecter le format "semver 2" (voir https://semver.org/)
+version: 0.0.0
+
+# REQUIS - Le titre de votre application.
+title: My App
+
+# OPTIONNEL - Les mots-clés associés à votre applications.
+tags: ["chat"]
+
+# OPTIONNEL - La description de votre application.
+# Vous pouvez utiliser la syntaxe Markdown pour la mettre en forme.
+description: |>
+    A simple demo application
+
+# OPTIONNEL - Métadonnées associées à l'application
+metadata:
+    # OPTIONNEL - Liste des chemins permettant d'accéder à certains URLs identifiées (page d'administration, icône si existante, etc)
+    paths:
+        # Si défini, chemin vers la page d'administration de l'application
+        admin: /admin
+        # Si défini, chemin vers l'icône associée à l'application
+        icon: /my-app-icon.png
+
+    # OPTIONNEL - Role minimum requis pour pouvoir accéder à l'application 
+    minimumRole: visitor
+```

doc/apps/my-first-app.md

@@ -22,23 +22,7 @@ my-app
 
 Ce fichier est le manifeste de votre application. Il permet au serveur d'identifier celle ci et de récupérer des informations la concernant.
 
-```yaml
----
-# L'identifiant de votre application. Il doit être globalement unique. 
-# Un identifiant du type nom de domaine inversé est en général conseillé (ex: tld.mycompany.myapp)
-id: tld.mycompany.myapp
-
-# Le titre de votre application.
-title: My App
-
-# Les mots-clés associés à votre applications.
-tags: ["chat"]
-
-# La description de votre application.
-# Vous pouvez utiliser la syntaxe Markdown pour la mettre en forme.
-description: |>
-    A simple demo application
-```
+[Voir le fichier `manifest.yml` d'exemple](./manifest.md)
 
 ## 4. Créer la page d'accueil
 

doc/apps/server-api/app.md

@@ -49,10 +49,11 @@ URL associée à l'application, ou `null` si aucune application n'a été trouv
 
 ```typescript
 interface Manifest {
-    id: string              // Identifiant de l'application
-    version: string         // Version de l'application
-    title: string           // Titre associé à l'application
-    description: string     // Description associée à l'application
-    tags: string[]          // Mots clés associés à l'application
+    id: string                          // Identifiant de l'application
+    version: string                     // Version de l'application
+    title: string                       // Titre associé à l'application
+    description: string                 // Description associée à l'application
+    tags: string[]                      // Mots clés associés à l'application
+    metadata: { [key: string]: any }    // Métadonnées associées à l'application. Voir ../manifest.md
 }
 ```

misc/client-sdk-testsuite/src/public/test/app-module.js

@@ -39,7 +39,6 @@ describe('App Module', function() {
         .then(url => {
           console.log("getAppUrl result:", url);
           chai.assert.isNotEmpty(url);
-          chai.assert.match(url, /^http:\/\/127\.0\.0\.1/)
         })
     });
   

misc/client-sdk-testsuite/src/public/test/client-sdk.js

@@ -1,4 +1,5 @@
 Edge.debug = true;
+EdgeFrame.debug = true;
 
 describe('Edge', function() {
 

pkg/app/app.go

@@ -1,39 +0,0 @@
-package app
-
-import (
-	"forge.cadoles.com/arcad/edge/pkg/bundle"
-	"github.com/pkg/errors"
-	"gopkg.in/yaml.v2"
-)
-
-type ID string
-
-type Manifest struct {
-	ID          ID       `yaml:"id" json:"id"`
-	Version     string   `yaml:"version" json:"version"`
-	Title       string   `yaml:"title" json:"title"`
-	Description string   `yaml:"description" json:"description"`
-	Tags        []string `yaml:"tags" json:"tags"`
-}
-
-func LoadManifest(b bundle.Bundle) (*Manifest, error) {
-	reader, _, err := b.File("manifest.yml")
-	if err != nil {
-		return nil, errors.Wrap(err, "could not read manifest.yml")
-	}
-
-	defer func() {
-		if err := reader.Close(); err != nil {
-			panic(errors.WithStack(err))
-		}
-	}()
-
-	manifest := &Manifest{}
-
-	decoder := yaml.NewDecoder(reader)
-	if err := decoder.Decode(manifest); err != nil {
-		return nil, errors.Wrap(err, "could not decode manifest.yml")
-	}
-
-	return manifest, nil
-}

pkg/app/manifest.go

@@ -0,0 +1,85 @@
+package app
+
+import (
+	"strings"
+
+	"forge.cadoles.com/arcad/edge/pkg/bundle"
+	"github.com/pkg/errors"
+	"golang.org/x/mod/semver"
+	"gopkg.in/yaml.v2"
+)
+
+type ID string
+
+type Manifest struct {
+	ID          ID             `yaml:"id" json:"id"`
+	Version     string         `yaml:"version" json:"version"`
+	Title       string         `yaml:"title" json:"title"`
+	Description string         `yaml:"description" json:"description"`
+	Tags        []string       `yaml:"tags" json:"tags"`
+	Metadata    map[string]any `yaml:"metadata" json:"metadata"`
+}
+
+type MetadataValidator func(map[string]any) (bool, error)
+
+func (m *Manifest) Validate(validators ...MetadataValidator) (bool, error) {
+	if m.ID == "" {
+		return false, errors.New("'id' property should not be empty")
+	}
+
+	if m.Version == "" {
+		return false, errors.New("'version' property should not be empty")
+	}
+
+	version := m.Version
+	if !strings.HasPrefix(version, "v") {
+		version = "v" + version
+	}
+
+	if !semver.IsValid(version) {
+		return false, errors.Errorf("version '%s' does not respect semver format", m.Version)
+	}
+
+	if m.Title == "" {
+		return false, errors.New("'title' property should not be empty")
+	}
+
+	if m.Tags != nil {
+		for _, t := range m.Tags {
+			if strings.ContainsAny(t, " \t\n\r") {
+				return false, errors.Errorf("tag '%s' should not contain any space or new line", t)
+			}
+		}
+	}
+
+	for _, v := range validators {
+		valid, err := v(m.Metadata)
+		if !valid || err != nil {
+			return valid, errors.WithStack(err)
+		}
+	}
+
+	return true, nil
+}
+
+func LoadManifest(b bundle.Bundle) (*Manifest, error) {
+	reader, _, err := b.File("manifest.yml")
+	if err != nil {
+		return nil, errors.Wrap(err, "could not read manifest.yml")
+	}
+
+	defer func() {
+		if err := reader.Close(); err != nil {
+			panic(errors.WithStack(err))
+		}
+	}()
+
+	manifest := &Manifest{}
+
+	decoder := yaml.NewDecoder(reader)
+	if err := decoder.Decode(manifest); err != nil {
+		return nil, errors.Wrap(err, "could not decode manifest.yml")
+	}
+
+	return manifest, nil
+}

pkg/app/metadata/minimum_role.go

@@ -0,0 +1,28 @@
+package metadata
+
+import (
+	"forge.cadoles.com/arcad/edge/pkg/app"
+	"github.com/pkg/errors"
+)
+
+func WithMinimumRoleValidator(roles ...string) app.MetadataValidator {
+	return func(metadata map[string]any) (bool, error) {
+		rawMinimumRole, exists := metadata["minimumRole"]
+		if !exists {
+			return true, nil
+		}
+
+		minimumRole, ok := rawMinimumRole.(string)
+		if !ok {
+			return false, errors.Errorf("metadata['minimumRole']: unexpected value type '%T'", rawMinimumRole)
+		}
+
+		for _, r := range roles {
+			if minimumRole == r {
+				return true, nil
+			}
+		}
+
+		return false, errors.Errorf("metadata['minimumRole']: unexpected role '%s'", minimumRole)
+	}
+}

pkg/app/metadata/named_path.go

@@ -0,0 +1,56 @@
+package metadata
+
+import (
+	"strings"
+
+	"forge.cadoles.com/arcad/edge/pkg/app"
+	"github.com/pkg/errors"
+)
+
+type NamedPath string
+
+const (
+	NamedPathAdmin NamedPath = "admin"
+	NamedPathIcon  NamedPath = "icon"
+)
+
+func WithNamedPathsValidator(names ...NamedPath) app.MetadataValidator {
+	set := map[NamedPath]struct{}{}
+	for _, n := range names {
+		set[n] = struct{}{}
+	}
+
+	return func(metadata map[string]any) (bool, error) {
+		rawPaths, exists := metadata["paths"]
+		if !exists {
+			return true, nil
+		}
+
+		paths, ok := rawPaths.(map[any]any)
+		if !ok {
+			return false, errors.Errorf("metadata['paths']: unexpected named path value type '%T'", rawPaths)
+		}
+
+		for n, p := range paths {
+			name, ok := n.(string)
+			if !ok {
+				return false, errors.Errorf("metadata['paths']: unexpected named path type '%T'", n)
+			}
+
+			if _, exists := set[NamedPath(name)]; !exists {
+				return false, errors.Errorf("metadata['paths']: unexpected named path '%s'", name)
+			}
+
+			path, ok := p.(string)
+			if !ok {
+				return false, errors.Errorf("metadata['paths']['%s']: unexpected named path value type '%T'", name, path)
+			}
+
+			if !strings.HasPrefix(path, "/") {
+				return false, errors.Errorf("metadata['paths']['%s']: named path value should start with a '/'", name)
+			}
+		}
+
+		return true, nil
+	}
+}

pkg/app/metadata/testdata/manifests/invalid-minimum-role.yml

@@ -0,0 +1,7 @@
+id: foo.arcad.app
+version: v0.0.0
+title: Foo
+description: A test app
+tags: ["test"]
+metadata:
+  minimumRole: foo

pkg/app/metadata/testdata/manifests/invalid-paths.yml

@@ -0,0 +1,10 @@
+id: foo.arcad.app
+version: v0.0.0
+title: Foo
+description: A test app
+tags: ["test"]
+metadata:
+  paths:
+    invalid: /admin
+    icon: /my-app-icon.png
+  minimumRole: visitor

pkg/app/metadata/testdata/manifests/valid.yml

@@ -0,0 +1,10 @@
+id: foo.arcad.app
+version: v0.0.0
+title: Foo
+description: A test app
+tags: ["test"]
+metadata:
+  paths:
+    admin: /admin
+    icon: /my-app-icon.png
+  minimumRole: visitor

pkg/app/metadata/validator_test.go

@@ -0,0 +1,74 @@
+package metadata
+
+import (
+	"io/ioutil"
+	"path/filepath"
+	"testing"
+
+	"forge.cadoles.com/arcad/edge/pkg/app"
+	"github.com/pkg/errors"
+	"gopkg.in/yaml.v2"
+)
+
+type validatorTestCase struct {
+	File        string
+	ExpectValid bool
+	ExpectError bool
+}
+
+var validatorTestCases = []validatorTestCase{
+	{
+		File:        "valid.yml",
+		ExpectValid: true,
+	},
+	{
+		File:        "invalid-paths.yml",
+		ExpectValid: false,
+		ExpectError: true,
+	},
+	{
+		File:        "invalid-minimum-role.yml",
+		ExpectValid: false,
+		ExpectError: true,
+	},
+}
+
+var validators = []app.MetadataValidator{
+	WithMinimumRoleValidator("visitor", "user", "superuser", "admin", "superadmin"),
+	WithNamedPathsValidator(NamedPathAdmin, NamedPathIcon),
+}
+
+func TestManifestValidate(t *testing.T) {
+	for _, tc := range validatorTestCases {
+		func(tc *validatorTestCase) {
+			t.Run(tc.File, func(t *testing.T) {
+				data, err := ioutil.ReadFile(filepath.Join("testdata/manifests", tc.File))
+				if err != nil {
+					t.Fatalf("%+v", errors.WithStack(err))
+				}
+
+				var manifest app.Manifest
+
+				if err := yaml.Unmarshal(data, &manifest); err != nil {
+					t.Fatalf("%+v", errors.WithStack(err))
+				}
+
+				valid, err := manifest.Validate(validators...)
+
+				t.Logf("[RESULT] valid:%v, err:%v", valid, err)
+
+				if e, g := tc.ExpectValid, valid; e != g {
+					t.Errorf("valid: expected '%v', got '%v'", e, g)
+				}
+
+				if tc.ExpectError && err == nil {
+					t.Error("err should not be nil")
+				}
+
+				if !tc.ExpectError && err != nil {
+					t.Errorf("err: expected nil, got '%+v'", err)
+				}
+			})
+		}(&tc)
+	}
+}

pkg/sdk/client/dist/client.js

@@ -3785,7 +3785,8 @@ var Edge = (() => {
   // pkg/sdk/client/src/index.ts
   var src_exports = {};
   __export(src_exports, {
-    default: () => src_default
+    client: () => client,
+    crossFrameMessenger: () => crossFrameMessenger
   });
 
   // pkg/sdk/client/src/event-target.ts
@@ -4089,9 +4090,80 @@ var Edge = (() => {
     }
   };
 
+  // pkg/sdk/client/src/crossframe-messenger.ts
+  var CrossFrameMessenger = class extends EventTarget {
+    constructor() {
+      super();
+      this.debug = false;
+      this._handleWindowMessage = this._handleWindowMessage.bind(this);
+      this._initObservers = this._initObservers.bind(this);
+      window.addEventListener("load", this._initObservers);
+      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);
+    }
+    _initObservers() {
+      this._initResizeObserver();
+      this._initTitleMutationObserver();
+    }
+    _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 body2 = document.body, html = document.documentElement;
+        const height = Math.max(
+          body2.scrollHeight,
+          body2.offsetHeight,
+          html.clientHeight,
+          html.scrollHeight,
+          html.offsetHeight
+        );
+        const width = Math.max(
+          body2.scrollWidth,
+          body2.offsetWidth,
+          html.clientWidth,
+          html.scrollWidth,
+          html.offsetWidth
+        );
+        this.post({ type: "size_changed" /* SIZE_CHANGED */, data: { height, width } });
+      });
+      const body = document.body;
+      if (!body)
+        return;
+      resizeObserver.observe(body);
+    }
+  };
+
   // pkg/sdk/client/src/index.ts
-  var src_default = new Client();
+  var client = new Client();
+  var crossFrameMessenger = new CrossFrameMessenger();
   return __toCommonJS(src_exports);
 })();
-Edge=Edge.default;
+EdgeFrame=Edge.crossFrameMessenger;Edge=Edge.client
 //# sourceMappingURL=client.js.map

pkg/sdk/client/src/client.ts

@@ -19,15 +19,16 @@ export class Client extends EventTarget {
   constructor(autoReconnect = true) {
     super();
     this._conn = null;
+    
     this._onConnectionClose = this._onConnectionClose.bind(this);
     this._onConnectionMessage = this._onConnectionMessage.bind(this);
     this._handleRPCResponse = this._handleRPCResponse.bind(this);
+
     this._rpcID = 0;
     this._pendingRPC = {};
     this._queue = [];
     this._reconnectionDelay = 250;
     this._autoReconnect = autoReconnect;
-
     this.debug = false;
     
     this.connect = this.connect.bind(this);

pkg/sdk/client/src/crossframe-messenger.ts

@@ -0,0 +1,88 @@
+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._handleWindowMessage = this._handleWindowMessage.bind(this);
+        this._initObservers = this._initObservers.bind(this);
+
+        window.addEventListener('load', this._initObservers);
+        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);
+    }
+
+    _initObservers() {
+        this._initResizeObserver();
+        this._initTitleMutationObserver();
+    }
+
+    _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 }});
+        });
+
+        const body = document.body;
+
+        if (!body) return;
+
+        resizeObserver.observe(body);
+    }
+}

pkg/sdk/client/src/index.ts

@@ -1,3 +1,5 @@
 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();