@uniformdev/canvas-next-rsc-client 19.202.0 → 19.202.1-alpha.9

package/dist/index.d.mts

@@ -6,7 +6,7 @@ import * as react from 'react';
 import { PropsWithChildren } from 'react';
 import * as _uniformdev_canvas_next_rsc_shared from '@uniformdev/canvas-next-rsc-shared';
 import { AppDirectoryContextState, PersonalizeProps, ComponentProps, TestProps, CreateUniformContextOptions, AppDirectoryContext } from '@uniformdev/canvas-next-rsc-shared';
-import { VisibilityParameterValue } from '@uniformdev/canvas';
+import { VisibilityParameterValue, ComponentInstance, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
 
 type ClientContextComponentProps = {
     /**
@@ -21,6 +21,11 @@ type ClientContextComponentProps = {
      * The default consent value
      */
     defaultConsent: boolean;
+    /**
+     * @deprecated
+     * Whether or not to enable the experimental quirk serialization
+     */
+    experimentalQuirkSerialization: boolean;
 };
 type ClientContextComponent = (props: ClientContextComponentProps) => JSX.Element | null;
 
@@ -49,8 +54,10 @@ declare const DefaultUniformClientContext: ClientContextComponent;
 
 type PersonalizeClientProps = PersonalizeProps & {
     indexes: number[];
+    slots: ComponentProps['slots'];
+    component: ComponentProps['component'];
 };
-declare const PersonalizeClient: (props: ComponentProps<PersonalizeClientProps>) => react.FunctionComponentElement<{
+declare const PersonalizeClient: (props: PersonalizeClientProps) => react.FunctionComponentElement<{
     children?: react.ReactNode | undefined;
 }>;
 
@@ -91,4 +98,22 @@ declare const useUniformContext: () => {
     context: AppDirectoryContext | undefined;
 };
 
-export { type ClientContextComponent, type ClientContextComponentProps, ClientContextPersonalizationTransfer, ClientContextTestTransfer, ClientContextUpdate, ClientContextualEditingComponentWrapper, ContextUpdateTransferClient, type CreateClientUniformContextOptions, DefaultUniformClientContext, PersonalizeClient, type PersonalizeClientProps, TestClient, UniformScript, VisibilityRulesWrapperClient, createClientUniformContext, useInitUniformContext, useQuirks, useScores, useUniformContext };
+type UseUniformContextualEditingStateProps = {
+    /**
+     * When not set, the hook will return the global contextual state no matter where its used.
+     * When set, it will return only the state relevant to the component passed.
+     * @default undefined
+     **/
+    scope?: ComponentInstance;
+};
+type UseUniformContextualEditingStateReturnType = {
+    /**
+     * A reference to the currently selected component in Canvas editor.
+     * Returns `undefined` if the selected component is not part of the current React component.
+     * Set the `scope` option a component instance to limit the scope of selected compponents.
+     */
+    selectedComponentReference: UpdateContextualEditingStateInternalMessage['state']['selectedComponentReference'];
+};
+declare const useUniformContextualEditingState: ({ scope, }?: UseUniformContextualEditingStateProps) => UseUniformContextualEditingStateReturnType;
+
+export { type ClientContextComponent, type ClientContextComponentProps, ClientContextPersonalizationTransfer, ClientContextTestTransfer, ClientContextUpdate, ClientContextualEditingComponentWrapper, ContextUpdateTransferClient, type CreateClientUniformContextOptions, DefaultUniformClientContext, PersonalizeClient, type PersonalizeClientProps, TestClient, UniformScript, type UseUniformContextualEditingStateProps, type UseUniformContextualEditingStateReturnType, VisibilityRulesWrapperClient, createClientUniformContext, useInitUniformContext, useQuirks, useScores, useUniformContext, useUniformContextualEditingState };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import * as react from 'react';
 import { PropsWithChildren } from 'react';
 import * as _uniformdev_canvas_next_rsc_shared from '@uniformdev/canvas-next-rsc-shared';
 import { AppDirectoryContextState, PersonalizeProps, ComponentProps, TestProps, CreateUniformContextOptions, AppDirectoryContext } from '@uniformdev/canvas-next-rsc-shared';
-import { VisibilityParameterValue } from '@uniformdev/canvas';
+import { VisibilityParameterValue, ComponentInstance, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas';
 
 type ClientContextComponentProps = {
     /**
@@ -21,6 +21,11 @@ type ClientContextComponentProps = {
      * The default consent value
      */
     defaultConsent: boolean;
+    /**
+     * @deprecated
+     * Whether or not to enable the experimental quirk serialization
+     */
+    experimentalQuirkSerialization: boolean;
 };
 type ClientContextComponent = (props: ClientContextComponentProps) => JSX.Element | null;
 
@@ -49,8 +54,10 @@ declare const DefaultUniformClientContext: ClientContextComponent;
 
 type PersonalizeClientProps = PersonalizeProps & {
     indexes: number[];
+    slots: ComponentProps['slots'];
+    component: ComponentProps['component'];
 };
-declare const PersonalizeClient: (props: ComponentProps<PersonalizeClientProps>) => react.FunctionComponentElement<{
+declare const PersonalizeClient: (props: PersonalizeClientProps) => react.FunctionComponentElement<{
     children?: react.ReactNode | undefined;
 }>;
 
@@ -91,4 +98,22 @@ declare const useUniformContext: () => {
     context: AppDirectoryContext | undefined;
 };
 
-export { type ClientContextComponent, type ClientContextComponentProps, ClientContextPersonalizationTransfer, ClientContextTestTransfer, ClientContextUpdate, ClientContextualEditingComponentWrapper, ContextUpdateTransferClient, type CreateClientUniformContextOptions, DefaultUniformClientContext, PersonalizeClient, type PersonalizeClientProps, TestClient, UniformScript, VisibilityRulesWrapperClient, createClientUniformContext, useInitUniformContext, useQuirks, useScores, useUniformContext };
+type UseUniformContextualEditingStateProps = {
+    /**
+     * When not set, the hook will return the global contextual state no matter where its used.
+     * When set, it will return only the state relevant to the component passed.
+     * @default undefined
+     **/
+    scope?: ComponentInstance;
+};
+type UseUniformContextualEditingStateReturnType = {
+    /**
+     * A reference to the currently selected component in Canvas editor.
+     * Returns `undefined` if the selected component is not part of the current React component.
+     * Set the `scope` option a component instance to limit the scope of selected compponents.
+     */
+    selectedComponentReference: UpdateContextualEditingStateInternalMessage['state']['selectedComponentReference'];
+};
+declare const useUniformContextualEditingState: ({ scope, }?: UseUniformContextualEditingStateProps) => UseUniformContextualEditingStateReturnType;
+
+export { type ClientContextComponent, type ClientContextComponentProps, ClientContextPersonalizationTransfer, ClientContextTestTransfer, ClientContextUpdate, ClientContextualEditingComponentWrapper, ContextUpdateTransferClient, type CreateClientUniformContextOptions, DefaultUniformClientContext, PersonalizeClient, type PersonalizeClientProps, TestClient, UniformScript, type UseUniformContextualEditingStateProps, type UseUniformContextualEditingStateReturnType, VisibilityRulesWrapperClient, createClientUniformContext, useInitUniformContext, useQuirks, useScores, useUniformContext, useUniformContextualEditingState };

package/dist/index.esm.js

@@ -570,9 +570,13 @@ for (let i = 0; i < alphabet.length; i++) {
   s2b[alphabet.charCodeAt(i)] = i;
 }
 var _cookieName;
+var _quirkCookieName;
 var _cookieAttributes;
+var _quirksEnabled;
 _cookieName = /* @__PURE__ */ new WeakMap();
+_quirkCookieName = /* @__PURE__ */ new WeakMap();
 _cookieAttributes = /* @__PURE__ */ new WeakMap();
+_quirksEnabled = /* @__PURE__ */ new WeakMap();
 var _EdgeTransitionDataStore_instances;
 var fetchData_fn;
 _EdgeTransitionDataStore_instances = /* @__PURE__ */ new WeakSet();
@@ -909,7 +913,8 @@ var useInitUniformContext = (callback) => {
 var DefaultUniformClientContext = ({
   manifest,
   disableDevTools,
-  defaultConsent
+  defaultConsent,
+  experimentalQuirkSerialization
 }) => {
   const router = useRouter();
   useInitUniformContext(() => {
@@ -926,7 +931,8 @@ var DefaultUniformClientContext = ({
     return createClientUniformContext({
       manifest,
       plugins,
-      defaultConsent
+      defaultConsent,
+      experimental_quirksEnabled: experimentalQuirkSerialization
     });
   });
   return null;
@@ -941,11 +947,21 @@ var PersonalizeClient = (props) => {
   const { context } = useUniformContext();
   const [indexesToShow, setIndexesToShow] = useState6(props.indexes);
   useEffect7(() => {
-    const result = runPersonalization({
-      ...props,
-      contextInstance: context
-    });
-    setIndexesToShow(result.indexes);
+    if (!context) {
+      return;
+    }
+    const handleRunPersonalization = () => {
+      const result = runPersonalization({
+        ...props,
+        contextInstance: context
+      });
+      setIndexesToShow(result.indexes);
+    };
+    context.events.on("scoresUpdated", handleRunPersonalization);
+    handleRunPersonalization();
+    return () => {
+      context.events.off("scoresUpdated", handleRunPersonalization);
+    };
   }, [props, context]);
   const slotsToShow = indexesToShow.map((key) => {
     var _a;
@@ -1137,6 +1153,47 @@ function useScores() {
   }, [context]);
   return scores;
 }
+
+// src/hooks/useUniformContextualEditingState.ts
+import {
+  createCanvasChannel as createCanvasChannel2,
+  isUpdateContextualEditingStateInternalMessage
+} from "@uniformdev/canvas";
+import { useEffect as useEffect12, useMemo as useMemo4, useState as useState10 } from "react";
+var useUniformContextualEditingState = ({
+  scope
+} = {}) => {
+  const [selectedComponentReference, setSelectedComponentReference] = useState10();
+  const channel = useMemo4(() => {
+    const channel2 = createCanvasChannel2({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, []);
+  useEffect12(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!isUpdateContextualEditingStateInternalMessage(message)) {
+        return;
+      }
+      if (!!scope && (scope == null ? void 0 : scope._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [scope, channel]);
+  return {
+    selectedComponentReference
+  };
+};
 export {
   ClientContextPersonalizationTransfer,
   ClientContextTestTransfer,
@@ -1152,7 +1209,8 @@ export {
   useInitUniformContext,
   useQuirks,
   useScores,
-  useUniformContext
+  useUniformContext,
+  useUniformContextualEditingState
 };
 /*! Bundled license information:
 

package/dist/index.js

@@ -237,7 +237,8 @@ __export(src_exports, {
   useInitUniformContext: () => useInitUniformContext,
   useQuirks: () => useQuirks,
   useScores: () => useScores,
-  useUniformContext: () => useUniformContext
+  useUniformContext: () => useUniformContext,
+  useUniformContextualEditingState: () => useUniformContextualEditingState
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -595,9 +596,13 @@ for (let i = 0; i < alphabet.length; i++) {
   s2b[alphabet.charCodeAt(i)] = i;
 }
 var _cookieName;
+var _quirkCookieName;
 var _cookieAttributes;
+var _quirksEnabled;
 _cookieName = /* @__PURE__ */ new WeakMap();
+_quirkCookieName = /* @__PURE__ */ new WeakMap();
 _cookieAttributes = /* @__PURE__ */ new WeakMap();
+_quirksEnabled = /* @__PURE__ */ new WeakMap();
 var _EdgeTransitionDataStore_instances;
 var fetchData_fn;
 _EdgeTransitionDataStore_instances = /* @__PURE__ */ new WeakSet();
@@ -934,7 +939,8 @@ var useInitUniformContext = (callback) => {
 var DefaultUniformClientContext = ({
   manifest,
   disableDevTools,
-  defaultConsent
+  defaultConsent,
+  experimentalQuirkSerialization
 }) => {
   const router = (0, import_navigation3.useRouter)();
   useInitUniformContext(() => {
@@ -951,7 +957,8 @@ var DefaultUniformClientContext = ({
     return createClientUniformContext({
       manifest,
       plugins,
-      defaultConsent
+      defaultConsent,
+      experimental_quirksEnabled: experimentalQuirkSerialization
     });
   });
   return null;
@@ -966,11 +973,21 @@ var PersonalizeClient = (props) => {
   const { context } = useUniformContext();
   const [indexesToShow, setIndexesToShow] = (0, import_react8.useState)(props.indexes);
   (0, import_react8.useEffect)(() => {
-    const result = (0, import_canvas_next_rsc_shared2.runPersonalization)({
-      ...props,
-      contextInstance: context
-    });
-    setIndexesToShow(result.indexes);
+    if (!context) {
+      return;
+    }
+    const handleRunPersonalization = () => {
+      const result = (0, import_canvas_next_rsc_shared2.runPersonalization)({
+        ...props,
+        contextInstance: context
+      });
+      setIndexesToShow(result.indexes);
+    };
+    context.events.on("scoresUpdated", handleRunPersonalization);
+    handleRunPersonalization();
+    return () => {
+      context.events.off("scoresUpdated", handleRunPersonalization);
+    };
   }, [props, context]);
   const slotsToShow = indexesToShow.map((key) => {
     var _a;
@@ -1155,6 +1172,44 @@ function useScores() {
   }, [context]);
   return scores;
 }
+
+// src/hooks/useUniformContextualEditingState.ts
+var import_canvas6 = require("@uniformdev/canvas");
+var import_react14 = require("react");
+var useUniformContextualEditingState = ({
+  scope
+} = {}) => {
+  const [selectedComponentReference, setSelectedComponentReference] = (0, import_react14.useState)();
+  const channel = (0, import_react14.useMemo)(() => {
+    const channel2 = (0, import_canvas6.createCanvasChannel)({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!(0, import_canvas6.isUpdateContextualEditingStateInternalMessage)(message)) {
+        return;
+      }
+      if (!!scope && (scope == null ? void 0 : scope._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [scope, channel]);
+  return {
+    selectedComponentReference
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ClientContextPersonalizationTransfer,
@@ -1171,7 +1226,8 @@ function useScores() {
   useInitUniformContext,
   useQuirks,
   useScores,
-  useUniformContext
+  useUniformContext,
+  useUniformContextualEditingState
 });
 /*! Bundled license information:
 

package/dist/index.mjs

@@ -570,9 +570,13 @@ for (let i = 0; i < alphabet.length; i++) {
   s2b[alphabet.charCodeAt(i)] = i;
 }
 var _cookieName;
+var _quirkCookieName;
 var _cookieAttributes;
+var _quirksEnabled;
 _cookieName = /* @__PURE__ */ new WeakMap();
+_quirkCookieName = /* @__PURE__ */ new WeakMap();
 _cookieAttributes = /* @__PURE__ */ new WeakMap();
+_quirksEnabled = /* @__PURE__ */ new WeakMap();
 var _EdgeTransitionDataStore_instances;
 var fetchData_fn;
 _EdgeTransitionDataStore_instances = /* @__PURE__ */ new WeakSet();
@@ -909,7 +913,8 @@ var useInitUniformContext = (callback) => {
 var DefaultUniformClientContext = ({
   manifest,
   disableDevTools,
-  defaultConsent
+  defaultConsent,
+  experimentalQuirkSerialization
 }) => {
   const router = useRouter();
   useInitUniformContext(() => {
@@ -926,7 +931,8 @@ var DefaultUniformClientContext = ({
     return createClientUniformContext({
       manifest,
       plugins,
-      defaultConsent
+      defaultConsent,
+      experimental_quirksEnabled: experimentalQuirkSerialization
     });
   });
   return null;
@@ -941,11 +947,21 @@ var PersonalizeClient = (props) => {
   const { context } = useUniformContext();
   const [indexesToShow, setIndexesToShow] = useState6(props.indexes);
   useEffect7(() => {
-    const result = runPersonalization({
-      ...props,
-      contextInstance: context
-    });
-    setIndexesToShow(result.indexes);
+    if (!context) {
+      return;
+    }
+    const handleRunPersonalization = () => {
+      const result = runPersonalization({
+        ...props,
+        contextInstance: context
+      });
+      setIndexesToShow(result.indexes);
+    };
+    context.events.on("scoresUpdated", handleRunPersonalization);
+    handleRunPersonalization();
+    return () => {
+      context.events.off("scoresUpdated", handleRunPersonalization);
+    };
   }, [props, context]);
   const slotsToShow = indexesToShow.map((key) => {
     var _a;
@@ -1137,6 +1153,47 @@ function useScores() {
   }, [context]);
   return scores;
 }
+
+// src/hooks/useUniformContextualEditingState.ts
+import {
+  createCanvasChannel as createCanvasChannel2,
+  isUpdateContextualEditingStateInternalMessage
+} from "@uniformdev/canvas";
+import { useEffect as useEffect12, useMemo as useMemo4, useState as useState10 } from "react";
+var useUniformContextualEditingState = ({
+  scope
+} = {}) => {
+  const [selectedComponentReference, setSelectedComponentReference] = useState10();
+  const channel = useMemo4(() => {
+    const channel2 = createCanvasChannel2({
+      broadcastTo: [window],
+      listenTo: [window]
+    });
+    return channel2;
+  }, []);
+  useEffect12(() => {
+    if (!channel) {
+      return;
+    }
+    const unsubscribe = channel.on("update-contextual-editing-state-internal", async (message) => {
+      var _a;
+      if (!isUpdateContextualEditingStateInternalMessage(message)) {
+        return;
+      }
+      if (!!scope && (scope == null ? void 0 : scope._id) !== ((_a = message.state.selectedComponentReference) == null ? void 0 : _a.parentId)) {
+        setSelectedComponentReference(void 0);
+        return;
+      }
+      setSelectedComponentReference(message.state.selectedComponentReference);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [scope, channel]);
+  return {
+    selectedComponentReference
+  };
+};
 export {
   ClientContextPersonalizationTransfer,
   ClientContextTestTransfer,
@@ -1152,7 +1209,8 @@ export {
   useInitUniformContext,
   useQuirks,
   useScores,
-  useUniformContext
+  useUniformContext,
+  useUniformContextualEditingState
 };
 /*! Bundled license information:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/canvas-next-rsc-client",
-  "version": "19.202.0",
+  "version": "19.202.1-alpha.9+63c059770a",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {
     "build": "tsup",
@@ -24,17 +24,17 @@
     "/dist"
   ],
   "devDependencies": {
-    "@types/node": "20.10.6",
-    "@types/react": "18.3.3",
+    "@types/node": "22.7.8",
+    "@types/react": "18.3.11",
     "eslint": "9.9.0",
     "next": "^14.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "@uniformdev/canvas": "19.202.0",
-    "@uniformdev/canvas-next-rsc-shared": "^19.202.0",
-    "@uniformdev/canvas-react": "^19.202.0"
+    "@uniformdev/canvas": "19.202.1-alpha.9+63c059770a",
+    "@uniformdev/canvas-next-rsc-shared": "^19.202.1-alpha.9+63c059770a",
+    "@uniformdev/canvas-react": "^19.202.1-alpha.9+63c059770a"
   },
   "engines": {
     "node": ">=16.14.0"
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "133a9ea4d2d3794e2d05ad8277f6bb3803d109d7"
+  "gitHead": "63c059770a54fc063a12af0f74eba059143e8074"
 }