Simplify Custom JSX v2 authoring

apps/docs/src/components/custom-widget-code-client.tsx

@@ -53,12 +53,7 @@ const messages: CustomWidgetEditorMessages = {
 };
 
 export function CanonicalCustomWidgetExampleClient({ id, label, example, height }: CanonicalCustomWidgetExampleProps) {
-  const value =
-    example === "requests"
-      ? CUSTOM_WIDGET_REQUEST_EXAMPLES.full
-      : example === "optionsSchema"
-        ? CUSTOM_WIDGET_OPTIONS_EXAMPLES.full.schema
-        : CUSTOM_WIDGET_OPTIONS_EXAMPLES.full.defaults;
+  const value = example === "requests" ? CUSTOM_WIDGET_REQUEST_EXAMPLES.full : CUSTOM_WIDGET_OPTIONS_EXAMPLES.full;
 
   return <CustomWidgetCodeExampleClient id={id} label={label} code={JSON.stringify(value, null, 2)} height={height} />;
 }

apps/docs/src/components/custom-widget-code.tsx

@@ -1,5 +1,10 @@
 import BrowserOnly from "@docusaurus/BrowserOnly";
-import { lazy, Suspense } from "react";
+
+import {
+  BundledCustomWidgetGalleryClient,
+  CanonicalCustomWidgetExampleClient,
+  CustomWidgetCodeExampleClient,
+} from "./custom-widget-code-client";
 
 export interface CustomWidgetCodeExampleProps {
   id: string;
@@ -12,33 +17,14 @@ export interface CustomWidgetCodeExampleProps {
 export interface CanonicalCustomWidgetExampleProps {
   id: string;
   label: string;
-  example: "requests" | "optionsSchema" | "defaultOptions";
+  example: "requests" | "options";
   height?: string;
 }
 
-const LazyCanonicalCustomWidgetExample = lazy(async () => {
-  const module = await import("./custom-widget-code-client");
-  return { default: module.CanonicalCustomWidgetExampleClient };
-});
-
-const LazyCustomWidgetCodeExample = lazy(async () => {
-  const module = await import("./custom-widget-code-client");
-  return { default: module.CustomWidgetCodeExampleClient };
-});
-
-const LazyBundledCustomWidgetGallery = lazy(async () => {
-  const module = await import("./custom-widget-code-client");
-  return { default: module.BundledCustomWidgetGalleryClient };
-});
-
 export function CanonicalCustomWidgetExample(props: CanonicalCustomWidgetExampleProps) {
   return (
     <BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
-      {() => (
-        <Suspense fallback={<CodeExampleFallback height={props.height} />}>
-          <LazyCanonicalCustomWidgetExample {...props} />
-        </Suspense>
-      )}
+      {() => <CanonicalCustomWidgetExampleClient {...props} />}
     </BrowserOnly>
   );
 }
@@ -46,11 +32,7 @@ export function CanonicalCustomWidgetExample(props: CanonicalCustomWidgetExample
 export function CustomWidgetCodeExample(props: CustomWidgetCodeExampleProps) {
   return (
     <BrowserOnly fallback={<CodeExampleFallback height={props.height} />}>
-      {() => (
-        <Suspense fallback={<CodeExampleFallback height={props.height} />}>
-          <LazyCustomWidgetCodeExample {...props} />
-        </Suspense>
-      )}
+      {() => <CustomWidgetCodeExampleClient {...props} />}
     </BrowserOnly>
   );
 }
@@ -58,11 +40,7 @@ export function CustomWidgetCodeExample(props: CustomWidgetCodeExampleProps) {
 export function BundledCustomWidgetGallery() {
   return (
     <BrowserOnly fallback={<CodeExampleFallback height="520px" />}>
-      {() => (
-        <Suspense fallback={<CodeExampleFallback height="520px" />}>
-          <LazyBundledCustomWidgetGallery />
-        </Suspense>
-      )}
+      {() => <BundledCustomWidgetGalleryClient />}
     </BrowserOnly>
   );
 }

apps/docs/src/components/workshop/WorkshopPage.tsx

@@ -542,20 +542,21 @@ function WidgetCapabilitySummary({ content }: { content: string }) {
     <div className={styles.capabilities}>
       <section>
         <strong>API sources</strong>
-        {result.data.sources.map((source) => (
-          <p key={source.id}>
-            <code>{new URL(source.baseUrl).origin}</code> · {source.networkScope} · {source.auth.type}
+        {Object.entries(result.data.sources).map(([sourceId, source]) => (
+          <p key={sourceId}>
+            <code>{new URL(source.baseUrl).origin}</code> · {source.networkScope} ·{" "}
+            {typeof source.auth === "string" ? source.auth : source.auth.type}
           </p>
         ))}
       </section>
       <section>
         <strong>Requests and permissions</strong>
-        {result.data.requests.length === 0 ? (
+        {Object.keys(result.data.requests).length === 0 ? (
           <p>No network requests</p>
         ) : (
-          result.data.requests.map((request) => (
-            <p key={request.id}>
-              <code>{request.id}</code> · {request.kind} · {request.method} · {request.minimumBoardPermission}
+          Object.entries(result.data.requests).map(([requestId, request]) => (
+            <p key={requestId}>
+              <code>{requestId}</code> · {request.kind} · {request.method} · {request.permission}
             </p>
           ))
         )}

apps/docs/src/css/custom.css

@@ -9,6 +9,17 @@
   --breakpoint-3xl: 1697px;
 }
 
+html,
+body,
+#__docusaurus {
+  min-height: 100%;
+  background-color: var(--ifm-background-color);
+}
+
+#__docusaurus {
+  min-height: 100vh;
+}
+
 :root {
   --ifm-color-primary: #fa5252;
   --ifm-color-primary-dark: #f93232;