[system][zero] Move zero runtime related packages (mui#40426)

.eslintignore

@@ -18,6 +18,11 @@
 /packages/mui-icons-material/src/*.js
 /packages/mui-icons-material/templateSvgIcon.js
 /packages/mui-utils/macros/__fixtures__/
+/packages/zero-runtime/utils/
+/packages/zero-runtime/processors/
+/packages/zero-runtime/exports/
+/packages/zero-runtime/theme/
+/packages/zero-next-plugin/loader.js
 # Ignore fixtures
 /packages/typescript-to-proptypes/test/*/*
 /test/bundling/fixtures/**/*.fixture.js

apps/local-ui-lib/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "import/prefer-default-export": "off",
+    "import/no-unresolved": "off"
+  }
+}

apps/local-library/index.d.ts → apps/local-ui-lib/index.d.ts

@@ -2,5 +2,6 @@ export const bounceAnim: string;
 export const Button: React.ComponentType<
   JSX.IntrinsicElements['button'] & {
     isRed?: boolean;
+    sx?: unknown;
   }
 >;

apps/local-library/index.js → apps/local-ui-lib/index.js

@@ -19,9 +19,8 @@ export const Button = styled('button', {
   name: 'MuiButton',
   slot: 'Root',
 })(
-  ({ theme }) => ({
+  () => ({
     fontFamily: 'sans-serif',
-    backgroundColor: theme.palette.primary.main,
   }),
   {
     fontFamily: 'sans-serif',

apps/local-library/package.json → apps/local-ui-lib/package.json

@@ -1,8 +1,8 @@
 {
   "name": "local-ui-lib",
+  "version": "0.0.1",
   "private": true,
-  "version": "0.0.0",
   "dependencies": {
-    "@mui/zero-runtime": "workspace:*"
+    "@mui/zero-runtime": "workspace:^"
   }
 }

apps/local-ui-lib/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "references": [
+    {
+      "path": "../../packages/zero-runtime"
+    }
+  ]
+}

apps/zero-runtime-next-app/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": ["plugin:react/jsx-runtime"],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "import/extensions": "off",
+    "import/no-unresolved": "off"
+  }
+}

apps/zero-runtime-next-app/README.md

@@ -1,26 +1,39 @@
-# Next App
+# Demo Next.js app for Zero Runtime
 
-A sample vite application to test the working of zero runtime library.
-This project is not part of the workspace yet.
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## How to run
+## Getting Started
 
-You can either `yarn build` command to build all the packages, or you need to build, the the minimum -
+First, build all the packages in the workspace atleast once. Run
 
-1. `@mui/zero-runtime`
-2. `@mui/zero-tag-processor`
-3. `@mui/zero-next-plugin`
+```bash
+pnpm build
+```
+
+Then start the Next.js development server:
+
+```bash
+pnpm run --filter=@app/next-app dev
+```
 
-Make sure you have also run `yarn build` at least once because we also use `@mui/material` and `@mui/system` packages. On subsequent runs, you can only build the above packages using -
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+### Note
+
+If you are testing changes in zero-runtime packages itself while also running this demo app, start the watch command in a separate terminal to watch and build zero-runtime package files as they change -
 
 ```bash
-yarn build
+pnpm watch:zero
 ```
 
-After building, you can run the project by changing into the directory and then
+You might have to restart the next.js server.
 
-1. Install dependencies using `yarn install`
-2. Start the dev server using `yarn dev`
-3. Build the code using `yarn build`
+## Build
 
-Optionally, before running the dev server, you can run `yarn vite optimize --force` if it logged some error during `yarn vite`.
+To build the project, run the `build` command in this package:
+
+```bash
+pnpm run --filter=@app/next-app build
+```

apps/zero-runtime-next-app/next.config.js

@@ -1,25 +1,39 @@
-const { createTheme } = require('@mui/material/styles');
-const withZero = require('@mui/zero-next-plugin').default;
+/* eslint-env node */
+// eslint-ignore-next-line import/no-unresolved
+const { withZeroPlugin } = require('@mui/zero-next-plugin');
+const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
+
+const theme = extendTheme();
 
-const theme = createTheme({
-  typography: {
-    fontFamilyCode: 'Menlo,Consolas,"Droid Sans Mono",monospace',
-  },
-});
-// @TODO - Make this part of the main package
 theme.applyDarkStyles = function applyDarkStyles(obj) {
   return {
     ':where([data-mui-color-scheme="dark"]) &': obj,
   };
 };
 
-/** @type {import('@mui/zero-webpack-plugin').ZeroPluginOptions} */
-const zeroPluginConfig = {
+/**
+ * @typedef {import('@mui/zero-next-plugin').ZeroPluginConfig} ZeroPluginConfig
+ */
+
+/**
+ * @type {ZeroPluginConfig}
+ */
+const zeroPluginOptions = {
   theme,
   cssVariablesPrefix: 'app',
+  transformLibraries: ['local-ui-lib'],
+  sourceMap: true,
+  displayName: true,
 };
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
 
-module.exports = withZero(nextConfig, zeroPluginConfig);
+module.exports = withZeroPlugin(nextConfig, zeroPluginOptions);

apps/zero-runtime-next-app/package.json

@@ -1,28 +1,30 @@
 {
-  "name": "@app/zero-runtime-next-app",
+  "name": "@app/next-app",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "preview": "next start",
+    "clean": "rimraf .next"
   },
   "dependencies": {
-    "@mui/base": "workspace:*",
-    "@mui/material": "workspace:*",
-    "@mui/utils": "workspace:*",
-    "@mui/zero-runtime": "workspace:*",
-    "next": "13.5.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@mui/zero-runtime": "workspace:^",
+    "@mui/utils": "workspace:^",
+    "@mui/base": "workspace:^",
+    "@mui/material": "workspace:^",
+    "@mui/system": "workspace:^",
+    "local-ui-lib": "workspace:^",
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.0.1"
   },
   "devDependencies": {
-    "@mui/zero-tag-processor": "workspace:*",
-    "@mui/zero-next-plugin": "workspace:*",
-    "@types/node": "20.5.7",
-    "@types/react": "18.2.46",
-    "@types/react-dom": "18.2.18",
-    "typescript": "5.3.3"
+    "@mui/zero-next-plugin": "workspace:^",
+    "@types/node": "^20.5.7",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "eslint": "^8.52.0",
+    "typescript": "^5.3.3"
   }
 }

apps/zero-runtime-next-app/src/app/box/page.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable material-ui/no-empty-box */
+
+import { styled } from '@mui/zero-runtime';
+import * as React from 'react';
+import { Box as MuiBox } from '../../components/Box';
+
+const Box = styled(MuiBox)(({ theme }) => ({
+  border: `1px dashed ${(theme.vars ?? theme).palette.primary.main}`,
+  padding: 10,
+}));
+const Paragraph = styled.p({
+  margin: 0,
+  marginBottom: 5,
+});
+
+export default function DemoBox() {
+  return (
+    <div style={{ width: '400px', marginLeft: 10, marginTop: 10 }}>
+      {[...Array(500)].map((_, i) => (
+        <React.Fragment key={i}>
+          <Paragraph>Flex with column for &quot;sm&quot; breakpoint</Paragraph>
+          <MuiBox
+            display="flex"
+            direction={{
+              sm: 'column',
+              md: 'row',
+            }}
+            spacing={1}
+          >
+            <Box as="div" sx={{ borderColor: 'red' }}>
+              1
+            </Box>
+            <Box>2</Box>
+            <Box>3</Box>
+          </MuiBox>
+          <Paragraph>Row Reverse</Paragraph>
+          <MuiBox display="flex" direction="row-reverse" spacing={1}>
+            <Box>1</Box>
+            <Box>2</Box>
+            <Box>3</Box>
+          </MuiBox>
+          <Paragraph>Column</Paragraph>
+          <MuiBox display="flex" direction="column" spacing={1}>
+            <Box>1</Box>
+            <Box>2</Box>
+            <Box>3</Box>
+          </MuiBox>
+          <Paragraph>Column Reverse</Paragraph>
+          <MuiBox display="flex" direction="column-reverse" spacing={1}>
+            <Box>1</Box>
+            <Box>2</Box>
+            <Box>3</Box>
+          </MuiBox>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

apps/zero-runtime-next-app/src/app/globals.css

@@ -1,5 +1,3 @@
-@import '~@mui/zero-runtime/styles.css';
-
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
@@ -84,12 +82,6 @@ body {
   overflow-x: hidden;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
-    rgb(var(--background-start-rgb));
-}
-
 a {
   color: inherit;
   text-decoration: none;

apps/zero-runtime-next-app/src/app/layout.tsx

@@ -1,6 +1,9 @@
-import './globals.css';
 import type { Metadata } from 'next';
+import { styled } from '@mui/zero-runtime';
 import { Inter } from 'next/font/google';
+import '@mui/zero-runtime/styles.css';
+
+import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -9,10 +12,19 @@ export const metadata: Metadata = {
   description: 'Generated by create next app',
 };
 
+const Html = styled.html({
+  color: 'red',
+});
+
+const Body = styled.body({
+  color: 'rgb(var(--foreground-rgb))',
+  background: `linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))`,
+});
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
+    <Html lang="en">
+      <Body className={inter.className}>{children}</Body>
+    </Html>
   );
 }