@webstudio-is/react-sdk 0.7.0 → 0.7.1

package/lib/tree/session-storage-polyfill.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionStoragePolyfill = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// This is a temporary work around for https://github.com/remix-run/remix/issues/3659
+// The code is based on this discussion https://bugs.chromium.org/p/chromium/issues/detail?id=357625
+const polyfill = function () {
+    try {
+        const key = "__session_storage_availability_test__";
+        sessionStorage.setItem(key, "test"); // test
+        sessionStorage.removeItem(key); // cleanup
+    }
+    catch (error) {
+        alert('It looks like you have disabled cookies in your browser. Webstudio designer may not work properly.\n\nTo enable cookies, go to "Setting" > "Privacy and security" > "Cookies and other site data", and make sure neither "Block all cookies" nor "Block third-party cookies" are selected.\n\nRead more at https://support.google.com/chrome/answer/95647');
+        const data = new Map();
+        Object.defineProperty(window, "sessionStorage", {
+            value: {
+                setItem: (key, val) => {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Session storage is unavailable due to Error "${error.message}". A polyfill is used to set value of "${key}". The value will be lost when the page is reloaded.`);
+                    data.set(key, String(val));
+                },
+                getItem: (key) => {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Session storage is unavailable due to Error "${error.message}". A polyfill is used to get value of "${key}". The value will be undefined if the page was reloaded after it was set.`);
+                    return data.get(key);
+                },
+                removeItem: (key) => {
+                    data.delete(key);
+                },
+                clear: () => {
+                    data.clear();
+                },
+            },
+        });
+    }
+}.toString();
+const SessionStoragePolyfill = () => ((0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: `(${polyfill})()` }, suppressHydrationWarning: true }));
+exports.SessionStoragePolyfill = SessionStoragePolyfill;

package/lib/tree/wrapper-component.d.ts

@@ -1,12 +1,12 @@
 import type { Instance } from "../db";
-import { type CSS } from "../stitches";
 import type { OnChangeChildren } from "./create-elements-tree";
 export declare const renderWrapperComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
-export declare type WrapperComponentProps = {
+declare type WrapperComponentProps = {
     instance: Instance;
-    css: CSS;
     children: Array<JSX.Element | string>;
     onChangeChildren?: OnChangeChildren;
 };
-export declare const WrapperComponent: ({ instance, css, onChangeChildren, children, ...rest }: WrapperComponentProps) => JSX.Element;
+export declare const WrapperComponent: ({ instance, onChangeChildren, children, ...rest }: WrapperComponentProps) => JSX.Element;
+export declare const idAttribute = "data-ws-id";
+export {};
 //# sourceMappingURL=wrapper-component.d.ts.map

package/lib/tree/wrapper-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper-component.d.ts","sourceRoot":"","sources":["../../src/tree/wrapper-component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,KAAK,GAAG,EAAoB,MAAM,aAAa,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAY/D,eAAO,MAAM,8BAA8B,aAC/B,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS,KAChD,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,GAAG,SAO9D,CAAC;AAEF,oBAAY,qBAAqB,GAAG;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC;IACT,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,2DAM1B,qBAAqB,gBASvB,CAAC"}
+{"version":3,"file":"wrapper-component.d.ts","sourceRoot":"","sources":["../../src/tree/wrapper-component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAY/D,eAAO,MAAM,8BAA8B,aAC/B,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS,KAChD,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,GAAG,SAO9D,CAAC;AAEF,aAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,sDAK1B,qBAAqB,gBAOvB,CAAC;AAEF,eAAO,MAAM,WAAW,eAAe,CAAC"}

package/lib/tree/wrapper-component.js

@@ -23,12 +23,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WrapperComponent = exports.renderWrapperComponentChildren = void 0;
+exports.idAttribute = exports.WrapperComponent = exports.renderWrapperComponentChildren = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const components = __importStar(require("../components"));
 const use_user_props_1 = require("../user-props/use-user-props");
-const stitches_1 = require("../stitches");
 const renderText = (text) => {
     const lines = text.split("\n");
     return lines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [line, index < lines.length - 1 ? (0, jsx_runtime_1.jsx)("br", {}) : null] }, index)));
@@ -43,11 +42,12 @@ const renderWrapperComponentChildren = (children) => {
     });
 };
 exports.renderWrapperComponentChildren = renderWrapperComponentChildren;
-const WrapperComponent = ({ instance, css, onChangeChildren, // prevent it from passing to sdk component
+const WrapperComponent = ({ instance, onChangeChildren, // prevent it from passing to sdk component
 children, ...rest }) => {
-    const className = (0, react_1.useMemo)(() => (0, stitches_1.css)(css)(), [css]);
     const { Component } = components[instance.component];
     const userProps = (0, use_user_props_1.useUserProps)(instance.id);
-    return ((0, jsx_runtime_1.jsx)(Component, { ...userProps, ...rest, id: instance.id, className: className, children: (0, exports.renderWrapperComponentChildren)(children) }));
+    const props = { ...userProps, ...rest, [exports.idAttribute]: instance.id };
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, children: (0, exports.renderWrapperComponentChildren)(children) }));
 };
 exports.WrapperComponent = WrapperComponent;
+exports.idAttribute = "data-ws-id";

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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",
+    "dev": "tsup --watch",
     "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 tsconfig.tsbuildinfo && tsc",
@@ -23,6 +22,7 @@
     "@esbuild-kit/esm-loader": "^2.4.2",
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
+    "remix-utils": "^4.1.0",
     "@storybook/addon-actions": "^6.5.6",
     "@storybook/addon-essentials": "^6.5.6",
     "@storybook/addon-interactions": "^6.5.6",
@@ -31,41 +31,40 @@
     "@storybook/manager-webpack4": "^6.5.6",
     "@storybook/react": "^6.5.6",
     "@storybook/testing-library": "^0.0.11",
-    "@types/css-tree": "^1.0.7",
     "@types/fs-extra": "^9.0.13",
     "@types/node": "^17.0.21",
     "@webstudio-is/jest-config": "*",
     "@webstudio-is/prisma-client": "*",
     "babel-loader": "^8.2.5",
-    "camelcase": "^6.3.0",
-    "css-tree": "^2.1.0",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
-    "mdn-data": "2.0.23",
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
     "tsup": "^6.1.3",
     "tsx": "^3.9.0",
-    "typescript": "4.7.4"
+    "typescript": "4.7.4",
+    "zod": "^3.19.1"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
+    "remix-utils": "^4.1.0",
     "@storybook/react": "^6.5.6",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "zod": "^3.19.1"
   },
   "dependencies": {
-    "@stitches/core": "^1.2.7",
     "@webstudio-is/asset-uploader": "^*",
+    "@webstudio-is/fonts": "*",
     "@webstudio-is/icons": "*",
+    "@webstudio-is/css-data": "*",
     "@webstudio-is/jest-config": "*",
-    "@webstudio-is/fonts": "*",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
     "react-nano-state": "^0.4.0",
-    "zod": "^3.17.3"
+    "warn-once": "^0.1.1"
   },
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -75,5 +74,13 @@
     "!*.test.*"
   ],
   "license": "MIT",
-  "private": false
+  "private": false,
+  "sideEffects": false,
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": "cjs",
+    "outDir": "lib"
+  }
 }