Autocomplete First Attempt (Not Working Yet)

[psygo]

I have a personal project in which I would like to use MUI's Autocomplete component. So I decided to try to make a contribution to this project. However, this specific component seems very challenging.

This is not working at this point, and I left it this way so hopefully someone sheds some light on the following questions.

1. I'm trying to use something like pnpm codemod mui2suid --package-name material --name Autocomplete in order to generate the code for the Autocomplete component, but the files are not generated, despite my logs saying they were:

   > [email protected] codemod /home/phili/Code/suid
   > node --no-warnings --loader ts-node/esm packages/codemod/src/bin.ts "mui2suid" "--package-name" "material" "--name" "Autocomplete"
   
   # node_modules/.mui-source/material-ui-5.5.0/packages/mui-material/src/Autocomplete/autocompleteClasses.ts » packages/material/src/Autocomplete/autocompleteClasses.ts
   # node_modules/.mui-source/material-ui-5.5.0/packages/mui-material/src/Autocomplete/Autocomplete.d.ts » packages/material/src/Autocomplete/AutocompleteProps.tsx
   # node_modules/.mui-source/material-ui-5.5.0/packages/mui-material/src/Autocomplete/Autocomplete.js » packages/material/src/Autocomplete/Autocomplete.tsx
   # node_modules/.mui-source/material-ui-5.5.0/packages/mui-material/src/Autocomplete/index.d.ts » packages/material/src/Autocomplete/index.tsx
   

2. I think I have a beginner-to-intermediate knowledge of SolidJS and I'm starting to think it's not gonna be enough for this specific component. More specifically due to useAutocomplete's dependence on things like useEventCallback, useControlled, useEnhancedEffect, etc. Is there a way for me to convert those via codemod mui2suid?
   • I've tried using pnpm codemod mui2suid --package-name utils --name useEventCallback for example, but got this:

     > [email protected] codemod /home/phili/Code/suid
     > node --no-warnings --loader ts-node/esm packages/codemod/src/bin.ts "mui2suid" "--package-name" "utils" "--name" "useEventCallback"
     
     file:///home/phili/Code/suid/packages/codemod/src/actions/mui2suid.ts:221
       if (!files) throw new Error(`No files found`);
                         ^
     Error: No files found
         at mui2suid (file:///home/phili/Code/suid/packages/codemod/src/actions/mui2suid.ts:221:21)
     

---

Due to my limited expertise, could someone help me on how to transpile from React to Solid the following examples? I think they might help other future contributors as well.

1. Should we create a codemod mui2suid function for useEnhancedEffect/useLayoutEffect based on this Ryan Carniato's comment?
2. useEventCallback transpiles to... totally unnecessary?
3. For useControlled, is it basically simply eliminating useCallback; transforming useRefs to let; and useState to a createSignal?

[evertheylen]

This would be great 😮 . I'm a bit low on time right now, but in a few weeks I think I can try to help.

(Btw, maybe you should mark this as a draft PR?)

[psygo]

(Btw, maybe you should mark this as a draft PR?)

True that. I forgot about that feature.

[kuakman]

I started to look into this to see if I could help contribute with the missing components and it appears to me that the translation from React MUI to SUID is not as simple as just running the codemod mui2suid command.
I'm not an expert on this, nor an expert with solidjs but it would be nice to see an example on how other components have been translated. Were there manual tweaks needed to be applied on those cases?

I also notice that codemod does help but a lot of the code necessary to make the Autocomplete manage its internal states relies on the useAutocomplete hook, which in turn, it has a pretty decent use of React.useRef().
react2solid doesn't seem to be translating these sort constructs (Not saying it should, just pointing it out).

With the latest material-ui-5.5.0 I tried, we have a few new hooks: setRef and useId on top of the one that has been already mentioned (useEventCallback). The types also seems to be way off: There are references to "SyntheticEvent" for example, coming from react along a few others that they won't apply to suid components.

Anyways, is there another set of guidelines we could read to help contribute more effectively to this project?
I'm using mui2suid for the components and react2solid for converting the supporting react constructs (mostly hooks logic like useAutocomplete.js). am I using this properly?

Also, is there a quick way to test the component in isolation while applying changes?
I was planning to create a new page within the site locally, not sure if this is the right approach.

Thanks!