@pack/react 0.0.14 → 0.1.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/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/preview/preview-content.d.ts +7 -0
- package/dist/preview/preview-content.d.ts.map +1 -1
- package/dist/preview/preview-content.js +2 -1
- package/dist/preview/preview-provider.d.ts +8 -1
- package/dist/preview/preview-provider.d.ts.map +1 -1
- package/dist/preview/preview-provider.js +2 -1
- package/dist/render-sections.d.ts.map +1 -1
- package/dist/render-sections.js +3 -1
- package/dist/use-overlay-script.d.ts +15 -0
- package/dist/use-overlay-script.d.ts.map +1 -0
- package/dist/use-overlay-script.js +16 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,8 @@ import { RenderSections } from "./render-sections";
|
|
|
2
2
|
import { PreviewProvider } from "./preview/preview-provider";
|
|
3
3
|
import { usePreviewContext } from "./preview/preview-content";
|
|
4
4
|
import { useSiteSettings } from "./use-site-settings";
|
|
5
|
+
import { useOverlayScript } from "./use-overlay-script";
|
|
5
6
|
import { registerSection } from "./register-section";
|
|
6
7
|
import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
|
|
7
|
-
export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, PreviewProvider, RenderSections, };
|
|
8
|
+
export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, useOverlayScript, PreviewProvider, RenderSections, };
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,OAAO,EACL,eAAe,EACf,gCAAgC,EAChC,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,cAAc,GACf,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gCAAgC,EAAE,MAAM,uCAAuC,CAAC;AAEzF,OAAO,EACL,eAAe,EACf,gCAAgC,EAChC,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,GACf,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -2,6 +2,7 @@ import { RenderSections } from "./render-sections";
|
|
|
2
2
|
import { PreviewProvider } from "./preview/preview-provider";
|
|
3
3
|
import { usePreviewContext } from "./preview/preview-content";
|
|
4
4
|
import { useSiteSettings } from "./use-site-settings";
|
|
5
|
+
import { useOverlayScript } from "./use-overlay-script";
|
|
5
6
|
import { registerSection } from "./register-section";
|
|
6
7
|
import { registerStorefrontSettingsSchema } from "./register-storefront-settings-schema";
|
|
7
|
-
export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, PreviewProvider, RenderSections, };
|
|
8
|
+
export { registerSection, registerStorefrontSettingsSchema, usePreviewContext, useSiteSettings, useOverlayScript, PreviewProvider, RenderSections, };
|
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
type PreviewContextValue = {
|
|
3
3
|
isPreview: boolean;
|
|
4
4
|
siteSettings: any;
|
|
5
|
+
customizerMeta?: {
|
|
6
|
+
overlay?: {
|
|
7
|
+
src?: string;
|
|
8
|
+
version?: string;
|
|
9
|
+
};
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
};
|
|
5
12
|
previewStorefrontSettings?: any;
|
|
6
13
|
setPreviewStorefrontSettings: (siteSettings: any) => void;
|
|
7
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":";AAEA,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"preview-content.d.ts","sourceRoot":"","sources":["../../src/preview/preview-content.tsx"],"names":[],"mappings":";AAEA,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,CAAC,YAAY,EAAE,GAAG,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAmC,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { createContext, useContext } from
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
2
|
export const PreviewContext = createContext({
|
|
3
3
|
isPreview: false,
|
|
4
4
|
setPreviewStorefrontSettings: () => { },
|
|
5
5
|
siteSettings: undefined,
|
|
6
|
+
customizerMeta: undefined,
|
|
6
7
|
});
|
|
7
8
|
export const usePreviewContext = () => useContext(PreviewContext);
|
|
@@ -3,7 +3,14 @@ interface PreviewContentProps {
|
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
siteSettings: any;
|
|
5
5
|
isPreviewModeEnabled?: boolean;
|
|
6
|
+
customizerMeta?: {
|
|
7
|
+
overlay?: {
|
|
8
|
+
src?: string;
|
|
9
|
+
version?: string;
|
|
10
|
+
};
|
|
11
|
+
[key: string]: any;
|
|
12
|
+
};
|
|
6
13
|
}
|
|
7
|
-
export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, }: PreviewContentProps): React.JSX.Element;
|
|
14
|
+
export declare function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }: PreviewContentProps): React.JSX.Element;
|
|
8
15
|
export {};
|
|
9
16
|
//# sourceMappingURL=preview-provider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preview-provider.d.ts","sourceRoot":"","sources":["../../src/preview/preview-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAInD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"preview-provider.d.ts","sourceRoot":"","sources":["../../src/preview/preview-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAInD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE;YACR,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,oBAAoB,EACpB,YAAY,EACZ,cAAc,GACf,EAAE,mBAAmB,qBAmBrB"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import { PreviewContext } from "./preview-content";
|
|
3
3
|
import { PreviewToast } from "./preview-toast";
|
|
4
|
-
export function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, }) {
|
|
4
|
+
export function PreviewProvider({ children, isPreviewModeEnabled, siteSettings, customizerMeta, }) {
|
|
5
5
|
const [previewStorefrontSettings, setPreviewStorefrontSettings] = useState();
|
|
6
6
|
return (React.createElement(PreviewContext.Provider, { value: {
|
|
7
7
|
isPreview: !!isPreviewModeEnabled,
|
|
8
8
|
previewStorefrontSettings,
|
|
9
9
|
setPreviewStorefrontSettings,
|
|
10
10
|
siteSettings,
|
|
11
|
+
customizerMeta,
|
|
11
12
|
} },
|
|
12
13
|
children,
|
|
13
14
|
React.createElement(PreviewToast, { isPreviewModeEnabled: !!isPreviewModeEnabled })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"render-sections.d.ts","sourceRoot":"","sources":["../src/render-sections.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAyClD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,4BAiC9C"}
|
package/dist/render-sections.js
CHANGED
|
@@ -3,6 +3,7 @@ import { useCustomizerShell } from "./use-customizer-shell";
|
|
|
3
3
|
import { usePreviewContext } from "./preview/preview-content";
|
|
4
4
|
import { sectionMap } from "./register-section";
|
|
5
5
|
import { storefrontSettingsSchema } from "./register-storefront-settings-schema";
|
|
6
|
+
import { useOverlayScript } from "./use-overlay-script";
|
|
6
7
|
function Sections({ sections }) {
|
|
7
8
|
const renderedSections = useMemo(() => {
|
|
8
9
|
return sections
|
|
@@ -25,7 +26,7 @@ function Sections({ sections }) {
|
|
|
25
26
|
return React.createElement(React.Fragment, null, renderedSections);
|
|
26
27
|
}
|
|
27
28
|
export function RenderSections({ content }) {
|
|
28
|
-
const { isPreview, setPreviewStorefrontSettings } = usePreviewContext();
|
|
29
|
+
const { isPreview, setPreviewStorefrontSettings, customizerMeta } = usePreviewContext();
|
|
29
30
|
const { content: liveContent, storefrontSettings } = useCustomizerShell({
|
|
30
31
|
environment: "production",
|
|
31
32
|
isPreview,
|
|
@@ -40,6 +41,7 @@ export function RenderSections({ content }) {
|
|
|
40
41
|
},
|
|
41
42
|
storefrontSettingsSchema,
|
|
42
43
|
});
|
|
44
|
+
useOverlayScript({ isPreview, overlay: customizerMeta?.overlay || {} });
|
|
43
45
|
useEffect(() => {
|
|
44
46
|
storefrontSettings &&
|
|
45
47
|
setPreviewStorefrontSettings({ settings: storefrontSettings });
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare global {
|
|
2
|
+
interface Window {
|
|
3
|
+
pack?: {
|
|
4
|
+
isOverlayScriptInjected: boolean;
|
|
5
|
+
};
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export declare const useOverlayScript: ({ isPreview, overlay, }: {
|
|
9
|
+
isPreview: boolean;
|
|
10
|
+
overlay: {
|
|
11
|
+
src?: string;
|
|
12
|
+
version?: string;
|
|
13
|
+
};
|
|
14
|
+
}) => void;
|
|
15
|
+
//# sourceMappingURL=use-overlay-script.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-overlay-script.d.ts","sourceRoot":"","sources":["../src/use-overlay-script.ts"],"names":[],"mappings":"AAEA,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,CAAC,EAAE;YACL,uBAAuB,EAAE,OAAO,CAAC;SAClC,CAAC;KACH;CACF;AAED,eAAO,MAAM,gBAAgB;eAIhB,OAAO;aACT;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE;UAmB5C,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
export const useOverlayScript = ({ isPreview, overlay, }) => {
|
|
3
|
+
useEffect(() => {
|
|
4
|
+
if (isPreview &&
|
|
5
|
+
(overlay?.src || overlay?.version) &&
|
|
6
|
+
!window.pack?.isOverlayScriptInjected) {
|
|
7
|
+
const script = document.createElement("script");
|
|
8
|
+
script.src =
|
|
9
|
+
overlay?.src ||
|
|
10
|
+
`https://d3dizc9fcooe02.cloudfront.net/overlay@${overlay?.version}/dist/overlay.js`;
|
|
11
|
+
script.async = true;
|
|
12
|
+
document.body.appendChild(script);
|
|
13
|
+
window.pack = { ...window.pack, isOverlayScriptInjected: true };
|
|
14
|
+
}
|
|
15
|
+
}, [isPreview, overlay]);
|
|
16
|
+
};
|