@webstudio-is/react-sdk 0.6.1 → 0.7.0

package/lib/tree/root.d.ts

@@ -1,12 +1,16 @@
 import type { Tree, InstanceProps } from "../db";
 import type { Breakpoint } from "../css";
 import { type WrapperComponentProps } from "./wrapper-component";
+import type { Asset } from "@webstudio-is/asset-uploader";
 export declare type Data = {
     tree: Tree | null;
     breakpoints: Array<Breakpoint>;
     props: Array<InstanceProps>;
+    assets: Array<Asset>;
 };
-export declare const globalStyles: () => string;
+export declare const useGlobalStyles: ({ assets }: {
+    assets: Array<Asset>;
+}) => void;
 declare type RootProps = {
     data: Data;
     Component?: (props: WrapperComponentProps) => JSX.Element;

package/lib/tree/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tree/root.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGzC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAE7B,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,cAIvB,CAAC;AAEH,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,YAAY,yBAGtB,SAAS,KAAG,WAAW,GAAG,IAY5B,CAAC"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tree/root.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGzC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAM7B,OAAO,KAAK,EAAE,KAAK,EAAa,MAAM,8BAA8B,CAAC;AAGrE,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe;YAA0B,MAAM,KAAK,CAAC;UAmBjE,CAAC;AAEF,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,YAAY,yBAGtB,SAAS,KAAG,WAAW,GAAG,IAY5B,CAAC"}

package/lib/tree/root.js

@@ -1,21 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InstanceRoot = exports.globalStyles = void 0;
+exports.InstanceRoot = exports.useGlobalStyles = void 0;
 const user_props_1 = require("../user-props/");
 const stitches_1 = require("../stitches");
 const create_elements_tree_1 = require("./create-elements-tree");
 const wrapper_component_1 = require("./wrapper-component");
-exports.globalStyles = (0, stitches_1.globalCss)({
-    html: {
-        height: "100%",
-    },
-});
+const fonts_1 = require("@webstudio-is/fonts");
+const react_1 = require("react");
+const useGlobalStyles = ({ assets }) => {
+    const ref = (0, react_1.useRef)();
+    // This may look weird, but globalCss API doesn't allow us creating global styles with data,
+    // so we have to manually ensure calling it only once
+    if (ref.current === assets)
+        return;
+    const fontAssets = assets.filter((asset) => fonts_1.FONT_FORMATS.has(asset.format));
+    (0, stitches_1.globalCss)({
+        "@font-face": (0, fonts_1.getFontFaces)(fontAssets),
+        html: {
+            height: "100%",
+        },
+    })();
+    ref.current = assets;
+};
+exports.useGlobalStyles = useGlobalStyles;
 const InstanceRoot = ({ data, Component, }) => {
     if (data.tree === null) {
         throw new Error("Tree is null");
     }
     (0, stitches_1.setBreakpoints)(data.breakpoints);
-    (0, exports.globalStyles)();
+    (0, exports.useGlobalStyles)({ assets: data.assets });
     (0, user_props_1.useAllUserProps)(data.props);
     return (0, create_elements_tree_1.createElementsTree)({
         instance: data.tree.root,

package/lib/user-props/schema.d.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-export declare const UserPropSchema: z.ZodObject<{
+export declare const UserProp: z.ZodObject<{
     id: z.ZodString;
     prop: z.ZodString;
     value: z.ZodUnion<[z.ZodString, z.ZodBoolean]>;
@@ -15,7 +15,8 @@ export declare const UserPropSchema: z.ZodObject<{
     id: string;
     prop: string;
 }>;
-export declare const UserPropsSchema: z.ZodArray<z.ZodObject<{
+export declare type UserProp = z.infer<typeof UserProp>;
+export declare const UserProps: z.ZodArray<z.ZodObject<{
     id: z.ZodString;
     prop: z.ZodString;
     value: z.ZodUnion<[z.ZodString, z.ZodBoolean]>;

package/lib/user-props/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/user-props/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;EAKzB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;WAA0B,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/user-props/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;EAKnB,CAAC;AAEH,oBAAY,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;WAAoB,CAAC"}

package/lib/user-props/schema.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserPropsSchema = exports.UserPropSchema = void 0;
+exports.UserProps = exports.UserProp = void 0;
 const zod_1 = require("zod");
-exports.UserPropSchema = zod_1.z.object({
+exports.UserProp = zod_1.z.object({
     id: zod_1.z.string(),
     prop: zod_1.z.string(),
     value: zod_1.z.union([zod_1.z.string(), zod_1.z.boolean()]),
     required: zod_1.z.optional(zod_1.z.boolean()),
 });
-exports.UserPropsSchema = zod_1.z.array(exports.UserPropSchema);
+exports.UserProps = zod_1.z.array(exports.UserProp);

package/lib/user-props/types.d.ts

@@ -1,7 +1,5 @@
-import { z } from "zod";
 import type { InstanceProps, Instance } from "../db";
-import { UserPropSchema } from "./schema";
-export declare type UserProp = z.infer<typeof UserPropSchema>;
+import { UserProp } from "./schema";
 export declare type UserPropsUpdates = {
     treeId: InstanceProps["treeId"];
     propsId: InstanceProps["id"];

package/lib/user-props/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/user-props/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,oBAAY,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtD,oBAAY,gBAAgB,GAAG;IAC7B,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/user-props/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,oBAAY,gBAAgB,GAAG;IAC7B,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACxB,CAAC"}

package/lib/user-props/use-user-props.d.ts

@@ -1,5 +1,5 @@
 import { type Instance } from "../db";
-import { type UserProp } from "./types";
+import { type UserProp } from "./schema";
 declare type UserProps = {
     [prop: UserProp["prop"]]: UserProp["value"];
 };

package/lib/user-props/use-user-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/use-user-props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,aAAK,SAAS,GAAG;IAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,eAAgB,QAAQ,CAAC,IAAI,CAAC,cAuBtD,CAAC"}
+{"version":3,"file":"use-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/use-user-props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,aAAK,SAAS,GAAG;IAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,eAAgB,QAAQ,CAAC,IAAI,CAAC,cAuBtD,CAAC"}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "scripts": {
     "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib",
-    "build": "yarn build:mdn-data && yarn build:args && yarn build:lib",
+    "build": "yarn build:lib",
     "build:mdn-data": "tsx ./bin/mdn-data.ts ./src/css",
     "build:args": "tsx ./bin/generate-arg-types.ts './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx'",
     "typecheck": "tsc --noEmit",
-    "build:lib": "rm -fr lib && tsc",
+    "build:lib": "rm -fr lib tsconfig.tsbuildinfo && tsc",
     "test": "jest",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "checks": "yarn typecheck && yarn lint && yarn test",
@@ -58,8 +58,10 @@
   },
   "dependencies": {
     "@stitches/core": "^1.2.7",
+    "@webstudio-is/asset-uploader": "^*",
     "@webstudio-is/icons": "*",
     "@webstudio-is/jest-config": "*",
+    "@webstudio-is/fonts": "*",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
     "react-nano-state": "^0.4.0",

package/lib/canvas/canvas.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../src/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGxE;;GAEG;AACH,eAAO,MAAM,IAAI;YAGP,oBAAoB;iBAgB7B,CAAC"}

package/lib/canvas/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./canvas";
-//# sourceMappingURL=index.d.ts.map

package/lib/canvas/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/stitches/critical-css.d.ts

@@ -1,4 +0,0 @@
-import { getCssText as getCssTextDefault } from "./css";
-export declare const CriticalCss: () => JSX.Element | null;
-export declare const insertCriticalCss: (markup: string, getCssText?: typeof getCssTextDefault) => string;
-//# sourceMappingURL=critical-css.d.ts.map

package/lib/stitches/critical-css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"critical-css.d.ts","sourceRoot":"","sources":["../../src/stitches/critical-css.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIxD,eAAO,MAAM,WAAW,QAAO,WAAW,GAAG,IACsB,CAAC;AAEpE,eAAO,MAAM,iBAAiB,WACpB,MAAM,eACF,wBAAwB,KACnC,MAEF,CAAC"}

package/lib/stitches/critical-css.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertCriticalCss = exports.CriticalCss = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const css_1 = require("./css");
-const criticalCssMarker = "__critical-css__";
-const CriticalCss = () => typeof document === "undefined" ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: criticalCssMarker }) : null;
-exports.CriticalCss = CriticalCss;
-const insertCriticalCss = (markup, getCssText = css_1.getCssText) => {
-    return markup.replace(criticalCssMarker, `<style>${getCssText()}</style>`);
-};
-exports.insertCriticalCss = insertCriticalCss;

package/lib/stitches/css.d.ts

@@ -1,9 +0,0 @@
-import { globalCss, type CSS, css as createCss } from "@stitches/core";
-import type { Breakpoint } from "../css";
-export declare const getCachedConfig: () => any;
-export declare const css: typeof createCss;
-export { globalCss };
-export { type CSS };
-export declare const getCssText: () => string;
-export declare const setBreakpoints: (breakpoints: Array<Breakpoint>) => void;
-//# sourceMappingURL=css.d.ts.map

package/lib/stitches/css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/stitches/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,KAAK,GAAG,EACR,GAAG,IAAI,SAAS,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAQzC,eAAO,MAAM,eAAe,WAK3B,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,OAAO,SAExB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,OAAO,EAAE,KAAK,GAAG,EAAE,CAAC;AAEpB,eAAO,MAAM,UAAU,QAAO,MAE7B,CAAC;AAEF,eAAO,MAAM,cAAc,gBAAiB,MAAM,UAAU,CAAC,SAO5D,CAAC"}