Get Svelte Material UI (@smui) working

[jjeff]

Svelte Material UI (SMUI) is a Svelte wrapper around Google's @material components that implement the Material Design implementation.

I'm able to write my own Svelte components and they work fine. But I have yet to successfully import any 3rd party components. The closest I've come is with SMUI.

I'm able to get SMUI to work without any of its CSS files running. However, when I add a theme, the CSS swaps the fallback HTML 5 elements with more complex Svelte-enabled DIVs and SPANs that implement the Material Design look/feel. However, the appearing elements do not function – their Javascript is not working.

Some elements like Buttons and Textfields work fine. These expose the original HTML element to the user without replacing anything. However, elements such as Switch and Slider do not function. These elements seem to place a simpler HTML 5 element on the page (checkbox and input[type="range"] respectively) and then, when CSS is enabled, the original element is hidden and a more complex interface appears. In my tests, the more complex interface is appearing… but it is not interactive.

Thoughts/notes ideas:

1. Aside from the CSS imports, I'm implementing most of this in the preload script. Since my self-written Svelte scripts work there, I think we ought to be able to get SMUI working there.
2. I've had trouble implementing custom web components in Electron's preload process in the past. But it doesn't appear that Google nor SMUI are actually creating custom elements. They're just using divs and similar.
3. Nonetheless, I did a little experimenting trying to move the scripts in the renderer (index.ts) instead of preload and didn't have any better luck.

[jjeff]

Things to try:

• [x] Try moving current SMUI implementation from preload to renderer and see if that works. (Will need to enable node in renderer.) See #6
• [ ] Can we get @material/switch or @material/slider working minimally in preload without smui? How about in the renderer script?

[jjeff]

Examples of functioning switch and slider:

https://sveltematerialui.com/demo/switch/ https://sveltematerialui.com/demo/slider/