webstudio 0.205.0 → 0.207.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/lib/cli.js +2080 -1444
- package/package.json +26 -25
- package/templates/cloudflare/package.json +2 -2
- package/templates/defaults/app/route-templates/html.tsx +5 -7
- package/templates/defaults/app/route-templates/xml.tsx +2 -5
- package/templates/defaults/package.json +13 -13
- package/templates/react-router/app/route-templates/html.tsx +5 -7
- package/templates/react-router/app/route-templates/xml.tsx +2 -1
- package/templates/react-router/package.json +12 -12
- package/templates/react-router-docker/package.json +3 -3
- package/templates/react-router-netlify/package.json +1 -1
- package/templates/react-router-vercel/package.json +2 -2
- package/templates/saas-helpers/package.json +3 -0
- package/templates/saas-helpers/vite.config.ts +48 -0
- package/templates/ssg/app/route-templates/html/+Head.tsx +5 -5
- package/templates/ssg/app/route-templates/html/+Page.tsx +2 -1
- package/templates/ssg/package.json +8 -8
- package/templates/vercel/.vercelignore +0 -8
- package/templates/vercel/app/constants.mjs +0 -25
- package/templates/vercel/package.json +0 -1
- package/templates/vercel/vercel.json +0 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "webstudio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.207.0",
|
|
4
4
|
"description": "Webstudio CLI",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@clack/prompts": "^0.10.0",
|
|
30
30
|
"@emotion/hash": "^0.9.2",
|
|
31
|
-
"acorn": "^8.14.
|
|
31
|
+
"acorn": "^8.14.1",
|
|
32
32
|
"acorn-walk": "^8.3.4",
|
|
33
33
|
"change-case": "^5.4.4",
|
|
34
34
|
"deepmerge": "^4.3.1",
|
|
@@ -44,39 +44,40 @@
|
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@netlify/vite-plugin-react-router": "^1.0.0",
|
|
47
|
-
"@react-router/dev": "^7.
|
|
48
|
-
"@react-router/fs-routes": "^7.
|
|
49
|
-
"@remix-run/cloudflare": "^2.
|
|
50
|
-
"@remix-run/cloudflare-pages": "^2.
|
|
51
|
-
"@remix-run/dev": "^2.
|
|
52
|
-
"@remix-run/node": "^2.
|
|
53
|
-
"@remix-run/react": "^2.
|
|
54
|
-
"@remix-run/server-runtime": "^2.
|
|
47
|
+
"@react-router/dev": "^7.3.0",
|
|
48
|
+
"@react-router/fs-routes": "^7.3.0",
|
|
49
|
+
"@remix-run/cloudflare": "^2.16.0",
|
|
50
|
+
"@remix-run/cloudflare-pages": "^2.16.0",
|
|
51
|
+
"@remix-run/dev": "^2.16.0",
|
|
52
|
+
"@remix-run/node": "^2.16.0",
|
|
53
|
+
"@remix-run/react": "^2.16.0",
|
|
54
|
+
"@remix-run/server-runtime": "^2.16.0",
|
|
55
55
|
"@types/react": "^18.2.70",
|
|
56
56
|
"@types/react-dom": "^18.2.25",
|
|
57
57
|
"@types/yargs": "^17.0.33",
|
|
58
|
-
"@vercel/react-router": "^1.0
|
|
58
|
+
"@vercel/react-router": "^1.1.0",
|
|
59
59
|
"@vitejs/plugin-react": "^4.3.4",
|
|
60
|
-
"h3": "^1.15.
|
|
60
|
+
"h3": "^1.15.1",
|
|
61
61
|
"ipx": "^3.0.1",
|
|
62
|
-
"prettier": "3.
|
|
62
|
+
"prettier": "3.5.3",
|
|
63
63
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
64
64
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
65
|
-
"react-router": "^7.
|
|
65
|
+
"react-router": "^7.3.0",
|
|
66
66
|
"ts-expect": "^1.3.0",
|
|
67
|
-
"vike": "^0.4.
|
|
67
|
+
"vike": "^0.4.224",
|
|
68
68
|
"vite": "^5.4.11",
|
|
69
|
-
"vitest": "^3.0.
|
|
69
|
+
"vitest": "^3.0.8",
|
|
70
70
|
"wrangler": "^3.63.2",
|
|
71
|
-
"@webstudio-is/http-client": "0.
|
|
72
|
-
"@webstudio-is/image": "0.
|
|
73
|
-
"@webstudio-is/sdk": "0.
|
|
74
|
-
"@webstudio-is/sdk
|
|
75
|
-
"@webstudio-is/
|
|
76
|
-
"@webstudio-is/sdk-components-react": "0.
|
|
77
|
-
"@webstudio-is/sdk-components-react-
|
|
78
|
-
"@webstudio-is/sdk-components-react-
|
|
79
|
-
"@webstudio-is/sdk-components-react-router": "0.
|
|
71
|
+
"@webstudio-is/http-client": "0.207.0",
|
|
72
|
+
"@webstudio-is/image": "0.207.0",
|
|
73
|
+
"@webstudio-is/react-sdk": "0.207.0",
|
|
74
|
+
"@webstudio-is/sdk": "0.207.0",
|
|
75
|
+
"@webstudio-is/css-engine": "0.207.0",
|
|
76
|
+
"@webstudio-is/sdk-components-react": "0.207.0",
|
|
77
|
+
"@webstudio-is/sdk-components-react-radix": "0.207.0",
|
|
78
|
+
"@webstudio-is/sdk-components-react-remix": "0.207.0",
|
|
79
|
+
"@webstudio-is/sdk-components-react-router": "0.207.0",
|
|
80
|
+
"@webstudio-is/sdk-components-animation": "0.207.0",
|
|
80
81
|
"@webstudio-is/tsconfig": "1.0.7"
|
|
81
82
|
},
|
|
82
83
|
"scripts": {
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"build-cf-types": "wrangler types"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@remix-run/cloudflare": "2.
|
|
16
|
-
"@remix-run/cloudflare-pages": "2.
|
|
15
|
+
"@remix-run/cloudflare": "2.16.0",
|
|
16
|
+
"@remix-run/cloudflare-pages": "2.16.0"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@cloudflare/workers-types": "^4.20240620.0",
|
|
@@ -28,6 +28,7 @@ import {
|
|
|
28
28
|
favIconAsset,
|
|
29
29
|
pageFontAssets,
|
|
30
30
|
pageBackgroundImageAssets,
|
|
31
|
+
breakpoints,
|
|
31
32
|
} from "__CLIENT__";
|
|
32
33
|
import {
|
|
33
34
|
getResources,
|
|
@@ -151,7 +152,7 @@ export const links: LinksFunction = () => {
|
|
|
151
152
|
result.push({
|
|
152
153
|
rel: "icon",
|
|
153
154
|
href: imageLoader({
|
|
154
|
-
src: `${assetBaseUrl}${favIconAsset
|
|
155
|
+
src: `${assetBaseUrl}${favIconAsset}`,
|
|
155
156
|
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
|
|
156
157
|
width: 144,
|
|
157
158
|
height: 144,
|
|
@@ -166,7 +167,7 @@ export const links: LinksFunction = () => {
|
|
|
166
167
|
for (const asset of pageFontAssets) {
|
|
167
168
|
result.push({
|
|
168
169
|
rel: "preload",
|
|
169
|
-
href: `${assetBaseUrl}${asset
|
|
170
|
+
href: `${assetBaseUrl}${asset}`,
|
|
170
171
|
as: "font",
|
|
171
172
|
crossOrigin: "anonymous",
|
|
172
173
|
});
|
|
@@ -175,7 +176,7 @@ export const links: LinksFunction = () => {
|
|
|
175
176
|
for (const backgroundImageAsset of pageBackgroundImageAssets) {
|
|
176
177
|
result.push({
|
|
177
178
|
rel: "preload",
|
|
178
|
-
href: `${assetBaseUrl}${backgroundImageAsset
|
|
179
|
+
href: `${assetBaseUrl}${backgroundImageAsset}`,
|
|
179
180
|
as: "image",
|
|
180
181
|
});
|
|
181
182
|
}
|
|
@@ -232,10 +233,6 @@ export const action = async ({
|
|
|
232
233
|
formData.delete(formBotFieldName);
|
|
233
234
|
|
|
234
235
|
if (resource) {
|
|
235
|
-
resource.headers.push({
|
|
236
|
-
name: "Content-Type",
|
|
237
|
-
value: "application/json",
|
|
238
|
-
});
|
|
239
236
|
resource.body = Object.fromEntries(formData);
|
|
240
237
|
} else {
|
|
241
238
|
if (contactEmail === undefined) {
|
|
@@ -277,6 +274,7 @@ const Outlet = () => {
|
|
|
277
274
|
imageLoader,
|
|
278
275
|
assetBaseUrl,
|
|
279
276
|
resources,
|
|
277
|
+
breakpoints,
|
|
280
278
|
}}
|
|
281
279
|
>
|
|
282
280
|
{/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
ReactSdkContext,
|
|
6
6
|
xmlNodeTagSuffix,
|
|
7
7
|
} from "@webstudio-is/react-sdk/runtime";
|
|
8
|
-
import { Page } from "__CLIENT__";
|
|
8
|
+
import { Page, breakpoints } from "__CLIENT__";
|
|
9
9
|
import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
|
|
10
10
|
import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
|
|
11
11
|
import { sitemap } from "__SITEMAP__";
|
|
@@ -65,16 +65,13 @@ export const loader = async (arg: LoaderFunctionArgs) => {
|
|
|
65
65
|
imageLoader,
|
|
66
66
|
assetBaseUrl,
|
|
67
67
|
resources,
|
|
68
|
+
breakpoints,
|
|
68
69
|
}}
|
|
69
70
|
>
|
|
70
71
|
<Page system={system} />
|
|
71
72
|
</ReactSdkContext.Provider>
|
|
72
73
|
);
|
|
73
74
|
|
|
74
|
-
// Xml is wrapped with <svg> to prevent React from hoisting elements like <title>, <meta>, and <link> out of their intended scope during rendering.
|
|
75
|
-
// More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083
|
|
76
|
-
text = text.replace(/^<svg>/g, "").replace(/<\/svg>$/g, "");
|
|
77
|
-
|
|
78
75
|
// React has issues rendering certain elements, such as errors when a <link> element has children.
|
|
79
76
|
// To render XML, we wrap it with an <svg> tag and add a suffix to avoid React's default behavior on these elements.
|
|
80
77
|
text = text.replaceAll(xmlNodeTagSuffix, "");
|
|
@@ -8,25 +8,25 @@
|
|
|
8
8
|
"typecheck": "tsc"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@remix-run/node": "2.
|
|
12
|
-
"@remix-run/react": "2.
|
|
13
|
-
"@remix-run/server-runtime": "2.
|
|
14
|
-
"@webstudio-is/image": "0.
|
|
15
|
-
"@webstudio-is/react-sdk": "0.
|
|
16
|
-
"@webstudio-is/sdk": "0.
|
|
17
|
-
"@webstudio-is/sdk-components-react": "0.
|
|
18
|
-
"@webstudio-is/sdk-components-animation": "0.
|
|
19
|
-
"@webstudio-is/sdk-components-react-radix": "0.
|
|
20
|
-
"@webstudio-is/sdk-components-react-remix": "0.
|
|
21
|
-
"isbot": "^5.1.
|
|
11
|
+
"@remix-run/node": "2.16.0",
|
|
12
|
+
"@remix-run/react": "2.16.0",
|
|
13
|
+
"@remix-run/server-runtime": "2.16.0",
|
|
14
|
+
"@webstudio-is/image": "0.207.0",
|
|
15
|
+
"@webstudio-is/react-sdk": "0.207.0",
|
|
16
|
+
"@webstudio-is/sdk": "0.207.0",
|
|
17
|
+
"@webstudio-is/sdk-components-react": "0.207.0",
|
|
18
|
+
"@webstudio-is/sdk-components-animation": "0.207.0",
|
|
19
|
+
"@webstudio-is/sdk-components-react-radix": "0.207.0",
|
|
20
|
+
"@webstudio-is/sdk-components-react-remix": "0.207.0",
|
|
21
|
+
"isbot": "^5.1.23",
|
|
22
22
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
23
23
|
"react-dom": "18.3.0-canary-14898b6a9-20240318"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@remix-run/dev": "2.
|
|
26
|
+
"@remix-run/dev": "2.16.0",
|
|
27
27
|
"@types/react": "^18.2.70",
|
|
28
28
|
"@types/react-dom": "^18.2.25",
|
|
29
|
-
"typescript": "5.
|
|
29
|
+
"typescript": "5.8.2",
|
|
30
30
|
"vite": "^5.4.11"
|
|
31
31
|
},
|
|
32
32
|
"engines": {
|
|
@@ -27,6 +27,7 @@ import {
|
|
|
27
27
|
favIconAsset,
|
|
28
28
|
pageFontAssets,
|
|
29
29
|
pageBackgroundImageAssets,
|
|
30
|
+
breakpoints,
|
|
30
31
|
} from "__CLIENT__";
|
|
31
32
|
import {
|
|
32
33
|
getResources,
|
|
@@ -150,7 +151,7 @@ export const links: LinksFunction = () => {
|
|
|
150
151
|
result.push({
|
|
151
152
|
rel: "icon",
|
|
152
153
|
href: imageLoader({
|
|
153
|
-
src: `${assetBaseUrl}${favIconAsset
|
|
154
|
+
src: `${assetBaseUrl}${favIconAsset}`,
|
|
154
155
|
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
|
|
155
156
|
width: 144,
|
|
156
157
|
height: 144,
|
|
@@ -165,7 +166,7 @@ export const links: LinksFunction = () => {
|
|
|
165
166
|
for (const asset of pageFontAssets) {
|
|
166
167
|
result.push({
|
|
167
168
|
rel: "preload",
|
|
168
|
-
href: `${assetBaseUrl}${asset
|
|
169
|
+
href: `${assetBaseUrl}${asset}`,
|
|
169
170
|
as: "font",
|
|
170
171
|
crossOrigin: "anonymous",
|
|
171
172
|
});
|
|
@@ -174,7 +175,7 @@ export const links: LinksFunction = () => {
|
|
|
174
175
|
for (const backgroundImageAsset of pageBackgroundImageAssets) {
|
|
175
176
|
result.push({
|
|
176
177
|
rel: "preload",
|
|
177
|
-
href: `${assetBaseUrl}${backgroundImageAsset
|
|
178
|
+
href: `${assetBaseUrl}${backgroundImageAsset}`,
|
|
178
179
|
as: "image",
|
|
179
180
|
});
|
|
180
181
|
}
|
|
@@ -231,10 +232,6 @@ export const action = async ({
|
|
|
231
232
|
formData.delete(formBotFieldName);
|
|
232
233
|
|
|
233
234
|
if (resource) {
|
|
234
|
-
resource.headers.push({
|
|
235
|
-
name: "Content-Type",
|
|
236
|
-
value: "application/json",
|
|
237
|
-
});
|
|
238
235
|
resource.body = Object.fromEntries(formData);
|
|
239
236
|
} else {
|
|
240
237
|
if (contactEmail === undefined) {
|
|
@@ -276,6 +273,7 @@ const Outlet = () => {
|
|
|
276
273
|
imageLoader,
|
|
277
274
|
assetBaseUrl,
|
|
278
275
|
resources,
|
|
276
|
+
breakpoints,
|
|
279
277
|
}}
|
|
280
278
|
>
|
|
281
279
|
{/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
ReactSdkContext,
|
|
6
6
|
xmlNodeTagSuffix,
|
|
7
7
|
} from "@webstudio-is/react-sdk/runtime";
|
|
8
|
-
import { Page } from "__CLIENT__";
|
|
8
|
+
import { Page, breakpoints } from "__CLIENT__";
|
|
9
9
|
import { getPageMeta, getRemixParams, getResources } from "__SERVER__";
|
|
10
10
|
import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
|
|
11
11
|
import { sitemap } from "__SITEMAP__";
|
|
@@ -65,6 +65,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
|
|
|
65
65
|
imageLoader,
|
|
66
66
|
assetBaseUrl,
|
|
67
67
|
resources,
|
|
68
|
+
breakpoints,
|
|
68
69
|
}}
|
|
69
70
|
>
|
|
70
71
|
<Page system={system} />
|
|
@@ -8,25 +8,25 @@
|
|
|
8
8
|
"typecheck": "tsc"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@react-router/dev": "^7.
|
|
12
|
-
"@react-router/fs-routes": "^7.
|
|
13
|
-
"@webstudio-is/image": "0.
|
|
14
|
-
"@webstudio-is/react-sdk": "0.
|
|
15
|
-
"@webstudio-is/sdk": "0.
|
|
16
|
-
"@webstudio-is/sdk-components-animation": "0.
|
|
17
|
-
"@webstudio-is/sdk-components-react-radix": "0.
|
|
18
|
-
"@webstudio-is/sdk-components-react-router": "0.
|
|
19
|
-
"@webstudio-is/sdk-components-react": "0.
|
|
20
|
-
"isbot": "^5.1.
|
|
11
|
+
"@react-router/dev": "^7.3.0",
|
|
12
|
+
"@react-router/fs-routes": "^7.3.0",
|
|
13
|
+
"@webstudio-is/image": "0.207.0",
|
|
14
|
+
"@webstudio-is/react-sdk": "0.207.0",
|
|
15
|
+
"@webstudio-is/sdk": "0.207.0",
|
|
16
|
+
"@webstudio-is/sdk-components-animation": "0.207.0",
|
|
17
|
+
"@webstudio-is/sdk-components-react-radix": "0.207.0",
|
|
18
|
+
"@webstudio-is/sdk-components-react-router": "0.207.0",
|
|
19
|
+
"@webstudio-is/sdk-components-react": "0.207.0",
|
|
20
|
+
"isbot": "^5.1.23",
|
|
21
21
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
22
22
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
23
|
-
"react-router": "^7.
|
|
23
|
+
"react-router": "^7.3.0",
|
|
24
24
|
"vite": "^5.4.11"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@types/react": "^18.2.70",
|
|
28
28
|
"@types/react-dom": "^18.2.25",
|
|
29
|
-
"typescript": "5.
|
|
29
|
+
"typescript": "5.8.2"
|
|
30
30
|
},
|
|
31
31
|
"engines": {
|
|
32
32
|
"node": ">=20.0.0"
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
"start": "react-router-serve ./build/server/index.js"
|
|
4
4
|
},
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@react-router/node": "^7.
|
|
7
|
-
"@react-router/serve": "^7.
|
|
8
|
-
"h3": "^1.15.
|
|
6
|
+
"@react-router/node": "^7.3.0",
|
|
7
|
+
"@react-router/serve": "^7.3.0",
|
|
8
|
+
"h3": "^1.15.1",
|
|
9
9
|
"ipx": "^3.0.1"
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import {
|
|
2
|
+
vitePlugin as remix,
|
|
3
|
+
cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
|
|
4
|
+
} from "@remix-run/dev";
|
|
5
|
+
import { defineConfig } from "vite";
|
|
6
|
+
|
|
7
|
+
import { existsSync } from "node:fs";
|
|
8
|
+
// @ts-ignore
|
|
9
|
+
import path from "node:path";
|
|
10
|
+
// @ts-ignore
|
|
11
|
+
import fg from "fast-glob";
|
|
12
|
+
|
|
13
|
+
const rootDir = ["..", "../..", "../../.."]
|
|
14
|
+
.map((dir) => path.join(__dirname, dir))
|
|
15
|
+
.find((dir) => existsSync(path.join(dir, ".git")));
|
|
16
|
+
|
|
17
|
+
const hasPrivateFolders =
|
|
18
|
+
fg.sync([path.join(rootDir ?? "", "packages/*/private-src/*")], {
|
|
19
|
+
ignore: ["**/node_modules/**"],
|
|
20
|
+
}).length > 0;
|
|
21
|
+
|
|
22
|
+
const conditions = hasPrivateFolders
|
|
23
|
+
? ["webstudio-private", "webstudio"]
|
|
24
|
+
: ["webstudio"];
|
|
25
|
+
|
|
26
|
+
export default defineConfig(({ mode }) => ({
|
|
27
|
+
resolve: {
|
|
28
|
+
conditions,
|
|
29
|
+
},
|
|
30
|
+
ssr: {
|
|
31
|
+
resolve: {
|
|
32
|
+
conditions,
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
plugins: [
|
|
36
|
+
// without this, remixCloudflareDevProxy trying to load workerd even for production (it's not needed for production)
|
|
37
|
+
mode === "production" ? undefined : remixCloudflareDevProxy(),
|
|
38
|
+
remix({
|
|
39
|
+
future: {
|
|
40
|
+
v3_lazyRouteDiscovery: false,
|
|
41
|
+
v3_relativeSplatPath: false,
|
|
42
|
+
v3_singleFetch: false,
|
|
43
|
+
v3_fetcherPersist: false,
|
|
44
|
+
v3_throwAbortReason: false,
|
|
45
|
+
},
|
|
46
|
+
}),
|
|
47
|
+
].filter(Boolean),
|
|
48
|
+
}));
|
|
@@ -60,7 +60,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
|
|
|
60
60
|
<link
|
|
61
61
|
rel="icon"
|
|
62
62
|
href={imageLoader({
|
|
63
|
-
src: `${assetBaseUrl}${favIconAsset
|
|
63
|
+
src: `${assetBaseUrl}${favIconAsset}`,
|
|
64
64
|
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
|
|
65
65
|
width: 144,
|
|
66
66
|
height: 144,
|
|
@@ -72,18 +72,18 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
|
|
|
72
72
|
)}
|
|
73
73
|
{pageFontAssets.map((asset) => (
|
|
74
74
|
<link
|
|
75
|
-
key={asset
|
|
75
|
+
key={asset}
|
|
76
76
|
rel="preload"
|
|
77
|
-
href={`${assetBaseUrl}${asset
|
|
77
|
+
href={`${assetBaseUrl}${asset}`}
|
|
78
78
|
as="font"
|
|
79
79
|
crossOrigin="anonymous"
|
|
80
80
|
/>
|
|
81
81
|
))}
|
|
82
82
|
{pageBackgroundImageAssets.map((asset) => (
|
|
83
83
|
<link
|
|
84
|
-
key={asset
|
|
84
|
+
key={asset}
|
|
85
85
|
rel="preload"
|
|
86
|
-
href={`${assetBaseUrl}${asset
|
|
86
|
+
href={`${assetBaseUrl}${asset}`}
|
|
87
87
|
as="image"
|
|
88
88
|
/>
|
|
89
89
|
))}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { PageContext } from "vike/types";
|
|
2
2
|
import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
|
|
3
3
|
import { assetBaseUrl, imageLoader } from "__CONSTANTS__";
|
|
4
|
-
import { Page } from "__CLIENT__";
|
|
4
|
+
import { Page, breakpoints } from "__CLIENT__";
|
|
5
5
|
|
|
6
6
|
const PageComponent = ({ data }: { data: PageContext["data"] }) => {
|
|
7
7
|
const { system, resources, url } = data;
|
|
@@ -11,6 +11,7 @@ const PageComponent = ({ data }: { data: PageContext["data"] }) => {
|
|
|
11
11
|
imageLoader,
|
|
12
12
|
assetBaseUrl,
|
|
13
13
|
resources,
|
|
14
|
+
breakpoints,
|
|
14
15
|
}}
|
|
15
16
|
>
|
|
16
17
|
{/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
|
|
@@ -8,21 +8,21 @@
|
|
|
8
8
|
"typecheck": "tsc"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@webstudio-is/image": "0.
|
|
12
|
-
"@webstudio-is/react-sdk": "0.
|
|
13
|
-
"@webstudio-is/sdk": "0.
|
|
14
|
-
"@webstudio-is/sdk-components-react": "0.
|
|
15
|
-
"@webstudio-is/sdk-components-animation": "0.
|
|
16
|
-
"@webstudio-is/sdk-components-react-radix": "0.
|
|
11
|
+
"@webstudio-is/image": "0.207.0",
|
|
12
|
+
"@webstudio-is/react-sdk": "0.207.0",
|
|
13
|
+
"@webstudio-is/sdk": "0.207.0",
|
|
14
|
+
"@webstudio-is/sdk-components-react": "0.207.0",
|
|
15
|
+
"@webstudio-is/sdk-components-animation": "0.207.0",
|
|
16
|
+
"@webstudio-is/sdk-components-react-radix": "0.207.0",
|
|
17
17
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
18
18
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
19
|
-
"vike": "^0.4.
|
|
19
|
+
"vike": "^0.4.224"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@types/react": "^18.2.70",
|
|
23
23
|
"@types/react-dom": "^18.2.25",
|
|
24
24
|
"@vitejs/plugin-react": "^4.3.4",
|
|
25
|
-
"typescript": "5.
|
|
25
|
+
"typescript": "5.8.2",
|
|
26
26
|
"vite": "^5.4.11"
|
|
27
27
|
},
|
|
28
28
|
"engines": {
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* We use mjs extension as constants in this file is shared with the build script
|
|
3
|
-
* and we use `node --eval` to extract the constants.
|
|
4
|
-
*/
|
|
5
|
-
export const assetBaseUrl = "/assets/";
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* @type {import("@webstudio-is/image").ImageLoader}
|
|
9
|
-
*/
|
|
10
|
-
export const imageLoader = (props) => {
|
|
11
|
-
if (process.env.NODE_ENV !== "production") {
|
|
12
|
-
return props.src;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
if (props.format === "raw") {
|
|
16
|
-
return props.src;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
|
|
20
|
-
const searchParams = new URLSearchParams();
|
|
21
|
-
searchParams.set("url", props.src);
|
|
22
|
-
searchParams.set("w", props.width.toString());
|
|
23
|
-
searchParams.set("q", props.quality.toString());
|
|
24
|
-
return `/_vercel/image?${searchParams}`;
|
|
25
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|