latest melange (#151)

Author: jchavarri

documentation-site.opam

@@ -27,10 +27,10 @@ depends: [
 ]
 dev-repo: "git+https://github.com/melange-re/melange-re.github.io.git"
 pin-depends: [
-  [ "melange.dev" "git+https://github.com/melange-re/melange.git#7bec5dd58dbc0b20c9821c5b80c88c6d02df52e0" ]
-  [ "melange-playground.dev" "git+https://github.com/melange-re/melange.git#7bec5dd58dbc0b20c9821c5b80c88c6d02df52e0" ]
-  [ "reason-react.dev" "git+https://github.com/reasonml/reason-react.git#2a43311df12eb3988fd9729098928e6b03cfaa07" ]
-  [ "reason-react-ppx.dev" "git+https://github.com/reasonml/reason-react.git#2a43311df12eb3988fd9729098928e6b03cfaa07" ]
+  [ "melange.dev" "git+https://github.com/melange-re/melange.git#2aa31880dc71dc40c5c25f5514ded831d8b14353" ]
+  [ "melange-playground.dev" "git+https://github.com/melange-re/melange.git#2aa31880dc71dc40c5c25f5514ded831d8b14353" ]
+  [ "reason-react.dev" "git+https://github.com/reasonml/reason-react.git#4ee2eda353628090eda95e0b8dabe4e2be50f954" ]
+  [ "reason-react-ppx.dev" "git+https://github.com/reasonml/reason-react.git#4ee2eda353628090eda95e0b8dabe4e2be50f954" ]
   [ "cmarkit.dev" "git+https://github.com/dbuenzli/cmarkit.git#f37c8ea86fd0be8dba7a8babcee3682e0e047d91" ]
 ]
 build: [

playground/src/app.jsx

@@ -1,6 +1,6 @@
 import "./App.css";
 import "../../_build/default/playground/reason-react-cmijs";
-import "../../_opam/bin/jsoo_main.bc";
+import "../../_opam/bin/mel_playground.bc";
 import "../../_opam/bin/melange-cmijs";
 import "../../_opam/bin/format.bc.js";
 

playground/src/examples.js

@@ -78,34 +78,37 @@ Belt.Array.makeBy(42, _ => random_gaussian())->(Belt.Array.forEach(Js.log));`,
     name: "React Greeting",
     ml: `module Greeting = struct
   let make () = (button ~children:[ React.string "Hello!" ] () [@JSX])
-    [@@react.component]
+  [@@react.component]
 end
 
 let element = ReactDOM.querySelector "#preview"
 
 let () =
   match element with
-  | Some root ->
-      ReactDOM.render (Greeting.createElement ~children:[] () [@JSX]) root
+  | Some element ->
+      let root = ReactDOM.Client.createRoot element in
+      ReactDOM.Client.render root
+        (Greeting.createElement ~children:[] () [@JSX])
   | None ->
       Js.Console.error
-        "Failed to start React: couldn't find the #preview element"
-  `,
+        "Failed to start React: couldn't find the #preview element"`,
     re: `module Greeting = {
   [@react.component]
-  let make = () => {
-    <button> {React.string("Hello!")} </button>;
-  };
+  let make = () => <button> {React.string("Hello!")} </button>;
 };
-ReactDOM.querySelector("#preview")
-->(
-    fun
-    | Some(root) => ReactDOM.render(<Greeting />, root)
-    | None =>
-      Js.Console.error(
-        "Failed to start React: couldn't find the #preview element",
-      )
-  );`,
+
+let element = ReactDOM.querySelector("#preview");
+
+let () =
+  switch (element) {
+  | Some(element) =>
+    let root = ReactDOM.Client.createRoot(element);
+    ReactDOM.Client.render(root, <Greeting />);
+  | None =>
+    Js.Console.error(
+      "Failed to start React: couldn't find the #preview element",
+    )
+  };`,
   },
 ];
 

playground/src/worker.js

@@ -125,8 +125,7 @@ initWorkerizedReducer(
           // bundling always happens in worker as it's expensive. Evaluation too,
           // but if there is DOM manipulation, then defer evaluation to the
           // main thread, as worker doesn't have access to DOM
-          const requireReactString = "import * as React";
-          if (code.indexOf(requireReactString) >= 0) {
+          if (code.indexOf("react/jsx-runtime") >= 0 || code.indexOf("react-dom/client") >= 0) {
             state.bundledCode = output[0].code;
           } else {
             state.bundledCode = undefined;