feat: update quick and srr versions

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
 

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)))

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")

packages/modal/native/UniversalModal.re

@@ -0,0 +1,30 @@
+[@react.component]
+let make = () => {
+  <UniversalPortal_Shared.Portal selector="body">
+    <div
+      style={ReactDOM.Style.make(
+        ~position="absolute",
+        ~top="0",
+        ~left="0",
+        ~width="100%",
+        ~backgroundColor="rgba(0, 0, 0, 0.3)",
+        ~height="100%",
+        ~display="flex",
+        ~justifyContent="center",
+        ~alignItems="center",
+        (),
+      )}>
+      <div
+        style={ReactDOM.Style.make(
+          ~backgroundColor="white",
+          ~padding="30px",
+          ~width="200px",
+          ~height="200px",
+          (),
+        )}>
+        {"Hey, I'm a portal, disable JS on your dev tools and check that I'll still here"
+         |> React.string}
+      </div>
+    </div>
+  </UniversalPortal_Shared.Portal>;
+};

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")

packages/server/src/UniversalPortal_Server.re

@@ -52,3 +52,21 @@ let collectPortals = (element, callback) => {
     element
   </PortalCollector>;
 };
+
+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;
+};

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;
+          };
+        };

universal-portal.opam

@@ -13,15 +13,15 @@ depends: [
   "melange"
   "melange-webapi"
   "dream"
-  "quickjs"
+  "quickjs" {>= "0.1.2"}
   "reason-react-ppx" {>= "0.14.0"}
   "reason-react" {>= "0.14.0"}
   "lambdasoup"
   "alcotest" {with-test}
   "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}