refactor: add instance key store (#4389)

Here added $instanceKey store which can be used to access props and
variables from any part of the tree. This replaces manual
JSON.stringify(selectedInstanceSelector) in a few places.

Author: TrySound

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -1,3 +1,4 @@
+import { computed } from "nanostores";
 import { useState } from "react";
 import { useStore } from "@nanostores/react";
 import { matchSorter } from "match-sorter";
@@ -17,13 +18,13 @@ import {
   $propValuesByInstanceSelector,
   $propsIndex,
   $props,
-  $selectedInstanceSelector,
 } from "~/shared/nano-states";
 import { CollapsibleSectionWithAddButton } from "~/builder/shared/collapsible-section";
 import { renderControl } from "../controls/combined";
 import { usePropsLogic, type PropAndMeta } from "./use-props-logic";
 import { Row } from "../shared";
 import { serverSyncStore } from "~/shared/sync";
+import { $selectedInstanceKey } from "~/shared/awareness";
 
 type Item = {
   name: string;
@@ -193,17 +194,19 @@ export const PropsSection = (props: PropsSectionProps) => {
   );
 };
 
+const $propValues = computed(
+  [$propValuesByInstanceSelector, $selectedInstanceKey],
+  (propValuesByInstanceSelector, instanceKey) =>
+    propValuesByInstanceSelector.get(instanceKey ?? "")
+);
+
 export const PropsSectionContainer = ({
   selectedInstance: instance,
 }: {
   selectedInstance: Instance;
 }) => {
   const { propsByInstanceId } = useStore($propsIndex);
-  const propValuesByInstanceSelector = useStore($propValuesByInstanceSelector);
-  const instanceSelector = useStore($selectedInstanceSelector);
-  const propValues = propValuesByInstanceSelector.get(
-    JSON.stringify(instanceSelector)
-  );
+  const propValues = useStore($propValues);
 
   const logic = usePropsLogic({
     instance,

apps/builder/app/builder/features/settings-panel/resource-panel.tsx

@@ -40,7 +40,6 @@ import { serverSyncStore } from "~/shared/sync";
 import {
   $dataSources,
   $resources,
-  $selectedInstanceSelector,
   $variableValuesByInstanceSelector,
 } from "~/shared/nano-states";
 import {
@@ -55,7 +54,11 @@ import {
   EditorDialogControl,
 } from "~/builder/shared/code-editor-base";
 import { parseCurl, type CurlRequest } from "./curl";
-import { $selectedInstance, $selectedPage } from "~/shared/awareness";
+import {
+  $selectedInstance,
+  $selectedInstanceKey,
+  $selectedPage,
+} from "~/shared/awareness";
 
 const validateUrl = (value: string, scope: Record<string, unknown>) => {
   const evaluatedValue = evaluateExpressionWithinScope(value, scope);
@@ -380,25 +383,23 @@ const $hiddenDataSourceIds = computed(
 
 const $selectedInstanceScope = computed(
   [
-    $selectedInstanceSelector,
+    $selectedInstanceKey,
     $variableValuesByInstanceSelector,
     $dataSources,
     $hiddenDataSourceIds,
   ],
   (
-    instanceSelector,
+    instanceKey,
     variableValuesByInstanceSelector,
     dataSources,
     hiddenDataSourceIds
   ) => {
     const scope: Record<string, unknown> = {};
     const aliases = new Map<string, string>();
-    if (instanceSelector === undefined) {
+    if (instanceKey === undefined) {
       return { scope, aliases };
     }
-    const values = variableValuesByInstanceSelector.get(
-      JSON.stringify(instanceSelector)
-    );
+    const values = variableValuesByInstanceSelector.get(instanceKey);
     if (values) {
       for (const [dataSourceId, value] of values) {
         if (hiddenDataSourceIds.has(dataSourceId)) {

apps/builder/app/builder/features/settings-panel/shared.tsx

@@ -33,11 +33,11 @@ import {
 import {
   $dataSourceVariables,
   $dataSources,
-  $selectedInstanceSelector,
   $variableValuesByInstanceSelector,
 } from "~/shared/nano-states";
 import type { BindingVariant } from "~/builder/shared/binding-popover";
 import { humanizeString } from "~/shared/string-utils";
+import { $selectedInstanceKey } from "~/shared/awareness";
 
 export type PropValue =
   | { type: "number"; value: number }
@@ -312,16 +312,14 @@ export const Row = ({
 );
 
 export const $selectedInstanceScope = computed(
-  [$selectedInstanceSelector, $variableValuesByInstanceSelector, $dataSources],
-  (instanceSelector, variableValuesByInstanceSelector, dataSources) => {
+  [$selectedInstanceKey, $variableValuesByInstanceSelector, $dataSources],
+  (instanceKey, variableValuesByInstanceSelector, dataSources) => {
     const scope: Record<string, unknown> = {};
     const aliases = new Map<string, string>();
-    if (instanceSelector === undefined) {
+    if (instanceKey === undefined) {
       return { scope, aliases };
     }
-    const values = variableValuesByInstanceSelector.get(
-      JSON.stringify(instanceSelector)
-    );
+    const values = variableValuesByInstanceSelector.get(instanceKey);
     if (values) {
       for (const [dataSourceId, value] of values) {
         const dataSource = dataSources.get(dataSourceId);

apps/builder/app/builder/features/settings-panel/variables-section.tsx

@@ -30,7 +30,6 @@ import {
   $instances,
   $props,
   $resources,
-  $selectedInstanceSelector,
   $variableValuesByInstanceSelector,
 } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync";
@@ -46,7 +45,11 @@ import {
   VariablePopoverProvider,
   VariablePopoverTrigger,
 } from "./variable-popover";
-import { $selectedInstance, $selectedPage } from "~/shared/awareness";
+import {
+  $selectedInstance,
+  $selectedInstanceKey,
+  $selectedPage,
+} from "~/shared/awareness";
 
 /**
  * find variables defined specifically on this selected instance
@@ -68,11 +71,10 @@ const $instanceVariables = computed(
 );
 
 const $instanceVariableValues = computed(
-  [$selectedInstanceSelector, $variableValuesByInstanceSelector],
-  (instanceSelector, variableValuesByInstanceSelector) => {
-    const key = JSON.stringify(instanceSelector);
-    return variableValuesByInstanceSelector.get(key) ?? new Map();
-  }
+  [$selectedInstanceKey, $variableValuesByInstanceSelector],
+  (instanceKey, variableValuesByInstanceSelector) =>
+    variableValuesByInstanceSelector.get(instanceKey ?? "") ??
+    new Map<string, unknown>()
 );
 
 /**

apps/builder/app/shared/awareness.ts

@@ -58,6 +58,13 @@ export const $selectedInstance = computed(
   }
 );
 
+export const $selectedInstanceKey = computed($awareness, (awareness) => {
+  if (awareness === undefined) {
+    return;
+  }
+  return JSON.stringify(awareness.instanceSelector);
+});
+
 export const selectPage = (pageId: Page["id"]) => {
   const pages = $pages.get();
   if (pages === undefined) {

apps/builder/app/shared/nano-states/components.ts

@@ -54,7 +54,7 @@ const createHookContext = (): HookContext => {
         return;
       }
 
-      const props = $memoryProps.get();
+      const props = new Map($memoryProps.get());
 
       const newProps = props.get(JSON.stringify(instanceSelector)) ?? new Map();
 
@@ -96,7 +96,7 @@ const createHookContext = (): HookContext => {
 
       props.set(JSON.stringify(instanceSelector), newProps);
 
-      $memoryProps.set(new Map(props));
+      $memoryProps.set(props);
     },
 
     setPropVariable: (instanceId, propName, value) => {