Rename InstancesItem to Instance type (#1444)

InstancesItem is newer type introduced separately for gradual migration.
Not all legacy tree Instance is migrated away so we can finally use
better naming across whole system.

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

@@ -1,9 +1,5 @@
 import store from "immerhin";
-import type {
-  Instance,
-  InstancesItem,
-  Prop,
-} from "@webstudio-is/project-build";
+import type { Instance, Prop } from "@webstudio-is/project-build";
 import {
   theme,
   useCombobox,
@@ -276,7 +272,7 @@ export const PropsPanelContainer = ({
   publish,
 }: {
   publish: Publish;
-  selectedInstance: InstancesItem;
+  selectedInstance: Instance;
 }) => {
   const propsMeta = getComponentPropsMeta(instance.component);
   if (propsMeta === undefined) {

apps/builder/app/builder/features/style-panel/shared/use-style-data.ts

@@ -5,7 +5,6 @@ import warnOnce from "warn-once";
 import {
   type Breakpoint,
   type Instance,
-  type InstancesItem,
   getStyleDeclKey,
 } from "@webstudio-is/project-build";
 import type { StyleProperty, StyleValue } from "@webstudio-is/css-data";
@@ -48,7 +47,7 @@ declare module "~/shared/pubsub" {
 
 type UseStyleData = {
   publish: Publish;
-  selectedInstance: InstancesItem;
+  selectedInstance: Instance;
 };
 
 export type StyleUpdateOptions = { isEphemeral: boolean };

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

@@ -1,5 +1,5 @@
 import { theme, Box, ScrollArea } from "@webstudio-is/design-system";
-import type { InstancesItem } from "@webstudio-is/project-build";
+import type { Instance } from "@webstudio-is/project-build";
 import type { Publish } from "~/shared/pubsub";
 
 import { useStyleData } from "./shared/use-style-data";
@@ -9,7 +9,7 @@ import { StyleSourcesSection } from "./style-source-section";
 
 type StylePanelProps = {
   publish: Publish;
-  selectedInstance: InstancesItem;
+  selectedInstance: Instance;
 };
 
 export const StylePanel = ({ selectedInstance, publish }: StylePanelProps) => {

apps/builder/app/builder/shared/tree/index.tsx

@@ -7,7 +7,7 @@ import {
   type TreeProps,
   type TreeItemRenderProps,
 } from "@webstudio-is/design-system";
-import type { Instance, InstancesItem } from "@webstudio-is/project-build";
+import type { Instance } from "@webstudio-is/project-build";
 import {
   getComponentMeta,
   type WsComponentMeta,
@@ -15,7 +15,7 @@ import {
 import { instancesStore } from "~/shared/nano-states";
 
 const instanceRelatedProps = {
-  renderItem(props: TreeItemRenderProps<InstancesItem>) {
+  renderItem(props: TreeItemRenderProps<Instance>) {
     const meta = getComponentMeta(props.itemData.component);
     if (meta === undefined) {
       return <></>;
@@ -32,7 +32,7 @@ const instanceRelatedProps = {
 
 export const InstanceTree = (
   props: Omit<
-    TreeProps<InstancesItem>,
+    TreeProps<Instance>,
     | keyof typeof instanceRelatedProps
     | "canLeaveParent"
     | "canAcceptChild"
@@ -68,7 +68,7 @@ export const InstanceTree = (
   const getItemChildren = useCallback(
     (instanceId: Instance["id"]) => {
       const instance = instances.get(instanceId);
-      const children: InstancesItem[] = [];
+      const children: Instance[] = [];
       if (instance === undefined) {
         return children;
       }

apps/builder/app/canvas/features/text-editor/interop.test.ts

@@ -1,13 +1,13 @@
 import { test, expect } from "@jest/globals";
 import { createHeadlessEditor } from "@lexical/headless";
 import { LinkNode } from "@lexical/link";
-import type { Instance, InstancesItem } from "@webstudio-is/project-build";
+import type { Instance } from "@webstudio-is/project-build";
 import { $convertToLexical, $convertToUpdates, type Refs } from "./interop";
 
 const createInstance = (
   id: Instance["id"],
   component: string,
-  children: InstancesItem["children"]
+  children: Instance["children"]
 ) => {
   return {
     type: "instance",
@@ -20,8 +20,8 @@ const createInstance = (
 const createInstancePair = (
   id: Instance["id"],
   component: string,
-  children: InstancesItem["children"]
-): [Instance["id"], InstancesItem] => {
+  children: Instance["children"]
+): [Instance["id"], Instance] => {
   return [
     id,
     {

apps/builder/app/canvas/features/text-editor/interop.ts

@@ -14,7 +14,6 @@ import { $createLinkNode, $isLinkNode } from "@lexical/link";
 import type {
   Instance,
   Instances,
-  InstancesItem,
   InstancesList,
 } from "@webstudio-is/project-build";
 import { nanoid } from "nanoid";
@@ -32,7 +31,7 @@ const lexicalFormats = [
 
 const $writeUpdates = (
   node: ElementNode,
-  instanceChildren: InstancesItem["children"],
+  instanceChildren: Instance["children"],
   instancesList: InstancesList,
   refs: Refs
 ) => {
@@ -52,7 +51,7 @@ const $writeUpdates = (
         type: "id",
         value: id,
       });
-      const childChildren: InstancesItem["children"] = [];
+      const childChildren: Instance["children"] = [];
       $writeUpdates(child, childChildren, instancesList, refs);
       instancesList.push({
         type: "instance",
@@ -72,7 +71,7 @@ const $writeUpdates = (
         const key = `${child.getKey()}:span`;
         const id = refs.get(key) ?? nanoid();
         refs.set(key, id);
-        const childInstance: InstancesItem = {
+        const childInstance: Instance = {
           type: "instance",
           id,
           component: "Span",
@@ -88,7 +87,7 @@ const $writeUpdates = (
           const key = `${child.getKey()}:${format}`;
           const id = refs.get(key) ?? nanoid();
           refs.set(key, id);
-          const childInstance: InstancesItem = {
+          const childInstance: Instance = {
             type: "instance",
             id,
             component,
@@ -104,12 +103,9 @@ const $writeUpdates = (
   }
 };
 
-export const $convertToUpdates = (
-  treeRootInstance: InstancesItem,
-  refs: Refs
-) => {
-  const treeRootInstanceChildren: InstancesItem["children"] = [];
-  const instancesList: InstancesItem[] = [
+export const $convertToUpdates = (treeRootInstance: Instance, refs: Refs) => {
+  const treeRootInstanceChildren: Instance["children"] = [];
+  const instancesList: InstancesList = [
     {
       ...treeRootInstance,
       children: treeRootInstanceChildren,
@@ -122,7 +118,7 @@ export const $convertToUpdates = (
 
 const $writeLexical = (
   parent: ElementNode | TextNode,
-  children: InstancesItem["children"],
+  children: Instance["children"],
   instances: Instances,
   refs: Refs
 ) => {

apps/builder/app/canvas/features/text-editor/text-editor.stories.tsx

@@ -4,11 +4,7 @@ import type { ComponentStory, ComponentMeta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import { Box } from "@webstudio-is/design-system";
 import { theme } from "@webstudio-is/design-system";
-import type {
-  Instance,
-  Instances,
-  InstancesItem,
-} from "@webstudio-is/project-build";
+import type { Instance, Instances } from "@webstudio-is/project-build";
 import { publish } from "~/shared/pubsub";
 import { textToolbarStore } from "~/shared/nano-states";
 import { TextEditor } from "./text-editor";
@@ -30,8 +26,8 @@ type Format =
 const createInstancePair = (
   id: Instance["id"],
   component: string,
-  children: InstancesItem["children"]
-): [Instance["id"], InstancesItem] => {
+  children: Instance["children"]
+): [Instance["id"], Instance] => {
   return [
     id,
     {

apps/builder/app/canvas/features/webstudio-component/selected-instance-connector.ts

@@ -1,11 +1,6 @@
 import { useEffect } from "react";
 import { useStore } from "@nanostores/react";
-import type {
-  Instance,
-  InstancesItem,
-  Prop,
-  StyleDecl,
-} from "@webstudio-is/project-build";
+import type { Instance, Prop, StyleDecl } from "@webstudio-is/project-build";
 import { getBrowserStyle, idAttribute } from "@webstudio-is/react-sdk";
 import { subscribe } from "~/shared/pubsub";
 import { subscribeWindowResize } from "~/shared/dom-hooks";
@@ -77,7 +72,7 @@ export const SelectedInstanceConnector = ({
   instanceProps,
 }: {
   instanceElementRef: { current: undefined | HTMLElement };
-  instance: InstancesItem;
+  instance: Instance;
   instanceStyles: StyleDecl[];
   instanceProps: undefined | Prop[];
 }) => {

apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx

@@ -8,7 +8,6 @@ import {
   type Prop,
   findTreeInstanceIds,
   Instances,
-  type InstancesItem,
 } from "@webstudio-is/project-build";
 import {
   renderWebstudioComponentChildren,
@@ -88,7 +87,7 @@ const getInstanceSelector = (
 };
 
 type WebstudioComponentDevProps = {
-  instance: InstancesItem;
+  instance: Instance;
   instanceSelector: InstanceSelector;
   children: Array<JSX.Element | string>;
   getComponent: GetComponent;

apps/builder/app/shared/copy-paste/plugin-instance.ts

@@ -4,7 +4,6 @@ import {
   Breakpoint,
   findTreeInstanceIds,
   Instance,
-  InstancesItem,
   Prop,
   StyleDecl,
   StyleSource,
@@ -39,7 +38,7 @@ const version = "@webstudio/instance/v0.1";
 
 const InstanceData = z.object({
   breakpoints: z.array(Breakpoint),
-  instances: z.array(InstancesItem),
+  instances: z.array(Instance),
   props: z.array(Prop),
   styleSourceSelections: z.array(StyleSourceSelection),
   styleSources: z.array(StyleSource),

apps/builder/app/shared/copy-paste/plugin-markdown.test.ts

@@ -1,5 +1,5 @@
 import { describe, test, expect } from "@jest/globals";
-import { InstancesItem, Prop } from "@webstudio-is/project-build";
+import { Instance, Prop } from "@webstudio-is/project-build";
 import { parse } from "./plugin-markdown";
 
 const parseInstanceData = (data?: ReturnType<typeof parse>) => {
@@ -8,7 +8,7 @@ const parseInstanceData = (data?: ReturnType<typeof parse>) => {
   }
   const { rootIds, instances, props } = data;
   for (const instance of instances) {
-    InstancesItem.parse(instance);
+    Instance.parse(instance);
   }
   for (const prop of props) {
     Prop.parse(prop);

apps/builder/app/shared/copy-paste/plugin-markdown.ts

@@ -2,11 +2,7 @@ import store from "immerhin";
 import { gfm } from "micromark-extension-gfm";
 import type { Root } from "mdast";
 import { fromMarkdown } from "mdast-util-from-markdown";
-import type {
-  Instance,
-  InstancesItem,
-  Prop,
-} from "@webstudio-is/project-build";
+import type { Instance, Prop } from "@webstudio-is/project-build";
 import { nanoid } from "nanoid";
 import {
   findClosestDroppableTarget,
@@ -45,13 +41,13 @@ const astTypeComponentMap: Record<string, Instance["component"]> = {
 type Options = { generateId?: typeof nanoid };
 
 const toInstanceData = (
-  instances: InstancesItem[],
+  instances: Instance[],
   props: Prop[],
   ast: { children: Root["children"] },
   options: Options = {}
-): InstancesItem["children"] => {
+): Instance["children"] => {
   const { generateId = nanoid } = options;
-  const children: InstancesItem["children"] = [];
+  const children: Instance["children"] = [];
 
   for (const child of ast.children) {
     if (child.type === "text") {
@@ -63,7 +59,7 @@ const toInstanceData = (
     if (component === undefined) {
       continue;
     }
-    const instance: InstancesItem = {
+    const instance: Instance = {
       type: "instance",
       id: generateId(),
       component,
@@ -195,7 +191,7 @@ export const parse = (clipboardData: string, options?: Options) => {
   if (ast.children.length === 0) {
     return;
   }
-  const instances: InstancesItem[] = [];
+  const instances: Instance[] = [];
   const props: Prop[] = [];
   const children = toInstanceData(instances, props, ast, options);
   // assume text is not top level

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

@@ -1,6 +1,6 @@
 import { atom, computed } from "nanostores";
 import { getComponentMeta } from "@webstudio-is/react-sdk";
-import type { InstancesItem } from "@webstudio-is/project-build";
+import type { Instance, Instances } from "@webstudio-is/project-build";
 import type { InstanceSelector } from "../tree-utils";
 import { getElementByInstanceSelector } from "../dom-utils";
 import { useSyncInitializeOnce } from "../hook-utils";
@@ -59,12 +59,8 @@ export const escapeSelection = () => {
   selectedInstanceSelectorStore.set(undefined);
 };
 
-export const instancesStore = atom<Map<InstancesItem["id"], InstancesItem>>(
-  new Map()
-);
-export const useSetInstances = (
-  instances: [InstancesItem["id"], InstancesItem][]
-) => {
+export const instancesStore = atom<Instances>(new Map());
+export const useSetInstances = (instances: [Instance["id"], Instance][]) => {
   useSyncInitializeOnce(() => {
     instancesStore.set(new Map(instances));
   });

apps/builder/app/shared/tree-utils.test.ts

@@ -3,7 +3,6 @@ import type {
   Breakpoint,
   Instance,
   Instances,
-  InstancesItem,
   Prop,
   StyleDecl,
   Styles,
@@ -44,8 +43,8 @@ const createBreakpointPair = (
 const createInstance = (
   id: Instance["id"],
   component: string,
-  children: InstancesItem["children"]
-): InstancesItem => {
+  children: Instance["children"]
+): Instance => {
   return {
     type: "instance",
     id,
@@ -57,8 +56,8 @@ const createInstance = (
 const createInstancePair = (
   id: Instance["id"],
   component: string,
-  children: InstancesItem["children"]
-): [Instance["id"], InstancesItem] => {
+  children: Instance["children"]
+): [Instance["id"], Instance] => {
   return [id, createInstance(id, component, children)];
 };
 

apps/builder/app/shared/tree-utils.ts

@@ -6,7 +6,6 @@ import {
   getStyleDeclKey,
   Instance,
   Instances,
-  InstancesItem,
   Prop,
   Props,
   StyleDecl,
@@ -50,7 +49,7 @@ export const areInstanceSelectorsEqual = (
 
 export const createComponentInstance = (
   component: Instance["component"]
-): InstancesItem => {
+): Instance => {
   const componentMeta = getComponentMeta(component);
   return {
     type: "instance",
@@ -61,7 +60,7 @@ export const createComponentInstance = (
   };
 };
 
-const isInstanceDroppable = (instance: InstancesItem) => {
+const isInstanceDroppable = (instance: Instance) => {
   const meta = getComponentMeta(instance.component);
   return meta?.type === "container";
 };
@@ -81,7 +80,7 @@ export const findClosestDroppableTarget = (
     position: "end",
   };
   let position = -1;
-  let lastChild: undefined | InstancesItem = undefined;
+  let lastChild: undefined | Instance = undefined;
   for (const instanceId of instanceSelector) {
     const instance = instances.get(instanceId);
     if (instance === undefined) {
@@ -126,7 +125,7 @@ const getInstanceOrCreateFragmentIfNecessary = (
   if (instance.component === "Slot") {
     if (instance.children.length === 0) {
       const id = nanoid();
-      const fragment: InstancesItem = {
+      const fragment: Instance = {
         type: "instance",
         id,
         component: "Fragment",
@@ -258,7 +257,7 @@ export const findSubtreeLocalStyleSources = (
 
 export const insertInstancesMutable = (
   instances: Instances,
-  insertedInstances: InstancesItem[],
+  insertedInstances: Instance[],
   rootIds: Instance["id"][],
   dropTarget: DroppableTarget
 ) => {
@@ -282,7 +281,7 @@ export const insertInstancesMutable = (
   }
 
   const { position } = dropTarget;
-  const dropTargetChildren: InstancesItem["children"] = rootIds.map(
+  const dropTargetChildren: Instance["children"] = rootIds.map(
     (instanceId) => ({
       type: "id",
       value: instanceId,
@@ -297,7 +296,7 @@ export const insertInstancesMutable = (
 
 export const insertInstancesCopyMutable = (
   instances: Instances,
-  copiedInstances: InstancesItem[],
+  copiedInstances: Instance[],
   dropTarget: DroppableTarget
 ) => {
   const newInstances: Instances = new Map();
@@ -310,7 +309,7 @@ export const insertInstancesCopyMutable = (
   );
 
   const copiedInstanceIds = new Map<Instance["id"], Instance["id"]>();
-  const copiedInstancesWithNewIds: InstancesItem[] = [];
+  const copiedInstancesWithNewIds: Instance[] = [];
   for (const instanceId of newInstanceIds) {
     const newInstanceId = nanoid();
     copiedInstanceIds.set(instanceId, newInstanceId);

packages/project-build/src/schema/instances.ts

@@ -1,13 +1,5 @@
 import { z } from "zod";
 
-export type Instance = {
-  type: "instance";
-  id: string;
-  component: string;
-  label?: string;
-  children: Array<Instance | Text>;
-};
-
 export const Text = z.object({
   type: z.literal("text"),
   value: z.string(),
@@ -23,7 +15,7 @@ export const Id = z.object({
 });
 export type Id = z.infer<typeof Id>;
 
-export const InstancesItem = z.object({
+export const Instance = z.object({
   type: z.literal("instance"),
   id: InstanceId,
   component: z.string(),
@@ -31,22 +23,12 @@ export const InstancesItem = z.object({
   children: z.array(z.union([Id, Text])),
 });
 
-export type InstancesItem = z.infer<typeof InstancesItem>;
+export type Instance = z.infer<typeof Instance>;
 
-export const InstancesList = z.array(InstancesItem);
+export const InstancesList = z.array(Instance);
 
 export type InstancesList = z.infer<typeof InstancesList>;
 
-export const Instances = z.map(InstanceId, InstancesItem);
+export const Instances = z.map(InstanceId, Instance);
 
 export type Instances = z.infer<typeof Instances>;
-
-export const Instance: z.ZodType<Instance> = z.lazy(() =>
-  z.object({
-    type: z.literal("instance"),
-    id: z.string(),
-    component: z.string(),
-    label: z.string().optional(),
-    children: z.array(z.union([Instance, Text])),
-  })
-);

packages/project-build/src/shared/instances-utils.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "@jest/globals";
-import type { Instance, Instances, InstancesItem } from "../schema/instances";
+import type { Instance, Instances } from "../schema/instances";
 import {
   findTreeInstanceIds,
   findTreeInstanceIdsExcludingSlotDescendants,
@@ -8,8 +8,8 @@ import {
 const createInstance = (
   id: Instance["id"],
   component: string,
-  children: InstancesItem["children"]
-): InstancesItem => {
+  children: Instance["children"]
+): Instance => {
   return {
     type: "instance",
     id,
@@ -21,7 +21,7 @@ const createInstance = (
 const createInstancePair = (
   id: Instance["id"],
   component: string,
-  children: InstancesItem["children"]
+  children: Instance["children"]
 ) => {
   return [id, createInstance(id, component, children)] as const;
 };

packages/project-build/src/shared/instances-utils.ts

@@ -1,9 +1,9 @@
-import type { Instance, Instances, InstancesItem } from "../schema/instances";
+import type { Instance, Instances } from "../schema/instances";
 
 const traverseInstances = (
   instances: Instances,
   instanceId: Instance["id"],
-  callback: (instance: InstancesItem) => false | void
+  callback: (instance: Instance) => false | void
 ) => {
   const instance = instances.get(instanceId);
   if (instance === undefined) {

packages/project-build/src/types.ts

@@ -2,7 +2,7 @@ import type { Pages } from "./schema/pages";
 import type { Breakpoint } from "./schema/breakpoints";
 import type { StyleDecl, StyleDeclKey } from "./schema/styles";
 import type { StyleSource } from "./schema/style-sources";
-import type { Instance, InstancesItem } from "./schema/instances";
+import type { Instance } from "./schema/instances";
 import type { Prop } from "./schema/props";
 import type { StyleSourceSelection } from "./schema/style-source-selections";
 
@@ -18,5 +18,5 @@ export type Build = {
   styleSources: [StyleSource["id"], StyleSource][];
   styleSourceSelections: [Instance["id"], StyleSourceSelection][];
   props: [Prop["id"], Prop][];
-  instances: [InstancesItem["id"], InstancesItem][];
+  instances: [Instance["id"], Instance][];
 };

packages/react-sdk/src/tree/create-elements-tree.tsx

@@ -2,11 +2,7 @@ import { type ComponentProps, Fragment } from "react";
 import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Assets } from "@webstudio-is/asset-uploader";
-import type {
-  Instance,
-  Instances,
-  InstancesItem,
-} from "@webstudio-is/project-build";
+import type { Instance, Instances } from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
@@ -79,7 +75,7 @@ const createInstanceChildrenElements = ({
 }: {
   instances: Instances;
   instanceSelector: InstanceSelector;
-  children: InstancesItem["children"];
+  children: Instance["children"];
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: GetComponent;
 }) => {
@@ -120,7 +116,7 @@ const createInstanceElement = ({
   children = [],
   getComponent,
 }: {
-  instance: InstancesItem;
+  instance: Instance;
   instanceSelector: InstanceSelector;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   children?: Array<JSX.Element | string>;

packages/react-sdk/src/tree/webstudio-component.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import type { Instance, InstancesItem } from "@webstudio-is/project-build";
+import type { Instance } from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 import { useInstanceProps } from "../props";
 
@@ -27,7 +27,7 @@ export const renderWebstudioComponentChildren = (
 };
 
 type WebstudioComponentProps = {
-  instance: InstancesItem;
+  instance: Instance;
   instanceSelector: Instance["id"][];
   children: Array<JSX.Element | string>;
   getComponent: GetComponent;