@preprio/toolkit 0.5.0-rc.2 → 0.5.0-rc.4
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 +209 -10
- package/dist/astro/index.cjs +1194 -1
- package/dist/astro/index.d.cts +47 -1
- package/dist/astro/index.d.ts +47 -1
- package/dist/astro/index.js +1197 -1
- package/dist/chunk-46ISDRHT.js +26 -0
- package/dist/chunk-74KY5EAM.js +1219 -0
- package/dist/chunk-AHBN6FQP.js +184 -0
- package/dist/{chunk-FLPNN3CV.js → chunk-PDNCNTDB.js} +1370 -623
- package/dist/chunk-S3VT4UWM.js +75 -0
- package/dist/chunk-TG6N3C22.js +246 -0
- package/dist/chunk-URXSDJOU.js +356 -0
- package/dist/index.cjs +3166 -392
- package/dist/index.d.cts +238 -4
- package/dist/index.d.ts +238 -4
- package/dist/index.js +189 -149
- package/dist/live-preview-H4643QYF.js +18 -0
- package/dist/nextjs/components.cjs +1522 -359
- package/dist/nextjs/components.d.cts +1 -1
- package/dist/nextjs/components.d.ts +1 -1
- package/dist/nextjs/components.js +4 -1
- package/dist/nextjs/index.cjs +1085 -6
- package/dist/nextjs/index.d.cts +73 -1
- package/dist/nextjs/index.d.ts +73 -1
- package/dist/nextjs/index.js +1079 -7
- package/dist/nextjs/live-action.cjs +285 -0
- package/dist/nextjs/live-action.d.cts +12 -0
- package/dist/nextjs/live-action.d.ts +12 -0
- package/dist/nextjs/live-action.js +68 -0
- package/dist/nextjs/live.cjs +1896 -0
- package/dist/nextjs/live.d.cts +52 -0
- package/dist/nextjs/live.d.ts +52 -0
- package/dist/nextjs/live.js +265 -0
- package/dist/nuxt/index.cjs +1 -1
- package/dist/nuxt/index.js +1 -1
- package/dist/nuxt/live-preview-O2ZTJNW4.js +1520 -0
- package/dist/nuxt/live.cjs +1720 -0
- package/dist/nuxt/live.d.cts +43 -0
- package/dist/nuxt/live.d.ts +43 -0
- package/dist/nuxt/live.js +94 -0
- package/dist/{pixel-B3oQNbZ3.d.cts → pixel-CX422dCO.d.cts} +10 -1
- package/dist/{pixel-B3oQNbZ3.d.ts → pixel-CX422dCO.d.ts} +10 -1
- package/dist/react/components.cjs +1522 -359
- package/dist/react/components.d.cts +9 -0
- package/dist/react/components.d.ts +9 -0
- package/dist/react/components.js +1522 -359
- package/dist/sveltekit/index.cjs +1 -1
- package/dist/sveltekit/index.js +1 -1
- package/package.json +12 -1
- package/src/astro/PreprToolbar.astro +7 -1
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Ref, ComputedRef } from 'vue';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* What `normalizeQuery` accepts as the query: GraphQL source text, a parsed
|
|
5
|
+
* `DocumentNode` (from `graphql-tag`, Apollo or GraphQL Code Generator), or a
|
|
6
|
+
* string-like object such as codegen's `TypedDocumentString`.
|
|
7
|
+
*/
|
|
8
|
+
type QueryInput = string | {
|
|
9
|
+
kind: 'Document';
|
|
10
|
+
} | {
|
|
11
|
+
toString(): string;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
interface UseNormalizedQueryOptions {
|
|
15
|
+
/**
|
|
16
|
+
* Pass your preview flag; never `true` on a production deployment.
|
|
17
|
+
* Defaults to false: the data is returned unchanged.
|
|
18
|
+
*/
|
|
19
|
+
enabled?: boolean;
|
|
20
|
+
/** Called when the editor saves, e.g. `refresh` from `useAsyncData`. */
|
|
21
|
+
onSave?: () => void;
|
|
22
|
+
/** Exact editor origins, replacing the `*.prepr.io` default. */
|
|
23
|
+
allowedEditorOrigins?: string[];
|
|
24
|
+
/** See the toolbar's `strictMode`. */
|
|
25
|
+
strictMode?: boolean;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Show the Prepr editor's unsaved changes in a Nuxt page, applied in the
|
|
29
|
+
* browser while the editor types:
|
|
30
|
+
*
|
|
31
|
+
* ```ts
|
|
32
|
+
* const page = useNormalizedQuery(GetPageDocument, data, {
|
|
33
|
+
* enabled: isPreview,
|
|
34
|
+
* onSave: refresh,
|
|
35
|
+
* });
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* Returns the data unchanged on the server and outside the editor iframe.
|
|
39
|
+
* Select `_id` on every item and component that should update.
|
|
40
|
+
*/
|
|
41
|
+
declare function useNormalizedQuery<T>(query: QueryInput, data: Ref<T> | T, options?: UseNormalizedQueryOptions): ComputedRef<T>;
|
|
42
|
+
|
|
43
|
+
export { type UseNormalizedQueryOptions, useNormalizedQuery };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Ref, ComputedRef } from 'vue';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* What `normalizeQuery` accepts as the query: GraphQL source text, a parsed
|
|
5
|
+
* `DocumentNode` (from `graphql-tag`, Apollo or GraphQL Code Generator), or a
|
|
6
|
+
* string-like object such as codegen's `TypedDocumentString`.
|
|
7
|
+
*/
|
|
8
|
+
type QueryInput = string | {
|
|
9
|
+
kind: 'Document';
|
|
10
|
+
} | {
|
|
11
|
+
toString(): string;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
interface UseNormalizedQueryOptions {
|
|
15
|
+
/**
|
|
16
|
+
* Pass your preview flag; never `true` on a production deployment.
|
|
17
|
+
* Defaults to false: the data is returned unchanged.
|
|
18
|
+
*/
|
|
19
|
+
enabled?: boolean;
|
|
20
|
+
/** Called when the editor saves, e.g. `refresh` from `useAsyncData`. */
|
|
21
|
+
onSave?: () => void;
|
|
22
|
+
/** Exact editor origins, replacing the `*.prepr.io` default. */
|
|
23
|
+
allowedEditorOrigins?: string[];
|
|
24
|
+
/** See the toolbar's `strictMode`. */
|
|
25
|
+
strictMode?: boolean;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Show the Prepr editor's unsaved changes in a Nuxt page, applied in the
|
|
29
|
+
* browser while the editor types:
|
|
30
|
+
*
|
|
31
|
+
* ```ts
|
|
32
|
+
* const page = useNormalizedQuery(GetPageDocument, data, {
|
|
33
|
+
* enabled: isPreview,
|
|
34
|
+
* onSave: refresh,
|
|
35
|
+
* });
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* Returns the data unchanged on the server and outside the editor iframe.
|
|
39
|
+
* Select `_id` on every item and component that should update.
|
|
40
|
+
*/
|
|
41
|
+
declare function useNormalizedQuery<T>(query: QueryInput, data: Ref<T> | T, options?: UseNormalizedQueryOptions): ComputedRef<T>;
|
|
42
|
+
|
|
43
|
+
export { type UseNormalizedQueryOptions, useNormalizedQuery };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
// src/nuxt/live.ts
|
|
2
|
+
import {
|
|
3
|
+
computed,
|
|
4
|
+
getCurrentScope,
|
|
5
|
+
onScopeDispose,
|
|
6
|
+
shallowRef,
|
|
7
|
+
unref
|
|
8
|
+
} from "vue";
|
|
9
|
+
|
|
10
|
+
// src/core/live-preview/test-reset.ts
|
|
11
|
+
var resets = /* @__PURE__ */ new Set();
|
|
12
|
+
function onTestReset(reset) {
|
|
13
|
+
resets.add(reset);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// src/nuxt/live.ts
|
|
17
|
+
var starting = null;
|
|
18
|
+
var store = null;
|
|
19
|
+
var bridge = null;
|
|
20
|
+
var applyLog = null;
|
|
21
|
+
var log = shallowRef([]);
|
|
22
|
+
var allowedEditorOrigins;
|
|
23
|
+
var strictMode;
|
|
24
|
+
var startListeners = /* @__PURE__ */ new Set();
|
|
25
|
+
function isFramed() {
|
|
26
|
+
return typeof window !== "undefined" && window.self !== window.top;
|
|
27
|
+
}
|
|
28
|
+
function startLive() {
|
|
29
|
+
starting ?? (starting = import("./live-preview-O2ZTJNW4.js").then(
|
|
30
|
+
({ applyPatchLog, createLiveBridge, createLiveStore }) => {
|
|
31
|
+
applyLog = applyPatchLog;
|
|
32
|
+
const started = createLiveStore();
|
|
33
|
+
bridge = createLiveBridge(started, {
|
|
34
|
+
allowedEditorOrigins: () => allowedEditorOrigins,
|
|
35
|
+
strictMode: () => strictMode
|
|
36
|
+
});
|
|
37
|
+
bridge.start();
|
|
38
|
+
started.onLogChange((next) => {
|
|
39
|
+
log.value = next;
|
|
40
|
+
});
|
|
41
|
+
store = started;
|
|
42
|
+
startListeners.forEach((listener) => listener(started));
|
|
43
|
+
startListeners.clear();
|
|
44
|
+
}
|
|
45
|
+
));
|
|
46
|
+
}
|
|
47
|
+
function whenLive(listener) {
|
|
48
|
+
if (store) {
|
|
49
|
+
listener(store);
|
|
50
|
+
return () => {
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
startListeners.add(listener);
|
|
54
|
+
return () => startListeners.delete(listener);
|
|
55
|
+
}
|
|
56
|
+
function useNormalizedQuery(query, data, options = {}) {
|
|
57
|
+
if (!options.enabled || !isFramed()) {
|
|
58
|
+
return computed(() => unref(data));
|
|
59
|
+
}
|
|
60
|
+
if (options.strictMode) strictMode = true;
|
|
61
|
+
if (options.allowedEditorOrigins) {
|
|
62
|
+
allowedEditorOrigins = [...options.allowedEditorOrigins];
|
|
63
|
+
}
|
|
64
|
+
startLive();
|
|
65
|
+
if (options.onSave && getCurrentScope()) {
|
|
66
|
+
const onSave = options.onSave;
|
|
67
|
+
let offInvalidate = null;
|
|
68
|
+
const stopWaiting = whenLive((started) => {
|
|
69
|
+
offInvalidate = started.onInvalidate(() => onSave());
|
|
70
|
+
});
|
|
71
|
+
onScopeDispose(() => {
|
|
72
|
+
stopWaiting();
|
|
73
|
+
offInvalidate?.();
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
return computed(() => {
|
|
77
|
+
const value = unref(data);
|
|
78
|
+
return log.value.length && applyLog ? applyLog(query, value, log.value) : value;
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
onTestReset(() => {
|
|
82
|
+
bridge?.stop();
|
|
83
|
+
bridge = null;
|
|
84
|
+
store = null;
|
|
85
|
+
starting = null;
|
|
86
|
+
applyLog = null;
|
|
87
|
+
startListeners.clear();
|
|
88
|
+
log.value = [];
|
|
89
|
+
allowedEditorOrigins = void 0;
|
|
90
|
+
strictMode = void 0;
|
|
91
|
+
});
|
|
92
|
+
export {
|
|
93
|
+
useNormalizedQuery
|
|
94
|
+
};
|
|
@@ -2,6 +2,8 @@ type Dictionary = Record<string, unknown>;
|
|
|
2
2
|
declare const dictionaries: {
|
|
3
3
|
en: Dictionary;
|
|
4
4
|
nl: Dictionary;
|
|
5
|
+
fr: Dictionary;
|
|
6
|
+
de: Dictionary;
|
|
5
7
|
};
|
|
6
8
|
type Locale = keyof typeof dictionaries;
|
|
7
9
|
|
|
@@ -74,6 +76,13 @@ interface PreprPreviewOptions extends PreprToolbarOptions {
|
|
|
74
76
|
* receives the field-edit events, which carry content item ids.
|
|
75
77
|
*/
|
|
76
78
|
allowedEditorOrigins?: string[];
|
|
79
|
+
/**
|
|
80
|
+
* Set when your preview token uses GraphQL strict mode, where required
|
|
81
|
+
* fields are never null. The editor then holds back new entries until
|
|
82
|
+
* their required fields are filled, and never sends a cleared required
|
|
83
|
+
* field as null.
|
|
84
|
+
*/
|
|
85
|
+
strictMode?: boolean;
|
|
77
86
|
/**
|
|
78
87
|
* Strip the invisible stega characters out of visible text at runtime.
|
|
79
88
|
* Default `true`.
|
|
@@ -117,7 +126,7 @@ interface PreprToolbarComponentProps extends PreprToolbarProps {
|
|
|
117
126
|
type PreprHeaderName = 'prepr-customer-id' | 'Prepr-Segments' | 'Prepr-ABtesting' | 'User-Agent' | 'Prepr-User-Agent';
|
|
118
127
|
type PreprVariant = 'A' | 'B';
|
|
119
128
|
type PreprEnvironment = 'preview' | 'production';
|
|
120
|
-
type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested';
|
|
129
|
+
type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested' | 'live_ready' | 'navigation_blocked';
|
|
121
130
|
interface PreprHeaders {
|
|
122
131
|
readonly 'prepr-customer-id'?: string;
|
|
123
132
|
readonly 'Prepr-Segments'?: string;
|
|
@@ -2,6 +2,8 @@ type Dictionary = Record<string, unknown>;
|
|
|
2
2
|
declare const dictionaries: {
|
|
3
3
|
en: Dictionary;
|
|
4
4
|
nl: Dictionary;
|
|
5
|
+
fr: Dictionary;
|
|
6
|
+
de: Dictionary;
|
|
5
7
|
};
|
|
6
8
|
type Locale = keyof typeof dictionaries;
|
|
7
9
|
|
|
@@ -74,6 +76,13 @@ interface PreprPreviewOptions extends PreprToolbarOptions {
|
|
|
74
76
|
* receives the field-edit events, which carry content item ids.
|
|
75
77
|
*/
|
|
76
78
|
allowedEditorOrigins?: string[];
|
|
79
|
+
/**
|
|
80
|
+
* Set when your preview token uses GraphQL strict mode, where required
|
|
81
|
+
* fields are never null. The editor then holds back new entries until
|
|
82
|
+
* their required fields are filled, and never sends a cleared required
|
|
83
|
+
* field as null.
|
|
84
|
+
*/
|
|
85
|
+
strictMode?: boolean;
|
|
77
86
|
/**
|
|
78
87
|
* Strip the invisible stega characters out of visible text at runtime.
|
|
79
88
|
* Default `true`.
|
|
@@ -117,7 +126,7 @@ interface PreprToolbarComponentProps extends PreprToolbarProps {
|
|
|
117
126
|
type PreprHeaderName = 'prepr-customer-id' | 'Prepr-Segments' | 'Prepr-ABtesting' | 'User-Agent' | 'Prepr-User-Agent';
|
|
118
127
|
type PreprVariant = 'A' | 'B';
|
|
119
128
|
type PreprEnvironment = 'preview' | 'production';
|
|
120
|
-
type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested';
|
|
129
|
+
type PreprEventType = 'segment_changed' | 'variant_changed' | 'edit_mode_toggled' | 'preview_mode_toggled' | 'getScrollPosition' | 'loaded' | 'field_edit_requested' | 'live_ready' | 'navigation_blocked';
|
|
121
130
|
interface PreprHeaders {
|
|
122
131
|
readonly 'prepr-customer-id'?: string;
|
|
123
132
|
readonly 'Prepr-Segments'?: string;
|