build: Release 26-12-2024

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

@@ -5,7 +5,6 @@ import { matchSorter } from "match-sorter";
 import {
   collectionComponent,
   componentCategories,
-  WsComponentMeta,
 } from "@webstudio-is/react-sdk";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import {
@@ -27,11 +26,13 @@ import {
 } from "@webstudio-is/design-system";
 import { compareMedia } from "@webstudio-is/css-engine";
 import type { Breakpoint, Page } from "@webstudio-is/sdk";
+import type { TemplateMeta } from "@webstudio-is/template";
 import {
   $breakpoints,
   $editingPageId,
   $pages,
   $registeredComponentMetas,
+  $registeredTemplates,
   $selectedBreakpoint,
   $selectedBreakpointId,
 } from "~/shared/nano-states";
@@ -83,33 +84,35 @@ const closeCommandPanel = ({
   }
 };
 
-const getMetaScore = (meta: WsComponentMeta) => {
-  const categoryScore = componentCategories.indexOf(meta.category ?? "hidden");
-  const componentScore = meta.order ?? Number.MAX_SAFE_INTEGER;
-  // shift category
-  return categoryScore * 1000 + componentScore;
-};
-
 type ComponentOption = {
   tokens: string[];
   type: "component";
   component: string;
   label: string;
-  meta: WsComponentMeta;
+  category: TemplateMeta["category"];
+  icon: string;
+  order: undefined | number;
+};
+
+const getComponentScore = (meta: ComponentOption) => {
+  const categoryScore = componentCategories.indexOf(meta.category ?? "hidden");
+  const componentScore = meta.order ?? Number.MAX_SAFE_INTEGER;
+  // shift category
+  return categoryScore * 1000 + componentScore;
 };
 
 const $componentOptions = computed(
-  [$registeredComponentMetas, $selectedPage],
-  (metas, selectedPage) => {
+  [$registeredComponentMetas, $registeredTemplates, $selectedPage],
+  (metas, templates, selectedPage) => {
     const componentOptions: ComponentOption[] = [];
-    for (const [component, meta] of metas) {
+    for (const [name, meta] of metas) {
       const category = meta.category ?? "hidden";
       if (category === "hidden" || category === "internal") {
         continue;
       }
       // show only xml category and collection component in xml documents
       if (selectedPage?.meta.documentType === "xml") {
-        if (category !== "xml" && component !== collectionComponent) {
+        if (category !== "xml" && name !== collectionComponent) {
           continue;
         }
       } else {
@@ -118,18 +121,35 @@ const $componentOptions = computed(
           continue;
         }
       }
-      const label = getInstanceLabel({ component }, meta);
+      const label = getInstanceLabel({ component: name }, meta);
       componentOptions.push({
         tokens: ["components", label, category],
         type: "component",
-        component,
+        component: name,
+        label,
+        category,
+        icon: meta.icon,
+        order: meta.order,
+      });
+    }
+    for (const [name, meta] of templates) {
+      const label = getInstanceLabel({ component: name }, meta);
+      if (meta.category === "hidden" || meta.category === "internal") {
+        continue;
+      }
+      componentOptions.push({
+        tokens: ["components", label, meta.category],
+        type: "component",
+        component: name,
         label,
-        meta,
+        category: meta.category,
+        icon: meta.icon ?? metas.get(name)?.icon ?? "",
+        order: meta.order,
       });
     }
     componentOptions.sort(
-      ({ meta: leftMeta }, { meta: rightMeta }) =>
-        getMetaScore(leftMeta) - getMetaScore(rightMeta)
+      (leftOption, rightOption) =>
+        getComponentScore(leftOption) - getComponentScore(rightOption)
     );
     return componentOptions;
   }
@@ -142,7 +162,7 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
       heading={<CommandGroupHeading>Components</CommandGroupHeading>}
       actions={["add"]}
     >
-      {options.map(({ component, label, meta }) => {
+      {options.map(({ component, label, category, icon }) => {
         return (
           <CommandItem
             key={component}
@@ -161,12 +181,12 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
           >
             <Flex gap={2}>
               <CommandIcon
-                dangerouslySetInnerHTML={{ __html: meta.icon }}
+                dangerouslySetInnerHTML={{ __html: icon }}
               ></CommandIcon>
               <Text variant="labelsTitleCase">
                 {label}{" "}
                 <Text as="span" color="moreSubtle">
-                  {humanizeString(meta.category ?? "")}
+                  {humanizeString(category)}
                 </Text>
               </Text>
             </Flex>

apps/builder/app/shared/instance-utils.test.tsx

@@ -7,7 +7,13 @@ import {
 } from "@webstudio-is/react-sdk";
 import type { Project } from "@webstudio-is/project";
 import { createDefaultPages } from "@webstudio-is/project-build";
-import { $, ws, renderJsx, ExpressionValue } from "@webstudio-is/template";
+import {
+  $,
+  ws,
+  renderJsx,
+  ExpressionValue,
+  renderTemplate,
+} from "@webstudio-is/template";
 import { parseCss } from "@webstudio-is/css-data";
 import { coreMetas } from "@webstudio-is/react-sdk";
 import * as defaultMetas from "@webstudio-is/sdk-components-react/metas";
@@ -40,6 +46,7 @@ import {
   getWebstudioData,
   insertInstanceChildrenMutable,
   findClosestInsertable,
+  insertWebstudioFragmentAt,
 } from "./instance-utils";
 import {
   $assets,
@@ -435,6 +442,40 @@ describe("insert instance children", () => {
   });
 });
 
+describe("insert webstudio fragment at", () => {
+  test("insert multiple instances", () => {
+    $instances.set(renderJsx(<$.Body ws:id="bodyId"></$.Body>).instances);
+    $styleSourceSelections.set(new Map());
+    $styleSources.set(new Map());
+    $breakpoints.set(new Map());
+    $styles.set(new Map());
+    $dataSources.set(new Map());
+    $resources.set(new Map());
+    $props.set(new Map());
+    $assets.set(new Map());
+    insertWebstudioFragmentAt(
+      renderTemplate(
+        <>
+          <$.Heading ws:id="headingId"></$.Heading>
+          <$.Paragraph ws:id="paragraphId"></$.Paragraph>
+        </>
+      ),
+      {
+        parentSelector: ["bodyId"],
+        position: "end",
+      }
+    );
+    expect($instances.get()).toEqual(
+      renderJsx(
+        <$.Body ws:id="bodyId">
+          <$.Heading ws:id={expect.any(String)}></$.Heading>
+          <$.Paragraph ws:id={expect.any(String)}></$.Paragraph>
+        </$.Body>
+      ).instances
+    );
+  });
+});
+
 describe("reparent instance", () => {
   test("between instances", () => {
     // body

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

@@ -317,7 +317,7 @@ export const insertWebstudioFragmentAt = (
   fragment: WebstudioFragment,
   insertable: Insertable
 ) => {
-  let newRootInstanceId: undefined | Instance["id"];
+  let children: undefined | Instance["children"];
   updateWebstudioData((data) => {
     const { newInstanceIds } = insertWebstudioFragmentCopy({
       data,
@@ -328,17 +328,19 @@ export const insertWebstudioFragmentAt = (
         insertable.parentSelector
       ),
     });
-    newRootInstanceId = newInstanceIds.get(fragment.instances[0].id);
-    if (newRootInstanceId === undefined) {
-      return;
-    }
-    const children: Instance["children"] = [
-      { type: "id", value: newRootInstanceId },
-    ];
+    children = fragment.children.map((child) => {
+      if (child.type === "id") {
+        return {
+          type: "id",
+          value: newInstanceIds.get(child.value) ?? child.value,
+        };
+      }
+      return child;
+    });
     insertInstanceChildrenMutable(data, children, insertable);
   });
-  if (newRootInstanceId) {
-    selectInstance([newRootInstanceId, ...insertable.parentSelector]);
+  if (children?.[0].type === "id") {
+    selectInstance([children[0].value, ...insertable.parentSelector]);
   }
 };
 

packages/sdk-components-react/src/vimeo.tsx

@@ -349,7 +349,6 @@ export const Vimeo = forwardRef<Ref, Props>(
       loading = "lazy",
       autoplay = false,
       autopause = true,
-      backgroundMode = false,
       showByline = false,
       showControls = true,
       doNotTrack = false,
@@ -381,7 +380,6 @@ export const Vimeo = forwardRef<Ref, Props>(
       url,
       autoplay,
       autopause,
-      backgroundMode,
       showControls,
       controlsColor,
       doNotTrack,

packages/template/src/template.ts

@@ -4,9 +4,10 @@ import type { WebstudioFragment } from "@webstudio-is/sdk";
 export const templateCategories = [
   "general",
   "typography",
-  "data",
   "media",
+  "data",
   "forms",
+  "localization",
   "radix",
   "xml",
   "hidden",