@m3cms/react - npm Package Compare versions

Comparing version 0.1.2 to 1.0.0

./dist/index.js

@@ -58,2 +58,22 @@ "use strict";
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
@@ -69,3 +89,3 @@ // src/index.ts
   CmsGlobalProvider: () => CmsGlobalProvider,
-  CmsPageProvider: () => CmsPageProvider,
+  CmsPage: () => CmsPage,
   EditableArea: () => EditableArea_schema_default,
@@ -111,8 +131,5 @@ EditableAreaProd: () => EditableAreaProd,
 }
-function handleSendMessageLoadPage() {
+function handleSendMessageLoadPage(visibility) {
   (0, import_common.sendMessage)(import_common.AppEvent.LOAD_PAGE, {
-    metadata: [
-      { key: "global", value: "global" },
-      { key: "page", value: "home" }
-    ]
+    metadata: visibility
   });
@@ -159,3 +176,6 @@ }
       locale: void 0,
-      setLocale: (locale) => set({ locale }),
+      setLocale: (locale) => __async(void 0, null, function* () {
+        yield stupidWaitFinishHydration();
+        set({ locale });
+      }),
       contents: {},
@@ -172,4 +192,6 @@ setContents: (tag, contents) => set({
       }),
-      addComponent(cmsComponent) {
+      addComponent: (cmsComponent) => __async(void 0, null, function* () {
+        yield stupidWaitFinishHydration();
         set((state) => {
+          var _a;
           const hasComponent = state.components.find((component) => component.tag === cmsComponent.tag);
@@ -183,3 +205,3 @@ if (hasComponent)
             uiSchema: cmsComponent.uiSchema,
-            content: {},
+            content: (_a = cmsComponent.content) != null ? _a : {},
             path: cmsComponent.path || cmsComponent.tag
@@ -191,3 +213,3 @@ });
         });
-      }
+      })
     }),
@@ -197,4 +219,14 @@ { name: "useCmsContext", trace: true }
 );
+var hasHydrated = false;
+function stupidWaitFinishHydration() {
+  return __async(this, null, function* () {
+    if (hasHydrated)
+      return;
+    yield new Promise((resolve) => setTimeout(resolve, 200));
+    hasHydrated = true;
+  });
+}
 
 // src/components/cmsComponent.tsx
+var import_shallow = require("zustand/shallow");
 var import_usehooks_ts = require("usehooks-ts");
@@ -217,3 +249,3 @@ var import_react2 = __toESM(require("react"));
     removeComponent: state.removeComponent
-  }));
+  }), import_shallow.shallow);
   if (isHover)
@@ -228,3 +260,3 @@ handleSendMessageHover(tag);
       tag,
-      content: cmsContent,
+      content,
       defaultContent: defaultContent2,
@@ -237,3 +269,3 @@ path,
     };
-  }, [addComponent]);
+  }, [addComponent, schema2, tag, uiSchema2, path, defaultContent2]);
   const isSelected = selectedElement === tag;
@@ -373,11 +405,24 @@ let props = {};
 
-// src/components/CmsPageProvider.tsx
+// src/components/CmsPage.tsx
 var import_usehooks_ts2 = require("usehooks-ts");
-var import_react4 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_common3 = require("@m3cms/common");
-function CmsPageProvider({ children }) {
+
+// src/hooks/ssrStore.ts
+var import_zustand2 = require("zustand");
+var useSsrStore = (0, import_zustand2.createStore)((set) => ({
+  isCmsPage: false,
+  cmsData: {}
+}));
+
+// src/components/CmsPage.tsx
+function CmsPage({
+  visibilities = [import_common3.GLOBAL_VISIBILITY],
+  isCmsPage,
+  cmsData
+}) {
+  useSsrStore.setState({ isCmsPage, cmsData });
   const { setTrue: setWidgetsAreLoaded, value: widgetsAlreadyLoaded } = (0, import_usehooks_ts2.useBoolean)(false);
   const { handleMessage, handleLoadPageWidgetsHandler } = useOuvirMensageira();
   const locale = useCmsContext((state) => state.locale);
-  const sendMessage3 = useCmsContext((state) => state.setLocale);
   const components = useCmsContext((state) => state.components);
@@ -393,3 +438,3 @@ (0, import_usehooks_ts2.useEventListener)("message", handleMessage);
     handleLoadPageWidgetsHandler();
-    handleSendMessageLoadPage();
+    handleSendMessageLoadPage(visibilities);
     setWidgetsAreLoaded();
@@ -399,7 +444,7 @@ return () => {
   }, [components]);
-  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, children);
+  return null;
   function requestLocale() {
-    if (locale === void 0) {
-      sendMessage3(import_common3.AppEvent.REQUEST_LOCALE);
-    }
+    if (locale !== void 0)
+      return;
+    (0, import_common3.sendMessage)(import_common3.AppEvent.REQUEST_LOCALE);
   }
@@ -417,4 +462,4 @@ }
 // src/hooks/useProject.ts
-var import_zustand2 = require("zustand");
-var useProject = (0, import_zustand2.create)((set) => ({
+var import_zustand3 = require("zustand");
+var useProject = (0, import_zustand3.create)((set) => ({
   language: void 0,
@@ -461,4 +506,8 @@ projectName: void 0,
 function CmsComponentSwitch(_a) {
-  var _b = _a, { editableArea, isCmsPage } = _b, props = __objRest(_b, ["editableArea", "isCmsPage"]);
-  return isCmsPage ? /* @__PURE__ */ import_react8.default.createElement(CmsComponent, __spreadValues({}, props)) : editableArea ? /* @__PURE__ */ import_react8.default.createElement(
+  var _b = _a, { editableArea, isCmsPage, content } = _b, props = __objRest(_b, ["editableArea", "isCmsPage", "content"]);
+  var _a2, _b2, _c;
+  const tag = props.tag;
+  const isCmsPageContext = useSsrStore.getState().isCmsPage;
+  const contentContext = (_b2 = (_a2 = useSsrStore.getState().cmsData) == null ? void 0 : _a2[tag]) != null ? _b2 : {};
+  return isCmsPage || isCmsPageContext ? /* @__PURE__ */ import_react8.default.createElement(CmsComponent, __spreadProps(__spreadValues({}, props), { content: content != null ? content : contentContext })) : editableArea ? /* @__PURE__ */ import_react8.default.createElement(
     EditableAreaProd,
@@ -468,5 +517,5 @@ {
       children: editableArea.children,
-      data: editableArea.data
+      data: (_c = useSsrStore.getState().cmsData) != null ? _c : editableArea.data
     }
-  ) : /* @__PURE__ */ import_react8.default.createElement(CmsComponentProd, __spreadValues({}, props));
+  ) : /* @__PURE__ */ import_react8.default.createElement(CmsComponentProd, __spreadProps(__spreadValues({}, props), { content: content != null ? content : contentContext }));
 }
@@ -532,3 +581,3 @@
   const [components, setComponents] = (0, import_react10.useState)([]);
-  const tags = components.filter((a) => a.tag !== void 0).map((a) => a.tag);
+  const tags = components.filter((_) => _.tag !== void 0).map((_) => _.tag);
   const { data } = (0, import_api.useCmsData)(tags, apiConfig);
@@ -561,30 +610,22 @@ const draggingData = useCmsContext((a) => a.draggingData);
   let index = 0;
-  return /* @__PURE__ */ import_react10.default.createElement(
-    "div",
-    {
-      className: "c"
-    },
-    /* @__PURE__ */ import_react10.default.createElement(Separator, { index: getAndUpdateIndex(), handleIndex: handleAddSlide, isDragging }),
-    components.map(({ component, tag }, i) => {
-      if (!tag)
-        return null;
-      return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
-        CmsComponent,
-        {
-          key: tag,
-          component,
-          tag,
-          content: data == null ? void 0 : data[tag]
-        }
-      ), isComponentBeforeLast(i) && /* @__PURE__ */ import_react10.default.createElement(
-        Separator,
-        {
-          index: getAndUpdateIndex(),
-          handleIndex: handleAddSlide,
-          isDragging
-        }
-      ));
-    }),
-    /* @__PURE__ */ import_react10.default.createElement(Separator, { index: getAndUpdateIndex(), handleIndex: handleAddSlide, isDragging })
-  );
+  return /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement(Separator, { index: getAndUpdateIndex(), handleIndex: handleAddSlide, isDragging }), components.map(({ component, tag }, i) => {
+    if (!tag)
+      return null;
+    return /* @__PURE__ */ import_react10.default.createElement(import_react10.Fragment, { key: tag }, /* @__PURE__ */ import_react10.default.createElement(
+      CmsComponent,
+      {
+        key: tag,
+        component,
+        tag,
+        content: data == null ? void 0 : data[tag]
+      }
+    ), isComponentBeforeLast(i) && /* @__PURE__ */ import_react10.default.createElement(
+      Separator,
+      {
+        index: getAndUpdateIndex(),
+        handleIndex: handleAddSlide,
+        isDragging
+      }
+    ));
+  }), /* @__PURE__ */ import_react10.default.createElement(Separator, { index: getAndUpdateIndex(), handleIndex: handleAddSlide, isDragging }));
   function getAndUpdateIndex() {
@@ -679,3 +720,3 @@ return index++;
   CmsGlobalProvider,
-  CmsPageProvider,
+  CmsPage,
   EditableArea,
@@ -682,0 +723,0 @@ EditableAreaProd,

dist/index.d.ts

@@ -0,13 +1,24 @@
+import React, { FunctionComponent, PropsWithChildren, RefObject } from 'react';
 import { JSONSchema7 } from 'json-schema';
-import React, { FunctionComponent, PropsWithChildren, RefObject } from 'react';
 import * as _m3cms_common from '@m3cms/common';
-import { UiSchema, LoadSliceWidgetsData, LoadObject, Locale, TapElementData } from '@m3cms/common';
+import { UiSchema, LoadSliceWidgetsData, VisibilitiesFunc, LoadObject, Locale, TapElementData, Visibility } from '@m3cms/common';
 import * as zustand from 'zustand';
 import { M3CmsConfig as M3CmsConfig$1 } from '@m3cms/api';
 
+type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+
+type RecursiveUiSchema<Value, Props> = {
+    [K in keyof Props]?: Value | {
+        items: RecursiveUiSchema<Value, Props[K]> | Value;
+    };
+};
 /**
  * Extends the React Functional Component to add the CMS properties.
  * This properties are used to transform a component in a componente integrated with the CMS of M3.
+ *
+ * @see [Our official documentation](https://m3-cms-t2ztf.ondigitalocean.app/docs/introduction/schema_file)
  */
-interface CmsFunctionalComponent<TProps = {}> extends FunctionComponent<TProps> {
+interface CmsFunctionalComponent<TProps = {}, Id extends string = string> extends FunctionComponent<TProps> {
     /**
@@ -20,2 +31,4 @@ * @required
      *
+     * @see [Our official documentation](https://m3-cms-t2ztf.ondigitalocean.app/docs/introduction/schema_file#schema-file)
+     *
      * @example
@@ -45,2 +58,4 @@ * ```ts
     *
+    * @see [Our official documentation](https://m3-cms-t2ztf.ondigitalocean.app/docs/introduction/schema_file#defaultcontent)
+    *
     * @exemple
@@ -58,2 +73,3 @@ * ```ts
      * @see [uiSchemas available](https://todo.com.br)
+     * @see [Our official documentation](https://m3-cms-t2ztf.ondigitalocean.app/docs/introduction/schema_file#uischema)]
      *
@@ -68,3 +84,3 @@ * @example
      */
-    uiSchema?: Partial<Record<keyof TProps, UiSchema>>;
+    uiSchema?: RecursiveUiSchema<UiSchema, TProps>;
     /**
@@ -87,3 +103,4 @@ * The path of the component. It is used to generate the path of the component in the CMS
      *
-     * @see![exemple of slice Components](https://i.imgur.com/Sbl5TUHm.png)
+     * @see ![exemple of slice Components](https://i.imgur.com/Sbl5TUHm.png)
+     * @see [Our official documentation](https://m3-cms-t2ztf.ondigitalocean.app/docs/introduction/schema_file#slicewidget)
      *
@@ -107,2 +124,4 @@ * @exemple
      *
+     * @see [Our official documentation](https://m3-cms-t2ztf.ondigitalocean.app/docs/introduction/schema_file#id)
+     *
      * @example
@@ -112,3 +131,3 @@ * Component.id = "Hero"
      */
-    id?: string;
+    id?: Id;
     /**
@@ -138,2 +157,4 @@ * @deprecated
 };
+interface CmsFunctionalComponentStrict<TProps = {}, Id extends string = string> extends WithRequired<CmsFunctionalComponent<TProps, Id>, "id" | "schema"> {
+}
 
@@ -161,3 +182,3 @@ type CmsComponentProps = {
 };
-declare function CmsComponent$1({ tag, component: Component, content, nonMutableProps }: CmsComponentProps): JSX.Element;
+declare function CmsComponent$1({ tag, component: Component, content, nonMutableProps }: CmsComponentProps): React.JSX.Element;
 
@@ -168,8 +189,15 @@ type CmsComponentsProps = {
 };
-declare function CmsComponents({ components, data }: CmsComponentsProps): (JSX.Element | null)[];
+declare function CmsComponents({ components, data }: CmsComponentsProps): (React.JSX.Element | null)[];
 
-declare function CmsPageProvider({ children }: PropsWithChildren): JSX.Element;
+interface CmsPageProps extends VisibilitiesFunc {
+    isCmsPage: boolean;
+    cmsData: Record<string, Record<string, unknown>>;
+}
+/**
+ * This component is responsible for sending messages to the CMS when the page is loaded.
+ */
+declare function CmsPage({ visibilities, isCmsPage, cmsData, }: CmsPageProps): null;
 
 declare const CmsGlobalContext: React.Context<{}>;
-declare function CmsGlobalProvider({ children }: PropsWithChildren): JSX.Element;
+declare function CmsGlobalProvider({ children }: PropsWithChildren): React.JSX.Element;
 
@@ -186,3 +214,3 @@ interface CmsComponent {
     components: CmsComponent[];
-    addComponent: (cmsComponent: CmsComponent) => void;
+    addComponent: (cmsComponent: CmsComponent) => Promise<void>;
     removeComponent: (tag: string) => void;
@@ -192,3 +220,3 @@ selectedElement: string | undefined;
     locale: string | undefined;
-    setLocale: (locale: string | undefined) => void;
+    setLocale: (locale: string | undefined) => Promise<void>;
     contents: Record<string, unknown>;
@@ -246,3 +274,3 @@ setContents: (tag: string, contents: Record<string, unknown>) => void;
 };
-declare function EditableAreaProd({ children, data, allCmsComponents }: EditableAreaProdProps): JSX.Element;
+declare function EditableAreaProd({ children, data, allCmsComponents }: EditableAreaProdProps): React.JSX.Element;
 
@@ -258,7 +286,7 @@ type CmsComponentSwitch = CmsComponentProps & {
      **/
-    isCmsPage: boolean;
+    isCmsPage?: boolean;
 };
-declare function CmsComponentSwitch({ editableArea, isCmsPage, ...props }: CmsComponentSwitch): JSX.Element;
+declare function CmsComponentSwitch({ editableArea, isCmsPage, content, ...props }: CmsComponentSwitch): React.JSX.Element;
 
-declare function CmsComponentProd({ component: Component, content, nonMutableProps }: CmsComponentProps): JSX.Element;
+declare function CmsComponentProd({ component: Component, content, nonMutableProps }: CmsComponentProps): React.JSX.Element;
 
@@ -283,3 +311,3 @@ type M3CmsConfig<TSchema extends {
 declare function handleSliceWidgets(data: LoadSliceWidgetsData): void;
-declare function handleSendMessageLoadPage(): void;
+declare function handleSendMessageLoadPage(visibility: Visibility[]): void;
 declare function handleSendMessageLoadElement<TSchema extends {
@@ -289,2 +317,2 @@ properties: unknown;
 
-export { CmsComponent$1 as CmsComponent, CmsComponentData, CmsComponentProd, CmsComponentProps, CmsComponentSwitch, CmsComponents, CmsComponentsProps, CmsFunctionalComponent, CmsGlobalContext, CmsGlobalProvider, CmsPageProvider, CmsState, EditableArea, EditableAreaProd, EditableAreaProdProps, EditableAreaProps, M3CmsConfig, ProjectStoreProps, getSliceWidgetData, handleAddSlide, handleSendMessageHover, handleSendMessageLoadElement, handleSendMessageLoadPage, handleSendMessageMouseMove, handleSendMessageRemove, handleSendMessageTap, handleSliceWidgets, useCmsContext, useOuvirMensageira, useProject };
+export { CmsComponent$1 as CmsComponent, CmsComponentData, CmsComponentProd, CmsComponentProps, CmsComponentSwitch, CmsComponents, CmsComponentsProps, CmsFunctionalComponent, CmsFunctionalComponentStrict, CmsGlobalContext, CmsGlobalProvider, CmsPage, CmsState, EditableArea, EditableAreaProd, EditableAreaProdProps, EditableAreaProps, M3CmsConfig, ProjectStoreProps, getSliceWidgetData, handleAddSlide, handleSendMessageHover, handleSendMessageLoadElement, handleSendMessageLoadPage, handleSendMessageMouseMove, handleSendMessageRemove, handleSendMessageTap, handleSliceWidgets, useCmsContext, useOuvirMensageira, useProject };

dist/index.js

@@ -58,2 +58,22 @@ "use strict";
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
@@ -69,3 +89,3 @@ // src/index.ts
   CmsGlobalProvider: () => CmsGlobalProvider,
-  CmsPageProvider: () => CmsPageProvider,
+  CmsPage: () => CmsPage,
   EditableArea: () => EditableArea_schema_default,
@@ -111,8 +131,5 @@ EditableAreaProd: () => EditableAreaProd,
 }
-function handleSendMessageLoadPage() {
+function handleSendMessageLoadPage(visibility) {
   (0, import_common.sendMessage)(import_common.AppEvent.LOAD_PAGE, {
-    metadata: [
-      { key: "global", value: "global" },
-      { key: "page", value: "home" }
-    ]
+    metadata: visibility
   });
@@ -159,3 +176,6 @@ }
       locale: void 0,
-      setLocale: (locale) => set({ locale }),
+      setLocale: (locale) => __async(void 0, null, function* () {
+        yield stupidWaitFinishHydration();
+        set({ locale });
+      }),
       contents: {},
@@ -172,4 +192,6 @@ setContents: (tag, contents) => set({
       }),
-      addComponent(cmsComponent) {
+      addComponent: (cmsComponent) => __async(void 0, null, function* () {
+        yield stupidWaitFinishHydration();
         set((state) => {
+          var _a;
           const hasComponent = state.components.find((component) => component.tag === cmsComponent.tag);
@@ -183,3 +205,3 @@ if (hasComponent)
             uiSchema: cmsComponent.uiSchema,
-            content: {},
+            content: (_a = cmsComponent.content) != null ? _a : {},
             path: cmsComponent.path || cmsComponent.tag
@@ -191,3 +213,3 @@ });
         });
-      }
+      })
     }),
@@ -197,4 +219,14 @@ { name: "useCmsContext", trace: true }
 );
+var hasHydrated = false;
+function stupidWaitFinishHydration() {
+  return __async(this, null, function* () {
+    if (hasHydrated)
+      return;
+    yield new Promise((resolve) => setTimeout(resolve, 200));
+    hasHydrated = true;
+  });
+}
 
 // src/components/cmsComponent.tsx
+var import_shallow = require("zustand/shallow");
 var import_usehooks_ts = require("usehooks-ts");
@@ -217,3 +249,3 @@ var import_react2 = __toESM(require("react"));
     removeComponent: state.removeComponent
-  }));
+  }), import_shallow.shallow);
   if (isHover)
@@ -228,3 +260,3 @@ handleSendMessageHover(tag);
       tag,
-      content: cmsContent,
+      content,
       defaultContent: defaultContent2,
@@ -237,3 +269,3 @@ path,
     };
-  }, [addComponent]);
+  }, [addComponent, schema2, tag, uiSchema2, path, defaultContent2]);
   const isSelected = selectedElement === tag;
@@ -373,11 +405,24 @@ let props = {};
 
-// src/components/CmsPageProvider.tsx
+// src/components/CmsPage.tsx
 var import_usehooks_ts2 = require("usehooks-ts");
-var import_react4 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_common3 = require("@m3cms/common");
-function CmsPageProvider({ children }) {
+
+// src/hooks/ssrStore.ts
+var import_zustand2 = require("zustand");
+var useSsrStore = (0, import_zustand2.createStore)((set) => ({
+  isCmsPage: false,
+  cmsData: {}
+}));
+
+// src/components/CmsPage.tsx
+function CmsPage({
+  visibilities = [import_common3.GLOBAL_VISIBILITY],
+  isCmsPage,
+  cmsData
+}) {
+  useSsrStore.setState({ isCmsPage, cmsData });
   const { setTrue: setWidgetsAreLoaded, value: widgetsAlreadyLoaded } = (0, import_usehooks_ts2.useBoolean)(false);
   const { handleMessage, handleLoadPageWidgetsHandler } = useOuvirMensageira();
   const locale = useCmsContext((state) => state.locale);
-  const sendMessage3 = useCmsContext((state) => state.setLocale);
   const components = useCmsContext((state) => state.components);
@@ -393,3 +438,3 @@ (0, import_usehooks_ts2.useEventListener)("message", handleMessage);
     handleLoadPageWidgetsHandler();
-    handleSendMessageLoadPage();
+    handleSendMessageLoadPage(visibilities);
     setWidgetsAreLoaded();
@@ -399,7 +444,7 @@ return () => {
   }, [components]);
-  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, children);
+  return null;
   function requestLocale() {
-    if (locale === void 0) {
-      sendMessage3(import_common3.AppEvent.REQUEST_LOCALE);
-    }
+    if (locale !== void 0)
+      return;
+    (0, import_common3.sendMessage)(import_common3.AppEvent.REQUEST_LOCALE);
   }
@@ -417,4 +462,4 @@ }
 // src/hooks/useProject.ts
-var import_zustand2 = require("zustand");
-var useProject = (0, import_zustand2.create)((set) => ({
+var import_zustand3 = require("zustand");
+var useProject = (0, import_zustand3.create)((set) => ({
   language: void 0,
@@ -461,4 +506,8 @@ projectName: void 0,
 function CmsComponentSwitch(_a) {
-  var _b = _a, { editableArea, isCmsPage } = _b, props = __objRest(_b, ["editableArea", "isCmsPage"]);
-  return isCmsPage ? /* @__PURE__ */ import_react8.default.createElement(CmsComponent, __spreadValues({}, props)) : editableArea ? /* @__PURE__ */ import_react8.default.createElement(
+  var _b = _a, { editableArea, isCmsPage, content } = _b, props = __objRest(_b, ["editableArea", "isCmsPage", "content"]);
+  var _a2, _b2, _c;
+  const tag = props.tag;
+  const isCmsPageContext = useSsrStore.getState().isCmsPage;
+  const contentContext = (_b2 = (_a2 = useSsrStore.getState().cmsData) == null ? void 0 : _a2[tag]) != null ? _b2 : {};
+  return isCmsPage || isCmsPageContext ? /* @__PURE__ */ import_react8.default.createElement(CmsComponent, __spreadProps(__spreadValues({}, props), { content: content != null ? content : contentContext })) : editableArea ? /* @__PURE__ */ import_react8.default.createElement(
     EditableAreaProd,
@@ -468,5 +517,5 @@ {
       children: editableArea.children,
-      data: editableArea.data
+      data: (_c = useSsrStore.getState().cmsData) != null ? _c : editableArea.data
     }
-  ) : /* @__PURE__ */ import_react8.default.createElement(CmsComponentProd, __spreadValues({}, props));
+  ) : /* @__PURE__ */ import_react8.default.createElement(CmsComponentProd, __spreadProps(__spreadValues({}, props), { content: content != null ? content : contentContext }));
 }
@@ -532,3 +581,3 @@
   const [components, setComponents] = (0, import_react10.useState)([]);
-  const tags = components.filter((a) => a.tag !== void 0).map((a) => a.tag);
+  const tags = components.filter((_) => _.tag !== void 0).map((_) => _.tag);
   const { data } = (0, import_api.useCmsData)(tags, apiConfig);
@@ -561,30 +610,22 @@ const draggingData = useCmsContext((a) => a.draggingData);
   let index = 0;
-  return /* @__PURE__ */ import_react10.default.createElement(
-    "div",
-    {
-      className: "c"
-    },
-    /* @__PURE__ */ import_react10.default.createElement(Separator, { index: getAndUpdateIndex(), handleIndex: handleAddSlide, isDragging }),
-    components.map(({ component, tag }, i) => {
-      if (!tag)
-        return null;
-      return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
-        CmsComponent,
-        {
-          key: tag,
-          component,
-          tag,
-          content: data == null ? void 0 : data[tag]
-        }
-      ), isComponentBeforeLast(i) && /* @__PURE__ */ import_react10.default.createElement(
-        Separator,
-        {
-          index: getAndUpdateIndex(),
-          handleIndex: handleAddSlide,
-          isDragging
-        }
-      ));
-    }),
-    /* @__PURE__ */ import_react10.default.createElement(Separator, { index: getAndUpdateIndex(), handleIndex: handleAddSlide, isDragging })
-  );
+  return /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement(Separator, { index: getAndUpdateIndex(), handleIndex: handleAddSlide, isDragging }), components.map(({ component, tag }, i) => {
+    if (!tag)
+      return null;
+    return /* @__PURE__ */ import_react10.default.createElement(import_react10.Fragment, { key: tag }, /* @__PURE__ */ import_react10.default.createElement(
+      CmsComponent,
+      {
+        key: tag,
+        component,
+        tag,
+        content: data == null ? void 0 : data[tag]
+      }
+    ), isComponentBeforeLast(i) && /* @__PURE__ */ import_react10.default.createElement(
+      Separator,
+      {
+        index: getAndUpdateIndex(),
+        handleIndex: handleAddSlide,
+        isDragging
+      }
+    ));
+  }), /* @__PURE__ */ import_react10.default.createElement(Separator, { index: getAndUpdateIndex(), handleIndex: handleAddSlide, isDragging }));
   function getAndUpdateIndex() {
@@ -679,3 +720,3 @@ return index++;
   CmsGlobalProvider,
-  CmsPageProvider,
+  CmsPage,
   EditableArea,
@@ -682,0 +723,0 @@ EditableAreaProd,

package.json

 {
   "name": "@m3cms/react",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "main": "./dist/index.js",
@@ -17,3 +17,3 @@ "module": "./dist/index.mjs",
     "@m3cms/common": "0.1.0",
-    "@m3cms/api": "0.1.0"
+    "@m3cms/api": "0.2.0"
   },
@@ -41,2 +41,7 @@ "devDependencies": {
   },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "publishConfig": {
@@ -43,0 +48,0 @@ "access": "public"

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96193

increased by8.94%

Lines of code

2374

increased by6.46%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• + Added@m3cms/api@0.2.0(transitive)

• - Removed@m3cms/api@0.1.0(transitive)

• Updated@m3cms/api@0.2.0