fix: module resolution of third-party libraries (#23)

This PR changes how module resolution works in `@lazarv/react-server`. This is a major change and needs more test cases in the future to maintain stability and quality. Add support for the following third-party libraries: - @tanstack/react-query - @mui/material - @mantine/core Some packages need to be specifically marked as `external` to keep them usable. Examples: - `lucide-react` in https://github.com/lazarv/react-server/blob/fix/external-use-client/docs/vite.config.mjs#L7 - `better-sqlite3` in https://github.com/lazarv/react-server/blob/fix/external-use-client/examples/todo/react-server.config.json#L3 The `external` packages can be specified by adding a `resolve.external` section to `react-server.config.json` (`.mjs` or `.ts`) or `vite.config.mjs` (`.ts`). ```json { "resolve": { "external": ["better-sqlite3"] } } ``` This PR should also fix the following issues: - Mantine / use client not respected #20 - MUI 6.x / React__namespace.createContext is not a function #22 To showcase usage of these third-party libraries, this PR also adds new examples: - https://github.com/lazarv/react-server/tree/fix/external-use-client/examples/react-query - https://github.com/lazarv/react-server/tree/fix/external-use-client/examples/mui - https://github.com/lazarv/react-server/tree/fix/external-use-client/examples/mantine Some low-level packages needed special attention: - hoist-non-react-statics - prop-types - react-is
lazarv · Sep 9, 2024 · da250e2 · da250e2
1 parent 84ec058
commit da250e2
Show file tree

Hide file tree

Showing 56 changed files with 2,506 additions and 194 deletions.
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -13,6 +13,9 @@ on:
       - "docs/**"
   workflow_dispatch:
 
+permissions:
+  pull-requests: write
+
 jobs:
   deploy:
     name: Deploy 🚀
@@ -45,7 +48,7 @@ jobs:
         run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Build docs
-        run: pnpm run docs:build
+        run: pnpm run docs-build
 
       - name: Deploy Project Artifacts to Vercel
         if: ${{ github.event_name == 'pull_request' }}

diff --git a/README.md b/README.md
@@ -144,9 +144,12 @@ pnpm --filter ./examples/todo dev --open
 pnpm --filter ./examples/photos dev --open
 pnpm --filter ./examples/express dev
 pnpm --filter ./examples/nestjs start:dev
-pnpm --filter ./examples/spa --open
-pnpm --filter ./examples/react-router --open
-pnpm --filter ./examples/tanstack-router --open
+pnpm --filter ./examples/spa dev --open
+pnpm --filter ./examples/react-router dev --open
+pnpm --filter ./examples/tanstack-router dev --open
+pnpm --filter ./examples/react-query dev --open
+pnpm --filter ./examples/mui dev --open
+pnpm --filter ./examples/mantine dev --open
 ```
 
 You will need to have `pnpm` installed. Follow instructions at https://pnpm.io/installation.

diff --git a/docs/vite.config.mjs b/docs/vite.config.mjs
@@ -4,6 +4,6 @@ import svgr from "vite-plugin-svgr";
 export default {
   plugins: [react(), svgr()],
   resolve: {
-    noExternal: ["@vercel/analytics", "@vercel/speed-insights"],
+    external: ["lucide-react"],
   },
 };
diff --git a/examples/mantine/app/layout.jsx b/examples/mantine/app/layout.jsx
@@ -0,0 +1,20 @@
+import "@mantine/core/styles.css";
+
+import { createTheme, MantineProvider } from "@mantine/core";
+
+const theme = createTheme({
+  /** Put your mantine theme override here */
+});
+
+export default function Layout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <MantineProvider theme={theme}>
+          <h1>Layout</h1>
+          {children}
+        </MantineProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/examples/mantine/app/page.jsx b/examples/mantine/app/page.jsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { Button } from "@mantine/core";
+
+export default function Home() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Button onClick={() => alert("Hello Mantine!")}>Hello Mantine!</Button>
+    </div>
+  );
+}
diff --git a/examples/mantine/package.json b/examples/mantine/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@lazarv/react-server-example-mantine",
+  "private": true,
+  "description": "@lazarv/react-server Mantine UI example application",
+  "scripts": {
+    "dev": "react-server",
+    "build": "react-server build",
+    "start": "react-server start"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@lazarv/react-server": "workspace:^",
+    "@lazarv/react-server-router": "workspace:^",
+    "@mantine/core": "^7.12.2",
+    "@mantine/hooks": "^7.12.2"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.43",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1"
+  }
+}
diff --git a/examples/mantine/postcss.config.cjs b/examples/mantine/postcss.config.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};
diff --git a/examples/mantine/react-server.config.mjs b/examples/mantine/react-server.config.mjs
@@ -0,0 +1,22 @@
+export default {
+  root: "app",
+  public: "public",
+  page: {
+    include: ["**/page.jsx"],
+  },
+  layout: {
+    include: ["**/layout.jsx"],
+  },
+  build: {
+    chunkSizeWarningLimit: 1000,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("@mantine/core")) {
+            return "@mantine/core";
+          }
+        },
+      },
+    },
+  },
+};
diff --git a/examples/mui/app/about/page.jsx b/examples/mui/app/about/page.jsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { Link as ReactServerLink } from "@lazarv/react-server/navigation";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+
+export default function About() {
+  return (
+    <Box sx={{ maxWidth: "sm" }}>
+      <Button variant="contained" component={ReactServerLink} to="/">
+        Go to the home page
+      </Button>
+    </Box>
+  );
+}
diff --git a/examples/mui/app/components/Copyright.jsx b/examples/mui/app/components/Copyright.jsx
@@ -0,0 +1,20 @@
+import MuiLink from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+
+export default function Copyright() {
+  return (
+    <Typography
+      variant="body2"
+      align="center"
+      sx={{
+        color: "text.secondary",
+      }}
+    >
+      {"Copyright © "}
+      <MuiLink color="inherit" href="https://mui.com/">
+        Your Website
+      </MuiLink>{" "}
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}
diff --git a/examples/mui/app/components/Layout.jsx b/examples/mui/app/components/Layout.jsx
@@ -0,0 +1,37 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+
+import theme from "../theme";
+import Copyright from "./Copyright";
+import ProTip from "./ProTip";
+
+export default function Providers({ children }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Container maxWidth="lg">
+        <Box
+          sx={{
+            my: 4,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+            Material UI - Next.js App Router example in JavaScript
+          </Typography>
+          {children}
+          <ProTip />
+          <Copyright />
+        </Box>
+      </Container>
+    </ThemeProvider>
+  );
+}
diff --git a/examples/mui/app/components/ProTip.jsx b/examples/mui/app/components/ProTip.jsx
@@ -0,0 +1,16 @@
+import LightbulbOutlined from "@mui/icons-material/esm/LightbulbOutlined";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+
+export default function ProTip() {
+  return (
+    <Typography sx={{ mt: 6, mb: 3, color: "text.secondary" }}>
+      <LightbulbOutlined sx={{ mr: 1, verticalAlign: "middle" }} />
+      {"Pro tip: See more "}
+      <Link href="https://mui.com/material-ui/getting-started/templates/">
+        templates
+      </Link>
+      {" in the Material UI documentation."}
+    </Typography>
+  );
+}
diff --git a/examples/mui/app/layout.jsx b/examples/mui/app/layout.jsx
@@ -0,0 +1,21 @@
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+
+import Layout from "./components/Layout";
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>MUI</title>
+      </head>
+      <body>
+        <Layout>{children}</Layout>
+      </body>
+    </html>
+  );
+}
diff --git a/examples/mui/app/page.jsx b/examples/mui/app/page.jsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { Link as ReactServerLink } from "@lazarv/react-server/navigation";
+import Link from "@mui/material/Link";
+
+export default function Home() {
+  return (
+    <Link to="/about" color="secondary" component={ReactServerLink}>
+      Go to the about page
+    </Link>
+  );
+}
diff --git a/examples/mui/app/theme.mjs b/examples/mui/app/theme.mjs
@@ -0,0 +1,23 @@
+import { createTheme } from "@mui/material/styles";
+
+const theme = createTheme({
+  palette: {
+    mode: "light",
+  },
+  typography: {
+    fontFamily: "Roboto",
+  },
+  components: {
+    MuiAlert: {
+      styleOverrides: {
+        root: ({ ownerState }) => ({
+          ...(ownerState.severity === "info" && {
+            backgroundColor: "#60a5fa",
+          }),
+        }),
+      },
+    },
+  },
+});
+
+export default theme;
diff --git a/examples/mui/package.json b/examples/mui/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@lazarv/react-server-example-mui",
+  "private": true,
+  "description": "@lazarv/react-server Material UI example application",
+  "scripts": {
+    "dev": "react-server",
+    "build": "react-server build",
+    "start": "react-server start"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fontsource/roboto": "^5.0.14",
+    "@lazarv/react-server": "workspace:^",
+    "@lazarv/react-server-router": "workspace:^",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
+    "@mui/styled-engine": "^6.0.2",
+    "@mui/system": "^6.0.2",
+    "@mui/utils": "^6.0.2"
+  }
+}
diff --git a/examples/mui/react-server.config.mjs b/examples/mui/react-server.config.mjs
@@ -0,0 +1,24 @@
+export default {
+  root: "app",
+  public: "public",
+  page: {
+    include: ["**/page.jsx"],
+  },
+  layout: {
+    include: ["**/layout.jsx"],
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("@emotion/react")) {
+            return "@emotion/react";
+          }
+          if (id.includes("@mui/")) {
+            return "@mui/material";
+          }
+        },
+      },
+    },
+  },
+};
diff --git a/examples/photos/.gitignore b/examples/photos/.gitignore
@@ -0,0 +1 @@
+.vercel
diff --git a/examples/react-query/app/comments-server.jsx b/examples/react-query/app/comments-server.jsx
@@ -0,0 +1,21 @@
+// app/posts/comments-server.jsx
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+
+import Comments from "./comments";
+import { getComments } from "./get-comments";
+import { getQueryClient } from "./get-query-client";
+
+export default function CommentsServerComponent() {
+  const queryClient = getQueryClient();
+
+  queryClient.prefetchQuery({
+    queryKey: ["posts-comments"],
+    queryFn: getComments,
+  });
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Comments />
+    </HydrationBoundary>
+  );
+}