From 8b8e9d1e9a2ed44a7f8488549ba08a44ece96443 Mon Sep 17 00:00:00 2001
From: Johan Haals <johan.haals@gmail.com>
Date: Mon, 15 Feb 2021 11:12:53 +0100
Subject: [PATCH] Export createExternalRouteRef and set id
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: blam<ben@blam.sh>
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 docs/plugins/composability.md                |  2 +-
 packages/core-api/src/app/App.test.tsx       |  8 ++++----
 packages/core-api/src/routing/RouteRef.ts    | 21 ++++++++++++++------
 packages/core-api/src/routing/hooks.test.tsx |  6 +++---
 packages/core-api/src/routing/hooks.tsx      |  2 +-
 packages/core-api/src/routing/index.ts       |  2 +-
 6 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/docs/plugins/composability.md b/docs/plugins/composability.md
index a496217875..6106fa9141 100644
--- a/docs/plugins/composability.md
+++ b/docs/plugins/composability.md
@@ -248,7 +248,7 @@ might be linking to, allowing the app to decide the final target. If the
 declare an `ExternalRouteRef` similar to this:
 
 ```ts
-const headerLinkRouteRef = createExternalRouteRef();
+const headerLinkRouteRef = createExternalRouteRef({ id: 'header-link' });
 ```
 
 ### Binding External Routes in the App
diff --git a/packages/core-api/src/app/App.test.tsx b/packages/core-api/src/app/App.test.tsx
index 8dd40d52b0..6a1e80334b 100644
--- a/packages/core-api/src/app/App.test.tsx
+++ b/packages/core-api/src/app/App.test.tsx
@@ -28,7 +28,7 @@ import { generateBoundRoutes, PrivateAppImpl } from './App';
 
 describe('generateBoundRoutes', () => {
   it('runs happy path', () => {
-    const external = { myRoute: createExternalRouteRef() };
+    const external = { myRoute: createExternalRouteRef({ id: '1' }) };
     const ref = createRouteRef({ path: '', title: '' });
     const result = generateBoundRoutes(({ bind }) => {
       bind(external, { myRoute: ref });
@@ -38,7 +38,7 @@ describe('generateBoundRoutes', () => {
   });
 
   it('throws on unknown keys', () => {
-    const external = { myRoute: createExternalRouteRef() };
+    const external = { myRoute: createExternalRouteRef({ id: '2' }) };
     const ref = createRouteRef({ path: '', title: '' });
     expect(() =>
       generateBoundRoutes(({ bind }) => {
@@ -51,7 +51,7 @@ describe('generateBoundRoutes', () => {
 describe('Integration Test', () => {
   const plugin1RouteRef = createRouteRef({ path: '/blah1', title: '' });
   const plugin2RouteRef = createRouteRef({ path: '/blah2', title: '' });
-  const externalRouteRef = createExternalRouteRef();
+  const externalRouteRef = createExternalRouteRef({ id: '3' });
 
   const plugin1 = createPlugin({
     id: 'blob',
@@ -77,7 +77,7 @@ describe('Integration Test', () => {
         Promise.resolve((_: PropsWithChildren<{ path?: string }>) => {
           // eslint-disable-next-line react-hooks/rules-of-hooks
           const routeRefFunction = useRouteRef(externalRouteRef);
-          return <div>Our Route Is: {routeRefFunction({})}</div>;
+          return <div>Our Route Is: {routeRefFunction()}</div>;
         }),
       mountPoint: plugin1RouteRef,
     }),
diff --git a/packages/core-api/src/routing/RouteRef.ts b/packages/core-api/src/routing/RouteRef.ts
index 0a3df49b58..5ae85ab553 100644
--- a/packages/core-api/src/routing/RouteRef.ts
+++ b/packages/core-api/src/routing/RouteRef.ts
@@ -65,13 +65,22 @@ export function createRouteRef<
 }
 
 export class ExternalRouteRef {
-  private constructor() {}
-
-  toString() {
-    return `externalRouteRef{}`;
+  private constructor(id: string) {
+    this.toString = () => `externalRouteRef{${id}}`;
   }
 }
 
-export function createExternalRouteRef(): ExternalRouteRef {
-  return new ((ExternalRouteRef as unknown) as { new (): ExternalRouteRef })();
+export type ExternalRouteRefOptions = {
+  /**
+   * An identifier for this route, used to identify it in error messages
+   */
+  id: string;
+};
+
+export function createExternalRouteRef(
+  options: ExternalRouteRefOptions,
+): ExternalRouteRef {
+  return new ((ExternalRouteRef as unknown) as {
+    new (id: string): ExternalRouteRef;
+  })(options.id);
 }
diff --git a/packages/core-api/src/routing/hooks.test.tsx b/packages/core-api/src/routing/hooks.test.tsx
index 84a8314807..462b44c3bd 100644
--- a/packages/core-api/src/routing/hooks.test.tsx
+++ b/packages/core-api/src/routing/hooks.test.tsx
@@ -59,9 +59,9 @@ const ref2 = createRouteRef(mockConfig({ path: '/wat2' }));
 const ref3 = createRouteRef(mockConfig({ path: '/wat3' }));
 const ref4 = createRouteRef(mockConfig({ path: '/wat4' }));
 const ref5 = createRouteRef(mockConfig({ path: '/wat5' }));
-const eRefA = createExternalRouteRef();
-const eRefB = createExternalRouteRef();
-const eRefC = createExternalRouteRef();
+const eRefA = createExternalRouteRef({ id: '1' });
+const eRefB = createExternalRouteRef({ id: '2' });
+const eRefC = createExternalRouteRef({ id: '3' });
 
 const MockRouteSource = <T extends { [name in string]: string }>(props: {
   path?: string;
diff --git a/packages/core-api/src/routing/hooks.tsx b/packages/core-api/src/routing/hooks.tsx
index 3a18d8b0af..c478027ae2 100644
--- a/packages/core-api/src/routing/hooks.tsx
+++ b/packages/core-api/src/routing/hooks.tsx
@@ -111,7 +111,7 @@ class RouteResolver {
 
 const RoutingContext = createContext<RouteResolver | undefined>(undefined);
 
-export function useRouteRef<Params extends { [param in string]: string }>(
+export function useRouteRef<Params extends { [param in string]: string } = {}>(
   routeRef: RouteRef<Params> | ExternalRouteRef,
 ): RouteFunc<Params> {
   const sourceLocation = useLocation();
diff --git a/packages/core-api/src/routing/index.ts b/packages/core-api/src/routing/index.ts
index af71e0c3e9..ad88f8ff02 100644
--- a/packages/core-api/src/routing/index.ts
+++ b/packages/core-api/src/routing/index.ts
@@ -21,6 +21,6 @@ export type {
   MutableRouteRef,
 } from './types';
 export { FlatRoutes } from './FlatRoutes';
-export { createRouteRef } from './RouteRef';
+export { createRouteRef, createExternalRouteRef } from './RouteRef';
 export type { RouteRefConfig } from './RouteRef';
 export { useRouteRef } from './hooks';