@sitecore-feaas/clientside 0.1.2 → 0.1.3

package/dist/node/index.cjs

@@ -1252,13 +1252,13 @@ var FEAASBase = class extends HTMLElement {
     console.log("FEAAS: React", this.tagName, this.payload);
     if (this.payload == null)
       return;
-    const { React, ReactDOM } = this.payload || {};
-    if (!React)
+    const { React: React2, ReactDOM } = this.payload || {};
+    if (!React2)
       throw new Error(`${this.tagName}: React is not present in payload`);
     if (!ReactDOM)
       throw new Error(`${this.tagName}: ReactDOM is not present in payload`);
     if (!this.refs.topReact && !this.forceUpdateReact) {
-      ReactDOM.render(React.createElement(this.getReactWrapper()), this.getReactRoot());
+      ReactDOM.render(React2.createElement(this.getReactWrapper()), this.getReactRoot());
     } else if (this.forceUpdateReact) {
       (_a = this.forceUpdateReact) == null ? void 0 : _a.call(this);
     } else {
@@ -1266,11 +1266,11 @@ var FEAASBase = class extends HTMLElement {
     }
   }
   invokeReactRendering() {
-    const { React, ReactDOM } = this.payload || {};
+    const { React: React2, ReactDOM } = this.payload || {};
     const children = this.descendants.filter((r) => {
       return r.refs.parentReact == this && r.payload;
     }).map((child, index) => {
-      return React.createElement(this.getReactWrapper(child), {
+      return React2.createElement(this.getReactWrapper(child), {
         key: this.tagName + "-" + index,
         slot: child.getAttribute("slot")
       });
@@ -1280,13 +1280,10 @@ var FEAASBase = class extends HTMLElement {
   getReactWrapper(target = this, displayName = target.tagName) {
     const Wrapper = target.reactWrapper || (target.reactWrapper = (props) => {
       if (target.renderReact) {
-        const { React, ReactDOM } = target.payload || {};
-        const [value, forceUpdateReact] = React.useReducer((r) => r + 1, 0);
+        const { React: React2, ReactDOM } = target.payload || {};
+        const [value, forceUpdateReact] = React2.useReducer((r) => r + 1, 0);
         target.forceUpdateReact = forceUpdateReact;
-        return ReactDOM.createPortal(
-          React.createElement(React.Fragment, null, target.invokeReactRendering()),
-          target.getReactRoot()
-        );
+        return ReactDOM.createPortal(/* @__PURE__ */ React2.createElement(React2.Fragment, null, target.invokeReactRendering()), target.getReactRoot());
       } else {
         return target.render();
       }
@@ -1691,32 +1688,95 @@ var FEAASEditor = class extends FEAASBase {
     }, [observedVersions]);
     if (!component)
       return;
-    return useSlots(children, ({ picker, children: children2 }) => <Box ref={(el) => this.wrapper = el}><Box className="editor-wrapper" position="absolute" left={0} top={0}><Editor sdk={sdk} library={sdk.library} component={component} versions={versions} context={{
-      onChromeMeasure: this.onMeasure,
-      onChromeBeforeMeasure: this.onBeforeMeasure,
-      onChromeMeasureElement: this.onChromeMeasureElement,
-      onChromePosition: this.onPosition
-    }}>{({ editor, status, isArchivedDisplayed }) => ({
+    return useSlots(children, ({ picker, children: children2 }) => /* @__PURE__ */ React.createElement(Box, {
+      ref: (el) => this.wrapper = el
+    }, /* @__PURE__ */ React.createElement(Box, {
+      className: "editor-wrapper",
+      position: "absolute",
+      left: 0,
+      top: 0
+    }, /* @__PURE__ */ React.createElement(Editor, {
+      sdk,
+      library: sdk.library,
+      component,
+      versions,
+      context: {
+        onChromeMeasure: this.onMeasure,
+        onChromeBeforeMeasure: this.onBeforeMeasure,
+        onChromeMeasureElement: this.onChromeMeasureElement,
+        onChromePosition: this.onPosition
+      }
+    }, ({ editor, status, isArchivedDisplayed }) => ({
       after: children2,
       picker,
-      chrome: editor && <Chrome />,
+      chrome: editor && /* @__PURE__ */ React.createElement(Chrome, null),
       children: component.reduceVersionRevisions(versions).filter((snapshot) => {
         var _a;
         return isArchivedDisplayed || !((_a = snapshot.saved || snapshot.draft) == null ? void 0 : _a.deletedAt);
-      }).map((snapshot, index) => <Box key={snapshot.head.id} position="absolute" left={0} top={0} className="editor-chrome" p={4} boxShadow="2xl" pointerEvents="none">
-        <Box className="borders" pointerEvents="none" left={0} width="4" top={0} bottom={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
-        <Box className="borders" pointerEvents="none" right={0} width="4" top={0} bottom={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
-        <Box className="borders" pointerEvents="none" top={0} height="16" left={0} right={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
-        <Box className="borders" pointerEvents="none" bottom={0} height="4" left={0} right={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
-        <Version version={snapshot.head} node={target}>{{
-          left: <HStack justifyContent="space-between">
-            <EditorUIUndo size="sm" editor={status == "ready" ? editor : null} />
-            <EditorUIMode size="sm" />
-          </HStack>,
-          middle: <VersionStatusList />
-        }}</Version>
-      </Box>)
-    })}</Editor></Box></Box>);
+      }).map((snapshot, index) => /* @__PURE__ */ React.createElement(Box, {
+        key: snapshot.head.id,
+        position: "absolute",
+        left: 0,
+        top: 0,
+        className: "editor-chrome",
+        p: 4,
+        boxShadow: "2xl",
+        pointerEvents: "none"
+      }, /* @__PURE__ */ React.createElement(Box, {
+        className: "borders",
+        pointerEvents: "none",
+        left: 0,
+        width: "4",
+        top: 0,
+        bottom: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgb(244 244 244 / 80%)",
+        position: "absolute"
+      }), /* @__PURE__ */ React.createElement(Box, {
+        className: "borders",
+        pointerEvents: "none",
+        right: 0,
+        width: "4",
+        top: 0,
+        bottom: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgb(244 244 244 / 80%)",
+        position: "absolute"
+      }), /* @__PURE__ */ React.createElement(Box, {
+        className: "borders",
+        pointerEvents: "none",
+        top: 0,
+        height: "16",
+        left: 0,
+        right: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgb(244 244 244 / 80%)",
+        position: "absolute"
+      }), /* @__PURE__ */ React.createElement(Box, {
+        className: "borders",
+        pointerEvents: "none",
+        bottom: 0,
+        height: "4",
+        left: 0,
+        right: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgb(244 244 244 / 80%)",
+        position: "absolute"
+      }), /* @__PURE__ */ React.createElement(Version, {
+        version: snapshot.head,
+        node: target
+      }, {
+        left: /* @__PURE__ */ React.createElement(HStack, {
+          justifyContent: "space-between"
+        }, /* @__PURE__ */ React.createElement(EditorUIUndo, {
+          size: "sm",
+          editor: status == "ready" ? editor : null
+        }), /* @__PURE__ */ React.createElement(EditorUIMode, {
+          size: "sm"
+        })),
+        middle: /* @__PURE__ */ React.createElement(VersionStatusList, null)
+      })))
+    })))));
   }
   isReadyToLoad() {
     return this.props.component != null && this.props.version != null;
@@ -1745,8 +1805,12 @@ var FEAASPicker = class extends FEAASBase {
   load() {
     return import(this.formatURL(this.props.src, this.props.frontend));
   }
-  renderReact({ context, mode, children }, { Picker, React, ReactDOM }) {
-    return <Picker mode={mode || void 0} onClose={this.props.onClose} context={context}>{children}</Picker>;
+  renderReact({ context, mode, children }, { Picker, React: React2, ReactDOM }) {
+    return /* @__PURE__ */ React2.createElement(Picker, {
+      mode: mode || void 0,
+      onClose: this.props.onClose,
+      context
+    }, children);
   }
 };
 FEAASPicker.register("feaas-picker");
@@ -1845,19 +1909,25 @@ var FEAASContext = class extends FEAASBase {
         containerRef: { current: this.getRoot() }
       }
     };
-    return <AppContext libraryId={this.props.library} container={this.getRoot()} getTheme={this.getTheme} modalProps={{
-      portalProps: {
-        containerRef: { current: this.getRoot() }
-      }
-    }} chakraProps={{
-      cssVarsRoot: ":host",
-      resetCSS: true,
-      toastOptions: {
+    return /* @__PURE__ */ React.createElement(AppContext, {
+      libraryId: this.props.library,
+      container: this.getRoot(),
+      getTheme: this.getTheme,
+      modalProps: {
         portalProps: {
           containerRef: { current: this.getRoot() }
         }
+      },
+      chakraProps: {
+        cssVarsRoot: ":host",
+        resetCSS: true,
+        toastOptions: {
+          portalProps: {
+            containerRef: { current: this.getRoot() }
+          }
+        }
       }
-    }}>{children}</AppContext>;
+    }, children);
   }
 };
 FEAASContext.observedAttributes = ["library", "component", "version", "revision", "hostname", "template"];

package/dist/node/index.js

@@ -1201,13 +1201,13 @@ var FEAASBase = class extends HTMLElement {
     console.log("FEAAS: React", this.tagName, this.payload);
     if (this.payload == null)
       return;
-    const { React, ReactDOM } = this.payload || {};
-    if (!React)
+    const { React: React2, ReactDOM } = this.payload || {};
+    if (!React2)
       throw new Error(`${this.tagName}: React is not present in payload`);
     if (!ReactDOM)
       throw new Error(`${this.tagName}: ReactDOM is not present in payload`);
     if (!this.refs.topReact && !this.forceUpdateReact) {
-      ReactDOM.render(React.createElement(this.getReactWrapper()), this.getReactRoot());
+      ReactDOM.render(React2.createElement(this.getReactWrapper()), this.getReactRoot());
     } else if (this.forceUpdateReact) {
       (_a = this.forceUpdateReact) == null ? void 0 : _a.call(this);
     } else {
@@ -1215,11 +1215,11 @@ var FEAASBase = class extends HTMLElement {
     }
   }
   invokeReactRendering() {
-    const { React, ReactDOM } = this.payload || {};
+    const { React: React2, ReactDOM } = this.payload || {};
     const children = this.descendants.filter((r) => {
       return r.refs.parentReact == this && r.payload;
     }).map((child, index) => {
-      return React.createElement(this.getReactWrapper(child), {
+      return React2.createElement(this.getReactWrapper(child), {
         key: this.tagName + "-" + index,
         slot: child.getAttribute("slot")
       });
@@ -1229,13 +1229,10 @@ var FEAASBase = class extends HTMLElement {
   getReactWrapper(target = this, displayName = target.tagName) {
     const Wrapper = target.reactWrapper || (target.reactWrapper = (props) => {
       if (target.renderReact) {
-        const { React, ReactDOM } = target.payload || {};
-        const [value, forceUpdateReact] = React.useReducer((r) => r + 1, 0);
+        const { React: React2, ReactDOM } = target.payload || {};
+        const [value, forceUpdateReact] = React2.useReducer((r) => r + 1, 0);
         target.forceUpdateReact = forceUpdateReact;
-        return ReactDOM.createPortal(
-          React.createElement(React.Fragment, null, target.invokeReactRendering()),
-          target.getReactRoot()
-        );
+        return ReactDOM.createPortal(/* @__PURE__ */ React2.createElement(React2.Fragment, null, target.invokeReactRendering()), target.getReactRoot());
       } else {
         return target.render();
       }
@@ -1640,32 +1637,95 @@ var FEAASEditor = class extends FEAASBase {
     }, [observedVersions]);
     if (!component)
       return;
-    return useSlots(children, ({ picker, children: children2 }) => <Box ref={(el) => this.wrapper = el}><Box className="editor-wrapper" position="absolute" left={0} top={0}><Editor sdk={sdk} library={sdk.library} component={component} versions={versions} context={{
-      onChromeMeasure: this.onMeasure,
-      onChromeBeforeMeasure: this.onBeforeMeasure,
-      onChromeMeasureElement: this.onChromeMeasureElement,
-      onChromePosition: this.onPosition
-    }}>{({ editor, status, isArchivedDisplayed }) => ({
+    return useSlots(children, ({ picker, children: children2 }) => /* @__PURE__ */ React.createElement(Box, {
+      ref: (el) => this.wrapper = el
+    }, /* @__PURE__ */ React.createElement(Box, {
+      className: "editor-wrapper",
+      position: "absolute",
+      left: 0,
+      top: 0
+    }, /* @__PURE__ */ React.createElement(Editor, {
+      sdk,
+      library: sdk.library,
+      component,
+      versions,
+      context: {
+        onChromeMeasure: this.onMeasure,
+        onChromeBeforeMeasure: this.onBeforeMeasure,
+        onChromeMeasureElement: this.onChromeMeasureElement,
+        onChromePosition: this.onPosition
+      }
+    }, ({ editor, status, isArchivedDisplayed }) => ({
       after: children2,
       picker,
-      chrome: editor && <Chrome />,
+      chrome: editor && /* @__PURE__ */ React.createElement(Chrome, null),
       children: component.reduceVersionRevisions(versions).filter((snapshot) => {
         var _a;
         return isArchivedDisplayed || !((_a = snapshot.saved || snapshot.draft) == null ? void 0 : _a.deletedAt);
-      }).map((snapshot, index) => <Box key={snapshot.head.id} position="absolute" left={0} top={0} className="editor-chrome" p={4} boxShadow="2xl" pointerEvents="none">
-        <Box className="borders" pointerEvents="none" left={0} width="4" top={0} bottom={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
-        <Box className="borders" pointerEvents="none" right={0} width="4" top={0} bottom={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
-        <Box className="borders" pointerEvents="none" top={0} height="16" left={0} right={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
-        <Box className="borders" pointerEvents="none" bottom={0} height="4" left={0} right={0} backdropFilter="blur(2px)" background="rgb(244 244 244 / 80%)" position="absolute" />
-        <Version version={snapshot.head} node={target}>{{
-          left: <HStack justifyContent="space-between">
-            <EditorUIUndo size="sm" editor={status == "ready" ? editor : null} />
-            <EditorUIMode size="sm" />
-          </HStack>,
-          middle: <VersionStatusList />
-        }}</Version>
-      </Box>)
-    })}</Editor></Box></Box>);
+      }).map((snapshot, index) => /* @__PURE__ */ React.createElement(Box, {
+        key: snapshot.head.id,
+        position: "absolute",
+        left: 0,
+        top: 0,
+        className: "editor-chrome",
+        p: 4,
+        boxShadow: "2xl",
+        pointerEvents: "none"
+      }, /* @__PURE__ */ React.createElement(Box, {
+        className: "borders",
+        pointerEvents: "none",
+        left: 0,
+        width: "4",
+        top: 0,
+        bottom: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgb(244 244 244 / 80%)",
+        position: "absolute"
+      }), /* @__PURE__ */ React.createElement(Box, {
+        className: "borders",
+        pointerEvents: "none",
+        right: 0,
+        width: "4",
+        top: 0,
+        bottom: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgb(244 244 244 / 80%)",
+        position: "absolute"
+      }), /* @__PURE__ */ React.createElement(Box, {
+        className: "borders",
+        pointerEvents: "none",
+        top: 0,
+        height: "16",
+        left: 0,
+        right: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgb(244 244 244 / 80%)",
+        position: "absolute"
+      }), /* @__PURE__ */ React.createElement(Box, {
+        className: "borders",
+        pointerEvents: "none",
+        bottom: 0,
+        height: "4",
+        left: 0,
+        right: 0,
+        backdropFilter: "blur(2px)",
+        background: "rgb(244 244 244 / 80%)",
+        position: "absolute"
+      }), /* @__PURE__ */ React.createElement(Version, {
+        version: snapshot.head,
+        node: target
+      }, {
+        left: /* @__PURE__ */ React.createElement(HStack, {
+          justifyContent: "space-between"
+        }, /* @__PURE__ */ React.createElement(EditorUIUndo, {
+          size: "sm",
+          editor: status == "ready" ? editor : null
+        }), /* @__PURE__ */ React.createElement(EditorUIMode, {
+          size: "sm"
+        })),
+        middle: /* @__PURE__ */ React.createElement(VersionStatusList, null)
+      })))
+    })))));
   }
   isReadyToLoad() {
     return this.props.component != null && this.props.version != null;
@@ -1694,8 +1754,12 @@ var FEAASPicker = class extends FEAASBase {
   load() {
     return import(this.formatURL(this.props.src, this.props.frontend));
   }
-  renderReact({ context, mode, children }, { Picker, React, ReactDOM }) {
-    return <Picker mode={mode || void 0} onClose={this.props.onClose} context={context}>{children}</Picker>;
+  renderReact({ context, mode, children }, { Picker, React: React2, ReactDOM }) {
+    return /* @__PURE__ */ React2.createElement(Picker, {
+      mode: mode || void 0,
+      onClose: this.props.onClose,
+      context
+    }, children);
   }
 };
 FEAASPicker.register("feaas-picker");
@@ -1794,19 +1858,25 @@ var FEAASContext = class extends FEAASBase {
         containerRef: { current: this.getRoot() }
       }
     };
-    return <AppContext libraryId={this.props.library} container={this.getRoot()} getTheme={this.getTheme} modalProps={{
-      portalProps: {
-        containerRef: { current: this.getRoot() }
-      }
-    }} chakraProps={{
-      cssVarsRoot: ":host",
-      resetCSS: true,
-      toastOptions: {
+    return /* @__PURE__ */ React.createElement(AppContext, {
+      libraryId: this.props.library,
+      container: this.getRoot(),
+      getTheme: this.getTheme,
+      modalProps: {
         portalProps: {
           containerRef: { current: this.getRoot() }
         }
+      },
+      chakraProps: {
+        cssVarsRoot: ":host",
+        resetCSS: true,
+        toastOptions: {
+          portalProps: {
+            containerRef: { current: this.getRoot() }
+          }
+        }
       }
-    }}>{children}</AppContext>;
+    }, children);
   }
 };
 FEAASContext.observedAttributes = ["library", "component", "version", "revision", "hostname", "template"];

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@sitecore-feaas/clientside",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "scripts": {
     "start": "webpack serve --open",
     "build": "rm -rf dist; npm run build:node; npm run build:browser;",
-    "build:node": "tsc --build; tsup --entry.index src/index.ts --entry.basic src/basic.ts --target es6  --format cjs,esm -d dist/node",
-    "build:browser": "tsc --build; tsup --entry.index src/index.ts --entry.basic src/basic.ts --target es6  --format cjs,esm -d dist/browser --minify",
+    "build:node": "tsc --build; tsup --entry.index src/index.ts --entry.basic src/basic.ts --target es6  --format cjs,esm -d dist/node --tsconfig tsconfig.tsup.json",
+    "build:browser": "tsc --build; tsup --entry.index src/index.ts --entry.basic src/basic.ts --target es6  --format cjs,esm -d dist/browser--tsconfig tsconfig.tsup.json --minify",
     "watch": "tsup --entry.index src/index.ts --entry.basic src/basic.ts --target es6  --format esm -d dist/node --watch",
     "test": "npx vitest --config ../frontend/vite.config.ts $FLAGS",
     "test:watch": "npx vitest --config ../frontend/vite.config.ts",
@@ -24,6 +24,7 @@
   "tsup": {
     "platform": "browser",
     "dts": false,
+    "jsx": "React",
     "splitting": false,
     "external": [
       "node-fetch"

package/src/components/FEAASBase.tsx

@@ -186,10 +186,7 @@ export class FEAASBase<Props = any, Payload = any> extends HTMLElement {
         const { React, ReactDOM } = (target.payload as ReactPayload) || {}
         const [value, forceUpdateReact] = React.useReducer((r) => r + 1, 0)
         target.forceUpdateReact = forceUpdateReact
-        return ReactDOM.createPortal(
-          React.createElement(React.Fragment, null, target.invokeReactRendering()),
-          target.getReactRoot()
-        )
+        return ReactDOM.createPortal(<>{target.invokeReactRendering()}</>, target.getReactRoot())
       } else {
         return target.render()
       }

package/tsconfig.tsup.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "jsx": "react",
+    "outDir": "dist",
+    "rootDir": "src",
+    "tsBuildInfoFile": "./types/tsbuildinfo",
+    "declarationDir": "./types"
+  },
+  "references": [
+    {
+      "path": "../sdk"
+    }
+  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["scripts/**", "test/**", "types/**", "build/**", "dist/**", "node_modules/**"]
+}

package/types/components/FEAASStylesheet.d.ts

@@ -1,7 +1,7 @@
 import { FEAASBase } from './FEAASBase.js';
 export declare function FEAASStylesheetProps(element?: FEAASBase): {
     library: string;
-    revision: number | "published" | "staging" | "saved";
+    revision: number | "staging" | "published" | "saved";
     cdn: string;
 };
 export declare type FEAASStylesheetProps = ReturnType<typeof FEAASStylesheetProps>;
@@ -9,7 +9,7 @@ export declare class FEAASStylesheet extends FEAASBase<FEAASStylesheetProps, str
     stylesheet: HTMLStyleElement;
     getProps(): {
         library: string;
-        revision: number | "published" | "staging" | "saved";
+        revision: number | "staging" | "published" | "saved";
         cdn: string;
     };
     isReadyToLoad(): boolean;