Rename suspenseData to deferedData

Author: ije

examples/feature-apps/suspense-ssr/server.tsx

@@ -5,7 +5,7 @@ import { renderToReadableStream } from "react-dom/server";
 serve({
   routes: "./routes/**/*.tsx",
   ssr: {
-    suspense: true,
+    dataDefer: true,
     render: (ctx) => renderToReadableStream(<App ssrContext={ctx} />, ctx),
   },
 });

examples/react-app/server.tsx

@@ -11,9 +11,9 @@ serve({
     },
   },
   ssr: {
-    // when set `suspense` to `true`, the router will loading data in suspense mode
-    // please check https://alephjs.org/docs/react/router/suspense
-    suspense: false,
+    // when set `dataDefer` to `true`, the router will loading data as defer
+    // please check https://alephjs.org/docs/react/router/data-defer
+    dataDefer: false,
     render: (ctx) => renderToReadableStream(<App ssrContext={ctx} />, ctx),
   },
 });

framework/react/context.ts

@@ -31,7 +31,7 @@ export type Mutation<T> = {
 };
 
 export type DataContextProps<T = unknown> = {
-  suspenseData?: { current?: T };
+  deferedData?: { current?: T };
   data: T;
   isMutating: HttpMethod | boolean;
   mutation: Mutation<T>;

framework/react/data.ts

@@ -16,7 +16,7 @@ export type DataProviderProps = PropsWithChildren<{
 }>;
 
 export const DataProvider: FC<DataProviderProps> = ({ dataUrl, dataCache, children }) => {
-  const suspenseData = useRef<unknown>();
+  const deferedData = useRef<unknown>();
   const [data, setData] = useState(() => {
     const cached = dataCache.get(dataUrl);
     if (cached) {
@@ -28,10 +28,10 @@ export const DataProvider: FC<DataProviderProps> = ({ dataUrl, dataCache, childr
         if (res instanceof Promise) {
           return res.then((data) => {
             dataCache.set(dataUrl, data);
-            suspenseData.current = data;
+            deferedData.current = data;
           }).catch((error) => {
             dataCache.set(dataUrl, error);
-            suspenseData.current = error;
+            deferedData.current = error;
           });
         }
         throw new Error(`Data for ${dataUrl} has invalid type [function].`);
@@ -171,19 +171,19 @@ export const DataProvider: FC<DataProviderProps> = ({ dataUrl, dataCache, childr
 
   return createElement(
     DataContext.Provider,
-    { value: { suspenseData, data, isMutating, mutation, reload } },
+    { value: { deferedData, data, isMutating, mutation, reload } },
     children,
   );
 };
 
-export const useData = <T = unknown>(): Omit<DataContextProps<T>, "suspenseData"> => {
-  const { suspenseData, data, ...rest } = useContext(DataContext) as DataContextProps<T>;
+export const useData = <T = unknown>(): Omit<DataContextProps<T>, "deferedData"> => {
+  const { deferedData, data, ...rest } = useContext(DataContext) as DataContextProps<T>;
   if (data instanceof Promise) {
-    if (suspenseData?.current instanceof Error) {
-      throw suspenseData.current;
+    if (deferedData?.current instanceof Error) {
+      throw deferedData.current;
     }
-    if (suspenseData?.current !== undefined) {
-      return { ...rest, data: suspenseData.current };
+    if (deferedData?.current !== undefined) {
+      return { ...rest, data: deferedData.current };
     }
     throw data;
   }

framework/react/router.ts

@@ -15,20 +15,20 @@ export type SSRContext = {
   readonly routeModules: RouteModule[];
   readonly headCollection: string[];
   readonly errorBoundaryHandler?: CallableFunction;
-  readonly suspense: boolean;
+  readonly dataDefer: boolean;
 };
 
 export type RouterProps = {
   readonly ssrContext?: SSRContext;
-  readonly suspense?: boolean;
+  readonly dataDefer?: boolean;
   readonly createPortal?: RouterContextProps["createPortal"];
 };
 
 // deno-lint-ignore no-explicit-any
 const global = window as any;
 
 /** The `Router` component for react. */
-export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal }) => {
+export const Router: FC<RouterProps> = ({ ssrContext, dataDefer: dataDeferProp, createPortal }) => {
   const [url, setUrl] = useState(() => ssrContext?.url || new URL(window.location?.href));
   const [modules, setModules] = useState(() => ssrContext?.routeModules || loadSSRModulesFromTag());
   const dataCache = useMemo(() => {
@@ -72,7 +72,7 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
       routeModules[filename] = { defaultExport, withData };
       return { defaultExport, withData };
     };
-    const isSuspense = document.body.getAttribute("data-suspense") ?? suspense;
+    const dataDefer = document.body.getAttribute("data-defer") ?? dataDeferProp;
     const prefetchData = async (dataUrl: string) => {
       const rd: RouteData = {};
       const fetchData = async () => {
@@ -90,7 +90,7 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
           }
           // clean up data cache
           setTimeout(() => dataCache.delete(dataUrl), 0);
-          if (isSuspense) {
+          if (dataDefer) {
             throw err;
           } else {
             // todo: better notify UI
@@ -109,7 +109,7 @@ export const Router: FC<RouterProps> = ({ ssrContext, suspense, createPortal })
           throw new FetchError(500, {}, "Data must be valid JSON");
         }
       };
-      if (isSuspense) {
+      if (dataDefer) {
         rd.data = fetchData;
       } else {
         rd.data = await fetchData();
@@ -361,20 +361,20 @@ function loadSSRModulesFromTag(): RouteModule[] {
     try {
       const data = JSON.parse(el.innerText);
       if (Array.isArray(data)) {
-        let suspenseData: Record<string, unknown> | null | undefined = undefined;
+        let deferedData: Record<string, unknown> | null | undefined = undefined;
         const routeModules = getRouteModules();
-        return data.map(({ url, filename, suspense, ...rest }) => {
-          if (suspense) {
-            if (suspenseData === undefined) {
-              const el = window.document?.getElementById("suspense-data");
+        return data.map(({ url, filename, dataDefered, ...rest }) => {
+          if (dataDefered) {
+            if (deferedData === undefined) {
+              const el = window.document?.getElementById("defered-data");
               if (el) {
-                suspenseData = JSON.parse(el.innerText);
+                deferedData = JSON.parse(el.innerText);
               } else {
-                suspenseData = null;
+                deferedData = null;
               }
             }
-            if (suspenseData) {
-              rest.data = suspenseData[url];
+            if (deferedData) {
+              rest.data = deferedData[url];
             }
           }
           return {

framework/vue/context.ts

@@ -27,7 +27,7 @@ export type Mutation<T> = {
 };
 
 export type DataContextProps<T = unknown> = {
-  suspenseData?: { current?: T };
+  deferedData?: { current?: T };
   data: T;
   isMutating: HttpMethod | boolean;
   mutation: Mutation<T>;

framework/vue/router.ts

@@ -308,20 +308,20 @@ function loadSSRModulesFromTag(): RouteModule[] {
     try {
       const data = JSON.parse(el.innerText);
       if (Array.isArray(data)) {
-        let suspenseData: Record<string, unknown> | null | undefined = undefined;
+        let deferedData: Record<string, unknown> | null | undefined = undefined;
         const routeModules = getRouteModules();
-        return data.map(({ url, filename, suspense, ...rest }) => {
-          if (suspense) {
-            if (suspenseData === undefined) {
-              const el = window.document?.getElementById("suspense-data");
+        return data.map(({ url, filename, dataDefered, ...rest }) => {
+          if (dataDefered) {
+            if (deferedData === undefined) {
+              const el = window.document?.getElementById("defered-data");
               if (el) {
-                suspenseData = JSON.parse(el.innerText);
+                deferedData = JSON.parse(el.innerText);
               } else {
-                suspenseData = null;
+                deferedData = null;
               }
             }
-            if (suspenseData) {
-              rest.data = suspenseData[url];
+            if (deferedData) {
+              rest.data = deferedData[url];
             }
           }
           return {

server/html.ts

@@ -18,7 +18,7 @@ export type HTMLRewriterHandlers = {
 type LoadOptions = {
   isDev: boolean;
   importMap: ImportMap;
-  ssr?: { suspense?: boolean };
+  ssr?: { dataDefer?: boolean };
   hmrWebSocketUrl?: string;
 };
 
@@ -28,7 +28,7 @@ type LoadOptions = {
 // - add `./framework/core/nomodule.ts`
 // - check the `<head>` and `<body>` elements
 // - check the `<ssr-body>` element if the ssr is enabled
-// - add `data-suspense` attribute to `<body>` if using suspense ssr
+// - add `data-defer` attribute to `<body>` if possible
 export async function loadAndFixIndexHtml(options: LoadOptions): Promise<Uint8Array> {
   const { html, hasSSRBody } = await loadIndexHtml();
   return fixIndexHtml(html, hasSSRBody, options);
@@ -174,8 +174,8 @@ function fixIndexHtml(html: Uint8Array, hasSSRBody: boolean, options: LoadOption
   });
   rewriter.on("body", {
     element: (el: Element) => {
-      if (ssr?.suspense) {
-        el.setAttribute("data-suspense", "true");
+      if (ssr?.dataDefer) {
+        el.setAttribute("data-defer", "true");
       }
       if (deployId) {
         el.setAttribute("data-deployment-id", deployId);