SolidJS•2y ago

Help with Forward Ref and Ref from solid-primatives

I am still pretty new to solidjs and typescipt in general, i am trying to port a library from react to solid and am 90% of the way there - however i am having difficulties with using a forward Ref. There are two sections that are confusing me - that i would like help trying to solve.

Chart.tsx

function ChartComponent<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown,
>(props: ChartProps<TType, TData, TLabel>, ref: Ref<ChartJS<TType, TData, TLabel> | null>) {
  // some component logic
}

export const Chart = forwardRef(ChartComponent) as BaseChartComponent;

function ChartComponent<
    TType extends ChartType = ChartType,
    TData = DefaultDataPoint<TType>,
    TLabel = unknown,
>(props: ChartProps<TType, TData, TLabel>, ref: Ref<ChartJS<TType, TData, TLabel> | null>) {
  // some component logic
}

export const Chart = forwardRef(ChartComponent) as BaseChartComponent;

And

typedCharts.tsx

import {
    Chart as ChartJS,
    LineController,
    BarController,
    RadarController,
    DoughnutController,
    PolarAreaController,
    BubbleController,
    PieController,
    ScatterController,
} from 'chart.js'
import { Chart } from './chart'
import type { ChartProps, ChartJSOrUndefined, TypedChartComponent } from './types'
import type { ChartType, ChartComponentLike } from 'chart.js'

function createTypedChart<T extends ChartType>(type: T, registerables: ChartComponentLike) {
    ChartJS.register(registerables)

    return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>((props, ref) => (
        <Chart {...props} ref={ref} type={type} />
    )) as TypedChartComponent<T>
}

export const Line = /* #__PURE__ */ createTypedChart('line', LineController)

import {
    Chart as ChartJS,
    LineController,
    BarController,
    RadarController,
    DoughnutController,
    PolarAreaController,
    BubbleController,
    PieController,
    ScatterController,
} from 'chart.js'
import { Chart } from './chart'
import type { ChartProps, ChartJSOrUndefined, TypedChartComponent } from './types'
import type { ChartType, ChartComponentLike } from 'chart.js'

function createTypedChart<T extends ChartType>(type: T, registerables: ChartComponentLike) {
    ChartJS.register(registerables)

    return forwardRef<ChartJSOrUndefined<T>, Omit<ChartProps<T>, 'type'>>((props, ref) => (
        <Chart {...props} ref={ref} type={type} />
    )) as TypedChartComponent<T>
}

export const Line = /* #__PURE__ */ createTypedChart('line', LineController)

I am not exactly sure how to solve the forwardRef situation here.

4 Replies

thetarnav•2y ago

there is no need to use forwardref hoc at all just call props.ref() with the ref you want to pass to the parent in solid-primitives there is mergeRefs which can make the types easier but all it's doing is calling props.ref

DaOfficialWizard🧙OP•2y ago

yes - i know, the above snippets are from the react code. yeah - this part is what's confusing me - i've tried. I just get a bunch of errors. Obviously i am missing something 😅 mergeRefs worked very well. I refactored to use an interface and i got it working 🙂 My issue was i wasn't using an interface to pass the props, so the componnet couldn't see the ref attribute.

thetarnav•2y ago

not sure what that means, but I'm glad it's working I think the only important part of refs in solid is: - props.ref is always a function, even if it's typed as a variable - make sure to call it before perent's onMount

DaOfficialWizard🧙OP•2y ago

trying to pass the props as function Component (props, ref) {} wasn't working - when i did: function Component (props: {height: number, ...., ref: Ref<ChartJS | null>}) it started to work.

Gaming

Programming

Help with Forward Ref and Ref from solid-primatives