@webstudio-is/react-sdk 0.20.0 → 0.21.0

package/lib/cjs/db/instance.cjs

@@ -18,33 +18,42 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var instance_exports = {};
 __export(instance_exports, {
+  Id: () => Id,
   Instance: () => Instance,
+  Instances: () => Instances,
+  InstancesItem: () => InstancesItem,
   Text: () => Text,
   toBaseInstance: () => toBaseInstance
 });
 module.exports = __toCommonJS(instance_exports);
-var import_css_data = require("@webstudio-is/css-data");
 var import_zod = require("zod");
 var import_components = require("../components");
 const toBaseInstance = (instance) => {
   return {
     id: instance.id,
-    component: instance.component,
-    cssRules: instance.cssRules
+    component: instance.component
   };
 };
-const Text = import_zod.z.lazy(
-  () => import_zod.z.object({
-    type: import_zod.z.literal("text"),
-    value: import_zod.z.string()
-  })
-);
+const Text = import_zod.z.object({
+  type: import_zod.z.literal("text"),
+  value: import_zod.z.string()
+});
+const Id = import_zod.z.object({
+  type: import_zod.z.literal("id"),
+  value: import_zod.z.string()
+});
+const InstancesItem = import_zod.z.object({
+  type: import_zod.z.literal("instance"),
+  id: import_zod.z.string(),
+  component: import_zod.z.enum((0, import_components.getComponentNames)()),
+  children: import_zod.z.array(import_zod.z.union([Id, Text]))
+});
+const Instances = import_zod.z.array(InstancesItem);
 const Instance = import_zod.z.lazy(
   () => import_zod.z.object({
     type: import_zod.z.literal("instance"),
     id: import_zod.z.string(),
     component: import_zod.z.enum((0, import_components.getComponentNames)()),
-    children: import_zod.z.array(import_zod.z.union([Instance, Text])),
-    cssRules: import_zod.z.array(import_css_data.CssRule)
+    children: import_zod.z.array(import_zod.z.union([Instance, Text]))
   })
 );

package/lib/cjs/user-props/all-user-props.cjs

@@ -23,17 +23,18 @@ __export(all_user_props_exports, {
 });
 module.exports = __toCommonJS(all_user_props_exports);
 var import_react = require("react");
-var import_react_nano_state = require("react-nano-state");
-const allUserPropsContainer = (0, import_react_nano_state.createValueContainer)({});
+var import_nanostores = require("nanostores");
+var import_react2 = require("@nanostores/react");
+const allUserPropsContainer = (0, import_nanostores.atom)({});
 const useAllUserProps = (initialUserProps) => {
   const ref = (0, import_react.useRef)(false);
   if (ref.current === false && initialUserProps !== void 0) {
     const propsMap = {};
-    for (const props of initialUserProps) {
-      propsMap[props.instanceId] = props;
+    for (const item of initialUserProps) {
+      propsMap[item.instanceId] = item.props;
     }
-    allUserPropsContainer.value = propsMap;
+    allUserPropsContainer.set(propsMap);
     ref.current = true;
   }
-  return (0, import_react_nano_state.useValue)(allUserPropsContainer);
+  return (0, import_react2.useStore)(allUserPropsContainer);
 };

package/lib/cjs/user-props/index.cjs

@@ -17,5 +17,4 @@ var user_props_exports = {};
 module.exports = __toCommonJS(user_props_exports);
 __reExport(user_props_exports, require("./all-user-props"), module.exports);
 __reExport(user_props_exports, require("./use-user-props"), module.exports);
-__reExport(user_props_exports, require("./types"), module.exports);
 __reExport(user_props_exports, require("./schema"), module.exports);

package/lib/cjs/user-props/use-user-props-asset.cjs

@@ -24,13 +24,13 @@ module.exports = __toCommonJS(use_user_props_asset_exports);
 var import_react = require("react");
 var import_all_user_props = require("./all-user-props");
 const useUserPropsAsset = (instanceId, propName) => {
-  const [allUserProps] = (0, import_all_user_props.useAllUserProps)();
+  const allUserProps = (0, import_all_user_props.useAllUserProps)();
   const propsData = allUserProps[instanceId];
   const asset = (0, import_react.useMemo)(() => {
     if (propsData == null) {
       return void 0;
     }
-    const prop = propsData.props.find((prop2) => prop2.prop === propName);
+    const prop = propsData.find((prop2) => prop2.prop === propName);
     if (prop == null) {
       return void 0;
     }

package/lib/cjs/user-props/use-user-props.cjs

@@ -24,14 +24,14 @@ module.exports = __toCommonJS(use_user_props_exports);
 var import_react = require("react");
 var import_all_user_props = require("./all-user-props");
 const useUserProps = (instanceId) => {
-  const [allUserProps] = (0, import_all_user_props.useAllUserProps)();
+  const allUserProps = (0, import_all_user_props.useAllUserProps)();
   const propsData = allUserProps[instanceId];
   const props = (0, import_react.useMemo)(() => {
     if (propsData == null) {
       return {};
     }
     const result = {};
-    for (const userProp of propsData.props) {
+    for (const userProp of propsData) {
       if (userProp.type !== "asset") {
         result[userProp.prop] = userProp.value;
       }

package/lib/db/instance.js

@@ -1,30 +1,39 @@
-import { CssRule } from "@webstudio-is/css-data";
 import { z } from "zod";
 import { getComponentNames } from "../components";
 const toBaseInstance = (instance) => {
   return {
     id: instance.id,
-    component: instance.component,
-    cssRules: instance.cssRules
+    component: instance.component
   };
 };
-const Text = z.lazy(
-  () => z.object({
-    type: z.literal("text"),
-    value: z.string()
-  })
-);
+const Text = z.object({
+  type: z.literal("text"),
+  value: z.string()
+});
+const Id = z.object({
+  type: z.literal("id"),
+  value: z.string()
+});
+const InstancesItem = z.object({
+  type: z.literal("instance"),
+  id: z.string(),
+  component: z.enum(getComponentNames()),
+  children: z.array(z.union([Id, Text]))
+});
+const Instances = z.array(InstancesItem);
 const Instance = z.lazy(
   () => z.object({
     type: z.literal("instance"),
     id: z.string(),
     component: z.enum(getComponentNames()),
-    children: z.array(z.union([Instance, Text])),
-    cssRules: z.array(CssRule)
+    children: z.array(z.union([Instance, Text]))
   })
 );
 export {
+  Id,
   Instance,
+  Instances,
+  InstancesItem,
   Text,
   toBaseInstance
 };

package/lib/user-props/all-user-props.js

@@ -1,17 +1,18 @@
 import { useRef } from "react";
-import { createValueContainer, useValue } from "react-nano-state";
-const allUserPropsContainer = createValueContainer({});
+import { atom } from "nanostores";
+import { useStore } from "@nanostores/react";
+const allUserPropsContainer = atom({});
 const useAllUserProps = (initialUserProps) => {
   const ref = useRef(false);
   if (ref.current === false && initialUserProps !== void 0) {
     const propsMap = {};
-    for (const props of initialUserProps) {
-      propsMap[props.instanceId] = props;
+    for (const item of initialUserProps) {
+      propsMap[item.instanceId] = item.props;
     }
-    allUserPropsContainer.value = propsMap;
+    allUserPropsContainer.set(propsMap);
     ref.current = true;
   }
-  return useValue(allUserPropsContainer);
+  return useStore(allUserPropsContainer);
 };
 export {
   allUserPropsContainer,

package/lib/user-props/index.js

@@ -1,4 +1,3 @@
 export * from "./all-user-props";
 export * from "./use-user-props";
-export * from "./types";
 export * from "./schema";

package/lib/user-props/use-user-props-asset.js

@@ -1,13 +1,13 @@
 import { useMemo } from "react";
 import { useAllUserProps } from "./all-user-props";
 const useUserPropsAsset = (instanceId, propName) => {
-  const [allUserProps] = useAllUserProps();
+  const allUserProps = useAllUserProps();
   const propsData = allUserProps[instanceId];
   const asset = useMemo(() => {
     if (propsData == null) {
       return void 0;
     }
-    const prop = propsData.props.find((prop2) => prop2.prop === propName);
+    const prop = propsData.find((prop2) => prop2.prop === propName);
     if (prop == null) {
       return void 0;
     }

package/lib/user-props/use-user-props.js

@@ -1,14 +1,14 @@
 import { useMemo } from "react";
 import { useAllUserProps } from "./all-user-props";
 const useUserProps = (instanceId) => {
-  const [allUserProps] = useAllUserProps();
+  const allUserProps = useAllUserProps();
   const propsData = allUserProps[instanceId];
   const props = useMemo(() => {
     if (propsData == null) {
       return {};
     }
     const result = {};
-    for (const userProp of propsData.props) {
+    for (const userProp of propsData) {
       if (userProp.type !== "asset") {
         result[userProp.prop] = userProp.value;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -42,17 +42,17 @@
     "zod": "^3.19.1"
   },
   "dependencies": {
+    "@nanostores/react": "^0.4.1",
     "detect-font": "^0.1.5",
-    "immer": "^9.0.12",
     "mitt": "^3.0.0",
-    "react-nano-state": "^0.4.0",
+    "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.20.0",
-    "@webstudio-is/css-data": "^0.20.0",
-    "@webstudio-is/design-tokens": "^0.20.0",
-    "@webstudio-is/icons": "^0.20.0",
-    "@webstudio-is/image": "^0.20.0",
-    "@webstudio-is/prisma-client": "^0.20.0"
+    "@webstudio-is/asset-uploader": "^0.21.0",
+    "@webstudio-is/css-data": "^0.21.0",
+    "@webstudio-is/design-tokens": "^0.21.0",
+    "@webstudio-is/icons": "^0.21.0",
+    "@webstudio-is/image": "^0.21.0",
+    "@webstudio-is/prisma-client": "^0.21.0"
   },
   "exports": {
     "import": "./lib/index.js",

package/src/db/instance.ts

@@ -1,18 +1,11 @@
-import { CssRule } from "@webstudio-is/css-data";
 import { z } from "zod";
-import { ComponentName, getComponentNames } from "../components";
+import { type ComponentName, getComponentNames } from "../components";
 
 // This should be used when passing a lot of data is potentially costly.
 // For example, when passing data from an iframe.
 export type BaseInstance = {
   id: string;
   component: ComponentName;
-  cssRules: Array<CssRule>;
-};
-
-export type Text = {
-  type: "text";
-  value: string;
 };
 
 export type Instance = BaseInstance & {
@@ -24,16 +17,34 @@ export const toBaseInstance = (instance: Instance): BaseInstance => {
   return {
     id: instance.id,
     component: instance.component,
-    cssRules: instance.cssRules,
   };
 };
 
-export const Text = z.lazy(() =>
-  z.object({
-    type: z.literal("text"),
-    value: z.string(),
-  })
-);
+export const Text = z.object({
+  type: z.literal("text"),
+  value: z.string(),
+});
+
+export type Text = z.infer<typeof Text>;
+
+export const Id = z.object({
+  type: z.literal("id"),
+  value: z.string(),
+});
+export type Id = z.infer<typeof Id>;
+
+export const InstancesItem = z.object({
+  type: z.literal("instance"),
+  id: z.string(),
+  component: z.enum(getComponentNames() as [ComponentName]),
+  children: z.array(z.union([Id, Text])),
+});
+
+export type InstancesItem = z.infer<typeof InstancesItem>;
+
+export const Instances = z.array(InstancesItem);
+
+export type Instances = z.infer<typeof Instances>;
 
 export const Instance: z.ZodType<Instance> = z.lazy(() =>
   z.object({
@@ -41,6 +52,5 @@ export const Instance: z.ZodType<Instance> = z.lazy(() =>
     id: z.string(),
     component: z.enum(getComponentNames() as [ComponentName]),
     children: z.array(z.union([Instance, Text])),
-    cssRules: z.array(CssRule),
   })
 );

package/src/db/style.ts

@@ -7,18 +7,14 @@ import {
   getComponentNames,
 } from "../components";
 
-export type PresetStylesItem = {
-  component: ComponentName;
-  property: StyleProperty;
-  value: StyleValue;
-};
-
-// @todo can't figure out how to make property to be enum
 export const PresetStylesItem = z.object({
   component: z.enum(getComponentNames() as [ComponentName]),
-  property: z.string(),
-  value: SharedStyleValue,
-}) as z.ZodType<PresetStylesItem>;
+  // @todo can't figure out how to make property to be enum
+  property: z.string() as z.ZodType<StyleProperty>,
+  value: SharedStyleValue as z.ZodType<StyleValue>,
+});
+
+export type PresetStylesItem = z.infer<typeof PresetStylesItem>;
 
 export const PresetStyles = z.array(PresetStylesItem);
 
@@ -52,20 +48,15 @@ export const findMissingPresetStyles = (
   return missingPresetStyles;
 };
 
-export type StylesItem = {
-  breakpointId: string;
-  instanceId: string;
-  property: StyleProperty;
-  value: StyleValue;
-};
-
-// @todo can't figure out how to make property to be enum
 export const StylesItem = z.object({
   breakpointId: z.string(),
   instanceId: z.string(),
-  property: z.string(),
-  value: SharedStyleValue,
-}) as z.ZodType<StylesItem>;
+  // @todo can't figure out how to make property to be enum
+  property: z.string() as z.ZodType<StyleProperty>,
+  value: SharedStyleValue as z.ZodType<StyleValue>,
+});
+
+export type StylesItem = z.infer<typeof StylesItem>;
 
 export const Styles = z.array(StylesItem);
 

package/src/user-props/all-user-props.ts

@@ -1,22 +1,26 @@
 import { useRef } from "react";
-import { createValueContainer, useValue } from "react-nano-state";
+import { atom } from "nanostores";
+import { useStore } from "@nanostores/react";
 import type { InstanceProps, Instance } from "../db";
+import { UserProp } from "./schema";
 
-export type AllUserProps = { [id: Instance["id"]]: InstanceProps };
+export type AllUserProps = {
+  [id: Instance["id"]]: UserProp[];
+};
 
-export const allUserPropsContainer = createValueContainer<AllUserProps>({});
+export const allUserPropsContainer = atom<AllUserProps>({});
 
 export const useAllUserProps = (initialUserProps?: Array<InstanceProps>) => {
   // @todo ssr workaround for https://github.com/webstudio-is/webstudio-designer/issues/213
   const ref = useRef(false);
   if (ref.current === false && initialUserProps !== undefined) {
     const propsMap: AllUserProps = {};
-    for (const props of initialUserProps) {
-      propsMap[props.instanceId] = props;
+    for (const item of initialUserProps) {
+      propsMap[item.instanceId] = item.props;
     }
     //We don't need to trigger rerender when setting the initial value
-    allUserPropsContainer.value = propsMap;
+    allUserPropsContainer.set(propsMap);
     ref.current = true;
   }
-  return useValue(allUserPropsContainer);
+  return useStore(allUserPropsContainer);
 };

package/src/user-props/index.ts

@@ -1,4 +1,3 @@
 export * from "./all-user-props";
 export * from "./use-user-props";
-export * from "./types";
 export * from "./schema";

package/src/user-props/use-user-props-asset.ts

@@ -11,14 +11,14 @@ export const useUserPropsAsset = (
   instanceId: Instance["id"],
   propName: UserProp["prop"]
 ): Asset | undefined => {
-  const [allUserProps] = useAllUserProps();
+  const allUserProps = useAllUserProps();
 
   const propsData = allUserProps[instanceId];
   const asset = useMemo(() => {
     if (propsData == null) {
       return undefined;
     }
-    const prop = propsData.props.find((prop) => prop.prop === propName);
+    const prop = propsData.find((prop) => prop.prop === propName);
 
     if (prop == null) {
       return undefined;

package/src/user-props/use-user-props.ts

@@ -10,7 +10,7 @@ type UserProps = { [prop: UserProp["prop"]]: string | number | boolean };
  * up to date with props panel.
  */
 export const useUserProps = (instanceId: Instance["id"]) => {
-  const [allUserProps] = useAllUserProps();
+  const allUserProps = useAllUserProps();
 
   const propsData = allUserProps[instanceId];
   const props = useMemo(() => {
@@ -19,7 +19,7 @@ export const useUserProps = (instanceId: Instance["id"]) => {
     }
     const result: UserProps = {};
 
-    for (const userProp of propsData.props) {
+    for (const userProp of propsData) {
       if (userProp.type !== "asset") {
         result[userProp.prop] = userProp.value;
       }

package/lib/cjs/user-props/types.cjs

@@ -1,16 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var types_exports = {};
-module.exports = __toCommonJS(types_exports);

package/src/user-props/types.ts

@@ -1,13 +0,0 @@
-import type { InstanceProps, Instance } from "../db";
-import { UserProp } from "./schema";
-
-export type UserPropsUpdates = {
-  instanceId: Instance["id"];
-  propsId?: InstanceProps["id"];
-  updates: Array<UserProp>;
-};
-
-export type DeleteProp = {
-  instanceId: Instance["id"];
-  propId: UserProp["id"];
-};