Provide bundle format that is usable via CDN #3608
Comments
Tiberriver256
added
the
status: waiting for maintainer
|
I plan to migrate to the core bundling infrastructure in the following months. |
flaviendelangle
added
component: data grid
|
Great to hear it's on the roadmap. Thank you! |
|
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 mui/material-ui#30660 with this opportunity. It links another instance of issue asking for UMD that we closed as won't fix. |
oliviertassinari
added
discussion
and removed
new feature
|
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? |
|
See mui/material-ui#23098 (comment). What |
|
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. |
|
Putting aside the discussion about the UMD specific format |
Tiberriver256
changed the title
|
Is there any easy way to use |
flaviendelangle
changed the title
flaviendelangle
added
the
component: pickers
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. |
|
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 |
|
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>
Also related to mui/material-ui#40960. |
oliviertassinari
added
docs
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/coreand@mui/materialhas 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
The text was updated successfully, but these errors were encountered: