npm - @croct/plug-react - Versions diffs - 0.3.0 → 0.4.2 - Mend

@croct/plug-react 0.3.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CroctProvider.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, PropsWithChildren } from 'react';
 import { Configuration, Plug } from '@croct/plug';
-export declare type CroctProviderProps = Configuration & Required<Pick<Configuration, 'appId'>>;
+export declare type CroctProviderProps = PropsWithChildren<Configuration & Required<Pick<Configuration, 'appId'>>>;
 export declare const CroctContext: import("react").Context<{
     plug: Plug;
 } | null>;

package/README.md CHANGED Viewed

@@ -33,16 +33,16 @@ The React Plug library provides components and hooks for personalizing applicati
 - **Blazing-fast queries**: double-digit millisecond latency for real-time evaluations.
 - **Playground integration**: one-click to connect, no configuration needed.
-Check out the [Storybook](https://croct-tech.github.io/plug-react) to see some minimal examples in action,
+Check out the [Storybook](https://croct-tech.github.io/plug-react) to see some minimal examples in action,
 or the [example folder](examples) for full code examples.
 ## Getting Started
 The following steps will walk you through installing the library and integrating it into your application.
-This guide assumes you're already familiar with some key concepts and tools around Croct, like
-Contextual Query Language (CQL) and the playground. If you're not,
-[this 15-minute quickstart](https://croct.link/plug-js/quick-start) that will give you a hands-on overview of
+This guide assumes you're already familiar with some key concepts and tools around Croct, like
+Contextual Query Language (CQL) and the playground. If you're not,
+[this 15-minute quickstart](https://croct.link/plug-js/quick-start) that will give you a hands-on overview of
 all the terms and tools you need to get started.
 ### Installation
@@ -57,10 +57,10 @@ npm install @croct/plug-react
 ### Plugging in
-You connect Croct to React with the `<CroctProvider/ >` component. The `<CroctProvider/ >` uses a regular React's
+You connect Croct to React with the `<CroctProvider />` component. The `<CroctProvider />` uses a regular React's
 `<Context.Provider />` to wrap your React app and make the SDK available anywhere in your component tree.
-We suggest putting the `<CroctProvider/ >` somewhere high in your app, above any component that might be personalized,
+We suggest putting the `<CroctProvider />` somewhere high in your app, above any component that might be personalized,
 ideally in the top-level `<App/>` component.
 ```tsx
@@ -69,7 +69,7 @@ import {CroctProvider} from '@croct/plug-react';
 function App() {
   return (
-    <CroctProvider appId="00000000-0000-0000-0000-000000000000">
+    <CroctProvider appId="<APP_ID>">
       <div>
         <h1>My first personalized app 🚀</h1>
       </div>
@@ -80,6 +80,9 @@ function App() {
 render(<App />, document.getElementById('root'));
 ```
+> Replace `<APP_ID>` with your public app ID that you can find at Workspaces > Applications > Setup.
+> In case you don't have an account yet, you can use the sandbox application ID `00000000-0000-0000-0000-000000000000`
 ### Evaluating expressions
 Once your application is plugged in, you're ready to start personalizing your components using the `<Personalization />`
@@ -90,7 +93,7 @@ to conditionally renders a different button depending on the user's persona.
 ![Evaluation Example](https://user-images.githubusercontent.com/943036/116588852-6a114200-a8f2-11eb-9d88-c346f002e2a1.png)
-Let's first implement the use-case using the `<Personalization/>` component. It takes an expression (e.g. `user's persona`)
+Let's first implement the use-case using the `<Personalization />` component. It takes an expression (e.g. `user's persona`)
 and a render function, which tells the component how to render the UI, depending on the evaluation result.
 This is what our component would look like:
@@ -156,15 +159,16 @@ export default function OnboardingPage(): ReactElement {
 }
 ```
-If you run the application and there is no persona assigned to your profile, you will see the button for non-developers
+If you run the application and there is no persona assigned to your profile, you will see the button for non-developers
 — otherwise, the button for sharing the code with developers.
-Check out [Accessing the Plug instance](#accessing-the-plug-instance) for an example of how to save information in a
+Check out [Accessing the Plug instance](#accessing-the-plug-instance) for an example of how to save information in a
 user's profile.
 #### Fault tolerance
-We strongly recommend always specifying the `fallback` property to ensure your app behaves the same way regardless of
-the personalization. In this way, the UI will still be fully functional even in maintenance windows.
+We strongly recommend specifying the `fallback` property in client-side rendered applications to ensure your app behaves
+the same way regardless of the personalization. In this way, the UI will still be fully functional even in maintenance
+windows. **Specifying a `fallback` is required for server-side rendering (SSR).**
 The following example shows how you can specify a fallback behaviour for the docs link:
@@ -182,7 +186,7 @@ export default function OnboardingPage(): ReactElement {
     return (
         <Suspense fallback="✨ Personalizing...">
             {/* Using the <Personalization /> component */}
-            <Personalization expression="user's persona is 'developer'" falback={false}>
+            <Personalization expression="user's persona is 'developer'" fallback={false}>
                 {(isDeveloper: boolean) => (
                     <Fragment>
                         {isDeveloper && <a href="/docs">View docs</a>}
@@ -201,23 +205,23 @@ For a full list of the available options, please refer to the [API documentation
 ### Using slots
-Evaluating expression is a flexible and powerful way to customize your UI. However, for components whose content
-changes too often, this approach can be overkill. For those cases, we encourage you to use the Slots feature instead.
-Using slots gives your team the flexibility to change the content or personalization rules whenever needed without
+Evaluating expression is a flexible and powerful way to customize your UI. However, for components whose content
+changes too often, this approach can be overkill. For those cases, we encourage you to use the Slots feature instead.
+Using slots gives your team the flexibility to change the content or personalization rules whenever needed without
 touching the component code.
 ![Slot Example](https://user-images.githubusercontent.com/943036/116586841-44833900-a8f0-11eb-8d32-acec2eacee01.png)
-To render a slot, all you need to do is provide the `id` you configured in your Croct workspace. Based on the
-slot's personalization rules and the user's context, the component will decide which content show to that user.
-Notice that there's no logic on the client-side, meaning that your marketing or product team can freely change the
+To render a slot, all you need to do is provide the `id` you configured in your Croct workspace. Based on the
+slot's personalization rules and the user's context, the component will decide which content show to that user.
+Notice that there's no logic on the client-side, meaning that your marketing or product team can freely change the
 slot content as they need without requiring an update to your React app.
-For the next example, we assume that you have already defined a slot with id `home-banner` in your Croct workspace
+For the next example, we assume that you have already defined a slot with id `home-banner` in your Croct workspace
 with the following structure:
 ```ts
-type HomeBanner = {
+type HomeBannerContent = {
     title: string,
     subtitle: string,
     cta: {
@@ -235,11 +239,20 @@ Here's how to use the `<Slot />` component:
 import {ReactElement, Suspense} from 'react';
 import {Slot} from '@croct/plug-react';
+type HomeBannerContent = {
+  title: string,
+  subtitle: string,
+  cta: {
+      label: string,
+      link: string,
+  },
+};
 export default function OnboardingPage(): ReactElement {
     return (
         <Suspense fallback="✨ Personalizing content...">
             <Slot id="home-banner">
-                {({title, subtitle, cta}: HomeBanner) => (
+                {({title, subtitle, cta}: HomeBannerContent) => (
                     <div>
                         <strong>{title}</strong>
                         <p>{subtitle}</p>
@@ -258,17 +271,26 @@ To avoid the component from suspending while loading, you can provide an `initia
 import {ReactElement} from 'react';
 import {Slot} from '@croct/plug-react';
+type HomeBannerContent = {
+  title: string,
+  subtitle: string,
+  cta: {
+      label: string,
+      link: string,
+  },
+};
 export default function OnboardingPage(): ReactElement {
     return (
         <Slot id="home-banner" initial={null}>
-            {(props: HomeBanner|null) => (
+            {(props: HomeBannerContent|null) => (
                 props === null
                     ? '✨ Personalizing...'
                     : (
                         <div>
-                            <strong>{title}</strong>
-                            <p>{subtitle}</p>
-                            <a href={cta.link}>{cta.label}</a>
+                            <strong>{props.title}</strong>
+                            <p>{props.subtitle}</p>
+                            <a href={props.cta.link}>{props.cta.label}</a>
                         </div>
                     )
             )}
@@ -283,8 +305,17 @@ And here's an example using the `useContent` hook:
 import {ReactElement, Suspense} from 'react';
 import {useContent} from '@croct/plug-react';
+type HomeBannerContent = {
+  title: string,
+  subtitle: string,
+  cta: {
+      label: string,
+      link: string,
+  },
+};
 function HomeBanner(): ReactElement {
-    const banner = useContent<HomeBanner>('home-banner');
+    const {title, subtitle, cta} = useContent<HomeBannerContent>('home-banner');
     return (
         <div>
@@ -312,7 +343,16 @@ The following example shows how you can specify a fallback state for the `home-b
 import {ReactElement, Suspense} from 'react';
 import {Slot, useContent} from '@croct/plug-react';
-const fallbackBanner: HomeBanner = {
+type HomeBannerContent = {
+  title: string,
+  subtitle: string,
+  cta: {
+      label: string,
+      link: string,
+  },
+};
+const fallbackBanner: HomeBannerContent = {
     title: 'Default title',
     subtitle: 'Default subtitle',
     cta: {
@@ -322,7 +362,7 @@ const fallbackBanner: HomeBanner = {
 };
 function HomeBanner(): ReactElement {
-    const {title, subtitle, cta} = useContent<HomeBanner>('home-banner', {fallback: fallbackBanner});
+    const {title, subtitle, cta} = useContent<HomeBannerContent>('home-banner', {fallback: fallbackBanner});
     return (
         <div>
@@ -338,7 +378,7 @@ export default function HomePage(): ReactElement {
         <Suspense fallback="Personalizing content...">
             {/* Using the <Slot /> component */}
             <Slot id="home-banner" fallback={fallbackBanner}>
-                {({title, subtitle, cta}: HomeBanner) => (
+                {({title, subtitle, cta}: HomeBannerContent) => (
                     <div>
                         <strong>{title}</strong>
                         <p>{subtitle}</p>
@@ -354,15 +394,15 @@ export default function HomePage(): ReactElement {
 }
 ```
-Again, we strongly recommend always providing a value for the `fallback` property. For a full list of the available options,
+Again, we strongly recommend always providing a value for the `fallback` property. For a full list of the available options,
 please refer to the [API documentation](#component-api-reference).
 #### 💡 ProTip
-In the previous examples, you may have noticed that we specified the content type in the `userFetch` call and in the
-`<Slot />` component's render function to have the benefit of strong typing.
+In the previous examples, you may have noticed that we specified the content type in the `userFetch` call and in the
+`<Slot />` component's render function to have the benefit of strong typing.
-For an even more robust approach, you can also declare the type of all available slots in a single declaration file
+For an even more robust approach, you can also declare the type of all available slots in a single declaration file
 using module augmentation as follows:
 ```ts
@@ -384,16 +424,16 @@ slot IDs and content properties as a bonus:
 ### Server-side rendering
-You can use the same components and hooks on the server-side by simply providing an `initial` state which is used to
-pre-render on the server - the personalization happens transparently on the client during the initial render.
+You can use the same components and hooks on the server-side by simply providing an `initial` state which is used to
+pre-render on the server - the personalization happens transparently on the client during the initial render.
 That means it's SEO friendly and can be cached with no performance overhead.
-Notice that the methods exposed by the Plug work only on the client-side. Therefore, if you are using [`useCroct`](#usecroct),
+Notice that the methods exposed by the Plug work only on the client-side. Therefore, if you are using [`useCroct`](#usecroct),
 the operations have to be executed inside the `useEffect` hook or client-side callbacks, such as `onClick` or `onChange`, for example.
 ### Accessing the Plug instance
-This library is built on top of the PlugJS. You can access the Plug instance through the `useCroct` hook to track events,
+This library is built on top of the PlugJS. You can access the Plug instance through the `useCroct` hook to track events,
 login and logout users, and more.
 In the following example we use the `useCroct` to get the Plug instance and set an attribute to the user profile:
@@ -422,7 +462,7 @@ This reference documents all components available in the library.
 ### &lt;CroctProvider /&gt;
 The `<CroctProvider />` component  leverages [React's Context API](https://reactjs.org/docs/context.html) to
-make a configured [Plug instance](https://github.com/croct-tech/plug-js/blob/master/docs/plug.md) available throughout
+make a configured [Plug instance](https://github.com/croct-tech/plug-js/blob/master/docs/plug.md) available throughout
 a React component tree.
 #### Properties
@@ -453,7 +493,7 @@ import {CroctProvider} from '@croct/plug-react';
 function App() {
     return (
-        <CroctProvider appId="00000000-0000-0000-0000-000000000000">
+        <CroctProvider appId="<APP_ID>">
             <div>
                 <h1>My first personalized app 🚀</h1>
             </div>
@@ -462,6 +502,8 @@ function App() {
 }
 ```
+> Replace "<APP_ID>" with your public app ID that you can find at Workspaces > Applications > API Keys.
 ### &lt;Personalization /&gt;
 The `<Personalization />` component evaluates and renders a CQL query.
@@ -585,7 +627,7 @@ These are the currently supported options:
 | Option       | Type    | Description
 |--------------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-| `fallback`   | Result  | The value returned when the evaluation fails. If not specified, the hook will throw an exception in case of failures.
+| `fallback`   | Result  | The value returned when the evaluation fails. If not specified, the hook will throw an exception in case of failures.
 | `timeout`    | number  | The maximum evaluation time in milliseconds. Once reached, the evaluation will fail.
 | `attributes` | JSON    | The map of attributes to inject in the evaluation context. For example, passing the attributes `{cities: ['New York', 'San Francisco']}` you can reference them in expressions like `context's cities include location's city`.
 | `cacheKey`   | string  | An identifier that allows keeping the cached result separate from other cached items. By default, the cache key is formed from the expression and attributes.
@@ -634,8 +676,17 @@ Here's a simple example showing how to fetch the content for a banner:
 import {ReactElement} from 'react';
 import {useContent} from '@croct/plug-react';
-function HeroBanner(): ReactElement {
-    const {title, subtitle} = useContent<HeroBanner>('hero');
+type HomeBannerContent = {
+    title: string,
+    subtitle: string,
+    cta: {
+        label: string,
+        link: string,
+    },
+};
+export default function HeroBanner(): ReactElement {
+    const {title, subtitle} = useContent<HomeBannerContent>('hero');
     return (
         <div>

package/index.js CHANGED Viewed

@@ -22,9 +22,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 function isSsr() {
-  return typeof window === 'undefined';
+  return typeof window === 'undefined' || typeof window.document === 'undefined' || typeof window.document.createElement === 'undefined';
 }
-var croct = !isSsr() ? csrPlug__default['default'] : new Proxy(csrPlug__default['default'], {
+var croct = !isSsr() ? csrPlug__default["default"] : new Proxy(csrPlug__default["default"], {
   get(_, property) {
     switch (property) {
       case 'initialized':
@@ -44,13 +44,14 @@ var croct = !isSsr() ? csrPlug__default['default'] : new Proxy(csrPlug__default[
 });
+var _excluded$4 = ["children"];
 var CroctContext = /*#__PURE__*/react.createContext(null);
 CroctContext.displayName = 'CroctContext';
 var CroctProvider = _ref => {
   var {
     children
   } = _ref,
-      configuration = _objectWithoutPropertiesLoose(_ref, ["children"]);
+      configuration = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var parent = react.useContext(CroctContext);
@@ -74,11 +75,10 @@ var CroctProvider = _ref => {
       croct.unplug();
     };
   }, []);
-  return jsxRuntime.jsx(CroctContext.Provider, Object.assign({
-    value: context
-  }, {
+  return jsxRuntime.jsx(CroctContext.Provider, {
+    value: context,
     children: children
-  }), void 0);
+  });
 };
 class Cache {
@@ -154,6 +154,7 @@ class Cache {
 }
+var _excluded$3 = ["initial"];
 var cache = new Cache(60 * 1000);
 function useLoader(_ref) {
   var _cache$get;
@@ -161,7 +162,7 @@ function useLoader(_ref) {
   var {
     initial
   } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, ["initial"]);
+      options = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var loadedValue = (_cache$get = cache.get(options.cacheKey)) == null ? void 0 : _cache$get.result;
   var [value, setValue] = react.useState(loadedValue !== undefined ? loadedValue : initial);
@@ -171,16 +172,17 @@ function useLoader(_ref) {
       try {
         setValue(cache.load(options));
       } catch (result) {
-        if (typeof (result == null ? void 0 : result.then) !== 'function') {
-          setValue(undefined);
+        if (result instanceof Promise) {
+          result.then(resolvedValue => {
+            if (!isUnmounted) {
+              setValue(resolvedValue);
+            }
+          });
           return;
         }
-        result.then(resolvedValue => {
-          if (!isUnmounted) {
-            setValue(resolvedValue);
-          }
-        });
+        setValue(undefined);
+        return;
       }
     }
@@ -206,6 +208,8 @@ function useCroct() {
   return context.plug;
 }
+var _excluded$2 = ["cacheKey", "fallback", "initial", "expiration"];
 function cleanEvaluationOptions(options) {
   var result = {};
@@ -231,7 +235,7 @@ function useCsrEvaluation(expression, options) {
     initial,
     expiration
   } = options,
-      evaluationOptions = _objectWithoutPropertiesLoose(options, ["cacheKey", "fallback", "initial", "expiration"]);
+      evaluationOptions = _objectWithoutPropertiesLoose(options, _excluded$2);
   var croct = useCroct();
   return useLoader({
@@ -297,30 +301,32 @@ function useSsrContent(_, _temp) {
 var useContent = isSsr() ? useSsrContent : useCsrContent;
+var _excluded$1 = ["expression", "children"];
 function Personalization(props) {
   var {
     expression,
     children
   } = props,
-      options = _objectWithoutPropertiesLoose(props, ["expression", "children"]);
+      options = _objectWithoutPropertiesLoose(props, _excluded$1);
   var result = useEvaluation(expression, options);
   return jsxRuntime.jsx(react.Fragment, {
     children: children(result)
-  }, void 0);
+  });
 }
+var _excluded = ["id", "children"];
 var Slot = props => {
   var {
     id,
     children
   } = props,
-      options = _objectWithoutPropertiesLoose(props, ["id", "children"]);
+      options = _objectWithoutPropertiesLoose(props, _excluded);
   var data = useContent(id, options);
   return jsxRuntime.jsx(react.Fragment, {
     children: children(data)
-  }, void 0);
+  });
 };
 exports.CroctContext = CroctContext;

package/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../src/ssr-polyfills.ts","../src/CroctProvider.tsx","../src/hooks/Cache.ts","../src/hooks/useLoader.ts","../src/hooks/useCroct.ts","../src/hooks/useEvaluation.ts","../src/hooks/useContent.ts","../src/components/Personalization/index.tsx","../src/components/Slot/index.tsx"],"sourcesContent":["import csrPlug, {Plug} from '@croct/plug';\n\nexport function isSsr(): boolean {\n return typeof window === 'undefined'\n || typeof window.document === 'undefined'\n || typeof window.document.createElement === 'undefined';\n}\n\nexport const croct: Plug = !isSsr() ? csrPlug : new Proxy(csrPlug, {\n get(_, property: keyof Plug) {\n switch (property) {\n case 'initialized':\n return false;\n\n case 'plug':\n return () => {\n // no-op\n };\n\n case 'unplug':\n return () => Promise.resolve();\n\n default:\n throw new Error(\n `Property croct.${String(property)} is not supported on server-side (SSR). Consider refactoring `\n + 'the logic as a side-effect (useEffect) or a client-side callback (onClick, onChange, etc).',\n );\n }\n },\n});\n\n","import {createContext, FunctionComponent, PropsWithChildren, ReactElement, useContext, useEffect, useMemo} from 'react';\nimport {Configuration, Plug} from '@croct/plug';\nimport {croct} from './ssr-polyfills';\n\nexport type CroctProviderProps = PropsWithChildren<Configuration & Required<Pick<Configuration, 'appId'>>>;\n\nexport const CroctContext = createContext<{plug: Plug}|null>(null);\nCroctContext.displayName = 'CroctContext';\n\nexport const CroctProvider: FunctionComponent<CroctProviderProps> = ({children, ...configuration}): ReactElement => {\n const parent = useContext(CroctContext);\n\n if (parent !== null) {\n throw new Error(\n 'You cannot render <CroctProvider> inside another <CroctProvider>. '\n + 'Croct should only be initialized once in the application.',\n );\n }\n\n const context = useMemo(() => ({\n get plug() {\n if (!croct.initialized) {\n croct.plug(configuration);\n }\n\n return croct;\n },\n }), [configuration]);\n\n useEffect(() => {\n croct.plug(configuration);\n\n return () => {\n croct.unplug();\n };\n }, []);\n\n return (\n <CroctContext.Provider value={context}>\n {children}\n </CroctContext.Provider>\n );\n};\n","export type EntryLoader<R> = (...args: any) => Promise<R>;\n\nexport type EntryOptions<R> = {\n cacheKey: string,\n loader: EntryLoader<R>,\n fallback?: R,\n expiration?: number,\n};\n\ntype Entry<R = any> = {\n promise: Promise<any>,\n result?: R,\n dispose: () => void,\n timeout?: number,\n error?: any,\n};\n\nexport class Cache {\n private readonly cache: Record<string, Entry> = {};\n\n private readonly defaultExpiration: number;\n\n public constructor(defaultExpiration: number) {\n this.defaultExpiration = defaultExpiration;\n }\n\n public load<R>(configuration: EntryOptions<R>): R {\n const {cacheKey, loader, fallback, expiration = this.defaultExpiration} = configuration;\n\n const cachedEntry = this.get<R>(cacheKey);\n\n if (cachedEntry !== undefined) {\n if (cachedEntry.error !== undefined) {\n if (fallback !== undefined) {\n return fallback;\n }\n\n throw cachedEntry.error;\n }\n\n if (cachedEntry.result !== undefined) {\n return cachedEntry.result;\n }\n\n throw cachedEntry.promise;\n }\n\n const entry: Entry<R> = {\n dispose: () => {\n if (entry.timeout !== undefined || expiration < 0) {\n return;\n }\n\n entry.timeout = window.setTimeout(\n (): void => {\n delete this.cache[cacheKey];\n },\n expiration,\n );\n },\n promise: loader()\n .then((result): R => {\n entry.result = result;\n\n return result;\n })\n .catch(error => {\n entry.error = error;\n })\n .finally(() => {\n entry.dispose();\n }),\n };\n\n this.cache[cacheKey] = entry;\n\n throw entry.promise;\n }\n\n public get<R>(cacheKey: string): Entry<R>|undefined {\n const entry = this.cache[cacheKey];\n\n if (entry === undefined) {\n return undefined;\n }\n\n if (entry.timeout !== undefined) {\n clearTimeout(entry.timeout);\n\n delete entry.timeout;\n\n entry.dispose();\n }\n\n return entry;\n }\n}\n","import {useEffect, useState} from 'react';\nimport {Cache, EntryOptions} from './Cache';\n\nconst cache = new Cache(60 * 1000);\n\nexport type CacheOptions<R> = EntryOptions<R> & {\n initial?: R,\n};\n\nexport function useLoader<R>({initial, ...options}: CacheOptions<R>): R {\n const loadedValue: R|undefined = cache.get<R>(options.cacheKey)?.result;\n const [value, setValue] = useState(loadedValue !== undefined ? loadedValue : initial);\n const [isUnmounted, setUnmounted] = useState(false);\n\n useEffect(\n () => {\n if (initial !== undefined) {\n try {\n setValue(cache.load(options));\n } catch (result: unknown) {\n if (result instanceof Promise) {\n result.then((resolvedValue: R) => {\n if (!isUnmounted) {\n setValue(resolvedValue);\n }\n });\n\n return;\n }\n\n setValue(undefined);\n\n return;\n }\n }\n\n return () => {\n setUnmounted(true);\n };\n },\n [],\n );\n\n if (value === undefined) {\n return cache.load(options);\n }\n\n return value;\n}\n","import {Plug} from '@croct/plug';\nimport {useContext} from 'react';\nimport {CroctContext} from '../CroctProvider';\n\nexport function useCroct(): Plug {\n const context = useContext(CroctContext);\n\n if (context === null) {\n throw new Error('useCroct() can only be used in the context of a <CroctProvider> component.');\n }\n\n return context.plug;\n}\n","import {JsonValue} from '@croct/plug/sdk/json';\nimport {EvaluationOptions} from '@croct/sdk/facade/evaluatorFacade';\nimport {useLoader} from './useLoader';\nimport {useCroct} from './useCroct';\nimport {isSsr} from '../ssr-polyfills';\n\nfunction cleanEvaluationOptions(options: EvaluationOptions): EvaluationOptions {\n const result: EvaluationOptions = {};\n\n for (const [key, value] of Object.entries(options)) {\n if (value !== undefined) {\n result[key] = value;\n }\n }\n\n return result;\n}\n\nexport type UseEvaluationOptions<I, F> = EvaluationOptions & {\n initial?: I,\n fallback?: F,\n cacheKey?: string,\n expiration?: number,\n};\n\ntype UseEvaluationHook = <T extends JsonValue, I = T, F = T>(\n expression: string,\n options?: UseEvaluationOptions<I, F>,\n) => T | I | F;\n\nfunction useCsrEvaluation<T = JsonValue, I = T, F = T>(\n expression: string,\n options: UseEvaluationOptions<I, F> = {},\n): T | I | F {\n const {cacheKey, fallback, initial, expiration, ...evaluationOptions} = options;\n const croct = useCroct();\n\n return useLoader<T | I | F>({\n cacheKey: `useEvaluation:${cacheKey ?? ''}:${expression}:${JSON.stringify(options.attributes ?? '')}`,\n loader: () => croct.evaluate<T & JsonValue>(expression, cleanEvaluationOptions(evaluationOptions)),\n initial: initial,\n fallback: fallback,\n expiration: expiration,\n });\n}\n\nfunction useSsrEvaluation<T = JsonValue, I = T, F = T>(\n _: string,\n {initial}: UseEvaluationOptions<I, F> = {},\n): T | I | F {\n if (initial === undefined) {\n throw new Error('The initial value is required for server-side rendering (SSR).');\n }\n\n return initial;\n}\n\nexport const useEvaluation: UseEvaluationHook = isSsr() ? useSsrEvaluation : useCsrEvaluation;\n","import {SlotContent, SlotId, SlotMap} from '@croct/plug/fetch';\nimport {NullableJsonObject} from '@croct/plug/sdk/json';\nimport {useLoader} from './useLoader';\nimport {useCroct} from './useCroct';\nimport {isSsr} from '../ssr-polyfills';\n\nexport type UseContentOptions<I, F> = {\n fallback?: F,\n initial?: I,\n cacheKey?: string,\n expiration?: number,\n};\n\nfunction useCsrContent<I, F>(id: SlotId, options: UseContentOptions<I, F> = {}): SlotContent<SlotId> | I | F {\n const {fallback, initial, cacheKey, expiration} = options;\n const croct = useCroct();\n\n return useLoader({\n cacheKey: `useContent:${cacheKey ?? ''}:${id}`,\n loader: () => croct.fetch<SlotContent<SlotId>>(id).then(({payload}) => payload),\n initial: initial,\n fallback: fallback,\n expiration: expiration,\n });\n}\n\nfunction useSsrContent<I, F>(_: SlotId, {initial}: UseContentOptions<I, F> = {}): SlotContent<SlotId> | I | F {\n if (initial === undefined) {\n throw new Error('The initial value is required for server-side rendering (SSR).');\n }\n\n return initial;\n}\n\ntype UseContentHook = {\n <P extends NullableJsonObject, I = P, F = P>(\n id: keyof SlotMap extends never ? string : never,\n options?: UseContentOptions<I, F>\n ): P | I | F,\n\n <S extends keyof SlotMap>(\n id: S,\n options?: UseContentOptions<never, never>\n ): SlotContent<S>,\n\n <I, S extends keyof SlotMap>(\n id: S,\n options?: UseContentOptions<I, never>\n ): SlotContent<S> | I,\n\n <F, S extends keyof SlotMap>(\n id: S,\n options?: UseContentOptions<never, F>\n ): SlotContent<S> | F,\n\n <I, F, S extends keyof SlotMap>(\n id: S,\n options?: UseContentOptions<I, F>\n ): SlotContent<S> | I | F,\n};\n\nexport const useContent: UseContentHook = isSsr() ? useSsrContent : useCsrContent;\n","import {ReactChild, ReactElement, Fragment} from 'react';\nimport {JsonValue} from '@croct/plug/sdk/json';\nimport {UseEvaluationOptions, useEvaluation} from '../../hooks';\n\ntype Renderer<T> = (result: T) => ReactChild;\n\nexport type PersonalizationProps<T extends JsonValue = JsonValue, I = T, F = T> = UseEvaluationOptions<I, F> & {\n expression: string,\n children: Renderer<T | I | F>,\n};\n\nexport function Personalization<T extends JsonValue, I, F>(\n props:\n Extract<T | I | F, JsonValue> extends never\n ? PersonalizationProps\n : PersonalizationProps<T, I, F>,\n): ReactElement;\n\nexport function Personalization<I, F>(props: PersonalizationProps<JsonValue, I, F>): ReactElement {\n const {expression, children, ...options} = props;\n const result = useEvaluation(expression, options);\n\n return (<Fragment>{children(result)}</Fragment>);\n}\n","import {Fragment, ReactChild, ReactElement} from 'react';\nimport {SlotContent, SlotId, SlotMap} from '@croct/plug/fetch';\nimport {NullableJsonObject} from '@croct/plug/sdk/json';\nimport {useContent, UseContentOptions} from '../../hooks';\n\ntype Renderer<P> = (props: P) => ReactChild;\n\nexport type SlotProps<P, I = P, F = P, S extends SlotId = SlotId> = UseContentOptions<I, F> & {\n id: S,\n children: Renderer<P | I | F>,\n};\n\ntype SlotComponent = {\n <P, I, F>(\n props:\n Extract<P | I | F, NullableJsonObject> extends never\n ? SlotProps<NullableJsonObject, never, never, keyof SlotMap extends never ? string : never>\n : SlotProps<P, I, F, keyof SlotMap extends never ? string : never>\n ): ReactElement,\n\n <S extends keyof SlotMap>(props: SlotProps<SlotContent<S>, never, never, S>): ReactElement,\n\n <I, S extends keyof SlotMap>(props: SlotProps<SlotContent<S>, I, never, S>): ReactElement,\n\n <F, S extends keyof SlotMap>(props: SlotProps<SlotContent<S>, never, F, S>): ReactElement,\n\n <I, F, S extends keyof SlotMap>(props: SlotProps<SlotContent<S>, I, F, S>): ReactElement,\n\n (props: SlotProps<void, void, void>): ReactElement,\n};\n\nexport const Slot: SlotComponent = <I, F>(props: SlotProps<NullableJsonObject, I, F>): ReactElement => {\n const {id, children, ...options} = props;\n const data: SlotContent<SlotId> | I | F = useContent(id, options);\n\n return <Fragment>{children(data)}</Fragment>;\n};\n"],"names":["isSsr","window","document","createElement","croct","csrPlug","Proxy","get","_","property","Promise","resolve","Error","String","CroctContext","createContext","displayName","CroctProvider","children","configuration","_excluded","parent","useContext","context","useMemo","plug","initialized","useEffect","unplug","_jsx","Provider","value","Cache","constructor","defaultExpiration","cache","load","cacheKey","loader","fallback","expiration","cachedEntry","undefined","error","result","promise","entry","dispose","timeout","setTimeout","then","catch","finally","clearTimeout","useLoader","initial","options","loadedValue","setValue","useState","isUnmounted","setUnmounted","resolvedValue","useCroct","cleanEvaluationOptions","key","Object","entries","useCsrEvaluation","expression","evaluationOptions","JSON","stringify","attributes","evaluate","useSsrEvaluation","useEvaluation","useCsrContent","id","fetch","payload","useSsrContent","useContent","Personalization","props","Fragment","Slot","data"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@croct/plug-react",
-  "version": "0.3.0",
+  "version": "0.4.2",
   "description": "React components and hooks to plug your React applications into Croct.",
   "author": {
     "name": "Croct",
@@ -38,50 +38,55 @@
     "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@croct/plug": "^0.9.0"
+    "@croct/plug": "^0.10.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.13",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@storybook/addon-actions": "^6.2.3",
-    "@storybook/addon-essentials": "^6.4.13",
-    "@storybook/addon-links": "^6.2.3",
-    "@storybook/react": "^6.4.13",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "^7.0.0",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.37",
-    "@types/react": "^16.0.0",
-    "@types/react-dom": "^16.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
+    "@babel/core": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/node": "^16.11.41",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "8.1.0",
-    "eslint": "^7.27.0",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-standard": "^16.0.2",
+    "babel-jest": "^28.1.1",
+    "babel-loader": "^8.2.5",
+    "eslint": "^8.17.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-standard": "^17.0.0",
     "eslint-config-standard-react": "^11.0.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.3.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-n": "^15.2.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-standard": "^5.0.0",
-    "jest": "26.6.0",
-    "jest-environment-node": "^26.6.2",
-    "microbundle": "^0.13.3",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "ts-node": "^10.0.0",
-    "typescript": "^4.1.5",
-    "webpack": "^5.39.1"
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
+    "jest-environment-node": "^28.1.1",
+    "microbundle": "^0.15.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-node": "^10.8.1",
+    "typescript": "^4.7.3",
+    "webpack": "^5.73.0"
   },
   "files": [
     "**/*.js",
+    "**/*.js.map",
     "**/*.ts"
   ]
 }

package/index.modern.js DELETED Viewed

@@ -1,308 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, useEffect, useState, Fragment } from 'react';
-import csrPlug from '@croct/plug';
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-function isSsr() {
-  return typeof window === 'undefined';
-}
-const croct = !isSsr() ? csrPlug : new Proxy(csrPlug, {
-  get(_, property) {
-    switch (property) {
-      case 'initialized':
-        return false;
-      case 'plug':
-        return () => {// no-op
-        };
-      case 'unplug':
-        return () => Promise.resolve();
-      default:
-        throw new Error(`Property croct.${String(property)} is not supported on server-side (SSR). Consider refactoring ` + 'the logic as a side-effect (useEffect) or a client-side callback (onClick, onChange, etc).');
-    }
-  }
-});
-const CroctContext = /*#__PURE__*/createContext(null);
-CroctContext.displayName = 'CroctContext';
-const CroctProvider = _ref => {
-  let {
-    children
-  } = _ref,
-      configuration = _objectWithoutPropertiesLoose(_ref, ["children"]);
-  const parent = useContext(CroctContext);
-  if (parent !== null) {
-    throw new Error('You cannot render <CroctProvider> inside another <CroctProvider>. ' + 'Croct should only be initialized once in the application.');
-  }
-  const context = useMemo(() => ({
-    get plug() {
-      if (!croct.initialized) {
-        croct.plug(configuration);
-      }
-      return croct;
-    }
-  }), [configuration]);
-  useEffect(() => {
-    croct.plug(configuration);
-    return () => {
-      croct.unplug();
-    };
-  }, []);
-  return jsx(CroctContext.Provider, Object.assign({
-    value: context
-  }, {
-    children: children
-  }), void 0);
-};
-class Cache {
-  constructor(defaultExpiration) {
-    this.cache = {};
-    this.defaultExpiration = void 0;
-    this.defaultExpiration = defaultExpiration;
-  }
-  load(configuration) {
-    const {
-      cacheKey,
-      loader,
-      fallback,
-      expiration = this.defaultExpiration
-    } = configuration;
-    const cachedEntry = this.get(cacheKey);
-    if (cachedEntry !== undefined) {
-      if (cachedEntry.error !== undefined) {
-        if (fallback !== undefined) {
-          return fallback;
-        }
-        throw cachedEntry.error;
-      }
-      if (cachedEntry.result !== undefined) {
-        return cachedEntry.result;
-      }
-      throw cachedEntry.promise;
-    }
-    const entry = {
-      dispose: () => {
-        if (entry.timeout !== undefined || expiration < 0) {
-          return;
-        }
-        entry.timeout = window.setTimeout(() => {
-          delete this.cache[cacheKey];
-        }, expiration);
-      },
-      promise: loader().then(result => {
-        entry.result = result;
-        return result;
-      }).catch(error => {
-        entry.error = error;
-      }).finally(() => {
-        entry.dispose();
-      })
-    };
-    this.cache[cacheKey] = entry;
-    throw entry.promise;
-  }
-  get(cacheKey) {
-    const entry = this.cache[cacheKey];
-    if (entry === undefined) {
-      return undefined;
-    }
-    if (entry.timeout !== undefined) {
-      clearTimeout(entry.timeout);
-      delete entry.timeout;
-      entry.dispose();
-    }
-    return entry;
-  }
-}
-const cache = new Cache(60 * 1000);
-function useLoader(_ref) {
-  var _cache$get;
-  let {
-    initial
-  } = _ref,
-      options = _objectWithoutPropertiesLoose(_ref, ["initial"]);
-  const loadedValue = (_cache$get = cache.get(options.cacheKey)) == null ? void 0 : _cache$get.result;
-  const [value, setValue] = useState(loadedValue !== undefined ? loadedValue : initial);
-  const [isUnmounted, setUnmounted] = useState(false);
-  useEffect(() => {
-    if (initial !== undefined) {
-      try {
-        setValue(cache.load(options));
-      } catch (result) {
-        if (typeof (result == null ? void 0 : result.then) !== 'function') {
-          setValue(undefined);
-          return;
-        }
-        result.then(resolvedValue => {
-          if (!isUnmounted) {
-            setValue(resolvedValue);
-          }
-        });
-      }
-    }
-    return () => {
-      setUnmounted(true);
-    };
-  }, []);
-  if (value === undefined) {
-    return cache.load(options);
-  }
-  return value;
-}
-function useCroct() {
-  const context = useContext(CroctContext);
-  if (context === null) {
-    throw new Error('useCroct() can only be used in the context of a <CroctProvider> component.');
-  }
-  return context.plug;
-}
-function cleanEvaluationOptions(options) {
-  const result = {};
-  for (const [key, value] of Object.entries(options)) {
-    if (value !== undefined) {
-      result[key] = value;
-    }
-  }
-  return result;
-}
-function useCsrEvaluation(expression, options = {}) {
-  var _options$attributes;
-  const {
-    cacheKey,
-    fallback,
-    initial,
-    expiration
-  } = options,
-        evaluationOptions = _objectWithoutPropertiesLoose(options, ["cacheKey", "fallback", "initial", "expiration"]);
-  const croct = useCroct();
-  return useLoader({
-    cacheKey: `useEvaluation:${cacheKey != null ? cacheKey : ''}:${expression}:${JSON.stringify((_options$attributes = options.attributes) != null ? _options$attributes : '')}`,
-    loader: () => croct.evaluate(expression, cleanEvaluationOptions(evaluationOptions)),
-    initial: initial,
-    fallback: fallback,
-    expiration: expiration
-  });
-}
-function useSsrEvaluation(_, {
-  initial
-} = {}) {
-  if (initial === undefined) {
-    throw new Error('The initial value is required for server-side rendering (SSR).');
-  }
-  return initial;
-}
-const useEvaluation = isSsr() ? useSsrEvaluation : useCsrEvaluation;
-function useCsrContent(id, options = {}) {
-  const {
-    fallback,
-    initial,
-    cacheKey,
-    expiration
-  } = options;
-  const croct = useCroct();
-  return useLoader({
-    cacheKey: `useContent:${cacheKey != null ? cacheKey : ''}:${id}`,
-    loader: () => croct.fetch(id).then(({
-      payload
-    }) => payload),
-    initial: initial,
-    fallback: fallback,
-    expiration: expiration
-  });
-}
-function useSsrContent(_, {
-  initial
-} = {}) {
-  if (initial === undefined) {
-    throw new Error('The initial value is required for server-side rendering (SSR).');
-  }
-  return initial;
-}
-const useContent = isSsr() ? useSsrContent : useCsrContent;
-function Personalization(props) {
-  const {
-    expression,
-    children
-  } = props,
-        options = _objectWithoutPropertiesLoose(props, ["expression", "children"]);
-  const result = useEvaluation(expression, options);
-  return jsx(Fragment, {
-    children: children(result)
-  }, void 0);
-}
-const Slot = props => {
-  const {
-    id,
-    children
-  } = props,
-        options = _objectWithoutPropertiesLoose(props, ["id", "children"]);
-  const data = useContent(id, options);
-  return jsx(Fragment, {
-    children: children(data)
-  }, void 0);
-};
-export { CroctContext, CroctProvider, Personalization, Slot, useContent, useCroct, useEvaluation };
-//# sourceMappingURL=index.modern.js.map