Fix strictness

packages/core/README.md

@@ -31,15 +31,15 @@ npm install @remote-ui/core --save
 This function accepts two arguments:
 
 - `channel` is a `RemoteChannel`, a function that will be called with serialized representation of UI updates. [`RemoteReceiver#receive`](#remotereceiverreceive) is one such function, and most uses of remote-ui will rely on connecting those two “sides” by passing the `receive` method for this argument.
-- `options` is an optional options object. There is currently one supported option: `components`. This value is the list of components that can be constructed and attached to this root. This is necessary because, by default, this library does not supply any components to render; you are responsible for implementing a component API that makes sense for your use case.
+- `options` is an optional options object. There is currently one supported option: `strict`, which is enabled by default. When enabled, all `props` and `children` for remote components will be frozen (with `Object.freeze()`) in order to prevent direct mutation of those values (to prevent unexpected behavior, all mutations to these values should be done with the [`RemoteComponent`](#remotecomponent) API). The default `strict`ness also prevents potentially-untrusted code from adding properties or children that it is not supposed to. However, `Object.freeze` does have a small runtime cost, so if you are comfortable without this safety, you can disable it by passing `strict: false`:
 
 ```ts
 import {createRemoteRoot, RemoteReceiver} from '@remote-ui/core';
 
 const receiver = new RemoteReceiver();
 
 const root = createRemoteRoot(receiver.receive, {
-  components: ['Button', 'TextField', 'Card'],
+  strict: false,
 });
 ```
 

packages/core/src/root.ts

@@ -19,7 +19,8 @@ import type {
 export interface Options<
   AllowedComponents extends RemoteComponentType<string, any>
 > {
-  readonly components: readonly AllowedComponents[];
+  readonly strict?: boolean;
+  readonly components?: readonly AllowedComponents[];
 }
 
 export function createRemoteRoot<
@@ -30,7 +31,7 @@ export function createRemoteRoot<
   AllowedChildrenTypes extends AllowedComponents | boolean = true
 >(
   channel: RemoteChannel,
-  _options?: Options<AllowedComponents>,
+  {strict = true}: Options<AllowedComponents> = {},
 ): RemoteRoot<AllowedComponents, AllowedChildrenTypes> {
   type Root = RemoteRoot<AllowedComponents, AllowedChildrenTypes>;
   type Component = RemoteComponent<AllowedComponents, Root>;
@@ -102,8 +103,8 @@ export function createRemoteRoot<
 
       makePartOfTree(component);
       makeRemote(component, id, remoteRoot);
-      props.set(component, initialProps);
-      children.set(component, []);
+      props.set(component, strict ? Object.freeze(initialProps) : initialProps);
+      children.set(component, strict ? Object.freeze([]) : []);
 
       return (component as unknown) as RemoteComponent<typeof type, Root>;
     },
@@ -207,10 +208,9 @@ export function createRemoteRoot<
     return perform(component, {
       remote: (channel) => channel(ACTION_UPDATE_PROPS, component.id, newProps),
       local: () => {
-        props.set(
-          component,
-          Object.freeze({...props.get(component), ...newProps}),
-        );
+        const mergedProps = {...props.get(component), ...newProps};
+
+        props.set(component, strict ? Object.freeze(mergedProps) : mergedProps);
       },
     });
   }
@@ -237,9 +237,14 @@ export function createRemoteRoot<
           tops.set(descendant, newTop),
         );
 
+        const mergedChildren = [
+          ...(children.get(container) ?? []),
+          normalizedChild,
+        ];
+
         children.set(
           container,
-          Object.freeze([...(children.get(container) ?? []), normalizedChild]),
+          strict ? Object.freeze(mergedChildren) : mergedChildren,
         );
       },
     });
@@ -270,7 +275,10 @@ export function createRemoteRoot<
 
         const newChildren = [...(children.get(container) ?? [])];
         newChildren.splice(newChildren.indexOf(child as any), 1);
-        children.set(container, Object.freeze(newChildren));
+        children.set(
+          container,
+          strict ? Object.freeze(newChildren) : newChildren,
+        );
       },
     });
   }
@@ -298,7 +306,10 @@ export function createRemoteRoot<
 
         const newChildren = [...(children.get(container) || [])];
         newChildren.splice(newChildren.indexOf(before as any), 0, child);
-        children.set(container, Object.freeze(newChildren));
+        children.set(
+          container,
+          strict ? Object.freeze(newChildren) : newChildren,
+        );
       },
     });
   }

packages/react/src/host/hooks.ts

@@ -38,7 +38,7 @@ export function useAttached<T extends Attachable>(
     // If the subscription has been updated, we'll schedule another update with React.
     // React will process this update immediately, so the old subscription value won't be committed.
     // It is still nice to avoid returning a mismatched value though, so let's override the return value.
-    returnValue = receiver.get(attached);
+    returnValue = {...receiver.get(attached)};
 
     setState({
       receiver,
@@ -56,8 +56,6 @@ export function useAttached<T extends Attachable>(
         return;
       }
 
-      const value = receiver.get(attached);
-
       setState((previousState) => {
         const {
           receiver: previousReceiver,
@@ -69,13 +67,15 @@ export function useAttached<T extends Attachable>(
           return previousState;
         }
 
+        const value = {...receiver.get(attached)};
+
         // If the value hasn't changed, no update is needed.
         // Return state as-is so React can bail out and avoid an unnecessary render.
-        if (deepEqual(previousValue, value)) {
+        if (shallowEqual(previousValue, value)) {
           return previousState;
         }
 
-        return {...previousState, value: {...value}};
+        return {receiver, value};
       });
     };
 
@@ -93,7 +93,7 @@ export function useAttached<T extends Attachable>(
   return returnValue;
 }
 
-function deepEqual<T>(one: T, two: T) {
+function shallowEqual<T>(one: T, two: T) {
   return Object.keys(two).every(
     (key) => (one as any)[key] === (two as any)[key],
   );