@epic-web/workshop-utils 6.47.4 → 6.47.6
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.
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
useEffect: (cb: () => (() => void) | void, deps: Array<any>) => void;
|
|
3
|
-
createElement: (type: string, props: any, ...children: Array<any>) => any;
|
|
4
|
-
};
|
|
5
|
-
export declare function EpicShopIFrameSync<ReactType extends CustomReactType>({ React, navigate, }: {
|
|
6
|
-
React: ReactType;
|
|
7
|
-
navigate: (...args: Array<any>) => void;
|
|
8
|
-
}): any;
|
|
9
|
-
export {};
|
|
1
|
+
export declare function EpicShopIFrameSync(_props: unknown): null;
|
|
10
2
|
//# sourceMappingURL=iframe-sync.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iframe-sync.d.ts","sourceRoot":"","sources":["../../src/iframe-sync.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"iframe-sync.d.ts","sourceRoot":"","sources":["../../src/iframe-sync.tsx"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,OAAO,QAGjD"}
|
package/dist/esm/iframe-sync.js
CHANGED
|
@@ -1,97 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
application. Anything we use in this file will be this file's version of that
|
|
5
|
-
dependency, which in the case of bundled dependencies would be different from
|
|
6
|
-
the host app's version. We want to avoid shipping two versions of React and
|
|
7
|
-
react-router to the client. So we need to accept React and navigate as props
|
|
8
|
-
rather than just using those things directly.
|
|
9
|
-
|
|
10
|
-
To reduce the annoyance, we'll have the host applications have a file like this:
|
|
11
|
-
|
|
12
|
-
// Ignore this file please
|
|
13
|
-
import { EpicShopIFrameSync } from '@epic-web/workshop-utils/iframe-sync'
|
|
14
|
-
import { useNavigate } from '@remix-run/react'
|
|
15
|
-
import * as React from 'react'
|
|
16
|
-
|
|
17
|
-
export function EpicShop() {
|
|
18
|
-
const navigate = useNavigate()
|
|
19
|
-
return <EpicShopIFrameSync React={React} navigate={navigate} />
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
*/
|
|
23
|
-
let effectSetup = false;
|
|
24
|
-
const iframeSyncScript = /* javascript */ `
|
|
25
|
-
if (window.parent !== window) {
|
|
26
|
-
window.__epicshop__ = window.__epicshop__ || {};
|
|
27
|
-
window.parent.postMessage(
|
|
28
|
-
{ type: 'epicshop:loaded', url: window.location.href },
|
|
29
|
-
'*'
|
|
30
|
-
);
|
|
31
|
-
function handleMessage(event) {
|
|
32
|
-
const { type, params } = event.data
|
|
33
|
-
if (type === 'epicshop:navigate-call') {
|
|
34
|
-
const [distanceOrUrl, options] = params
|
|
35
|
-
if (typeof distanceOrUrl === 'number') {
|
|
36
|
-
window.history.go(distanceOrUrl)
|
|
37
|
-
} else {
|
|
38
|
-
if (options?.replace) {
|
|
39
|
-
window.location.replace(distanceOrUrl)
|
|
40
|
-
} else {
|
|
41
|
-
window.location.assign(distanceOrUrl)
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
window.addEventListener('message', handleMessage)
|
|
48
|
-
window.__epicshop__.onHydrated = function() {
|
|
49
|
-
window.removeEventListener('message', handleMessage)
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
|
-
export function EpicShopIFrameSync({ React, navigate, }) {
|
|
54
|
-
// communicate with parent
|
|
55
|
-
React.useEffect(() => {
|
|
56
|
-
if (effectSetup)
|
|
57
|
-
return;
|
|
58
|
-
effectSetup = true;
|
|
59
|
-
if (window.parent === window)
|
|
60
|
-
return;
|
|
61
|
-
// @ts-expect-error - this is fine 🔥
|
|
62
|
-
window.__epicshop__?.onHydrated?.();
|
|
63
|
-
const methods = [
|
|
64
|
-
'pushState',
|
|
65
|
-
'replaceState',
|
|
66
|
-
'go',
|
|
67
|
-
'forward',
|
|
68
|
-
'back',
|
|
69
|
-
];
|
|
70
|
-
for (const method of methods) {
|
|
71
|
-
// @ts-expect-error - this is fine 🔥
|
|
72
|
-
window.history[method] = new Proxy(window.history[method], {
|
|
73
|
-
apply(target, thisArg, argArray) {
|
|
74
|
-
window.parent.postMessage({ type: 'epicshop:history-call', method, args: argArray }, '*');
|
|
75
|
-
// @ts-expect-error - this is fine too 🙃
|
|
76
|
-
return target.apply(thisArg, argArray);
|
|
77
|
-
},
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
}, []);
|
|
81
|
-
// listen for messages from parent
|
|
82
|
-
React.useEffect(() => {
|
|
83
|
-
function handleMessage(event) {
|
|
84
|
-
const { type, params } = event.data;
|
|
85
|
-
if (type === 'epicshop:navigate-call') {
|
|
86
|
-
navigate(...params);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
window.addEventListener('message', handleMessage);
|
|
90
|
-
return () => window.removeEventListener('message', handleMessage);
|
|
91
|
-
}, [navigate]);
|
|
92
|
-
return React.createElement('script', {
|
|
93
|
-
type: 'module',
|
|
94
|
-
dangerouslySetInnerHTML: { __html: iframeSyncScript },
|
|
95
|
-
});
|
|
1
|
+
export function EpicShopIFrameSync(_props) {
|
|
2
|
+
// no-op...
|
|
3
|
+
return null;
|
|
96
4
|
}
|
|
97
5
|
//# sourceMappingURL=iframe-sync.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iframe-sync.js","sourceRoot":"","sources":["../../src/iframe-sync.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"iframe-sync.js","sourceRoot":"","sources":["../../src/iframe-sync.tsx"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB,CAAC,MAAe;IACjD,WAAW;IACX,OAAO,IAAI,CAAA;AACZ,CAAC","sourcesContent":["export function EpicShopIFrameSync(_props: unknown) {\n\t// no-op...\n\treturn null\n}\n"]}
|