I came across this issue while trying to use SUID inside Tauri, which sets a strict CSP policy by default - and that prevents SUID styles from loading.

A way to solve that problem is to specify a nonce attribute on <style> tags: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles

I also tried updating the docs, but I didn't have much time, so I could've messed something up.

note: looking back, react2solid should be implemented as an eslint plugin for example https://github.com/milahu/eslint-plugin-react2solid why? eslint is the most popular transformer = large ecosystem = reuse existing rules typescript is slow (except we use swc), typescript should be optional

transform React.useRef

-const divRef = React.useRef<HTMLDivElement>(null)
+var divRef: HTMLDivElement | null = null;
const div = <div ref={divRef}>asdf</div>
-console.log(divRef.current)
+console.log(divRef)

not perfect but should work for most cases

also

fix #133 fix #136

fix #135 (partial) - use toMatchInlineSnapshot to allow npx jest -u

FYI Something is failing, when using Vite 4.

Click modal, nothing happens.

https://stackblitz.com/edit/angular-vmqvmy-lv8str?file=src%2FApp.tsx,package.json

But Vite Build, it works.

Change Vite to 3.2.5 and works again.

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)

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.

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.

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: https://github.com/solidjs/vite-plugin-solid/commit/cb6f269a79b6827bf4ef0e4411c081dc0aeda15e

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

Related issue on solid-router repository: https://github.com/solidjs/solid-router/issues/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: https://github.com/solidjs/vite-plugin-solid/commit/474858def50f269b0ff43ef232883f38cb3565b3

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.

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?

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

Hello, I've been struggling to find a way to utilize the inputRef parameter on TextInput components.

My use-case is needing to call .focus() on the input field inside onMount() (because autofocus doesn't work when navigating), but the reference passed via ref returns a <div>, not an <input>, which forces me to do this:

(usernameRef?.firstChild as HTMLInputElement).focus();

(...which somehow works even though firstChild is a <label>, not an <input>)

It would be great if usernameRef?.focus() just worked but it doesn't, so I'm left with no other choice but to use the code above.

I've tried using inputRef in many different ways but nothing seems to work because it takes a Ref<HTMLInputElement> type which I can't do anything with and I was not able to find any documentation or examples on how to use it.

Installation on the newest Solid (1.6.6) which uses Vite 4.0.3 ends with a following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @suid/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR!   node_modules/vite-plugin-solid
npm ERR!     dev vite-plugin-solid@"^2.5.0" from the root project
npm ERR!   peerOptional vite@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR!   node_modules/vitefu
npm ERR!     vitefu@"^0.2.3" from [email protected]
npm ERR!     node_modules/vite-plugin-solid
npm ERR!       dev vite-plugin-solid@"^2.5.0" from the root project
npm ERR!   1 more (the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @suid/[email protected]
npm ERR! node_modules/@suid/vite-plugin
npm ERR!   dev @suid/vite-plugin@"^0.1.0" from the root project

etc...

Forcing with --legacy-peer-deps however seems to be working without any issues. The only problem is that I need to add --legacy-peer-deps flag everytime I trigger npm install. It seems that it could be enough to fix package.json deps inside @suid/vite-plugin.

MUI docs: https://mui.com/system/getting-started/usage/#responsive-values

When I use it as described the object is returned as the value and is not returned as media queries like in the React version.

Hi,

I'm not sure if this is intentional, but since @suid/material v0.4.0 the <Typography /> component is no longer using the default font-family: "Roboto", "Helvetica", "Arial", sans-serif;

For example, here's what the following snippets produces:

import { Typography, Button } from '@suid/material';

export default function App() {
  return (<>
    <Typography>
      Should be using Roboto Font
    </Typography>
    <hr />
    <Button variant="contained">
      <Typography>
        Should be using Roboto Font
      </Typography>
    </Button>
    <hr />
    <Button variant="contained">Should be using Roboto Font</Button>
  </>);
}

• Using latest @suid/material v0.8.2 (stackblitz.com/edit/angular-dgmcdj)

  

• Using @suid/material v0.3.1 (stackblitz.com/edit/angular-32ictp)

  

• For references, here's the Material UI version (codesandbox.io/s/material-ui-forked-rteukt)

  

Update

it seems all default styling (not only font-family) is not applied to <Typography /> component.

The following are taken directly from the example at suid.io/components/typography: stackblitz.com/edit/angular-qgyehp

makeStyle is a great way to separate the css in js from the rest of the logic and I find it easier to use than sx

tss-react makes it possible to use it as per mui documentation, could it be possible to add the same for suid ?

https://mui.com/material-ui/guides/interoperability/#jss-tss

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@suid/[email protected]

Minor Changes

• 06b378eb Thanks @juanrgm! - Return the class selector of the styled components

• 289b37a5 Thanks @juanrgm! - Global refactoring for adopting the behaviour to MUI styled components

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

• c5273760 Thanks @juanrgm! - Update to SolidJS v1.6.5

• Updated dependencies [19236935, 06b378eb, 02740d83, 289b37a5, f428fe72, 401f1735, c5273760]:

  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]

@suid/[email protected]

Minor Changes

• 02740d83 Thanks @juanrgm! - Add createId option

Patch Changes

• 19236935 Thanks @juanrgm! - Add injectFirst option

• f428fe72 Thanks @juanrgm! - Drop @suid/utils dependency

• 401f1735 Thanks @juanrgm! - Update readme

@suid/[email protected]

Minor Changes

• b36ed9b9 Thanks @juanrgm! - Export styled at @suid/material/styles

• 289b37a5 Thanks @juanrgm! - Global refactoring for adopting the behaviour to MUI styled components

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

• e9827edb Thanks @juanrgm! - Fix the TextField component with number type

• 9d5860d1 Thanks @juanrgm! - Fix the size property in TextField component

• c5273760 Thanks @juanrgm! - Update to SolidJS v1.6.5

• Updated dependencies [19236935, 06b378eb, 02740d83, 289b37a5, f428fe72, 401f1735, c5273760]:

  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]

@suid/[email protected]

Minor Changes

• c5081691 Thanks @juanrgm! - Add partial support for SSR

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

• c5273760 Thanks @juanrgm! - Update to SolidJS v1.6.5

• Updated dependencies [19236935, 02740d83, f428fe72, 401f1735, c5273760]:

  • @suid/[email protected]
  • @suid/[email protected]

@suid/[email protected]

Minor Changes

• 06b378eb Thanks @juanrgm! - Return the class selector of the styled components

• 289b37a5 Thanks @juanrgm! - Global refactoring for adopting the behaviour to MUI styled components

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

• c5273760 Thanks @juanrgm! - Update to SolidJS v1.6.5

• Updated dependencies [19236935, 02740d83, c5081691, 289b37a5, f428fe72, 401f1735, c5273760]:

  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]

@suid/[email protected]

Minor Changes

• 289b37a5 Thanks @juanrgm! - Global refactoring for adopting the behaviour to MUI styled components

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

• c5273760 Thanks @juanrgm! - Update to SolidJS v1.6.5

@suid/[email protected]

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

[email protected]

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

@suid/[email protected]

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

• c5273760 Thanks @juanrgm! - Update to SolidJS v1.6.5

• Updated dependencies [b36ed9b9, 289b37a5, 401f1735, e9827edb, 9d5860d1, c5273760]:

  • @suid/[email protected]

@suid/[email protected]

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

• c5273760 Thanks @juanrgm! - Update to SolidJS v1.6.5

• Updated dependencies [06b378eb, b36ed9b9, 289b37a5, 401f1735, e9827edb, 9d5860d1, c5273760]:

  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]
  • @suid/[email protected]

@suid/[email protected]

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

• c5273760 Thanks @juanrgm! - Update to SolidJS v1.6.5

• Updated dependencies [289b37a5, 401f1735, c5273760]:

  • @suid/[email protected]

@suid/[email protected]

Patch Changes

• 401f1735 Thanks @juanrgm! - Update readme

I was wondering if behaviour like this is in any way supported:

const SomeComponent = styled('div')({
  color: 'green',
});

const ParentComponent = styled('div')({
  [SomeComponent]: {
    color: 'pink',
  },
});

(stackblitz, but it might be of limited use)

Emotion, the underlying library for MUI's styled function, does support it although you need a babel plugin.