@rozenite/controls-plugin 1.11.0 → 1.12.0

package/src/react-native/useRozeniteControlsPlugin.ts

@@ -1,11 +1,11 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import type {
   ControlsEventMap,
   ControlsInvokeActionEvent,
   ControlsUpdateRequestEvent,
 } from '../shared/messaging';
-import type { RozeniteControlsPluginOptions } from '../shared/types';
+import type { RozeniteControlsPluginOptionsInput } from '../shared/types';
 import {
   buildActionRegistry,
   getActionRegistryKey,
@@ -13,23 +13,45 @@ import {
   validateValue,
 } from '../shared/serialization';
 import { useControlsAgentTools } from './useControlsAgentTools';
+import { controlsRegistry } from './controlsRegistry';
 
-export const useRozeniteControlsPlugin = ({
-  sections,
-}: RozeniteControlsPluginOptions) => {
+export const useRozeniteControlsPlugin = (
+  optionsInput: RozeniteControlsPluginOptionsInput,
+) => {
   const client = useRozeniteDevToolsClient<ControlsEventMap>({
     pluginId: '@rozenite/controls-plugin',
   });
+  const registrationIdRef = useRef<symbol>(Symbol('rozenite-controls'));
+  const registrationId = registrationIdRef.current;
+  const registrySnapshot = useSyncExternalStore(
+    controlsRegistry.subscribe,
+    controlsRegistry.getSnapshot,
+    controlsRegistry.getSnapshot,
+  );
 
-  useControlsAgentTools(sections);
-
-  const snapshot = useMemo(() => serializeSections(sections), [sections]);
-  const actionRegistry = useMemo(() => buildActionRegistry(sections), [sections]);
-  const actionRegistryRef = useRef(actionRegistry);
+  useEffect(() => {
+    return () => {
+      controlsRegistry.delete(registrationId);
+    };
+  }, [registrationId]);
 
   useEffect(() => {
-    actionRegistryRef.current = actionRegistry;
-  }, [actionRegistry]);
+    controlsRegistry.set(registrationId, optionsInput);
+  }, [optionsInput, registrationId]);
+
+  const isRegistryOwner = useMemo(
+    () =>
+      controlsRegistry.isOwner(registrationId, {
+        id: registrationId,
+        input: optionsInput,
+      }),
+    [optionsInput, registrySnapshot, registrationId],
+  );
+
+  useControlsAgentTools(
+    () => controlsRegistry.getOptions().sections,
+    isRegistryOwner,
+  );
 
   useEffect(() => {
     if (!client) {
@@ -38,12 +60,12 @@ export const useRozeniteControlsPlugin = ({
 
     client.send('snapshot', {
       type: 'snapshot',
-      sections: snapshot,
+      sections: serializeSections(controlsRegistry.getOptions().sections),
     });
-  }, [client, snapshot]);
+  }, [client, optionsInput, registrySnapshot]);
 
   useEffect(() => {
-    if (!client) {
+    if (!client || !isRegistryOwner) {
       return;
     }
 
@@ -54,7 +76,9 @@ export const useRozeniteControlsPlugin = ({
       value,
     }: ControlsUpdateRequestEvent) => {
       const key = getActionRegistryKey(sectionId, itemId);
-      const entry = actionRegistryRef.current.get(key);
+      const entry = buildActionRegistry(
+        controlsRegistry.getOptions().sections,
+      ).get(key);
 
       if (!entry || entry.type === 'button') {
         client.send('update-result', {
@@ -142,7 +166,7 @@ export const useRozeniteControlsPlugin = ({
       } catch (error) {
         console.warn(
           `[Rozenite] Controls Plugin: Update failed for ${sectionId}/${itemId}.`,
-          error
+          error,
         );
         client.send('update-result', {
           type: 'update-result',
@@ -162,17 +186,19 @@ export const useRozeniteControlsPlugin = ({
     }: ControlsInvokeActionEvent) => {
       if (action !== 'press') {
         console.warn(
-          `[Rozenite] Controls Plugin: Unsupported action "${action}" for ${sectionId}/${itemId}.`
+          `[Rozenite] Controls Plugin: Unsupported action "${action}" for ${sectionId}/${itemId}.`,
         );
         return;
       }
 
       const key = getActionRegistryKey(sectionId, itemId);
-      const entry = actionRegistryRef.current.get(key);
+      const entry = buildActionRegistry(
+        controlsRegistry.getOptions().sections,
+      ).get(key);
 
       if (!entry) {
         console.warn(
-          `[Rozenite] Controls Plugin: Action target not found for ${sectionId}/${itemId}.`
+          `[Rozenite] Controls Plugin: Action target not found for ${sectionId}/${itemId}.`,
         );
         return;
       }
@@ -180,7 +206,7 @@ export const useRozeniteControlsPlugin = ({
       try {
         if (entry.type !== 'button') {
           console.warn(
-            `[Rozenite] Controls Plugin: Invalid press action payload for ${sectionId}/${itemId}.`
+            `[Rozenite] Controls Plugin: Invalid press action payload for ${sectionId}/${itemId}.`,
           );
           return;
         }
@@ -189,7 +215,7 @@ export const useRozeniteControlsPlugin = ({
       } catch (error) {
         console.warn(
           `[Rozenite] Controls Plugin: Action failed for ${sectionId}/${itemId}.`,
-          error
+          error,
         );
       }
     };
@@ -198,12 +224,15 @@ export const useRozeniteControlsPlugin = ({
       client.onMessage('get-snapshot', () => {
         client.send('snapshot', {
           type: 'snapshot',
-          sections: snapshot,
+          sections: serializeSections(controlsRegistry.getOptions().sections),
         });
       }),
-      client.onMessage('update-request', (event: ControlsUpdateRequestEvent) => {
-        void handleUpdateRequest(event);
-      }),
+      client.onMessage(
+        'update-request',
+        (event: ControlsUpdateRequestEvent) => {
+          void handleUpdateRequest(event);
+        },
+      ),
       client.onMessage('invoke-action', (event: ControlsInvokeActionEvent) => {
         void handleInvokeAction(event);
       }),
@@ -212,7 +241,7 @@ export const useRozeniteControlsPlugin = ({
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
     };
-  }, [client, snapshot]);
+  }, [client, isRegistryOwner]);
 
   return client;
 };

package/src/shared/types.ts

@@ -98,6 +98,14 @@ export type RozeniteControlsPluginOptions = {
   sections: ControlsSection[];
 };
 
+export type RozeniteControlsPluginOptionsUpdater = (
+  previousOptions: RozeniteControlsPluginOptions,
+) => RozeniteControlsPluginOptions;
+
+export type RozeniteControlsPluginOptionsInput =
+  | RozeniteControlsPluginOptions
+  | RozeniteControlsPluginOptionsUpdater;
+
 export const createSection = <TSection extends ControlsSection>(
-  section: TSection
+  section: TSection,
 ): TSection => section;