Due to recent solid 1.4.1 version, className is being depreciated. So in codemod convert React className props to class

Great lib!
Can you please add support for Snackbar as well

Hello. I'd like to contribute but following the how to on the readme I get several errors.

Node: v16.17.0
Pnpm: 7.9.5
OS: macOS Big Sur 11.6.5 (Kernel Version 20.6.0: Tue Feb 22 21:10:41 PST 2022; root:xnu-7195.141.26~1/RELEASE_X86_64 x86_64)

The command pnpm install runs without throwing errors, but when try pnpm run codemod mui2suid it return the following errors:

Cannot find module '@suid/utils/capitalize' or its corresponding type declarations.
Cannot find module '@suid/utils/uncapitalize' or its corresponding type declarations.

Then if I run pnpm run build it fails at vite buildwith error: failed to load config from /Users/Lmt/Projects/Suid-Dev/packages/site/vite.config.js, but the build step change the error thrown by codemod command to:

TypeError [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module "file:///Users/Lmt/Projects/Suid-Dev/packages/codemod/package.json" needs an import assertion of type "json"

Is it something related to my setup?

I just stumbled on a weird behavior, let me know if it's me.

this import import styled from "@suid/material/styles/styled";
breaks with a ReferenceError: React is not defined in @suid/system/createStyled.jsx

when I use this one import styled from "@suid/system/styled";
everything is fine

any idea? should we be able to import the one from material/styles?

Hi,

I don't think Grid is behaving correctly when setting columns value on grid container.

Example:
Contains 2 examples, the first one being a copy of https://mui.com/material-ui/react-grid/#columns
https://stackblitz.com/edit/angular-ey1m2j?file=src/App.tsx

Expected behavior
Items in grid should become larger or smaller in width. reflecting the change to columns prop.

Other
It looks like the issue is related to useContext(GridContext) as its always undefined.

const Grid = $.component(function Grid({ allProps, props, otherProps, classes, }) {
    ...
    const columnsContext = useContext(GridContext);
    ...
    const columns = props.columns || columnsContext || 12;
    // if Grid container with columns={20},  
    console.log(props.columns, columnsContext) // -> 20, undefined.
    // if Grid item in the Grid container. 
    console.log(props.columns, columnsContext)  // -> undefined, undefined.
    ...
});

I'm relative new to Solidjs so i won't be able to provide a PR anytime soon, id imagine we need to check if we are on a grid container and then call createContext

https://www.solidjs.com/docs/latest/api#createcontext

Temp fix is to set columns prop on grid items

Hi!

I'm currently encountering a blocking error in one of my projects. Here is the code:

export const SideNav: Component<SideNavProps> = (props: SideNavProps) => {
  return (
    <List>
      <ListItem disablePadding>
        <ListItemButton>
          <ListItemText primary="Hello" />
        </ListItemButton>
      </ListItem>
    </List>
  )
}

This generates the following error at runtime:

dev.js:1283 Uncaught TypeError: Cannot redefine property: color
    at Function.defineProperties (<anonymous>)
    at mergeProps (dev.js:1283:14)
    at sx (extendSxProp.jsx:12:24)
    at get sx [as sx] (extendSxProp.jsx:21:20)
    at createStyled.jsx:20:29
    at Array.reduce (<anonymous>)
    at Object.fn (createStyled.jsx:14:36)
    at runComputation (dev.js:693:22)
    at updateComputation (dev.js:676:3)
    at createMemo (dev.js:238:10)

Any idea what's causing this?

I'm using Solid v1.6.0 and SUID v0.6.3.

EDIT: Seems like the error is triggered by ListItemText. If I remove it, everything works fine.

Using TextField multiline property is not working.
Checking the DOM it seems tag has not been replaced by a <textarea> tag as doing material ui in React

Will your React2Solid here also port over the @mui/lab

Also, with tree-shaking these days, it sure is handy to import like

import {Stack, Typography} from '@mui/material

vs. a separate import on each line. When I was messing around in the sandbox, it seemed like this conversion was forcing explicitly importing each item separately. Not a problem, just convenience.

First off, thank you for porting the React library to Solid! It's been really nice to jump right back into Mui while trying out this new framework.

What led me here... I couldn't get the multiline prop on the TextField component to work, which I assume is related to the fact that TextareaAutosize is not complete.

I'm curious to hear more about contributing and what the best way to do this is. From what I understand, you're primarily looking for contributions to your conversion script in order to keep up with the original MUI repo, right?

@suid/material/useMediaQuery throws the following exception in safari

TypeError: query.addEventListener is not a function. (In 'query.addEventListener("change", listener)', 'query.addEventListener' is undefined)

I believe the issue is here https://stackoverflow.com/a/62026580

Edit

This was on Safari Version 13.1.3 (15609.4.1). This also means affected versions of safari can't load https://suid.io

Say I have an icon I create via:
<CloseIcon onClick={() => setClosed(true)} />

VS code is not able to suggest an import. I have to manually type it in:
import CloseIcon from '@suid/icons-material/Close';

Am I missing a dependency?

https://github.com/mui/mui-x

Muix is a commercial project, at the same time, also have open source version, which will involve some legal issues?

After updating @suid/material to 0.4.0, I notice multiple errors from webpack:

ERROR in ./node_modules/@suid/utils/merge.js 2:0-36
Module not found: Error: Can't resolve './deepmerge' in '/path/to/project/node_modules/@suid/utils'
Did you mean 'deepmerge.js'?
BREAKING CHANGE: The request './deepmerge' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './deepmerge' in '/path/to/project/node_modules/@suid/utils'
  using description file: /path/to/project/node_modules/@suid/utils/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /path/to/project/node_modules/@suid/utils/package.json (relative path: ./deepmerge)
      Field 'browser' doesn't contain a valid alias configuration
      /path/to/project/node_modules/@suid/utils/deepmerge doesn't exist
 @ ./node_modules/@suid/material/styles/createComponents.jsx 7:0-38 13:33-38
 @ ./node_modules/@suid/material/styles/createTheme.jsx 7:0-54 43:11-27
 @ ./node_modules/@suid/material/styles/index.jsx 3:0-44 3:0-44
 @ ./node_modules/@suid/material/CssBaseline/CssBaseline.jsx 10:0-37 87:14-22
 @ ./node_modules/@suid/material/CssBaseline/index.jsx 1:0-40 1:0-40 2:0-30 2:0-30
 @ ./src/App.tsx 4:0-53 19:28-39
 @ ./src/index.tsx 3:0-24 17:35-38

I notice a possible workaround: remove the "type": "module" in the package.json of the @suid/utils, https://github.com/swordev/suid/blame/main/packages/utils/package.json#L5 . Another possible fix is, as the error said, just use the name with the extension in the files of @suid/utils.

My webpack config: https://pastebin.com/LCn5iH1z
My package.json: https://pastebin.com/1NWNAw5A
Complete log: https://pastebin.com/QmWcf7BL

Just remember that there are less than 12 hours left before the voting period ends.

https://hack.solidjs.com

Thank you all.

For example

<For each={[1]}>
       {() => <Grid container>
		<Grid item xs={12}>
			<TextField fullWidth label="text" />
		</Grid>
		<For each={customFields}>
			{() => <Grid xs={12}>test</Typography>}
		</For>
	</Grid>}
</For>

When you add dynamically something to customFields store the parent For re-renders. This is happening only using the Grid component it works fine with Stack/Box etc.

When @mui components like the drawer or the modal open up, they autofocus the first tabbable element within (or the modal itself), and then they trap focus within via a FocusTrap component so that the page behind cannot be interacted with.

should be

    const ns = (
      reactImport.getNamespaceImport() || // import * as React from "react"
      reactImport.getDefaultImport() // import React from "react"
    );

Hi.
I just started using solid js and found this awesome library and tried to use it.
I think there's a problem with the ThemeProvider! It's not reactive!
I want my app to have a dark/light mode switch, I tried to keep the theme variables in a signal. And it doesn't change after I changed the signal value;
Here's some code:

App.tsx:

import { ThemeProvider } from '@suid/material';
import { Component } from 'solid-js';
import { DarkSwitch } from './components/DarkSwitch';
import { Login } from './components/Login';
import { themeSignal } from './utility/Theme';
const App: Component = () => {
  const [theme,setTheme] = themeSignal;
  return <ThemeProvider theme={theme()}>
    <DarkSwitch />
    <Login />
  </ThemeProvider>;
};

export default App;

Theme.tsx (the theme signal):

import { createTheme } from "@suid/material";
import { createSignal } from "solid-js";

export const darkTheme = createTheme({
    palette: {
        mode: 'dark'
    },
});
export const lightTheme = createTheme({
    palette: {
        mode: 'light'
    },
})
export const themeSignal = createSignal(lightTheme);

and the switch button:

import DarkMode from '@suid/icons-material/DarkMode';
import LightMode from '@suid/icons-material/LightMode';
import IconButton from "@suid/material/IconButton";
import { Component, createEffect } from "solid-js";
import { darkTheme, lightTheme, themeSignal } from "../utility/Theme";

export const DarkSwitch: Component = () => {
    const [theme, setTheme] = themeSignal;
    createEffect(() => {
        console.log(theme().palette.mode);
    });
    return <IconButton onClick={() => setTheme(theme().palette.mode === 'dark' ? lightTheme : darkTheme)}>
        {theme().palette.mode === 'dark' ? <LightMode /> : <DarkMode />}
    </IconButton>;
};

And the dark mode toggle doesn't work although it does update the theme, the provider doesn't get the change.

What I think is the provider should pass the signal itself, not the computed value! like below:

 const [theme,setTheme] = themeSignal;
  return <ThemeProvider theme={theme}> // <--- this part
    <DarkSwitch />
    <Login />
  </ThemeProvider>;

Because all of the reactive systems of solidjs come from sending the signal, not the value.

Feature request: Date time picker

Reference: https://mui.com/x/react-date-pickers/date-time-picker/

On vite-plugin-solid >= 2.3.3, vite-plugin-solid will add .jsx and .tsx files to optimized dependencies. In such configuration, esbuild translate JSX elements to React.createElement in default settings, skips solidjs complier, and cause ReferenceError: React is not defined in most situation.

On vite-plugin-solid >= 2.3.5, ryan scans exports in package.json for solid key to identify and exclude the package from optimized dependencies: solidjs/vite-plugin-solid@cb6f269

These changes break at least @suid/material's JSX elements.

Related issue on solid-router repository: solidjs/solid-router#165

Possible solution:
Add exports to package.json, for example:

{
  "exports": {
    ".": {
      "solid": "./index.jsx",
      "default": "./index.jsx",
    }
  }
}

Workarounds:

• Add this package to optimizeDeps.exclude of vitejs config

  export default defineConfig({
    optimizeDeps: {
        exclude: ["@suid/material"], // Workaround to [email protected] breaking change
    },
  })

• Downgrade/upgrade to [email protected], which reverts related change: solidjs/vite-plugin-solid@474858d

Hi. I have a astro project with my page written in solid-js and i want to use a simple TextInput.
Here is a demo of that i'm trying to do: https://stackblitz.com/edit/github-xmtfif?file=src/pages/index.astro

Error is:

Cannot use import statement outside a module
/home/projects/github-xmtfif/node_modules/@suid/base/createComponentFactory.js:1
import composeClasses from "./composeClasses";

Astro troubleshooting for this error: https://docs.astro.build/en/guides/troubleshooting/#cannot-use-import-statement-outside-a-module

• I tried installing @suid/vite-plugin. Does not help.
• Tried excluding @suid/material and @suid/base from vite ssr process like here: https://docs.astro.build/en/reference/configuration-reference/#vite (vite: { ssr: { external: ['@suid/material', '@suid/base'] )

I tried using noExternal instead: https://vitejs.dev/config/ssr-options.html#ssr-noexternal

      noExternal: [
        '@suid/material',
        '@suid/base',
        '@suid/system',
        '@suid/css',
        '@suid/utils',
        '@suid/styled-engine',
      ],

And now the error is:

ReferenceError: document is not defined
    at Module.findStyleElement [as default] (/node_modules/@suid/css/dom/findStyleElement.js:2:5)
    at /node_modules/@suid/styled-engine/createStyle.js:31:44
    at Proxy.createComputed (/home/projects/github-xmtfif/node_modules/solid-js/dist/server.cjs:56:5)
    at Module.createStyle (/node_modules/@suid/styled-engine/createStyle.js:22:4)
    at Box2 (Box.jsx:30:28)
    at Proxy.createComponent (/home/projects/github-xmtfif/node_modules/solid-js/dist/server.cjs:283:15)
    at createStyled.jsx:50:10
    at Proxy.createComponent (/home/projects/github-xmtfif/node_modules/solid-js/dist/server.cjs:283:15)
    at get children [as children] (FormControl.jsx:97:2)
    at eval (/home/projects/github-xmtfif/node_modules/solid-js/dist/server.cjs:187:35

The only way to make it work is to load my page component with client:only="solid-js", but this means i don't have any ssr on the entire page.

When passing any JSX element to input props warning message appears computations created outside a "createRoot" or "render" will never be disposed while passing string for example the message seams to be not found.

I'm trying to add a Tooltip to a button but it seems SUID still doesn't have it, so I'd like to request for it to be implemented.

Here's the official component documentation: https://mui.com/material-ui/react-tooltip/

... to avoid the "undo" in line 10

for components Fade and Grow onExit doesn't get called and unmountOnExit removes component right away without exit animation

Thanks for creating this library!

I'd love if you could add the Slider component as well.

The React to Solid converter page just seems to output the exact code as is input.

See here for a demo. In short, a component like this:

const StyledDemo = styled('div')(({ theme }) => {
  console.log('THEME IS (styled)', theme);
  ...
})

will show an empty-ish theme value with many undefined keys (e.g. typography, palette, shadows, ...). However, if I build an otherwise identical component with useTheme like this:

const UseThemeDemo = (props) => {
  const theme = useTheme();
  console.log('THEME IS (useTheme)', theme);
  ...
};

It will log an much more "full" theme value as I would expect. I do believe this is the behaviour we want. Here are both logs:

Interestingly, this bug seems to affect the second demo on the SUID docs on styled. The styled button does not appear because Uncaught TypeError: theme.palette is undefined.

I've tried different versions of SUID/Solid but for some reason I can't find a combination that works. I've also tried explicitly setting a theme with ThemeProvider but that doesn't change anything to the "empty" theme values. I've also tested this on both chrome and firefox.

Not sure if I am using it correctly, but it appears that backdrop does not show contents defined inside.

See for example:

https://stackblitz.com/edit/angular-fng8cu?file=src/App.tsx

Appreciated if mistakes can be pointed out.

I think that we could work on the description of the package, it's a bit confusing on what the port aim to cover:

If this helps: MUI (company)

• a. MUI Core (product line) - the only React UI library you need, foundational building blocks.
  • i. Pre-made UI libraries (products)
    • Material UI - foundational building blocks, based on Material Design
    • Joy UI - Material UI’s components reimagined with a slick new design (not MD based)
  • ii. MUI Base (product) - Unstyled React components.
  • iii. MUI System (product) - CSS utilities for rapidly laying out custom designs.
• b. MUI X (product) - Advanced React components
  • i. Data grid (feature)
  • ii. Date picker (feature)
• c. MUI Toolpad (product) - Open source, Low-code internal tool builder.
  Drag and drop pre-built components, connect to data sources, and APIs and build simple apps 10x faster.
  https://twitter.com/dan_abramov/status/1508267869263515650

The port seems to work well, impressed

https://mui.com/material-ui/react-tabs/
Need this tabs component for solid js.

cd $(mktemp -d)
npm init -y
npm i @suid/codemod
npx @suid/codemod

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prettier' imported from /tmp/tmp.kXmaXvmPTv/node_modules/@suid/codemod/actions/mui2suid.js

Hi, I'm trying to use SUID in a webpack project and having the following errors. It seems like a problem relative to the SUID‘s build product.
As far as I can see, it would be no error if SUID provides a traditional npm package with a "main" field pointing to the package entry, or do you have other suggestion?

ERROR in ./node_modules/@suid/utils/merge.js 1:0-40
Module not found: Error: Can't resolve './cloneObject' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
Did you mean 'cloneObject.js'?
BREAKING CHANGE: The request './cloneObject' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './cloneObject' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
  using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: ./cloneObject)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/zoffy/repos/my-project/node_modules/@suid/utils/cloneObject doesn't exist
 @ ./node_modules/@suid/material/styles/createComponents.jsx 7:0-38 13:33-38
 @ ./node_modules/@suid/material/styles/createTheme.jsx 7:0-54 43:11-27
 @ ./node_modules/@suid/material/styles/index.jsx 3:0-44 3:0-44
 @ ./node_modules/@suid/material/styles/styled.js 2:0-29 7:11-19
 @ ./node_modules/@suid/material/Button/Button.jsx 11:0-57 99:17-23 100:13-33 229:22-28 246:20-26
 @ ./node_modules/@suid/material/Button/index.jsx 1:0-35 1:0-35 2:0-25 2:0-25
 @ ./src/renderer/components/App/index.tsx 13:0-43 51:45-51 97:40-46 101:36-42
 @ ./src/renderer/index.tsx 4:0-35 12:27-30

ERROR in ./node_modules/@suid/utils/merge.js 2:0-36
Module not found: Error: Can't resolve './deepmerge' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
Did you mean 'deepmerge.js'?
BREAKING CHANGE: The request './deepmerge' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './deepmerge' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
  using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: ./deepmerge)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/zoffy/repos/my-project/node_modules/@suid/utils/deepmerge doesn't exist
 @ ./node_modules/@suid/material/styles/createComponents.jsx 7:0-38 13:33-38
 @ ./node_modules/@suid/material/styles/createTheme.jsx 7:0-54 43:11-27
 @ ./node_modules/@suid/material/styles/index.jsx 3:0-44 3:0-44
 @ ./node_modules/@suid/material/styles/styled.js 2:0-29 7:11-19
 @ ./node_modules/@suid/material/Button/Button.jsx 11:0-57 99:17-23 100:13-33 229:22-28 246:20-26
 @ ./node_modules/@suid/material/Button/index.jsx 1:0-35 1:0-35 2:0-25 2:0-25
 @ ./src/renderer/components/App/index.tsx 13:0-43 51:45-51 97:40-46 101:36-42
 @ ./src/renderer/index.tsx 4:0-35 12:27-30

webpack 5.72.0 compiled with 2 errors in 5354 ms

here's my webpack config by the way

const babelLoader = {
  loader: 'babel-loader',
  options: {
    presets: ['babel-preset-solid', '@babel/preset-env'],
    plugins: ['@babel/transform-runtime'],
  },
};

const rules = [
  {
    test: /\.jsx?$/,
    include: /@suid\//,
    use: [babelLoader],
  },
  // other rules...
];

module.exports = {
  target: 'electron-renderer',
  devtool: isDev ? 'cheap-module-source-map' : false,
  module: {
    rules,
  },
  plugins,
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src/renderer'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', 'json'],
  },
};

Currently getting 'Cannot redefine property' when using Box' sx property and Solidjs 1.6.0. Is there a workaround or recommendation?

<Box sx={{ backgroundColor: 'yellow', }} >

stackblitz example

The <Menu>, <MenuItem>, <MenuList> components are missing.

When wrapping < Grid item > in < Show > the view bugs out and all children components inside get re-rendered and if they are buttons become unclickable. This behaviour comes with upgrading to Solid 1.5

Maybe similar to #46?

This time I have a slightly more complex theme:

const theme = createTheme({
  typography: {
    fontFamily: 'monospace',
    h1: {
      fontFamily: 'serif',
      color: 'red',
    },
  },
});

I expect that <Typography variant="h1">Foobar</Typography> is displayed in red, in a serif font. However, the font remains monospace (but red).

SUID demo: https://stackblitz.com/edit/solid-gp9xzq-vcyyhr?file=src/index.tsx

MUI demo (that works): https://stackblitz.com/edit/react-ca5cbq-nncjf1?file=index.tsx

Hi, I'm trying to use SUID in a webpack project and having the following errors. It seems like a problem relative to the SUID‘s build product.
As far as I can see, it would be no error if SUID provides a traditional npm package with a "main" field pointing to the package entry, or do you have other suggestion?

ERROR in ./node_modules/@suid/utils/merge.js 1:0-40
Module not found: Error: Can't resolve './cloneObject' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
Did you mean 'cloneObject.js'?
BREAKING CHANGE: The request './cloneObject' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './cloneObject' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
  using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: ./cloneObject)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/zoffy/repos/my-project/node_modules/@suid/utils/cloneObject doesn't exist
 @ ./node_modules/@suid/material/styles/createComponents.jsx 7:0-38 13:33-38
 @ ./node_modules/@suid/material/styles/createTheme.jsx 7:0-54 43:11-27
 @ ./node_modules/@suid/material/styles/index.jsx 3:0-44 3:0-44
 @ ./node_modules/@suid/material/styles/styled.js 2:0-29 7:11-19
 @ ./node_modules/@suid/material/Button/Button.jsx 11:0-57 99:17-23 100:13-33 229:22-28 246:20-26
 @ ./node_modules/@suid/material/Button/index.jsx 1:0-35 1:0-35 2:0-25 2:0-25
 @ ./src/renderer/components/App/index.tsx 13:0-43 51:45-51 97:40-46 101:36-42
 @ ./src/renderer/index.tsx 4:0-35 12:27-30

ERROR in ./node_modules/@suid/utils/merge.js 2:0-36
Module not found: Error: Can't resolve './deepmerge' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
Did you mean 'deepmerge.js'?
BREAKING CHANGE: The request './deepmerge' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './deepmerge' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
  using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: ./deepmerge)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/zoffy/repos/my-project/node_modules/@suid/utils/deepmerge doesn't exist
 @ ./node_modules/@suid/material/styles/createComponents.jsx 7:0-38 13:33-38
 @ ./node_modules/@suid/material/styles/createTheme.jsx 7:0-54 43:11-27
 @ ./node_modules/@suid/material/styles/index.jsx 3:0-44 3:0-44
 @ ./node_modules/@suid/material/styles/styled.js 2:0-29 7:11-19
 @ ./node_modules/@suid/material/Button/Button.jsx 11:0-57 99:17-23 100:13-33 229:22-28 246:20-26
 @ ./node_modules/@suid/material/Button/index.jsx 1:0-35 1:0-35 2:0-25 2:0-25
 @ ./src/renderer/components/App/index.tsx 13:0-43 51:45-51 97:40-46 101:36-42
 @ ./src/renderer/index.tsx 4:0-35 12:27-30

webpack 5.72.0 compiled with 2 errors in 5354 ms

here's my webpack config by the way

const babelLoader = {
  loader: 'babel-loader',
  options: {
    presets: ['babel-preset-solid', '@babel/preset-env'],
    plugins: ['@babel/transform-runtime'],
  },
};

const rules = [
  {
    test: /\.jsx?$/,
    include: /@suid\//,
    use: [babelLoader],
  },
  // other rules...
];

module.exports = {
  target: 'electron-renderer',
  devtool: isDev ? 'cheap-module-source-map' : false,
  module: {
    rules,
  },
  plugins,
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src/renderer'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', 'json'],
  },
};

Hey there, im wondering if the Select component could be added: https://mui.com/material-ui/api/select? Admittedly it's not in the standard material.io components though: https://material.io/components

The current example for how to use the propper component with transitions appears to be broken.
When clicking the button in the StackBlitz demo, the button becomes unresponsive.
When implemented in a project, the component remains hidden.

The example without transition works both in the demo and when implemented locally.

Hi, I'm trying to use SUID in a webpack project and having the following errors. It seems like a problem relative to the SUID‘s build product.
As far as I can see, it would be no error if SUID provides a traditional npm package with a "main" field pointing to the package entry, or do you have other suggestion? please help.

ERROR in ./node_modules/@suid/utils/merge.js 1:0-40
Module not found: Error: Can't resolve './cloneObject' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
Did you mean 'cloneObject.js'?
BREAKING CHANGE: The request './cloneObject' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './cloneObject' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
  using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: ./cloneObject)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/zoffy/repos/my-project/node_modules/@suid/utils/cloneObject doesn't exist
 @ ./node_modules/@suid/material/styles/createComponents.jsx 7:0-38 13:33-38
 @ ./node_modules/@suid/material/styles/createTheme.jsx 7:0-54 43:11-27
 @ ./node_modules/@suid/material/styles/index.jsx 3:0-44 3:0-44
 @ ./node_modules/@suid/material/styles/styled.js 2:0-29 7:11-19
 @ ./node_modules/@suid/material/Button/Button.jsx 11:0-57 99:17-23 100:13-33 229:22-28 246:20-26
 @ ./node_modules/@suid/material/Button/index.jsx 1:0-35 1:0-35 2:0-25 2:0-25
 @ ./src/renderer/components/App/index.tsx 13:0-43 51:45-51 97:40-46 101:36-42
 @ ./src/renderer/index.tsx 4:0-35 12:27-30

ERROR in ./node_modules/@suid/utils/merge.js 2:0-36
Module not found: Error: Can't resolve './deepmerge' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
Did you mean 'deepmerge.js'?
BREAKING CHANGE: The request './deepmerge' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve './deepmerge' in '/Users/zoffy/repos/my-project/node_modules/@suid/utils'
  using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/zoffy/repos/my-project/node_modules/@suid/utils/package.json (relative path: ./deepmerge)
      Field 'browser' doesn't contain a valid alias configuration
      /Users/zoffy/repos/my-project/node_modules/@suid/utils/deepmerge doesn't exist
 @ ./node_modules/@suid/material/styles/createComponents.jsx 7:0-38 13:33-38
 @ ./node_modules/@suid/material/styles/createTheme.jsx 7:0-54 43:11-27
 @ ./node_modules/@suid/material/styles/index.jsx 3:0-44 3:0-44
 @ ./node_modules/@suid/material/styles/styled.js 2:0-29 7:11-19
 @ ./node_modules/@suid/material/Button/Button.jsx 11:0-57 99:17-23 100:13-33 229:22-28 246:20-26
 @ ./node_modules/@suid/material/Button/index.jsx 1:0-35 1:0-35 2:0-25 2:0-25
 @ ./src/renderer/components/App/index.tsx 13:0-43 51:45-51 97:40-46 101:36-42
 @ ./src/renderer/index.tsx 4:0-35 12:27-30

webpack 5.72.0 compiled with 2 errors in 5354 ms

here's my webpack config by the way:

const babelLoader = {
  loader: 'babel-loader',
  options: {
    presets: ['babel-preset-solid', '@babel/preset-env'],
    plugins: ['@babel/transform-runtime'],
  },
};

const rules = [
  {
    test: /\.jsx?$/,
    include: /@suid\//,
    use: [babelLoader],
  },
  // other rules...
];

module.exports = {
  target: 'electron-renderer',
  devtool: isDev ? 'cheap-module-source-map' : false,
  module: {
    rules,
  },
  plugins,
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src/renderer'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', 'json'],
  },
};

With the following theme:

const theme = createTheme({
  typography: {
    h1: {
      color: 'red',
      fontStyle: 'italic',
    },
  },
});

I expect that <Typography variant="h1">Foobar</Typography> is red and italic. However, it stays as if the theme does not exist. (Of course, I use it within a ThemeProvider.) Other parts of the theme do work in my experiments, like shape.borderRadius.

Demo: https://stackblitz.com/edit/solid-gp9xzq?file=src/index.tsx

React + MUI demo, with almost the exact same code that does work as expected: https://stackblitz.com/edit/react-ca5cbq?file=index.tsx

I'm using SUID version 0.1.1-next.0 and Solid 1.3.7.

createTheme({
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            '&:hover': {
              boxShadow: 'none',
            },
          },
          sizeLarge: {
            height: 48,
          },
          containedPrimary: {
            'boxShadow': theme.customShadows.primary,
            '&:hover': {
              backgroundColor: theme.palette.primary.dark,
            },
          },
        },
      },
    }
})

i want to override component props via styleOverrides prop like MUI, but now suid just have defaultProps in components

In React2Solid converter, if React code has React Fragment <React.Fragment></React.Fragment>, it should convert it to JSX Fragment tag <></>. Instead it doesn't and output includes React Fragment.

Quick MUI example (with full source toggled) that has React Fragment https://mui.com/components/modal/#nested-modal

ERROR Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/sdykae/mythings/readme-niubiz-documentation/node_modules/@suid/utils/deepmerge' imported from /home/sdykae/mythings/readme-niubiz-documentation/node_modules/@suid/utils/cloneObject.js
at new NodeError (node:internal/errors:393:5)
at finalizeResolution (node:internal/modules/esm/resolve:305:11)
at moduleResolve (node:internal/modules/esm/resolve:866:10)
at defaultResolve (node:internal/modules/esm/resolve:1074:11)
at nextResolve (node:internal/modules/esm/loader:164:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:839:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:426:18)
at ModuleWrap. (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'

you have to add import { isPlainObject } from "./deepmerge.js"; to resolve :(

after that change It says

(node:577599) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
ERROR /home/sdykae/mythings/readme-niubiz-documentation/node_modules/@suid/system/colorManipulator.js:21
export function hexToRgb(color) {
^^^^^^

SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1048:15)
at Module._compile (node:internal/modules/cjs/loader:1083:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
at Module.load (node:internal/modules/cjs/loader:997:32)
at Module._load (node:internal/modules/cjs/loader:838:12)
at ModuleWrap. (node:internal/modules/esm/translators:170:29)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:528:24)

currently we store multiple test cases together

  it("transforms a to b", () => {
    expect(
      t(`
        a
      `)
    ).toBe(
      format(`
        b
      `)
    );
  });
  it("transforms c to d", () => {
    expect(
      t(`
        c
      `)
    ).toBe(
      format(`
        d
      `)
    );
  });

... for example in packages/codemod/test/transforms/replaceReactUseEffect.test.ts

make this more pretty by storing the test cases in separate files
for example in packages/codemod/test/transforms/replaceReactUseEffect/

transforms a to b.src.ts

a

transforms a to b.out.ts

b

make this more pretty

benefit: pretty git diff

similar issue BuilderIO/mitosis#856

compromise solutions with jest-snapshot ...

expect("a").toMatchSnapshot() // snapshot is stored in __snapshots__/*.snap
expect("a").toMatchInlineSnapshot("b")

→ update snapshots with npx jest -u

https://jestjs.io/docs/snapshot-testing

First of all, thank you for the great library! I've been using it for a few days inside Tauri. The one problem I came across is that it's trying to create dynamic <style> elements, which is something that breaks CSP constraints set by Tauri. See here - tauri-apps/tauri#3427 (comment). Do you think we could have a different implementation, such as keeping a virtual stylesheet and flushing it to a single predefined style element when one of the styles changes?

Skeleton component doesn't animate "wave". The default ("pulse") works fine

ButtonBase is throwing an error never seen it before after updating to 1.5 solidjs but i think that's not the case

MUI: The component prop provided to ButtonBase is invalid.
Please make sure the children prop is rendered in this custom component.

I even see it in the playground and the component is unusable.