From 42e897e42b2a5b7a1933628cb977b26ce8faa460 Mon Sep 17 00:00:00 2001 From: Rusty Key Date: Tue, 26 Mar 2024 16:47:34 +0000 Subject: [PATCH 1/7] add persistent iframe showcase --- src/ReshowcaseUi.re | 151 +++++++++++++++++++++++--------------------- 1 file changed, 79 insertions(+), 72 deletions(-) diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re index b579164..533f324 100644 --- a/src/ReshowcaseUi.re +++ b/src/ReshowcaseUi.re @@ -611,9 +611,9 @@ module DemoUnitSidebar = { onIntChange( @@ -633,9 +633,9 @@ module DemoUnitSidebar = { onFloatChange( @@ -915,16 +915,17 @@ module DemoUnitFrame = { [@react.component] let make = - (~queryString: string, ~responsiveMode, ~onLoad: Js.t('a) => unit) => { - let iframePath = if (useFullframeUrl) {"demo/index.html"} else {"demo"}; + ( + ~queryString as _: string, + ~responsiveMode, + ~onLoad as _: Js.t('a) => unit, + ~children, + ) => { + let (body, setBody) = React.useState(_ => None); + let _iframePath = if (useFullframeUrl) {"demo/index.html"} else {"demo"}; +
; }; }; @@ -1010,7 +1023,7 @@ module App = { type route = | Unit(URLSearchParams.t, string) - | Demo(string) + | Demo(string, string) | Home; [@react.component] @@ -1023,11 +1036,11 @@ module App = { urlSearchParams->(URLSearchParams.get("demo")), ) { | (Some("true"), Some(demoName)) => Unit(urlSearchParams, demoName) - | (_, Some(_)) => Demo(url.search) + | (_, Some(demoName)) => Demo(url.search, demoName) | _ => Home }; - let (loadedIframeWindow: option(Js.t('a)), setLoadedIframeWindow) = + let (loadedIframeWindow: option(Js.t('a)), _setLoadedIframeWindow) = React.useState(() => None); let (iframeKey, setIframeKey) = @@ -1089,6 +1102,17 @@ module App = { };
+ {switch (route) { + | Unit(_, _) => React.null + | Demo(_, _) + | Home => + + }} {switch (route) { | Unit(urlSearchParams, demoName) => let demoUnit = Demos.findDemo(urlSearchParams, demoName, demos); @@ -1097,64 +1121,47 @@ module App = { ->(Option.map(demoUnit => )) ->(Option.getWithDefault("Demo not found"->React.string))}
; - | Demo(queryString) => - <> - + let demoUnit = + Demos.findDemo(urlSearchParams, demoName, demos) + ->(Option.map(demoUnit => )) + ->(Option.getWithDefault("Demo not found"->React.string)); +
+ { + toggleShowRightSidebar(_ => !showRightSidebar); + switch (loadedIframeWindow) { + | Some(window) when !showRightSidebar => + Window.postMessage(window, RightSidebarDisplayed) + | None + | _ => () + }; + }} + onSetResponsiveMode /> -
- { - toggleShowRightSidebar(_ => !showRightSidebar); - switch (loadedIframeWindow) { - | Some(window) when !showRightSidebar => - Window.postMessage(window, RightSidebarDisplayed) - | None - | _ => () - }; - }} - onSetResponsiveMode - /> -
-
- - setLoadedIframeWindow(_ => Some(iframeWindow)) - } - /> -
- {if (showRightSidebar) { - ; - } else { - React.null; - }} +
+
+ ()}> + demoUnit +
+ {if (showRightSidebar) { + ; + } else { + React.null; + }}
- - +
; | Home => - <> - -
-
"Pick a demo"->React.string
-
- +
+
"Pick a demo"->React.string
+
}}
; }; From 8595ef56b0f93e40efbf59b818e250b1dc3ec5f1 Mon Sep 17 00:00:00 2001 From: Rusty Key Date: Tue, 26 Mar 2024 17:08:17 +0000 Subject: [PATCH 2/7] restore onLoad handler --- src/ReshowcaseUi.re | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re index 533f324..8b9bcd5 100644 --- a/src/ReshowcaseUi.re +++ b/src/ReshowcaseUi.re @@ -918,7 +918,7 @@ module DemoUnitFrame = { ( ~queryString as _: string, ~responsiveMode, - ~onLoad as _: Js.t('a) => unit, + ~onLoad: Js.t('a) => unit, ~children, ) => { let (body, setBody) = React.useState(_ => None); @@ -943,10 +943,9 @@ module DemoUnitFrame = { onLoad={event => { let iframe = event->React.Event.Synthetic.target; let body = - iframe##contentWindow - ->Option.flatMap(w => w##document) - ->Option.flatMap(d => d##body); + iframe##contentWindow##document->Option.flatMap(d => d##body); setBody(_ => body); + onLoad(iframe##contentWindow); }}> {switch (body) { | None => React.null @@ -1040,7 +1039,7 @@ module App = { | _ => Home }; - let (loadedIframeWindow: option(Js.t('a)), _setLoadedIframeWindow) = + let (loadedIframeWindow: option(Js.t('a)), setLoadedIframeWindow) = React.useState(() => None); let (iframeKey, setIframeKey) = @@ -1144,7 +1143,11 @@ module App = {
()}> + queryString + responsiveMode + onLoad={iframeWindow => + setLoadedIframeWindow(_ => Some(iframeWindow)) + }> demoUnit
From 627bb67c2ea93e0e383a569b230f0c5206eb9b4c Mon Sep 17 00:00:00 2001 From: Rusty Key Date: Tue, 26 Mar 2024 19:28:50 +0000 Subject: [PATCH 3/7] get rid of iframe key --- src/Layout.re | 13 ++++++-- src/ReshowcaseUi.re | 73 ++++++++++++--------------------------------- 2 files changed, 30 insertions(+), 56 deletions(-) diff --git a/src/Layout.re b/src/Layout.re index c95ff9f..906b91b 100644 --- a/src/Layout.re +++ b/src/Layout.re @@ -125,9 +125,18 @@ module Sidebar = { }; [@react.component] - let make = (~innerContainerId=?, ~fullHeight=false, ~children=React.null) => + let make = + ( + ~domRef=?, + ~innerContainerId=?, + ~fullHeight=false, + ~children=React.null, + ) =>
+ name="Sidebar" + ref=?domRef + id=?innerContainerId + style={Styles.sidebar(~fullHeight)}> children
; }; diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re index 8b9bcd5..95b1d9b 100644 --- a/src/ReshowcaseUi.re +++ b/src/ReshowcaseUi.re @@ -157,7 +157,7 @@ module TopPanel = {
; }; -let rightSidebarId = "rightSidebar"; +// let rightSidebarId = "rightSidebar"; module Link = { [@react.component] @@ -712,38 +712,9 @@ module DemoUnit = { ->(ReactDOM.Style.unsafeAddProp("WebkitOverflowScrolling", "touch")); }; - let getRightSidebarElement = (): option(Dom.element) => - Window.window##parent##document##getElementById(rightSidebarId) - ->Js.Nullable.toOption; - [@react.component] - let make = (~demoUnit: Configs.demoUnitProps => React.element) => { - let (parentWindowRightSidebarElem, setParentWindowRightSidebarElem) = - React.useState(() => None); - - React.useEffect0(() => { - switch (getRightSidebarElement()) { - | Some(elem) => setParentWindowRightSidebarElem(_ => Some(elem)) - | None => () - }; - None; - }); - React.useEffect0(() => { - Window.addMessageListener(event => - if (Window.window##parent === event##source) { - let message: string = event##data; - switch (message->Window.Message.fromStringOpt) { - | Some(RightSidebarDisplayed) => - switch (getRightSidebarElement()) { - | Some(elem) => setParentWindowRightSidebarElem(_ => Some(elem)) - | None => () - } - | None => Js.Console.error("Unexpected message received") - }; - } - ); - None; - }); + let make = + (~demoUnit: Configs.demoUnitProps => React.element, ~sidebarElem=?) => { let (state, dispatch) = React.useReducer( (state, action) => @@ -867,7 +838,7 @@ module DemoUnit = {
{demoUnit(props)}
- {switch (parentWindowRightSidebarElem) { + {switch (sidebarElem) { | None => React.null | Some(element) => ReactDOM.createPortal( @@ -1029,6 +1000,7 @@ module App = { let make = (~demos: Demos.t) => { let url = ReasonReactRouter.useUrl(); let urlSearchParams = url.search->URLSearchParams.make; + let (sidebarElem, setSidebarElem) = React.useState(_ => None); let route = switch ( urlSearchParams->(URLSearchParams.get("iframe")), @@ -1042,16 +1014,6 @@ module App = { let (loadedIframeWindow: option(Js.t('a)), setLoadedIframeWindow) = React.useState(() => None); - let (iframeKey, setIframeKey) = - React.useState(() => Js.Date.now()->Float.toString); - - React.useEffect1( - () => { - setIframeKey(_ => Js.Date.now()->Float.toString); - None; - }, - [|url|], - ); let (showRightSidebar, toggleShowRightSidebar) = React.useState(() => LocalStorage.localStorage @@ -1123,7 +1085,11 @@ module App = { | Demo(queryString, demoName) => let demoUnit = Demos.findDemo(urlSearchParams, demoName, demos) - ->(Option.map(demoUnit => )) + ->( + Option.map(demoUnit => + + ) + ) ->(Option.getWithDefault("Demo not found"->React.string));
+ onLoad={iframeWindow => { setLoadedIframeWindow(_ => Some(iframeWindow)) - }> + }}> demoUnit
- {if (showRightSidebar) { - ; - } else { - React.null; - }} + {showRightSidebar + ? + setSidebarElem(_ => node->Js.Nullable.toOption) + )} + /> + : React.null}
; | Home => From 10ef9d2ca725690849083b7d32b3885f6cee92fb Mon Sep 17 00:00:00 2001 From: Rusty Key Date: Tue, 26 Mar 2024 19:31:09 +0000 Subject: [PATCH 4/7] remove unused variables --- src/ReshowcaseUi.re | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re index 95b1d9b..09823f7 100644 --- a/src/ReshowcaseUi.re +++ b/src/ReshowcaseUi.re @@ -880,20 +880,9 @@ module DemoUnitFrame = { (), ); - let useFullframeUrl: bool = [%mel.raw - {js|typeof USE_FULL_IFRAME_URL === "boolean" ? USE_FULL_IFRAME_URL : false|js} - ]; - [@react.component] - let make = - ( - ~queryString as _: string, - ~responsiveMode, - ~onLoad: Js.t('a) => unit, - ~children, - ) => { + let make = (~responsiveMode, ~onLoad: Js.t('a) => unit, ~children) => { let (body, setBody) = React.useState(_ => None); - let _iframePath = if (useFullframeUrl) {"demo/index.html"} else {"demo"};