From acc5bf721a9e28afb709d6049efb17ae206275bb Mon Sep 17 00:00:00 2001
From: Matt Jones <mattjones701@gmail.com>
Date: Mon, 1 Jun 2020 14:57:35 +1000
Subject: [PATCH] feat: Support custom frame URLs

---
 src/Playroom/Frames/Frames.tsx  | 10 +++++-----
 src/Playroom/Frames/frameSrc.ts | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/Playroom/Frames/frameSrc.ts

diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index e10c954a..30c05757 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -6,6 +6,7 @@ import { PlayroomProps } from '../Playroom';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
 import playroomConfig from '../../config';
+import frameSrc from './frameSrc';
 
 // @ts-ignore
 import styles from './Frames.less';
@@ -54,11 +55,10 @@ export default function Frames({ code, themes, widths }: FramesProps) {
           </div>
           <Iframe
             intersectionRootRef={scrollingPanelRef}
-            src={`${playroomConfig.baseUrl}frame.html${
-              playroomConfig.paramType === 'hash' ? '#' : ''
-            }?themeName=${encodeURIComponent(
-              frame.theme
-            )}&code=${encodeURIComponent(renderCode)}`}
+            src={frameSrc(
+              { themeName: frame.theme, code: renderCode },
+              playroomConfig
+            )}
             className={styles.frame}
             style={{ width: frame.width }}
             data-testid="previewFrame"
diff --git a/src/Playroom/Frames/frameSrc.ts b/src/Playroom/Frames/frameSrc.ts
new file mode 100644
index 00000000..54b2f668
--- /dev/null
+++ b/src/Playroom/Frames/frameSrc.ts
@@ -0,0 +1,19 @@
+/* eslint-disable-next-line import/no-unresolved */
+// @ts-ignore
+import { frameSrc } from '__PLAYROOM_ALIAS__FRAME_COMPONENT__';
+
+interface FrameParams {
+  code: string;
+  themeName: string;
+}
+const defaultFrameSrc = (
+  { code, themeName }: FrameParams,
+  { baseUrl, paramType }: InternalPlayroomConfig
+) =>
+  `${baseUrl}frame.html${
+    paramType === 'hash' ? '#' : ''
+  }?themeName=${encodeURIComponent(themeName)}&code=${encodeURIComponent(
+    code
+  )}`;
+
+export default frameSrc ? frameSrc : defaultFrameSrc;