@weaverse/react 0.7.16 → 0.7.17

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import * as react from 'react';
 import { ReactElement, ReactNode, CSSProperties } from 'react';
-import { ElementsMap, WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
+import { WeaverseElement, WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
 export * from '@weaverse/core';
 
 declare const SharedComponents: {
     Placeholder: react.ForwardRefExoticComponent<PlaceholderProps & react.RefAttributes<HTMLDivElement>>;
 };
-declare const Elements: ElementsMap;
+declare const Elements: Record<string, WeaverseElement>;
 
 declare let createRootContext: (configs: WeaverseType) => Weaverse;
 declare let WeaverseContext: react.Context<Weaverse>;
@@ -55,7 +55,12 @@ interface GridContentElementProps extends WeaverseElementProps {
     gap: number;
     rowSize: number;
 }
-interface LayoutElementProps extends GridContentElementProps {
+interface BackgroundDataProps {
+    backgroundColor?: string;
+    backgroundImage?: string;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+interface LayoutElementProps extends BackgroundDataProps, GridContentElementProps {
     gridSize: number;
 }
 interface MapElementProps extends WeaverseElementProps {

package/dist/index.js

@@ -299,7 +299,18 @@ var image_default = Image;
 // src/elements/layout.tsx
 var import_react6 = __toESM(require("react"));
 var Layout = (0, import_react6.forwardRef)((props, ref) => {
-  let { children, rows, gap, rowSize, columns, gridSize, ...rest } = props;
+  let {
+    children,
+    rows,
+    gap,
+    rowSize,
+    columns,
+    gridSize,
+    backgroundColor,
+    backgroundImage,
+    objectFit,
+    ...rest
+  } = props;
   let style = {
     "--grid-size": gridSize + "px",
     "--rows": rows,
@@ -312,10 +323,30 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
     ref,
     ...rest,
     style
-  }, /* @__PURE__ */ import_react6.default.createElement("div", {
+  }, /* @__PURE__ */ import_react6.default.createElement(LayoutBackground, {
+    imgUrl: backgroundImage,
+    bgColor: backgroundColor,
+    objectFit
+  }), /* @__PURE__ */ import_react6.default.createElement("div", {
     "data-layout-content": true
   }, children));
 });
+var LayoutBackground = (props) => {
+  let { bgColor, imgUrl, objectFit } = props;
+  let style = {
+    ["--bg-color"]: bgColor,
+    ["--object-fit"]: objectFit
+  };
+  return imgUrl || bgColor ? /* @__PURE__ */ import_react6.default.createElement("div", {
+    "data-wv-bg": true,
+    style
+  }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
+    width: "100%",
+    height: "100%",
+    "data-blink-src": imgUrl,
+    alt: "wv-layout-background"
+  })) : null;
+};
 var css5 = {
   "@desktop": {
     paddingTop: "16px",
@@ -339,6 +370,18 @@ var css5 = {
     }
   }
 };
+var permanentCss = {
+  "@desktop": {
+    "[data-wv-bg]": {
+      position: "absolute",
+      inset: 0,
+      backgroundColor: "var(--bg-color)"
+    },
+    img: {
+      objectFit: "var(--object-fit, cover)"
+    }
+  }
+};
 Layout.defaultProps = {
   gridSize: 1224,
   rows: 12,
@@ -449,7 +492,7 @@ var Placeholder = (0, import_react9.forwardRef)(
   (props, ref) => {
     let { element, children, ...rest } = props;
     return /* @__PURE__ */ import_react9.default.createElement("div", {
-      "data-wv-type": "placeholder",
+      "data-wv-placeholder": true,
       style: { display: "none" },
       ref,
       ...rest
@@ -575,7 +618,8 @@ var Elements = {
   Layout: {
     Component: layout_default,
     type: "layout",
-    defaultCss: css5
+    defaultCss: css5,
+    permanentCss
   },
   Map: {
     Component: map_default,
@@ -638,39 +682,42 @@ var WeaverseRoot = ({ context }) => {
   var _a, _b;
   let [, setData] = (0, import_react11.useState)(context.projectData);
   let rootRef = (0, import_react11.useRef)();
-  let update = () => setData({});
+  let renderRoot = () => setData({});
   (0, import_react11.useEffect)(() => {
-    context.subscribe(update);
+    context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
-      context.unsubscribe(update);
+      context.unsubscribe(renderRoot);
     };
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react11.default.createElement("div", {
-    className: `weaverse-content-root ${themeClass}`,
-    ...eventHandlers,
-    ref: rootRef
-  }, /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
-    value: context
-  }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
-    id: context.projectData.rootId
-  }))) : null;
+  if ((_b = context.projectData) == null ? void 0 : _b.rootId) {
+    return /* @__PURE__ */ import_react11.default.createElement("div", {
+      className: `weaverse-content-root ${themeClass}`,
+      ...eventHandlers,
+      ref: rootRef
+    }, /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
+      value: context
+    }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+      id: context.projectData.rootId
+    })));
+  }
+  return null;
 };
 var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
   let [data, setData] = (0, import_react11.useState)(instance.data);
   let { id, type, childIds = [], css: css10, className, ...rest } = data;
   (0, import_react11.useEffect)(() => {
-    let update = (data2) => setData({ ...data2 });
-    instance.subscribe(update);
+    let render = (data2) => setData({ ...data2 });
+    instance.subscribe(render);
     if (import_core2.isBrowser && !instance.ref.current) {
       Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
     }
-    return () => instance.unsubscribe(update);
+    return () => instance.unsubscribe(render);
   }, []);
   let Element = elementInstances.get(type);
   if (Element == null ? void 0 : Element.Component) {
@@ -688,8 +735,10 @@ var ItemComponent = ({ instance }) => {
       key: id2,
       id: id2
     })));
+  } else {
+    console.log(`Unknown element: ${type}`);
+    return null;
   }
-  return null;
 };
 var ItemInstance = ({ id }) => {
   let context = (0, import_react11.useContext)(WeaverseContext);

package/dist/index.mjs

@@ -260,7 +260,18 @@ var image_default = Image;
 // src/elements/layout.tsx
 import React6, { forwardRef as forwardRef4 } from "react";
 var Layout = forwardRef4((props, ref) => {
-  let { children, rows, gap, rowSize, columns, gridSize, ...rest } = props;
+  let {
+    children,
+    rows,
+    gap,
+    rowSize,
+    columns,
+    gridSize,
+    backgroundColor,
+    backgroundImage,
+    objectFit,
+    ...rest
+  } = props;
   let style = {
     "--grid-size": gridSize + "px",
     "--rows": rows,
@@ -273,10 +284,30 @@ var Layout = forwardRef4((props, ref) => {
     ref,
     ...rest,
     style
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement(LayoutBackground, {
+    imgUrl: backgroundImage,
+    bgColor: backgroundColor,
+    objectFit
+  }), /* @__PURE__ */ React6.createElement("div", {
     "data-layout-content": true
   }, children));
 });
+var LayoutBackground = (props) => {
+  let { bgColor, imgUrl, objectFit } = props;
+  let style = {
+    ["--bg-color"]: bgColor,
+    ["--object-fit"]: objectFit
+  };
+  return imgUrl || bgColor ? /* @__PURE__ */ React6.createElement("div", {
+    "data-wv-bg": true,
+    style
+  }, imgUrl && /* @__PURE__ */ React6.createElement("img", {
+    width: "100%",
+    height: "100%",
+    "data-blink-src": imgUrl,
+    alt: "wv-layout-background"
+  })) : null;
+};
 var css5 = {
   "@desktop": {
     paddingTop: "16px",
@@ -300,6 +331,18 @@ var css5 = {
     }
   }
 };
+var permanentCss = {
+  "@desktop": {
+    "[data-wv-bg]": {
+      position: "absolute",
+      inset: 0,
+      backgroundColor: "var(--bg-color)"
+    },
+    img: {
+      objectFit: "var(--object-fit, cover)"
+    }
+  }
+};
 Layout.defaultProps = {
   gridSize: 1224,
   rows: 12,
@@ -410,7 +453,7 @@ var Placeholder = forwardRef8(
   (props, ref) => {
     let { element, children, ...rest } = props;
     return /* @__PURE__ */ React10.createElement("div", {
-      "data-wv-type": "placeholder",
+      "data-wv-placeholder": true,
       style: { display: "none" },
       ref,
       ...rest
@@ -536,7 +579,8 @@ var Elements = {
   Layout: {
     Component: layout_default,
     type: "layout",
-    defaultCss: css5
+    defaultCss: css5,
+    permanentCss
   },
   Map: {
     Component: map_default,
@@ -599,39 +643,42 @@ var WeaverseRoot = ({ context }) => {
   var _a, _b;
   let [, setData] = useState2(context.projectData);
   let rootRef = useRef();
-  let update = () => setData({});
+  let renderRoot = () => setData({});
   useEffect3(() => {
-    context.subscribe(update);
+    context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
-      context.unsubscribe(update);
+      context.unsubscribe(renderRoot);
     };
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React12.createElement("div", {
-    className: `weaverse-content-root ${themeClass}`,
-    ...eventHandlers,
-    ref: rootRef
-  }, /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
-    value: context
-  }, /* @__PURE__ */ React12.createElement(ItemInstance, {
-    id: context.projectData.rootId
-  }))) : null;
+  if ((_b = context.projectData) == null ? void 0 : _b.rootId) {
+    return /* @__PURE__ */ React12.createElement("div", {
+      className: `weaverse-content-root ${themeClass}`,
+      ...eventHandlers,
+      ref: rootRef
+    }, /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
+      value: context
+    }, /* @__PURE__ */ React12.createElement(ItemInstance, {
+      id: context.projectData.rootId
+    })));
+  }
+  return null;
 };
 var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = useContext3(WeaverseContext);
   let [data, setData] = useState2(instance.data);
   let { id, type, childIds = [], css: css10, className, ...rest } = data;
   useEffect3(() => {
-    let update = (data2) => setData({ ...data2 });
-    instance.subscribe(update);
+    let render = (data2) => setData({ ...data2 });
+    instance.subscribe(render);
     if (isBrowser && !instance.ref.current) {
       Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
     }
-    return () => instance.unsubscribe(update);
+    return () => instance.unsubscribe(render);
   }, []);
   let Element = elementInstances.get(type);
   if (Element == null ? void 0 : Element.Component) {
@@ -649,8 +696,10 @@ var ItemComponent = ({ instance }) => {
       key: id2,
       id: id2
     })));
+  } else {
+    console.log(`Unknown element: ${type}`);
+    return null;
   }
-  return null;
 };
 var ItemInstance = ({ id }) => {
   let context = useContext3(WeaverseContext);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.16",
+  "version": "0.7.17",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,7 +31,7 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.7.16",
+    "@weaverse/core": "0.7.17",
     "nuka-carousel": "^5.4.0"
   }
 }