@contentful/experiences-sdk-react 1.0.2 → 1.0.3-beta.0
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.
- package/README.md +4 -106
- package/dist/index.js +8 -5
- package/dist/index.js.map +1 -1
- package/dist/src/sdkVersion.d.ts +1 -1
- package/dist/test/__fixtures__/assembly.d.ts +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,113 +1,11 @@
|
|
|
1
1
|
# @contentful/experiences-sdk-react
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## Documentation
|
|
6
|
-
|
|
7
|
-
Please find more information about this sdk [on our Wiki page](https://github.com/contentful/experience-builder/wiki)
|
|
3
|
+
This package provides the core SDK for Contentful Studio Experiences. It offers a set of tools and services that enable developers to build, manage, and enhance experiences.
|
|
8
4
|
|
|
9
5
|
## Installation
|
|
10
6
|
|
|
11
|
-
|
|
12
|
-
npm install @contentful/experiences-sdk-react
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Example Component:
|
|
16
|
-
|
|
17
|
-
```tsx
|
|
18
|
-
function MyButton({ buttonTitle, buttonUrl, ...props }) {
|
|
19
|
-
// WARNING:
|
|
20
|
-
// - you must spread the props as last argument to enable canvas interactions and proper rendering on canvas
|
|
21
|
-
// - be sure to ensure that onClick handlers are above the {...props} spreading so that they are stubbed
|
|
22
|
-
// during EDITOR mode
|
|
23
|
-
return (
|
|
24
|
-
<button onClick={() => (window.location.href = buttonUrl)} {...props}>
|
|
25
|
-
{buttonTitle}
|
|
26
|
-
</button>
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Setup example
|
|
32
|
-
|
|
33
|
-
Please find more setup examples [on a dedicated Wiki page](https://github.com/contentful/experience-builder/wiki/Setup-examples)
|
|
34
|
-
|
|
35
|
-
```tsx
|
|
36
|
-
import {
|
|
37
|
-
defineComponents,
|
|
38
|
-
defineDesignTokens,
|
|
39
|
-
ExperienceRoot,
|
|
40
|
-
useFetchBySlug,
|
|
41
|
-
} from '@contentful/experiences-sdk-react';
|
|
42
|
-
|
|
43
|
-
import { createClient } from 'contentful';
|
|
7
|
+
Please follow the guide to [Set up Experiences SDK](https://www.contentful.com/developers/docs/experiences/set-up-experiences-sdk/).
|
|
44
8
|
|
|
45
|
-
|
|
46
|
-
import { MyButton } from './components/MyButton';
|
|
47
|
-
|
|
48
|
-
const client = createClient({
|
|
49
|
-
space: 'YOUR_SPACE_ID',
|
|
50
|
-
environment: 'YOUR_ENVIRONMENT_ID',
|
|
51
|
-
host: 'preview.contentful.com', // Supported values: 'preview.contentful.com' or 'cdn.contentful.com',
|
|
52
|
-
accessToken: 'YOUR_PREVIEW_OR_DELIVERY_TOKEN', // needs to be preview token if host = 'preview.contentful.com' and delivery token if 'cdn.contentful.com'
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
// 1. Define components outside of React
|
|
56
|
-
defineComponents([
|
|
57
|
-
{
|
|
58
|
-
component: MyButton, // example component defined above in this file
|
|
59
|
-
definition: {
|
|
60
|
-
id: 'my-button',
|
|
61
|
-
name: 'MyButton',
|
|
62
|
-
variables: {
|
|
63
|
-
buttonTitle: { type: 'Text', defaultValue: 'Click me' },
|
|
64
|
-
buttonUrl: {
|
|
65
|
-
type: 'Text',
|
|
66
|
-
defaultValue: 'https://www.contentful.com/',
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
]);
|
|
72
|
-
|
|
73
|
-
// 2. Define design tokens (optional)
|
|
74
|
-
defineDesignTokens({
|
|
75
|
-
spacing: { XS: '4px', S: '16px', M: '32px', L: '64px', XL: '128px' },
|
|
76
|
-
color: { Slate: '#94a3b8', Azure: 'azure', Orange: '#fdba74' },
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
const Home = () => {
|
|
80
|
-
|
|
81
|
-
// You could pull these values from your router, state, etc...
|
|
82
|
-
const localeCode = 'en-US'; // the initial locale to use
|
|
83
|
-
const slug = 'homePage'; // the slug of the experience to fetch
|
|
84
|
-
const experienceTypeId = 'layout'; // the content id of the experience to fetch
|
|
85
|
-
|
|
86
|
-
// 3. Fetch the experience
|
|
87
|
-
const { experience, error, isLoading } = useFetchBySlug({
|
|
88
|
-
client,
|
|
89
|
-
slug,
|
|
90
|
-
experienceTypeId,
|
|
91
|
-
localeCode,
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
// 4. Handle loading state
|
|
95
|
-
if(isLoading) {
|
|
96
|
-
return <div>Loading...</div>
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// 5. Handle errors
|
|
100
|
-
if (error) {
|
|
101
|
-
return <div>{error.message}</div>;
|
|
102
|
-
}
|
|
9
|
+
## Documentation
|
|
103
10
|
|
|
104
|
-
|
|
105
|
-
return (
|
|
106
|
-
<ExperienceRoot
|
|
107
|
-
experience={experience}
|
|
108
|
-
// The locale that will appear on the website first
|
|
109
|
-
locale={locale}
|
|
110
|
-
/>
|
|
111
|
-
);
|
|
112
|
-
};
|
|
113
|
-
```
|
|
11
|
+
Please refer to our [Documentation](https://www.contentful.com/developers/docs/experiences/) to learn more about it.
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ import * as Components from '@contentful/experiences-components-react';
|
|
|
9
9
|
import { ContentfulContainer, Columns, SingleColumn } from '@contentful/experiences-components-react';
|
|
10
10
|
import styleInject from 'style-inject';
|
|
11
11
|
|
|
12
|
-
const SDK_VERSION = '1.0.2
|
|
12
|
+
const SDK_VERSION = '1.0.2';
|
|
13
13
|
|
|
14
14
|
var util;
|
|
15
15
|
(function (util) {
|
|
@@ -4027,8 +4027,10 @@ var z = /*#__PURE__*/Object.freeze({
|
|
|
4027
4027
|
ZodError: ZodError
|
|
4028
4028
|
});
|
|
4029
4029
|
|
|
4030
|
-
|
|
4031
|
-
|
|
4030
|
+
// If more than one version is supported, use z.union
|
|
4031
|
+
const SchemaVersions = z.literal('2023-09-28');
|
|
4032
|
+
// Keep deprecated versions here just for reference
|
|
4033
|
+
z.union([
|
|
4032
4034
|
z.literal('2023-08-23'),
|
|
4033
4035
|
z.literal('2023-07-26'),
|
|
4034
4036
|
z.literal('2023-06-27'),
|
|
@@ -4043,6 +4045,7 @@ const DefinitionPropertyTypeSchema = z.enum([
|
|
|
4043
4045
|
'Location',
|
|
4044
4046
|
'Media',
|
|
4045
4047
|
'Object',
|
|
4048
|
+
'Hyperlink',
|
|
4046
4049
|
]);
|
|
4047
4050
|
const DefinitionPropertyKeySchema = z
|
|
4048
4051
|
.string()
|
|
@@ -4372,7 +4375,7 @@ function withComponentWrapper(Component, options = {
|
|
|
4372
4375
|
}
|
|
4373
4376
|
|
|
4374
4377
|
// this is the array of version which currently LATEST_SCHEMA_VERSION is compatible with
|
|
4375
|
-
const compatibleVersions = ['2023-
|
|
4378
|
+
const compatibleVersions = ['2023-09-28'];
|
|
4376
4379
|
|
|
4377
4380
|
const cloneObject = (targetObject) => {
|
|
4378
4381
|
if (typeof structuredClone !== 'undefined') {
|
|
@@ -4923,7 +4926,7 @@ const PreviewDeliveryRoot = ({ locale, experience }) => {
|
|
|
4923
4926
|
return null;
|
|
4924
4927
|
}
|
|
4925
4928
|
if (!compatibleVersions.includes(entityStore.schemaVersion)) {
|
|
4926
|
-
console.warn(`[experiences-sdk-react] Contentful
|
|
4929
|
+
console.warn(`[experiences-sdk-react] Contentful experience schema version: ${entityStore.schemaVersion} does not match the compatible schema versions: ${compatibleVersions}. Aborting.`);
|
|
4927
4930
|
return null;
|
|
4928
4931
|
}
|
|
4929
4932
|
return (jsx(Fragment, { children: entityStore.experienceEntryFields.componentTree.children.map((childNode, index) => (jsx(CompositionBlock, { node: childNode, locale: locale, entityStore: entityStore, resolveDesignValue: resolveDesignValue }, index))) }));
|