-
Notifications
You must be signed in to change notification settings - Fork 3
/
createFieldPlugin.ts
117 lines (101 loc) · 3.56 KB
/
createFieldPlugin.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { createPluginActions, ValidateContent } from './createPluginActions'
import { createHeightChangeListener } from './createHeightChangeListener'
import { disableDefaultStoryblokStyles } from './disableDefaultStoryblokStyles'
import { pluginUrlParamsFromUrl } from '../messaging'
import { FieldPluginResponse } from './FieldPluginResponse'
import { createPluginMessageListener } from './createPluginActions/createPluginMessageListener'
import { sandboxUrl } from './sandboxUrl'
import { isCloneable } from '../utils/isCloneable'
export type CreateFieldPluginOptions<Content> = {
onUpdateState: (state: FieldPluginResponse<Content>) => void
validateContent?: ValidateContent<Content>
}
export type CreateFieldPlugin = <Content = unknown>(
options: CreateFieldPluginOptions<Content>,
) => () => void
/**
* @returns cleanup function for side effects
*/
export const createFieldPlugin: CreateFieldPlugin = ({
onUpdateState,
validateContent,
}) => {
const isEmbedded = window.parent !== window
if (!isEmbedded) {
onUpdateState({
type: 'error',
error: new Error(
`The window is not embedded within another window. Did you mean to open the field plugin in the sandbox? ${sandboxUrl()}`,
),
})
return () => undefined
}
const params = pluginUrlParamsFromUrl(window.location.search)
if (!params) {
onUpdateState({
type: 'error',
error: new Error(
`The URL parameters does not match the expected format.`,
),
})
return () => undefined
}
const { uid, host } = params
const origin =
host === 'plugin-sandbox.storyblok.com'
? 'https://plugin-sandbox.storyblok.com'
: 'https://app.storyblok.com'
const postToContainer = (message: unknown) => {
try {
window.parent.postMessage(message, origin)
} catch (err) {
if (isCloneable(message)) {
// eslint-disable-next-line functional/no-throw-statement
throw err
}
// eslint-disable-next-line functional/no-throw-statement
throw new Error(
'The argument could not be cloned. ' +
'The argument must be cloneable with structuredClone(), so that it can be sent to other windows with window.postMessage(). ' +
'Does your object contain functions, getters, setters, proxies, or any other value that is not cloneable? Did you try to pass a reactive object? ' +
'For a full description on the structuredClone algorithm, see: ' +
'https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm',
{
cause: err,
},
)
}
}
const cleanupStyleSideEffects = disableDefaultStoryblokStyles()
// This is basically the `Content` inferred from the `validateContent`.
type InferredContent = ReturnType<
Exclude<typeof validateContent, undefined>
>['content']
const { actions, messageCallbacks, onHeightChange, initialize } =
createPluginActions<InferredContent>({
uid,
postToContainer,
onUpdateState: (data) => {
onUpdateState({
type: 'loaded',
data,
actions,
})
},
validateContent:
validateContent ||
((content) => ({ content: content as InferredContent })),
})
const cleanupHeightChangeListener = createHeightChangeListener(onHeightChange)
const cleanupMessageListenerSideEffects = createPluginMessageListener(
params.uid,
origin,
messageCallbacks,
)
void initialize()
return () => {
cleanupMessageListenerSideEffects()
cleanupHeightChangeListener()
cleanupStyleSideEffects()
}
}