Skip to content

Commit c5f15d2

Browse files
TrySoundTrySound
authored
fix: render nothing on website when collection is invalid (#4821)
User got 500 on published site. Turned out collection got invalid data (not array). We need to keep site working in such cases, missing piece will be more intuitive than 500 on whole website.
1 parent b9f84e7 commit c5f15d2

File tree

5 files changed

+9
-8
lines changed

5 files changed

+9
-8
lines changed

‎fixtures/webstudio-custom-template/app/__generated__/[sitemap.xml]._index.tsx‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fixtures/webstudio-remix-vercel/app/__generated__/[resources]._index.tsx‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fixtures/webstudio-remix-vercel/app/__generated__/[sitemap.xml]._index.tsx‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-sdk/src/component-generator.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,7 @@ test("generate collection component as map", () => {
458458
).toEqual(
459459
validateJSX(
460460
clear(`
461-
{data?.map((element: any, index: number) =>
461+
{data?.map?.((element: any, index: number) =>
462462
<Fragment key={index}>
463463
<Label />
464464
<Button
@@ -636,7 +636,7 @@ test("avoid generating collection parameter variable as state", () => {
636636
const Page = () => {
637637
let [data, set$data] = useVariableState<any>(["apple","orange","mango"])
638638
return <Body>
639-
{data?.map((element: any, index: number) =>
639+
{data?.map?.((element: any, index: number) =>
640640
<Fragment key={index}>
641641
</Fragment>
642642
)}
@@ -854,7 +854,7 @@ let [condition, set$condition] = useVariableState<any>(false)
854854
return <Body>
855855
{(condition) &&
856856
<>
857-
{[]?.map((collectionItem: any, index: number) =>
857+
{[]?.map?.((collectionItem: any, index: number) =>
858858
<Fragment key={index}>
859859
</Fragment>
860860
)}

‎packages/react-sdk/src/component-generator.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -251,8 +251,9 @@ export const generateJsxElement = ({
251251
return "";
252252
}
253253
const indexVariable = scope.getName(`${instance.id}-index`, "index");
254-
// fix implicit any error
255-
generatedElement += `{${collectionDataValue}?.map((${collectionItemValue}: any, ${indexVariable}: number) =>\n`;
254+
// collection can be nullable or invalid type
255+
// fix implicitly on published sites
256+
generatedElement += `{${collectionDataValue}?.map?.((${collectionItemValue}: any, ${indexVariable}: number) =>\n`;
256257
generatedElement += `<Fragment key={${indexVariable}}>\n`;
257258
generatedElement += children;
258259
generatedElement += `</Fragment>\n`;

0 commit comments

Comments
 (0)