@moser-inc/moser-labs-custom-elements 2.1.0 → 2.2.1

package/README.md

@@ -10,30 +10,33 @@ npm i @moser-inc/moser-labs-custom-elements
 
 ## Usage
 
-For these custom elements to function properly, you must first authenticate the user with Keycloak and call the provided `authenticateCustomElements` function before registering.
+For these custom elements to function properly, you must first authenticate the user with Keycloak before calling the provided `registerCustomElements` function, passing the Keycloak instance to it.
 
 ```ts
 import Keycloak from 'keycloak-js';
-import { authenticateCustomElements, registerCustomElements } from '@moser-inc/moser-labs-custom-elements';
+import { registerCustomElements } from '@moser-inc/moser-labs-custom-elements';
 
 const keycloak = new Keycloak('/keycloak.json');
 
 keycloak.init({ onLoad: 'login-required' }).then((isAuthenticated) => {
   if (!isAuthenticated) return;
 
-  authenticateCustomElements(keycloak);
-  registerCustomElements();
+  registerCustomElements({ keycloak });
 });
 ```
 
-For greater flexibility, you are also able to import and define each custom element individually rather than registering them all at once.
+## API
+
+In order for the custom elements to use the correct instance for calling API endpoints and getting profile pictures, pass the `apiUri` option to `registerCustomElements`, using an environment variable for it to be dynamic between staging and production. It defaults to using `window.location.origin`.
 
 ```ts
-import { LabsAppSwitcher, registerCustomElements } from '@moser-inc/moser-labs-custom-elements';
+registerCustomElements({ keycloak, apiUri: import.meta.env.VITE_API_URI });
+```
 
-// Register all custom elements at once
-registerCustomElements();
+## External
 
-// Or register each custom element individually as needed
-customElements.register('labs-app-switcher', LabsAppSwitcher);
+When using a Vue + PrimeVue based application, a version of the package is provided that marks these dependencies as external to drastically reduce the bundle size.
+
+```ts
+import { registerCustomElements } from '@moser-inc/moser-labs-custom-elements/external';
 ```