feat: support auto encode data

examples/basic-project/src/app.tsx

@@ -33,6 +33,7 @@ export default defineAppConfig(() => ({
   app: {
     rootId: 'app',
   },
+  encodeData: true,
 }));
 
 export const dataLoader = defineDataLoader(() => {

packages/runtime/src/Document.tsx

@@ -3,6 +3,7 @@ import type { WindowContext, RouteMatch, AssetsManifest } from './types.js';
 import { useAppContext, useAppData } from './AppContext.js';
 import { getMeta, getTitle, getLinks, getScripts } from './routesConfig.js';
 import getCurrentRoutePath from './utils/getCurrentRoutePath.js';
+import { encodeWindowContext } from './utils/formatWindowContext.js';
 
 interface DocumentContext {
   main: React.ReactNode | null;
@@ -162,7 +163,8 @@ export type DataType = (props: DataProps) => JSX.Element;
 
 // use app context separately
 export const Data: DataType = (props: DataProps) => {
-  const { documentOnly, matches, downgrade, renderMode, serverData, loaderData, revalidate } = useAppContext();
+  const { documentOnly, matches, downgrade, renderMode, serverData, loaderData, revalidate, appConfig } = useAppContext();
+  const { encodeData } = appConfig;
   const appData = useAppData();
   const {
     ScriptElement = 'script',
@@ -171,6 +173,7 @@ export const Data: DataType = (props: DataProps) => {
   const matchedIds = matches.map(match => match.route.id);
   const routePath = matches.length > 0 ? encodeURI(getCurrentRoutePath(matches)) : '';
   const windowContext: WindowContext = {
+    encodeData,
     appData,
     loaderData,
     routePath,
@@ -187,7 +190,7 @@ export const Data: DataType = (props: DataProps) => {
     // Should merge global context when there are multiple <Data />.
     <ScriptElement
       suppressHydrationWarning={documentOnly}
-      dangerouslySetInnerHTML={{ __html: `!(function () {var a = window.__ICE_APP_CONTEXT__ || {};var b = ${JSON.stringify(windowContext)};for (var k in a) {b[k] = a[k]}window.__ICE_APP_CONTEXT__=b;})();` }}
+      dangerouslySetInnerHTML={{ __html: `!(function () {var a = window.__ICE_APP_CONTEXT__ || {};var b = ${JSON.stringify(encodeData ? encodeWindowContext(windowContext) : windowContext)};for (var k in a) {b[k] = a[k]}window.__ICE_APP_CONTEXT__=b;})();` }}
     />
   );
 };

packages/runtime/src/Suspense.tsx

@@ -26,7 +26,7 @@ type Request = (ctx: RequestContext) => Promise<any>;
 
 const SuspenseContext = React.createContext<SuspenseState | undefined>(undefined);
 
-const getHydrateData = (id: string) => {
+const getHydrateData = (id: string, encodeData: boolean) => {
   let data = null;
   const loaderData = isClient && window[LOADER];
   let hasHydrateData: boolean;
@@ -43,17 +43,17 @@ const getHydrateData = (id: string) => {
   }
   return {
     hasHydrateData,
-    data,
+    data: encodeData ? JSON.parse(decodeURI(data)) : data,
   };
 };
 
 export function useSuspenseData(request?: Request) {
   const appContext = useAppContext();
-  const { requestContext } = appContext;
+  const { requestContext, appConfig } = appContext;
   const suspenseState = React.useContext(SuspenseContext);
 
   const { data, done, promise, update, error, id } = suspenseState;
-  const { hasHydrateData, data: hydrateData } = getHydrateData(id);
+  const { hasHydrateData, data: hydrateData } = getHydrateData(id, appConfig.encodeData);
 
   let thenable: Promise<any> = null;
   if (!hasHydrateData && !error && !done && !promise && request) {
@@ -163,9 +163,10 @@ export function withSuspense(Component) {
 }
 
 function Data(props) {
+  const { appConfig } = useAppContext();
   const data = useSuspenseData();
 
   return (
-    <script dangerouslySetInnerHTML={{ __html: `!function(){window['${LOADER}'] = window['${LOADER}'] || {};window['${LOADER}']['${props.id}'] = ${JSON.stringify(data)}}();` }} />
+    <script dangerouslySetInnerHTML={{ __html: `!function(){window['${LOADER}'] = window['${LOADER}'] || {};window['${LOADER}']['${props.id}'] = ${appConfig.encodeData ? encodeURI(JSON.stringify(data)) : JSON.stringify(data)}}();` }} />
   );
 }

packages/runtime/src/dataLoader.ts

@@ -4,6 +4,7 @@ import type {
   RuntimeModules, StaticRuntimePlugin, CommonJsRuntime,
   Loader, DataLoaderResult, StaticDataLoader, DataLoaderConfig, DataLoaderOptions,
 } from './types.js';
+import { decodeWindowContext } from './utils/formatWindowContext.js';
 interface Loaders {
   [routeId: string]: DataLoaderConfig;
 }
@@ -167,7 +168,8 @@ const cache = new Map<string, CachedResult>();
  * Start getData once data-loader.js is ready in client, and set to cache.
  */
 function loadInitialDataInClient(loaders: Loaders) {
-  const context = (window as any).__ICE_APP_CONTEXT__ || {};
+  const windowContext = (window as any).__ICE_APP_CONTEXT__ || {};
+  const context = windowContext.encodeData ? decodeWindowContext((window as any).__ICE_APP_CONTEXT__ || {}) : windowContext;
   const matchedIds = context.matchedIds || [];
   const loaderData = context.loaderData || {};
   const { renderMode } = context;

packages/runtime/src/runClientApp.tsx

@@ -21,6 +21,7 @@ import addLeadingSlash from './utils/addLeadingSlash.js';
 import { AppContextProvider } from './AppContext.js';
 import { deprecatedHistory } from './utils/deprecatedHistory.js';
 import reportRecoverableError from './reportRecoverableError.js';
+import { decodeWindowContext } from './utils/formatWindowContext.js';
 
 export type CreateRoutes = (options: Pick<RouteLoaderOptions, 'renderMode' | 'requestContext'>) => RouteItem[];
 
@@ -49,7 +50,7 @@ export default async function runClientApp(options: RunClientAppOptions) {
     dataLoaderFetcher,
     dataLoaderDecorator,
   } = options;
-
+  const appConfig = getAppConfig(app);
   const windowContext: WindowContext = (window as any).__ICE_APP_CONTEXT__ || {};
   const assetsManifest: AssetsManifest = (window as any).__ICE_ASSETS_MANIFEST__ || {};
   let {
@@ -61,10 +62,10 @@ export default async function runClientApp(options: RunClientAppOptions) {
     renderMode,
     serverData,
     revalidate,
-  } = windowContext;
+  } = appConfig.encodeData ? decodeWindowContext(windowContext) : windowContext;
   const formattedBasename = addLeadingSlash(basename);
   const requestContext = getRequestContext(window.location);
-  const appConfig = getAppConfig(app);
+
   const routes = createRoutes ? createRoutes({
     requestContext,
     renderMode: 'CSR',

packages/runtime/src/types.ts

@@ -67,6 +67,7 @@ export interface AppConfig {
     basename?: string;
     initialEntries?: InitialEntry[];
   };
+  encodeData?: boolean;
 }
 
 export interface RoutesConfig {
@@ -126,7 +127,7 @@ AppContext,
 export type WindowContext = Pick<
 AppContext,
   'appData' | 'loaderData' | 'routePath' | 'downgrade' | 'matchedIds' | 'documentOnly' | 'renderMode' | 'serverData' | 'revalidate'
->;
+> & Pick<AppContext['appConfig'], 'encodeData'>;
 
 export type Renderer = (
   container: Element | Document,

packages/runtime/src/utils/formatWindowContext.ts

@@ -0,0 +1,27 @@
+import type { WindowContext } from '../types.js';
+
+const DATA_KEYS = ['appData', 'loaderData', 'serverData'];
+
+export const encodeWindowContext = (context: WindowContext) => {
+  const encodedContext = {};
+  Object.keys(context).forEach((key) => {
+    if (DATA_KEYS.includes(key) && context[key]) {
+      encodedContext[key] = encodeURI(JSON.stringify(context[key]));
+    } else {
+      encodedContext[key] = context[key];
+    }
+  });
+  return encodedContext;
+};
+
+export const decodeWindowContext = (context: WindowContext) => {
+  const decodedContext = {};
+  Object.keys(context).forEach((key) => {
+    if (DATA_KEYS.includes(key) && typeof context[key] === 'string') {
+      decodedContext[key] = JSON.parse(decodeURI(context[key]));
+    } else {
+      decodedContext[key] = context[key];
+    }
+  });
+  return decodedContext as WindowContext;
+};