@webstudio-is/react-sdk 0.65.0 → 0.67.0

package/src/components/span.ws.tsx

@@ -1,4 +1,4 @@
-import { PaintBrushIcon } from "@webstudio-is/icons";
+import { PaintBrushIcon } from "@webstudio-is/icons/svg";
 import { span } from "../css/normalize";
 import {
   defaultStates,
@@ -16,7 +16,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Styled Text",
-  Icon: PaintBrushIcon,
+  icon: PaintBrushIcon,
   states: defaultStates,
   presetStyle,
 };

package/src/components/subscript.ws.tsx

@@ -1,4 +1,4 @@
-import { SubscriptIcon } from "@webstudio-is/icons";
+import { SubscriptIcon } from "@webstudio-is/icons/svg";
 import { sub } from "../css/normalize";
 import {
   defaultStates,
@@ -16,7 +16,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Subscript Text",
-  Icon: SubscriptIcon,
+  icon: SubscriptIcon,
   states: defaultStates,
   presetStyle,
 };

package/src/components/success-message.ws.tsx

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import type {
   WsComponentMeta,
   WsComponentPropsMeta,
@@ -14,7 +14,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "container",
   label: "Success Message",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   presetStyle,
 };
 

package/src/components/superscript.ws.tsx

@@ -1,4 +1,4 @@
-import { SuperscriptIcon } from "@webstudio-is/icons";
+import { SuperscriptIcon } from "@webstudio-is/icons/svg";
 import { sup } from "../css/normalize";
 import {
   defaultStates,
@@ -16,7 +16,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Superscript Text",
-  Icon: SuperscriptIcon,
+  icon: SuperscriptIcon,
   states: defaultStates,
   presetStyle,
 };

package/src/components/text-block.ws.tsx

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
@@ -23,7 +23,7 @@ export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Text Block",
-  Icon: TextBlockIcon,
+  icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Block of text you can edit" }],

package/src/components/textarea.ws.tsx

@@ -1,4 +1,4 @@
-import { FormTextAreaIcon } from "@webstudio-is/icons";
+import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
 import { textarea } from "../css/normalize";
 import {
   type WsComponentMeta,
@@ -21,7 +21,7 @@ export const meta: WsComponentMeta = {
   category: "forms",
   type: "control",
   label: "Text Area",
-  Icon: FormTextAreaIcon,
+  icon: FormTextAreaIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/src/context.tsx

@@ -4,6 +4,7 @@ import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Pages, PropsByInstanceId } from "./props";
 
 export const ReactSdkContext = createContext<{
+  renderer?: "canvas";
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;

package/src/css/css.ts

@@ -1,8 +1,7 @@
 import { createCssEngine, type TransformValue } from "@webstudio-is/css-engine";
 import type { Asset, Assets } from "@webstudio-is/asset-uploader";
 import type { Build } from "@webstudio-is/project-build";
-import { getComponentNames } from "../components/components-utils";
-import { getComponentMeta } from "../components";
+import type { WsComponentMeta } from "../components/component-meta";
 import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
 import { getPresetStyleRules, getStyleRules } from "./style-rules";
@@ -12,6 +11,7 @@ type Data = {
   breakpoints?: Build["breakpoints"];
   styles?: Build["styles"];
   styleSourceSelections?: Build["styleSourceSelections"];
+  componentMetas: Map<string, WsComponentMeta>;
 };
 
 type CssOptions = {
@@ -61,9 +61,8 @@ export const generateCssText = (data: Data, options: CssOptions) => {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
 
-  for (const component of getComponentNames()) {
-    const meta = getComponentMeta(component);
-    const presetStyle = meta?.presetStyle;
+  for (const [component, meta] of data.componentMetas) {
+    const presetStyle = meta.presetStyle;
     if (presetStyle === undefined) {
       continue;
     }

package/src/css/normalize.ts

@@ -16,7 +16,7 @@
  */
 
 // webstudio custom opinionated presets
-import { borders } from "./presets";
+import { borders, outline } from "./presets";
 import type { EmbedTemplateStyleDecl } from "../embed-template";
 
 export type Styles = EmbedTemplateStyleDecl[];
@@ -37,7 +37,7 @@ const boxSizing = {
  *   box-sizing: border-box;
   }
 */
-const baseStyle = [boxSizing, ...borders] satisfies Styles;
+const baseStyle = [boxSizing, ...borders, ...outline] satisfies Styles;
 
 export const div = baseStyle;
 export const address = baseStyle;

package/src/css/presets.ts

@@ -18,3 +18,10 @@ export const borders: Styles = [
     value: { type: "unit", value: 1, unit: "px" },
   },
 ];
+
+export const outline: Styles = [
+  {
+    property: "outlineWidth",
+    value: { type: "unit", value: 1, unit: "px" },
+  },
+];

package/src/tree/create-elements-tree.tsx

@@ -7,23 +7,22 @@ import type { GetComponent } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
-import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
 type InstanceSelector = Instance["id"][];
 
 export const createElementsTree = ({
+  renderer,
   instances,
   rootInstanceId,
-  sandbox,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
   Component,
   getComponent,
 }: {
+  renderer?: "canvas";
   instances: Instances;
   rootInstanceId: Instance["id"];
-  sandbox?: boolean;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;
@@ -50,7 +49,6 @@ export const createElementsTree = ({
     children: [
       <Fragment key="children">
         {children}
-        {sandbox && <SessionStoragePolyfill />}
         <ScrollRestoration />
         <Scripts />
       </Fragment>,
@@ -59,7 +57,7 @@ export const createElementsTree = ({
   });
   return (
     <ReactSdkContext.Provider
-      value={{ propsByInstanceIdStore, assetsStore, pagesStore }}
+      value={{ propsByInstanceIdStore, assetsStore, pagesStore, renderer }}
     >
       {root}
     </ReactSdkContext.Provider>

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

@@ -1,65 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-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 session_storage_polyfill_exports = {};
-__export(session_storage_polyfill_exports, {
-  SessionStoragePolyfill: () => SessionStoragePolyfill
-});
-module.exports = __toCommonJS(session_storage_polyfill_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-const polyfill = function() {
-  try {
-    const key = "__session_storage_availability_test__";
-    sessionStorage.setItem(key, "test");
-    sessionStorage.removeItem(key);
-  } catch (error) {
-    alert(
-      'It looks like you have disabled cookies in your browser. Webstudio builder 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 = /* @__PURE__ */ new Map();
-    Object.defineProperty(window, "sessionStorage", {
-      value: {
-        setItem: (key, val) => {
-          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) => {
-          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 = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "script",
-  {
-    dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
-    suppressHydrationWarning: true
-  }
-);

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

@@ -1,45 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-const polyfill = function() {
-  try {
-    const key = "__session_storage_availability_test__";
-    sessionStorage.setItem(key, "test");
-    sessionStorage.removeItem(key);
-  } catch (error) {
-    alert(
-      'It looks like you have disabled cookies in your browser. Webstudio builder 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 = /* @__PURE__ */ new Map();
-    Object.defineProperty(window, "sessionStorage", {
-      value: {
-        setItem: (key, val) => {
-          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) => {
-          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 = () => /* @__PURE__ */ jsx(
-  "script",
-  {
-    dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
-    suppressHydrationWarning: true
-  }
-);
-export {
-  SessionStoragePolyfill
-};

package/lib/types/tree/session-storage-polyfill.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const SessionStoragePolyfill: () => JSX.Element;

package/src/components/code.stories.tsx

@@ -1,16 +0,0 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Code as CodePrimitive } from "./code";
-
-export default {
-  title: "Components/Code",
-  component: CodePrimitive,
-} as ComponentMeta<typeof CodePrimitive>;
-
-const Template: ComponentStory<typeof CodePrimitive> = (args) => (
-  <CodePrimitive {...args} />
-);
-
-export const Code = Template.bind({});
-Code.args = {
-  children: "alert('Hello World!')",
-};

package/src/tree/session-storage-polyfill.tsx

@@ -1,50 +0,0 @@
-// 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 builder 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: string, val: unknown) => {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `Session storage is unavailable due to Error "${
-              (error as 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: string) => {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `Session storage is unavailable due to Error "${
-              (error as 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: string) => {
-          data.delete(key);
-        },
-        clear: () => {
-          data.clear();
-        },
-      },
-    });
-  }
-}.toString();
-
-export const SessionStoragePolyfill = () => (
-  <script
-    dangerouslySetInnerHTML={{ __html: `(${polyfill})()` }}
-    suppressHydrationWarning
-  />
-);