feat: Handle formdata at preview (#296)

components/LivePageShowcase.tsx

@@ -51,13 +51,13 @@ const snippet = () => {
       const label = segments[segments.length - 1];
       const description = segments.slice(0, segments.length - 1);
 
-      console.log('aqui', section)
-
       const div = document.createElement("div");
       div.innerHTML = `
           <div style="width: 100%; padding: 16px;">
             <h2 style="font-size: 20px; font-weight: 700">${label}</h2>
-            <p style="font-size: 15px; display: none;">${description.join("/")}</p>
+            <p style="font-size: 15px; display: none;">${
+        description.join("/")
+      }</p>
           </div>
         `;
 

pages/LivePage.tsx

@@ -25,7 +25,8 @@ import { useContext } from "preact/hooks";
 export interface Props {
   name: string;
   path?: string;
-  layout?: Page;
+  // TODO: Bring it back as soon as possible;
+  // layout?: Page;
   sections: Section[];
 }
 
@@ -36,11 +37,9 @@ const IdentityComponent = ({ children }: { children: ComponentChildren }) => (
 );
 
 export function renderSectionFor(mode?: Mode) {
-  const isEditMode = mode === "edit"
+  const isEditMode = mode === "edit";
   const Controls = isEditMode ? BlockControls : () => null;
-  const EditContext = isEditMode
-    ? EditorContextProvider
-    : IdentityComponent;
+  const EditContext = isEditMode ? EditorContextProvider : IdentityComponent;
 
   return function _renderSection(
     { Component: Section, props, metadata }: Props["sections"][0],
@@ -150,12 +149,14 @@ const useSlots = (
  * @returns the rendered page
  */
 const renderPage = (
-  { layout, sections: maybeSections }: Props,
+  { sections: maybeSections }: Props,
   useSlotsFromChild: Record<string, UseSlotSection> = {},
   editMode: Mode = "default",
 ): JSX.Element => {
   const validSections = maybeSections?.filter(notUndefined) ?? [];
-  const layoutProps = layout?.props;
+  // TODO: Uncomment when bring bag layout props
+  // const layoutProps = layout?.props;
+  const layoutProps = undefined;
   const sections = Object.keys(useSlotsFromChild).length > 0
     ? validSections.flatMap(useSlots(useSlotsFromChild))
     : validSections;

routes/live/previews/[...block].tsx

@@ -8,6 +8,9 @@ import Render from "$live/routes/[...catchall].tsx";
 import { LiveConfig, LiveState } from "$live/types.ts";
 import { bodyFromUrl } from "$live/utils/http.ts";
 
+const CONTENT_TYPE = "content-type";
+const APPLICATION_FORM_URLENCODED = "application/x-www-form-urlencoded";
+
 const paramsFromUrl = (
   url: URL,
 ): [Record<string, string | undefined> | undefined, string | null] => {
@@ -50,6 +53,22 @@ export default function Preview(props: PageProps<Page>) {
 
 const addLocal = (block: string): string =>
   block.startsWith("islands") && block.endsWith("tsx") ? `./${block}` : block;
+
+const getPropsFromRequest = async (req: Request) => {
+  const url = new URL(req.url);
+  if (req.method === "POST") {
+    const data = (req.headers.get(CONTENT_TYPE) === APPLICATION_FORM_URLENCODED
+      ? JSON.parse(
+        (await req.clone().formData()).get("props")?.toString() || "{}",
+      )
+      : (await req.json())) ?? {};
+
+    return data;
+  }
+
+  return bodyFromUrl("props", url) ?? {};
+};
+
 export const handler = async (
   req: Request,
   ctx: HandlerContext<
@@ -59,10 +78,7 @@ export const handler = async (
 ) => {
   const { state: { resolve } } = ctx;
   const url = new URL(req.url);
-  const props = req.method === "POST"
-    ? await req.json()
-    : bodyFromUrl("props", url) ?? {};
-
+  const props = await getPropsFromRequest(req);
   const block = addLocal(ctx.params.block);
 
   const end = ctx.state?.t.start("load-data");

sections/PageInclude.tsx

@@ -13,8 +13,9 @@ export interface Props {
 export const isLivePageProps = (
   p: Page["props"] | LivePageProps,
 ): p is LivePageProps => {
-  return (p as LivePageProps)?.sections !== undefined ||
-    (p as LivePageProps)?.layout !== undefined;
+  return (p as LivePageProps)?.sections !== undefined;
+  // TODO: Uncomment when bring back layout
+  // (p as LivePageProps)?.layout !== undefined;
 };
 
 export default function PageInclude({ page }: Props) {