Struggling with integrating the official Material 3 Web Components into SolidJS. Visit this link for more information.
The main hurdle has been encountering typescript errors despite being able to see the components on the page.
In my index.tsx, I've imported the necessary js files as follows:
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/checkbox/checkbox.js';
import '@material/web/tabs/tabs.js';
import '@material/web/tabs/secondary-tab.js';
import '@material/web/tabs/primary-tab.js';
The issue arises when using Web Component instances, causing type errors:
<md-tabs>
<md-primary-tab>Birds</md-primary-tab>
<md-secondary-tab>Cats</md-secondary-tab>
<md-secondary-tab>Dogs</md-secondary-tab>
</md-tabs>
To work around this, I attempted a solution involving any, but that's not ideal:
declare module "solid-js" {
namespace JSX {
interface IntrinsicElements {
"md-tabs": any
}
}
}
The Material 3 Web Components come with .d.ts files, but incorporating these declarations into SolidJS has proven challenging. Attempts like
/// <reference types="@material/web/all" />I also tried the following approach:
import { MdTabs } from "@material/web/tabs/tabs.js";
import { MdPrimaryTab } from "@material/web/tabs/primary-tab";
import { MdSecondaryTab } from "@material/web/tabs/secondary-tab.js";
declare module "solid-js" {
namespace JSX {
interface IntrinsicElements {
"md-tabs": MdTabs,
'md-primary-tab': MdPrimaryTab,
'md-secondary-tab': MdSecondaryTab
}
}
}
However, errors persist for md-primary-tab and md-secondary-tab (no error for md-tabs). The specific error message includes:
Type 'import("c:/Users/USER/dev/sstart/node_modules/solid-js/types/jsx").JSX.Element' is not assignable to type 'Element'.
Type 'undefined' is not assignable to type 'Element'.ts(2322)
This JSX tag's 'children' prop expects type 'HTMLCollection' which requires multiple children, but only a single child was provided.ts(2745)
A workaround involves the following solution, though it still feels somewhat hacky:
declare module "solid-js" {
namespace JSX {
type MarriedWithChildren = {children:any} | {} | {class?:string, classList?:Record<string,boolean>
interface IntrinsicElements {
"md-tabs": MdTabs | MarriedWithChildren,
'md-primary-tab': MdPrimaryTab | MarriedWithChildren,
'md-secondary-tab': MdSecondaryTab | MarriedWithChildren
}
}
}