webstudio 0.142.0 → 0.143.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 +46 -39
- package/package.json +10 -10
- package/templates/defaults/__templates__/route-template.tsx +30 -39
- package/templates/defaults/package.json +7 -7
- package/templates/defaults/remix.config.js +0 -1
- package/templates/netlify-edge-functions/remix.config.js +0 -1
- package/templates/netlify-functions/remix.config.js +0 -1
package/lib/cli.js
CHANGED
|
@@ -259,23 +259,23 @@ import ora2 from "ora";
|
|
|
259
259
|
import merge from "deepmerge";
|
|
260
260
|
import {
|
|
261
261
|
generateCss,
|
|
262
|
-
generateUtilsExport,
|
|
263
262
|
generateWebstudioComponent,
|
|
264
263
|
getIndexesWithinAncestors,
|
|
265
264
|
namespaceMeta,
|
|
266
265
|
normalizeProps,
|
|
267
266
|
generateRemixRoute,
|
|
268
267
|
generateRemixParams,
|
|
269
|
-
|
|
270
|
-
collectionComponent,
|
|
271
|
-
generatePageMeta,
|
|
272
|
-
executeExpression
|
|
268
|
+
collectionComponent
|
|
273
269
|
} from "@webstudio-is/react-sdk";
|
|
274
270
|
import {
|
|
275
271
|
createScope,
|
|
276
272
|
findTreeInstanceIds,
|
|
277
273
|
getPagePath,
|
|
278
|
-
parseComponentName
|
|
274
|
+
parseComponentName,
|
|
275
|
+
executeExpression,
|
|
276
|
+
generateFormsProperties,
|
|
277
|
+
generateResourcesLoader,
|
|
278
|
+
generatePageMeta
|
|
279
279
|
} from "@webstudio-is/sdk";
|
|
280
280
|
import { createImageLoader } from "@webstudio-is/image";
|
|
281
281
|
import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
|
|
@@ -577,17 +577,6 @@ var prebuild = async (options) => {
|
|
|
577
577
|
"useState",
|
|
578
578
|
"Fragment",
|
|
579
579
|
"useResource",
|
|
580
|
-
"PageMeta",
|
|
581
|
-
"createPageMeta",
|
|
582
|
-
"PageData",
|
|
583
|
-
"Asset",
|
|
584
|
-
"ProjectMeta",
|
|
585
|
-
"System",
|
|
586
|
-
"fontAssets",
|
|
587
|
-
"pageData",
|
|
588
|
-
"user",
|
|
589
|
-
"projectId",
|
|
590
|
-
"formsProperties",
|
|
591
580
|
"Page",
|
|
592
581
|
"_props"
|
|
593
582
|
]);
|
|
@@ -624,15 +613,11 @@ var prebuild = async (options) => {
|
|
|
624
613
|
const pageData = siteDataByPage[pageId];
|
|
625
614
|
const pageFontAssets = fontAssetsByPage[pageId];
|
|
626
615
|
const pageBackgroundImageAssets = backgroundImageAssetsByPage[pageId];
|
|
627
|
-
const renderedPageData = {
|
|
628
|
-
project: siteData.build.pages.meta
|
|
629
|
-
};
|
|
630
616
|
const rootInstanceId = pageData.page.rootInstanceId;
|
|
631
617
|
const instances = new Map(pageData.build.instances);
|
|
632
618
|
const props = new Map(pageData.build.props);
|
|
633
619
|
const dataSources = new Map(pageData.build.dataSources);
|
|
634
620
|
const resources = new Map(pageData.build.resources);
|
|
635
|
-
const utilsExport = generateUtilsExport({ props });
|
|
636
621
|
const pageComponent = generateWebstudioComponent({
|
|
637
622
|
scope,
|
|
638
623
|
name: "Page",
|
|
@@ -656,16 +641,18 @@ var prebuild = async (options) => {
|
|
|
656
641
|
[rootInstanceId]
|
|
657
642
|
)
|
|
658
643
|
});
|
|
644
|
+
const favIconAsset = imageAssets.find(
|
|
645
|
+
(asset) => asset.id === siteData.build.pages.meta?.faviconAssetId
|
|
646
|
+
);
|
|
659
647
|
const pageExports = `/* eslint-disable */
|
|
660
648
|
/* This is a auto generated file for building the project */
|
|
661
649
|
|
|
650
|
+
|
|
662
651
|
import { Fragment, useState } from "react";
|
|
663
|
-
import type {
|
|
652
|
+
import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
|
|
664
653
|
import { useResource } from "@webstudio-is/react-sdk";
|
|
665
|
-
import type { PageMeta } from "@webstudio-is/react-sdk";
|
|
666
654
|
${componentImports}
|
|
667
|
-
|
|
668
|
-
export const imageAssets: ImageAsset[] = ${JSON.stringify(imageAssets)}
|
|
655
|
+
export const favIconAsset: ImageAsset | undefined = ${favIconAsset ? JSON.stringify(favIconAsset) : "undefined"};
|
|
669
656
|
|
|
670
657
|
// Font assets on current page (can be preloaded)
|
|
671
658
|
export const pageFontAssets: FontAsset[] = ${JSON.stringify(pageFontAssets)}
|
|
@@ -674,21 +661,46 @@ export const pageBackgroundImageAssets: ImageAsset[] = ${JSON.stringify(
|
|
|
674
661
|
pageBackgroundImageAssets
|
|
675
662
|
)}
|
|
676
663
|
|
|
677
|
-
export const pageData: PageData = ${JSON.stringify(renderedPageData)};
|
|
678
|
-
export const user: { email: string | null } | undefined = ${JSON.stringify(
|
|
679
|
-
siteData.user
|
|
680
|
-
)};
|
|
681
|
-
export const projectId = "${siteData.build.projectId}";
|
|
682
664
|
|
|
683
|
-
${generatePageMeta({ globalScope: scope, page: pageData.page, dataSources })}
|
|
684
665
|
|
|
685
666
|
${pageComponent}
|
|
686
667
|
|
|
687
668
|
export { Page }
|
|
669
|
+
`;
|
|
670
|
+
const serverExports = `/* eslint-disable */
|
|
671
|
+
/* This is a auto generated file for building the project */
|
|
672
|
+
|
|
673
|
+
|
|
674
|
+
import type { ImageAsset, ProjectMeta, PageMeta } from "@webstudio-is/sdk";
|
|
675
|
+
${generateResourcesLoader({
|
|
676
|
+
scope,
|
|
677
|
+
page: pageData.page,
|
|
678
|
+
dataSources,
|
|
679
|
+
resources
|
|
680
|
+
})}
|
|
681
|
+
|
|
682
|
+
${generatePageMeta({
|
|
683
|
+
globalScope: scope,
|
|
684
|
+
page: pageData.page,
|
|
685
|
+
dataSources
|
|
686
|
+
})}
|
|
687
|
+
|
|
688
|
+
${generateFormsProperties(props)}
|
|
688
689
|
|
|
689
690
|
${generateRemixParams(pageData.page.path)}
|
|
690
691
|
|
|
691
|
-
${
|
|
692
|
+
export const projectId = "${siteData.build.projectId}";
|
|
693
|
+
|
|
694
|
+
export const user: { email: string | null } | undefined = ${JSON.stringify(
|
|
695
|
+
siteData.user
|
|
696
|
+
)};
|
|
697
|
+
|
|
698
|
+
export const projectMeta: ProjectMeta = ${JSON.stringify(
|
|
699
|
+
siteData.build.pages.meta
|
|
700
|
+
)};
|
|
701
|
+
|
|
702
|
+
export const imageAssets: ImageAsset[] = ${JSON.stringify(imageAssets)}
|
|
703
|
+
|
|
692
704
|
`;
|
|
693
705
|
const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
|
|
694
706
|
const remixRoute = generateRemixRoute(pagePath);
|
|
@@ -704,12 +716,7 @@ ${utilsExport}
|
|
|
704
716
|
await ensureFileInPath(join4(generatedDir, fileName), pageExports);
|
|
705
717
|
await ensureFileInPath(
|
|
706
718
|
join4(generatedDir, `${remixRoute}.server.tsx`),
|
|
707
|
-
|
|
708
|
-
scope,
|
|
709
|
-
page: pageData.page,
|
|
710
|
-
dataSources,
|
|
711
|
-
resources
|
|
712
|
-
})
|
|
719
|
+
serverExports
|
|
713
720
|
);
|
|
714
721
|
}
|
|
715
722
|
await writeFile4(
|
|
@@ -918,7 +925,7 @@ import makeCLI from "yargs";
|
|
|
918
925
|
// package.json
|
|
919
926
|
var package_default = {
|
|
920
927
|
name: "webstudio",
|
|
921
|
-
version: "0.
|
|
928
|
+
version: "0.143.0",
|
|
922
929
|
description: "Webstudio CLI",
|
|
923
930
|
author: "Webstudio <github@webstudio.is>",
|
|
924
931
|
homepage: "https://webstudio.is",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "webstudio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.143.0",
|
|
4
4
|
"description": "Webstudio CLI",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -28,21 +28,21 @@
|
|
|
28
28
|
"title-case": "^4.1.0",
|
|
29
29
|
"yargs": "^17.7.2",
|
|
30
30
|
"zod": "^3.22.4",
|
|
31
|
-
"@webstudio-is/http-client": "0.
|
|
32
|
-
"@webstudio-is/
|
|
33
|
-
"@webstudio-is/sdk": "0.
|
|
34
|
-
"@webstudio-is/sdk
|
|
35
|
-
"@webstudio-is/
|
|
36
|
-
"@webstudio-is/sdk-components-react-remix": "0.
|
|
37
|
-
"@webstudio-is/sdk-components-react
|
|
31
|
+
"@webstudio-is/http-client": "0.143.0",
|
|
32
|
+
"@webstudio-is/image": "0.143.0",
|
|
33
|
+
"@webstudio-is/react-sdk": "0.143.0",
|
|
34
|
+
"@webstudio-is/sdk": "0.143.0",
|
|
35
|
+
"@webstudio-is/sdk-components-react-radix": "0.143.0",
|
|
36
|
+
"@webstudio-is/sdk-components-react-remix": "0.143.0",
|
|
37
|
+
"@webstudio-is/sdk-components-react": "0.143.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/node": "^18.17.1",
|
|
41
41
|
"@types/prompts": "^2.4.5",
|
|
42
42
|
"tsx": "^3.12.8",
|
|
43
43
|
"typescript": "5.2.2",
|
|
44
|
-
"@webstudio-is/
|
|
45
|
-
"@webstudio-is/
|
|
44
|
+
"@webstudio-is/tsconfig": "1.0.7",
|
|
45
|
+
"@webstudio-is/form-handlers": "0.143.0"
|
|
46
46
|
},
|
|
47
47
|
"scripts": {
|
|
48
48
|
"typecheck": "tsc",
|
|
@@ -10,34 +10,34 @@ import {
|
|
|
10
10
|
redirect,
|
|
11
11
|
} from "@remix-run/server-runtime";
|
|
12
12
|
import { useLoaderData } from "@remix-run/react";
|
|
13
|
-
import type { ProjectMeta } from "@webstudio-is/sdk";
|
|
14
13
|
import { ReactSdkContext } from "@webstudio-is/react-sdk";
|
|
15
14
|
import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
|
|
16
15
|
import {
|
|
17
|
-
pageData,
|
|
18
|
-
user,
|
|
19
|
-
projectId,
|
|
20
|
-
formsProperties,
|
|
21
16
|
Page,
|
|
22
|
-
|
|
23
|
-
getRemixParams,
|
|
24
|
-
getPageMeta,
|
|
17
|
+
favIconAsset,
|
|
25
18
|
pageFontAssets,
|
|
26
19
|
pageBackgroundImageAssets,
|
|
27
20
|
} from "../../../__generated__/_index";
|
|
28
|
-
import {
|
|
21
|
+
import {
|
|
22
|
+
formsProperties,
|
|
23
|
+
loadResources,
|
|
24
|
+
getPageMeta,
|
|
25
|
+
getRemixParams,
|
|
26
|
+
projectId,
|
|
27
|
+
user,
|
|
28
|
+
projectMeta,
|
|
29
|
+
imageAssets,
|
|
30
|
+
} from "../../../__generated__/_index.server";
|
|
31
|
+
|
|
29
32
|
import css from "../__generated__/index.css";
|
|
30
33
|
import { assetBaseUrl, imageBaseUrl, imageLoader } from "~/constants.mjs";
|
|
31
34
|
|
|
32
|
-
export type PageData = {
|
|
33
|
-
project?: ProjectMeta;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
35
|
export const loader = async (arg: LoaderArgs) => {
|
|
36
|
+
const url = new URL(arg.request.url);
|
|
37
37
|
const params = getRemixParams(arg.params);
|
|
38
38
|
const system = {
|
|
39
39
|
params,
|
|
40
|
-
search:
|
|
40
|
+
search: Object.fromEntries(url.searchParams),
|
|
41
41
|
};
|
|
42
42
|
const resources = await loadResources({ system });
|
|
43
43
|
const pageMeta = getPageMeta({ system, resources });
|
|
@@ -55,7 +55,6 @@ export const loader = async (arg: LoaderArgs) => {
|
|
|
55
55
|
arg.request.headers.get("host") ||
|
|
56
56
|
"";
|
|
57
57
|
|
|
58
|
-
const url = new URL(arg.request.url);
|
|
59
58
|
url.host = host;
|
|
60
59
|
url.protocol = "https";
|
|
61
60
|
|
|
@@ -70,6 +69,7 @@ export const loader = async (arg: LoaderArgs) => {
|
|
|
70
69
|
system,
|
|
71
70
|
resources,
|
|
72
71
|
pageMeta,
|
|
72
|
+
projectMeta,
|
|
73
73
|
},
|
|
74
74
|
// No way for current information to change, so add cache for 10 minutes
|
|
75
75
|
// In case of CRM Data, this should be set to 0
|
|
@@ -95,8 +95,7 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
|
|
|
95
95
|
if (data === undefined) {
|
|
96
96
|
return metas;
|
|
97
97
|
}
|
|
98
|
-
const { pageMeta } = data;
|
|
99
|
-
const { project } = pageData;
|
|
98
|
+
const { pageMeta, projectMeta } = data;
|
|
100
99
|
|
|
101
100
|
if (data.url) {
|
|
102
101
|
metas.push({
|
|
@@ -118,16 +117,16 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
|
|
|
118
117
|
|
|
119
118
|
const origin = `https://${data.host}`;
|
|
120
119
|
|
|
121
|
-
if (
|
|
120
|
+
if (projectMeta?.siteName) {
|
|
122
121
|
metas.push({
|
|
123
122
|
property: "og:site_name",
|
|
124
|
-
content:
|
|
123
|
+
content: projectMeta.siteName,
|
|
125
124
|
});
|
|
126
125
|
metas.push({
|
|
127
126
|
"script:ld+json": {
|
|
128
127
|
"@context": "https://schema.org",
|
|
129
128
|
"@type": "WebSite",
|
|
130
|
-
name:
|
|
129
|
+
name: projectMeta.siteName,
|
|
131
130
|
url: origin,
|
|
132
131
|
},
|
|
133
132
|
});
|
|
@@ -186,25 +185,17 @@ export const links: LinksFunction = () => {
|
|
|
186
185
|
href: css,
|
|
187
186
|
});
|
|
188
187
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
src: imageAsset.name,
|
|
201
|
-
width: 128,
|
|
202
|
-
quality: 100,
|
|
203
|
-
format: "auto",
|
|
204
|
-
}),
|
|
205
|
-
type: undefined,
|
|
206
|
-
});
|
|
207
|
-
}
|
|
188
|
+
if (favIconAsset) {
|
|
189
|
+
result.push({
|
|
190
|
+
rel: "icon",
|
|
191
|
+
href: imageLoader({
|
|
192
|
+
src: favIconAsset.name,
|
|
193
|
+
width: 128,
|
|
194
|
+
quality: 100,
|
|
195
|
+
format: "auto",
|
|
196
|
+
}),
|
|
197
|
+
type: undefined,
|
|
198
|
+
});
|
|
208
199
|
} else {
|
|
209
200
|
result.push({
|
|
210
201
|
rel: "icon",
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
"@remix-run/react": "^1.19.2",
|
|
11
11
|
"@remix-run/server-runtime": "^1.19.2",
|
|
12
12
|
"@remix-run/node": "^1.19.2",
|
|
13
|
-
"@webstudio-is/react-sdk": "0.
|
|
14
|
-
"@webstudio-is/sdk-components-react-radix": "0.
|
|
15
|
-
"@webstudio-is/sdk-components-react-remix": "0.
|
|
16
|
-
"@webstudio-is/sdk-components-react": "0.
|
|
17
|
-
"@webstudio-is/form-handlers": "0.
|
|
18
|
-
"@webstudio-is/image": "0.
|
|
19
|
-
"@webstudio-is/sdk": "0.
|
|
13
|
+
"@webstudio-is/react-sdk": "0.143.0",
|
|
14
|
+
"@webstudio-is/sdk-components-react-radix": "0.143.0",
|
|
15
|
+
"@webstudio-is/sdk-components-react-remix": "0.143.0",
|
|
16
|
+
"@webstudio-is/sdk-components-react": "0.143.0",
|
|
17
|
+
"@webstudio-is/form-handlers": "0.143.0",
|
|
18
|
+
"@webstudio-is/image": "0.143.0",
|
|
19
|
+
"@webstudio-is/sdk": "0.143.0",
|
|
20
20
|
"isbot": "^3.6.8",
|
|
21
21
|
"react": "^18.2.0",
|
|
22
22
|
"react-dom": "^18.2.0"
|