refactor: move selected instance store into awareness (#4388)

We need to avoid accessing instance selector where possible to make
logic hookable.

Here moved `$selectedInstance` into awareness and switch to it in many
places instance selector is accessed directly.

Author: TrySound

apps/builder/app/builder/features/ai/ai-fetch-result.ts

@@ -22,7 +22,6 @@ import {
   $project,
   $props,
   $registeredComponentMetas,
-  $selectedInstanceSelector,
   $styleSourceSelections,
   $styles,
 } from "~/shared/nano-states";
@@ -37,6 +36,7 @@ import {
 } from "./api-exceptions";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import { fetch } from "~/shared/fetch.client";
+import { $selectedInstance } from "~/shared/awareness";
 
 const unknownArray = z.array(z.unknown());
 
@@ -253,7 +253,7 @@ const restoreComponentsNamespace = (operations: operations.WsOperations) => {
 
 const $jsx = computed(
   [
-    $selectedInstanceSelector,
+    $selectedInstance,
     $instances,
     $props,
     $dataSources,
@@ -262,25 +262,20 @@ const $jsx = computed(
     $styleSourceSelections,
   ],
   (
-    selectedInstanceSelector,
+    instance,
     instances,
     props,
     dataSources,
     metas,
     styles,
     styleSourceSelections
   ) => {
-    if (selectedInstanceSelector === undefined) {
-      return;
-    }
-
-    const [rootInstanceId] = selectedInstanceSelector;
-    const instance = instances.get(rootInstanceId);
     if (instance === undefined) {
       return;
     }
+
     const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
-      rootInstanceId,
+      instance.id,
     ]);
     const scope = createScope();
 
@@ -303,7 +298,7 @@ const $jsx = computed(
       }),
     });
 
-    const treeInstanceIds = findTreeInstanceIds(instances, rootInstanceId);
+    const treeInstanceIds = findTreeInstanceIds(instances, instance.id);
 
     const sheet = createRegularStyleSheet({ name: "ssr" });
     for (const styleDecl of styles.values()) {

apps/builder/app/builder/features/ai/apply-operations.ts

@@ -1,6 +1,8 @@
-import { serverSyncStore } from "~/shared/sync";
+import { nanoid } from "nanoid";
+import { getStyleDeclKey, Instance, type StyleSource } from "@webstudio-is/sdk";
 import { generateDataFromEmbedTemplate } from "@webstudio-is/react-sdk";
 import type { copywriter, operations } from "@webstudio-is/ai";
+import { serverSyncStore } from "~/shared/sync";
 import { isBaseBreakpoint } from "~/shared/breakpoints";
 import {
   deleteInstanceMutable,
@@ -12,14 +14,12 @@ import {
   $instances,
   $registeredComponentMetas,
   $selectedInstanceSelector,
-  $selectedInstance,
   $styleSourceSelections,
   $styleSources,
   $styles,
 } from "~/shared/nano-states";
 import type { DroppableTarget, InstanceSelector } from "~/shared/tree-utils";
-import { getStyleDeclKey, Instance, type StyleSource } from "@webstudio-is/sdk";
-import { nanoid } from "nanoid";
+import { $selectedInstance } from "~/shared/awareness";
 
 export const applyOperations = (operations: operations.WsOperations) => {
   for (const operation of operations) {

apps/builder/app/builder/features/inspector/inspector.tsx

@@ -22,7 +22,6 @@ import { StylePanel } from "~/builder/features/style-panel";
 import { SettingsPanelContainer } from "~/builder/features/settings-panel";
 import { FloatingPanelProvider } from "~/builder/shared/floating-panel";
 import {
-  $selectedInstance,
   $registeredComponentMetas,
   $dragAndDropState,
 } from "~/shared/nano-states";
@@ -32,7 +31,7 @@ import { MetaIcon } from "~/builder/shared/meta-icon";
 import { getInstanceLabel } from "~/shared/instance-utils";
 import { BindingPopoverProvider } from "~/builder/shared/binding-popover";
 import { $activeInspectorPanel } from "~/builder/shared/nano-states";
-import { $selectedPage } from "~/shared/awareness";
+import { $selectedInstance, $selectedPage } from "~/shared/awareness";
 
 const InstanceInfo = ({ instance }: { instance: Instance }) => {
   const metas = useStore($registeredComponentMetas);

apps/builder/app/builder/features/navigator/css-preview.tsx

@@ -15,8 +15,8 @@ import type { StyleMap, StyleProperty } from "@webstudio-is/css-engine";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { highlightCss } from "~/builder/shared/code-highlight";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
-import { $selectedInstanceSelector } from "~/shared/nano-states";
 import { $definedComputedStyles } from "~/builder/features/style-panel/shared/model";
+import { $selectedInstance } from "~/shared/awareness";
 
 const preStyle = css(textVariants.mono, {
   margin: 0,
@@ -80,13 +80,12 @@ const getCssText = (
 };
 
 const $highlightedCss = computed(
-  [$selectedInstanceSelector, $definedComputedStyles],
-  (instanceSelector, computedStyles) => {
-    if (instanceSelector === undefined) {
+  [$selectedInstance, $definedComputedStyles],
+  (instance, computedStyles) => {
+    if (instance === undefined) {
       return;
     }
-    const [instanceId] = instanceSelector;
-    const cssText = getCssText(computedStyles, instanceId);
+    const cssText = getCssText(computedStyles, instance.id);
     return highlightCss(cssText);
   }
 );

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

@@ -55,7 +55,7 @@ import {
   EditorDialogControl,
 } from "~/builder/shared/code-editor-base";
 import { parseCurl, type CurlRequest } from "./curl";
-import { $selectedPage } from "~/shared/awareness";
+import { $selectedInstance, $selectedPage } from "~/shared/awareness";
 
 const validateUrl = (value: string, scope: Record<string, unknown>) => {
   const evaluatedValue = evaluateExpressionWithinScope(value, scope);
@@ -581,12 +581,11 @@ export const ResourceForm = forwardRef<
 
   useImperativeHandle(ref, () => ({
     save: (formData) => {
-      const instanceSelector = $selectedInstanceSelector.get();
-      if (instanceSelector === undefined) {
+      const instanceId = $selectedInstance.get()?.id;
+      if (instanceId === undefined) {
         return;
       }
       const name = z.string().parse(formData.get("name"));
-      const [instanceId] = instanceSelector;
       const newResource: Resource = {
         id: resource?.id ?? nanoid(),
         name,
@@ -715,12 +714,11 @@ export const SystemResourceForm = forwardRef<
 
   useImperativeHandle(ref, () => ({
     save: (formData) => {
-      const instanceSelector = $selectedInstanceSelector.get();
-      if (instanceSelector === undefined) {
+      const instanceId = $selectedInstance.get()?.id;
+      if (instanceId === undefined) {
         return;
       }
       const name = z.string().parse(formData.get("name"));
-      const [instanceId] = instanceSelector;
       const newResource: Resource = {
         id: resource?.id ?? nanoid(),
         name,
@@ -826,8 +824,8 @@ export const GraphqlResourceForm = forwardRef<
 
   useImperativeHandle(ref, () => ({
     save: (formData) => {
-      const instanceSelector = $selectedInstanceSelector.get();
-      if (instanceSelector === undefined) {
+      const instanceId = $selectedInstance.get()?.id;
+      if (instanceId === undefined) {
         return;
       }
       const name = z.string().parse(formData.get("name"));
@@ -837,7 +835,6 @@ export const GraphqlResourceForm = forwardRef<
           ["variables", variables],
         ])
       );
-      const [instanceId] = instanceSelector;
       const newResource: Resource = {
         id: resource?.id ?? nanoid(),
         name,

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

@@ -1,14 +1,11 @@
 import { useStore } from "@nanostores/react";
+import type { Instance } from "@webstudio-is/sdk";
 import { InputField, useId } from "@webstudio-is/design-system";
-import {
-  $instances,
-  $registeredComponentMetas,
-  $selectedInstance,
-} from "~/shared/nano-states";
+import { $instances, $registeredComponentMetas } from "~/shared/nano-states";
 import { HorizontalLayout, Label, Row, useLocalValue } from "./shared";
 import { getInstanceLabel } from "~/shared/instance-utils";
 import { serverSyncStore } from "~/shared/sync";
-import type { Instance } from "@webstudio-is/sdk";
+import { $selectedInstance } from "~/shared/awareness";
 
 const saveLabel = (label: string, selectedInstance: Instance) => {
   serverSyncStore.createTransaction([$instances], (instances) => {

apps/builder/app/builder/features/settings-panel/variable-popover.tsx

@@ -52,7 +52,6 @@ import {
   $dataSources,
   $resources,
   $areResourcesLoading,
-  $selectedInstanceSelector,
   invalidateResource,
   getComputedResource,
 } from "~/shared/nano-states";
@@ -71,6 +70,7 @@ import {
   SystemResourceForm,
 } from "./resource-panel";
 import { generateCurl } from "./curl";
+import { $selectedInstance } from "~/shared/awareness";
 
 const validateName = (value: string) =>
   value.trim().length === 0 ? "Name is required" : "";
@@ -241,11 +241,10 @@ const useValuePanelRef = ({
 }) => {
   useImperativeHandle(ref, () => ({
     save: (formData) => {
-      const instanceSelector = $selectedInstanceSelector.get();
-      if (instanceSelector === undefined) {
+      const instanceId = $selectedInstance.get()?.id;
+      if (instanceId === undefined) {
         return;
       }
-      const [instanceId] = instanceSelector;
       const dataSourceId = variable?.id ?? nanoid();
       // preserve existing instance scope when edit
       const scopeInstanceId = variable?.scopeInstanceId ?? instanceId;

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

@@ -46,21 +46,20 @@ import {
   VariablePopoverProvider,
   VariablePopoverTrigger,
 } from "./variable-popover";
-import { $selectedPage } from "~/shared/awareness";
+import { $selectedInstance, $selectedPage } from "~/shared/awareness";
 
 /**
  * find variables defined specifically on this selected instance
  */
 const $instanceVariables = computed(
-  [$selectedInstanceSelector, $dataSources],
-  (instanceSelector, dataSources) => {
+  [$selectedInstance, $dataSources],
+  (instance, dataSources) => {
     const matchedVariables: DataSource[] = [];
-    if (instanceSelector === undefined) {
+    if (instance === undefined) {
       return matchedVariables;
     }
-    const [instanceId] = instanceSelector;
     for (const dataSource of dataSources.values()) {
-      if (instanceId === dataSource.scopeInstanceId) {
+      if (instance.id === dataSource.scopeInstanceId) {
         matchedVariables.push(dataSource);
       }
     }

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -24,7 +24,6 @@ import {
   $instances,
   $registeredComponentMetas,
   $styleSources,
-  $virtualInstances,
 } from "~/shared/nano-states";
 import { getInstanceLabel } from "~/shared/instance-utils";
 import type {
@@ -34,6 +33,7 @@ import type {
 import { useComputedStyles } from "./shared/model";
 import { StyleSourceBadge } from "./style-source";
 import { createBatchUpdate } from "./shared/use-style-data";
+import { $virtualInstances } from "~/shared/awareness";
 
 const $isAltPressed = atom(false);
 if (typeof window !== "undefined") {

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.stories.tsx

@@ -3,6 +3,7 @@ import { registerContainers } from "~/shared/sync";
 import { Section } from "./advanced";
 import {
   $breakpoints,
+  $instances,
   $selectedBreakpointId,
   $styles,
   $styleSourceSelections,
@@ -27,6 +28,11 @@ $styles.set(new Map([[getStyleDeclKey(backgroundImage), backgroundImage]]));
 $styleSourceSelections.set(
   new Map([["box", { instanceId: "box", values: ["local"] }]])
 );
+$instances.set(
+  new Map([
+    ["box", { type: "instance", id: "box", component: "Box", children: [] }],
+  ])
+);
 $awareness.set({
   pageId: "",
   instanceSelector: ["box"],