From e0631a244ab7ed8531530375112edf4bcbfe6066 Mon Sep 17 00:00:00 2001 From: pedrobslisboa Date: Tue, 3 Sep 2024 16:17:05 +0200 Subject: [PATCH] feat: update quick and srr versions --- Makefile | 4 -- dune-project | 4 +- packages/modal/js/dune | 10 +++ packages/modal/native/UniversalModal.re | 30 +++++++++ packages/modal/native/dune | 16 +++++ packages/server/src/UniversalPortal_Server.re | 18 +++++ .../native/UniversalPortal_Shared_Portal.re | 66 ++++++++++--------- universal-portal.opam | 4 +- 8 files changed, 114 insertions(+), 38 deletions(-) create mode 100644 packages/modal/js/dune create mode 100644 packages/modal/native/UniversalModal.re create mode 100644 packages/modal/native/dune diff --git a/Makefile b/Makefile index 1474f4a..5b78aff 100644 --- a/Makefile +++ b/Makefile @@ -54,10 +54,6 @@ install: opam install . --deps-only --with-test cd demo && yarn install -.PHONY: pin -pin: ## Pin dependencies - @opam pin add -y quickjs "https://github.com/ml-in-barcelona/quickjs.ml.git#0.1.1" - .PHONY: init init: create-switch pin install ## Create a local dev enviroment diff --git a/dune-project b/dune-project index 72343c2..0abfe69 100644 --- a/dune-project +++ b/dune-project @@ -28,7 +28,7 @@ melange melange-webapi dream - quickjs + (quickjs (>= 0.1.2)) (reason-react-ppx (>= 0.14.0)) (reason-react @@ -44,7 +44,7 @@ (= 0.26.1) :with-test)) (server-reason-react - (= 0.2.0)) + (= 0.3.1)) (melange-testing-library :with-test) (melange-jest :with-test) (ocaml-lsp-server :with-test))) diff --git a/packages/modal/js/dune b/packages/modal/js/dune new file mode 100644 index 0000000..d8aefb4 --- /dev/null +++ b/packages/modal/js/dune @@ -0,0 +1,10 @@ +(library + (name shared_js) + (public_name universal-portal.modal.js) + (modes melange) + (wrapped false) + (libraries universal-portal.shared_js reason-react melange-webapi) + (preprocess + (pps melange.ppx reason-react-ppx server-reason-react.browser_ppx -js))) + +(copy_files# "../native/*.re") diff --git a/packages/modal/native/UniversalModal.re b/packages/modal/native/UniversalModal.re new file mode 100644 index 0000000..160365e --- /dev/null +++ b/packages/modal/native/UniversalModal.re @@ -0,0 +1,30 @@ +[@react.component] +let make = () => { + +
+
+ {"Hey, I'm a portal, disable JS on your dev tools and check that I'll still here" + |> React.string} +
+
+ ; +}; diff --git a/packages/modal/native/dune b/packages/modal/native/dune new file mode 100644 index 0000000..a1fca5b --- /dev/null +++ b/packages/modal/native/dune @@ -0,0 +1,16 @@ +(library + (name shared_native) + (public_name universal-portal.modal.native) + (modules :standard) + (libraries + universal-portal.shared_native + server-reason-react.react + server-reason-react.reactDom) + (wrapped false) + (preprocess + (pps + server-reason-react.ppx + server-reason-react.browser_ppx + server-reason-react.melange_ppx))) + +(copy_files# "../*.re") diff --git a/packages/server/src/UniversalPortal_Server.re b/packages/server/src/UniversalPortal_Server.re index d58863d..7f8b80e 100644 --- a/packages/server/src/UniversalPortal_Server.re +++ b/packages/server/src/UniversalPortal_Server.re @@ -52,3 +52,21 @@ let collectPortals = (element, callback) => { element ; }; + +let withPortals = element => { + let portals: ref(array(UniversalPortal_Shared.Portal.portal)) = ref([||]); + + let element = + ReactDOM.renderToString( + collectPortals( + element, (collectedPortal: UniversalPortal_Shared.Portal.portal) => { + portals := Array.append(portals^, [|collectedPortal|]) + }), + ); + + let html = appendUniversalPortals(element, portals^); + + portals := [||]; + + html; +}; diff --git a/packages/shared/native/UniversalPortal_Shared_Portal.re b/packages/shared/native/UniversalPortal_Shared_Portal.re index 6894bd4..085f5c1 100644 --- a/packages/shared/native/UniversalPortal_Shared_Portal.re +++ b/packages/shared/native/UniversalPortal_Shared_Portal.re @@ -4,33 +4,39 @@ type portal = { }; let portalCollectorContext = React.createContext((_: portal) => ()); -[@react.component] -let make = (~children, ~selector) => { - let context = React.useContext(portalCollectorContext); - let (portalNode, setPortalNode) = React.useState(() => None); - - let createPortal = domElement => - ReactDOM.createPortal(children, domElement); - - React.useEffect1( - () => { - let domElement = ReactDOM.querySelector(selector); - setPortalNode(_ => domElement); - - None; - }, - [||], - ); - - switch%platform (Runtime.platform) { - | Client => - // Portal doesn't need to be collected on the client - context |> ignore - | Server => context({selector, content: children}) - }; - - switch (portalNode) { - | Some(node) => createPortal(node) - | _ => React.null - }; -}; +// Js component that renders a portal +[@platform js] +include { + [@react.component] + let make = (~children, ~selector) => { + let (portalNode, setPortalNode) = React.useState(() => None); + + let createPortal = domElement => + ReactDOM.createPortal(children, domElement); + + React.useEffect(() => { + let domElement = ReactDOM.querySelector(selector); + setPortalNode(_ => domElement); + + None; + }); + + switch (portalNode) { + | Some(node) => createPortal(node) + | _ => React.null + }; + }; + }; + +// Native component that collects the portals +[@platform native] +include { + [@react.component] + let make = (~children, ~selector) => { + let context = React.useContext(portalCollectorContext); + + context({selector, content: children}); + + React.null; + }; + }; diff --git a/universal-portal.opam b/universal-portal.opam index 48e169e..4029882 100644 --- a/universal-portal.opam +++ b/universal-portal.opam @@ -13,7 +13,7 @@ depends: [ "melange" "melange-webapi" "dream" - "quickjs" + "quickjs" {>= "0.1.2"} "reason-react-ppx" {>= "0.14.0"} "reason-react" {>= "0.14.0"} "lambdasoup" @@ -21,7 +21,7 @@ depends: [ "alcotest-lwt" {with-test} "fmt" {with-test} "ocamlformat" {= "0.26.1" & with-test} - "server-reason-react" {= "0.2.0"} + "server-reason-react" {= "0.3.1"} "melange-testing-library" {with-test} "melange-jest" {with-test} "ocaml-lsp-server" {with-test}