@backstage/plugin-signals-react 0.0.0-nightly-20240118021622

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @backstage/plugin-signals-react
+
+## 0.0.0-nightly-20240118021622
+
+### Patch Changes
+
+- 047bead: Add support to subscribe and publish messages through signals plugins
+- Updated dependencies
+  - @backstage/core-plugin-api@1.8.2
+  - @backstage/types@1.1.1

package/README.md

@@ -0,0 +1,52 @@
+# @backstage/plugin-signals-react
+
+Welcome to the web library package for the signals plugin!
+
+Signals plugin allows backend plugins to publish messages to frontend plugins.
+
+## Getting started
+
+This plugin contains functionalities that help utilize the signals plugin. To get started,
+see installation instructions from `@backstage/plugin-signals-node`, `@backstage/plugin-signals-backend`, and
+`@backstage/plugin-signals`.
+
+There are two ways to utilize the signals plugin; either by using the hook or by directly using the API.
+
+## Using the hook
+
+By using the hook, unsubscribe is automatically taken care of. This helps to maintain only necessary amount
+of connections to the backend and also to allow multiple subscriptions using the same connection.
+
+Example of using the hook:
+
+```ts
+import { useSignal } from '@backstage/plugin-signals-react';
+
+const { lastSignal } = useSignal('myplugin:channel');
+
+useEffect(() => {
+  console.log(lastSignal);
+}, [lastSignal]);
+```
+
+Whenever backend publishes new message to the channel `myplugin:channel`, the `lastSignal` is changed. The `lastSignal`
+is always initiated with null value before any messages are received from the backend.
+
+## Using API directly
+
+You can also use the signal API directly. This allows more fine-grained control over the state of the connections and
+subscriptions.
+
+```ts
+import { signalsApiRef } from '@backstage/plugin-signals-react';
+
+const signals = useApi(signalsApiRef);
+const { unsubscribe } = signals.subscribe(
+  'myplugin:channel',
+  (message: JsonObject) => {
+    console.log(message);
+  },
+);
+// Remember to unsubscribe
+unsubscribe();
+```

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import { JsonObject } from '@backstage/types';
+
+/** @public */
+declare const signalApiRef: _backstage_core_plugin_api.ApiRef<SignalApi>;
+/** @public */
+type SignalApi = {
+    subscribe(channel: string, onMessage: (message: JsonObject) => void): {
+        unsubscribe: () => void;
+    };
+};
+
+/** @public */
+declare const useSignal: (channel: string) => {
+    lastSignal: JsonObject | null;
+};
+
+export { SignalApi, signalApiRef, useSignal };

package/dist/index.esm.js

@@ -0,0 +1,30 @@
+import { createApiRef, useApiHolder } from '@backstage/core-plugin-api';
+import { useState, useEffect } from 'react';
+
+const signalApiRef = createApiRef({
+  id: "plugin.signal.service"
+});
+
+const useSignal = (channel) => {
+  const apiHolder = useApiHolder();
+  const signals = apiHolder.get(signalApiRef);
+  const [lastSignal, setLastSignal] = useState(null);
+  useEffect(() => {
+    let unsub = null;
+    if (signals) {
+      const { unsubscribe } = signals.subscribe(channel, (msg) => {
+        setLastSignal(msg);
+      });
+      unsub = unsubscribe;
+    }
+    return () => {
+      if (signals && unsub) {
+        unsub();
+      }
+    };
+  }, [signals, channel]);
+  return { lastSignal };
+};
+
+export { signalApiRef, useSignal };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/api/SignalApi.ts","../src/hooks/useSignal.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { createApiRef } from '@backstage/core-plugin-api';\nimport { JsonObject } from '@backstage/types';\n\n/** @public */\nexport const signalApiRef = createApiRef<SignalApi>({\n  id: 'plugin.signal.service',\n});\n\n/** @public */\nexport type SignalApi = {\n  subscribe(\n    channel: string,\n    onMessage: (message: JsonObject) => void,\n  ): { unsubscribe: () => void };\n};\n","/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { signalApiRef } from '../api';\nimport { useApiHolder } from '@backstage/core-plugin-api';\nimport { JsonObject } from '@backstage/types';\nimport { useEffect, useState } from 'react';\n\n/** @public */\nexport const useSignal = (channel: string) => {\n  const apiHolder = useApiHolder();\n  // Use apiHolder instead useApi in case signalApi is not available in the\n  // backstage instance this is used\n  const signals = apiHolder.get(signalApiRef);\n  const [lastSignal, setLastSignal] = useState<JsonObject | null>(null);\n  useEffect(() => {\n    let unsub: null | (() => void) = null;\n    if (signals) {\n      const { unsubscribe } = signals.subscribe(channel, (msg: JsonObject) => {\n        setLastSignal(msg);\n      });\n      unsub = unsubscribe;\n    }\n    return () => {\n      if (signals && unsub) {\n        unsub();\n      }\n    };\n  }, [signals, channel]);\n\n  return { lastSignal };\n};\n"],"names":[],"mappings":";;;AAmBO,MAAM,eAAe,YAAwB,CAAA;AAAA,EAClD,EAAI,EAAA,uBAAA;AACN,CAAC;;ACAY,MAAA,SAAA,GAAY,CAAC,OAAoB,KAAA;AAC5C,EAAA,MAAM,YAAY,YAAa,EAAA,CAAA;AAG/B,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAA4B,IAAI,CAAA,CAAA;AACpE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAA6B,GAAA,IAAA,CAAA;AACjC,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,MAAM,EAAE,WAAY,EAAA,GAAI,QAAQ,SAAU,CAAA,OAAA,EAAS,CAAC,GAAoB,KAAA;AACtE,QAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AAAA,OAClB,CAAA,CAAA;AACD,MAAQ,KAAA,GAAA,WAAA,CAAA;AAAA,KACV;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,KAAO,EAAA;AACpB,QAAM,KAAA,EAAA,CAAA;AAAA,OACR;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,OAAO,CAAC,CAAA,CAAA;AAErB,EAAA,OAAO,EAAE,UAAW,EAAA,CAAA;AACtB;;;;"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@backstage/plugin-signals-react",
+  "description": "Web library for the signals plugin",
+  "version": "0.0.0-nightly-20240118021622",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "web-library"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-plugin-api": "^1.8.2",
+    "@backstage/types": "^1.1.1",
+    "@material-ui/core": "^4.12.4"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.0.0-nightly-20240118021622",
+    "@backstage/test-utils": "^0.0.0-nightly-20240118021622",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.esm.js"
+}