@webstudio-is/sdk 0.91.0 → 0.92.0

package/lib/index.js

@@ -1 +1,12 @@
-export * from "./assets";
+"use strict";
+export * from "./schema/assets";
+export * from "./schema/pages";
+export * from "./schema/instances";
+export * from "./schema/data-sources";
+export * from "./schema/props";
+export * from "./schema/breakpoints";
+export * from "./schema/style-sources";
+export * from "./schema/style-source-selections";
+export * from "./schema/styles";
+export * from "./schema/deployment";
+export * from "./instances-utils";

package/lib/instances-utils.js

@@ -0,0 +1,33 @@
+"use strict";
+const traverseInstances = (instances, instanceId, callback) => {
+  const instance = instances.get(instanceId);
+  if (instance === void 0) {
+    return;
+  }
+  const skipTraversingChildren = callback(instance);
+  if (skipTraversingChildren === false) {
+    return;
+  }
+  for (const child of instance.children) {
+    if (child.type === "id") {
+      traverseInstances(instances, child.value, callback);
+    }
+  }
+};
+export const findTreeInstanceIds = (instances, rootInstanceId) => {
+  const ids = /* @__PURE__ */ new Set();
+  traverseInstances(instances, rootInstanceId, (instance) => {
+    ids.add(instance.id);
+  });
+  return ids;
+};
+export const findTreeInstanceIdsExcludingSlotDescendants = (instances, rootInstanceId) => {
+  const ids = /* @__PURE__ */ new Set();
+  traverseInstances(instances, rootInstanceId, (instance) => {
+    ids.add(instance.id);
+    if (instance.component === "Slot") {
+      return false;
+    }
+  });
+  return ids;
+};

package/lib/instances-utils.test.js

@@ -0,0 +1,58 @@
+"use strict";
+import { expect, test } from "@jest/globals";
+import {
+  findTreeInstanceIds,
+  findTreeInstanceIdsExcludingSlotDescendants
+} from "./instances-utils";
+const createInstance = (id, component, children) => {
+  return {
+    type: "instance",
+    id,
+    component,
+    children
+  };
+};
+const createInstancePair = (id, component, children) => {
+  return [id, createInstance(id, component, children)];
+};
+test("find all tree instances", () => {
+  const instances = new Map([
+    createInstancePair("1", "Body", [{ type: "id", value: "3" }]),
+    // this is outside of subtree
+    createInstancePair("2", "Box", []),
+    // these should be matched
+    createInstancePair("3", "Box", [
+      { type: "id", value: "4" },
+      { type: "id", value: "5" }
+    ]),
+    createInstancePair("4", "Box", []),
+    createInstancePair("5", "Box", []),
+    // this one is from other tree
+    createInstancePair("6", "Box", [])
+  ]);
+  expect(findTreeInstanceIds(instances, "3")).toEqual(/* @__PURE__ */ new Set(["3", "4", "5"]));
+});
+test("find all tree instances excluding slot descendants", () => {
+  const instances = new Map([
+    createInstancePair("root", "Body", [
+      { type: "id", value: "box1" },
+      { type: "id", value: "box2" }
+    ]),
+    // this is outside of subtree
+    createInstancePair("outside", "Box", []),
+    // these should be matched
+    createInstancePair("box1", "Box", [
+      { type: "id", value: "slot11" },
+      { type: "id", value: "box12" }
+    ]),
+    createInstancePair("slot11", "Slot", [
+      { type: "id", value: "box111" },
+      { type: "id", value: "box112" }
+    ]),
+    createInstancePair("box12", "Box", []),
+    createInstancePair("box2", "Box", [])
+  ]);
+  expect(
+    findTreeInstanceIdsExcludingSlotDescendants(instances, "box1")
+  ).toEqual(/* @__PURE__ */ new Set(["box1", "box12", "slot11"]));
+});

package/lib/{assets.js → schema/assets.js}

@@ -1,3 +1,4 @@
+"use strict";
 import { z } from "zod";
 import { FontFormat, FontMeta } from "@webstudio-is/fonts";
 const AssetId = z.string();
@@ -9,28 +10,21 @@ const baseAsset = {
   description: z.union([z.string(), z.null()]),
   createdAt: z.string()
 };
-const FontAsset = z.object({
+export const FontAsset = z.object({
   ...baseAsset,
   format: FontFormat,
   meta: FontMeta,
   type: z.literal("font")
 });
-const ImageMeta = z.object({
+export const ImageMeta = z.object({
   width: z.number(),
   height: z.number()
 });
-const ImageAsset = z.object({
+export const ImageAsset = z.object({
   ...baseAsset,
   format: z.string(),
   meta: ImageMeta,
   type: z.literal("image")
 });
-const Asset = z.union([FontAsset, ImageAsset]);
-const Assets = z.map(AssetId, Asset);
-export {
-  Asset,
-  Assets,
-  FontAsset,
-  ImageAsset,
-  ImageMeta
-};
+export const Asset = z.union([FontAsset, ImageAsset]);
+export const Assets = z.map(AssetId, Asset);

package/lib/schema/breakpoints.js

@@ -0,0 +1,22 @@
+"use strict";
+import { z } from "zod";
+const BreakpointId = z.string();
+export const Breakpoint = z.object({
+  id: BreakpointId,
+  label: z.string(),
+  minWidth: z.number().optional(),
+  maxWidth: z.number().optional()
+}).refine(({ minWidth, maxWidth }) => {
+  return (
+    // Either min or max width have to be defined
+    minWidth !== void 0 && maxWidth === void 0 || minWidth === void 0 && maxWidth !== void 0 || // This is a base breakpoint
+    minWidth === void 0 && maxWidth === void 0
+  );
+}, "Either minWidth or maxWidth should be defined");
+export const Breakpoints = z.map(BreakpointId, Breakpoint);
+export const initialBreakpoints = [
+  { id: "placeholder", label: "Base" },
+  { id: "placeholder", label: "Tablet", maxWidth: 991 },
+  { id: "placeholder", label: "Mobile landscape", maxWidth: 767 },
+  { id: "placeholder", label: "Mobile portrait", maxWidth: 479 }
+];

package/lib/schema/data-sources.js

@@ -0,0 +1,39 @@
+"use strict";
+import { z } from "zod";
+const DataSourceId = z.string();
+export const DataSourceVariableValue = z.union([
+  z.object({
+    type: z.literal("number"),
+    // initial value of variable store
+    value: z.number()
+  }),
+  z.object({
+    type: z.literal("string"),
+    value: z.string()
+  }),
+  z.object({
+    type: z.literal("boolean"),
+    value: z.boolean()
+  }),
+  z.object({
+    type: z.literal("string[]"),
+    value: z.array(z.string())
+  })
+]);
+export const DataSource = z.union([
+  z.object({
+    type: z.literal("variable"),
+    id: DataSourceId,
+    scopeInstanceId: z.optional(z.string()),
+    name: z.string(),
+    value: DataSourceVariableValue
+  }),
+  z.object({
+    type: z.literal("expression"),
+    id: DataSourceId,
+    scopeInstanceId: z.optional(z.string()),
+    name: z.string(),
+    code: z.string()
+  })
+]);
+export const DataSources = z.map(DataSourceId, DataSource);

package/lib/schema/deployment.js

@@ -0,0 +1,6 @@
+"use strict";
+import { z } from "zod";
+export const Deployment = z.object({
+  domains: z.array(z.string()),
+  projectDomain: z.string()
+});

package/lib/schema/instances.js

@@ -0,0 +1,19 @@
+"use strict";
+import { z } from "zod";
+export const Text = z.object({
+  type: z.literal("text"),
+  value: z.string()
+});
+const InstanceId = z.string();
+export const Id = z.object({
+  type: z.literal("id"),
+  value: InstanceId
+});
+export const Instance = z.object({
+  type: z.literal("instance"),
+  id: InstanceId,
+  component: z.string(),
+  label: z.string().optional(),
+  children: z.array(z.union([Id, Text]))
+});
+export const Instances = z.map(InstanceId, Instance);

package/lib/schema/pages.js

@@ -0,0 +1,51 @@
+"use strict";
+import { z } from "zod";
+const MIN_TITLE_LENGTH = 2;
+export const PageName = z.string().refine((value) => value.trim() !== "", "Can't be empty");
+export const PageTitle = z.string().refine(
+  (val) => val.length >= MIN_TITLE_LENGTH,
+  `Minimum ${MIN_TITLE_LENGTH} characters required`
+);
+const commonPageFields = {
+  id: z.string(),
+  name: PageName,
+  title: PageTitle,
+  meta: z.record(z.string(), z.string()),
+  rootInstanceId: z.string()
+};
+export const HomePagePath = z.string().refine((path) => path === "", "Home page path must be empty");
+const HomePage = z.object({
+  ...commonPageFields,
+  path: HomePagePath
+});
+export const pathValidators = (baseValidator) => baseValidator.refine((path) => path !== "", "Can't be empty").refine((path) => path !== "/", "Can't be just a /").refine(
+  (path) => path === "" || path.startsWith("/"),
+  "Must start with a /"
+).refine((path) => path.endsWith("/") === false, "Can't end with a /").refine(
+  (path) => path.includes("//") === false,
+  "Can't contain repeating /"
+).refine(
+  (path) => /^[-_a-z0-9\\/]*$/.test(path),
+  "Only a-z, 0-9, -, _ and / are allowed"
+).refine(
+  // We use /s for our system stuff like /s/css or /s/uploads
+  (path) => path !== "/s" && path.startsWith("/s/") === false,
+  "/s prefix is reserved for the system"
+).refine(
+  // Remix serves build artefacts like JS bundles from /build
+  // And we cannot customize it due to bug in Remix: https://github.com/remix-run/remix/issues/2933
+  (path) => path !== "/build" && path.startsWith("/build/") === false,
+  "/build prefix is reserved for the system"
+);
+export const PagePath = pathValidators(z.string());
+const Page = z.object({
+  ...commonPageFields,
+  path: PagePath
+});
+export const Pages = z.object({
+  homePage: HomePage,
+  pages: z.array(Page).refine(
+    (array) => new Set(array.map((page) => page.path)).size === array.length,
+    "All paths must be unique"
+  )
+});

package/lib/schema/props.js

@@ -0,0 +1,67 @@
+"use strict";
+import { z } from "zod";
+const PropId = z.string();
+const baseProp = {
+  id: PropId,
+  instanceId: z.string(),
+  name: z.string(),
+  required: z.optional(z.boolean())
+};
+export const Prop = z.union([
+  z.object({
+    ...baseProp,
+    type: z.literal("number"),
+    value: z.number()
+  }),
+  z.object({
+    ...baseProp,
+    type: z.literal("string"),
+    value: z.string()
+  }),
+  z.object({
+    ...baseProp,
+    type: z.literal("boolean"),
+    value: z.boolean()
+  }),
+  z.object({
+    ...baseProp,
+    type: z.literal("asset"),
+    value: z.string()
+    // asset id
+  }),
+  z.object({
+    ...baseProp,
+    type: z.literal("page"),
+    value: z.union([
+      z.string(),
+      // page id
+      z.object({
+        pageId: z.string(),
+        instanceId: z.string()
+      })
+    ])
+  }),
+  z.object({
+    ...baseProp,
+    type: z.literal("string[]"),
+    value: z.array(z.string())
+  }),
+  z.object({
+    ...baseProp,
+    type: z.literal("dataSource"),
+    // data source id
+    value: z.string()
+  }),
+  z.object({
+    ...baseProp,
+    type: z.literal("action"),
+    value: z.array(
+      z.object({
+        type: z.literal("execute"),
+        args: z.array(z.string()),
+        code: z.string()
+      })
+    )
+  })
+]);
+export const Props = z.map(PropId, Prop);

package/lib/schema/style-source-selections.js

@@ -0,0 +1,9 @@
+"use strict";
+import { z } from "zod";
+const InstanceId = z.string();
+const StyleSourceId = z.string();
+export const StyleSourceSelection = z.object({
+  instanceId: InstanceId,
+  values: z.array(StyleSourceId)
+});
+export const StyleSourceSelections = z.map(InstanceId, StyleSourceSelection);

package/lib/schema/style-sources.js

@@ -0,0 +1,14 @@
+"use strict";
+import { z } from "zod";
+const StyleSourceId = z.string();
+const StyleSourceToken = z.object({
+  type: z.literal("token"),
+  id: StyleSourceId,
+  name: z.string()
+});
+const StyleSourceLocal = z.object({
+  type: z.literal("local"),
+  id: StyleSourceId
+});
+export const StyleSource = z.union([StyleSourceToken, StyleSourceLocal]);
+export const StyleSources = z.map(StyleSourceId, StyleSource);

package/lib/schema/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+import { z } from "zod";
+import { StyleValue } from "@webstudio-is/css-engine";
+const StyleDeclRaw = z.object({
+  styleSourceId: z.string(),
+  breakpointId: z.string(),
+  state: z.optional(z.string()),
+  // @todo can't figure out how to make property to be enum
+  property: z.string(),
+  value: StyleValue
+});
+export const StyleDecl = StyleDeclRaw;
+export const getStyleDeclKey = (styleDecl) => {
+  return `${styleDecl.styleSourceId}:${styleDecl.breakpointId}:${styleDecl.property}:${styleDecl.state ?? ""}`;
+};
+export const Styles = z.map(z.string(), StyleDecl);

package/lib/types/index.d.ts

@@ -1 +1,11 @@
-export * from "./assets";
+export * from "./schema/assets";
+export * from "./schema/pages";
+export * from "./schema/instances";
+export * from "./schema/data-sources";
+export * from "./schema/props";
+export * from "./schema/breakpoints";
+export * from "./schema/style-sources";
+export * from "./schema/style-source-selections";
+export * from "./schema/styles";
+export * from "./schema/deployment";
+export * from "./instances-utils";

package/lib/types/instances-utils.d.ts

@@ -0,0 +1,27 @@
+import type { Instance } from "./schema/instances";
+export declare const findTreeInstanceIds: (instances: Map<string, {
+    type: "instance";
+    id: string;
+    component: string;
+    children: ({
+        value: string;
+        type: "text";
+    } | {
+        value: string;
+        type: "id";
+    })[];
+    label?: string | undefined;
+}>, rootInstanceId: Instance["id"]) => Set<string>;
+export declare const findTreeInstanceIdsExcludingSlotDescendants: (instances: Map<string, {
+    type: "instance";
+    id: string;
+    component: string;
+    children: ({
+        value: string;
+        type: "text";
+    } | {
+        value: string;
+        type: "id";
+    })[];
+    label?: string | undefined;
+}>, rootInstanceId: Instance["id"]) => Set<string>;

package/lib/types/instances-utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/schema/breakpoints.d.ts

@@ -0,0 +1,56 @@
+import { z } from "zod";
+export declare const Breakpoint: z.ZodEffects<z.ZodObject<{
+    id: z.ZodString;
+    label: z.ZodString;
+    minWidth: z.ZodOptional<z.ZodNumber>;
+    maxWidth: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    id: string;
+    label: string;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+}, {
+    id: string;
+    label: string;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+}>, {
+    id: string;
+    label: string;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+}, {
+    id: string;
+    label: string;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+}>;
+export type Breakpoint = z.infer<typeof Breakpoint>;
+export declare const Breakpoints: z.ZodMap<z.ZodString, z.ZodEffects<z.ZodObject<{
+    id: z.ZodString;
+    label: z.ZodString;
+    minWidth: z.ZodOptional<z.ZodNumber>;
+    maxWidth: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    id: string;
+    label: string;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+}, {
+    id: string;
+    label: string;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+}>, {
+    id: string;
+    label: string;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+}, {
+    id: string;
+    label: string;
+    minWidth?: number | undefined;
+    maxWidth?: number | undefined;
+}>>;
+export type Breakpoints = z.infer<typeof Breakpoints>;
+export declare const initialBreakpoints: Array<Breakpoint>;