feat: update to latest component-relay (#61)

* feat: update to latest component-relay

* fix: refactor main.js

* chore: build

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>

Author: johnny243

app/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ComponentManager from 'sn-components-api';
+import ComponentRelay from '@standardnotes/component-relay';
 
 export default class Home extends React.Component {
 
@@ -104,14 +104,14 @@ export default class Home extends React.Component {
     // Be sure to capture this object as a variable, as this.note may be reassigned in `streamContextItem`, so by the time
     // you modify it in the presave block, it may not be the same object anymore, so the presave values will not be applied to
     // the right object, and it will save incorrectly.
-    let note = this.note;
+    const note = this.note;
 
-    this.componentManager.saveItemWithPresave(note, () => {
+    this.componentRelay.saveItemWithPresave(note, () => {
       note.content.preview_html = null;
       note.content.preview_plain = 'Created with Secure Spreadsheets';
 
-      let json = this.getJSON();
-      let content = JSON.stringify(json);
+      const json = this.getJSON();
+      const content = JSON.stringify(json);
       note.content.text = content;
     });
   }
@@ -124,23 +124,17 @@ export default class Home extends React.Component {
   }
 
   connectToBridge() {
-    const permissions = [
-      {
-        name: 'stream-context-item'
-      }
-    ];
-
-    this.componentManager = new ComponentManager(permissions, () => {
-      // on ready
-      const platform = this.componentManager.platform;
-      if (platform) {
-        document.body.classList.add(platform);
+    this.componentRelay = new ComponentRelay({
+      targetWindow: window,
+      onReady: () => {
+        const { platform } = this.componentRelay;
+        if (platform) {
+          document.body.classList.add(platform);
+        }
       }
     });
 
-    // componentManager.loggingEnabled = true;
-
-    this.componentManager.streamContextItem((note) => {
+    this.componentRelay.streamContextItem((note) => {
       this.note = note;
 
       // Only update UI on non-metadata updates.

app/components/Home.js

@@ -1,6 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import Home from './components/Home';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="sn-component">
+        <Home />
+      </div>
+    );
+  }
+}
 
 ReactDOM.render(
   <App />,

app/main.js

@@ -20,6 +20,7 @@
     "@babel/plugin-transform-runtime": "^7.10.1",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.10.1",
+    "@standardnotes/component-relay": "2.2.0",
     "@standardnotes/eslint-config-extensions": "^1.0.4",
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^9.0.1",
@@ -31,7 +32,6 @@
     "react": "16.x",
     "react-dom": "16.x",
     "sass-loader": "^11.0.1",
-    "sn-components-api": "1.2.8",
     "sn-stylekit": "2.0.22",
     "style-loader": "^3.0.0",
     "terser-webpack-plugin": "^5.1.4",

dist/dist.js

@@ -29,7 +29,7 @@ module.exports = {
         test: /\.js[x]?$/, 
         include: [
           path.resolve(__dirname, 'app'),
-          path.resolve(__dirname, 'node_modules/sn-components-api/dist/dist.js')
+          path.resolve(__dirname, 'node_modules/@standardnotes/component-relay/dist/dist.js')
         ],
         exclude: /node_modules/,
         use: ['babel-loader']

package.json

@@ -989,6 +989,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@standardnotes/component-relay@2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/component-relay/-/component-relay-2.2.0.tgz#3b51e1047997e624594c8bce00c38e73d49cfb8f"
+  integrity sha512-cJMSnT/fREYK1zq/U6aSfxWPiLPhzI1sLNDUMhmZnJ2npBKFeqE7qQj7NGdp4Q5f72yk4Oqevg5O2BxWDKpYHA==
+
 "@standardnotes/eslint-config-extensions@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@standardnotes/eslint-config-extensions/-/eslint-config-extensions-1.0.4.tgz#451a90b3f140aa19430023d887fb143c4f6df2bd"
@@ -5248,11 +5253,6 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-sn-components-api@1.2.8:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/sn-components-api/-/sn-components-api-1.2.8.tgz#5fbba6652c08d5b3e92502d782453c1520165721"
-  integrity sha512-epBFsQIKLK78SnJ6e5JNjYbdOAYbKzRyydjpAqji0WdX3S/tOD5Z3UVdLVyi4orKaM4322dk6nRJiTHMI1VyIw==
-
 sn-stylekit@2.0.22:
   version "2.0.22"
   resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-2.0.22.tgz#1ead6ed7ab6e2f4dd12759dc82b88d88d10d877e"