@webiny/website-builder-nextjs 6.3.0 → 6.4.0-beta.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/DocumentRenderer.js +12 -12
- package/DocumentRenderer.js.map +1 -1
- package/editorComponents/Image.js +66 -83
- package/editorComponents/Image.js.map +1 -1
- package/editorComponents/Image.manifest.js +38 -38
- package/editorComponents/Image.manifest.js.map +1 -1
- package/index.js +5 -9
- package/index.js.map +1 -1
- package/package.json +6 -6
- package/webpack.js +38 -50
- package/webpack.js.map +1 -1
package/DocumentRenderer.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { DocumentRenderer
|
|
1
|
+
import react from "react";
|
|
2
|
+
import { DocumentRenderer } from "@webiny/website-builder-react";
|
|
3
3
|
import { Image } from "./editorComponents/Image.manifest.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}, children);
|
|
4
|
+
const DocumentRenderer_DocumentRenderer = ({ document, components, children })=>{
|
|
5
|
+
const allComponents = [
|
|
6
|
+
Image,
|
|
7
|
+
...components
|
|
8
|
+
];
|
|
9
|
+
return /*#__PURE__*/ react.createElement(DocumentRenderer, {
|
|
10
|
+
document: document,
|
|
11
|
+
components: allComponents
|
|
12
|
+
}, children);
|
|
14
13
|
};
|
|
14
|
+
export { DocumentRenderer_DocumentRenderer as DocumentRenderer };
|
|
15
15
|
|
|
16
16
|
//# sourceMappingURL=DocumentRenderer.js.map
|
package/DocumentRenderer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"DocumentRenderer.js","sources":["../src/DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { DocumentRenderer as BaseDocumentRenderer } from \"@webiny/website-builder-react\";\nimport { Image } from \"~/editorComponents/Image.manifest.js\";\n\nexport type DocumentRendererProps = React.ComponentProps<typeof BaseDocumentRenderer>;\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n const allComponents = [Image, ...components];\n return (\n <BaseDocumentRenderer document={document} components={allComponents}>\n {children}\n </BaseDocumentRenderer>\n );\n};\n"],"names":["DocumentRenderer","document","components","children","allComponents","Image","BaseDocumentRenderer"],"mappings":";;;AAMO,MAAMA,oCAAmB,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,QAAQ,EAAyB;IACtF,MAAMC,gBAAgB;QAACC;WAAUH;KAAW;IAC5C,OAAO,WAAP,GACI,oBAACI,kBAAoBA;QAAC,UAAUL;QAAU,YAAYG;OACjDD;AAGb"}
|
|
@@ -1,89 +1,72 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
style: props.styles
|
|
1
|
+
import react from "react";
|
|
2
|
+
import next_image from "next/image";
|
|
3
|
+
const ImageComponent = (props)=>{
|
|
4
|
+
const image = useImage(props);
|
|
5
|
+
if (!image.src) return /*#__PURE__*/ react.createElement(ImagePlaceholder, {
|
|
6
|
+
style: props.styles
|
|
8
7
|
});
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
title: image.title,
|
|
14
|
-
data: image.src
|
|
8
|
+
if ("object" === image.tag) return /*#__PURE__*/ react.createElement("object", {
|
|
9
|
+
style: image.styles,
|
|
10
|
+
title: image.title,
|
|
11
|
+
data: image.src
|
|
15
12
|
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
src,
|
|
34
|
-
width
|
|
35
|
-
}) => `${src}?width=${width}`
|
|
36
|
-
}));
|
|
13
|
+
return /*#__PURE__*/ react.createElement("div", {
|
|
14
|
+
style: {
|
|
15
|
+
position: "relative",
|
|
16
|
+
...props.styles
|
|
17
|
+
}
|
|
18
|
+
}, /*#__PURE__*/ react.createElement(next_image, {
|
|
19
|
+
alt: image.altText,
|
|
20
|
+
title: image.title,
|
|
21
|
+
src: image.src,
|
|
22
|
+
width: props.inputs.image.width,
|
|
23
|
+
height: props.inputs.image.height,
|
|
24
|
+
style: image.styles,
|
|
25
|
+
priority: props.inputs.highPriority,
|
|
26
|
+
loading: props.inputs.highPriority ? "eager" : "lazy",
|
|
27
|
+
sizes: "100vw",
|
|
28
|
+
loader: ({ src, width })=>`${src}?width=${width}`
|
|
29
|
+
}));
|
|
37
30
|
};
|
|
38
|
-
const ImagePlaceholder = ({
|
|
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
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const imageStyles = {
|
|
77
|
-
maxWidth: "100%",
|
|
78
|
-
...styles
|
|
79
|
-
};
|
|
80
|
-
return {
|
|
81
|
-
altText,
|
|
82
|
-
src: inputs.image?.src,
|
|
83
|
-
styles: imageStyles,
|
|
84
|
-
tag,
|
|
85
|
-
title
|
|
86
|
-
};
|
|
31
|
+
const ImagePlaceholder = ({ style })=>/*#__PURE__*/ react.createElement("div", {
|
|
32
|
+
style: {
|
|
33
|
+
display: "flex",
|
|
34
|
+
height: "200px",
|
|
35
|
+
backgroundColor: "#f4f4f4",
|
|
36
|
+
justifyContent: "center",
|
|
37
|
+
alignItems: "center",
|
|
38
|
+
fill: "#ffffff",
|
|
39
|
+
...style
|
|
40
|
+
}
|
|
41
|
+
}, /*#__PURE__*/ react.createElement("svg", {
|
|
42
|
+
style: {
|
|
43
|
+
width: "70px",
|
|
44
|
+
height: "70px",
|
|
45
|
+
filter: "drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)"
|
|
46
|
+
},
|
|
47
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
48
|
+
height: "24px",
|
|
49
|
+
viewBox: "0 -960 960 960",
|
|
50
|
+
width: "24px"
|
|
51
|
+
}, /*#__PURE__*/ react.createElement("path", {
|
|
52
|
+
d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"
|
|
53
|
+
})));
|
|
54
|
+
const useImage = ({ inputs, styles })=>{
|
|
55
|
+
const { title = "", altText, image } = inputs;
|
|
56
|
+
const src = image?.src;
|
|
57
|
+
const tag = src && src.endsWith(".svg") ? "object" : "img";
|
|
58
|
+
const imageStyles = {
|
|
59
|
+
maxWidth: "100%",
|
|
60
|
+
...styles
|
|
61
|
+
};
|
|
62
|
+
return {
|
|
63
|
+
altText,
|
|
64
|
+
src: inputs.image?.src,
|
|
65
|
+
styles: imageStyles,
|
|
66
|
+
tag,
|
|
67
|
+
title
|
|
68
|
+
};
|
|
87
69
|
};
|
|
70
|
+
export { ImageComponent };
|
|
88
71
|
|
|
89
72
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"editorComponents/Image.js","sources":["../../src/editorComponents/Image.tsx"],"sourcesContent":["import React from \"react\";\nimport Image from \"next/image\";\nimport type { CssProperties } from \"@webiny/website-builder-react\";\nimport type { ComponentProps } from \"@webiny/website-builder-react\";\n\ntype ImageProps = ComponentProps<{\n title: string;\n altText: string;\n highPriority: boolean;\n image: {\n id: string;\n name: string;\n size: number;\n mimeType: string;\n src: string;\n width: number;\n height: number;\n };\n}>;\n\nexport const ImageComponent = (props: ImageProps) => {\n const image = useImage(props);\n\n if (!image.src) {\n return <ImagePlaceholder style={props.styles} />;\n }\n\n if (image.tag === \"object\") {\n return <object style={image.styles} title={image.title} data={image.src} />;\n }\n\n return (\n <div\n style={{\n position: \"relative\",\n ...props.styles\n }}\n >\n {/* <ImagePlaceholder style={image.styles} /> */}\n <Image\n alt={image.altText}\n title={image.title}\n src={image.src}\n width={props.inputs.image.width}\n height={props.inputs.image.height}\n style={image.styles}\n priority={props.inputs.highPriority}\n loading={props.inputs.highPriority ? \"eager\" : \"lazy\"}\n sizes={\"100vw\"}\n loader={({ src, width }) => `${src}?width=${width}`}\n />\n </div>\n );\n};\n\nconst ImagePlaceholder = ({ style }: { style: CssProperties }) => {\n return (\n <div\n style={{\n display: \"flex\",\n height: \"200px\",\n backgroundColor: \"#f4f4f4\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fill: \"#ffffff\",\n ...style\n }}\n >\n <svg\n style={{\n width: \"70px\",\n height: \"70px\",\n filter: \"drop-shadow(rgba(0, 0, 0, 0.16) 0px 1px 0px)\"\n }}\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n >\n <path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\" />\n </svg>\n </div>\n );\n};\n\nconst useImage = ({ inputs, styles }: ImageProps) => {\n const { title = \"\", altText, image } = inputs;\n const src = image?.src;\n\n const tag = src && src.endsWith(\".svg\") ? \"object\" : \"img\";\n\n const imageStyles = {\n maxWidth: \"100%\",\n ...styles\n };\n\n return {\n altText,\n src: inputs.image?.src,\n styles: imageStyles,\n tag,\n title\n };\n};\n"],"names":["ImageComponent","props","image","useImage","ImagePlaceholder","Image","src","width","style","inputs","styles","title","altText","tag","imageStyles"],"mappings":";;AAoBO,MAAMA,iBAAiB,CAACC;IAC3B,MAAMC,QAAQC,SAASF;IAEvB,IAAI,CAACC,MAAM,GAAG,EACV,OAAO,WAAP,GAAO,oBAACE,kBAAgBA;QAAC,OAAOH,MAAM,MAAM;;IAGhD,IAAIC,AAAc,aAAdA,MAAM,GAAG,EACT,OAAO,WAAP,GAAO,oBAAC;QAAO,OAAOA,MAAM,MAAM;QAAE,OAAOA,MAAM,KAAK;QAAE,MAAMA,MAAM,GAAG;;IAG3E,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,UAAU;YACV,GAAGD,MAAM,MAAM;QACnB;qBAGA,oBAACI,YAAKA;QACF,KAAKH,MAAM,OAAO;QAClB,OAAOA,MAAM,KAAK;QAClB,KAAKA,MAAM,GAAG;QACd,OAAOD,MAAM,MAAM,CAAC,KAAK,CAAC,KAAK;QAC/B,QAAQA,MAAM,MAAM,CAAC,KAAK,CAAC,MAAM;QACjC,OAAOC,MAAM,MAAM;QACnB,UAAUD,MAAM,MAAM,CAAC,YAAY;QACnC,SAASA,MAAM,MAAM,CAAC,YAAY,GAAG,UAAU;QAC/C,OAAO;QACP,QAAQ,CAAC,EAAEK,GAAG,EAAEC,KAAK,EAAE,GAAK,GAAGD,IAAI,OAAO,EAAEC,OAAO;;AAInE;AAEA,MAAMH,mBAAmB,CAAC,EAAEI,KAAK,EAA4B,GAClD,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,QAAQ;YACR,iBAAiB;YACjB,gBAAgB;YAChB,YAAY;YACZ,MAAM;YACN,GAAGA,KAAK;QACZ;qBAEA,oBAAC;QACG,OAAO;YACH,OAAO;YACP,QAAQ;YACR,QAAQ;QACZ;QACA,OAAM;QACN,QAAO;QACP,SAAQ;QACR,OAAM;qBAEN,oBAAC;QAAK,GAAE;;AAMxB,MAAML,WAAW,CAAC,EAAEM,MAAM,EAAEC,MAAM,EAAc;IAC5C,MAAM,EAAEC,QAAQ,EAAE,EAAEC,OAAO,EAAEV,KAAK,EAAE,GAAGO;IACvC,MAAMH,MAAMJ,OAAO;IAEnB,MAAMW,MAAMP,OAAOA,IAAI,QAAQ,CAAC,UAAU,WAAW;IAErD,MAAMQ,cAAc;QAChB,UAAU;QACV,GAAGJ,MAAM;IACb;IAEA,OAAO;QACHE;QACA,KAAKH,OAAO,KAAK,EAAE;QACnB,QAAQK;QACRD;QACAF;IACJ;AACJ"}
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
|
|
3
|
-
import { createFileInput, createTextInput, createBooleanInput, createComponent } from "@webiny/website-builder-react";
|
|
2
|
+
import { createBooleanInput, createComponent, createFileInput, createTextInput } from "@webiny/website-builder-react";
|
|
4
3
|
import { ImageComponent } from "./Image.js";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
4
|
+
const Image = createComponent(ImageComponent, {
|
|
5
|
+
name: "Webiny/Image",
|
|
6
|
+
label: "Image",
|
|
7
|
+
group: "basic",
|
|
8
|
+
image: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>',
|
|
9
|
+
autoApplyStyles: false,
|
|
10
|
+
inputs: {
|
|
11
|
+
image: createFileInput({
|
|
12
|
+
label: "Image",
|
|
13
|
+
allowedFileTypes: [
|
|
14
|
+
"image/*"
|
|
15
|
+
],
|
|
16
|
+
onChange: ({ inputs })=>{
|
|
17
|
+
if (inputs.image) {
|
|
18
|
+
inputs.title = inputs.image.name;
|
|
19
|
+
inputs.altText = inputs.image.name;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}),
|
|
23
|
+
title: createTextInput({
|
|
24
|
+
label: "Title",
|
|
25
|
+
description: "Title of the image"
|
|
26
|
+
}),
|
|
27
|
+
altText: createTextInput({
|
|
28
|
+
label: "Alternate Text",
|
|
29
|
+
description: "Shown when the user has disabled images"
|
|
30
|
+
}),
|
|
31
|
+
highPriority: createBooleanInput({
|
|
32
|
+
label: "High Priority",
|
|
33
|
+
description: "Prioritize this image loading over other images on the page",
|
|
34
|
+
defaultValue: false
|
|
35
|
+
})
|
|
36
|
+
},
|
|
37
|
+
defaults: {
|
|
38
|
+
styles: {
|
|
39
|
+
width: "100%"
|
|
21
40
|
}
|
|
22
|
-
}
|
|
23
|
-
}),
|
|
24
|
-
title: createTextInput({
|
|
25
|
-
label: "Title",
|
|
26
|
-
description: "Title of the image"
|
|
27
|
-
}),
|
|
28
|
-
altText: createTextInput({
|
|
29
|
-
label: "Alternate Text",
|
|
30
|
-
description: "Shown when the user has disabled images"
|
|
31
|
-
}),
|
|
32
|
-
highPriority: createBooleanInput({
|
|
33
|
-
label: "High Priority",
|
|
34
|
-
description: "Prioritize this image loading over other images on the page",
|
|
35
|
-
defaultValue: false
|
|
36
|
-
})
|
|
37
|
-
},
|
|
38
|
-
defaults: {
|
|
39
|
-
styles: {
|
|
40
|
-
width: "100%"
|
|
41
41
|
}
|
|
42
|
-
}
|
|
43
42
|
});
|
|
43
|
+
export { Image };
|
|
44
44
|
|
|
45
45
|
//# sourceMappingURL=Image.manifest.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"editorComponents/Image.manifest.js","sources":["../../src/editorComponents/Image.manifest.ts"],"sourcesContent":["\"use client\";\nimport {\n createFileInput,\n createTextInput,\n createBooleanInput,\n createComponent\n} from \"@webiny/website-builder-react\";\nimport { ImageComponent } from \"./Image.js\";\n\nexport const Image = createComponent(ImageComponent, {\n name: \"Webiny/Image\",\n label: \"Image\",\n group: \"basic\",\n image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"><path d=\"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z\"/></svg>`,\n autoApplyStyles: false,\n inputs: {\n image: createFileInput({\n label: \"Image\",\n allowedFileTypes: [\"image/*\"],\n onChange: ({ inputs }) => {\n if (inputs.image) {\n inputs.title = inputs.image.name;\n inputs.altText = inputs.image.name;\n }\n }\n }),\n title: createTextInput({\n label: \"Title\",\n description: \"Title of the image\"\n }),\n altText: createTextInput({\n label: \"Alternate Text\",\n description: \"Shown when the user has disabled images\"\n }),\n highPriority: createBooleanInput({\n label: \"High Priority\",\n description: \"Prioritize this image loading over other images on the page\",\n defaultValue: false\n })\n },\n defaults: {\n styles: {\n width: \"100%\"\n }\n }\n});\n"],"names":["Image","createComponent","ImageComponent","createFileInput","inputs","createTextInput","createBooleanInput"],"mappings":";;;AASO,MAAMA,QAAQC,gBAAgBC,gBAAgB;IACjD,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,iBAAiB;IACjB,QAAQ;QACJ,OAAOC,gBAAgB;YACnB,OAAO;YACP,kBAAkB;gBAAC;aAAU;YAC7B,UAAU,CAAC,EAAEC,MAAM,EAAE;gBACjB,IAAIA,OAAO,KAAK,EAAE;oBACdA,OAAO,KAAK,GAAGA,OAAO,KAAK,CAAC,IAAI;oBAChCA,OAAO,OAAO,GAAGA,OAAO,KAAK,CAAC,IAAI;gBACtC;YACJ;QACJ;QACA,OAAOC,gBAAgB;YACnB,OAAO;YACP,aAAa;QACjB;QACA,SAASA,gBAAgB;YACrB,OAAO;YACP,aAAa;QACjB;QACA,cAAcC,mBAAmB;YAC7B,OAAO;YACP,aAAa;YACb,cAAc;QAClB;IACJ;IACA,UAAU;QACN,QAAQ;YACJ,OAAO;QACX;IACJ;AACJ"}
|
package/index.js
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
export * from "@webiny/website-builder-react";
|
|
2
|
-
export { DocumentRenderer } from "./DocumentRenderer.js";
|
|
3
1
|
import { setHeadersProvider } from "@webiny/website-builder-react";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
headers
|
|
9
|
-
} = await import("next/headers.js");
|
|
10
|
-
return await headers();
|
|
2
|
+
export * from "@webiny/website-builder-react";
|
|
3
|
+
setHeadersProvider(async ()=>{
|
|
4
|
+
const { headers } = await import("next/headers.js");
|
|
5
|
+
return await headers();
|
|
11
6
|
});
|
|
7
|
+
export { DocumentRenderer } from "./DocumentRenderer.js";
|
|
12
8
|
|
|
13
9
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["export * from \"@webiny/website-builder-react\";\nexport { DocumentRenderer } from \"./DocumentRenderer.js\";\n\nimport { setHeadersProvider } from \"@webiny/website-builder-react\";\n\nsetHeadersProvider(async () => {\n // Settings @ts-expect-error breaks the build if the dependency is installed in the repo.\n // @ts-ignore This is a peer dependency.\n const { headers } = await import(\"next/headers.js\");\n return await headers();\n});\n"],"names":["setHeadersProvider","headers"],"mappings":";;AAKAA,mBAAmB;IAGf,MAAM,EAAEC,OAAO,EAAE,GAAG,MAAM,MAAM,CAAC;IACjC,OAAO,MAAMA;AACjB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/website-builder-nextjs",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.4.0-beta.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -18,19 +18,19 @@
|
|
|
18
18
|
],
|
|
19
19
|
"license": "MIT",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@webiny/website-builder-react": "6.
|
|
21
|
+
"@webiny/website-builder-react": "6.4.0-beta.0",
|
|
22
22
|
"postcss": "8.5.14",
|
|
23
23
|
"postcss-import": "16.1.1"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@types/postcss-import": "14.0.3",
|
|
27
|
-
"@webiny/build-tools": "6.
|
|
27
|
+
"@webiny/build-tools": "6.4.0-beta.0",
|
|
28
28
|
"typescript": "6.0.3",
|
|
29
|
-
"vitest": "4.1.
|
|
29
|
+
"vitest": "4.1.6",
|
|
30
30
|
"webpack": "5.106.2"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"next": "16.2.
|
|
33
|
+
"next": "16.2.6"
|
|
34
34
|
},
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"access": "public",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
]
|
|
46
46
|
}
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "a545d7529828af07d08d49c3da1bcb967483b9ce"
|
|
49
49
|
}
|
package/webpack.js
CHANGED
|
@@ -1,56 +1,44 @@
|
|
|
1
1
|
import fs from "fs";
|
|
2
2
|
import postcss from "postcss";
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const result = await postcss([postcssImport()]).process(raw, {
|
|
13
|
-
from: entry
|
|
14
|
-
});
|
|
15
|
-
return result.css;
|
|
3
|
+
import postcss_import from "postcss-import";
|
|
4
|
+
const buildThemeCss = async (entry)=>{
|
|
5
|
+
const raw = fs.readFileSync(entry, "utf8");
|
|
6
|
+
const result = await postcss([
|
|
7
|
+
postcss_import()
|
|
8
|
+
]).process(raw, {
|
|
9
|
+
from: entry
|
|
10
|
+
});
|
|
11
|
+
return result.css;
|
|
16
12
|
};
|
|
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
|
-
return plugins;
|
|
50
|
-
};
|
|
51
|
-
return {
|
|
52
|
-
getPlugins
|
|
53
|
-
};
|
|
13
|
+
const injectThemeCss = async (entry, variableName)=>{
|
|
14
|
+
const defineKey = variableName ?? "__THEME_CSS__";
|
|
15
|
+
const initialCss = await buildThemeCss(entry);
|
|
16
|
+
let definePlugin;
|
|
17
|
+
const getPlugins = (context)=>{
|
|
18
|
+
const { dev, webpack } = context;
|
|
19
|
+
if (!definePlugin) definePlugin = new webpack.DefinePlugin({
|
|
20
|
+
[defineKey]: JSON.stringify(initialCss)
|
|
21
|
+
});
|
|
22
|
+
const plugins = [
|
|
23
|
+
definePlugin
|
|
24
|
+
];
|
|
25
|
+
if (dev) plugins.push({
|
|
26
|
+
apply (compiler) {
|
|
27
|
+
compiler.hooks.afterCompile.tapPromise("WatchThemeCss", async (compilation)=>{
|
|
28
|
+
compilation.fileDependencies.add(entry);
|
|
29
|
+
});
|
|
30
|
+
compiler.hooks.beforeCompile.tapPromise("UpdateThemeCss", async ()=>{
|
|
31
|
+
const cssValue = await buildThemeCss(entry);
|
|
32
|
+
definePlugin.definitions[defineKey] = JSON.stringify(cssValue);
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
return plugins;
|
|
37
|
+
};
|
|
38
|
+
return {
|
|
39
|
+
getPlugins
|
|
40
|
+
};
|
|
54
41
|
};
|
|
42
|
+
export { injectThemeCss };
|
|
55
43
|
|
|
56
44
|
//# sourceMappingURL=webpack.js.map
|
package/webpack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"webpack.js","sources":["../src/webpack.ts"],"sourcesContent":["import fs from \"fs\";\nimport type { WebpackPluginInstance } from \"webpack\";\nimport type { AcceptedPlugin } from \"postcss\";\nimport postcss from \"postcss\";\nimport postcssImport from \"postcss-import\";\nimport type { NextConfig } from \"next\";\n\n// We're inferring the type from Next's config type.\ntype WebpackConfigContext = Parameters<NonNullable<NextConfig[\"webpack\"]>>[1];\n\nconst buildThemeCss = async (entry: string) => {\n // Read CSS entry file.\n const raw = fs.readFileSync(entry, \"utf8\");\n\n // Inline local imports.\n const result = await postcss([postcssImport() as AcceptedPlugin]).process(raw, {\n from: entry\n });\n\n return result.css;\n};\n\nexport const injectThemeCss = async (entry: string, variableName?: string) => {\n const defineKey = variableName ?? \"__THEME_CSS__\";\n\n const initialCss = await buildThemeCss(entry);\n\n // Inject as a global constant available in your app.\n let definePlugin: WebpackPluginInstance;\n\n const getPlugins = (context: WebpackConfigContext) => {\n const { dev, webpack } = context;\n\n if (!definePlugin) {\n definePlugin = new webpack.DefinePlugin({ [defineKey]: JSON.stringify(initialCss) });\n }\n\n const plugins: WebpackPluginInstance[] = [definePlugin];\n\n if (dev) {\n // Watch for changes and update plugin definitions\n plugins.push({\n apply(compiler) {\n compiler.hooks.afterCompile.tapPromise(\"WatchThemeCss\", async compilation => {\n compilation.fileDependencies.add(entry);\n });\n\n compiler.hooks.beforeCompile.tapPromise(\"UpdateThemeCss\", async () => {\n const cssValue = await buildThemeCss(entry);\n // Update the definitions on our specific plugin\n definePlugin.definitions[defineKey] = JSON.stringify(cssValue);\n });\n }\n });\n }\n\n return plugins;\n };\n\n return { getPlugins };\n};\n"],"names":["buildThemeCss","entry","raw","fs","result","postcss","postcssImport","injectThemeCss","variableName","defineKey","initialCss","definePlugin","getPlugins","context","dev","webpack","JSON","plugins","compiler","compilation","cssValue"],"mappings":";;;AAUA,MAAMA,gBAAgB,OAAOC;IAEzB,MAAMC,MAAMC,GAAG,YAAY,CAACF,OAAO;IAGnC,MAAMG,SAAS,MAAMC,QAAQ;QAACC;KAAkC,EAAE,OAAO,CAACJ,KAAK;QAC3E,MAAMD;IACV;IAEA,OAAOG,OAAO,GAAG;AACrB;AAEO,MAAMG,iBAAiB,OAAON,OAAeO;IAChD,MAAMC,YAAYD,gBAAgB;IAElC,MAAME,aAAa,MAAMV,cAAcC;IAGvC,IAAIU;IAEJ,MAAMC,aAAa,CAACC;QAChB,MAAM,EAAEC,GAAG,EAAEC,OAAO,EAAE,GAAGF;QAEzB,IAAI,CAACF,cACDA,eAAe,IAAII,QAAQ,YAAY,CAAC;YAAE,CAACN,UAAU,EAAEO,KAAK,SAAS,CAACN;QAAY;QAGtF,MAAMO,UAAmC;YAACN;SAAa;QAEvD,IAAIG,KAEAG,QAAQ,IAAI,CAAC;YACT,OAAMC,QAAQ;gBACVA,SAAS,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,iBAAiB,OAAMC;oBAC1DA,YAAY,gBAAgB,CAAC,GAAG,CAAClB;gBACrC;gBAEAiB,SAAS,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,kBAAkB;oBACtD,MAAME,WAAW,MAAMpB,cAAcC;oBAErCU,aAAa,WAAW,CAACF,UAAU,GAAGO,KAAK,SAAS,CAACI;gBACzD;YACJ;QACJ;QAGJ,OAAOH;IACX;IAEA,OAAO;QAAEL;IAAW;AACxB"}
|