diff options
Diffstat (limited to 'bs5/server/pages/Index.re')
| -rw-r--r-- | bs5/server/pages/Index.re | 216 |
1 files changed, 204 insertions, 12 deletions
diff --git a/bs5/server/pages/Index.re b/bs5/server/pages/Index.re index d5af822..685069a 100644 --- a/bs5/server/pages/Index.re +++ b/bs5/server/pages/Index.re @@ -1,16 +1,208 @@ +open Rsc; +module Section = { + [@react.component] + let make = (~title, ~children, ~description=?) => { + <Stack gap=2 justify=`start> + <h2 + className={Cx.make([ + "text-3xl", + "font-bold", + Theme.text(Theme.Color.Gray11), + ])}> + {React.string(title)} + </h2> + {switch (description) { + | Some(description) => + <Text color=Theme.Color.Gray10> description </Text> + | None => React.null + }} + <div className="mb-4" /> + children + </Stack>; + }; +}; + +module ExpandedContent = { + [@react.component] + let make = (~id, ~content: string, ~updatedAt: float, ~title: string) => { + let lastUpdatedAt = + if (Date.is_today(updatedAt)) { + Date.format_time(updatedAt); + } else { + Date.format_date(updatedAt); + }; + + let summary = + content |> Markdown.extract_text |> Markdown.summarize(~words=20); + + <Expander + id + title + expandedChildren={ + <div className="mt-2"> + {switch (String.trim(summary)) { + | "" => <i> {React.string("(No content)")} </i> + | s => <Text size=Small color=Theme.Color.Gray11> s </Text> + }} + <Counter.Double initial=22 /> + </div> + }> + <header + className={Cx.make(["max-w-[85%] flex flex-col gap-2"])} + style={ReactDOM.Style.make(~zIndex="1", ())}> + <Text size=Large weight=Bold> title </Text> + <Text size=Small> lastUpdatedAt </Text> + </header> + </Expander>; + }; +}; + module Page = { [@react.async.component] let make = () => { - // let promiseIn2 = - // Lwt.bind(Lwt_unix.sleep(2.0), _ => - // Lwt.return("Solusionao in 2 seconds!") - // ); - // let promiseIn4 = - // Lwt.bind(Lwt_unix.sleep(4.0), _ => - // Lwt.return("Solusionao in 4 seconds!") - // ); + let promiseIn2 = + Lwt.bind(Lwt_unix.sleep(2.0), _ => + Lwt.return("Solusionao in 2 seconds!") + ); + let promiseIn4 = + Lwt.bind(Lwt_unix.sleep(4.0), _ => + Lwt.return("Solusionao in 4 seconds!") + ); + Lwt.return( - <div> {React.string("Well hi")} </div>, + <Stack gap=8 justify=`start> + <Stack gap=2 justify=`start> + <h1 + className={Cx.make([ + "text-3xl", + "font-bold", + Theme.text(Theme.Color.Gray11), + ])}> + {React.string( + "Server side rendering server components and client components", + )} + </h1> + <Text color=Theme.Color.Gray10> + "React server components. Lazy loading of client components. Client props encodings, such as promises, React elements, and primitive types." + </Text> + </Stack> + <Hr /> + <Section + title="Counter" + description="Passing int into a client component, the counter starts at 45 and counts by one"> + <Counter initial=45 /> + </Section> + <Hr /> + <Section + title="Debug client props" + description="Passing client props into a client component"> + <Debug_props + string="Title" + float=1.1 + bool_true=true + bool_false=false + header={Some(<div> {React.string("H E A D E R")} </div>)} + string_list=["Item 1", "Item 2"] + promise=promiseIn2> + <div> + {React.string( + "This footer is a React.element as a server component into client prop, yay!", + )} + </div> + </Debug_props> + </Section> + <Hr /> + <Section + title="Debug client props" + description="Passing client props into a client component"> + <Debug_props + string="Title" + int=99 + float=1.1 + bool_true=true + bool_false=false + header={Some(<div> {React.string("H E A D E R")} </div>)} + string_list=["Item 1", "Item 2"] + promise=promiseIn2> + <div> + {React.string( + "This footer is a React.element as a server component into client prop, yay!", + )} + </div> + </Debug_props> + </Section> + <Hr /> + <Section + title="Pass another promise prop" + description="Sending a promise from the server to the client"> + <Promise_renderer promise=promiseIn4 /> + </Section> + <Hr /> + <Section + title="Pass a client component prop" + description="Sending a client component from the server to the client (that contains another client component)"> + <ExpandedContent + id=1 + title="Titulaso" + updatedAt=1653561600.0 + content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." + /> + </Section> + <Hr /> + <h1 + className={Cx.make([ + "text-5xl", + "font-bold", + Theme.text(Theme.Color.Gray11), + ])}> + {React.string("Server functions")} + </h1> + <Hr /> + <Section + title="Server function from props on a Client Component" + description="In this case, react will use the server function from the window.__server_functions_manifest_map"> + <ServerActionFromPropsClient + actionOnClick=ServerFunctions.simpleResponse + /> + </Section> + <Hr /> + <Section + title="Server function with simple response" + description="Server function imported and called directly on a client component"> + <ServerActionWithSimpleResponse /> + </Section> + <Hr /> + <Section + title="Server function with error" + description="Server function with error"> + <ServerActionWithError /> + </Section> + <Hr /> + <Section + title="Server function with FormData" + description="Server function with FormData"> + <ServerActionWithFormData /> + </Section> + <Hr /> + <Section + title="Server function with FormData on action attribute on Server Component" + description="In this case, react will use the server function from the window.__server_functions_manifest_map"> + <ServerActionWithFormDataServer /> + </Section> + <Hr /> + <Section + title="Server function with FormData on formAction attribute on Server Component" + description="In this case, react will use the server function from the window.__server_functions_manifest_map"> + <ServerActionWithFormDataFormAction /> + </Section> + <Hr /> + <Section + title="Server function with FormData with extra arg" + description="It shows that it's possible to pass extra arguments to the server function on forms"> + <ServerActionWithFormDataWithArg /> + </Section> + <Hr /> + </Stack>, ); }; }; @@ -25,15 +217,15 @@ module App = { </head> <body> <div id="root"> - // <DemoLayout background=Theme.Color.Gray2> <Page /> </DemoLayout> - <div> <Page /> </div> </div> + <DemoLayout background=Theme.Color.Gray2> <Page /> </DemoLayout> + </div> </body> </html>; }; }; let handler = request => - Rsc.DreamRSC.create_from_request( + DreamRSC.create_from_request( ~bootstrap_modules=["/static/demo/SinglePageRSC.re.js"], <App />, request, |