Tiberriver256 commented 2 years ago

Summary 💡

I would love to have a bundle format of this library we could use via CDN and declare as a webpack external module similar to what @material-ui/core and @mui/material has here:

https://github.com/mui-org/material-ui/blob/b9117f2ff7fa99d85dd66b5c240dcb32e833a1c9/packages/mui-material/scripts/rollup.config.js#L175-L214

Examples 🌈

No response

Motivation 🔦

We are building a component library using React Mui and X Pro that will be used in single spa. In a micro-frontend framework it's going to be important for the performance of the site to be able to have the component library and all it's dependencies available as an external module.

Order ID 💳 (optional)

34712

flaviendelangle commented 2 years ago

I plan to migrate to the core bundling infrastructure in the following months. But unfortunately it requires a big internal change which takes a lot of time.

Tiberriver256 commented 2 years ago

Great to hear it's on the roadmap. Thank you!

oliviertassinari commented 2 years ago

IMHO we should close this issue as "won't fix". The use case described is typically what developers should build and optimize on their side. It's footgun otherwise.

I have updated https://github.com/mui-org/material-ui/issues/30660 with this opportunity. It links another instance of issue asking for UMD that we closed as won't fix.

Tiberriver256 commented 2 years ago

Why not match what you're doing with @mui/material? Even the issue you tagged has mention of prepping it for consumption by a CDN.

It's not making sense for me that you would say 'All modules are usable via cdn, except for this one. This one we will not provide a method to make it usable via cdn, you have to re-bundle and host yourself.' I must be misunderstanding something. Could you explain a bit more?

oliviertassinari commented 2 years ago

See https://github.com/mui-org/material-ui/issues/23098#issuecomment-710484703. What @mui/material is doing is a 7 years old decision that is no longer relevant for what we should build for the next 3 years, AFAIK.

Tiberriver256 commented 2 years ago

Ah I see, perhaps I should edit this issue to be a more generic request to be able to use this module via CDN? Whether it's UMD or ES Modules doesn't really matter.

flaviendelangle commented 2 years ago

Putting aside the discussion about the UMD specific format I started working on the bundling structure this week, you should have the same formats as the packages hosted on https://github.com/mui-org/material-ui by the end of the month :crossed_fingers:

Zenoo commented 2 years ago

Is there any easy way to use @mui/x-data-grid in a CDN deployed MUI website in the meantime?
Even if I have to compile some stuff myself if needed, I really need to be able to use a <DataGrid> as soon as possible.

noherczeg commented 1 year ago

See mui/material-ui#23098 (comment). What @mui/material is doing is a 7 years old decision that is no longer relevant for what we should build for the next 3 years, AFAIK.

In an ideal world providing multiple outputs for a library shouldn't have any negative impact. I believe that this question isn't about what design decision points to the future, because both ESM and UMD should be able to co-exist next to each other.

allanleal commented 1 year ago

I'm using Material UI together with the Python package Panel. What I'm trying to do is to create Jupyter Notebook widgets powered by Material UI. For this, I have to use CDN links as shown in this example.

I'm trying now to create a Jupyter Notebook widget based on MUI-X DataGrid. For the CDN link, I'm using https://unpkg.com/@mui/x-data-grid@latest/index.js. Unfortunately, the DataGrid class is not available this way. I'm not a JS programmer. Would appreciate some pointers here. Maybe, based on the discussion above, this is not possible at the moment.

oliviertassinari commented 3 months ago

To illustrate my previous point, done with ESM CDN and not the UMD build: https://codepen.io/oliviertassinari/pen/OJqEEoP?editors=1000

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@18.3.0",
          "react/jsx-runtime": "https://esm.sh/react@18.3.0/jsx-runtime"
        }
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <!-- Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Usage -->
    <script type="text/babel" data-type="module">
      import * as React from "https://esm.sh/react@18.3.0";
      import { createRoot } from "https://esm.sh/react-dom@18.3.0";
      import { Button, Box } from "https://esm.sh/@mui/material?external=react";
      import { DataGrid } from 'https://esm.sh/@mui/x-data-grid@6.5.0?external=react';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.row.firstName || ''} ${params.row.lastName || ''}`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

function DataGridDemo() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
        }}
        pageSizeOptions={[5]}
        checkboxSelection
        disableRowSelectionOnClick
      />
    </Box>
  );
}

      function App() {
        return <div><Button variant="contained">Button</Button><DataGridDemo /></div>;
      }

      createRoot(document.getElementById("root")).render(<App />);
    </script>
  </body>
</html>

mui / mui-x

Provide bundle format that is usable via CDN #3608

Summary 💡

Examples 🌈

Motivation 🔦

Order ID 💳 (optional)

34712