@alpaca-headless/alpaca-headless 1.0.3397
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/.eslintrc.json +3 -0
- package/dist/client-components/ClientLink.d.ts +7 -0
- package/dist/client-components/ClientLink.js +20 -0
- package/dist/client-components/index.d.ts +1 -0
- package/dist/client-components/index.js +1 -0
- package/dist/components/Error.d.ts +1 -0
- package/dist/components/Error.js +7 -0
- package/dist/components/LazyPlaceholder.d.ts +6 -0
- package/dist/components/LazyPlaceholder.js +15 -0
- package/dist/components/Placeholder.d.ts +30 -0
- package/dist/components/Placeholder.js +123 -0
- package/dist/components/Slot.d.ts +7 -0
- package/dist/components/Slot.js +6 -0
- package/dist/components/Translate.d.ts +7 -0
- package/dist/components/Translate.js +17 -0
- package/dist/components/field-renderers/Link.d.ts +8 -0
- package/dist/components/field-renderers/Link.js +29 -0
- package/dist/components/field-renderers/Picture.d.ts +22 -0
- package/dist/components/field-renderers/Picture.js +140 -0
- package/dist/components/field-renderers/RichText.d.ts +7 -0
- package/dist/components/field-renderers/RichText.js +30 -0
- package/dist/components/field-renderers/Text.d.ts +7 -0
- package/dist/components/field-renderers/Text.js +24 -0
- package/dist/configuration.d.ts +17 -0
- package/dist/configuration.js +4 -0
- package/dist/index.d.ts +23 -0
- package/dist/index.js +15 -0
- package/dist/internals/index.d.ts +5 -0
- package/dist/internals/index.js +2 -0
- package/dist/middleware/handleRequest.d.ts +7 -0
- package/dist/middleware/handleRequest.js +38 -0
- package/dist/middleware/index.d.ts +1 -0
- package/dist/middleware/index.js +1 -0
- package/dist/picture-shared.d.ts +16 -0
- package/dist/picture-shared.js +26 -0
- package/dist/render-context.d.ts +47 -0
- package/dist/render-context.js +33 -0
- package/dist/renderings/renderings.d.ts +7 -0
- package/dist/renderings/renderings.js +22 -0
- package/dist/renderings/tailwind.d.ts +1 -0
- package/dist/renderings/tailwind.js +43 -0
- package/dist/route-data/dictionary.d.ts +2 -0
- package/dist/route-data/dictionary.js +31 -0
- package/dist/route-data/resolve-route.d.ts +44 -0
- package/dist/route-data/resolve-route.js +123 -0
- package/dist/route-data/route-data.d.ts +41 -0
- package/dist/route-data/route-data.js +1 -0
- package/dist/services/api.d.ts +18 -0
- package/dist/services/api.js +103 -0
- package/dist/services/graphQL.d.ts +29 -0
- package/dist/services/graphQL.js +54 -0
- package/dist/types/fetch.d.ts +7 -0
- package/dist/types/fetch.js +1 -0
- package/dist/types/fieldTypes.d.ts +106 -0
- package/dist/types/fieldTypes.js +1 -0
- package/dist/types/items.d.ts +56 -0
- package/dist/types/items.js +1 -0
- package/dist/types/layoutDataTypes.d.ts +142 -0
- package/dist/types/layoutDataTypes.js +1 -0
- package/dist/utils/media-protection.d.ts +3 -0
- package/dist/utils/media-protection.js +49 -0
- package/next.config.mjs +4 -0
- package/package.json +61 -0
- package/postcss.config.js +6 -0
- package/src/client-components/ClientLink.tsx +33 -0
- package/src/client-components/index.ts +1 -0
- package/src/components/Error.tsx +56 -0
- package/src/components/LazyPlaceholder.tsx +35 -0
- package/src/components/Placeholder.tsx +312 -0
- package/src/components/Slot.tsx +22 -0
- package/src/components/Translate.tsx +32 -0
- package/src/components/field-renderers/Link.tsx +38 -0
- package/src/components/field-renderers/Picture.tsx +251 -0
- package/src/components/field-renderers/RichText.tsx +48 -0
- package/src/components/field-renderers/Text.tsx +32 -0
- package/src/configuration.ts +30 -0
- package/src/index.ts +84 -0
- package/src/internals/index.ts +7 -0
- package/src/middleware/handleRequest.ts +54 -0
- package/src/middleware/index.ts +1 -0
- package/src/picture-shared.ts +53 -0
- package/src/render-context.ts +123 -0
- package/src/renderings/renderings.tsx +44 -0
- package/src/renderings/tailwind.ts +53 -0
- package/src/route-data/dictionary.ts +56 -0
- package/src/route-data/resolve-route.ts +332 -0
- package/src/route-data/route-data.ts +51 -0
- package/src/services/api.ts +142 -0
- package/src/services/graphQL.ts +106 -0
- package/src/types/fetch.ts +8 -0
- package/src/types/fieldTypes.ts +127 -0
- package/src/types/items.ts +66 -0
- package/src/types/layoutDataTypes.ts +145 -0
- package/src/utils/media-protection.ts +61 -0
- package/tailwind.config.js +17 -0
- package/tailwind.config.ts +20 -0
- package/tsconfig.json +28 -0
package/.eslintrc.json
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LinkField } from "../types/fieldTypes";
|
|
3
|
+
export declare function ClientLink({ field, children, ...props }: {
|
|
4
|
+
field: LinkField;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
editable?: boolean;
|
|
7
|
+
} & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
export function ClientLink(_a) {
|
|
15
|
+
var { field, children } = _a, props = __rest(_a, ["field", "children"]);
|
|
16
|
+
const descriptor = field.descriptor;
|
|
17
|
+
const editProps = descriptor
|
|
18
|
+
? Object.assign(Object.assign({}, props), { "data-fieldid": descriptor.fieldId, "data-itemid": descriptor.item.id, "data-language": descriptor.item.language, "data-version": descriptor.item.version }) : props;
|
|
19
|
+
return (_jsx("a", Object.assign({ href: field.value.url }, editProps, { onClick: (e) => e.preventDefault(), children: children })));
|
|
20
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ClientLink } from "./ClientLink";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ClientLink } from "./ClientLink";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function ErrorFallback(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
// import { EditContextType } from "../editor/editContext";
|
|
4
|
+
export function ErrorFallback() {
|
|
5
|
+
// Call resetErrorBoundary() to reset the error boundary and retry the render.
|
|
6
|
+
return (_jsx("div", { role: "alert", children: _jsx("p", { children: "Something went wrong." }) }));
|
|
7
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ServerRenderContext } from "../render-context";
|
|
2
|
+
import { PlaceholderData } from "../types/layoutDataTypes";
|
|
3
|
+
export declare function LazyPlaceholder({ placeholder, context, }: {
|
|
4
|
+
context: ServerRenderContext;
|
|
5
|
+
placeholder: PlaceholderData;
|
|
6
|
+
}): Promise<import("react/jsx-runtime").JSX.Element | null>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { loadPartialLayout } from "../route-data/resolve-route";
|
|
3
|
+
import { Placeholder } from "./Placeholder";
|
|
4
|
+
export async function LazyPlaceholder({ placeholder, context, }) {
|
|
5
|
+
const data = await loadPartialLayout(context.page.id, context.page.language, context.page.version, placeholder.parentComponent
|
|
6
|
+
? {
|
|
7
|
+
id: placeholder.parentComponent.id,
|
|
8
|
+
language: placeholder.parentComponent.language,
|
|
9
|
+
version: placeholder.parentComponent.version,
|
|
10
|
+
}
|
|
11
|
+
: undefined, placeholder.key, context.renderOptions, context.page.site.name, context.mode);
|
|
12
|
+
if (data == null)
|
|
13
|
+
return null;
|
|
14
|
+
return (_jsx(Placeholder, { name: placeholder.key, content: data.page, context: context }));
|
|
15
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import "server-only";
|
|
2
|
+
import { ComponentData, Page, PlaceholderData } from "../types/layoutDataTypes";
|
|
3
|
+
import { RenderingProps, ServerRenderContext } from "../render-context";
|
|
4
|
+
import React from "react";
|
|
5
|
+
export type PlaceholderComponent = {
|
|
6
|
+
Component: ({ component, context, }: {
|
|
7
|
+
component: ComponentData;
|
|
8
|
+
context: ServerRenderContext;
|
|
9
|
+
}) => React.JSX.Element;
|
|
10
|
+
props: any;
|
|
11
|
+
data: ComponentData | {
|
|
12
|
+
name: string;
|
|
13
|
+
id: string;
|
|
14
|
+
};
|
|
15
|
+
parent: Page | ComponentData | undefined;
|
|
16
|
+
};
|
|
17
|
+
export declare function Placeholder({ name, content, tag, className, description, mapComponent, getComponentProps, context, }: {
|
|
18
|
+
name: string;
|
|
19
|
+
description?: string;
|
|
20
|
+
context: ServerRenderContext;
|
|
21
|
+
mapComponent?: ({ data, index, }: {
|
|
22
|
+
data: ComponentData;
|
|
23
|
+
index: number;
|
|
24
|
+
}) => string;
|
|
25
|
+
tag?: string;
|
|
26
|
+
className?: string;
|
|
27
|
+
content: Page | ComponentData;
|
|
28
|
+
getComponentProps?: ({ component, context, index, count, }: RenderingProps) => any;
|
|
29
|
+
}): Promise<JSX.Element | undefined>;
|
|
30
|
+
export declare function renderPlaceholder(wrap: (children: JSX.Element) => JSX.Element, componentsWithProps: PlaceholderComponent[], placeholderData: PlaceholderData, context: ServerRenderContext, description?: string): JSX.Element;
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { createElement as _createElement } from "react";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import "server-only";
|
|
4
|
+
import Slot from "./Slot";
|
|
5
|
+
import React, { Suspense } from "react";
|
|
6
|
+
import { ErrorBoundary } from "react-error-boundary";
|
|
7
|
+
import { LazyPlaceholder } from "./LazyPlaceholder";
|
|
8
|
+
import { ErrorFallback } from "./Error";
|
|
9
|
+
import { v4 as uuid } from "uuid";
|
|
10
|
+
export async function Placeholder({ name, content, tag, className, description, mapComponent, getComponentProps, context, }) {
|
|
11
|
+
const parentData = content;
|
|
12
|
+
if (!name)
|
|
13
|
+
throw new Error("Placeholder: Name property is missing or empty.");
|
|
14
|
+
if (!context)
|
|
15
|
+
throw new Error("Placeholder " + name + ": No context provided.");
|
|
16
|
+
if (!content)
|
|
17
|
+
throw new Error("Placeholder " + name + ": No content provided.");
|
|
18
|
+
if (!parentData || !("placeholders" in parentData))
|
|
19
|
+
return;
|
|
20
|
+
const placeholderData = parentData.placeholders.find((x) => x.name == name);
|
|
21
|
+
if (!placeholderData)
|
|
22
|
+
return;
|
|
23
|
+
const componentPromises = placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.components.filter((c) => c.visible).map(async (component, index) => {
|
|
24
|
+
if (component.componentType == "Slot")
|
|
25
|
+
return {
|
|
26
|
+
Component: Slot,
|
|
27
|
+
data: component,
|
|
28
|
+
parent: parentData,
|
|
29
|
+
};
|
|
30
|
+
const componentType = mapComponent
|
|
31
|
+
? mapComponent({ data: component, index })
|
|
32
|
+
: component.componentType;
|
|
33
|
+
if (!context.renderings) {
|
|
34
|
+
console.log("No renderings registered");
|
|
35
|
+
return {
|
|
36
|
+
data: { name: componentType, id: "0" },
|
|
37
|
+
Component: ComponentNotFound,
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
if (component.rendering) {
|
|
41
|
+
const rendering = await context.resolveRendering(component.rendering);
|
|
42
|
+
if (rendering) {
|
|
43
|
+
return {
|
|
44
|
+
parent: parentData,
|
|
45
|
+
data: component,
|
|
46
|
+
Component: rendering,
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
const reactComponent = context.renderings[componentType];
|
|
51
|
+
if (!reactComponent) {
|
|
52
|
+
if (component.defaultRendering) {
|
|
53
|
+
const rendering = await context.resolveRendering(component.defaultRendering);
|
|
54
|
+
if (rendering) {
|
|
55
|
+
return {
|
|
56
|
+
parent: parentData,
|
|
57
|
+
data: component,
|
|
58
|
+
Component: rendering,
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
console.log("Could not find module for component type: " + componentType);
|
|
63
|
+
return {
|
|
64
|
+
data: { name: "unknown-type-" + componentType, id: uuid() },
|
|
65
|
+
Component: ComponentNotFound,
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
return {
|
|
69
|
+
parent: parentData,
|
|
70
|
+
data: component,
|
|
71
|
+
Component: reactComponent,
|
|
72
|
+
};
|
|
73
|
+
});
|
|
74
|
+
const components = await Promise.all(componentPromises);
|
|
75
|
+
function wrap(children) {
|
|
76
|
+
if (!tag)
|
|
77
|
+
return children;
|
|
78
|
+
if (context.isEditing || components.length > 0) {
|
|
79
|
+
return React.createElement(tag, { className }, children);
|
|
80
|
+
}
|
|
81
|
+
return children;
|
|
82
|
+
}
|
|
83
|
+
const componentsWithProps = components.map(({ Component, data, parent }, index) => {
|
|
84
|
+
const defaultProps = {
|
|
85
|
+
component: data,
|
|
86
|
+
context,
|
|
87
|
+
index,
|
|
88
|
+
key: data.id,
|
|
89
|
+
count: components.length,
|
|
90
|
+
};
|
|
91
|
+
var props = getComponentProps
|
|
92
|
+
? getComponentProps(defaultProps)
|
|
93
|
+
: defaultProps;
|
|
94
|
+
return { Component, props, data, parent };
|
|
95
|
+
});
|
|
96
|
+
// if (alpacaHeadless.configuration.placeholderRenderer) {
|
|
97
|
+
// return alpacaHeadless.configuration.placeholderRenderer(
|
|
98
|
+
// wrap,
|
|
99
|
+
// componentsWithProps,
|
|
100
|
+
// description,
|
|
101
|
+
// placeholderData,
|
|
102
|
+
// parentData,
|
|
103
|
+
// context
|
|
104
|
+
// );
|
|
105
|
+
// }
|
|
106
|
+
return renderPlaceholder(wrap, componentsWithProps, placeholderData, context, description);
|
|
107
|
+
}
|
|
108
|
+
export function renderPlaceholder(wrap, componentsWithProps, placeholderData, context, description) {
|
|
109
|
+
return wrap(_jsxs(_Fragment, { children: [context.isEditing && (_jsx("script", { "data-placeholder-start": placeholderData.key, "data-description": description })), componentsWithProps.map(({ Component, data, props }) => {
|
|
110
|
+
var _a, _b, _c, _d, _e;
|
|
111
|
+
return (_jsx(_Fragment, { children: _jsxs(ErrorBoundary, { FallbackComponent: ErrorFallback, children: [context.isEditing && (_jsx("script", { "data-component-start": data.id, "data-itemid": ((_b = (_a = data._editor) === null || _a === void 0 ? void 0 : _a.linkedComponentItem) === null || _b === void 0 ? void 0 : _b.id) ||
|
|
112
|
+
data.id, "data-layoutid": (_d = (_c = data._editor) === null || _c === void 0 ? void 0 : _c.hostingPageItem) === null || _d === void 0 ? void 0 : _d.id })), _createElement(Component, Object.assign({}, props, { key: data.id })), context.isEditing && (_jsx("script", { "data-component-end": data.id }))] }, "EB" + data.id + ((_e = data.rendering) === null || _e === void 0 ? void 0 : _e.revision)) }));
|
|
113
|
+
}), placeholderData.hasMore && (_jsx(Suspense, { children: _jsx(LazyPlaceholder, { placeholder: placeholderData, context: context }) })), context.isEditing && (_jsx("script", { "data-placeholder-end": placeholderData.key }))] }));
|
|
114
|
+
}
|
|
115
|
+
function ComponentNotFound({ component }) {
|
|
116
|
+
return (_jsxs("div", { style: {
|
|
117
|
+
backgroundColor: "orange",
|
|
118
|
+
color: "red",
|
|
119
|
+
fontSize: 18,
|
|
120
|
+
padding: 10,
|
|
121
|
+
border: "3px solid red",
|
|
122
|
+
}, children: ["Component not found: ", component.name] }));
|
|
123
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import "server-only";
|
|
2
|
+
import { ComponentData } from "../types/layoutDataTypes";
|
|
3
|
+
import { ServerRenderContext } from "../render-context";
|
|
4
|
+
export default function Slot({ component, context, }: {
|
|
5
|
+
component: ComponentData;
|
|
6
|
+
context: ServerRenderContext;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import "server-only";
|
|
3
|
+
import { Placeholder } from "./Placeholder";
|
|
4
|
+
export default function Slot({ component, context, }) {
|
|
5
|
+
return (_jsx(_Fragment, { children: _jsx(Placeholder, { name: "ph-slot-content", content: component, context: context }) }));
|
|
6
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import "server-only";
|
|
2
|
+
import { ServerRenderContext } from "../render-context";
|
|
3
|
+
export declare function Translate({ textKey, context, transform, }: {
|
|
4
|
+
textKey: string;
|
|
5
|
+
context: ServerRenderContext;
|
|
6
|
+
transform?: (text: string) => string;
|
|
7
|
+
}): string | import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "server-only";
|
|
3
|
+
export function Translate({ textKey, context, transform, }) {
|
|
4
|
+
var _a;
|
|
5
|
+
const dictionary = context.dictionary;
|
|
6
|
+
// if (context.translationRenderer)
|
|
7
|
+
// return context.translationRenderer(text, context);
|
|
8
|
+
let resolvedText = ((_a = dictionary[textKey]) === null || _a === void 0 ? void 0 : _a.value) || textKey;
|
|
9
|
+
if (transform) {
|
|
10
|
+
resolvedText = transform(resolvedText);
|
|
11
|
+
}
|
|
12
|
+
if (!context.isEditing) {
|
|
13
|
+
return resolvedText;
|
|
14
|
+
}
|
|
15
|
+
else
|
|
16
|
+
return (_jsxs(_Fragment, { children: [_jsx("script", { "data-dictionary-key-start": textKey }), resolvedText, _jsx("script", { "data-dictionary-key-end": textKey })] }));
|
|
17
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import "server-only";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { LinkField } from "../../types/fieldTypes";
|
|
4
|
+
export declare function Link({ field, children, ...props }: {
|
|
5
|
+
field: LinkField;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
editable?: boolean;
|
|
8
|
+
} & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import "server-only";
|
|
14
|
+
import { ClientLink } from "../../client-components/ClientLink";
|
|
15
|
+
export function Link(_a) {
|
|
16
|
+
var { field, children } = _a, props = __rest(_a, ["field", "children"]);
|
|
17
|
+
if (field === null || field === void 0 ? void 0 : field.jsonValue) {
|
|
18
|
+
field = field.jsonValue;
|
|
19
|
+
}
|
|
20
|
+
if (!field)
|
|
21
|
+
return null;
|
|
22
|
+
if (!(field === null || field === void 0 ? void 0 : field.value))
|
|
23
|
+
return;
|
|
24
|
+
const descriptor = field.descriptor;
|
|
25
|
+
if (descriptor) {
|
|
26
|
+
return (_jsx(ClientLink, Object.assign({ field: field }, props, { children: children })));
|
|
27
|
+
}
|
|
28
|
+
return (_jsx("a", Object.assign({ href: field.value.url }, props, { children: children })));
|
|
29
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import "server-only";
|
|
2
|
+
import { ImgHTMLAttributes } from "react";
|
|
3
|
+
import { MediaPictureParams, PictureParams } from "../../picture-shared";
|
|
4
|
+
import { PictureField } from "../../types/fieldTypes";
|
|
5
|
+
export interface PictureSource {
|
|
6
|
+
media: string;
|
|
7
|
+
variant: string;
|
|
8
|
+
widths?: number[];
|
|
9
|
+
width?: number;
|
|
10
|
+
scales?: number[];
|
|
11
|
+
}
|
|
12
|
+
export interface PictureProps extends ImgHTMLAttributes<HTMLImageElement> {
|
|
13
|
+
[attributeName: string]: unknown;
|
|
14
|
+
field: PictureField;
|
|
15
|
+
params?: PictureParams | MediaPictureParams;
|
|
16
|
+
renderEditButton?: boolean;
|
|
17
|
+
renderJsonLinkedData?: boolean;
|
|
18
|
+
editable?: boolean;
|
|
19
|
+
tag?: string;
|
|
20
|
+
defaultVariant?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function Picture({ field, params, renderJsonLinkedData, renderEditButton, defaultVariant, ...otherProps }: PictureProps): import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
+
import "server-only";
|
|
14
|
+
import { getRenderedPictureVariant, } from "../../picture-shared";
|
|
15
|
+
import { hashImageUrl } from "../../utils/media-protection";
|
|
16
|
+
export function Picture(_a) {
|
|
17
|
+
var _b, _c, _d, _e, _f, _g, _h;
|
|
18
|
+
var { field, params, renderJsonLinkedData, renderEditButton, defaultVariant } = _a, otherProps = __rest(_a, ["field", "params", "renderJsonLinkedData", "renderEditButton", "defaultVariant"]);
|
|
19
|
+
if (!field)
|
|
20
|
+
return null;
|
|
21
|
+
if (field.jsonValue) {
|
|
22
|
+
field = field.jsonValue;
|
|
23
|
+
}
|
|
24
|
+
const isEditMode = !!field.descriptor;
|
|
25
|
+
const descriptor = field.descriptor;
|
|
26
|
+
if (descriptor) {
|
|
27
|
+
otherProps["data-fieldid"] = descriptor.fieldId;
|
|
28
|
+
otherProps["data-itemid"] = descriptor.item.id;
|
|
29
|
+
otherProps["data-language"] = descriptor.item.language;
|
|
30
|
+
otherProps["data-version"] = descriptor.item.version;
|
|
31
|
+
}
|
|
32
|
+
const variants = ((_b = field.value) === null || _b === void 0 ? void 0 : _b.variants) || [];
|
|
33
|
+
if (!(variants === null || variants === void 0 ? void 0 : variants.length) && !isEditMode) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
const mediaParams = typeof params === "object" && "default" in params ? params : undefined;
|
|
37
|
+
const defaultParams = (_d = (_c = mediaParams === null || mediaParams === void 0 ? void 0 : mediaParams.default) !== null && _c !== void 0 ? _c : params) !== null && _d !== void 0 ? _d : { variant: "auto" };
|
|
38
|
+
const sources = Object.keys(mediaParams !== null && mediaParams !== void 0 ? mediaParams : {}).filter((x) => x != "default");
|
|
39
|
+
const videoVariants = variants === null || variants === void 0 ? void 0 : variants.filter((f) => f.videoUrl !== null);
|
|
40
|
+
let videoVariantSources = {};
|
|
41
|
+
videoVariants === null || videoVariants === void 0 ? void 0 : videoVariants.forEach((variant) => {
|
|
42
|
+
let key = `data-src-${variant.name.toLowerCase().replace(" ", "")}`;
|
|
43
|
+
videoVariantSources[key] = variant.videoUrl;
|
|
44
|
+
});
|
|
45
|
+
const img = variants.find((x) => x.name.toUpperCase() == (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.toUpperCase())) || variants[0];
|
|
46
|
+
const video = img === null || img === void 0 ? void 0 : img.videoUrl;
|
|
47
|
+
const videoAttr = Object.assign(Object.assign({ src: video }, videoVariantSources), otherProps);
|
|
48
|
+
const renderPicture = () => {
|
|
49
|
+
var _a;
|
|
50
|
+
if (!img.mediaId && video)
|
|
51
|
+
return null;
|
|
52
|
+
const defaultImg = (_jsx("img", Object.assign({}, otherProps, getSourceAttrs(variants, defaultParams, isEditMode), { alt: (_a = field.value) === null || _a === void 0 ? void 0 : _a.alt })));
|
|
53
|
+
if (!mediaParams || !((sources === null || sources === void 0 ? void 0 : sources.length) && !video))
|
|
54
|
+
return defaultImg;
|
|
55
|
+
else {
|
|
56
|
+
return (_jsxs("picture", Object.assign({}, otherProps, { children: [sources === null || sources === void 0 ? void 0 : sources.map((source) => (_jsx("source", Object.assign({}, getSourceAttrs(variants, mediaParams[source], field.descriptor ? true : false, source, defaultParams))))), defaultImg] })));
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
const picture = (_jsxs(_Fragment, { children: [renderPicture(), renderJsonLinkedData && !video ? (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
|
|
60
|
+
__html: JSON.stringify({
|
|
61
|
+
"@context": "http://schema.org",
|
|
62
|
+
"@type": "ImageObject",
|
|
63
|
+
image: img === null || img === void 0 ? void 0 : img.src,
|
|
64
|
+
description: (_e = field.value) === null || _e === void 0 ? void 0 : _e.alt,
|
|
65
|
+
name: (_f = field.value) === null || _f === void 0 ? void 0 : _f.name,
|
|
66
|
+
}),
|
|
67
|
+
} })) : null, video && _jsx("video", Object.assign({}, videoAttr)), renderJsonLinkedData && video ? (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
|
|
68
|
+
__html: JSON.stringify({
|
|
69
|
+
"@context": "http://schema.org",
|
|
70
|
+
"@type": "VideoObject",
|
|
71
|
+
contentUrl: img === null || img === void 0 ? void 0 : img.src,
|
|
72
|
+
description: (_g = field.value) === null || _g === void 0 ? void 0 : _g.alt,
|
|
73
|
+
name: (_h = field.value) === null || _h === void 0 ? void 0 : _h.name,
|
|
74
|
+
}),
|
|
75
|
+
} })) : null] }));
|
|
76
|
+
return picture;
|
|
77
|
+
}
|
|
78
|
+
const getScaledImage = (variant, params, maxWidth, scale = 1) => {
|
|
79
|
+
const width = (maxWidth !== null && maxWidth !== void 0 ? maxWidth : variant.width) * scale;
|
|
80
|
+
if (!params.aspectRatio) {
|
|
81
|
+
if (!width || width >= variant.width)
|
|
82
|
+
return { src: variant.src, width: 0 };
|
|
83
|
+
else
|
|
84
|
+
return {
|
|
85
|
+
src: variant.src + `${variant.src.includes("?") ? "&" : "?"}mw=${width}`,
|
|
86
|
+
width: width,
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
const height = width / params.aspectRatio;
|
|
91
|
+
if (width >= variant.width || height >= variant.height)
|
|
92
|
+
return { src: variant.src, width: 0 };
|
|
93
|
+
return {
|
|
94
|
+
src: variant.src +
|
|
95
|
+
`${variant.src.includes("?") ? "&" : "?"}w=${width}&h=${height}&crop=1`,
|
|
96
|
+
width: width,
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
const placeholderSvg = "data:image/svg+xml,%3Csvg width='200' height='150' xmlns='http://www.w3.org/2000/svg' style='border:1px solid %23bbb;'%3E%3Crect width='100%25' height='100%25' fill='%23e0e0e0'/%3E%3Cline x1='0' y1='0' x2='100%25' y2='100%25' stroke='%23bbb' stroke-width='1'/%3E%3Cline x1='0' y1='100%25' x2='100%25' y2='0' stroke='%23bbb' stroke-width='1'/%3E%3C/svg%3E";
|
|
101
|
+
function getSourceAttrs(variants, params, isEditMode, mediaQuery, defaultParams) {
|
|
102
|
+
var _a, _b;
|
|
103
|
+
const variant = getRenderedPictureVariant(params, variants);
|
|
104
|
+
if (!variant)
|
|
105
|
+
return;
|
|
106
|
+
if (!variant.src && !isEditMode) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
const maxWidth = (_a = params.maxWidth) !== null && _a !== void 0 ? _a : defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams.maxWidth;
|
|
110
|
+
const srcSet = variant.src
|
|
111
|
+
? getSourceSet(variant, params, maxWidth, (_b = params.scales) !== null && _b !== void 0 ? _b : defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams.scales)
|
|
112
|
+
: undefined;
|
|
113
|
+
const src = !variant.src ? placeholderSvg : undefined;
|
|
114
|
+
const props = {
|
|
115
|
+
srcSet,
|
|
116
|
+
src,
|
|
117
|
+
};
|
|
118
|
+
if (mediaQuery)
|
|
119
|
+
props.media = mediaQuery;
|
|
120
|
+
if (isEditMode)
|
|
121
|
+
props["data-variant"] = variant.name;
|
|
122
|
+
return props;
|
|
123
|
+
}
|
|
124
|
+
function getSourceSet(variant, params, maxWidth, scales) {
|
|
125
|
+
if (!scales || scales.length === 0) {
|
|
126
|
+
const scaledImage = getScaledImage(variant, params);
|
|
127
|
+
const srcSet = hashImageUrl(scaledImage.src);
|
|
128
|
+
return srcSet;
|
|
129
|
+
}
|
|
130
|
+
let srcSet = "";
|
|
131
|
+
for (let w = 0; w < scales.length; w++) {
|
|
132
|
+
const scaledImage = getScaledImage(variant, params, maxWidth, scales[w]);
|
|
133
|
+
if (srcSet.length)
|
|
134
|
+
srcSet = srcSet + ", ";
|
|
135
|
+
srcSet += hashImageUrl(scaledImage.src) + " " + scales[w] + "x";
|
|
136
|
+
if (scaledImage.width === 0)
|
|
137
|
+
break;
|
|
138
|
+
}
|
|
139
|
+
return srcSet;
|
|
140
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TextField } from "../../types/fieldTypes";
|
|
3
|
+
export declare function RichText({ field, tag, editable, ...props }: {
|
|
4
|
+
field: TextField;
|
|
5
|
+
tag?: string;
|
|
6
|
+
editable?: boolean;
|
|
7
|
+
} & React.HTMLAttributes<HTMLElement>): React.DOMElement<any, Element> | undefined;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React from "react";
|
|
13
|
+
export function RichText(_a) {
|
|
14
|
+
var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
|
|
15
|
+
if (!field)
|
|
16
|
+
return;
|
|
17
|
+
if (field.jsonValue) {
|
|
18
|
+
field = field.jsonValue;
|
|
19
|
+
}
|
|
20
|
+
const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
|
|
21
|
+
__html: field.value,
|
|
22
|
+
} });
|
|
23
|
+
let fieldProps = props;
|
|
24
|
+
const descriptor = field.descriptor;
|
|
25
|
+
if (descriptor) {
|
|
26
|
+
const placeholderText = "[" + field.name + "]";
|
|
27
|
+
fieldProps = Object.assign(Object.assign({}, fieldProps), { "data-fieldid": descriptor.fieldId, "data-itemid": descriptor.item.id, "data-language": descriptor.item.language, "data-version": descriptor.item.version, "data-is-richtext": "true", placeholder: placeholderText, contentEditable: "false", suppressContentEditableWarning: true, suppressHydrationWarning: true });
|
|
28
|
+
}
|
|
29
|
+
return React.createElement(tag || "div", Object.assign(fieldProps, internalProps));
|
|
30
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TextField } from "../../types/fieldTypes";
|
|
3
|
+
export declare function Text({ field, tag, ...props }: {
|
|
4
|
+
field: TextField;
|
|
5
|
+
tag?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
} & React.HTMLAttributes<HTMLElement>): React.DOMElement<any, Element> | null;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React from "react";
|
|
13
|
+
export function Text(_a) {
|
|
14
|
+
var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
|
|
15
|
+
if (!field)
|
|
16
|
+
return null;
|
|
17
|
+
let fieldProps = props;
|
|
18
|
+
const descriptor = field.descriptor;
|
|
19
|
+
if (descriptor) {
|
|
20
|
+
const placeholderText = "[" + field.name + "]";
|
|
21
|
+
fieldProps = Object.assign(Object.assign({}, fieldProps), { "data-fieldid": descriptor.fieldId, "data-field-name": field.name, "data-itemid": descriptor.item.id, "data-language": descriptor.item.language, "data-version": descriptor.item.version, placeholder: placeholderText, contentEditable: "false", suppressContentEditableWarning: true, suppressHydrationWarning: true });
|
|
22
|
+
}
|
|
23
|
+
return React.createElement(tag || "div", fieldProps, field.value);
|
|
24
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AlpacaRequestInit } from "./types/fetch";
|
|
3
|
+
import { RenderingReference } from "./types/layoutDataTypes";
|
|
4
|
+
import { Rendering } from "./renderings/renderings";
|
|
5
|
+
import { ServerRenderContext } from "./render-context";
|
|
6
|
+
export type Dependencies = {
|
|
7
|
+
fetch: (input: string, init?: AlpacaRequestInit) => Promise<Response>;
|
|
8
|
+
cookies: () => string;
|
|
9
|
+
headers: () => Headers;
|
|
10
|
+
};
|
|
11
|
+
export type Configuration = {
|
|
12
|
+
getRenderingById: (rendering: RenderingReference, compileRendering: (rendering: Rendering) => Promise<any>) => Promise<any>;
|
|
13
|
+
fieldRendererResolver: (rendererType: string) => React.ComponentType<any>;
|
|
14
|
+
dependencies: Dependencies;
|
|
15
|
+
translationRenderer?: (key: string, context: ServerRenderContext) => string;
|
|
16
|
+
};
|
|
17
|
+
export declare const configuration: Configuration;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ComponentData } from "./types/layoutDataTypes";
|
|
2
|
+
export type { ResolveRouteParams, GetPageParams, } from "./route-data/resolve-route";
|
|
3
|
+
export type { PageResult, ErrorResult, NotFoundResult, RedirectResult, UnauthorizedResult, RouteData, EditorRouteData, } from "./route-data/route-data";
|
|
4
|
+
export type { RenderOptions, LazyPlaceholder, RenderingProps, ServerRenderContext, ClientRenderContext, Timings, } from "./render-context";
|
|
5
|
+
export type { PlaceholderData, ComponentData, RenderingReference, Page, InsertOption, WorkboxItem, } from "./types/layoutDataTypes";
|
|
6
|
+
export type { Item, Language, Version, FieldButton, Fields, Field, ItemDescriptor, } from "./types/items";
|
|
7
|
+
export type { LinkField, PictureField, TextField, CheckboxField, InternalLinkField, DateField, ReferencedItem, TreeListField, PictureValue, PictureVariant, PictureRegion, PictureRawValue, PictureRawVariant, LinkValue, NumberField, ImageField, ImageValue, } from "./types/fieldTypes";
|
|
8
|
+
export { Placeholder } from "./components/Placeholder";
|
|
9
|
+
export { Picture } from "./components/field-renderers/Picture";
|
|
10
|
+
export { RichText } from "./components/field-renderers/RichText";
|
|
11
|
+
export { Text } from "./components/field-renderers/Text";
|
|
12
|
+
export { Link } from "./components/field-renderers/Link";
|
|
13
|
+
export { Translate } from "./components/Translate";
|
|
14
|
+
export { hashImageUrl } from "./utils/media-protection";
|
|
15
|
+
export declare function editorComponentAttributes(component: ComponentData): {
|
|
16
|
+
"data-component-id": string;
|
|
17
|
+
} | {
|
|
18
|
+
"data-component-id"?: undefined;
|
|
19
|
+
};
|
|
20
|
+
export { resolveRoute, getPage } from "./route-data/resolve-route";
|
|
21
|
+
export { executeGraphQLQuery, getGraphQLSchema } from "./services/graphQL";
|
|
22
|
+
export { loadDictionary } from "./route-data/dictionary";
|
|
23
|
+
export type { ApiConfig } from "./services/api";
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export { Placeholder } from "./components/Placeholder";
|
|
2
|
+
export { Picture } from "./components/field-renderers/Picture";
|
|
3
|
+
export { RichText } from "./components/field-renderers/RichText";
|
|
4
|
+
export { Text } from "./components/field-renderers/Text";
|
|
5
|
+
export { Link } from "./components/field-renderers/Link";
|
|
6
|
+
export { Translate } from "./components/Translate";
|
|
7
|
+
export { hashImageUrl } from "./utils/media-protection";
|
|
8
|
+
export function editorComponentAttributes(component) {
|
|
9
|
+
if (component._editor)
|
|
10
|
+
return { "data-component-id": component.id };
|
|
11
|
+
return {};
|
|
12
|
+
}
|
|
13
|
+
export { resolveRoute, getPage } from "./route-data/resolve-route";
|
|
14
|
+
export { executeGraphQLQuery, getGraphQLSchema } from "./services/graphQL";
|
|
15
|
+
export { loadDictionary } from "./route-data/dictionary";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export type { PlaceholderComponent } from "../components/Placeholder";
|
|
2
|
+
export { renderPlaceholder } from "../components/Placeholder";
|
|
3
|
+
export type { PictureProps } from "../components/field-renderers/Picture";
|
|
4
|
+
export { Picture as PictureRenderer } from "../components/field-renderers/Picture";
|
|
5
|
+
export type { ExecuteGraphQLParams } from "../services/graphQL";
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { RenderOptions } from "../index";
|
|
2
|
+
import { NextRequest } from "next/server";
|
|
3
|
+
export declare function handleRequest({ request, mapHost, renderOptions, }: {
|
|
4
|
+
request: NextRequest;
|
|
5
|
+
mapHost: (host: string) => string;
|
|
6
|
+
renderOptions: RenderOptions;
|
|
7
|
+
}): Promise<Response | undefined>;
|