S
SolidJS•7mo ago
Angius

Having issues with properly typing a higher-order component

I have a, seemingly, simple HOC that adds styles to a solid-element component: 
import type { FunctionComponent } from "component-register";
import type { ComponentType } from "solid-element";
import { onMount } from "solid-js";

export const styled = <P>(css: string) => {
    return (Component: FunctionComponent<P>): ComponentType<P> => {
        return (props, context) => {
            onMount(() => {
                const styleEl = document.createElement("style");
                styleEl.textContent = css;
                context.element.renderRoot.appendChild(styleEl);
            });
            return Component(props, context);
        };
    };
};
import type { FunctionComponent } from "component-register";
import type { ComponentType } from "solid-element";
import { onMount } from "solid-js";

export const styled = <P>(css: string) => {
    return (Component: FunctionComponent<P>): ComponentType<P> => {
        return (props, context) => {
            onMount(() => {
                const styleEl = document.createElement("style");
                styleEl.textContent = css;
                context.element.renderRoot.appendChild(styleEl);
            });
            return Component(props, context);
        };
    };
};
example usage being 
import { type ComponentType, customElement } from "solid-element";
import css from "./icon.css";

const Icon: ComponentType<{ icon: string }> = (props) => {
    return (
        <svg width="24" height="24" class="o-icon" part="icon">
            <title>{props.icon}</title>
            <use href={`/svg/spritesheet.svg#${props.icon}`} />
        </svg>
    );
};

customElement("o-icon",    { icon: "" }, styled(css)(Icon));
import { type ComponentType, customElement } from "solid-element";
import css from "./icon.css";

const Icon: ComponentType<{ icon: string }> = (props) => {
    return (
        <svg width="24" height="24" class="o-icon" part="icon">
            <title>{props.icon}</title>
            <use href={`/svg/spritesheet.svg#${props.icon}`} />
        </svg>
    );
};

customElement("o-icon",    { icon: "" }, styled(css)(Icon));
The issue is that I completely lose the prop types this way, somehow. It always ends up as unknown, so I have to resort to typing customElement<Props>(...) explicitly. Any way to set it up properly?
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?