Add-ons support

README.md

@@ -41,6 +41,12 @@ Then visit https://hubs.local:8080 (note: HTTPS is required, you'll need to acce
 
 > Note: When running the Hubs client locally, you will still connect to the development versions of our [Janus WebRTC](https://github.com/mozilla/janus-plugin-sfu) and [reticulum](https://github.com/mozilla/reticulum) servers. These servers do not allow being accessed outside of localhost. If you want to host your own Hubs servers, please check out [Hubs Cloud](https://hubs.mozilla.com/docs/hubs-cloud-intro.html).
 
+## Add-ons
+
+Hubs client add-ons are pluggable libraries that are installed as part of the client and loaded at runtime. Add-ons allow functionality to the Hubs core and allow easy Hubs client extensibility while maintaining the Hubs client core lean and minimal.
+
+You can read more about add-ons installation and development [here](doc/add-ons.md).
+
 ## Documentation
 
 The Hubs documentation can be found [here](https://hubs.mozilla.com/docs).
@@ -59,18 +65,16 @@ Contributors are expected to abide by the project's [Code of Conduct](./CODE_OF_
 
 ## Additional Resources
 
-* [Reticulum](https://github.com/mozilla/reticulum) - Phoenix-based backend for managing state and presence.
-* [NAF Janus Adapter](https://github.com/mozilla/naf-janus-adapter) - A [Networked A-Frame](https://github.com/networked-aframe) adapter for the Janus SFU service.
-* [Janus Gateway](https://github.com/meetecho/janus-gateway) - A WebRTC proxy used for centralizing network traffic in this client.
-* [Janus SFU Plugin](https://github.com/mozilla/janus-plugin-sfu) - Plugins for Janus which enables it to act as a SFU.
-* [Hubs-Ops](https://github.com/mozilla/hubs-ops) - Infrastructure as code + management tools for running necessary backend services on AWS.
+- [Reticulum](https://github.com/mozilla/reticulum) - Phoenix-based backend for managing state and presence.
+- [NAF Janus Adapter](https://github.com/mozilla/naf-janus-adapter) - A [Networked A-Frame](https://github.com/networked-aframe) adapter for the Janus SFU service.
+- [Janus Gateway](https://github.com/meetecho/janus-gateway) - A WebRTC proxy used for centralizing network traffic in this client.
+- [Janus SFU Plugin](https://github.com/mozilla/janus-plugin-sfu) - Plugins for Janus which enables it to act as a SFU.
+- [Hubs-Ops](https://github.com/mozilla/hubs-ops) - Infrastructure as code + management tools for running necessary backend services on AWS.
 
 ## Privacy
 
 Mozilla and Hubs believe that privacy is fundamental to a healthy internet. Read our [privacy policy](https://www.mozilla.org/en-US/privacy/hubs/) for more info.
 
-
 ## License
 
 Hubs is licensed with the [Mozilla Public License 2.0](./LICENSE)
-

addons.json

@@ -0,0 +1,8 @@
+{
+  "addons": [
+    "hubs-duck-addon",
+    "hubs-portals-addon",
+    "hubs-behavior-graphs-addon",
+    "hubs-postprocessing-addon"
+  ]
+}

admin/src/admin.js

@@ -36,11 +36,11 @@ import { AutoEndSessionDialog } from "./react-components/auto-end-session-dialog
 import registerTelemetry from "hubs/src/telemetry";
 import { createMuiTheme, withStyles } from "@material-ui/core/styles";
 import { UnauthorizedPage } from "./react-components/unauthorized";
-import { store } from "hubs/src/utils/store-instance";
+import { getStore } from "hubs/src/utils/store-instance";
 
 const qs = new URLSearchParams(location.hash.split("?")[1]);
 
-window.APP = { store };
+window.APP = { store: getStore() };
 
 registerTelemetry("/admin", "Hubs Admin");
 
@@ -185,6 +185,7 @@ const mountUI = async (retPhxChannel, customRoutes, layout) => {
 
   let permsTokenRefreshInterval;
 
+  const store = APP.store;
   if (configs.POSTGREST_SERVER) {
     dataProvider = postgrestClient(configs.POSTGREST_SERVER);
     authProvider = postgrestAuthenticatior.createAuthProvider(retPhxChannel);
@@ -234,6 +235,7 @@ const HiddenAppBar = withStyles({
 document.addEventListener("DOMContentLoaded", async () => {
   const socket = await connectToReticulum();
 
+  const store = APP.store;
   if (store.state && store.state.credentials && store.state.credentials.token) {
     setItaAuthToken(store.state.credentials.token);
     try {

admin/src/react-components/service-editor.js

@@ -24,7 +24,7 @@ import LinearProgress from "@material-ui/core/LinearProgress";
 import clsx from "classnames";
 import { Title } from "react-admin";
 import theme from "../utils/sample-theme";
-import { store } from "hubs/src/utils/store-instance";
+import { getStore } from "hubs/src/utils/store-instance";
 import withCommonStyles from "../utils/with-common-styles";
 import {
   getEditableConfig,
@@ -649,6 +649,7 @@ const AppConfigEditor = withStyles(styles)(
   class AppConfigEditor extends ConfigurationEditor {
     constructor(props) {
       super(props);
+      const store = getStore();
       if (store.state && store.state.credentials && store.state.credentials.token) {
         AppConfigUtils.setAuthToken(store.state.credentials.token);
       }

doc/add-ons.md

@@ -0,0 +1,104 @@
+# Hubs client Add-ons
+
+Hubs client add-ons are pluggable libraries that are installed as part of the client and loaded at runtime. Add-ons allow functionality to the Hubs core and allow easy Hubs client extensibility while maintaining the Hubs client core lean and minimal.
+
+## Installation
+
+Installing an addon in your Hubs client is a two step process:
+
+1. You'll need to install the add-on package in your client. You can do that using the `npm install` as with any other npm package.
+   For example if we would want to install the portals add-on we would need to do:
+
+```
+npm i https://github.com/MozillaReality/hubs-portals-addon.git
+```
+
+2. After the add-on is installed you'll need to add it to the addons array inside the `addons.json` file at the root of the Hubs client source.
+
+```
+{
+  "addons": [
+    ...
+    "hubs-portals-addon",
+    ...
+  ]
+}
+```
+
+Now you can build your client and run it as usual.
+
+## Configuration
+
+To configure your add-ons you need to update the add-on configuration JSON in the Admin console. Open your admin console and go to `App Settings -> Features`.
+
+**Important Note**: Add-on require the bitECS based loader so you'll need to enable it for add-ons to work.
+
+Update the add-ons JSON config with your add-ons configuration:
+
+<p align="center">
+<img src="img/addons-admin-config.png" width="420"/>
+</p>
+
+There are currently two properties supported in the add-ons configuration:
+
+- **enabled**: Determines if the add-on is enabled by default in the instance rooms.
+- **config**: A free form JSON containing the add-on configuration. This JSON will be passed as is to the add-on during the add-on initialization. See each add-on docs to know what JSON properties the add-on supports if any.
+
+Once your configuration is saved, you can create or open a room in your instance and you should see add-ons running for that room.
+
+### Room add-ons configuration
+
+Add-ons can also be enabled/disabled per room independently from the instance configuration. To override the instance configuration you can go to your room settings and change the add-ons enabled/disabled configuration there. The room add-ons configuration will take precedence over the instance configuration if it has been changed at least once.
+
+<p align="center">
+<img src="img/addons-room-config.png" width="420"/>
+</p>
+
+## Add-on development
+
+You can develop Hubs add-ons using Javascript or Typescript.
+
+If you are developing using Typescript you can use the add-on template as a starting point. You can get the Add-on template from [here](https://github.com/MozillaReality/hubs-template-addon).
+
+The add-on template has the basic dependencies already configured to get started with development as fast as possible.
+
+The easiest way of iterating over an add-on development is by linking the add-on package source from the client.
+
+1. Create a global link for the add-on. Go to the add-ons source folder and do:
+
+   `npm link`
+
+   Other related commands:
+
+   - To see all the global package links:
+
+     `npm ls --link --global`
+
+   - To remove a global linked package:
+
+     `npm unlink -g`
+
+2. Go to the Hubs client root and add a link to the add-on package:
+
+   `npm link [package-id]`
+
+   Other related commands:
+
+   - You can see the currently linked packages with:
+
+     `npm ls --link`
+
+   - To remove a linked package:
+
+     `npm unlink --no-save [package-id]`
+
+Now you can build the client and the add-on should be bundled as part of the client code.
+
+There is a typings library available for Typescript development: [Hubs Client TS Types](https://github.com/MozillaReality/hubs-ts-types)
+
+## Currently available add-ons
+
+- [Template add-on](https://github.com/MozillaReality/hubs-template-addon). This add-on serves as a foundation for add-on development.
+- [Duck add-on](https://github.com/MozillaReality/hubs-duck-addon): Replaces the existing `/duck` chat command and refactors it into a Hubs add-on.
+- [Portals add-on](https://github.com/MozillaReality/hubs-portals-addon): Simple portals implementation as an add-on that lets you spawn portals using the `/portal`. It also show how to add key bindings.
+- [Behavior Graphs add-on](https://github.com/MozillaReality/hubs-behavior-graphs-addon/): Initial Behavior Graphs implementation as an add-on