refactor: move canvas renderer into builder (#4382)

There is no need for canvas renderer in react-sdk. Moved into builder
and slightly cleaned.

Author: TrySound

apps/builder/app/canvas/canvas.tsx

@@ -5,10 +5,10 @@ import type { Instances } from "@webstudio-is/sdk";
 import {
   type Params,
   type Components,
-  createElementsTree,
   coreMetas,
   corePropsMetas,
 } from "@webstudio-is/react-sdk";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import * as baseComponents from "@webstudio-is/sdk-components-react";
 import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
 import * as baseComponentPropsMetas from "@webstudio-is/sdk-components-react/props";
@@ -66,6 +66,7 @@ import { useDebounceEffect } from "~/shared/hook-utils/use-debounce-effect";
 import { subscribeSelected } from "./instance-selected";
 import { subscribeScrollNewInstanceIntoView } from "./shared/scroll-new-instance-into-view";
 import { $selectedPage } from "~/shared/awareness";
+import { createInstanceElement } from "./elements";
 
 registerContainers();
 
@@ -108,18 +109,27 @@ const useElementsTree = (
   }
 
   return useMemo(() => {
-    return createElementsTree({
-      renderer: isPreviewMode ? "preview" : "canvas",
-      imageBaseUrl: params.imageBaseUrl,
-      assetBaseUrl: params.assetBaseUrl,
-      imageLoader,
-      instances,
-      rootInstanceId,
-      Component: isPreviewMode
-        ? WebstudioComponentPreview
-        : WebstudioComponentCanvas,
-      components,
-    });
+    return (
+      <ReactSdkContext.Provider
+        value={{
+          renderer: isPreviewMode ? "preview" : "canvas",
+          imageBaseUrl: params.imageBaseUrl,
+          assetBaseUrl: params.assetBaseUrl,
+          imageLoader,
+          resources: {},
+        }}
+      >
+        {createInstanceElement({
+          instances,
+          instanceId: rootInstanceId,
+          instanceSelector: [rootInstanceId],
+          Component: isPreviewMode
+            ? WebstudioComponentPreview
+            : WebstudioComponentCanvas,
+          components,
+        })}
+      </ReactSdkContext.Provider>
+    );
   }, [
     params,
     instances,

apps/builder/app/canvas/elements.tsx

@@ -0,0 +1,93 @@
+import {
+  Fragment,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from "react";
+import type { Instance, Instances } from "@webstudio-is/sdk";
+import type { Components } from "@webstudio-is/react-sdk";
+import type { InstanceSelector } from "~/shared/tree-utils";
+
+export type WebstudioComponentProps = {
+  instance: Instance;
+  instanceSelector: Instance["id"][];
+  components: Components;
+};
+
+export const createInstanceElement = ({
+  instances,
+  instanceId,
+  instanceSelector,
+  Component,
+  components,
+}: {
+  instances: Instances;
+  instanceId: Instance["id"];
+  instanceSelector: InstanceSelector;
+  Component: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
+  components: Components;
+}) => {
+  const instance = instances.get(instanceId);
+  if (instance === undefined) {
+    return null;
+  }
+  return (
+    <Component
+      key={instance.id}
+      instance={instance}
+      instanceSelector={instanceSelector}
+      components={components}
+    />
+  );
+};
+
+const renderText = (text: string): Array<JSX.Element> => {
+  const lines = text.split("\n");
+  return lines.map((line, index) => (
+    <Fragment key={index}>
+      {line}
+      {index < lines.length - 1 && <br />}
+    </Fragment>
+  ));
+};
+
+export const createInstanceChildrenElements = ({
+  instances,
+  instanceSelector,
+  children,
+  Component,
+  components,
+}: {
+  instances: Instances;
+  instanceSelector: InstanceSelector;
+  children: Instance["children"];
+  Component: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
+  components: Components;
+}) => {
+  const elements = children.map((child) => {
+    if (child.type === "text") {
+      return renderText(child.value);
+    }
+    if (child.type === "expression") {
+      return;
+    }
+    if (child.type === "id") {
+      return createInstanceElement({
+        instances,
+        instanceId: child.value,
+        instanceSelector: [child.value, ...instanceSelector],
+        Component,
+        components,
+      });
+    }
+    child satisfies never;
+  });
+  // let empty children be coalesced with fallback
+  if (elements.length === 0) {
+    return;
+  }
+  return elements;
+};

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

@@ -16,14 +16,12 @@ import { mergeRefs } from "@react-aria/utils";
 import type { Instance, Instances, Prop } from "@webstudio-is/sdk";
 import { findTreeInstanceIds } from "@webstudio-is/sdk";
 import {
-  type WebstudioComponentProps,
   idAttribute,
   componentAttribute,
   showAttribute,
   selectorIdAttribute,
   indexAttribute,
   getIndexesWithinAncestors,
-  createInstanceChildrenElements,
   collectionComponent,
   type AnyComponent,
   textContentAttribute,
@@ -48,6 +46,10 @@ import { getIsVisuallyHidden } from "~/shared/visually-hidden";
 import { serverSyncStore } from "~/shared/sync";
 import { TextEditor } from "../text-editor";
 import { $selectedPage } from "~/shared/awareness";
+import {
+  createInstanceChildrenElements,
+  type WebstudioComponentProps,
+} from "~/canvas/elements";
 
 const ContentEditable = ({
   renderComponentWithRef,

packages/react-sdk/src/index.ts

@@ -1,6 +1,5 @@
 export * from "./remix";
 export * from "./css/index";
-export * from "./tree/index";
 export * from "./core-components";
 export * from "./components/components-utils";
 export { PropMeta } from "./prop-meta";