refactor: simplify template format (#4607)

Here added new renderTemplate function which outputs simplified format
with arrays instead of maps and "children" array to describe roots.

This format is partial of webstudio fragment but does not implement it
fully.

Added support for top level fragment to allow having multiple roots.

apps/builder/app/shared/matcher.test.tsx

@@ -1,10 +1,14 @@
 import { describe, expect, test, vi } from "vitest";
-import type { JSX } from "react";
-import { renderJsx, $, ExpressionValue } from "@webstudio-is/template";
+import {
+  renderJsx,
+  $,
+  ExpressionValue,
+  renderTemplate,
+} from "@webstudio-is/template";
 import { coreMetas } from "@webstudio-is/react-sdk";
 import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
 import type { WsComponentMeta } from "@webstudio-is/react-sdk";
-import type { Matcher, WebstudioFragment } from "@webstudio-is/sdk";
+import type { Matcher } from "@webstudio-is/sdk";
 import {
   findClosestNonTextualContainer,
   findClosestInstanceMatchingFragment,
@@ -754,23 +758,6 @@ describe("is tree matching", () => {
 });
 
 describe("find closest instance matching fragment", () => {
-  const createFragment = (element: JSX.Element): WebstudioFragment => {
-    const { instances } = renderJsx(element);
-    const instancesArray = Array.from(instances.values());
-    return {
-      children: instancesArray[0].children,
-      instances: instancesArray,
-      styleSourceSelections: [],
-      styleSources: [],
-      breakpoints: [],
-      styles: [],
-      dataSources: [],
-      resources: [],
-      props: [],
-      assets: [],
-    };
-  };
-
   test("finds closest list with list item fragment", () => {
     const { instances } = renderJsx(
       <$.Body ws:id="body">
@@ -779,12 +766,7 @@ describe("find closest instance matching fragment", () => {
         </$.List>
       </$.Body>
     );
-    const fragment = createFragment(
-      // only children are tested
-      <>
-        <$.ListItem ws:id="new"></$.ListItem>
-      </>
-    );
+    const fragment = renderTemplate(<$.ListItem ws:id="new"></$.ListItem>);
     expect(
       findClosestInstanceMatchingFragment({
         metas,
@@ -818,12 +800,7 @@ describe("find closest instance matching fragment", () => {
         <$.Button ws:id="button"></$.Button>
       </$.Body>
     );
-    const fragment = createFragment(
-      // only children are tested
-      <>
-        <$.Button ws:id="new"></$.Button>
-      </>
-    );
+    const fragment = renderTemplate(<$.Button ws:id="new"></$.Button>);
     expect(
       findClosestInstanceMatchingFragment({
         metas,
@@ -840,8 +817,7 @@ describe("find closest instance matching fragment", () => {
         <$.Button ws:id="button"></$.Button>
       </$.Body>
     );
-    const fragment = createFragment(
-      // only children are tested
+    const fragment = renderTemplate(
       <>
         <$.Button ws:id="new-button"></$.Button>
         <$.Text ws:id="new-text"></$.Text>
@@ -860,12 +836,7 @@ describe("find closest instance matching fragment", () => {
   test("report first error", () => {
     const onError = vi.fn();
     const { instances } = renderJsx(<$.Body ws:id="body"></$.Body>);
-    const fragment = createFragment(
-      // only children are tested
-      <>
-        <$.ListItem ws:id="listitem"></$.ListItem>
-      </>
-    );
+    const fragment = renderTemplate(<$.ListItem ws:id="listitem"></$.ListItem>);
     findClosestInstanceMatchingFragment({
       metas,
       instances,

apps/builder/app/shared/matcher.ts

@@ -244,7 +244,8 @@ export const findClosestInstanceMatchingFragment = ({
   instances: Instances;
   metas: Map<string, WsComponentMeta>;
   instanceSelector: InstanceSelector;
-  fragment: WebstudioFragment;
+  // require only subset of fragment
+  fragment: Pick<WebstudioFragment, "children" | "instances">;
   onError?: (message: string) => void;
 }) => {
   const mergedInstances = new Map(instances);