refactor: split jsx testing utils into template package (#4604)

We can start using testing utilities for components meta. It will
drastically simplify maintenance of components, already works pretty
well for tests.

Here just replaced @webstudio-is/sdk/testing with
@webstudio-is/template.

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

@@ -1,6 +1,7 @@
 import { describe, expect, test } from "vitest";
 import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
 import { createDefaultPages } from "@webstudio-is/project-build";
+import { renderJsx, $ } from "@webstudio-is/template";
 import {
   $instances,
   $pages,
@@ -9,7 +10,6 @@ import {
 import { registerContainers } from "~/shared/sync";
 import { $awareness, selectInstance } from "~/shared/awareness";
 import { deleteSelectedInstance, unwrap, wrapIn } from "./commands";
-import { renderJsx, $ } from "@webstudio-is/sdk/testing";
 
 registerContainers();
 

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

@@ -15,7 +15,7 @@ import {
 } from "~/shared/nano-states";
 import { TextEditor } from "./text-editor";
 import { emitCommand, subscribeCommands } from "~/canvas/shared/commands";
-import { $, renderJsx } from "@webstudio-is/sdk/testing";
+import { $, renderJsx } from "@webstudio-is/template";
 import { $awareness } from "~/shared/awareness";
 
 export default {

apps/builder/app/shared/copy-paste/asset-upload.test.tsx

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { $, renderJsx, AssetValue } from "@webstudio-is/sdk/testing";
+import { $, renderJsx, AssetValue } from "@webstudio-is/template";
 import { denormalizeSrcProps } from "./asset-upload";
 import type { StyleDecl, WebstudioFragment } from "@webstudio-is/sdk";
 

apps/builder/app/shared/copy-paste/plugin-webflow/plugin-webflow.test.tsx

@@ -10,7 +10,7 @@ import {
   type WebstudioFragment,
   type Instance,
 } from "@webstudio-is/sdk";
-import { $, renderJsx } from "@webstudio-is/sdk/testing";
+import { $, renderJsx } from "@webstudio-is/template";
 import * as defaultMetas from "@webstudio-is/sdk-components-react-remix/metas";
 import { __testing__ } from "./plugin-webflow";
 import {

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

@@ -7,7 +7,7 @@ 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/sdk/testing";
+import { $, ws, renderJsx, ExpressionValue } 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";

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

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from "vitest";
 import type { JSX } from "react";
-import { renderJsx, $, ExpressionValue } from "@webstudio-is/sdk/testing";
+import { renderJsx, $, ExpressionValue } 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";

apps/builder/app/shared/style-object-model.test.tsx

@@ -9,7 +9,7 @@ import {
   type StyleDecl,
   getStyleDeclKey,
 } from "@webstudio-is/sdk";
-import { $, renderJsx } from "@webstudio-is/sdk/testing";
+import { $, renderJsx } from "@webstudio-is/template";
 import { parseCss } from "@webstudio-is/css-data";
 import type { StyleValue } from "@webstudio-is/css-engine";
 import {

apps/builder/package.json

@@ -74,6 +74,7 @@
     "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
     "@webstudio-is/sdk-components-react-remix": "workspace:*",
+    "@webstudio-is/template": "workspace:*",
     "@webstudio-is/trpc-interface": "workspace:*",
     "arrgv": "^1.0.2",
     "bcp-47": "^2.1.0",

packages/react-sdk/package.json

@@ -33,6 +33,7 @@
     "@webstudio-is/icons": "workspace:^",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
+    "@webstudio-is/template": "workspace:*",
     "change-case": "^5.4.4",
     "html-tags": "^4.0.0",
     "nanoid": "^5.0.8"

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

@@ -13,7 +13,7 @@ import {
   createProxy,
   renderJsx,
   ws,
-} from "@webstudio-is/sdk/testing";
+} from "@webstudio-is/template";
 import {
   generateJsxChildren,
   generateWebstudioComponent,

packages/react-sdk/src/css/css.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from "vitest";
 import type { Breakpoint } from "@webstudio-is/sdk";
+import { $, renderJsx } from "@webstudio-is/template";
 import { generateCss, type CssConfig } from "./css";
 import { descendantComponent, rootComponent } from "../core-components";
-import { $, renderJsx } from "@webstudio-is/sdk/testing";
 
 const toMap = <T extends { id: string }>(list: T[]) =>
   new Map(list.map((item) => [item.id, item] as const));

packages/sdk/package.json

@@ -21,9 +21,6 @@
       "webstudio": "./src/__generated__/normalize.css.ts",
       "types": "./lib/types/__generated__/normalize.css.d.ts",
       "import": "./lib/__generated__/normalize.css.js"
-    },
-    "./testing": {
-      "webstudio": "./src/testing.ts"
     }
   },
   "files": [
@@ -49,6 +46,7 @@
   },
   "devDependencies": {
     "@webstudio-is/css-data": "workspace:*",
+    "@webstudio-is/template": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     "html-tags": "^4.0.0",
     "strip-indent": "^4.0.0",

packages/sdk/src/instances-utils.test.tsx

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { $, renderJsx } from "./jsx";
+import { $, renderJsx } from "@webstudio-is/template";
 import {
   findTreeInstanceIds,
   findTreeInstanceIdsExcludingSlotDescendants,

packages/sdk/src/resources-generator.test.tsx

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { renderJsx, $ } from "./jsx";
+import { renderJsx, $ } from "@webstudio-is/template";
 import type { Page } from "./schema/pages";
 import { createScope } from "./scope";
 import {

packages/template/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@webstudio-is/template",
+  "version": "0.0.0-webstudio-version",
+  "description": "Webstudio templates based on React",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "license": "AGPL-3.0-or-later",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "webstudio": "./src/index.ts"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "typecheck": "tsc",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@webstudio-is/sdk": "workspace:*",
+    "react": "18.3.0-canary-14898b6a9-20240318"
+  },
+  "devDependencies": {
+    "@webstudio-is/tsconfig": "workspace:*",
+    "vitest": "^2.1.8"
+  }
+}

packages/sdk/src/jsx.ts → packages/template/src/jsx.ts

@@ -1,6 +1,5 @@
 import type { JSX, ReactNode } from "react";
-import type { Instances } from "./schema/instances";
-import type { Props } from "./schema/props";
+import type { Instances, Props } from "@webstudio-is/sdk";
 
 export class ExpressionValue {
   value;

packages/template/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@webstudio-is/tsconfig/base.json"
+}