QuantStack · tjaisson · Apr 20, 2024 · May 6, 2024
diff --git a/demo/index.html b/demo/index.html
@@ -1,37 +1,18 @@
 <html>
-  <title>JupyterLite embed example</title>
+  <head>
+    <title>JupyterLite embed example</title>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/comlink.min.js"></script>
+    <script src="https://cdn.ac-paris.fr/capytale/mp-agent.js"></script>
+  </head>
   <body>
-    <script type="text/javascript">
-      const type = 'jupyterlite-capytale';
-
-      function toggleTheme() {
-        window.frames.jupyterlite.postMessage({ type, action: 'toggleTheme' });
-      }
-
-      function save() {
-        window.frames.jupyterlite.postMessage({ type, action: 'save' });
-      }
-
-      function download() {
-        window.frames.jupyterlite.postMessage({ type, action: 'download' });
-      }
-
-      window.addEventListener('message', (event) => {
-        if (event.data.type !== type) {
-          // bail if the message is not from the JupyterLite IFrame
-          return;
-        }
-        console.log('Received message from JupyterLite IFrame', event.data);
-      });
-
-    </script>
     <h2>Below is a JupyterLite site running in an IFrame</h2>
     <p>
       Click the following button sends a message to the JupyterLab IFrame to toggle the theme.
     </p>
-    <input type="button" value="Toggle the JupyterLab Theme" onclick="toggleTheme()">
-    <input type="button" value="Save the notebook" onclick="save()">
-    <input type="button" value="Download the notebook" onclick="download()">
+    <input id="theme-btn" type="button" value="Toggle the JupyterLab Theme">
+    <input id="get-content-btn" type="button" value="retrieve current ipynb">
+    <input id="set-content-btn" type="button" value="set ipnb" disabled>
+    <span id="info"></span>
 
     <!--
       Change "src" to point to other JupyterLite applications:
@@ -41,12 +22,64 @@ <h2>Below is a JupyterLite site running in an IFrame</h2>
       - lite/repl for the JupyterLite REPL
     -->
     <iframe
+      id="jupyterlite-app"
       name="jupyterlite"
       src="lite/notebooks/index.html?path=intro.ipynb"
       width="100%"
       height="600px"
       sandbox="allow-scripts allow-same-origin"
     >
     </iframe>
+    <script>
+      const socket = MpAgent.getSocket(document.querySelector('#jupyterlite-app'));
+
+      // Gestion du theme
+      let theme = 'light';
+      // Branchement de l'implémentation du contrat 'theme' version 1
+      socket.plug(
+        ['theme:1'],
+        ([tc]) => {
+          document.querySelector('#theme-btn').addEventListener('click', () => {
+            theme = theme === 'light' ? 'dark' : 'light';
+            tc.i?.setTheme(theme);
+          });
+          return [
+            // implémentation de 'theme:1'
+            {
+              getCurrentTheme() {
+                return theme;
+              },
+            }
+          ];
+        }
+      );
+
+      // Gestion du contenu
+      // Branchement de l'implémentation du contrat 'simple-content(text)' version 1
+      socket.plug(
+        ['simple-content(text):1'],
+        ([scc]) => {
+          document.querySelector('#get-content-btn').addEventListener('click', async () => {
+            content = await scc.i?.getContent();
+            document.querySelector('#set-content-btn').disabled = false;
+            document.querySelector('#info').textContent = 'current ipnb retrieved (' + content.length + ' chars). Click on "set ipnb" to reload it.';
+            console.log('content size:', content.length);
+            scc.i?.contentSaved();
+          });
+          document.querySelector('#set-content-btn').addEventListener('click', async () => {
+            await scc.i?.loadContent(content);
+            document.querySelector('#info').textContent = 'ipnb reloaded';
+          });
+          return [
+            // implémentation de 'simple-content(text):1'
+            {
+              contentChanged() {
+                document.querySelector('#info').textContent = 'JupyterLite said the content changed.';
+              },
+            }
+          ];
+        }
+      );
+    </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -53,6 +53,8 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
+        "@capytale/app-agent": "^1.0.4",
+        "@capytale/contracts": "^1.0.1",
         "@jupyterlab/application": "^4.0.0",
         "@jupyterlab/apputils": "^4.0.0",
         "@jupyterlab/notebook": "^4.0.0"

diff --git a/src/index.ts b/src/index.ts
@@ -7,15 +7,11 @@ import { IThemeManager } from '@jupyterlab/apputils';
 
 import { INotebookTracker } from '@jupyterlab/notebook';
 
-/**
- * The message type for communication between the JupyterLite and the host.
- */
-const MESSAGE_TYPE = 'jupyterlite-capytale';
+// import de la définition des contrats Capytale
+import type { CapytaleContracts } from '@capytale/contracts';
 
-/**
- * The list of actions for interacting the JupyterLite
- */
-type Action = 'isDirty' | 'download' | 'restart' | 'save' | 'toggleTheme';
+// import de l'agent *Application* de Capytale
+import { getSocket } from '@capytale/app-agent';
 
 /**
  * Initialization data for the jupyterlab-capytale extension.
@@ -29,52 +25,57 @@ const plugin: JupyterFrontEndPlugin<void> = {
     notebookTracker: INotebookTracker,
     themeManager: IThemeManager
   ) => {
-    const { commands } = app;
-
-    const toggleTheme = () => {
-      if (themeManager.theme === 'JupyterLab Dark') {
+    const setTheme = (theme?: string | null) => {
+      if (theme === 'light') {
         themeManager.setTheme('JupyterLab Light');
-      } else {
+      } else if (theme === 'dark') {
         themeManager.setTheme('JupyterLab Dark');
       }
     };
 
-    // handle outgoing messages
-    const sendMessage = (action: Action, data?: any) => {
-      window.parent.postMessage(
+    // obtention du 'socket' de communication
+    const socket = getSocket<CapytaleContracts>();
+
+    // branchement de l'implémentation du côté *Application* des contrats suivants :
+    //  - 'theme' version 1
+    //  - 'simple-content(text)' version 1
+    socket.plug(['theme:1', 'simple-content(text):1'], () => {
+      return [
+        // implementation de theme:1
         {
-          type: MESSAGE_TYPE,
-          action,
-          data
+          setTheme(theme: string | null) {
+            setTheme(theme);
+          }
         },
-        '*'
-      );
-    };
-
-    // handle incoming message
-    window.addEventListener('message', event => {
-      if (event.data.type !== MESSAGE_TYPE) {
-        // bail if not a message from the host
-        return;
-      }
-
-      console.log('Message received:', event.data);
-
-      const action = event.data.action as Action;
-
-      switch (action) {
-        case 'save':
-          void commands.execute('docmanager:save');
-          break;
-        case 'download': {
-          const json = notebookTracker.currentWidget?.context.model.toJSON();
-          sendMessage('download', json);
-          break;
+        // implementation de simple-content(text):1
+        {
+          loadContent(content: string | null) {
+            if (content === null) {
+              console.log('should load an empty notebook...');
+            } else {
+              if (notebookTracker.currentWidget === null) {
+                throw new Error('Could not load content');
+              }
+              notebookTracker.currentWidget.context.model.fromString(content);
+            }
+          },
+          getContent() {
+            if (notebookTracker.currentWidget === null) {
+              throw new Error('No content');
+            }
+            return notebookTracker.currentWidget.context.model.toString();
+          },
+          contentSaved() {
+            console.log('thank you');
+          }
         }
-        case 'toggleTheme':
-          toggleTheme();
-          break;
-      }
+      ];
+    });
+
+    // utilisation du contrat 'theme' pour obtenir le thème actuel au démarrage
+    socket.use<['theme']>(['theme'], async ([tc]) => {
+      const theme = await tc.i?.getCurrentTheme();
+      setTheme(theme);
     });
 
     console.log('JupyterLab extension jupyterlab-capytale is activated!');

diff --git a/yarn.lock b/yarn.lock
@@ -40,6 +40,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@capytale/app-agent@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@capytale/app-agent@npm:1.0.4"
+  dependencies:
+    comlink: ^4.4.1
+  checksum: 43eac1f73816bfd6e1a1440d3ae585472b8936a221bc732f0a1202f0433478012fb80e40728155abb47c0af5a1827b858f77f27160834b8826edc16731d6d613
+  languageName: node
+  linkType: hard
+
+"@capytale/contracts@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@capytale/contracts@npm:1.0.1"
+  checksum: d95b81307906d8a44e282ea4ba437a10560155253130d8baf6135bbe1530e382bdf3674c7ef919bb9b6a54d85d934a8042134857663ccba3f9168dc8bfb3df38
+  languageName: node
+  linkType: hard
+
 "@codemirror/autocomplete@npm:^6.0.0, @codemirror/autocomplete@npm:^6.3.2, @codemirror/autocomplete@npm:^6.5.1, @codemirror/autocomplete@npm:^6.7.1":
   version: 6.12.0
   resolution: "@codemirror/autocomplete@npm:6.12.0"
@@ -2293,6 +2309,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comlink@npm:^4.4.1":
+  version: 4.4.1
+  resolution: "comlink@npm:4.4.1"
+  checksum: 16d58a8f590087fc45432e31d6c138308dfd4b75b89aec0b7f7bb97ad33d810381bd2b1e608a1fb2cf05979af9cbfcdcaf1715996d5fcf77aeb013b6da3260af
+  languageName: node
+  linkType: hard
+
 "commander@npm:^10.0.1":
   version: 10.0.1
   resolution: "commander@npm:10.0.1"
@@ -3883,6 +3906,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "jupyterlite-capytale@workspace:."
   dependencies:
+    "@capytale/app-agent": ^1.0.4
+    "@capytale/contracts": ^1.0.1
     "@jupyterlab/application": ^4.0.0
     "@jupyterlab/apputils": ^4.0.0
     "@jupyterlab/builder": ^4.0.0