Mui v5 style import

.github/workflows/ci.yml

@@ -26,7 +26,7 @@ jobs:
           auto-install: true
 
       - name: Use OCaml
-        uses: avsm/setup-ocaml@v2
+        uses: avsm/setup-ocaml@v3
         with:
           ocaml-compiler: 4.12.1
 
@@ -38,6 +38,8 @@ jobs:
 
       - name: Yarn install
         run: yarn install --immutable
+        env:
+          PPX_BUILD_CI: true
 
       - name: Build PPX test project
         working-directory: ppx-test
@@ -52,37 +54,39 @@ jobs:
           CI: true
 
   publish:
-    if: github.event_name != 'pull_request'
     needs: build
     name: Publish
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-slim
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      # - run: git checkout HEAD^
 
       - name: Download linux artifacts (x64)
         uses: actions/download-artifact@v4
         with:
           name: ubuntu-22.04-x64
-          path: ppx/binaries/linux-x64
+          path: public/rescript-material-ui-ppx/binaries/linux-x64
 
       - name: Download linux artifacts (arm64)
         uses: actions/download-artifact@v4
         with:
           name: ubuntu-22.04-arm64
-          path: ppx/binaries/linux-arm64
+          path: public/rescript-material-ui-ppx/binaries/linux-arm64
 
       - name: Download macOS artifacts (x64)
         uses: actions/download-artifact@v4
         with:
           name: macOS-14-x64
-          path: ppx/binaries/darwin-x64
+          path: public/rescript-material-ui-ppx/binaries/darwin-x64
 
       - name: Download macOS artifacts (arm64)
         uses: actions/download-artifact@v4
         with:
           name: macOS-14-arm64
-          path: ppx/binaries/darwin-arm64
+          path: public/rescript-material-ui-ppx/binaries/darwin-arm64
 
       - name: Move artifacts
         working-directory: public/rescript-material-ui-ppx
@@ -100,9 +104,22 @@ jobs:
 
       - name: yarn pack
         working-directory: public/rescript-material-ui-ppx
-        run: yarn pack --dry-run
-      # - name: Publish
-      #   working-directory: public/rescript-material-ui-ppx
-      #   run: yarn publish --access public
-      #   env:
-      #     NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+        run: |
+          yarn pack --dry-run
+
+      - name: Set Auth Token
+        run: |
+          yarn config set npmAuthToken ${{ secrets.NPM_AUTH_TOKEN }}
+
+      - name: Publish
+        if: success() && github.event_name != 'pull_request' && startsWith(github.ref, 'refs/tags/')
+        run: |
+          yarn npm publish --access public
+        working-directory: public/rescript-material-ui-ppx
+
+      - name: Publish Prerelease
+        if: success() && (github.event_name == 'pull_request' || !startsWith(github.ref, 'refs/tags/'))
+        run: |
+          yarn version -i prerelease
+          yarn npm publish --access public --tag next
+        working-directory: public/rescript-material-ui-ppx

.gitignore

@@ -31,4 +31,4 @@ lib/
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions

.prototools

@@ -1,2 +1,2 @@
-node = "20.18.0"
-yarn = "4.5.0"
+node = "20.19.6"
+yarn = "4.12.0"

package.json

@@ -4,6 +4,7 @@
     "examples",
     "public/rescript-material-ui",
     "public/rescript-material-ui-lab",
+    "public/rescript-material-ui-ppx",
     "ppx-test"
   ],
   "packageManager": "[email protected]"

ppx-test/package.json

@@ -8,20 +8,23 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "rescript build -with-deps && vite build",
-    "watch": "rescript build -with-deps -w",
-    "clean": "rescript clean -with-deps",
-    "format": "rescript format -all",
+    "build": "rescript build && vite build",
+    "watch": "rescript watch",
+    "clean": "rescript clean",
+    "format": "rescript format --all",
     "start": "vite preview"
   },
   "dependencies": {
-    "@material-ui/core": "4.12.3",
-    "@rescript/react": "~0.11.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rescript": "^11.1.4",
-    "rescript-material-ui": "workspace:*",
-    "rescript-material-ui-lab": "workspace:*"
+    "@emotion/react": "^11.14.0",
+    "@illusionalsagacity/rescript-material-ui-ppx": "workspace:*",
+    "@mui/material": "^6.0.0",
+    "@mui/styles": "^6.0.0",
+    "@rescript-mui/lab": "^5.1.3",
+    "@rescript-mui/material": "^5.1.3",
+    "@rescript/react": "~0.14.0",
+    "react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "rescript": "^12.0.1"
   },
   "devDependencies": {
     "vite": "^5"

ppx-test/rescript.json

@@ -1,18 +1,23 @@
 {
   "name": "dev_tests",
-  "uncurried": true,
   "sources": ["src"],
-  "jsx": { "version": 4, "mode": "automatic" },
+  "jsx": { "version": 4 },
   "package-specs": {
     "module": "esmodule",
     "in-source": true
   },
   "suffix": ".res.mjs",
   "ppx-flags": [
-    "../public/rescript-material-ui-ppx/_build/default/src/Bin.exe"
+    [
+      "@illusionalsagacity/rescript-material-ui-ppx/_build/default/src/Bin.exe",
+      "-importPath @mui/styles"
+    ]
+  ],
+  "dependencies": [
+    "@rescript/react",
+    "@rescript-mui/material",
+    "@rescript-mui/lab"
   ],
-  "pinned-dependencies": ["rescript-material-ui", "rescript-material-ui-lab"],
-  "bs-dependencies": ["@rescript/react", "rescript-material-ui"],
   "warnings": {
     "number": "+A-48-30-42-40",
     "error": "+A"

ppx-test/src/Index.res

@@ -10,7 +10,7 @@ module App = {
     <br />
     <br />
     <center>
-      <Typography variant=#h4> {React.string("PPX Result")} </Typography>
+      <Typography variant=H4> {React.string("PPX Result")} </Typography>
     </center>
     <br />
     <br />
@@ -21,8 +21,6 @@ module App = {
   </>
 }
 
-@@warning("-3")
-switch ReactDOM.querySelector("#app") {
-| Some(domElement) => ReactDOM.render(<App />, domElement)
-| None => ()
-}
+let el = ReactDOM.querySelector("#app")->Option.getOrThrow
+
+ReactDOM.Client.createRoot(el)->ReactDOM.Client.Root.render(<App />)

ppx-test/src/Index.res.mjs

@@ -1,49 +1,50 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as ReactDom from "react-dom";
-import * as Core from "@material-ui/core";
+import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as Client from "react-dom/client";
 import * as NewImplementation from "./NewImplementation.res.mjs";
 import * as JsxRuntime from "react/jsx-runtime";
 import * as NewImplementationPpx from "./NewImplementationPpx.res.mjs";
 import * as NewImplementationTheme from "./NewImplementationTheme.res.mjs";
+import Typography from "@mui/material/Typography";
 import * as NewImplementationThemePpx from "./NewImplementationThemePpx.res.mjs";
 
 function Index$App(props) {
   return JsxRuntime.jsxs(JsxRuntime.Fragment, {
-              children: [
-                JsxRuntime.jsx(NewImplementation.make, {}),
-                JsxRuntime.jsx("br", {}),
-                JsxRuntime.jsx("br", {}),
-                JsxRuntime.jsx(NewImplementationTheme.make, {}),
-                JsxRuntime.jsx("br", {}),
-                JsxRuntime.jsx("br", {}),
-                JsxRuntime.jsx("center", {
-                      children: JsxRuntime.jsx(Core.Typography, {
-                            children: "PPX Result",
-                            variant: "h4"
-                          })
-                    }),
-                JsxRuntime.jsx("br", {}),
-                JsxRuntime.jsx("br", {}),
-                JsxRuntime.jsx(NewImplementationPpx.make, {}),
-                JsxRuntime.jsx("br", {}),
-                JsxRuntime.jsx("br", {}),
-                JsxRuntime.jsx(NewImplementationThemePpx.make, {})
-              ]
-            });
+    children: [
+      JsxRuntime.jsx(NewImplementation.make, {}),
+      JsxRuntime.jsx("br", {}),
+      JsxRuntime.jsx("br", {}),
+      JsxRuntime.jsx(NewImplementationTheme.make, {}),
+      JsxRuntime.jsx("br", {}),
+      JsxRuntime.jsx("br", {}),
+      JsxRuntime.jsx("center", {
+        children: JsxRuntime.jsx(Typography, {
+          variant: "h4",
+          children: "PPX Result"
+        })
+      }),
+      JsxRuntime.jsx("br", {}),
+      JsxRuntime.jsx("br", {}),
+      JsxRuntime.jsx(NewImplementationPpx.make, {}),
+      JsxRuntime.jsx("br", {}),
+      JsxRuntime.jsx("br", {}),
+      JsxRuntime.jsx(NewImplementationThemePpx.make, {})
+    ]
+  });
 }
 
-var App = {
+let App = {
   make: Index$App
 };
 
-var domElement = document.querySelector("#app");
+let el = Stdlib_Option.getOrThrow(Primitive_option.fromNullable(document.querySelector("#app")), undefined);
 
-if (!(domElement == null)) {
-  ReactDom.render(JsxRuntime.jsx(Index$App, {}), domElement);
-}
+Client.createRoot(el).render(JsxRuntime.jsx(Index$App, {}));
 
 export {
-  App ,
+  App,
+  el,
 }
-/* domElement Not a pure module */
+/* el Not a pure module */

ppx-test/src/NewImplementation.res

@@ -15,18 +15,18 @@ module Styles: {
   }
   type useStyles = unit => classes
   @module("@material-ui/core/styles")
-  external makeStyles: (. styles) => useStyles = "makeStyles"
-  let useStyles = makeStyles(. {
-    root: ReactDOM.Style.make(~width="100%", ~maxWidth="970px", ~margin="0 auto", ()),
-    rounded: ReactDOM.Style.make(~backgroundColor="grey", ~color="white", ~padding="15px", ()),
+  external makeStyles: styles => useStyles = "makeStyles"
+  let useStyles = makeStyles({
+    root: {width: "100%", maxWidth: "970px", margin: "0 auto"},
+    rounded: {backgroundColor: "grey", color: "white", padding: "15px"},
   })
 }
 
 @react.component
 let make = () => {
   let classes = Styles.useStyles()
   open Mui
-  <Paper classes={Paper.Classes.make(~root=classes.root, ~rounded=classes.rounded, ())}>
+  <Paper classes={root: classes.root, rounded: classes.rounded}>
     <Typography> {"Some Content"->React.string} </Typography>
   </Paper>
 }

ppx-test/src/NewImplementation.res.mjs

@@ -1,44 +1,44 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Caml_option from "rescript/lib/es6/caml_option.js";
-import * as Core from "@material-ui/core";
 import * as JsxRuntime from "react/jsx-runtime";
+import Paper from "@mui/material/Paper";
 import * as Styles from "@material-ui/core/styles";
+import Typography from "@mui/material/Typography";
 
-var useStyles = Styles.makeStyles({
-      root: {
-        margin: "0 auto",
-        maxWidth: "970px",
-        width: "100%"
-      },
-      rounded: {
-        backgroundColor: "grey",
-        color: "white",
-        padding: "15px"
-      }
-    });
+let useStyles = Styles.makeStyles({
+  root: {
+    margin: "0 auto",
+    maxWidth: "970px",
+    width: "100%"
+  },
+  rounded: {
+    backgroundColor: "grey",
+    color: "white",
+    padding: "15px"
+  }
+});
 
-var Styles$1 = {
+let Styles$1 = {
   useStyles: useStyles
 };
 
 function NewImplementation(props) {
-  var classes = useStyles();
-  return JsxRuntime.jsx(Core.Paper, {
-              children: Caml_option.some(JsxRuntime.jsx(Core.Typography, {
-                        children: "Some Content"
-                      })),
-              classes: {
-                root: classes.root,
-                rounded: classes.rounded
-              }
-            });
+  let classes = useStyles();
+  return JsxRuntime.jsx(Paper, {
+    children: JsxRuntime.jsx(Typography, {
+      children: "Some Content"
+    }),
+    classes: {
+      root: classes.root,
+      rounded: classes.rounded
+    }
+  });
 }
 
-var make = NewImplementation;
+let make = NewImplementation;
 
 export {
   Styles$1 as Styles,
-  make ,
+  make,
 }
 /* useStyles Not a pure module */

ppx-test/src/NewImplementationPpx.res

@@ -1,19 +1,19 @@
 module Styles = %makeStyles((
   {
-    root: ReactDOM.Style.make(~width="100%", ~maxWidth="970px", ~margin="0 auto", ()),
-    rounded: ReactDOM.Style.make(~backgroundColor="grey", ~color="white", ~padding="15px", ()),
+    root: {width: "100%", maxWidth: "970px", margin: "0 auto"},
+    rounded: {backgroundColor: "grey", color: "white", padding: "15px"},
   },
   {
     classNamePrefix: "xxx",
-    generateId: () => "blasdnsad" ++ Js.Math.random_int(0, 100)->string_of_int,
+    // generateId: () => "blasdnsad" ++ Math.Int.random(0, 100)->Int.toString,
   },
 ))
 
 @react.component
 let make = () => {
   let classes = Styles.useStyles()
   open Mui
-  <Paper classes={Paper.Classes.make(~root=classes.root, ~rounded=classes.rounded, ())}>
+  <Paper classes={{root: classes.root, rounded: classes.rounded}}>
     <Typography> {"Some Content"->React.string} </Typography>
   </Paper>
 }