@webstudio-is/react-sdk 0.7.3 → 0.9.0

package/lib/app/custom-components/image.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps } from "react";
+import { Image as WebstudioImage } from "@webstudio-is/image";
+import { idAttribute } from "../../tree/wrapper-component";
+declare type Props = ComponentProps<typeof WebstudioImage> & {
+    [idAttribute]: string;
+};
+export declare const Component: import("react").ForwardRefExoticComponent<Pick<Props, "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "data-ws-id" | "quality" | "loader" | "optimize"> & import("react").RefAttributes<HTMLImageElement>>;
+export {};
+//# sourceMappingURL=image.d.ts.map

package/lib/app/custom-components/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/app/custom-components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,IAAI,cAAc,EAAW,MAAM,qBAAqB,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAK3D,aAAK,KAAK,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,SAAS,gOAqBrB,CAAC"}

package/lib/app/custom-components/image.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, } from "react";
+import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
+import { Image as SdkImage } from "../../components/image";
+import { useUserPropsAsset } from "../../user-props/use-user-props-asset";
+import { idAttribute } from "../../tree/wrapper-component";
+import { getParams } from "../params";
+const defaultTag = "img";
+export const Component = forwardRef((props, ref) => {
+    const componentId = props[idAttribute];
+    const asset = useUserPropsAsset(componentId, "src");
+    const params = getParams();
+    const loader = useMemo(() => {
+        if (asset == null)
+            return null;
+        if (asset.location === "REMOTE")
+            return loaders.cloudflareImageLoader(params);
+        return loaders.localImageLoader();
+    }, [asset, params]);
+    if (asset === null || loader == null)
+        return _jsx(SdkImage, { ...props, ref: ref });
+    return (_jsx(WebstudioImage, { ...props, loader: loader, optimize: true, ref: ref }));
+});
+Component.displayName = "Image";

package/lib/app/custom-components/index.d.ts

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

package/lib/app/custom-components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app/custom-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}

package/lib/app/custom-components/index.js

@@ -0,0 +1 @@
+export * as Image from "./image";

package/lib/app/handle-request.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-request.server.d.ts","sourceRoot":"","sources":["../../src/app/handle-request.server.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,aAAa,YACf,OAAO,sBACI,MAAM,mBACT,OAAO,gBACV,YAAY,aAY3B,CAAC"}

package/lib/{cjs/remix → app}/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./root";
 export * from "./handle-request.server";
+export * from "./params";
 //# sourceMappingURL=index.d.ts.map

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

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

package/lib/{remix → app}/index.js

@@ -1,2 +1,3 @@
 export * from "./root";
 export * from "./handle-request.server";
+export * from "./params";

package/lib/app/params.d.ts

@@ -0,0 +1,6 @@
+export declare type Params = {
+    resizeOrigin?: string;
+};
+export declare const getParams: () => Params;
+export declare const setParams: (newParams: Params | null) => void;
+//# sourceMappingURL=params.d.ts.map

package/lib/app/params.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"params.d.ts","sourceRoot":"","sources":["../../src/app/params.ts"],"names":[],"mappings":"AAAA,oBAAY,MAAM,GAAG;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAMF,eAAO,MAAM,SAAS,QAAO,MAA+B,CAAC;AAE7D,eAAO,MAAM,SAAS,cAAe,MAAM,GAAG,IAAI,SAEjD,CAAC"}

package/lib/app/params.js

@@ -0,0 +1,6 @@
+let params = {};
+const emptyParams = {};
+export const getParams = () => params ?? emptyParams;
+export const setParams = (newParams) => {
+    params = newParams;
+};

package/lib/{cjs/remix → app}/root.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Outlet as DefaultOutlet } from "@remix-run/react";
 /**
  * We are using Outlet prop from index layout when user renders site from a subdomain.

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

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

package/lib/cjs/app/custom-components/image.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Component = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const image_1 = require("@webstudio-is/image");
+const image_2 = require("../../components/image");
+const use_user_props_asset_1 = require("../../user-props/use-user-props-asset");
+const wrapper_component_1 = require("../../tree/wrapper-component");
+const params_1 = require("../params");
+const defaultTag = "img";
+exports.Component = (0, react_1.forwardRef)((props, ref) => {
+    const componentId = props[wrapper_component_1.idAttribute];
+    const asset = (0, use_user_props_asset_1.useUserPropsAsset)(componentId, "src");
+    const params = (0, params_1.getParams)();
+    const loader = (0, react_1.useMemo)(() => {
+        if (asset == null)
+            return null;
+        if (asset.location === "REMOTE")
+            return image_1.loaders.cloudflareImageLoader(params);
+        return image_1.loaders.localImageLoader();
+    }, [asset, params]);
+    if (asset === null || loader == null)
+        return (0, jsx_runtime_1.jsx)(image_2.Image, { ...props, ref: ref });
+    return ((0, jsx_runtime_1.jsx)(image_1.Image, { ...props, loader: loader, optimize: true, ref: ref }));
+});
+exports.Component.displayName = "Image";

package/lib/cjs/app/custom-components/image.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentProps } from "react";
+import { Image as WebstudioImage } from "@webstudio-is/image";
+import { idAttribute } from "../../tree/wrapper-component";
+declare type Props = ComponentProps<typeof WebstudioImage> & {
+    [idAttribute]: string;
+};
+export declare const Component: import("react").ForwardRefExoticComponent<Pick<Props, "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "data-ws-id" | "quality" | "loader" | "optimize"> & import("react").RefAttributes<HTMLImageElement>>;
+export {};
+//# sourceMappingURL=image.d.ts.map

package/lib/cjs/app/custom-components/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/app/custom-components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,IAAI,cAAc,EAAW,MAAM,qBAAqB,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAK3D,aAAK,KAAK,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,SAAS,gOAqBrB,CAAC"}

package/lib/cjs/app/custom-components/index.cjs

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+exports.Image = __importStar(require("./image"));

package/lib/cjs/app/custom-components/index.d.ts

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

package/lib/cjs/app/custom-components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app/custom-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}

package/lib/cjs/app/handle-request.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle-request.server.d.ts","sourceRoot":"","sources":["../../../src/app/handle-request.server.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,aAAa,YACf,OAAO,sBACI,MAAM,mBACT,OAAO,gBACV,YAAY,aAY3B,CAAC"}

package/lib/cjs/{remix → app}/index.cjs

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./root"), exports);
 __exportStar(require("./handle-request.server"), exports);
+__exportStar(require("./params"), exports);

package/lib/{remix → cjs/app}/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./root";
 export * from "./handle-request.server";
+export * from "./params";
 //# sourceMappingURL=index.d.ts.map

package/lib/cjs/app/index.d.ts.map

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

package/lib/cjs/app/params.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setParams = exports.getParams = void 0;
+let params = {};
+const emptyParams = {};
+const getParams = () => params ?? emptyParams;
+exports.getParams = getParams;
+const setParams = (newParams) => {
+    params = newParams;
+};
+exports.setParams = setParams;

package/lib/cjs/app/params.d.ts

@@ -0,0 +1,6 @@
+export declare type Params = {
+    resizeOrigin?: string;
+};
+export declare const getParams: () => Params;
+export declare const setParams: (newParams: Params | null) => void;
+//# sourceMappingURL=params.d.ts.map

package/lib/cjs/app/params.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"params.d.ts","sourceRoot":"","sources":["../../../src/app/params.ts"],"names":[],"mappings":"AAAA,oBAAY,MAAM,GAAG;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAMF,eAAO,MAAM,SAAS,QAAO,MAA+B,CAAC;AAE7D,eAAO,MAAM,SAAS,cAAe,MAAM,GAAG,IAAI,SAEjD,CAAC"}

package/lib/{remix → cjs/app}/root.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Outlet as DefaultOutlet } from "@remix-run/react";
 /**
  * We are using Outlet prop from index layout when user renders site from a subdomain.

package/lib/cjs/app/root.d.ts.map

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

package/lib/{components → cjs/components/__generated__}/image.props.json

@@ -556,20 +556,5 @@
         "defaultValue": null,
         "required": false,
         "type": "text"
-    },
-    "quality": {
-        "defaultValue": null,
-        "required": false,
-        "type": "number"
-    },
-    "loader": {
-        "defaultValue": null,
-        "required": false,
-        "type": "text"
-    },
-    "optimize": {
-        "defaultValue": null,
-        "required": false,
-        "type": "boolean"
     }
 }

package/lib/cjs/components/index.cjs

@@ -3,34 +3,78 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = exports.Form = exports.Input = exports.Button = exports.Subscript = exports.Superscript = exports.Italic = exports.Bold = exports.Span = exports.Link = exports.Paragraph = exports.Heading = exports.TextBlock = exports.Box = exports.Body = void 0;
-var body_ws_1 = require("./body.ws");
-Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(body_ws_1).default; } });
-var box_ws_1 = require("./box.ws");
-Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return __importDefault(box_ws_1).default; } });
-var text_block_ws_1 = require("./text-block.ws");
-Object.defineProperty(exports, "TextBlock", { enumerable: true, get: function () { return __importDefault(text_block_ws_1).default; } });
-var heading_ws_1 = require("./heading.ws");
-Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return __importDefault(heading_ws_1).default; } });
-var paragraph_ws_1 = require("./paragraph.ws");
-Object.defineProperty(exports, "Paragraph", { enumerable: true, get: function () { return __importDefault(paragraph_ws_1).default; } });
-var link_ws_1 = require("./link.ws");
-Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(link_ws_1).default; } });
-var span_ws_1 = require("./span.ws");
-Object.defineProperty(exports, "Span", { enumerable: true, get: function () { return __importDefault(span_ws_1).default; } });
-var bold_ws_1 = require("./bold.ws");
-Object.defineProperty(exports, "Bold", { enumerable: true, get: function () { return __importDefault(bold_ws_1).default; } });
-var italic_ws_1 = require("./italic.ws");
-Object.defineProperty(exports, "Italic", { enumerable: true, get: function () { return __importDefault(italic_ws_1).default; } });
-var superscript_ws_1 = require("./superscript.ws");
-Object.defineProperty(exports, "Superscript", { enumerable: true, get: function () { return __importDefault(superscript_ws_1).default; } });
-var subscript_ws_1 = require("./subscript.ws");
-Object.defineProperty(exports, "Subscript", { enumerable: true, get: function () { return __importDefault(subscript_ws_1).default; } });
-var button_ws_1 = require("./button.ws");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_ws_1).default; } });
-var input_ws_1 = require("./input.ws");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(input_ws_1).default; } });
-var form_ws_1 = require("./form.ws");
-Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return __importDefault(form_ws_1).default; } });
-var image_ws_1 = require("./image.ws");
-Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(image_ws_1).default; } });
+exports.registerComponents = exports.getComponent = exports.getComponentMeta = exports.getComponentNames = void 0;
+const body_ws_1 = __importDefault(require("./body.ws"));
+const box_ws_1 = __importDefault(require("./box.ws"));
+const text_block_ws_1 = __importDefault(require("./text-block.ws"));
+const heading_ws_1 = __importDefault(require("./heading.ws"));
+const paragraph_ws_1 = __importDefault(require("./paragraph.ws"));
+const link_ws_1 = __importDefault(require("./link.ws"));
+const span_ws_1 = __importDefault(require("./span.ws"));
+const bold_ws_1 = __importDefault(require("./bold.ws"));
+const italic_ws_1 = __importDefault(require("./italic.ws"));
+const superscript_ws_1 = __importDefault(require("./superscript.ws"));
+const subscript_ws_1 = __importDefault(require("./subscript.ws"));
+const button_ws_1 = __importDefault(require("./button.ws"));
+const input_ws_1 = __importDefault(require("./input.ws"));
+const form_ws_1 = __importDefault(require("./form.ws"));
+const image_ws_1 = __importDefault(require("./image.ws"));
+const components = {
+    Body: body_ws_1.default,
+    Box: box_ws_1.default,
+    TextBlock: text_block_ws_1.default,
+    Heading: heading_ws_1.default,
+    Paragraph: paragraph_ws_1.default,
+    Link: link_ws_1.default,
+    Span: span_ws_1.default,
+    Bold: bold_ws_1.default,
+    Italic: italic_ws_1.default,
+    Superscript: superscript_ws_1.default,
+    Subscript: subscript_ws_1.default,
+    Button: button_ws_1.default,
+    Input: input_ws_1.default,
+    Form: form_ws_1.default,
+    Image: image_ws_1.default,
+};
+let registeredComponents = null;
+const componentNames = Object.keys(components);
+const getComponentNames = () => {
+    const uniqueNames = new Set([
+        ...componentNames,
+        ...Object.keys(registeredComponents || {}),
+    ]);
+    return [...uniqueNames.values()];
+};
+exports.getComponentNames = getComponentNames;
+const getComponentMeta = (name) => {
+    if (registeredComponents != null &&
+        name in registeredComponents &&
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        registeredComponents[name].meta != null) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return { ...components[name], ...registeredComponents[name].meta };
+    }
+    return components[name];
+};
+exports.getComponentMeta = getComponentMeta;
+/**
+ * @todo Remove Component from meta and read directly (via import),
+ * as meta information is not needed during production render.
+ **/
+const getComponent = (name) => {
+    return registeredComponents != null && name in registeredComponents
+        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            registeredComponents[name]
+                .Component
+        : components[name].Component;
+};
+exports.getComponent = getComponent;
+/**
+ *  @todo: Allow register any component.
+ * Now we can register only existings Components, as all our type system would
+ * break otherwise, see getComponent etc. So its overwriteComponent now
+ **/
+const registerComponents = (components) => {
+    registeredComponents = components;
+};
+exports.registerComponents = registerComponents;