feat: support v7 future (#80)

* feat: add support for the `future` property

* feat: allow for custom router fallback

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Release
+name: Test
 
 on: [push]
 

package.json

@@ -13,7 +13,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/JesusTheHun/storybook-addon-remix-react-router.git"
+    "url": "https://github.com/JesusTheHun/storybook-addon-remix-react-router.git"
   },
   "author": "Jonathan MASSUCHETTI <[email protected]>",
   "license": "Apache-2.0",
@@ -97,7 +97,7 @@
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react": "^3.1.0",
-    "auto": "^11.2.1",
+    "auto": "^11.3.0",
     "boxen": "^5.0.1",
     "chromatic": "^6.17.4",
     "concurrently": "^6.2.0",

src/features/decorator/components/StoryRouter.tsx

@@ -10,7 +10,7 @@ import { RouterLogger } from './RouterLogger';
 
 export function StoryRouter() {
   const { addonParameters = {} } = useStory();
-  const { hydrationData, routing, navigationHistory, location } = addonParameters;
+  const { hydrationData, routing, navigationHistory, location, future, fallback } = addonParameters;
 
   const decorateRouteObjects = useRouteObjectsDecorator();
 
@@ -21,14 +21,35 @@ export function StoryRouter() {
 
     const { initialEntries, initialIndex } = normalizeHistory({ navigationHistory, location, routes: injectedRoutes });
 
-    return createMemoryRouter(injectedRoutes as RouteObject[], {
+    const resolvedOptions: Parameters<typeof createMemoryRouter>[1] = {
       initialEntries,
       initialIndex,
       hydrationData,
-    });
-  }, [decorateRouteObjects, hydrationData, location, navigationHistory, routing]);
+    };
 
-  return <RouterProvider router={memoryRouter} fallbackElement={<Fallback />} />;
+    if (future) {
+      resolvedOptions.future = future;
+    }
+
+    return createMemoryRouter(injectedRoutes as RouteObject[], resolvedOptions);
+  }, [decorateRouteObjects, hydrationData, location, navigationHistory, routing, future]);
+
+  const expandProps: Record<string, unknown> = {};
+  const fallbackElement = fallback ?? <Fallback />;
+
+  if (future) {
+    expandProps.future = future;
+  }
+
+  if (future?.v7_partialHydration === true) {
+    expandProps.HydrateFallback = fallbackElement;
+  }
+
+  if (future?.v7_partialHydration === false) {
+    expandProps.fallbackElement = fallbackElement;
+  }
+
+  return <RouterProvider router={memoryRouter} {...expandProps} />;
 }
 
 function Fallback() {

src/features/decorator/types.ts

@@ -1,4 +1,5 @@
-import { HydrationState } from '@remix-run/router';
+import { HydrationState, FutureConfig } from '@remix-run/router';
+import { FutureConfig as FutureConfigRouter } from 'react-router';
 import React from 'react';
 import { LazyRouteFunction, RouteObject } from 'react-router';
 import { Overwrite, PromiseType } from 'utility-types';
@@ -7,6 +8,8 @@ import { Merge } from '../../utils/type-utils';
 export type RouterParameters = {
   hydrationData?: HydrationState;
   routing?: string | RouterRoute | [RouterRoute, ...RouterRoute[]];
+  future?: Partial<FutureConfig & FutureConfigRouter>;
+  fallback?: React.JSX.Element;
 };
 
 export type LocationParameters<PathParams extends Record<string, string | number> = Record<string, string | number>> = {

src/features/decorator/utils/castParametersV2.ts

@@ -6,7 +6,7 @@ import { LocationParameters, RouterRoute } from '../types';
 import { castRouterRoute } from './castRouterRoute';
 
 export function castParametersV2(parameters: Record<string, unknown> = {}): ReactRouterAddonStoryParameters {
-  const exclusiveV2properties = ['location', 'navigationHistory', 'routing'];
+  const exclusiveV2properties = ['location', 'navigationHistory', 'routing', 'future'];
   const isV2 = Object.keys(parameters ?? {}).some((prop) => exclusiveV2properties.includes(prop));
 
   if (isV2) return parameters;