@weaverse/react 1.0.23 → 1.0.25

package/dist/index.d.ts

@@ -158,9 +158,11 @@ declare function Dots(props: SliderDotsProps): JSX.Element;
 
 declare function AutoplayPlugin(changeSlidesEvery: number): KeenSliderPlugin;
 
-declare function NoHydrate({ getHTML, ...rest }: {
+type NoHydrateProps = {
+    id: string;
     getHTML?: () => string;
-} & JSX.IntrinsicElements['div']): JSX.Element;
+} & JSX.IntrinsicElements['div'];
+declare function NoHydrate({ id, getHTML, ...rest }: NoHydrateProps): JSX.Element;
 
 declare let Components: {
     Background: typeof Background;
@@ -333,6 +335,6 @@ declare global {
     }
 }
 
-declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
+declare let WeaverseRoot: React__default.MemoExoticComponent<({ context }: WeaverseRootPropsType) => JSX.Element | null>;
 
 export { BackgroundProps, ButtonElementProps, Components, ContainerElementProps, CountdownElementProps, CountdownTimeKey, CountdownTimerType, Elements, GridContentElementProps, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutBackgroundProps, LayoutElementProps, MapElementProps, ModalContentProps, OverlayProps, PlaceholderProps, ScrollingTextElementProps, SlideProps, SliderArrowsProps, SliderComponents, SliderDotsProps, SliderProps, SlideshowProps, TextElementProps, TimerBlockProps, TooltipProps, VideoCommonProps, VideoElementProps, VimeoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseIcon, WeaverseIconProps, WeaverseRoot, WeaverseRootPropsType, YoutubeElementProps, createRootContext };

package/dist/index.js

@@ -70,16 +70,16 @@ var Button = React.forwardRef((props, ref) => {
 });
 Button.defaultProps = {
   type: "button",
-  text: "Button",
+  text: "BUTTON",
   clickAction: "none",
   linkTo: "",
   openInNewTab: false
 };
 var css = {
   "@desktop": {
-    borderRadius: "8px",
+    borderRadius: "4px",
     border: "none",
-    backgroundColor: "#393e46",
+    backgroundColor: "#3E3F40",
     color: "#fff",
     fontSize: "14px",
     lineHeight: "1.5",
@@ -90,8 +90,8 @@ var css = {
     minWidth: "120px",
     textDecoration: "none",
     textAlign: "center",
-    ":hover": {
-      backgroundColor: "#222831"
+    "&:hover": {
+      backgroundColor: "#1A1B1B"
     }
   }
 };
@@ -112,7 +112,7 @@ var css2 = {
     justifyContent: "flex-start",
     gridArea: "1 / 1 / 3 / 6",
     overflow: "hidden",
-    minWidth: "300px",
+    // minWidth: '300px',
     minHeight: "100px"
   },
   "@mobile": {
@@ -1943,11 +1943,7 @@ var placeholder_default = Placeholder;
 
 // src/components/no-hydrate.tsx
 var import_react30 = __toESM(require("react"));
-function NoHydrate({
-  getHTML,
-  ...rest
-}) {
-  let id = (0, import_react30.useId)();
+function NoHydrate({ id, getHTML, ...rest }) {
   let [html] = (0, import_react30.useState)(() => {
     if (typeof document === "undefined") {
       return getHTML?.() ?? "";
@@ -2105,7 +2101,7 @@ function formatCSS(css13) {
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css13, type, className: cls = "" } = instance.data;
+  let { css: css13, type, className: cls = "", tailwindClasses } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -2124,7 +2120,13 @@ function generateItemClassName(instance, stitchesInstance) {
     let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
     let { stitchesClass } = instance;
     let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = (0, import_clsx5.default)(permanentClass, cls, newStitchesClass, otherClass);
+    className = (0, import_clsx5.default)(
+      permanentClass,
+      cls,
+      tailwindClasses,
+      newStitchesClass,
+      otherClass
+    );
     instance.stitchesClass = newStitchesClass;
   }
   return className;
@@ -2554,7 +2556,7 @@ function initUploadCareAdaptiveDelivery(baseUrl) {
 }
 
 // src/renderer.tsx
-var WeaverseRoot = ({ context }) => {
+var WeaverseRoot = (0, import_react38.memo)(({ context }) => {
   let [, setData] = (0, import_react38.useState)(context.data);
   let rootRef = (0, import_react38.useRef)();
   let renderRoot = () => setData({});
@@ -2580,11 +2582,25 @@ var WeaverseRoot = ({ context }) => {
     );
   }
   return null;
-};
-var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react38.useContext)(WeaverseContext);
+});
+var ItemComponent = (0, import_react38.memo)(({ instance }) => {
+  let context = (0, import_react38.useContext)(WeaverseContext);
+  let { stitchesInstance, elementInstances } = context;
   let [data, setData] = (0, import_react38.useState)(instance.data);
-  let { id, type, childIds = [], css: css13, className, ...rest } = data;
+  let {
+    id,
+    type,
+    childIds = [],
+    children = [],
+    parentId,
+    createdAt,
+    updatedAt,
+    deletedAt,
+    tailwindClasses,
+    css: css13,
+    className,
+    ...rest
+  } = data;
   (0, import_react38.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
@@ -2610,22 +2626,24 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((cid) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: cid, id: cid })),
+      children.map((item) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: item.id, id: item.id }))
     );
   } else {
-    console.log(`Unknown element: ${type}`);
+    console.warn(`Unknown element: ${type}`);
     return null;
   }
-};
-var ItemInstance = ({ id }) => {
+});
+var ItemInstance = (0, import_react38.memo)(({ id }) => {
   let context = (0, import_react38.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
+    console.warn(`Item instance ${id} not found`);
     return /* @__PURE__ */ import_react38.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
   }
   return /* @__PURE__ */ import_react38.default.createElement(ItemComponent, { key: id, instance });
-};
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Components,

package/dist/index.mjs

@@ -34,16 +34,16 @@ var Button = React.forwardRef((props, ref) => {
 });
 Button.defaultProps = {
   type: "button",
-  text: "Button",
+  text: "BUTTON",
   clickAction: "none",
   linkTo: "",
   openInNewTab: false
 };
 var css = {
   "@desktop": {
-    borderRadius: "8px",
+    borderRadius: "4px",
     border: "none",
-    backgroundColor: "#393e46",
+    backgroundColor: "#3E3F40",
     color: "#fff",
     fontSize: "14px",
     lineHeight: "1.5",
@@ -54,8 +54,8 @@ var css = {
     minWidth: "120px",
     textDecoration: "none",
     textAlign: "center",
-    ":hover": {
-      backgroundColor: "#222831"
+    "&:hover": {
+      backgroundColor: "#1A1B1B"
     }
   }
 };
@@ -76,7 +76,7 @@ var css2 = {
     justifyContent: "flex-start",
     gridArea: "1 / 1 / 3 / 6",
     overflow: "hidden",
-    minWidth: "300px",
+    // minWidth: '300px',
     minHeight: "100px"
   },
   "@mobile": {
@@ -1906,12 +1906,8 @@ var Placeholder = forwardRef9(
 var placeholder_default = Placeholder;
 
 // src/components/no-hydrate.tsx
-import React25, { useId, useState as useState3 } from "react";
-function NoHydrate({
-  getHTML,
-  ...rest
-}) {
-  let id = useId();
+import React25, { useState as useState3 } from "react";
+function NoHydrate({ id, getHTML, ...rest }) {
   let [html] = useState3(() => {
     if (typeof document === "undefined") {
       return getHTML?.() ?? "";
@@ -2069,7 +2065,7 @@ function formatCSS(css13) {
 }
 var permanentClasses = {};
 function generateItemClassName(instance, stitchesInstance) {
-  let { css: css13, type, className: cls = "" } = instance.data;
+  let { css: css13, type, className: cls = "", tailwindClasses } = instance.data;
   let className = "";
   let permanentClass = "";
   let perCss = instance.Element?.permanentCss;
@@ -2088,7 +2084,13 @@ function generateItemClassName(instance, stitchesInstance) {
     let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
     let { stitchesClass } = instance;
     let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = clsx5(permanentClass, cls, newStitchesClass, otherClass);
+    className = clsx5(
+      permanentClass,
+      cls,
+      tailwindClasses,
+      newStitchesClass,
+      otherClass
+    );
     instance.stitchesClass = newStitchesClass;
   }
   return className;
@@ -2485,7 +2487,7 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser as isBrowser2 } from "@weaverse/core";
-import React30, { useContext as useContext6, useEffect as useEffect5, useRef, useState as useState6 } from "react";
+import React30, { memo, useContext as useContext6, useEffect as useEffect5, useRef, useState as useState6 } from "react";
 
 // src/utils/uploadcare.ts
 import { isBrowser } from "@weaverse/core";
@@ -2518,7 +2520,7 @@ function initUploadCareAdaptiveDelivery(baseUrl) {
 }
 
 // src/renderer.tsx
-var WeaverseRoot = ({ context }) => {
+var WeaverseRoot = memo(({ context }) => {
   let [, setData] = useState6(context.data);
   let rootRef = useRef();
   let renderRoot = () => setData({});
@@ -2544,11 +2546,25 @@ var WeaverseRoot = ({ context }) => {
     );
   }
   return null;
-};
-var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext6(WeaverseContext);
+});
+var ItemComponent = memo(({ instance }) => {
+  let context = useContext6(WeaverseContext);
+  let { stitchesInstance, elementInstances } = context;
   let [data, setData] = useState6(instance.data);
-  let { id, type, childIds = [], css: css13, className, ...rest } = data;
+  let {
+    id,
+    type,
+    childIds = [],
+    children = [],
+    parentId,
+    createdAt,
+    updatedAt,
+    deletedAt,
+    tailwindClasses,
+    css: css13,
+    className,
+    ...rest
+  } = data;
   useEffect5(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
@@ -2574,22 +2590,24 @@ var ItemComponent = ({ instance }) => {
         className: generateItemClassName(instance, stitchesInstance),
         ...rest
       },
-      childIds.map((id2) => /* @__PURE__ */ React30.createElement(ItemInstance, { key: id2, id: id2 }))
+      childIds.map((cid) => /* @__PURE__ */ React30.createElement(ItemInstance, { key: cid, id: cid })),
+      children.map((item) => /* @__PURE__ */ React30.createElement(ItemInstance, { key: item.id, id: item.id }))
     );
   } else {
-    console.log(`Unknown element: ${type}`);
+    console.warn(`Unknown element: ${type}`);
     return null;
   }
-};
-var ItemInstance = ({ id }) => {
+});
+var ItemInstance = memo(({ id }) => {
   let context = useContext6(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
+    console.warn(`Item instance ${id} not found`);
     return /* @__PURE__ */ React30.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
   }
   return /* @__PURE__ */ React30.createElement(ItemComponent, { key: id, instance });
-};
+});
 export {
   Components,
   Elements,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.23",
+  "version": "1.0.25",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.3",
     "@stitches/react": "^1.2.8",
-    "@weaverse/core": "1.0.23",
+    "@weaverse/core": "1.0.25",
     "clsx": "^1.2.1",
     "keen-slider": "^6.8.5"
   }