refactor: support resources in jsx templates (#4800)

Added full resource configuration in templates.
Will be useful for testing.

Author: TrySound

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

@@ -5,7 +5,7 @@ import { createDefaultPages } from "@webstudio-is/project-build";
 import {
   $,
   ws,
-  ExpressionValue,
+  expression,
   renderTemplate,
   renderData,
 } from "@webstudio-is/template";
@@ -2793,9 +2793,7 @@ describe("find closest insertable", () => {
     const { instances } = renderData(
       <$.Body ws:id="bodyId">
         <$.Box ws:id="box1Id"></$.Box>
-        <$.Paragraph ws:id="paragraphId">
-          {new ExpressionValue(`"bla"`)}
-        </$.Paragraph>
+        <$.Paragraph ws:id="paragraphId">{expression`"bla"`}</$.Paragraph>
         <$.Box ws:id="box2Id"></$.Box>
       </$.Body>
     );

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

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from "vitest";
 import {
   $,
-  ExpressionValue,
+  expression,
   renderTemplate,
   renderData,
 } from "@webstudio-is/template";
@@ -947,9 +947,7 @@ describe("find closest container", () => {
         ...renderData(
           <$.Body ws:id="body">
             <$.Box ws:id="box">
-              <$.Box ws:id="box-with-expr">
-                {new ExpressionValue("1 + 1")}
-              </$.Box>
+              <$.Box ws:id="box-with-expr">{expression`1 + 1`}</$.Box>
             </$.Box>
           </$.Body>
         ),
@@ -1009,9 +1007,7 @@ describe("find closest non textual container", () => {
         ...renderData(
           <$.Body ws:id="body">
             <$.Box ws:id="box">
-              <$.Box ws:id="box-with-expr">
-                {new ExpressionValue("1 + 1")}
-              </$.Box>
+              <$.Box ws:id="box-with-expr">{expression`1 + 1`}</$.Box>
             </$.Box>
           </$.Body>
         ),

packages/react-sdk/src/component-generator.test.tsx

@@ -892,6 +892,16 @@ return (condition) &&
 });
 
 test("generate resource prop", () => {
+  const myResource = new ResourceValue("myResource", {
+    url: expression`"https://my-url.com?with-secret"`,
+    method: "get",
+    headers: [],
+  });
+  const anotherResource = new ResourceValue("anotherResource", {
+    url: expression`"https://another-url.com?with-secret"`,
+    method: "get",
+    headers: [],
+  });
   expect(
     generateWebstudioComponent({
       classesMap: new Map(),
@@ -902,14 +912,8 @@ test("generate resource prop", () => {
       indexesWithinAncestors: new Map(),
       ...renderData(
         <$.Body ws:id="body">
-          <$.Form
-            ws:id="form1"
-            action={new ResourceValue("https://my-url.com?with-secret")}
-          ></$.Form>
-          <$.Form
-            ws:id="form2"
-            action={new ResourceValue("https://another-url.com?with-secret")}
-          ></$.Form>
+          <$.Form ws:id="form1" action={myResource}></$.Form>
+          <$.Form ws:id="form2" action={anotherResource}></$.Form>
         </$.Body>
       ),
     })

packages/template/src/jsx.test.tsx

@@ -5,12 +5,11 @@ import {
   ActionValue,
   AssetValue,
   expression,
-  ExpressionValue,
   PageValue,
   Parameter,
-  ParameterValue,
   PlaceholderValue,
   renderTemplate,
+  ResourceValue,
   Variable,
 } from "./jsx";
 import { css } from "./css";
@@ -154,10 +153,7 @@ test("render literal props", () => {
 
 test("render defined props", () => {
   const { props } = renderTemplate(
-    <$.Body
-      data-expression={new ExpressionValue("1 + 1")}
-      data-parameter={new ParameterValue("parameterId")}
-    >
+    <$.Body>
       <$.Box
         data-asset={new AssetValue("assetId")}
         data-page={new PageValue("pageId")}
@@ -166,20 +162,6 @@ test("render defined props", () => {
     </$.Body>
   );
   expect(props).toEqual([
-    {
-      id: "0:data-expression",
-      instanceId: "0",
-      name: "data-expression",
-      type: "expression",
-      value: "1 + 1",
-    },
-    {
-      id: "0:data-parameter",
-      instanceId: "0",
-      name: "data-parameter",
-      type: "parameter",
-      value: "parameterId",
-    },
     {
       id: "1:data-asset",
       instanceId: "1",
@@ -493,6 +475,86 @@ test("render parameter bound to prop expression", () => {
   ]);
 });
 
+test("render resource variable", () => {
+  const value = new Variable("value", "value");
+  const myResource = new ResourceValue("myResource", {
+    url: expression`"https://my-url.com/" + ${value}`,
+    method: "get",
+    headers: [{ name: "auth", value: expression`${value}` }],
+    body: expression`${value}`,
+  });
+  const { dataSources, resources } = renderTemplate(
+    <$.Body ws:id="body">{expression`${myResource}.title`}</$.Body>
+  );
+  expect(dataSources).toEqual([
+    {
+      id: "1",
+      name: "value",
+      scopeInstanceId: "body",
+      type: "variable",
+      value: { type: "string", value: "value" },
+    },
+    {
+      id: "0",
+      scopeInstanceId: "body",
+      name: "myResource",
+      type: "resource",
+      resourceId: "resource:0",
+    },
+  ]);
+  expect(resources).toEqual([
+    {
+      id: "resource:0",
+      name: "myResource",
+      url: `"https://my-url.com/" + $ws$dataSource$1`,
+      method: "get",
+      headers: [{ name: "auth", value: `$ws$dataSource$1` }],
+      body: `$ws$dataSource$1`,
+    },
+  ]);
+});
+
+test("render resource prop", () => {
+  const value = new Variable("value", "value");
+  const myResource = new ResourceValue("myResource", {
+    url: expression`"https://my-url.com/" + ${value}`,
+    method: "get",
+    headers: [{ name: "auth", value: expression`${value}` }],
+    body: expression`${value}`,
+  });
+  const { props, dataSources, resources } = renderTemplate(
+    <$.Body ws:id="body" action={myResource}></$.Body>
+  );
+  expect(props).toEqual([
+    {
+      id: "body:action",
+      instanceId: "body",
+      name: "action",
+      type: "resource",
+      value: "resource:0",
+    },
+  ]);
+  expect(dataSources).toEqual([
+    {
+      id: "1",
+      name: "value",
+      scopeInstanceId: "body",
+      type: "variable",
+      value: { type: "string", value: "value" },
+    },
+  ]);
+  expect(resources).toEqual([
+    {
+      id: "resource:0",
+      name: "myResource",
+      url: `"https://my-url.com/" + $ws$dataSource$1`,
+      method: "get",
+      headers: [{ name: "auth", value: `$ws$dataSource$1` }],
+      body: `$ws$dataSource$1`,
+    },
+  ]);
+});
+
 test("render ws:show attribute", () => {
   const { props } = renderTemplate(
     <$.Body ws:id="body" ws:show={true}></$.Body>